/* squareposh Trades Brand tokens (--brand, --accent, --font-head...) are printed per trade in ; everything below reads them, so one stylesheet serves every trade. */ :root { --ink: #0f1419; --ink-2: #414b57; --ink-3: #69727e; --line: #e3e6eb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07); --shadow: 0 14px 34px -14px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .07); --shadow-lg: 0 34px 70px -28px rgba(16, 24, 40, .38); --r-sm: 10px; --r: 16px; --r-lg: 22px; --wrap: 1200px; --gutter: 24px; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --focus: var(--accent-text); --chip-r: min(var(--radius-btn), 14px); } @media (max-width: 560px) { :root { --gutter: 16px; } } /* Background patterns, one per trade (white strokes for dark panels). */ [data-trade="plumbing"] { --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E"); } [data-trade="pool"] { --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M0 11c8-8 24-8 32 0s24 8 32 0' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/svg%3E"); } [data-trade="electrical"] { --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23fff' fill-opacity='.14'/%3E%3C/svg%3E"); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(96px + var(--demo-h, 0px)); } body { margin: 0; background: #fff; color: var(--ink); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } p { margin: 0 0 1em; } h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* In the builder preview: a page that's switched off still opens, with this note. */ .sqpb-hidden-note { padding: 10px 16px; background: var(--ink); color: #fff; font-size: .9375rem; text-align: center; } .sqpb-hidden-note p { margin: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow); } .skip-link:focus { top: 12px; } .icon { width: 1.15em; height: 1.15em; flex: none; } main:focus { outline: none; } /* Dark surfaces use the light accent for focus rings and highlights. */ .demo-bar, .hero, .page-hero, .promo__row, .site-footer, .contact__panel, .side-card--brand, .plan--featured, .about__frame { --focus: var(--accent-on-dark); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .72em 1.35em; border: 2px solid transparent; border-radius: var(--radius-btn); font: 600 16px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .btn .icon { width: 18px; height: 18px; } .btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent); } .btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--outline { background: #fff; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 22%, transparent); } .btn--outline:hover { border-color: var(--brand); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); } .btn--ghost-dark { background: #fff; color: var(--ink); border-color: var(--line); } .btn--lg { min-height: 56px; padding: .85em 1.6em; font-size: 17px; } .btn--block { width: 100%; } /* ---------- Shared bits ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 14px; font: 700 13px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); } .eyebrow .icon { width: 16px; height: 16px; } .section { padding: clamp(64px, 9vw, 120px) 0; } .sec-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); } .sec-head h2 { font-size: clamp(32px, 4vw, 50px); } .sec-head .lede { font-size: 18px; color: var(--ink-2); margin: 0; } .sec-head--center { text-align: center; margin-inline: auto; } .sec-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(32px, 4vw, 52px); } .sec-row .sec-head { margin-bottom: 0; } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; } .checks .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent-text); } .checks--two { grid-template-columns: 1fr 1fr; margin-bottom: 28px; } .stars { display: inline-flex; gap: 2px; color: #f5b301; } .stars svg { width: 18px; height: 18px; } .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .chips--even { grid-template-columns: repeat(3, 1fr); } .chip { position: relative; display: block; } .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .chip span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--chip-r); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink-2); background: #fff; transition: border-color .15s, background-color .15s, color .15s; } .chip:hover span { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); } .chip input:checked + span { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); color: var(--brand); } .chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } /* ---------- Logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); } .logo__mark { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--chip-r); background: var(--brand); color: #fff; } .logo__mark::after { content: ""; position: absolute; right: -7px; bottom: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); } .logo__mark .icon { position: relative; z-index: 1; width: 23px; height: 23px; } .logo__words { display: flex; flex-direction: column; line-height: 1; } .logo__name { font: var(--head-weight) 22px/1 var(--font-head); letter-spacing: -.02em; } .logo__desc { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); } .logo--light { color: #fff; } .logo--light .logo__mark { background: #fff; color: var(--brand); } .logo--light .logo__desc { color: var(--accent-on-dark); } /* ---------- Demo bar (squareposh, not part of a customer site) ---------- */ .demo-bar { position: sticky; top: 0; z-index: 60; background: #0b0b0d; color: #fff; font-size: 14px; } .demo-bar ~ .site-header { top: var(--demo-h, 62px); } .demo-bar__row { display: flex; align-items: center; gap: 18px; min-height: 62px; } .demo-bar__brand { display: flex; align-items: center; gap: 10px; flex: none; color: #fff; text-decoration: none; } .demo-bar__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; color: #0b0b0d; font: 800 14px/1 var(--font-body); letter-spacing: -.04em; } .demo-bar__label { display: flex; flex-direction: column; line-height: 1.25; } .demo-bar__label strong { font-size: 14px; } .demo-bar__label span { font-size: 12px; color: rgba(255, 255, 255, .6); } .demo-tabs { display: flex; align-items: center; gap: 12px; margin-inline: auto; } .demo-tabs__hint { font-size: 13px; color: rgba(255, 255, 255, .55); } .demo-tabs__track { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); } .demo-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; color: rgba(255, 255, 255, .78); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; } .demo-tab .icon { width: 16px; height: 16px; } .demo-tab:hover { color: #fff; background: rgba(255, 255, 255, .09); } .demo-tab.is-active { background: #fff; color: #0b0b0d; } .demo-tab.is-active .icon { color: var(--accent-text); } .demo-bar__cta { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; color: #0b0b0d; font-weight: 700; text-decoration: none; } .demo-bar__cta .icon { width: 16px; height: 16px; } .demo-bar__cta:hover { background: #e9e9ec; } @media (max-width: 920px) { .demo-bar__row { gap: 10px; min-height: 54px; padding-block: 8px; } .demo-bar__brand { flex: 1; min-width: 0; } .demo-bar .demo-tabs { display: none; } .demo-bar__cta { padding: 7px 12px; font-size: 13px; } } @media (max-width: 480px) { .demo-bar__label span { display: none; } } @media (max-width: 380px) { .demo-tab .icon { display: none; } } /* Floating switcher: appears once the demo bar scrolls away, so any section can be flipped in place. */ .demo-float { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(11, 11, 13, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; translate: -50% 160%; opacity: 0; visibility: hidden; transition: translate .35s ease, opacity .35s ease, visibility 0s .35s; } .demo-float.is-on { translate: -50% 0; opacity: 1; visibility: visible; transition: translate .35s ease, opacity .35s ease, visibility 0s; } .demo-float__label { padding: 0 8px 0 12px; color: rgba(255, 255, 255, .55); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .demo-float .demo-tab { padding: 8px 14px; } @media (max-width: 760px) { .demo-float { bottom: calc(14px + env(safe-area-inset-bottom)); transition: translate .35s ease, opacity .35s ease, visibility 0s .35s, bottom .3s ease; } #sqp-app:has(.mobile-bar.is-on) .demo-float { bottom: calc(84px + env(safe-area-inset-bottom)); } .demo-float__label { display: none; } .demo-float .demo-tab { padding: 8px 12px; font-size: 13px; } } @media (max-width: 360px) { .demo-float .demo-tab .icon { display: none; } } /* ---------- Top bar + header ---------- */ .topbar { background: var(--brand-2); color: rgba(255, 255, 255, .84); font-size: 14px; } .topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; } .topbar p { display: flex; align-items: center; gap: 8px; margin: 0; } .topbar .icon { width: 16px; height: 16px; color: var(--accent-on-dark); } .topbar a { color: #fff; font-weight: 700; text-decoration: none; } .topbar a:hover { text-decoration: underline; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } @media (max-width: 860px) { .topbar { display: none; } } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; } .site-header.is-stuck { border-color: var(--line); box-shadow: 0 8px 24px -16px rgba(16, 24, 40, .35); } .site-header__row { display: flex; align-items: center; gap: 20px; min-height: 78px; } .site-header__logo { flex: none; text-decoration: none; } .nav { margin-left: auto; } .nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 13px; border-radius: 9px; color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none; } .nav__link:hover, .nav__link[aria-current] { color: var(--brand); background: var(--tint); } .nav__caret { width: 16px; height: 16px; transition: transform .2s; } .nav__item--sub { position: relative; } .nav__sub { position: absolute; top: 100%; left: 50%; width: 580px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; translate: -50% 10px; transition: opacity .18s, translate .18s, visibility .18s; } .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* Desktop only: on phones the list sits open inside the menu, and this shift would slide it left whenever something in it is tapped. */ @media (min-width: 1001px) { .nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub { opacity: 1; visibility: visible; translate: -50% 4px; } .nav__item--sub:hover .nav__caret, .nav__item--sub:focus-within .nav__caret { transform: rotate(180deg); } } .nav__sub ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__sub ul a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; text-decoration: none; } .nav__sub ul a:hover { background: var(--tint); } .nav__sub-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--tint); color: var(--brand); } .nav__sub-icon .icon { width: 20px; height: 20px; } .nav__sub strong { display: block; font-size: 14.5px; line-height: 1.3; } .nav__sub small { color: var(--ink-3); font-size: 13px; } .nav__sub-all { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--line); color: var(--brand); font-weight: 600; text-decoration: none; } .nav__sub-all .icon { width: 18px; height: 18px; } .nav__mobile-cta { display: none; } .site-header__actions { display: flex; align-items: center; gap: 14px; } .header-phone { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .header-phone__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); } .header-phone__icon .icon { width: 20px; height: 20px; } .header-phone__text small { display: block; font-size: 12px; line-height: 1.1; color: var(--ink-3); } .header-phone__text strong { font-size: 16px; white-space: nowrap; } .nav-toggle { display: none; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; } .nav-toggle .icon { width: 22px; height: 22px; } .nav-toggle__close { display: none; } .site-header.nav-open .nav-toggle__open { display: none; } .site-header.nav-open .nav-toggle__close { display: block; } /* Narrow screens show only the phone icon; the number stays readable to screen readers. */ @media (max-width: 1140px) { .header-phone__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1000px) { .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 90px - var(--demo-h, 0px)); overflow: auto; padding: 8px var(--gutter) 22px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); } .site-header.nav-open .nav { display: block; } .nav__list { flex-direction: column; } .nav__link { width: 100%; padding: 14px 6px; font-size: 17px; } .nav__caret, .nav__sub-all { display: none; } .nav__sub { position: static; width: auto; padding: 0 0 8px; border: 0; box-shadow: none; opacity: 1; visibility: visible; translate: none; } .nav__sub::before { display: none; } .nav__sub ul { grid-template-columns: 1fr; } .nav__mobile-cta { display: grid; gap: 10px; margin-top: 14px; } .nav-toggle { display: grid; } .site-header__cta { display: none; } .site-header__actions { margin-left: auto; } .site-header__row { min-height: 72px; } } @media (min-width: 1001px) and (max-width: 1080px) { .nav__link { padding-inline: 9px; } } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--brand-2); padding: clamp(56px, 8vw, 104px) 0 clamp(112px, 11vw, 150px); } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; } .hero__bg.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-2) 0%, color-mix(in srgb, var(--brand-2) 90%, transparent) 38%, color-mix(in srgb, var(--brand-2) 45%, transparent) 100%); } .hero__art { position: absolute; inset: 0; background: radial-gradient(55% 75% at 88% 12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--brand) 70%, #fff 8%), transparent 72%), linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 78%); } .hero__art::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-light); -webkit-mask-image: radial-gradient(85% 95% at 70% 40%, #000, transparent); mask-image: radial-gradient(85% 95% at 70% 40%, #000, transparent); } .hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); } .hero__ring--1 { width: 620px; height: 620px; right: -140px; top: -180px; } .hero__ring--2 { width: 980px; height: 980px; right: -330px; top: -370px; } .hero__art-icon { position: absolute; right: -3%; bottom: -16%; width: min(620px, 52vw); aspect-ratio: 1; color: rgba(255, 255, 255, .055); } .hero__art-icon .icon { width: 100%; height: 100%; stroke-width: .8; } .hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 88px); align-items: center; } .eyebrow--pill { padding: 8px 14px; border-radius: 999px; letter-spacing: .02em; text-transform: none; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .92); } .eyebrow--pill .icon { color: var(--accent-on-dark); } .hero__title { color: #fff; font-size: clamp(40px, 5.6vw, 70px); margin-bottom: 22px; } .hero__title em { font-style: normal; color: var(--accent-on-dark); } .hero__text { max-width: 42ch; margin-bottom: 30px; color: rgba(255, 255, 255, .8); font-size: clamp(17px, 1.5vw, 19.5px); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .hero .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .hero .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); } .hero__points { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: rgba(255, 255, 255, .9); } .hero__points .icon { color: var(--accent-on-dark); } .hero__media { position: relative; justify-self: end; width: min(100%, 430px); } .booking { position: relative; z-index: 1; padding: 24px; background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .6); } .booking__title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: var(--head-weight) 21px/1.2 var(--font-head); } .booking__title-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); } .booking__title-icon .icon { width: 21px; height: 21px; } .booking__group { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; } .booking__group legend { margin-bottom: 8px; padding: 0; color: var(--ink-2); font-size: 13.5px; font-weight: 600; } .booking__note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--ink-3); font-size: 13px; } .booking__note .icon { width: 15px; height: 15px; color: #16a34a; } .float-card { position: absolute; z-index: 2; padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .55); } .float-card--status { bottom: calc(100% - 14px); right: -30px; display: flex; align-items: center; gap: 12px; max-width: 290px; animation: bob 6s ease-in-out infinite; } .float-card__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); } .float-card__icon .icon { width: 22px; height: 22px; } .float-card__body small { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .float-card__body strong { display: block; font: var(--head-weight) 18px/1.25 var(--font-head); } .float-card__body span { display: block; color: var(--ink-2); font-size: 13px; } .hero__rating { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; color: rgba(255, 255, 255, .78); font-size: 14.5px; } .hero__rating strong { color: #fff; } .hero__rating a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .hero__rating a:hover span { text-decoration: underline; text-underline-offset: 3px; } @keyframes bob { 50% { translate: 0 -8px; } } @media (max-width: 1100px) { .float-card--status { right: -8px; } } @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { justify-self: stretch; width: 100%; max-width: 560px; margin-top: 88px; } .hero__bg.has-photo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 82%, transparent), var(--brand-2) 70%); } } @media (max-width: 560px) { .hero__actions .btn { flex: 1 1 100%; } .float-card--status { position: relative; bottom: auto; right: auto; margin: 0 0 12px; max-width: none; animation: none; } .booking { padding: 20px; } .chip span { font-size: 13.5px; padding-inline: 6px; } } /* ---------- Trust strip ---------- */ .trust { position: relative; z-index: 3; margin-top: clamp(40px, 5vw, 64px); } /* Tucks up into the hero when it follows it (the default order). */ .hero + .trust { margin-top: -64px; } .trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .trust__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; } .trust__item + .trust__item { border-left: 1px solid var(--line); } .trust__item strong { display: block; margin-bottom: 3px; color: var(--ink); font: var(--head-weight) 16.5px/1.25 var(--font-head); } .trust__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); } .trust__icon .icon { width: 22px; height: 22px; } @media (max-width: 1000px) { .trust__grid { grid-template-columns: 1fr 1fr; } .trust__item:nth-child(3) { border-left: 0; } .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 560px) { .trust__grid { grid-template-columns: 1fr; } .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--line); } } /* ---------- Services ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .svc-card { position: relative; display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .2s, box-shadow .2s, border-color .2s; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); } .svc-card:focus-within { box-shadow: 0 0 0 3px var(--focus); } .svc-card__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 16px; background: var(--tint); color: var(--brand); transition: background-color .2s, color .2s; } .svc-card__icon .icon { width: 27px; height: 27px; } .svc-card:hover .svc-card__icon { background: var(--brand); color: #fff; } .svc-card__title { font-size: 21px; margin-bottom: 10px; } .svc-card__title a { text-decoration: none; } .svc-card__title a:focus-visible { outline: none; } .svc-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .svc-card__text { flex: 1; color: var(--ink-2); font-size: 15.5px; } .svc-card__foot { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 0; padding-top: 18px; border-top: 1px dashed var(--line); } .svc-card__from { color: var(--brand); font: var(--head-weight) 18px/1.2 var(--font-head); } .svc-card__from small { color: var(--ink-3); font: 600 13px/1 var(--font-body); } .svc-card__go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); transition: transform .2s, background-color .2s, color .2s; } .svc-card__go .icon { width: 18px; height: 18px; } .svc-card:hover .svc-card__go { background: var(--accent); color: var(--on-accent); transform: translateX(3px); } @media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; gap: 14px; } .svc-card { padding: 22px; } .svc-card__icon { width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; } .svc-card__title { font-size: 20px; } .svc-card__foot { padding-top: 14px; } } /* ---------- Promo band ---------- */ /* The band straddles two sections: its top half matches the section above, its bottom half the one below, so it sits right in any running order. */ .promo { --promo-top: #fff; --promo-bottom: #fff; background: linear-gradient(180deg, var(--promo-top) 50%, var(--promo-bottom) 50%); } .promo:has(+ .process), .promo:has(+ .plans), .promo:has(+ .faq), .promo:has(+ .cx--tint) { --promo-bottom: var(--tint); } .promo:has(+ .reviews) { --promo-bottom: var(--tint-2); } .promo:has(+ .cx--dark), .promo:has(+ .site-footer) { --promo-bottom: var(--brand-2); } .process + .promo, .plans + .promo, .faq + .promo, .cx--tint + .promo { --promo-top: var(--tint); } .reviews + .promo { --promo-top: var(--tint-2); } .section + .promo { margin-top: calc(-1 * clamp(24px, 4vw, 56px)); } .promo:last-child { padding-bottom: clamp(56px, 7vw, 96px); } .promo__row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: clamp(28px, 4vw, 46px); border-radius: var(--r-lg); color: #fff; background: linear-gradient(120deg, var(--brand), var(--brand-2)); } .promo__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-light); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); } .promo__icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: var(--accent); color: var(--on-accent); } .promo__icon .icon { width: 34px; height: 34px; } .promo__title { margin-bottom: 6px; color: #fff; font-size: clamp(24px, 2.6vw, 32px); } .promo__copy p { margin: 0; color: rgba(255, 255, 255, .8); } .promo__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; } .promo__phone { color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; } @media (max-width: 860px) { .promo__row { grid-template-columns: 1fr; } .promo__actions { align-items: stretch; } } /* ---------- Process ---------- */ .process { background: var(--tint); } .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; } .steps::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; border-top: 2px dashed color-mix(in srgb, var(--brand) 28%, transparent); } .step { position: relative; padding: 0 8px; text-align: center; } .step__num { display: grid; place-items: center; position: relative; width: 56px; height: 56px; margin: 0 auto 18px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; color: var(--brand); font: var(--head-weight) 22px/1 var(--font-head); box-shadow: 0 0 0 8px var(--tint); } .step:last-child .step__num { background: var(--brand); color: #fff; } .step__title { font-size: 20px; margin-bottom: 8px; } .step p { margin: 0; color: var(--ink-2); font-size: 15.5px; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .steps::before { display: none; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; row-gap: 26px; } .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 0; text-align: left; } .step__num { grid-row: span 2; margin: 0; } .step__title { margin: 6px 0 4px; } } /* ---------- About + stats ---------- */ .about__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 92px); align-items: center; } .about__media { position: relative; } .about__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--brand), var(--brand-2)); } .about__frame img { width: 100%; height: 100%; object-fit: cover; } .founder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; color: #fff; text-align: center; } .founder::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-light); } .founder__initials { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: var(--head-weight) 56px/1 var(--font-head); letter-spacing: -.02em; box-shadow: 0 0 0 12px rgba(255, 255, 255, .08), 0 0 0 26px rgba(255, 255, 255, .04); } .founder__name { position: relative; font: var(--head-weight) 28px/1.1 var(--font-head); } .founder__title { position: relative; color: rgba(255, 255, 255, .72); font-size: 15px; } .about__badge { position: absolute; right: -22px; bottom: 34px; max-width: 190px; padding: 18px 22px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lg); } .about__badge strong { display: block; font: var(--head-weight) 46px/1 var(--font-head); } .about__badge span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.3; } .about__copy > p { color: var(--ink-2); } .about__copy .sec-head { margin-bottom: 22px; } .signature { display: flex; flex-direction: column; margin: 26px 0; } .signature span { color: var(--brand); font: italic 600 26px/1.2 var(--font-head); } .signature small { color: var(--ink-3); font-size: 14px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: clamp(56px, 7vw, 92px) 0 0; padding: 0; border-top: 1px solid var(--line); } .stat { padding: 32px 22px 0; } .stat + .stat { border-left: 1px solid var(--line); } .stat__value { display: block; color: var(--brand); font: var(--head-weight) clamp(38px, 4.4vw, 58px)/1 var(--font-head); letter-spacing: -.03em; } .stat__value span { margin-left: 2px; color: var(--accent-text); font-size: .55em; } .stat__label { display: block; margin-top: 8px; color: var(--ink-2); font-size: 15px; } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about__frame { aspect-ratio: 4 / 3; } .about__frame:not(.has-photo) { aspect-ratio: 1 / 1; max-height: 460px; } /* Below the photo card, so it never covers the owner name on the no-photo card. */ .about__badge { position: relative; right: auto; bottom: auto; width: fit-content; max-width: 260px; margin: -34px 16px 0 auto; } .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { padding-top: 26px; } } @media (max-width: 480px) { .checks--two { grid-template-columns: 1fr; } .stat { padding-inline: 12px; } } /* ---------- Plans ---------- */ .plans { background: var(--tint); } .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; list-style: none; margin: 0; padding: 12px 0 0; } .plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .plan--featured { color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-2)); border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-12px); } .plan__badge { position: absolute; top: -14px; left: 28px; padding: 6px 13px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; } .plan__name { font-size: 20px; margin-bottom: 12px; } .plan--featured .plan__name { color: #fff; } .plan__price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 6px; } .plan__price strong { font: var(--head-weight) 54px/1 var(--font-head); letter-spacing: -.03em; } .plan__price span { color: var(--ink-3); font-weight: 600; } .plan--featured .plan__price span { color: rgba(255, 255, 255, .7); } .plan__text { margin-bottom: 22px; color: var(--ink-2); font-size: 15px; } .plan--featured .plan__text { color: rgba(255, 255, 255, .78); } .plan__list { flex: 1; align-content: start; margin-bottom: 28px; font-size: 15px; } .plan__list .icon { width: 18px; height: 18px; } .plan--featured .plan__list .icon { color: var(--accent-on-dark); } .plans__note { display: flex; justify-content: center; align-items: flex-start; gap: 10px; max-width: 760px; margin: 38px auto 0; color: var(--ink-3); font-size: 14.5px; } .plans__note .icon { width: 18px; height: 18px; margin-top: 3px; } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 28px; } .plan--featured { transform: none; } } /* ---------- Recent work ---------- */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .job { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .job__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--brand), var(--brand-2)); } .job:nth-child(2) .job__media { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 78%, var(--accent)), var(--brand-2)); } .job:nth-child(3) .job__media { background: linear-gradient(210deg, var(--brand), color-mix(in srgb, var(--brand-2) 70%, #000)); } .job__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .job:hover .job__media img { transform: scale(1.04); } .job__art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .92); } .job__art::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-light); } .job__art .icon { position: relative; width: 76px; height: 76px; stroke-width: 1.3; } .job__tag { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 13px; font-weight: 700; } .job__body { padding: 20px 22px; } .job__title { margin-bottom: 6px; font-size: 19px; } .job__place { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: 14.5px; } .job__place .icon { width: 16px; height: 16px; } @media (max-width: 900px) { .work-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } .job:not(.has-photo) .job__media { aspect-ratio: 16 / 8; } .job__art .icon { width: 60px; height: 60px; } } /* ---------- Reviews ---------- */ .reviews { background: var(--tint-2); } .rating-box { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .rating-box__value { font: var(--head-weight) 46px/1 var(--font-head); } .rating-box__meta { display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); font-size: 14px; font-weight: 600; } .review-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .review { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .review blockquote { flex: 1; margin: 0; } .review blockquote p { margin: 0; font-size: 16.5px; line-height: 1.6; } .review__by { display: flex; align-items: center; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); } .review__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; } .review__by strong { display: block; font-size: 15px; } .review__by small { color: var(--ink-3); font-size: 13.5px; } /* With a Google review link: the rating box links to Google, and two buttons follow the list. */ a.rating-box { color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; } a.rating-box:hover { border-color: var(--brand); transform: translateY(-1px); } .reviews__google { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 3vw, 40px); } .review-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r); } @media (max-width: 1000px) { .review-track { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(84%, 360px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 14px; scroll-padding-inline: var(--gutter); } .review { scroll-snap-align: start; } } /* ---------- Service area ---------- */ .areas { overflow: hidden; } .areas__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; } .city-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0; } .city-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent); font-size: 15px; font-weight: 600; } .city-chips .icon { width: 16px; height: 16px; color: var(--accent-text); } .radar { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 11%, #fff) 0%, var(--tint) 58%, transparent 71%); } .radar__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 24%, transparent); } .radar__ring--1 { width: 34%; height: 34%; } .radar__ring--2 { width: 64%; height: 64%; } .radar__ring--3 { width: 94%; height: 94%; } .radar__sweep { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 74%, color-mix(in srgb, var(--accent) 34%, transparent) 100%); animation: spin 7s linear infinite; } @keyframes spin { to { rotate: 360deg; } } .radar__home { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% -50%; } .radar__home .icon { width: 66px; height: 66px; padding: 17px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 9px color-mix(in srgb, var(--brand) 16%, transparent); } .radar__home em { padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 14px; font-style: normal; font-weight: 700; } .radar__city { position: absolute; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; white-space: nowrap; translate: -50% -50%; } .radar__city i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } .radar__city--1 { left: 50%; top: 9%; } .radar__city--2 { left: 80%; top: 25%; } .radar__city--3 { left: 84%; top: 60%; } .radar__city--4 { left: 63%; top: 87%; } .radar__city--5 { left: 30%; top: 84%; } .radar__city--6 { left: 15%; top: 58%; } .radar__city--7 { left: 21%; top: 24%; } @media (max-width: 900px) { .areas__grid { grid-template-columns: 1fr; } .radar { max-width: 420px; } } @media (max-width: 480px) { .radar__city { font-size: 12px; padding: 4px 8px 4px 6px; } .radar__home .icon { width: 54px; height: 54px; padding: 14px; } } /* ---------- FAQ ---------- */ .faq { background: var(--tint); } .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 84px); align-items: start; } .faq__intro { position: sticky; top: 112px; } .qa { margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .2s, border-color .2s; } .qa[open] { border-color: transparent; box-shadow: var(--shadow); } .qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 17px/1.35 var(--font-body); list-style: none; cursor: pointer; } .qa summary::-webkit-details-marker { display: none; } .qa__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); transition: background-color .2s; } .qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--brand); translate: -50% -50%; } .qa__icon::after { rotate: 90deg; transition: rotate .25s; } .qa[open] .qa__icon { background: var(--accent); } .qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: var(--on-accent); } .qa[open] .qa__icon::after { rotate: 0deg; } .qa__a { padding: 0 22px 20px; color: var(--ink-2); } .qa__a p { margin: 0; } @media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__intro { position: static; } } /* ---------- Contact / quote ---------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r-lg) + 6px); box-shadow: var(--shadow-lg); } .contact__panel { position: relative; isolation: isolate; display: flex; padding: clamp(32px, 4vw, 54px); color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-2)); } .contact__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-light); } .contact__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; } .contact__panel.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 50%, transparent), color-mix(in srgb, var(--brand-2) 95%, transparent) 72%); } .contact__panel-inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; } .contact__panel:not(.has-photo) .contact__panel-inner { justify-content: flex-start; } .contact__art { position: absolute; right: -60px; bottom: -70px; z-index: -1; width: 300px; height: 300px; color: rgba(255, 255, 255, .06); } .contact__art .icon { width: 100%; height: 100%; stroke-width: .9; } .contact__title { color: #fff; font-size: clamp(30px, 3.4vw, 44px); } .contact__lede { color: rgba(255, 255, 255, .8); font-size: 17.5px; } .contact__phone { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 28px; color: #fff; font: var(--head-weight) clamp(26px, 2.6vw, 34px)/1 var(--font-head); text-decoration: none; } .contact__phone .icon { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--accent); color: var(--on-accent); } .contact__area { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .8); font-size: 15px; } .contact__area .icon { color: var(--accent-on-dark); } .hours { display: grid; gap: 8px; margin: 0 0 22px; font-size: 15px; } .hours div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .hours dt { color: rgba(255, 255, 255, .7); } .hours dd { margin: 0; font-weight: 600; text-align: right; } .hours--plain div { border-color: var(--line); } .hours--plain dt { color: var(--ink-2); } .contact__form-wrap { padding: clamp(28px, 4vw, 54px); background: #fff; } .quote-form__title { margin-bottom: 6px; font-size: 28px; } .quote-form__text { margin-bottom: 24px; color: var(--ink-2); } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field label { font-size: 14px; font-weight: 600; } .field__opt { color: var(--ink-3); font-weight: 500; } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .15s, box-shadow .15s; } .field textarea { min-height: 96px; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2369727e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent); } .field.is-invalid input { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); } .quote-form__fine { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--ink-3); font-size: 13.5px; } .quote-form__fine .icon { width: 16px; height: 16px; color: #16a34a; } .quote-form__done { display: none; padding: 40px 8px; text-align: center; } .quote-form__done:focus { outline: none; } .quote-form.is-sent .quote-form__fields { display: none; } .quote-form.is-sent .quote-form__done { display: block; } .quote-form__done-icon .icon { width: 68px; height: 68px; margin: 0 auto 16px; color: #16a34a; } .quote-form__done h3 { font-size: 28px; } .quote-form__done p { max-width: 42ch; margin: 0 auto 22px; color: var(--ink-2); } @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } .contact__grid { border-radius: var(--r-lg); } } /* ---------- Inner-page hero ---------- */ .page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(52px, 7vw, 100px); color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-light); -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000); mask-image: linear-gradient(90deg, transparent 10%, #000); } .page-hero::after { content: ""; position: absolute; z-index: -1; right: -160px; top: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; color: rgba(255, 255, 255, .65); font-size: 14px; } .crumbs a { color: rgba(255, 255, 255, .86); text-decoration: none; } .crumbs a:hover { color: #fff; text-decoration: underline; } .crumbs__sep { width: 14px; height: 14px; rotate: -90deg; opacity: .6; } .page-hero__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; background: var(--accent); color: var(--on-accent); } .page-hero__icon .icon { width: 30px; height: 30px; } .page-hero .eyebrow { color: var(--accent-on-dark); } .page-hero__title { max-width: 20ch; color: #fff; font-size: clamp(36px, 5vw, 62px); } .page-hero__text { max-width: 58ch; color: rgba(255, 255, 255, .8); font-size: clamp(17px, 1.5vw, 19.5px); } .page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .page-hero .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .page-hero .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); } .page-hero__from { margin-left: 8px; color: rgba(255, 255, 255, .75); } .page-hero__from strong { margin-left: 4px; color: #fff; font: var(--head-weight) 24px/1 var(--font-head); } @media (max-width: 560px) { .page-hero__actions .btn { flex: 1 1 100%; } .page-hero__from { margin: 4px 0 0; } } /* ---------- Services index ---------- */ .svc-list { padding-top: clamp(40px, 6vw, 72px); } .svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 76px); padding: clamp(32px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); } .svc-row:last-child { border-bottom: 0; } .svc-row--flip .svc-row__media { order: 2; } .svc-row__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--brand), var(--brand-2)); } .svc-row--flip .svc-row__media { background: linear-gradient(210deg, color-mix(in srgb, var(--brand) 80%, var(--accent)), var(--brand-2)); } .svc-row__media img { width: 100%; height: 100%; object-fit: cover; } .svc-row__art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .92); } .svc-row__art::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-light); } .svc-row__art .icon { position: relative; width: 104px; height: 104px; stroke-width: 1.15; } .svc-row__copy .svc-card__icon { margin-bottom: 18px; } .svc-row__title { font-size: clamp(26px, 2.6vw, 34px); } .svc-row__title a { text-decoration: none; } .svc-row__title a:hover { color: var(--brand); } .svc-row__copy > p { color: var(--ink-2); } .svc-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .svc-row__from { color: var(--ink-2); } .svc-row__from strong { color: var(--brand); font: var(--head-weight) 22px/1 var(--font-head); } @media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } .svc-row--flip .svc-row__media { order: 0; } } /* ---------- Service detail ---------- */ .svc-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 64px); align-items: start; } .svc-detail__photo { overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 32px; border-radius: var(--r-lg); } .svc-detail__photo img { width: 100%; height: 100%; object-fit: cover; } .prose p { color: var(--ink-2); font-size: 18px; line-height: 1.7; } .prose--page { max-width: 760px; } .svc-detail__h { margin: 42px 0 18px; font-size: 28px; } .checks--cards { grid-template-columns: 1fr 1fr; gap: 12px; } .checks--cards li { padding: 14px 16px; border-radius: var(--r-sm); background: var(--tint); } .mini-steps { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } .mini-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); } .mini-steps li > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; } .mini-steps p { margin: 2px 0 0; color: var(--ink-2); font-size: 15.5px; } .svc-detail__side { position: sticky; top: 104px; display: grid; gap: 18px; } .side-card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .side-card--brand { display: grid; gap: 12px; color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-2)); border: 0; box-shadow: var(--shadow-lg); } .side-card__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .86); font-weight: 600; } .side-card__eyebrow .icon { color: var(--accent-on-dark); } .side-card__price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; } .side-card__price small { color: rgba(255, 255, 255, .7); font-size: 15px; } .side-card__price strong { font: var(--head-weight) 42px/1 var(--font-head); } .side-card__rating { display: flex; justify-content: center; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); font-size: 14px; } .side-card__title { margin-bottom: 14px; font-size: 19px; } .side-list { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } .side-list li { display: flex; gap: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; } .side-list .icon { margin-top: 2px; color: var(--accent-text); } .side-list strong { display: block; color: var(--ink); font-size: 15px; } @media (max-width: 1000px) { .svc-detail__grid { grid-template-columns: 1fr; } .svc-detail__side { position: static; } } @media (max-width: 560px) { .checks--cards { grid-template-columns: 1fr; } } /* ---------- About page values ---------- */ .values { background: var(--tint); } .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .value { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .value__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 15px; background: var(--brand); color: #fff; } .value__icon .icon { width: 25px; height: 25px; } .value h3 { font-size: 19px; } .value p { margin: 0; color: var(--ink-2); font-size: 15px; } @media (max-width: 1000px) { .value-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { padding: 76px 0 0; color: rgba(255, 255, 255, .72); background: var(--brand-2); font-size: 15px; } .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; } .site-footer__brand a { text-decoration: none; } .site-footer__brand p { margin: 18px 0; max-width: 36ch; } .site-footer__rating { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .site-footer__rating strong { color: #fff; } .site-footer__title { margin: 6px 0 18px; color: #fff; font: 700 13px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; } .site-footer__col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .site-footer__col ul a { color: rgba(255, 255, 255, .72); text-decoration: none; } .site-footer__col ul a:hover { color: #fff; text-decoration: underline; } .site-footer__phone { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #fff; font: var(--head-weight) 22px/1 var(--font-head); text-decoration: none; } .site-footer__phone .icon { color: var(--accent-on-dark); } .site-footer__urgent { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--accent-on-dark); font-weight: 600; } .site-footer__urgent .icon { width: 18px; height: 18px; } .hours--footer { font-size: 14px; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; } .site-footer__bottom p { margin: 0; } .site-footer__credit a { color: #fff; } @media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } } /* ---------- Mobile call/book bar ---------- */ .mobile-bar { display: none; } @media (max-width: 760px) { body { padding-bottom: 78px; } .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -14px rgba(16, 24, 40, .3); translate: 0 115%; transition: translate .3s ease; } .mobile-bar.is-on { translate: 0 0; } .mobile-bar .btn { min-height: 50px; } } /* ---------- Motion ---------- */ /* Hidden until scrolled into view. If site.js never runs, the safety animation shows everything after 3s; once the script arms the observer it switches that off. */ .js .reveal { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1); animation: reveal-safety 0s 3s forwards; } .js.reveal-armed .reveal { animation: none; } .js .reveal.is-in { opacity: 1; translate: 0 0; animation: none; } @keyframes reveal-safety { to { opacity: 1; translate: 0 0; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; translate: none; transition: none; animation: none; } .float-card, .pulse { animation: none; } .radar__sweep { display: none; } .svc-card, .btn, .job__media img { transition: none; } } /* ---------- Uploaded logo ---------- */ .logo--image img { display: block; width: auto; height: 48px; max-width: 230px; object-fit: contain; object-position: left center; } .logo--light.logo--image { padding: 8px 12px; border-radius: 12px; background: #fff; } @media (max-width: 560px) { .logo--image img { height: 40px; max-width: 170px; } } /* The smallest phones (320px): long business names squeeze instead of pushing the menu off screen. */ @media (max-width: 380px) { .site-header__row { gap: 12px; } .site-header__actions { gap: 8px; } .logo { min-width: 0; gap: 9px; } .logo__words { min-width: 0; } .logo__name { font-size: 19px; } .logo__desc { letter-spacing: .14em; } .logo--image img { max-width: 140px; } } /* ---------- Sections the customer added in the builder ---------- */ .cx--tint { background: var(--tint); } .cx--dark { position: relative; isolation: isolate; color: #fff; background: linear-gradient(150deg, var(--brand), var(--brand-2)); --focus: var(--accent-on-dark); } .cx--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--pattern-light); -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000); mask-image: linear-gradient(90deg, transparent 10%, #000); } .cx--dark h2, .cx--dark .faq__intro h2 { color: #fff; } .cx--dark .eyebrow { color: var(--accent-on-dark); } .cx--dark .sec-head .lede, .cx--dark .cx__prose p { color: rgba(255, 255, 255, .82); } .cx--dark .checks li { color: #fff; } .cx--dark .checks .icon { color: var(--accent-on-dark); } .cx__title { font-size: clamp(32px, 4vw, 50px); } .cx__prose p { color: var(--ink-2); font-size: 18px; line-height: 1.7; } .cx__prose p:last-child { margin-bottom: 0; } .cx-text__inner { max-width: 780px; text-align: center; } .cx-text__inner .btn { margin-top: 28px; } .cx-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: center; } .cx-split__grid--flip .cx-split__media { order: 2; } .cx-split__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--brand), var(--brand-2)); } .cx--dark .cx-split__media { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 70%, #fff 12%), var(--brand)); } .cx-split__media img { width: 100%; height: 100%; object-fit: cover; } .cx-split__art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .92); } .cx-split__art::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern-light); } .cx-split__art .icon { position: relative; width: 96px; height: 96px; stroke-width: 1.2; } .cx-split__copy .sec-head { margin-bottom: 18px; } .cx-split__copy .cx__prose { margin-bottom: 24px; } .cx-split__copy .checks--two { margin-bottom: 30px; } @media (max-width: 860px) { .cx-split__grid { grid-template-columns: 1fr; } .cx-split__grid--flip .cx-split__media { order: 0; } } .cx-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .cx-cards__grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; } .cx-cards__grid--2, .cx-cards__grid--4 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } .cx-card { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); } .cx--dark .cx-card { border-color: transparent; box-shadow: var(--shadow-lg); } .cx-card__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-text); } .cx-card__icon .icon { width: 25px; height: 25px; } .cx-card__title { font-size: 20px; } .cx-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; } @media (max-width: 900px) { .cx-cards__grid, .cx-cards__grid--2, .cx-cards__grid--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cx-cards__grid, .cx-cards__grid--2, .cx-cards__grid--4 { grid-template-columns: 1fr; } } .cx-banner { padding-block: clamp(36px, 5vw, 64px); } .cx-faq.cx--dark .faq__intro .lede { color: rgba(255, 255, 255, .82); } /* ---------- Builder preview (only inside the /start/ frame) ---------- */ [data-preview] .sqp-hover { outline: 2px dashed color-mix(in srgb, var(--brand) 55%, #fff); outline-offset: -4px; } [data-preview] .sqp-flash { animation: sqp-flash 1.6s ease-out; } @keyframes sqp-flash { 0%, 35% { box-shadow: inset 0 0 0 4px var(--accent); } 100% { box-shadow: inset 0 0 0 4px transparent; } } .sqp-pill { position: fixed; z-index: 95; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 11px; border: 0; border-radius: 999px; background: #0b0b0d; color: #fff; font: 600 13.5px/1 var(--font-body); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s; } .sqp-pill.is-on { opacity: 1; pointer-events: auto; } .sqp-pill .icon { width: 15px; height: 15px; } .sqp-pill:hover { background: #26262b; } /* What the builder is pointing at: fixed-position boxes that follow the page. */ .sqp-hl-layer { position: fixed; inset: 0; z-index: 94; overflow: hidden; pointer-events: none; } .sqp-hl { position: absolute; border: 2px solid #2f6fed; border-radius: 8px; background: rgba(47, 111, 237, .08); box-shadow: 0 0 0 4px rgba(47, 111, 237, .16); } .sqp-hl--sec { border-width: 3px; border-radius: 12px; background: rgba(47, 111, 237, .04); } .sqp-hl__tag { position: absolute; left: -3px; bottom: calc(100% + 6px); max-width: 340px; overflow: hidden; padding: 6px 11px; border-radius: 8px; background: #2f6fed; color: #fff; font: 600 13px/1.25 var(--font-body); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); } .sqp-hl__tag--in { top: 8px; bottom: auto; left: 8px; } .sqp-hl__tag--below { top: calc(100% + 6px); bottom: auto; } [data-hidden-sec].sqp-peek { opacity: .55; } /* Quote form: a field only bots fill in (published sites). */ .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .quote-form__error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8f1b14; font-size: 14px; }