/* ===================================================================== Convertum — shared content stylesheet Used by content pages, blog articles and services (similar design). --------------------------------------------------------------------- THEME COLOR — defined in ONE place only: the --accent token below. Everything else (--accent-ink, --accent-soft) derives from --accent, so changing the single --accent value re-themes the whole page. Per-site / per-client override: Set a different colour without touching this file by overriding --accent on the page root, e.g. (one site) (another site) In Django this will be injected per domain, for example: ===================================================================== */ /* ---------- Web fonts (self-hosted, no external request) ---------- Inter -> UI, navigation and headings Newsreader -> article prose (comfortable long-form reading) font-display: swap keeps text visible while the font loads. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.da03732a27e1.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.2ede57db1a3a.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.8ca0a5155296.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-800.900ae45e40b8.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader-400.48b72fa720bf.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/newsreader-400-italic.a6974fdd8f8b.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/newsreader-600.7cc0808d6d69.woff2") format("woff2"); } /* ---------- Design tokens ---------- */ :root { --bg: #ffffff; --surface: #fafafa; /* Full-bleed alternating section band background. */ --band: #fcfcfc; --text: #1a1a1a; --text-soft: #5b5b5b; --text-faint: #8a8a8a; --border: #ececec; /* The single brand-colour source. Override this one value per site. */ --accent: #ffc158; /* Derived — do not hardcode a colour here, always reference --accent. */ --accent-ink: var(--accent); --accent-soft: var(--accent); /* Soft tints of the brand colour for icon tiles / highlights (auto-derived). */ --accent-tint: color-mix(in srgb, var(--accent) 18%, #ffffff); --accent-tint-strong: color-mix(in srgb, var(--accent) 32%, #ffffff); /* A deep, readable brand ink for icon strokes on tinted tiles (auto-derived). */ --accent-ink-deep: color-mix(in srgb, var(--accent) 48%, #181818); /* Map-pin glyph used as a CSS mask (so it tints with --accent-ink-deep). */ --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); /* Check-in-circle glyph (outline) used as a CSS mask. */ --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); /* A readable ink for text/icons placed on the accent colour. */ --on-accent: #1a1a1a; /* Elevation */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -20px rgba(16, 24, 40, 0.30); --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 24px 48px -28px rgba(16, 24, 40, 0.38); --max: 1000px; /* reading column width */ --max-page: 1344px; /* article container = ~1000 text + gap + TOC rail */ --max-wide: 1344px; /* header / footer span the full page width */ --header-bg: #212121; /* dark bar background (header & footer) */ --radius: 14px; /* Inter for UI/headings, Newsreader for prose; system fonts as fallback */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } .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; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.7; font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* lets full-bleed section bands extend to the viewport edges safely */ } /* ---------- Top bar (dark) ---------- */ .topbar { position: sticky; top: 0; z-index: 1100; /* above Leaflet panes/controls (max ~1000) so the map never overlaps the sticky header */ background: var(--header-bg); } .topbar__inner { max-width: var(--max-wide); margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { flex: none; font-weight: 800; letter-spacing: -0.02em; font-size: 20px; text-decoration: none; color: #fff; } .brand span { color: var(--accent); } /* Logo image — swap the placeholder for a real in production. Displayed at 160×100 px. Provide an SVG (best) or a PNG @2x of 320×200 px. */ .brand__logo { display: block; width: 160px; height: 100px; object-fit: contain; } /* Placeholder look (dashed box showing the target size) — remove once a real image is set. */ .brand__logo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 6px; box-sizing: border-box; } .nav { display: flex; gap: 26px; } .nav a { position: relative; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 15px; font-weight: 400; padding-bottom: 3px; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .nav a:hover { color: #fff; } .nav a.is-active { color: #fff; } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; } /* ---------- Contact block (phone + hours) — shared by header & footer ---------- */ .contact { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-decoration: none; } .contact__phone { color: #fff; font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; } .contact__hours { color: rgba(255, 255, 255, 0.55); font-size: 13px; } /* ---------- Article ---------- */ .wrap { max-width: var(--max-page); margin: 0 auto; padding: 0 24px; } /* Keep the main reading content at the 1000px column width, left-aligned, so the sticky TOC rail sits in the right margin beside the article body. (The .article-grid itself spans full width = 1000 text + gap + TOC.) */ .breadcrumbs, .article-head, .hero, .newsletter, .related { max-width: var(--max); } .article-head { padding: 64px 0 40px; border-bottom: 1px solid var(--border); } .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 18px; } h1 { font-size: 42px; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 20px; font-weight: 800; } .lede { font-family: var(--serif); font-size: 22px; line-height: 1.6; color: var(--text-soft); margin: 0 0 32px; } .meta { display: flex; align-items: center; gap: 14px; color: var(--text-faint); font-size: 15px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #f59e0b); flex: none; } .meta__author { color: var(--text); font-weight: 600; } .dot { color: var(--border); } /* ---------- Hero image ---------- */ .hero { margin: 56px 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 0% 0%, #fef0d2 0%, transparent 50%), radial-gradient(120% 120% at 100% 100%, #fde6c4 0%, transparent 50%), var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; } /* ---------- Body typography ---------- */ .body { padding: 0; } /* Article prose in serif (Newsreader) for comfortable long-form reading; headings, boxes and UI stay on Inter. */ .body p, .body li { font-family: var(--serif); font-size: 19px; } .body p { margin: 0 0 26px; line-height: 1.75; } .body strong { font-weight: 600; } .body h2 { font-size: 28px; letter-spacing: -0.02em; margin: 48px 0 16px; font-weight: 700; } .body h3 { font-size: 21px; margin: 36px 0 12px; font-weight: 700; } .body a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: border-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1); } .body a:hover { border-color: var(--accent-ink); } .body ul, .body ol { margin: 0 0 26px; padding-left: 24px; } .body li { margin-bottom: 10px; } blockquote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--text); line-height: 1.5; } figure { margin: 36px 0; } figure .ph { border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; } figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--text-faint); } .callout { margin: 36px 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 17px; color: var(--text-soft); } .callout strong { color: var(--text); } hr { border: none; border-top: 1px solid var(--border); margin: 56px 0; } /* ---------- Tags + share ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 56px; } .tags .tag { font-size: 13px; color: #000; background: #f0f0f0; border: none; border-bottom: none; box-shadow: none; padding: 4px 10px; border-radius: 10px; text-decoration: none; transition: all .25s cubic-bezier(.4, 0, .2, 1); } .tags .tag:hover { color: #000; background: var(--accent); } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { padding: 28px 0 0; font-size: 14px; color: var(--text-faint); } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .breadcrumbs a { color: var(--text-soft); text-decoration: none; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs li[aria-current="page"] { color: var(--text-faint); } .breadcrumbs .sep { color: var(--border); } /* ---------- Key takeaways ---------- */ .takeaways { margin: 0 0 56px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); } .takeaways h2 { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 14px; color: var(--text); } .takeaways ul { margin: 0; padding-left: 20px; } .takeaways li { margin-bottom: 8px; color: var(--text-soft); font-size: 17px; } .takeaways li:last-child { margin-bottom: 0; } /* ---------- Table of contents ---------- */ .toc { margin: 0 0 56px; padding: 22px 26px; border: 1px solid var(--border); border-radius: var(--radius); } .toc__label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; } .toc ol { margin: 0; padding-left: 20px; } .toc li { margin-bottom: 8px; } .toc a { color: var(--text-soft); text-decoration: none; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .toc a:hover { color: var(--text); } .toc a.is-active { color: var(--text); font-weight: 600; } html { scroll-behavior: smooth; } :target { scroll-margin-top: 90px; } /* ---------- Article layout: main column + sticky TOC rail ---------- */ /* Two TOCs share the same markup: - .toc--inline : the boxed block shown on mobile (in normal flow) - .toc--rail : the sticky sidebar shown on desktop (right column) Only one is visible at a time. */ .article-main { min-width: 0; } /* let the grid column shrink (tables etc.) */ .toc--rail { display: none; } /* desktop-only; enabled in the media query */ @media (min-width: 901px) { .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 56px; } .article-main { grid-column: 1; grid-row: 1; } .toc-rail { grid-column: 2; grid-row: 1; } /* full-height column for sticky */ .toc--inline { display: none; } /* hide the mobile TOC on desktop */ .toc--rail { display: block; position: sticky; top: 90px; margin: 0; padding: 40px 0 2px 22px; /* extra room above the "ON THIS PAGE" heading */ border: none; border-left: 1px solid var(--border); border-radius: 0; } .toc--rail .toc__label { margin: 0 0 18px; font-size: 11px; } /* smaller label */ /* roomier, airy spacing in the sticky rail */ .toc--rail ol { padding-left: 22px; } .toc--rail li { margin-bottom: 16px; line-height: 1.4; padding-left: 4px; } .toc--rail li:last-child { margin-bottom: 0; } .toc--rail a { line-height: 1.4; font-size: 14px; } /* smaller TOC items */ .toc--rail a.is-active { color: var(--text); font-weight: 600; } } /* ---------- Author card ---------- */ .author-card { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 56px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .author-card .avatar { width: 56px; height: 56px; } .author-card__name { font-weight: 700; font-size: 18px; margin: 0 0 4px; } .author-card__role { color: var(--text-faint); font-size: 14px; margin: 0 0 10px; } .author-card__bio { color: var(--text-soft); font-size: 16px; margin: 0; line-height: 1.6; } /* ---------- Related articles ---------- */ .related { /* top gap is owned by the previous block's 56px margin (consistent rhythm); keep a little extra room at the bottom before the footer */ padding: 0 0 64px; } .related__title { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 24px; font-weight: 700; } .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1); } .card:hover { border-color: var(--accent); transform: translateY(-2px); } .card__thumb { aspect-ratio: 16 / 9; background: var(--surface); border-bottom: 1px solid var(--border); } .card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; } .card__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .card__heading { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 8px 0 0; } .card__excerpt { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); /* clamp to 2 lines so cards stay equal height */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- FAQ ---------- */ .faq { margin: 0 0 56px; /* keep the 56px block rhythm before the next section */ padding: 0; } .faq__title { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 8px; font-weight: 700; } .faq__item { border-bottom: 1px solid var(--border); } .faq__item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 19px; font-weight: 600; color: var(--text); transition: color .25s cubic-bezier(.4, 0, .2, 1); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; line-height: 1; color: var(--accent-ink); transition: transform .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1); } .faq__item[open] summary::after { content: "\2212"; } /* minus */ .faq__item summary:hover { color: var(--accent-ink); } .faq__answer { padding: 0 0 24px; color: var(--text-soft); font-size: 17px; line-height: 1.65; } .faq__answer p { margin: 0; } /* ---------- CTA ---------- */ .cta { margin: 56px 0; display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .cta__content { padding: 44px; display: flex; flex-direction: column; justify-content: center; } .cta__title { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 12px; } .cta__text { color: var(--text-soft); font-size: 17px; line-height: 1.6; margin: 0 0 26px; } .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; padding: 12px 24px; border-radius: 10px; text-decoration: none; border-bottom: none; cursor: pointer; transition: all .25s cubic-bezier(.4, 0, .2, 1); } .btn--primary { background: var(--accent); color: #000; border: 1px solid var(--accent); } .btn--primary:hover { filter: brightness(0.94); } .btn--secondary { background: #fff; color: #000; border: 1px solid var(--border); } .btn--secondary:hover { border-color: var(--text-faint); } /* keep buttons readable when nested inside the article body links rule */ .body a.btn { color: #000; border-bottom: none; } .cta__media { min-height: 240px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 14px; background: radial-gradient(120% 120% at 100% 0%, #ffe6bc 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #fff2d6 0%, transparent 55%), var(--accent); } /* Compact CTA — same design as the big one, just smaller (e.g. mid-article) */ .cta--sm { margin: 36px 0; } .cta--sm .cta__content { padding: 28px 32px; } .cta--sm .cta__title { font-size: 20px; margin: 0 0 8px; } .cta--sm .cta__text { font-size: 15px; margin: 0 0 18px; } .cta--sm .cta__media { min-height: 0; } /* ---------- Quick answer ---------- */ .quick-answer { margin: 0 0 56px; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: #fffaf0; } .quick-answer h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 10px; } .quick-answer p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text); } /* ---------- Reviewed badge ---------- */ .reviewed { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-faint); margin-top: 6px; } .reviewed::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; } /* ---------- Stats ---------- */ .stats { margin: 36px 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .stat { padding: 26px 20px; text-align: center; border-right: 1px solid var(--border); } .stat:last-child { border-right: none; } .stat__num { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; } .stat__label { font-size: 14px; color: var(--text-soft); margin-top: 8px; line-height: 1.4; } /* ---------- Comparison table ---------- */ .compare { margin: 36px 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); background: #fff; } .compare table { width: 100%; border-collapse: collapse; font-size: 16px; } .compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background-color .2s ease; } .compare thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 700; background: var(--surface); padding-top: 18px; padding-bottom: 18px; } .compare thead th:not(:first-child) { text-align: center; } .compare tbody td:first-child { font-weight: 600; } .compare tbody tr:last-child td { border-bottom: none; } /* Featured Mr. Keyman column */ .compare th:nth-child(2), .compare td:nth-child(2) { background: var(--accent-tint); border-left: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); border-right: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); } .compare thead th:nth-child(2) { color: var(--accent-ink-deep); background: var(--accent-tint-strong); box-shadow: inset 0 3px 0 var(--accent); } .compare__pill { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle; } .compare tbody tr:hover td { background: #fcfcfc; } .compare tbody tr:hover td:nth-child(2) { background: var(--accent-tint-strong); } /* ---------- Steps / HowTo ---------- */ .steps { margin: 36px 0; padding: 0; list-style: none; counter-reset: step; } .steps li { position: relative; padding: 2px 0 24px 54px; } .steps li:last-child { padding-bottom: 0; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #000; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; } .steps h3 { margin: 4px 0 6px; font-size: 18px; } .steps p { margin: 0; color: var(--text-soft); font-size: 16px; } /* ---------- Glossary ---------- */ .glossary dl { margin: 16px 0 0; border-top: 1px solid var(--border); } .glossary dt { font-weight: 700; margin-top: 18px; } .glossary dd { margin: 4px 0 18px; color: var(--text-soft); } /* ---------- Article actions (tags + share) ---------- */ .article-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 56px; } .article-actions .tags { margin-bottom: 0; } .share { display: flex; gap: 8px; } .share a { width: 38px; height: 38px; border-radius: 10px; background: #f0f0f0; color: #000; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-bottom: none; font-size: 13px; font-weight: 700; transition: background .25s cubic-bezier(.4, 0, .2, 1); } .share a:hover { background: var(--accent); } /* ---------- Sources ---------- */ .sources { margin: 0 0 56px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .sources h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; } .sources ol { margin: 0; padding-left: 20px; } .sources li { margin-bottom: 10px; font-size: 15px; color: var(--text-soft); } .sources li:last-child { margin-bottom: 0; } .sources a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent-soft); } /* ---------- Newsletter ---------- */ .newsletter { margin: 0 0 56px; padding: 40px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .newsletter h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; } .newsletter p { color: var(--text-soft); margin: 0 0 22px; } .newsletter form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; } .newsletter input { flex: 1; padding: 12px 16px; font-size: 15px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; outline: none; transition: border-color .25s cubic-bezier(.4, 0, .2, 1); } .newsletter input:focus { border-color: var(--accent); } /* ---------- Footer (dark) ---------- */ footer { background: var(--header-bg); color: rgba(255, 255, 255, 0.7); } .footer__inner { max-width: var(--max-wide); margin: 0 auto; padding: 40px 28px; } .footer__top { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer__nav { display: flex; flex-wrap: wrap; gap: 24px; } .footer__nav a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 15px; font-weight: 400; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .footer__nav a:hover { color: var(--accent); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.5); } .footer__legal { display: flex; gap: 18px; } .footer__legal a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color .25s cubic-bezier(.4, 0, .2, 1); } .footer__legal a:hover { color: var(--accent); } /* ---------- Blog index ---------- */ /* The blog index has no reading column / TOC rail, so it uses one centered container that's wider than the article body. */ .blog { max-width: 1200px; margin: 0 auto; } .blog .breadcrumbs { max-width: none; } /* on the blog index the newsletter spans the full content width (not capped at --max) */ .blog .newsletter { max-width: none; } .blog-head { max-width: none; padding: 48px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 44px; } .blog-head h1 { margin: 14px 0 0; } .blog-head .lede { max-width: 720px; margin-top: 18px; } /* Category filter — plain anchor links, zero JS */ .blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; } /* same chip design as the article tags, transparent background, keep the border */ .blog-filter a { display: inline-block; padding: 6px 14px; background: transparent; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: all .25s cubic-bezier(.4, 0, .2, 1); } .blog-filter a:hover { background: #f0f0f0; border-color: var(--text-faint); color: #000; } .blog-filter a.is-active { background: var(--accent); border-color: var(--accent); color: #1a1a1a; } /* Featured post — large horizontal card */ .featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 48px; text-decoration: none; color: inherit; transition: border-color .25s cubic-bezier(.4, 0, .2, 1); } .featured:hover { border-color: var(--accent); } .featured__media { aspect-ratio: 16 / 9; background: var(--surface); border-right: 1px solid var(--border); } .featured__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; } .featured__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--surface); padding: 5px 12px; border-radius: 10px; /* standard chip/tag rounding across the project */ margin-bottom: 18px; } .featured__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 14px; } .featured__excerpt { color: var(--text-soft); font-size: 17px; line-height: 1.6; margin: 0 0 20px; } /* Post grid */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0 0 56px; } /* per-card meta line (date · read time) — pinned to the bottom of the card */ .card__meta { margin: 12px 0 0; margin-top: auto; /* push to the floor regardless of excerpt length */ padding-top: 14px; /* keep a minimum gap above it */ font-size: 13px; color: var(--text-faint); } /* Empty state when there are no posts yet */ .blog-empty { color: var(--text-soft); grid-column: 1 / -1; padding: 24px 0; } /* Pagination — anchor links, zero JS */ .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 72px; } .pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; font-weight: 600; color: var(--text-soft); text-decoration: none; transition: border-color .25s, color .25s; } .pagination a:hover { border-color: var(--text-faint); color: var(--text); } .pagination .is-active { background: var(--accent); border-color: var(--accent); color: #1a1a1a; } .pagination .is-disabled { opacity: 0.4; pointer-events: none; } /* ---------- Service page ---------- */ .service { max-width: 1200px; margin: 0 auto; } /* match the blog content width */ /* One typeface (Inter) for ALL text on the service page — no serif mixing. */ .service, .service h1, .service h2, .service h3, .service h4, .service p, .service li, .service a, .service span, .service .lede, .service .section-lede, .service label, .service summary, .service button, .service input, .service th, .service td, .service dt, .service dd { font-family: var(--font); } /* Section rhythm: generous vertical padding + alternating full-bleed bands so the page reads as distinct, separated blocks instead of one flat sheet. */ .service > section { position: relative; margin: 0; padding: 90px 0; } .service > .service-hero { padding: 22px 0 56px; } /* Tinted full-bleed band behind alternating sections (breaks out of the 1120px column to the viewport edges; body has overflow-x: clip). */ .service > section.band::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; margin-left: -50vw; background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .service .cta { margin: 90px 0; } .service .faq { margin: 0; } /* Compact quick-answer on the service page (smaller than the article version) */ .service .quick-answer { margin: 0 0 36px; padding: 18px 22px; max-width: 760px; } .service .quick-answer h2 { font-size: 12px; letter-spacing: 0.08em; margin: 0 0 8px; } .service .quick-answer p { font-size: 15.5px; line-height: 1.55; } /* Quick-answer placed inside the hero's left column (fills the space by the quiz) */ .service-hero .quick-answer { margin: 28px 0 0; max-width: none; } /* White guide cards so they pop on the #fcfcfc band */ .service .card { background: #fff; } .service .card__thumb { background: #fff; } .service .section-eyebrow { display: block; margin: 0 0 14px; } .service h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 12px; } .service .section-lede { color: var(--text-soft); font-size: 18px; margin: 0 0 28px; max-width: 680px; } /* Hero: copy + quote card */ .service-hero { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; padding: 40px 0 8px; } .service-hero::before { content: ""; position: absolute; top: -60px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, var(--accent-tint) 0%, transparent 68%); opacity: 0.7; pointer-events: none; } .service-hero > * { position: relative; } .service-hero h1 { margin: 12px 0 18px; } .service-hero .lede { font-size: 17px; line-height: 1.6; margin: 0 0 26px; } .key-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; } .key-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); } .key-facts svg { width: 16px; height: 16px; flex: none; stroke: var(--accent-ink-deep); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-rating { margin: 18px 0 0; color: var(--text-soft); font-size: 15px; } .hero-rating strong { color: var(--text); } .last-updated { margin: 6px 0 0; color: var(--text-faint); font-size: 13px; } /* Reviews wall (the /reviews page) — reuse the .review card in a wrapping grid */ .reviews-wall { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 22px; margin: 28px 0 0; } .reviews-wall .review { flex: initial; max-width: none; } @media (max-width: 980px) { .reviews-wall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .reviews-wall { grid-template-columns: 1fr; } } /* Lead-gen quiz card (multi-step quote request) */ .quiz { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 26px 24px; box-shadow: var(--shadow-lg); } .service-hero .quiz { justify-self: center; align-self: center; width: 100%; max-width: 440px; } .quiz__head { margin: 0 0 20px; } .quiz__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; } .quiz__bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .quiz__bar i { display: block; height: 100%; width: 33.33%; background: var(--accent); border-radius: inherit; transition: width .4s cubic-bezier(.4, 0, .2, 1); } .quiz__count { display: block; margin: 9px 0 0; font-size: 13px; font-weight: 600; color: var(--text-faint); } .quiz__step { display: none; } .quiz__step.is-active { display: block; animation: quizIn .3s ease both; } @keyframes quizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .quiz__q { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; } .quiz__hint { color: var(--text-soft); font-size: 13px; margin: 0 0 14px; } .quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quiz__options--single { grid-template-columns: 1fr; } .quiz__option { appearance: none; -webkit-appearance: none; text-align: left; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--text); background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; line-height: 1.35; transition: border-color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease; } .quiz__option:hover { border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .quiz__option.is-selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); } .quiz__field { margin: 0 0 10px; } .quiz__field:first-child { margin-top: 2px; } .quiz__label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin: 0 0 6px; } .quiz__input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 14px; background: #fff; } .quiz__input::placeholder { color: var(--text-faint); } .quiz__input:focus { outline: none; border-color: var(--accent); } .quiz__nav { display: flex; align-items: center; justify-content: flex-start; margin: 18px 0 0; } .quiz__back { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--text-soft); padding: 6px 2px; } .quiz__back:hover { color: var(--text); } .quiz__back[hidden] { display: none; } .quiz__submit { width: 100%; justify-content: center; margin: 6px 0 0; padding: 16px 24px; font-size: 17px; font-weight: 700; } .quiz__foot { text-align: center; margin: 14px 0 0; font-size: 15px; color: var(--text-soft); } .quiz__foot a { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .quiz__foot a:hover { color: var(--accent-ink-deep); } /* "or call now" block under the quiz (call button + hours + key-facts) */ .quiz__contact { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); text-align: center; } .quiz__or { display: block; margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); } .quiz__call { width: 100%; justify-content: center; padding: 15px 24px; font-size: 17px; font-weight: 700; } .quiz__hours { margin: 12px 0 0; font-size: 14px; color: var(--text-soft); } .quiz__contact .key-facts { margin: 16px 0 0; justify-content: center; gap: 8px; } .quiz__contact .key-facts span { font-size: 13px; padding: 6px 11px; } /* Trust badges */ .badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .badge { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border-color .25s ease; } .badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); } .badge__icon { width: 48px; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-tint); margin: 0 0 18px; } .badge__icon svg { width: 24px; height: 24px; stroke: var(--accent-ink-deep); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .badge h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; } .badge p { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin: 0; } /* Services offered — grouped lists */ .service-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .service-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); font-weight: 700; margin: 0 0 14px; } .service-group ul { list-style: none; margin: 0; padding: 0; } .service-group li { margin: 0 0 10px; } .service-group a { color: var(--text); text-decoration: none; font-weight: 500; transition: color .2s ease; } .service-group a:hover { color: var(--accent-ink); } /* Process steps */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; } .step { position: relative; padding: 0; } .step__num { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #1a1a1a; font-weight: 800; font-size: 17px; margin: 0 0 14px; } .step h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; } .step p { color: var(--text-soft); font-size: 15px; line-height: 1.6; margin: 0; } /* Service areas — checklist + embedded map */ .areas-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: stretch; margin: 28px 0 0; } .areas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; align-content: start; list-style: none; margin: 0; padding: 0; } .areas li { margin: 0; } .areas a { display: flex; align-items: center; gap: 10px; padding: 4px; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; transition: color .2s ease; } .areas a::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--accent-ink-deep); -webkit-mask: var(--icon-check-circle) center / contain no-repeat; mask: var(--icon-check-circle) center / contain no-repeat; } .areas a:hover { color: var(--accent-ink-deep); } .areas-map { position: relative; overflow: hidden; z-index: 0; /* own stacking context so Leaflet's high z-index panes/controls stay contained */ border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); min-height: 320px; height: 100%; background: var(--surface); } .areas-map iframe { display: block; width: 100%; height: 100%; min-height: 0; } /* Leaflet service-area map — city labels on accent background, black text */ .areas-map .leaflet-container { width: 100%; height: 100%; min-height: 320px; background: var(--surface); } .leaflet-tooltip.city-label { background: var(--accent); color: #1a1a1a; border: none; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 6px; white-space: nowrap; } .leaflet-tooltip.city-label::before { display: none; } /* About */ .about { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; } .about ul { list-style: none; margin: 18px 0 0; padding: 0; } .about li { position: relative; padding-left: 28px; margin: 0 0 12px; color: var(--text); } .about li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 800; } /* About photo (image placeholder) */ .about__media { justify-self: center; width: 100%; max-width: 340px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--accent-ink-deep); font-size: 14px; font-weight: 600; background: radial-gradient(120% 120% at 100% 0%, var(--accent-tint) 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, var(--accent-tint) 0%, transparent 55%), var(--surface); } .about__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Reviews */ .reviews__head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 0 28px; } .rating-big { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .rating-stars { color: var(--accent); font-size: 20px; letter-spacing: 2px; } .rating-meta { color: var(--text-soft); font-size: 15px; } .reviews__nav { margin-left: auto; display: flex; gap: 10px; } .reviews__arrow { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease; } .reviews__arrow:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink-deep); } .reviews__arrow:active { transform: scale(.93); } /* Horizontal scroll-snap carousel */ .reviews__grid { display: flex; gap: 22px; align-items: flex-start; /* each card sizes to its own content height */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4px; padding: 4px; } .reviews__grid::-webkit-scrollbar { display: none; } .review { flex: 0 0 340px; max-width: 86%; scroll-snap-align: start; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px 26px; display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border-color .25s ease; } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); } .review__stars { color: var(--accent); letter-spacing: 2px; margin: 0 0 12px; } .review__text { color: var(--text); font-size: 15px; line-height: 1.6; margin: 0 0 16px; } .review__author { margin-top: 14px; font-weight: 600; font-size: 15px; } .review__car { color: var(--text-faint); font-size: 13px; margin-top: 2px; } /* Long-form SEO copy + cities-we-serve links */ .longform p { color: var(--text-soft); font-size: 17px; line-height: 1.75; margin: 0 0 18px; max-width: 840px; } .longform p a, .longform p strong { color: var(--text); } .longform .callout { margin: 24px 0; } .cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; } .cities a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; line-height: 1.35; box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease; } .cities a::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--accent-ink-deep); -webkit-mask: var(--icon-pin) center / contain no-repeat; mask: var(--icon-pin) center / contain no-repeat; } .cities a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, #fff); background: var(--accent-tint); box-shadow: var(--shadow-md); color: var(--text); } /* Comparison ticks */ .compare tbody td:not(:first-child) { text-align: center; } .compare .tick, .compare .cross { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; } .compare .tick { color: #16a34a; background: rgba(22, 163, 74, .12); } .compare .cross { color: var(--text-faint); background: rgba(20, 20, 20, .06); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .service-hero { grid-template-columns: 1fr; gap: 32px; } /* Keep the decorative glow inside the viewport — at full width its -80px right offset poked past the screen edge and caused horizontal overflow. */ .service-hero::before { right: -10px; width: 320px; height: 320px; } .badges { grid-template-columns: 1fr; } .service-groups { grid-template-columns: repeat(2, 1fr); } .process { grid-template-columns: repeat(2, 1fr); } .cities { grid-template-columns: repeat(2, 1fr); } .about { grid-template-columns: 1fr; } .areas-layout { grid-template-columns: 1fr; gap: 28px; } .areas-map { order: -1; min-height: 320px; } } @media (max-width: 900px) { .nav { display: none; } .post-grid { grid-template-columns: repeat(2, 1fr); } .featured { grid-template-columns: 1fr; } .featured__media { border-right: none; border-bottom: 1px solid var(--border); } .featured__body { padding: 30px 28px; } } @media (max-width: 600px) { body { font-size: 17px; } h1 { font-size: 32px; } /* Comparison table fits the phone width: tighter cells and the RECOMMENDED pill stacked under the label so the Mr. Keyman column stops being wide. */ .compare table { font-size: 13px; } .compare th, .compare td { padding: 12px 8px; } .compare thead th { font-size: 10px; letter-spacing: 0.03em; } .compare__pill { display: block; width: max-content; margin: 5px auto 0; } .compare .tick, .compare .cross { width: 22px; height: 22px; } /* Full-width action buttons on phones (hero + CTA). */ .hero-actions, .cta__actions { flex-direction: column; align-items: stretch; } .hero-actions .btn, .cta__actions .btn { width: 100%; } .lede { font-size: 19px; } .body h2 { font-size: 24px; } .article-head { padding: 40px 0 32px; } .related__grid { grid-template-columns: 1fr; } .cta { grid-template-columns: 1fr; } /* image on top, taller; text below with smaller, even top padding */ .cta__content { padding: 24px 30px 30px; order: 2; } .cta__media { order: 1; min-height: 320px; } .cta--sm .cta__media { min-height: 200px; } .stats { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--border); } .stat:last-child { border-bottom: none; } .newsletter { padding: 30px 24px; } .newsletter form { flex-direction: column; } .post-grid { grid-template-columns: 1fr; } .featured__title { font-size: 24px; } .blog-head { padding: 32px 0 28px; } .service-groups { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .cities { grid-template-columns: 1fr; } .service h2 { font-size: 24px; } .service > section { padding: 60px 0; } .service > .service-hero { padding: 8px 0 36px; } .service .cta { margin: 60px 0; } .contact { align-items: flex-start; } /* Header on phones: shrink logo/padding and drop the long hours line so the contact block stops overflowing the viewport (footer keeps its hours). */ .topbar__inner { padding: 12px 16px; gap: 14px; } .brand__logo { width: 132px; height: 30px; } .topbar .contact { align-items: flex-end; } .topbar .contact__phone { font-size: 17px; } .topbar .contact__hours { display: none; } .footer__top { flex-direction: column; align-items: flex-start; gap: 20px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } }