/* ========================================================================== Greenspace Landing Pages, shared stylesheet -------------------------------------------------------------------------- ONE copy serves every landing page. The palette is swapped with a single attribute on the tag: sage green and earth moss green and copper Every colour on the page runs through a variable, so that one word repaints backgrounds, buttons, borders, icons and overlays. Nothing else needs to change, and it can be flipped back the same way. Built mobile first. Every media query is min-width, so the phone layout is the base and wider screens add to it, rather than the old approach of a desktop layout patched back down. ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS -------------------------------------------------------------------------- */ :root, :root[data-theme="landscape"] { --brand: #4A6741; --brand-dark: #344B2E; --brand-light: #6E8C63; --brand-pale: #EEF4EC; --accent: #8B6B47; --accent-light: #B08860; --accent-pale: #F6EFE6; --hero-scrim: 18, 26, 16; --hero-overlay: linear-gradient(180deg, rgba(18,26,16,0.74) 0%, rgba(18,26,16,0.52) 42%, rgba(18,26,16,0.78) 100%); --hero-overlay-wide: linear-gradient(100deg, rgba(18,26,16,0.60) 0%, rgba(18,26,16,0.30) 46%, rgba(18,26,16,0.04) 100%), linear-gradient(180deg, rgba(18,26,16,0.42) 0%, rgba(18,26,16,0.26) 45%, rgba(18,26,16,0.52) 100%); --cta-bg: linear-gradient(150deg, #22301E 0%, #344B2E 55%, #4A6741 100%); } :root[data-theme="hardscape"] { --brand: #3A5A35; --brand-dark: #2A4227; --brand-light: #4E7A47; --brand-pale: #EBF2E8; --accent: #B5692A; --accent-light: #D4834A; --accent-pale: #FBF0E6; --hero-scrim: 16, 22, 14; --hero-overlay: linear-gradient(180deg, rgba(16,22,14,0.74) 0%, rgba(16,22,14,0.52) 42%, rgba(16,22,14,0.78) 100%); --hero-overlay-wide: linear-gradient(100deg, rgba(16,22,14,0.62) 0%, rgba(16,22,14,0.32) 46%, rgba(16,22,14,0.05) 100%), linear-gradient(180deg, rgba(16,22,14,0.42) 0%, rgba(16,22,14,0.26) 45%, rgba(16,22,14,0.52) 100%); --cta-bg: linear-gradient(150deg, #171E14 0%, #2A4227 55%, #3A5A35 100%); } :root { --ink: #1E2119; --text: #2B2F27; --muted: #6B7166; --line: #DFDCD2; --line-soft: #ECEAE2; --cream: #F7F5EF; --paper: #FDFCF8; --white: #FFFFFF; --footer-bg: #1B1F18; --gold: #C79A1E; --danger: #A63A22; --danger-bg: #FBEDE9; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --wrap: 1120px; /* Default framing for hero photographs. Each slide can override it, because a 16:9 frame dropped into a tall hero box crops hard and the interesting part of a photo is rarely dead centre. See the slides array in each page's CONFIG block. */ --pan: 50%; } /* -------------------------------------------------------------------------- BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--paper); overflow-x: hidden; padding-bottom: 66px; /* clears the mobile call bar */ } img, video { display: block; max-width: 100%; } a { color: var(--brand); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-title { font-family: var(--serif); font-size: clamp(27px, 5.2vw, 42px); font-weight: 700; line-height: 1.12; color: var(--ink); letter-spacing: -0.005em; text-wrap: balance; } .section-body { color: var(--muted); margin-top: 14px; max-width: 62ch; font-size: 16px; } .section { padding: 60px 0; content-visibility: auto; contain-intrinsic-size: auto 900px; } /* -------------------------------------------------------------------------- STICKY HEADER -------------------------------------------------------------------------- */ .sticky-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--ink); padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sticky-bar .logo { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-light); text-decoration: none; white-space: nowrap; } .sticky-bar .logo img { height: 26px; width: auto; } .sticky-bar .logo span { color: #FFFFFF; } .sticky-phone { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #FFFFFF; text-decoration: none; padding: 7px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.18s; } .sticky-phone:hover { background: var(--accent-light); } .sticky-phone svg { width: 14px; height: 14px; flex: none; } .sticky-phone .lbl { display: none; } @media (min-width: 420px) { .sticky-bar { padding: 10px 16px; gap: 14px; } .sticky-bar .logo { font-size: 16px; gap: 9px; } .sticky-bar .logo img { height: 30px; } .sticky-phone { padding: 8px 14px; font-size: 14px; gap: 7px; } } @media (min-width: 560px) { .sticky-bar { padding: 10px 22px; } .sticky-bar .logo { font-size: 18px; } .sticky-bar .logo img { height: 34px; } .sticky-phone .lbl { display: inline; } } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- Two quite different layouts. PHONE (the default): the video is its own 16:9 band across the top, showing the whole frame with nothing cropped, then the headline, then the form. The form starts high enough that the top of it is visible under the video without scrolling. Supporting copy is ordered below the form, because on a phone the form is the point and the sales copy is the follow-up. DESKTOP (1000px and up): the video goes back to being a full bleed background behind everything, with the copy left and the form right. -------------------------------------------------------------------------- */ .hero { position: relative; padding-top: 46px; background: var(--ink); } .hero-inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 20px 40px; display: flex; flex-direction: column; } /* --- the video band --- */ .hero-media { order: 1; position: relative; /* full bleed out of .hero-inner's padding */ margin: 0 -20px 22px; aspect-ratio: 16 / 9; overflow: hidden; background: #11170F; } .hero-stage { position: absolute; inset: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pan); opacity: 0; transition: opacity 1.6s ease; } .hero-slide:first-child, .hero-slide.on { opacity: 1; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .hero-video.ready { opacity: 1; } /* On a phone the video is the feature, so it is barely tinted. Just enough at the bottom edge to blend into the dark headline block below it. */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,26,16,0.10) 0%, rgba(18,26,16,0) 45%, rgba(18,26,16,0.55) 100%); } /* --- headline --- */ .hero-headline { order: 2; margin-bottom: 20px; } .hero h1 { font-family: var(--serif); font-size: clamp(31px, 8vw, 62px); font-weight: 700; line-height: 1.06; color: #FFFFFF; letter-spacing: -0.012em; text-wrap: balance; } .hero h1 em { font-style: italic; color: var(--accent-light); } /* --- form sits directly under the headline on a phone --- */ .hero .form-card { order: 3; } /* --- everything else follows the form --- */ .hero-support { order: 4; margin-top: 30px; } .hero-sub { color: rgba(255,255,255,0.78); font-size: 16.5px; line-height: 1.68; max-width: 52ch; } .hero-services { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; } .hero-services span { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.88); padding: 5px 11px; font-size: 12.5px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 22px 30px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.16); } .trust-item { text-decoration: none; color: inherit; } .trust-num { font-family: var(--sans); font-size: 31px; font-weight: 600; color: #FFFFFF; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; } .trust-num .star { font-size: 21px; color: var(--gold); letter-spacing: 0; } .trust-label { font-size: 11.5px; color: rgba(255,255,255,0.66); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; margin-top: 6px; line-height: 1.45; } a.trust-item .trust-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); } a.trust-item:hover .trust-label { color: rgba(255,255,255,0.9); text-decoration-color: rgba(255,255,255,0.7); } /* A slightly wider phone or a small tablet: give the video a little more height so it does not become a thin strip on a wide short screen. */ @media (min-width: 620px) and (max-width: 999px) { .hero-media { aspect-ratio: 2 / 1; } } /* --- DESKTOP: video returns to a full bleed background --- */ @media (min-width: 1000px) { .hero { padding-top: 56px; } /* .hero-inner is capped at --wrap and centred. Leaving it positioned would make it the containing block for the absolutely positioned .hero-media, which pins the video inside that 1120px column instead of letting it span the viewport. Going static hands the containing block back to .hero, so the video is full bleed and keeps its widescreen framing. */ .hero-inner { position: static; } .hero-media { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; z-index: 0; } .hero-overlay { background: var(--hero-overlay-wide); } .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: auto 1fr; column-gap: 52px; padding: 56px 20px 60px; align-items: start; } .hero-headline { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-bottom: 0; } .hero-support { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin-top: 16px; } .hero .form-card { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 1; align-self: center; } } /* -------------------------------------------------------------------------- FORM -------------------------------------------------------------------------- */ .form-card { background: var(--cream); border: 1px solid var(--line); padding: 26px 20px 24px; position: relative; } .form-title { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--ink); line-height: 1.15; } .form-sub { font-size: 14px; color: var(--muted); margin-top: 6px; } .form-group { margin-top: 14px; } .form-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 5px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); background: var(--white); font-family: var(--sans); font-size: 16px; /* 16px stops iOS zooming on focus */ color: var(--text); border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color 0.18s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7166' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; cursor: pointer; } .form-group textarea { height: 78px; resize: vertical; } .form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--danger); } .field-error { color: var(--danger); font-size: 12.5px; margin-top: 5px; line-height: 1.45; } .form-row { display: grid; gap: 0; } @media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; gap: 12px; } } .submit-btn { width: 100%; margin-top: 18px; background: var(--brand-dark); color: #FFFFFF; border: none; padding: 15px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: background 0.18s; } .submit-btn:hover:not(:disabled) { background: var(--brand); } .submit-btn:disabled { opacity: 0.65; cursor: default; } .form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.55; } .form-note a { color: var(--brand); font-weight: 600; } .submit-error { display: none; margin-top: 14px; padding: 13px 15px; background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); font-size: 13.5px; line-height: 1.55; } .submit-error.visible { display: block; } .submit-error a { color: var(--danger); font-weight: 700; } .form-fields.hidden { display: none; } .thank-you { display: none; text-align: center; padding: 18px 0; } .thank-you.visible { display: block; } .thank-you-icon { font-size: 42px; margin-bottom: 10px; } .thank-you h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; } .thank-you p { font-size: 14.5px; color: var(--muted); line-height: 1.65; } .form-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .call-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 2px solid var(--accent); color: var(--accent); background: transparent; text-decoration: none; padding: 13px; font-size: 15px; font-weight: 600; transition: background 0.18s, color 0.18s; } .call-btn:hover { background: var(--accent); color: #FFFFFF; } .call-btn svg { width: 15px; height: 15px; } /* -------------------------------------------------------------------------- PROOF STRIP -------------------------------------------------------------------------- */ .proof-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px; } .proof-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 12px; } .proof-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); font-weight: 500; } .proof-item svg { width: 18px; height: 18px; color: var(--brand); flex: none; } @media (min-width: 700px) { .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 14px 32px; } } @media (min-width: 1000px) { .proof-inner { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- SERVICES -------------------------------------------------------------------------- */ .svc-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; } .svc-card { background: var(--paper); padding: 26px 22px; text-decoration: none; color: inherit; display: block; transition: background 0.2s; } .svc-card:hover { background: var(--brand-pale); } .svc-icon { margin-bottom: 14px; } .svc-icon svg { width: 38px; height: 38px; } .svc-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .svc-card p { font-size: 14.5px; color: var(--muted); line-height: 1.62; } @media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- PACKAGES -------------------------------------------------------------------------- */ .pkg-grid { display: grid; gap: 18px; margin-top: 34px; } .pkg-card { border: 1px solid var(--line); background: var(--white); padding: 26px 22px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .pkg-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30,33,25,0.09); } .pkg-card.featured { border-color: var(--accent); border-width: 2px; } .pkg-flag { align-self: flex-start; background: var(--accent); color: #FFFFFF; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 14px; } .pkg-name { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.15; } .pkg-tag { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 5px; } .pkg-desc { font-size: 14.5px; color: var(--muted); margin-top: 12px; line-height: 1.62; } .pkg-list { list-style: none; margin-top: 16px; display: grid; gap: 9px; } .pkg-list li { display: flex; gap: 9px; font-size: 14px; color: var(--text); line-height: 1.5; } .pkg-list svg { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 3px; } .pkg-best { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--muted); line-height: 1.55; } .pkg-best strong { color: var(--ink); } .pkg-cta { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--brand); } .pkg-card:hover .pkg-cta { color: var(--accent); } @media (min-width: 860px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- REVIEWS -------------------------------------------------------------------------- */ .reviews-grid { display: grid; gap: 16px; margin-top: 34px; } .review-card { background: var(--white); border: 1px solid var(--line); padding: 24px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(30,33,25,0.10); border-color: var(--brand-light); } .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; } .review-text { font-size: 14.5px; color: var(--text); line-height: 1.68; font-style: italic; flex: 1; } .reviewer { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 16px; } .reviewer-loc { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .review-link { font-size: 12.5px; font-weight: 600; color: var(--brand); margin-top: 12px; transition: color 0.18s; } .review-card:hover .review-link { color: var(--accent); } @media (min-width: 720px) { .reviews-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1060px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- WHY US -------------------------------------------------------------------------- */ .why-section { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .why-grid { display: grid; gap: 36px; margin-top: 8px; } .why-points { list-style: none; margin-top: 26px; } .why-points li { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); } .why-points li:last-child { border-bottom: none; } .why-check { width: 21px; height: 21px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; } .why-check svg { width: 11px; height: 11px; color: #FFFFFF; } .why-text strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .why-text span { font-size: 14px; color: var(--muted); line-height: 1.58; } .quote-feature { background: var(--brand-dark); padding: 32px 26px; position: relative; overflow: hidden; } .quote-feature::before { content: '\201C'; position: absolute; top: -26px; left: 14px; font-family: var(--serif); font-size: 150px; color: rgba(255,255,255,0.07); line-height: 1; } .quote-feature blockquote { position: relative; font-family: var(--serif); font-size: 21px; font-style: italic; color: rgba(255,255,255,0.93); line-height: 1.5; } .quote-author { font-size: 13.5px; font-weight: 600; color: var(--accent-light); margin-top: 20px; } .quote-loc { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 3px; } .quote-link { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); } .quote-feature a:hover .quote-link, a.quote-feature:hover .quote-link { color: #FFFFFF; } @media (min-width: 940px) { .why-grid { grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; } } /* -------------------------------------------------------------------------- PROCESS -------------------------------------------------------------------------- */ .process-grid { display: grid; gap: 26px; margin-top: 34px; } .process-step { text-align: left; } .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #FFFFFF; font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; } .process-step h3 { font-size: 16.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .process-step p { font-size: 14px; color: var(--muted); line-height: 1.6; } @media (min-width: 660px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 30px 34px; } } @media (min-width: 1000px) { .process-grid { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq-section { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .faq-list { max-width: 780px; margin: 32px auto 0; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: none; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); padding: 18px 34px 18px 0; cursor: pointer; position: relative; line-height: 1.45; } .faq-q::after { content: ''; position: absolute; right: 6px; top: 25px; width: 9px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform 0.22s; } .faq-item.open .faq-q::after { transform: rotate(-135deg); top: 28px; } .faq-a { display: none; padding: 0 0 20px; } .faq-item.open .faq-a { display: block; } .faq-a p { font-size: 15px; color: var(--muted); line-height: 1.7; } .faq-a p + p { margin-top: 12px; } .faq-a a { color: var(--brand); font-weight: 600; } /* -------------------------------------------------------------------------- CROSS SELL -------------------------------------------------------------------------- */ .cross-grid { display: grid; gap: 14px; margin-top: 30px; } .cross-card { border: 1px solid var(--line); background: var(--white); padding: 22px 20px; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; } .cross-card:hover { border-color: var(--brand); background: var(--brand-pale); } .cross-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .cross-card p { font-size: 14px; color: var(--muted); line-height: 1.58; } .cross-card .go { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--brand); } @media (min-width: 760px) { .cross-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- BOTTOM CTA -------------------------------------------------------------------------- */ .cta-section { background: var(--cta-bg); padding: 66px 20px; text-align: center; content-visibility: auto; contain-intrinsic-size: auto 420px; } .cta-inner { max-width: 640px; margin: 0 auto; } .cta-section h2 { font-family: var(--serif); font-size: clamp(28px, 6vw, 46px); font-weight: 700; color: #FFFFFF; line-height: 1.12; text-wrap: balance; } .cta-section p { color: rgba(255,255,255,0.76); margin-top: 16px; font-size: 16px; line-height: 1.65; } .cta-buttons { display: grid; gap: 12px; margin-top: 30px; } .btn-primary { background: var(--accent); color: #FFFFFF; text-decoration: none; padding: 15px 32px; font-size: 15px; font-weight: 600; letter-spacing: 0.03em; transition: background 0.18s; display: block; } .btn-primary:hover { background: var(--accent-light); } .btn-outline { background: transparent; border: 2px solid rgba(255,255,255,0.45); color: #FFFFFF; text-decoration: none; padding: 13px 32px; font-size: 15px; font-weight: 600; transition: border-color 0.18s, background 0.18s; display: block; } .btn-outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.08); } @media (min-width: 560px) { .cta-buttons { grid-auto-flow: column; justify-content: center; gap: 14px; } .btn-primary, .btn-outline { display: inline-block; } } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ .footer { background: var(--footer-bg); padding: 34px 20px 30px; text-align: center; } .footer-logo { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--brand-light); } .footer-logo span { color: #FFFFFF; } .footer-info { font-size: 12.5px; color: rgba(255,255,255,0.42); line-height: 1.85; margin-top: 10px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 16px; } .footer-links a { font-size: 12.5px; color: rgba(255,255,255,0.5); text-decoration: none; } .footer-links a:hover { color: rgba(255,255,255,0.85); text-decoration: underline; } /* -------------------------------------------------------------------------- MOBILE CALL BAR -------------------------------------------------------------------------- */ .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.14); padding: 9px 12px; display: flex; gap: 9px; } .mobile-cta a { flex: 1; text-align: center; padding: 13px 6px; font-size: 14.5px; font-weight: 600; text-decoration: none; } .mobile-cta .m-call { background: var(--accent); color: #FFFFFF; } .mobile-cta .m-quote { background: rgba(255,255,255,0.10); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.3); } @media (min-width: 900px) { .mobile-cta { display: none; } body { padding-bottom: 0; } } /* -------------------------------------------------------------------------- MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }