/* ============================================================
ClearSorted design system — per Brand Guidelines v1.0
Manrope · Sorted Green on white · 70/25/5 · pill buttons
============================================================ */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/manrope.woff2') format('woff2');
}
:root {
--green: #0B7B4C;
--green-bright: #17B877;
--green-deep: #075E39;
--mint: #E4F4EC;
--mint-soft: #F0F9F4;
--ink: #0A2E21;
--ink-soft: #4A6157;
--fog: #F5F9F6;
--paper: #FFFFFF;
--line: #DCE8E1;
--danger: #B3352B;
--shadow-sm: 0 1px 2px rgba(10, 46, 33, .06);
--shadow-md: 0 1px 2px rgba(10, 46, 33, .06), 0 8px 24px rgba(10, 46, 33, .08);
--shadow-lg: 0 2px 4px rgba(10, 46, 33, .05), 0 16px 48px rgba(10, 46, 33, .12);
--r-card: 16px;
--r-input: 12px;
--wrap: 1120px;
--header-h: 80px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
font-weight: 450;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--green); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }
/* ---------- header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.site-header .bar {
height: var(--header-h);
display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo .word { font-weight: 800; font-size: 1.25rem; letter-spacing: -.025em; }
.logo .word .c1 { color: var(--ink); }
.logo .word .c2 { color: var(--green); }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav { gap: 8px; }
.nav a {
text-decoration: none; color: var(--ink); font-weight: 500; font-size: .92rem;
padding: 8px 14px; border-radius: 99px; transition: background .15s;
white-space: nowrap;
}
.nav .phone { font-size: .85rem; color: var(--ink-soft) !important; font-weight: 600 !important; }
.nav .phone:hover { color: var(--green) !important; }
.nav .cta { padding: 14px 26px !important; font-size: .95rem; }
.nav a:hover { background: var(--mint-soft); color: var(--green); }
.nav a.current { color: var(--green); }
.nav .phone {
display: flex; align-items: center; gap: 7px; color: var(--green); font-weight: 700;
}
.nav .cta { margin-left: 6px; }
.menu-btn { display: none; }
@media (max-width: 900px) {
.nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
background: var(--paper); border-bottom: 1px solid var(--line);
flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 2px;
box-shadow: var(--shadow-md); }
.nav.open { display: flex; }
.nav a { padding: 12px 14px; border-radius: 10px; }
.nav .cta { margin: 10px 0 0; }
.menu-btn {
display: flex; align-items: center; justify-content: center;
margin-left: auto; background: none; border: 1.5px solid var(--line);
border-radius: 10px; width: 42px; height: 42px; cursor: pointer; color: var(--ink);
}
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit; font-weight: 700; font-size: .98rem; line-height: 1;
border-radius: 999px; padding: 15px 28px; border: 2px solid transparent;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
.btn { transition: background .15s, color .15s, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(10,46,33,.15), 0 4px 12px rgba(11,123,76,.22); }
.btn-primary:hover { background: var(--green-deep); transform: translateY(-1px) scale(1.015); box-shadow: 0 2px 4px rgba(10,46,33,.15), 0 10px 26px rgba(11,123,76,.35); }
.btn-secondary:hover, .btn-ghost:hover, .btn-play:hover { transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--green); border-color: var(--green); }
.btn-secondary:hover { background: var(--mint-soft); }
.btn-ghost { background: var(--mint); color: var(--green); }
.btn-ghost:hover { background: #d5eee2; }
.btn-lg { padding: 18px 34px; font-size: 1.05rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
outline: 3px solid var(--green-bright); outline-offset: 2px;
}
/* ---------- forms ---------- */
label { font-size: .85rem; font-weight: 700; display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
font-family: inherit; font-size: 1rem; color: var(--ink);
padding: 14px 16px; border-radius: var(--r-input);
border: 1.5px solid var(--line); background: var(--paper); width: 100%;
transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--mint);
}
input[type="range"] { width: 100%; accent-color: var(--green); cursor: pointer; }
.field { margin-bottom: 18px; }
.hint { font-size: .8rem; color: var(--ink-soft); margin-top: 5px; }
.error-msg { font-size: .82rem; color: var(--danger); font-weight: 600; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field.invalid .error-msg { display: block; }
/* ---------- badges / pills ---------- */
.badge {
display: inline-flex; align-items: center; gap: 7px;
background: var(--mint); color: var(--green);
font-size: .8rem; font-weight: 700; padding: 7px 15px; border-radius: 99px;
white-space: nowrap;
}
.badge svg { flex-shrink: 0; }
.eyebrow {
display: inline-block; font-size: .72rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--green);
margin-bottom: 14px;
}
/* ---------- sections ---------- */
section { padding: 108px 0; }
section.tight { padding: 64px 0; }
.section-fog { background: var(--fog); }
.section-mint { background: var(--mint-soft); }
.section-green { background: var(--green); color: #fff; }
.section-green .eyebrow { color: #A8E6C8; }
h2.section-title { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.section-sub { color: var(--ink-soft); font-size: 1.08rem; max-width: 58ch; margin-top: 14px; }
.section-green .section-sub { color: #D3EFE1; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* ---------- hero ---------- */
.hero { padding: 84px 0 96px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--green); position: relative; }
.hero .lede { font-size: 1.15rem; color: var(--ink-soft); margin: 20px 0 30px; max-width: 50ch; }
.postcode-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.postcode-form input {
flex: 1; min-width: 180px; border-radius: 999px; padding: 15px 22px; font-size: 1rem;
}
.hero .phone-line { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); }
.hero .phone-line a { font-weight: 800; text-decoration: none; }
.trust-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
/* hero visual card stack */
.hero-visual { position: relative; min-height: 380px; }
.float-card {
position: absolute; background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 20px 22px;
}
@media (max-width: 900px) {
.hero-visual { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.float-card { position: static; }
}
/* ---------- cards ---------- */
.card {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-sm);
}
.card.lift { transition: box-shadow .2s, transform .2s; }
.card.lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
/* ---------- step cards (how it works) ---------- */
.step-card { position: relative; padding-top: 34px; }
.step-num {
position: absolute; top: -18px; left: 24px;
width: 36px; height: 36px; border-radius: 50%;
background: var(--green); color: #fff; font-weight: 800; font-size: .95rem;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-sm);
}
.step-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.step-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
/* ---------- price table ---------- */
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th {
text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--ink-soft); font-weight: 700; padding: 14px 18px; border-bottom: 1px solid var(--line);
white-space: nowrap;
}
td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
/* ---------- reviews ---------- */
.review-card blockquote { margin: 0 0 16px; font-size: .98rem; line-height: 1.65; }
.review-card blockquote::before { content: '\201C'; color: var(--green-bright); font-size: 2.2rem; line-height: 0; vertical-align: -14px; margin-right: 4px; font-weight: 800; }
.review-meta { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
background: var(--mint); color: var(--green);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
}
.review-meta .who b { display: block; font-size: .9rem; }
.review-meta .who span { font-size: .78rem; color: var(--ink-soft); }
.stars { color: var(--green-bright); letter-spacing: 2px; font-size: .85rem; }
/* ---------- FAQ ---------- */
.faq details {
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
padding: 0; margin-bottom: 12px; overflow: hidden;
}
.faq summary {
cursor: pointer; font-weight: 700; font-size: 1rem; padding: 20px 24px;
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+'; color: var(--green); font-size: 1.4rem; font-weight: 400; line-height: 1;
transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 24px 20px; color: var(--ink-soft); font-size: .95rem; max-width: 70ch; }
/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #B8CCC2; padding: 64px 0 40px; font-size: .9rem; }
.site-footer a { color: #D9E8E0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-bottom {
margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: #86A395;
}
/* ---------- funnel ---------- */
.funnel { max-width: 640px; margin: 0 auto; padding: 48px 24px 96px; }
.progress { display: flex; align-items: center; gap: 0; margin-bottom: 40px; }
.progress .p-step { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.progress .p-dot {
width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line);
background: var(--paper); display: flex; align-items: center; justify-content: center;
font-size: .75rem; font-weight: 800; color: var(--ink-soft); flex-shrink: 0;
transition: all .2s;
}
.progress .p-line { flex: 1; height: 2px; background: var(--line); margin: 0 8px; min-width: 16px; }
.progress .p-step.active .p-dot { border-color: var(--green); color: var(--green); }
.progress .p-step.done .p-dot { border-color: var(--green); background: var(--green); color: #fff; }
.progress .p-step.done .p-line { background: var(--green); }
.progress .p-label { display: none; }
@media (min-width: 640px) { .progress .p-label { display: block; } }
.funnel-step { display: none; }
.funnel-step.active { display: block; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .funnel-step.active { animation: none; } }
.funnel h1 { font-size: 1.65rem; font-weight: 800; margin-bottom: 8px; }
.funnel .q-sub { color: var(--ink-soft); margin-bottom: 28px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper);
padding: 18px; cursor: pointer; font-family: inherit; font-size: .95rem; text-align: left;
transition: border-color .15s, background .15s;
}
.choice b { display: block; font-size: 1rem; }
.choice span { font-size: .8rem; color: var(--ink-soft); }
.choice:hover { border-color: var(--green-bright); }
.choice.selected { border-color: var(--green); background: var(--mint-soft); box-shadow: 0 0 0 1px var(--green); }
.funnel-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.care-note {
background: var(--mint-soft); border: 1px solid var(--mint); border-radius: 14px;
padding: 18px 20px; font-size: .92rem; color: var(--ink-soft); margin: 20px 0;
display: none;
}
.care-note.show { display: block; }
/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ---------- tick draw ---------- */
.tick-draw path.tick { stroke-dasharray: 40; stroke-dashoffset: 40; }
.tick-draw.in path.tick { animation: tickDraw .5s .2s ease forwards; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tick-draw path.tick { stroke-dashoffset: 0; } .tick-draw.in path.tick { animation: none; } }
/* ---------- misc ---------- */
.check-list { list-style: none; padding: 0; }
.check-list li { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.check-list .ck { flex-shrink: 0; margin-top: 3px; }
.stat-row { display: flex; gap: 48px; flex-wrap: wrap; }
.stat-row .stat b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--green); }
.stat-row .stat span { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.section-green .stat-row .stat b { color: #fff; }
.section-green .stat-row .stat span { color: #A8E6C8; }
.skip-link {
position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff;
padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 0; }
/* ============================================================
v1.1 — atmosphere, glow, motion
============================================================ */
/* ---------- ambient hero atmosphere ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after {
content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
filter: blur(80px); opacity: .55;
}
.hero::before {
width: 560px; height: 560px; right: -140px; top: -180px;
background: radial-gradient(circle, rgba(23,184,119,.28), rgba(23,184,119,0) 70%);
animation: blobDrift 14s ease-in-out infinite alternate;
}
.hero::after {
width: 420px; height: 420px; left: -160px; bottom: -200px;
background: radial-gradient(circle, rgba(11,123,76,.20), rgba(11,123,76,0) 70%);
animation: blobDrift 18s 2s ease-in-out infinite alternate-reverse;
}
.hero > .wrap { position: relative; z-index: 1; }
@keyframes blobDrift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-40px, 30px) scale(1.12); }
}
/* faint dot grid backdrop */
.dotfield {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(rgba(11,123,76,.10) 1.5px, transparent 1.5px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 72%);
}
/* ---------- glow system ---------- */
.btn-primary {
box-shadow: 0 2px 6px rgba(11,123,76,.25), 0 0 0 rgba(23,184,119,0);
}
.btn-primary:hover {
box-shadow: 0 4px 14px rgba(11,123,76,.35), 0 0 28px rgba(23,184,119,.45);
}
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
transform: skewX(-20deg); transition: none;
}
.btn-primary:hover::after { animation: sheen .7s ease; }
@keyframes sheen { to { left: 130%; } }
.card.lift { transition: box-shadow .25s, transform .25s, border-color .25s; }
.card.lift:hover {
transform: translateY(-4px);
border-color: rgba(23,184,119,.55);
box-shadow: 0 4px 10px rgba(10,46,33,.06), 0 18px 44px rgba(11,123,76,.16), 0 0 24px rgba(23,184,119,.12);
}
.glow-ring { position: relative; }
.glow-ring::before {
content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(23,184,119,.6), rgba(23,184,119,0) 40%, rgba(23,184,119,0) 60%, rgba(11,123,76,.5));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
/* pulsing live dot */
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--green-bright); flex-shrink: 0; }
.live-dot::after {
content: ''; position: absolute; inset: -5px; border-radius: 50%;
border: 2px solid rgba(23,184,119,.5); animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
/* ---------- floating hero cards ---------- */
.float-card { will-change: transform; }
.hero-visual .float-card:nth-child(1) { animation: floatY 6s ease-in-out infinite; }
.hero-visual .float-card:nth-child(2) { animation: floatY 7s 1.2s ease-in-out infinite; }
.hero-visual .float-card:nth-child(3) { animation: floatY 6.5s .6s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-card { transition: box-shadow .25s, border-color .25s; }
.float-card:hover { border-color: rgba(23,184,119,.5); box-shadow: 0 2px 4px rgba(10,46,33,.05), 0 20px 56px rgba(11,123,76,.22), 0 0 30px rgba(23,184,119,.15); }
/* ---------- nav polish ---------- */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn):not(.phone)::after {
content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
background: var(--green-bright); border-radius: 2px; transform: scaleX(0); transform-origin: left;
transition: transform .22s ease;
}
.nav a:not(.btn):not(.phone):hover::after, .nav a.current::after { transform: scaleX(1); }
.logo { transition: transform .2s; }
.logo:hover { transform: translateY(-1px); }
.logo svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.logo:hover svg { transform: rotate(-6deg) scale(1.06); }
/* ---------- badges & links ---------- */
.badge { transition: background .2s, box-shadow .2s, transform .2s; }
.badge:hover { background: #d5eee2; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11,123,76,.18); }
/* ---------- stats band ---------- */
.stats-band { border-block: 1px solid var(--line); background: var(--paper); padding: 34px 0; }
.stats-band .row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stat-block { text-align: center; flex: 1; min-width: 140px; }
.stat-block b {
display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800;
letter-spacing: -.03em; color: var(--green);
font-variant-numeric: tabular-nums;
}
.stat-block > span { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.stat-block b span { font-size: inherit; color: inherit; font-weight: inherit; }
/* ---------- marquee ---------- */
.marquee { overflow: hidden; position: relative; padding: 18px 0; border-block: 1px solid var(--line); background: var(--fog); }
.marquee .track { display: flex; gap: 44px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .item { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.marquee .item svg { flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee::before, .marquee::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--fog), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--fog), transparent); }
/* ---------- activity toast ---------- */
.activity-chip {
display: inline-flex; align-items: center; gap: 10px;
background: var(--paper); border: 1px solid var(--line); border-radius: 99px;
padding: 9px 18px 9px 13px; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
box-shadow: var(--shadow-md); margin-top: 22px;
}
.activity-chip b { color: var(--ink); }
.activity-chip .swap { display: inline-block; animation: chipIn .45s ease; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- reveal variants ---------- */
.reveal.scale { transform: translateY(18px) scale(.97); }
.reveal.scale.in { transform: none; }
.reveal.left { transform: translateX(-24px); }
.reveal.right { transform: translateX(24px); }
.reveal.left.in, .reveal.right.in { transform: none; }
/* ---------- section glow headers ---------- */
.glow-title { position: relative; display: inline-block; }
.glow-title::after {
content: ''; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
width: 120px; height: 44px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(23,184,119,.35), transparent 70%);
filter: blur(10px); pointer-events: none;
}
/* ---------- FAQ hover ---------- */
.faq details { transition: border-color .2s, box-shadow .2s; }
.faq details:hover { border-color: rgba(23,184,119,.5); box-shadow: 0 6px 18px rgba(11,123,76,.08); }
.faq details[open] { border-color: var(--green); box-shadow: 0 8px 24px rgba(11,123,76,.10); }
/* ---------- step card hover ---------- */
.step-card { transition: transform .22s, box-shadow .22s, border-color .22s; }
.step-card:hover { transform: translateY(-3px); border-color: rgba(23,184,119,.5); box-shadow: 0 12px 32px rgba(11,123,76,.13); }
.step-num { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.step-card:hover .step-num { transform: scale(1.15) rotate(-4deg); box-shadow: 0 0 0 6px var(--mint), 0 0 20px rgba(23,184,119,.5); }
/* ---------- review wall ---------- */
.review-card { transition: transform .22s, box-shadow .22s, border-color .22s; }
.review-card:hover .stars { text-shadow: 0 0 12px rgba(23,184,119,.8); }
.review-more { text-align: center; margin-top: 28px; }
/* ---------- green section shine ---------- */
.section-green { position: relative; overflow: hidden; }
.section-green::before {
content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
right: -180px; top: -320px; filter: blur(70px); pointer-events: none;
background: radial-gradient(circle, rgba(62,207,149,.35), transparent 70%);
}
.section-green > .wrap { position: relative; }
/* ---------- table row hover ---------- */
.table-wrap tbody tr { transition: background .15s; }
.table-wrap tbody tr:hover { background: var(--mint-soft); }
/* ============================================================
v1.2 — illustration, layout variation, deep motion
============================================================ */
/* ---------- staggered headline ---------- */
.headline .w {
display: inline-block; opacity: 0; transform: translateY(.55em);
animation: wordRise .65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes wordRise { to { opacity: 1; transform: none; } }
/* ---------- hero illustration scene ---------- */
.scene { position: relative; width: 100%; max-width: 560px; margin-left: auto; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.van-group { animation: vanIn 1.1s .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes vanIn { from { transform: translateX(-140px); opacity: 0; } to { transform: none; opacity: 1; } }
.wheel { transform-box: fill-box; transform-origin: center; animation: wheelSpin 1.1s .3s ease-out both; }
@keyframes wheelSpin { from { transform: rotate(-260deg); } to { transform: rotate(0); } }
.sway { transform-box: fill-box; transform-origin: bottom center; animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.puffR { animation: puff 3.2s ease-in-out infinite alternate; }
@keyframes puff { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.scene .over-card {
position: absolute; background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 16px 18px;
}
@media (max-width: 900px) { .scene { margin: 0 auto; } }
/* ---------- section dividers ---------- */
.divider { display: block; width: 100%; height: 64px; margin-bottom: -1px; }
.divider.flip { transform: scaleY(-1); }
/* ---------- journey (how it works, de-tiled) ---------- */
.journey { position: relative; margin-top: 56px; }
.journey-path { position: absolute; top: 44px; left: 6%; right: 6%; height: 60px; pointer-events: none; }
.journey-path path {
fill: none; stroke: var(--green-bright); stroke-width: 2.5; stroke-dasharray: 8 9;
opacity: .6;
}
.journey-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
@media (max-width: 760px) { .journey-row { grid-template-columns: 1fr; gap: 44px; } .journey-path { display: none; } }
.jstep { text-align: center; padding: 0 8px; }
.jstep:nth-child(2) { transform: translateY(26px); }
@media (max-width: 760px) { .jstep:nth-child(2) { transform: none; } }
.spot {
width: 116px; height: 116px; margin: 0 auto 20px; position: relative;
display: flex; align-items: center; justify-content: center;
}
.spot .blob {
position: absolute; inset: 0; background: var(--mint);
border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.jstep:hover .spot .blob { transform: rotate(-8deg) scale(1.08); background: #d5eee2; }
.spot svg { position: relative; z-index: 1; }
.spot .jnum {
position: absolute; top: -4px; right: -2px; z-index: 2;
width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff;
font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 4px var(--paper), 0 4px 12px rgba(11,123,76,.3);
}
.jstep h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; }
.jstep p { font-size: .92rem; color: var(--ink-soft); margin: 0; max-width: 30ch; margin-inline: auto; }
/* ---------- vetting rail (de-tiled) ---------- */
.vet-rail { position: relative; padding-left: 42px; }
.vet-rail::before {
content: ''; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 3px;
background: linear-gradient(var(--green-bright), var(--green)); border-radius: 3px; opacity: .5;
}
.vet-item { position: relative; padding: 4px 0 26px; }
.vet-item:last-child { padding-bottom: 0; }
.vet-item::before {
content: ''; position: absolute; left: -36px; top: 8px; width: 15px; height: 15px;
border-radius: 50%; background: var(--paper); border: 3.5px solid var(--green);
box-shadow: 0 0 0 4px var(--mint-soft), 0 0 14px rgba(23,184,119,.45);
}
.vet-item b { font-size: 1rem; }
.vet-item p { font-size: .88rem; color: var(--ink-soft); margin: 4px 0 0; }
/* ---------- ClearSorted Standard cards ---------- */
.std-card { position: relative; padding: 32px 32px 28px; }
.std-card .std-num {
position: absolute; top: 26px; right: 28px;
font-size: .78rem; font-weight: 800; letter-spacing: .14em;
color: var(--ink-soft); opacity: .55;
}
.std-card .std-ic {
width: 54px; height: 54px; border-radius: 14px; background: var(--mint);
display: flex; align-items: center; justify-content: center; color: var(--green);
margin-bottom: 14px;
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.std-card:hover .std-ic { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 0 5px var(--mint-soft), 0 0 18px rgba(23,184,119,.35); }
.std-card b { font-size: 1.02rem; display: block; margin-bottom: 6px; }
.std-card p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
/* ---------- featured quote ---------- */
.pullquote { position: relative; max-width: 760px; margin: 0 auto 56px; text-align: center; }
.pullquote .mark {
font-size: 5rem; line-height: 0; color: var(--green-bright); font-weight: 800;
display: block; height: .45em; text-shadow: 0 0 30px rgba(23,184,119,.5);
}
.pullquote blockquote {
margin: 18px 0 20px; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700;
line-height: 1.45; letter-spacing: -.01em;
}
.pullquote .who { font-size: .88rem; color: var(--ink-soft); }
.pullquote .who b { color: var(--ink); }
/* ---------- review masonry stagger ---------- */
.stagger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .stagger-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .stagger-grid { grid-template-columns: 1fr; } }
.stagger-grid > :nth-child(3n+2) { transform: translateY(28px); }
@media (max-width: 900px) { .stagger-grid > :nth-child(3n+2) { transform: none; } }
.review-card.tilt-l { rotate: -1deg; }
.review-card.tilt-r { rotate: 1.2deg; }
.review-card.tilt-l:hover, .review-card.tilt-r:hover { rotate: 0deg; }
.review-card { transition: transform .25s, box-shadow .25s, border-color .25s, rotate .25s; }
/* ---------- parallax layers ---------- */
[data-parallax] { will-change: transform; }
/* ---------- green cta texture ---------- */
.cta-ticks {
position: absolute; inset: 0; opacity: .07; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M20 38l9 9 22-24' fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 72px 72px;
}
/* ---------- price visual ---------- */
.price-scene { margin: 0 0 22px; }
.price-scene svg { display: block; width: 100%; max-width: 380px; height: auto; }
/* ============================================================
v1.3 — photographic split hero + category bar
============================================================ */
.hero-split { position: relative; overflow: hidden; background: var(--paper); padding: 0; }
.hero-split .inner {
display: grid; grid-template-columns: minmax(460px, 48%) 1fr;
min-height: 640px; position: relative;
}
@media (max-width: 960px) { .hero-split .inner { grid-template-columns: 1fr; min-height: 0; } }
.hero-copy {
position: relative; z-index: 3; padding: 60px 24px 130px;
max-width: 640px; margin-left: max(24px, calc((100vw - var(--wrap)) / 2));
padding-left: 0; padding-right: 40px;
}
.pill-badge { margin-bottom: 22px; }
@media (max-width: 960px) { .hero-copy { margin: 0 auto; padding: 56px 24px 40px; } }
.pill-badge {
display: inline-flex; align-items: center; gap: 9px;
background: var(--mint); border-radius: 99px; padding: 9px 18px 9px 12px;
font-size: .88rem; font-weight: 700; color: var(--green-deep); margin-bottom: 26px;
}
.hero-copy h1 {
font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800;
line-height: 1.05; letter-spacing: -.035em;
}
.hero-copy h1 .grn { color: var(--green); }
.hero-copy .lede { font-size: 1.1rem; color: var(--ink-soft); margin: 18px 0 26px; max-width: 46ch; }
.hero-ctas { display: flex; flex-direction: column; gap: 14px; }
.hero-secondary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.or-call { font-size: .85rem; color: var(--ink-soft); max-width: 34ch; line-height: 1.45; }
.or-call a { font-weight: 800; text-decoration: none; }
.btn-play {
background: var(--paper); color: var(--ink); border: 1.5px solid var(--line);
}
.btn-play:hover { border-color: var(--green); color: var(--green); background: var(--mint-soft); }
.btn-play .ic {
width: 26px; height: 26px; border-radius: 50%; background: var(--mint);
display: inline-flex; align-items: center; justify-content: center; color: var(--green);
}
.hero-props {
display: grid; grid-template-columns: repeat(3, minmax(0, auto));
gap: 16px 28px; margin-top: 34px; justify-content: start;
}
@media (max-width: 560px) { .hero-props { grid-template-columns: 1fr; gap: 14px; } }
.hero-prop { display: flex; gap: 11px; align-items: center; }
.hero-prop .ic {
width: 40px; height: 40px; border-radius: 50%; background: var(--mint); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; color: var(--green);
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.hero-prop:hover .ic { transform: scale(1.12) rotate(-5deg); box-shadow: 0 0 0 5px var(--mint-soft), 0 0 18px rgba(23,184,119,.4); }
.hero-prop b { display: block; font-size: .88rem; line-height: 1.25; }
.hero-prop span { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; display: block; }
/* photo panel */
.photo-panel { position: absolute; inset: 0; left: 38%; z-index: 1; }
@media (max-width: 960px) {
.photo-panel { position: relative; inset: auto; left: auto; height: 420px; margin: 0 16px; border-radius: var(--r-card); overflow: hidden; }
}
.photo-panel img.hero-photo {
width: 100%; height: 100%; object-fit: cover; object-position: 55% 38%; display: block;
opacity: 0;
animation: photoIn 2s .15s cubic-bezier(.25,.6,.3,1) forwards;
}
@keyframes photoIn {
from { transform: scale(1.08); opacity: 0; }
60% { opacity: 1; }
to { transform: scale(1); opacity: 1; }
}
.photo-panel::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--paper) 0%, rgba(255,255,255,.4) 5%, transparent 16%),
linear-gradient(90deg, var(--paper) 0%, rgba(255,255,255,.4) 9%, transparent 30%);
}
@media (max-width: 960px) { .photo-panel::after { background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 30%); } }
/* fallback: no photo yet → show illustration */
.photo-panel .scene-fallback { display: none; }
.photo-panel.no-photo { background: linear-gradient(160deg, var(--mint-soft), var(--mint)); }
.photo-panel.no-photo img.hero-photo { display: none; }
.photo-panel.no-photo .scene-fallback {
display: flex; align-items: center; justify-content: center; height: 100%; padding: 40px 40px 90px;
}
.photo-panel.no-photo .scene-fallback svg { max-width: 560px; width: 100%; height: auto; overflow: visible; }
/* rating card on the photo */
.rating-card {
position: absolute; right: 36px; bottom: 120px; z-index: 2;
background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-lg);
padding: 18px 22px; animation: floatY 7s 1s ease-in-out infinite;
}
@media (max-width: 960px) { .rating-card { right: 14px; bottom: 14px; padding: 14px 16px; } }
.rating-card .row1 { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.05rem; }
.rating-card .stars-box { display: flex; gap: 3px; }
.rating-card .stars-box span {
/* --green-bright gave white 2.57:1; --green is 5.28:1 */
width: 22px; height: 22px; background: var(--green); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; border-radius: 4px;
}
.rating-card .sub { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
/* NOTE: swap for the real Trustpilot TrustBox widget once the profile exists. */
/* category bar overlapping hero bottom */
.cat-bar-wrap { position: relative; z-index: 4; margin-top: -64px; padding: 0 24px; }
.cat-bar {
max-width: var(--wrap); margin: 0 auto;
background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
box-shadow: var(--shadow-lg);
display: flex; align-items: stretch; overflow-x: auto;
}
.cat-bar { scrollbar-width: none; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-lead {
padding: 20px 22px; font-weight: 800; font-size: .9rem; line-height: 1.3;
border-right: 1px solid var(--line); display: flex; align-items: center; flex-shrink: 0; max-width: 168px;
}
.cat-item {
display: flex; align-items: center; gap: 11px; padding: 18px 18px;
font-weight: 700; font-size: .88rem; line-height: 1.25; color: var(--ink); text-decoration: none;
border-right: 1px solid var(--line); flex: 1 1 0; min-width: 0;
transition: background .18s, color .18s;
}
@media (max-width: 860px) {
.cat-item { flex: 0 0 auto; min-width: 168px; white-space: nowrap; }
}
.cat-item:last-child { border-right: none; }
.cat-item svg { color: var(--green); flex-shrink: 0; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.cat-item:hover { background: var(--mint-soft); color: var(--green); }
.cat-item:hover svg { transform: translateY(-2px) scale(1.12); }
/* ============================================================
v1.4 — before/after comparison slider
============================================================ */
.ba-wrap { max-width: 660px; margin: 72px auto 0; }
.ba-frame {
--p: 50%;
position: relative; width: 100%; aspect-ratio: 16 / 10;
border-radius: var(--r-card); overflow: hidden;
box-shadow: var(--shadow-lg); border: 1px solid var(--line);
touch-action: pan-y;
}
.ba-layer { position: absolute; inset: 0; overflow: hidden; }
.ba-layer img {
position: absolute; top: 0; height: 100%; width: 200%;
object-fit: cover; object-position: 50% 45%; max-width: none;
}
.ba-layer.after img { left: -100%; }
.ba-layer.before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba-layer.before img { left: 0; }
.ba-handle {
position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px;
background: #fff; transform: translateX(-50%); pointer-events: none;
box-shadow: 0 0 14px rgba(0,0,0,.35);
}
.ba-handle::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 46px; height: 46px; border-radius: 50%;
background: var(--green); transform: translate(-50%, -50%);
box-shadow: 0 4px 16px rgba(10,46,33,.4), 0 0 24px rgba(23,184,119,.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
.ba-range {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: ew-resize; margin: 0;
}
.ba-tag {
position: absolute; top: 16px; z-index: 2; pointer-events: none;
font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
padding: 7px 14px; border-radius: 99px; color: #fff;
background: rgba(10,46,33,.72); backdrop-filter: blur(4px);
}
.ba-tag.t-before { left: 16px; }
.ba-tag.t-after { right: 16px; background: var(--green); }
.ba-caption { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 14px; }
.ba-wrap[hidden] { display: none; }
.ba-jobs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.ba-job {
font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
padding: 9px 20px; border-radius: 99px; border: 1.5px solid var(--line);
background: var(--paper); color: var(--ink); transition: all .18s;
}
.ba-job:hover { border-color: var(--green); color: var(--green); }
.ba-job.active {
background: var(--green); border-color: var(--green); color: #fff;
box-shadow: 0 2px 10px rgba(11,123,76,.3), 0 0 18px rgba(23,184,119,.3);
}
.ba-layer img { transition: opacity .25s; }
.ba-frame.switching .ba-layer img { opacity: 0; }
/* ============================================================
v1.5 — platform loop: portal + firm dashboard
============================================================ */
.portal { max-width: 1000px; margin: 0 auto; padding: 40px 24px 96px; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.portal-head h1 { font-size: 1.6rem; font-weight: 800; }
.portal-head .sub { color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }
/* status timeline */
.status-line { display: flex; align-items: center; gap: 0; margin: 20px 0 36px; flex-wrap: wrap; }
.status-step { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.status-step .dot {
width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--ink-soft); flex-shrink: 0;
}
.status-step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.status-step.now .dot { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 4px var(--mint); }
.status-step.now { color: var(--green); }
.status-gap { width: 34px; height: 2px; background: var(--line); margin: 0 8px; }
.status-step.done + .status-gap { background: var(--green); }
/* quote compare cards */
.qcard { position: relative; }
.qcard .firm-line { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qcard .price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.qcard .price small { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.qcard .offset { color: var(--green); font-size: .85rem; font-weight: 700; }
.qcard .includes { font-size: .84rem; color: var(--ink-soft); margin: 10px 0 14px; }
.qcard.accepted { border-color: var(--green); box-shadow: 0 0 0 1.5px var(--green), var(--shadow-md); }
.qcard .won-tag { position: absolute; top: -12px; right: 16px; }
.qcard.waiting { border-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 210px; color: var(--ink-soft); font-size: .88rem; text-align: center; }
/* chat */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding: 4px 2px; }
.msg { max-width: 78%; padding: 11px 15px; border-radius: 15px; font-size: .9rem; line-height: 1.5; }
.msg.customer { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 5px; }
.msg.firm { align-self: flex-start; background: var(--fog); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg .meta { display: block; font-size: .68rem; opacity: .75; margin-top: 5px; }
.chat-input { display: flex; gap: 10px; margin-top: 14px; }
.chat-input input { flex: 1; }
.relay-note {
display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--ink-soft);
background: var(--mint-soft); border: 1px solid var(--mint); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
/* slot picker */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.slot {
font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
padding: 12px 10px; border-radius: 12px; border: 1.5px solid var(--line);
background: var(--paper); color: var(--ink); text-align: center; transition: all .15s;
}
.slot span { display: block; font-weight: 500; font-size: .76rem; color: var(--ink-soft); }
.slot:hover { border-color: var(--green); }
.slot.picked { background: var(--green); border-color: var(--green); color: #fff; }
.slot.picked span { color: #CDEEDC; }
/* firm dashboard */
.dash-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-tab {
font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
padding: 10px 20px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
}
.dash-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.lead-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.lead-row .info b { display: block; }
.lead-row .info span { font-size: .82rem; color: var(--ink-soft); }
.masked { color: var(--ink-soft); font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.payout-box { background: var(--fog); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .88rem; }
.payout-box .row { display: flex; justify-content: space-between; padding: 3px 0; }
.payout-box .row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 800; }
.fee-note { color: var(--green); font-size: .78rem; font-weight: 700; }
.empty-note { text-align: center; color: var(--ink-soft); font-size: .9rem; padding: 40px 20px; }
/* connected business profile */
.logo-chip {
width: 42px; height: 42px; border-radius: 12px; color: #fff; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem;
}
.g-line { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-soft); }
.g-line .g-mark {
display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink);
}
.g-line .g-mark svg { flex-shrink: 0; }
.review-snips { margin-top: 10px; }
.review-snips summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--green); list-style: none; }
.review-snips summary::-webkit-details-marker { display: none; }
.review-snips summary::after { content: ' ▾'; font-size: .7rem; }
.review-snips[open] summary::after { content: ' ▴'; }
.snip { border-left: 3px solid var(--mint); padding: 6px 0 6px 12px; margin-top: 10px; font-size: .82rem; }
.snip .stars { font-size: .72rem; }
.snip .by { color: var(--ink-soft); font-size: .74rem; }
.connect-box .results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.connect-result {
display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
font-family: inherit; font-size: .9rem; cursor: pointer; width: 100%;
padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
}
.connect-result:hover { border-color: var(--green); background: var(--mint-soft); }
.connect-result b { display: block; }
.connect-result span { font-size: .78rem; color: var(--ink-soft); }
/* ---------- notifications (simulated SMS/email) ---------- */
.notif-stack {
position: fixed; right: 18px; bottom: 18px; z-index: 200;
display: flex; flex-direction: column-reverse; gap: 10px; max-width: 330px;
}
.notif {
background: var(--ink); color: #E7F2EC; border-radius: 14px; padding: 12px 15px;
font-size: .8rem; line-height: 1.5; box-shadow: 0 10px 32px rgba(10,46,33,.35);
display: flex; gap: 10px; align-items: flex-start;
animation: notifIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes notifIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.notif .nic {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.notif.sms .nic { background: #17B877; }
.notif.email .nic { background: #3E7CB3; }
.notif b { color: #fff; }
.notif .nmeta { display: block; font-size: .66rem; color: #86A395; margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
.notif .nclose { margin-left: auto; background: none; border: none; color: #86A395; cursor: pointer; font-size: .9rem; padding: 0 2px; }
@media (prefers-reduced-motion: reduce) { .notif { animation: none; } }
/* onboarding */
.email-mock {
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow-md); overflow: hidden; text-align: left;
}
.email-mock .eh { background: var(--fog); border-bottom: 1px solid var(--line); padding: 12px 18px; font-size: .78rem; color: var(--ink-soft); }
.email-mock .eh b { color: var(--ink); }
.email-mock .eb { padding: 24px; font-size: .92rem; }
.onb-steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.onb-dot { width: 34px; height: 5px; border-radius: 3px; background: var(--line); }
.onb-dot.on { background: var(--green); }
/* ---------- v1.7: partner onboarding + portal polish ---------- */
.wiz-bar { height: 5px; background: var(--line); border-radius: 3px; margin-bottom: 34px; overflow: hidden; }
.wiz-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); border-radius: 3px; transition: width .4s cubic-bezier(.22,1,.36,1); }
.wiz h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.wiz .sub { color: var(--ink-soft); font-size: .9rem; margin-bottom: 24px; }
.chip-check { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check label {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
border: 1.5px solid var(--line); border-radius: 99px; padding: 10px 18px;
font-size: .88rem; font-weight: 600; background: var(--paper); margin: 0;
transition: all .15s; user-select: none;
}
.chip-check input { display: none; }
.chip-check label:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 2px 10px rgba(11,123,76,.3); }
.chip-check label:hover { border-color: var(--green); }
.dropzone {
border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center;
color: var(--ink-soft); font-size: .85rem; cursor: pointer; transition: all .15s; background: var(--fog);
}
.dropzone:hover, .dropzone.over { border-color: var(--green); background: var(--mint-soft); color: var(--green); }
.dropzone.done { border-style: solid; border-color: var(--green); background: var(--mint-soft); color: var(--green-deep); font-weight: 700; }
.radius-out { font-size: 2rem; font-weight: 800; color: var(--green); letter-spacing: -.02em; }
.stripe-box { border: 1.5px solid var(--line); border-radius: 14px; padding: 22px; display: flex; align-items: center; gap: 16px; background: var(--paper); }
.stripe-logo { font-weight: 800; font-size: 1.1rem; color: #635BFF; letter-spacing: -.02em; }
/* portal hero */
.dash-greet { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.dash-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0 28px; }
@media (max-width: 900px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.dcard b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dcard span { font-size: .74rem; color: var(--ink-soft); font-weight: 600; }
.dcard.hero-d { background: var(--ink); border: none; color: #fff; }
.dcard.hero-d span { color: #86A395; }
.dcard.hero-d b { color: #3ECF95; }
/* profile completion */
.prof-prog { margin: 6px 0 14px; }
.prof-prog .bar { height: 9px; background: var(--fog); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prof-prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-bright)); transition: width .5s; }
.prof-item { display: flex; gap: 8px; align-items: center; font-size: .85rem; padding: 3px 0; }
.prof-item.miss { color: var(--ink-soft); }
.tip-42 { background: var(--mint-soft); border: 1px solid var(--mint); border-radius: 10px; padding: 10px 14px; font-size: .8rem; margin-top: 10px; }
/* AI summary */
.ai-box {
background: linear-gradient(135deg, var(--mint-soft), var(--paper));
border: 1px solid var(--mint); border-radius: 12px; padding: 12px 16px;
font-size: .82rem; margin-top: 12px;
}
.ai-box .ai-tag { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.ai-box .ai-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ai-box .ai-row span b { color: var(--green-deep); }
/* ---------- v1.8: premium refinement pass ---------- */
/* AI estimate card — the hero CTA as software */
.est-card {
background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
box-shadow: 0 1px 2px rgba(10,46,33,.05), 0 20px 50px rgba(10,46,33,.10);
padding: 22px; max-width: 440px;
}
.est-card .est-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.est-card .est-head b { font-size: .92rem; }
.est-card .est-ai { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.est-row { display: flex; gap: 10px; margin-bottom: 10px; }
.est-row input { flex: 1; border-radius: 12px; }
.est-upload {
display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--line);
border-radius: 12px; padding: 12px 14px; font-size: .84rem; color: var(--ink-soft);
cursor: pointer; transition: all .15s; margin-bottom: 12px;
}
.est-upload:hover { border-color: var(--green); background: var(--mint-soft); color: var(--green); }
.est-card .btn { width: 100%; }
.est-foot { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink-soft); margin-top: 10px; }
.est-foot b { color: var(--green); }
/* hero trust strip */
.hero-trust {
display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center;
margin-top: 26px; font-size: .8rem; color: var(--ink-soft); font-weight: 600;
}
.hero-trust .ht { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .ht b { color: var(--ink); font-weight: 800; }
.hero-trust .stars { color: var(--green-bright); letter-spacing: 1px; }
/* how-it-works mini UI cards */
.mini-ui {
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow-md); padding: 14px; font-size: .74rem; text-align: left;
width: 100%; max-width: 230px; margin: 0 auto 18px;
}
.mini-ui .mrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; }
.mini-ui .mrow.hl { background: var(--mint-soft); }
.mini-ui .mbar { height: 7px; border-radius: 4px; background: var(--fog); overflow: hidden; margin: 8px 0; }
.mini-ui .mbar i { display: block; height: 100%; width: 70%; background: linear-gradient(90deg, var(--green), var(--green-bright)); animation: mbarFill 2.4s ease-in-out infinite alternate; }
@keyframes mbarFill { from { width: 35%; } to { width: 86%; } }
.mini-ui .mtag { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.mini-ui .mprice { display: flex; justify-content: space-between; font-size: .78rem; padding: 5px 8px; }
.mini-ui .mprice b { font-variant-numeric: tabular-nums; }
/* inline estimator (pricing as software) */
.estor { background: var(--paper); border: 1.5px solid var(--green); border-radius: 18px; box-shadow: var(--shadow-md); padding: 26px; }
.estor .out-range { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.estor .toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* partner cards (Airbnb-host style, rich) */
.partner-card { padding: 20px; display: flex; flex-direction: column; }
.partner-card .ph { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pc-logo {
width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.pc-logo b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.pc-logo span { font-size: .4rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.pc-head-txt { min-width: 0; flex: 1; }
.pc-name { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.pc-name b { font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-chip {
background: var(--mint); color: var(--green-deep); font-size: .62rem; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 3px 8px; flex-shrink: 0;
}
.pc-loc { font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }
.pc-stars { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; }
.pc-stars .st { color: #E9A63B; letter-spacing: .5px; }
.pc-stars b { font-weight: 800; }
.pc-stars span { color: var(--ink-soft); }
.pc-desc {
font-size: .84rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.pc-stats {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
border-block: 1px solid var(--fog); padding: 9px 0; margin-bottom: 12px;
font-size: .78rem; color: var(--ink-soft);
}
.pc-stats > div { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.pc-stats b { font-weight: 800; color: var(--ink); font-size: .84rem; font-variant-numeric: tabular-nums; }
.pc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.pc-foot .btn { padding: 10px 20px; font-size: .82rem; }
.pc-foot a.rj { font-size: .82rem; font-weight: 700; text-decoration: none; }
.partner-card .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); margin: 10px 0 12px; }
.partner-card .meta b { color: var(--ink); }
.verified-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .67rem; font-weight: 800; color: var(--green); background: var(--mint); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
/* trust bar (replaces raw stat counters) */
.trust-bar { border-block: 1px solid var(--line); background: var(--paper); padding: 26px 0; }
.trust-bar .row { display: flex; justify-content: center; gap: 14px 40px; flex-wrap: wrap; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.trust-bar .ti { display: inline-flex; align-items: center; gap: 8px; }
.trust-bar .ti svg { color: var(--green); flex-shrink: 0; }
/* ---------- v1.9: customer app shell ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--fog); }
.app-side {
background: var(--paper); border-right: 1px solid var(--line);
padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-side .logo { margin: 4px 8px 22px; }
.snav {
display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 11px;
font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
transition: background .15s, color .15s; cursor: pointer; border: none; background: none;
font-family: inherit; text-align: left; width: 100%;
}
.snav:hover { background: var(--mint-soft); color: var(--green); }
.snav.on { background: var(--mint); color: var(--green-deep); font-weight: 700; }
.snav .nbadge { margin-left: auto; background: var(--green); color: #fff; font-size: .68rem; font-weight: 800; border-radius: 99px; padding: 2px 8px; }
.side-card { margin-top: auto; background: var(--mint-soft); border: 1px solid var(--mint); border-radius: 14px; padding: 16px; font-size: .8rem; }
.side-card b { display: block; margin-bottom: 4px; }
.app-main { padding: 0 32px 48px; min-width: 0; }
.app-top {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 0; margin-bottom: 8px;
}
.app-top .who { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; }
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.bell { position: relative; background: none; border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.bell .dot { position: absolute; top: -3px; right: -3px; background: var(--green); color: #fff; font-size: .62rem; font-weight: 800; border-radius: 99px; padding: 1px 6px; }
.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 10px 0 20px; }
.page-h h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; }
.page-h p { color: var(--ink-soft); font-size: .9rem; margin: 4px 0 0; }
/* progress tracker */
.tracker { display: flex; align-items: flex-start; gap: 0; margin-top: 4px; }
.tk { flex: 1; text-align: center; position: relative; min-width: 70px; }
.tk .tkd {
width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
background: var(--fog); border: 2px solid var(--line); color: var(--ink-soft); position: relative; z-index: 2;
}
.tk.done .tkd { background: var(--green); border-color: var(--green); color: #fff; }
.tk.now .tkd { background: var(--green-bright); border-color: var(--green-bright); color: #fff; box-shadow: 0 0 0 5px var(--mint); }
.tk::before {
content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px;
background: var(--line); z-index: 1;
}
.tk:first-child::before { display: none; }
.tk.done::before, .tk.now::before { background: var(--green); }
.tk b { display: block; font-size: .76rem; }
.tk span { font-size: .68rem; color: var(--ink-soft); }
/* quote rows */
.qrow {
display: flex; align-items: center; gap: 14px; padding: 16px;
border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; background: var(--paper);
transition: border-color .2s, box-shadow .2s;
}
.qrow:hover { border-color: rgba(23,184,119,.5); box-shadow: var(--shadow-md); }
.qrow.sel { border-color: var(--green); background: var(--mint-soft); box-shadow: 0 0 0 1px var(--green); }
.qrow .qinfo { flex: 1; min-width: 0; }
.qrow .qinfo b { font-size: .92rem; }
.qrow .qmeta { font-size: .74rem; color: var(--ink-soft); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.qrow .qprice { text-align: right; }
.qrow .qprice b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.qrow .qprice span { display: block; font-size: .68rem; color: var(--ink-soft); }
/* detail rows */
.drow { display: flex; gap: 12px; padding: 9px 0; font-size: .85rem; border-bottom: 1px solid var(--fog); }
.drow:last-child { border-bottom: none; }
.drow .dl { color: var(--ink-soft); width: 46%; display: flex; gap: 8px; align-items: center; }
.drow .dv { font-weight: 600; flex: 1; }
.photo-grid { display: flex; gap: 8px; margin-top: 8px; }
.photo-grid img, .photo-grid .more {
width: 62px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line);
}
.photo-grid .more { display: flex; align-items: center; justify-content: center; background: var(--fog); font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
/* updates feed */
.upd { display: flex; gap: 10px; padding: 10px 0; font-size: .82rem; border-bottom: 1px solid var(--fog); }
.upd:last-child { border-bottom: none; }
.upd .ud { width: 9px; height: 9px; border-radius: 50%; background: var(--green-bright); margin-top: 5px; flex-shrink: 0; }
.upd time { display: block; font-size: .7rem; color: var(--ink-soft); margin-top: 2px; }
/* map mock */
.map-mock {
height: 150px; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--line);
background:
linear-gradient(90deg, transparent 48%, #DCE8E1 48%, #DCE8E1 52%, transparent 52%),
linear-gradient(0deg, transparent 30%, #E6EFE9 30%, #E6EFE9 34%, transparent 34%),
linear-gradient(35deg, transparent 60%, #DCE8E1 60%, #DCE8E1 63%, transparent 63%),
linear-gradient(120deg, #EDF4EF, #E4EFE8);
}
.map-mock .pin {
position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%);
width: 26px; height: 26px; background: var(--green); border-radius: 50% 50% 50% 0;
rotate: -45deg; box-shadow: 0 4px 12px rgba(11,123,76,.4);
}
.map-mock .pin::after { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
/* pay band */
.pay-band {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
padding: 20px 24px; margin-top: 20px; box-shadow: var(--shadow-sm);
}
.pay-band b { font-size: .98rem; }
.pay-band p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px) {
.app { grid-template-columns: 1fr; }
.app-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.app-side .logo { margin: 0 10px 0 0; }
.snav { width: auto; padding: 8px 12px; font-size: .8rem; }
.side-card { display: none; }
.app-main { padding: 0 16px 40px; }
.tracker { flex-wrap: wrap; gap: 12px 0; }
}
/* ---------- v2.0: firm workspace ---------- */
.firm-id { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; border-bottom: 1px solid var(--fog); margin-bottom: 10px; }
.firm-id b { font-size: .9rem; display: block; line-height: 1.25; }
.lead-item {
display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px;
background: var(--paper); margin-bottom: 10px; cursor: pointer; transition: all .18s;
}
.lead-item:hover { border-color: rgba(23,184,119,.55); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lead-item.sel { border-color: var(--green); background: var(--mint-soft); box-shadow: 0 0 0 1px var(--green); }
.lead-item img { width: 74px; height: 62px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0; }
.lead-item .li-main { flex: 1; min-width: 0; }
.lead-item .li-top { display: flex; gap: 8px; align-items: center; font-size: .68rem; color: var(--ink-soft); }
.new-chip { background: var(--green); color: #fff; font-weight: 800; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; }
.lead-item b { font-size: .9rem; display: block; margin-top: 2px; }
.lead-item .li-meta { font-size: .72rem; color: var(--ink-soft); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.lead-item .li-val { text-align: right; flex-shrink: 0; }
.lead-item .li-val span { display: block; font-size: .64rem; color: var(--ink-soft); }
.lead-item .li-val b { font-size: .95rem; color: var(--green-deep); }
.detail-chips { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; margin: 14px 0; background: var(--fog); }
.detail-chips .dc { padding: 10px 16px; border-right: 1px solid var(--line); font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
.detail-chips .dc b { display: block; color: var(--ink); font-size: .8rem; }
.detail-chips .dc:last-child { border-right: none; }
.quote-panel {
background: var(--mint-soft); border: 1.5px solid var(--green); border-radius: 16px; padding: 20px;
position: sticky; top: 16px;
}
.quote-panel .qp-title { font-size: .92rem; font-weight: 800; margin-bottom: 4px; }
.decline { color: var(--danger); font-size: .8rem; font-weight: 700; text-align: center; display: block; margin-top: 10px; text-decoration: none; }
.decline:hover { text-decoration: underline; }
.win-band {
display: flex; align-items: center; gap: 14px; background: var(--mint-soft); border: 1px solid var(--mint);
border-radius: var(--r-card); padding: 18px 22px; margin-top: 18px; font-size: .88rem;
}
@media (max-width: 1100px) { .firm-cols { grid-template-columns: 1fr !important; } .quote-panel { position: static; } }
/* ---------- v2.1: premium how-it-works rows ---------- */
.step-row {
display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center;
padding: 44px 0;
}
.step-row.rev { grid-template-columns: 1.1fr 1fr; }
.step-row.rev .step-copy { order: 2; }
.step-row.rev .step-mock-wrap { order: 1; }
@media (max-width: 860px) {
.step-row, .step-row.rev { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; }
.step-row.rev .step-copy { order: 1; }
.step-row.rev .step-mock-wrap { order: 2; }
}
.step-copy .step-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--green); margin-bottom: 14px;
}
.step-copy .step-eyebrow .n {
width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; letter-spacing: 0;
}
.step-copy h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 12px; }
.step-copy p { font-size: 1rem; color: var(--ink-soft); max-width: 44ch; margin: 0; }
.step-mock {
background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
box-shadow: 0 2px 4px rgba(10,46,33,.04), 0 24px 60px rgba(10,46,33,.12);
padding: 22px; max-width: 460px; margin: 0 auto;
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.step-mock:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(10,46,33,.05), 0 32px 72px rgba(11,123,76,.16); }
.step-mock .smk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.step-mock .smk-head b { font-size: .9rem; }
.step-mock .smk-tag { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.smk-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.smk-photos img { width: 100%; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.smk-photos .add {
display: flex; align-items: center; justify-content: center; height: 74px;
border: 1.5px dashed var(--line); border-radius: 10px; color: var(--ink-soft); font-size: 1.3rem;
}
.smk-row {
display: flex; align-items: center; gap: 12px; padding: 11px 12px;
border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: .85rem;
}
.smk-row.hl { border-color: var(--green); background: var(--mint-soft); box-shadow: 0 0 0 1px var(--green); }
.smk-row .price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.smk-row .sub { font-size: .7rem; color: var(--ink-soft); display: block; }
.smk-confirm { text-align: center; padding: 10px 0 4px; }
.smk-confirm .when { font-size: 1.05rem; font-weight: 800; margin-top: 10px; }
.smk-sms {
display: flex; gap: 9px; align-items: flex-start; background: var(--ink); color: #E7F2EC;
border-radius: 12px; padding: 11px 13px; font-size: .76rem; line-height: 1.5; margin-top: 14px; text-align: left;
}
.smk-sms .b { width: 26px; height: 26px; border-radius: 8px; background: #17B877; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; }
/* ---------- reduced motion: kill the lot ---------- */
@media (prefers-reduced-motion: reduce) {
.hero::before, .hero::after, .hero-visual .float-card, .marquee .track,
.live-dot::after, .btn-primary:hover::after, .activity-chip .swap,
.headline .w, .van-group, .wheel, .sway, .puffR,
.photo-panel img.hero-photo, .rating-card { animation: none !important; }
.photo-panel img.hero-photo { opacity: 1; transform: none; }
.headline .w { opacity: 1; transform: none; }
.van-group { opacity: 1; }
.card.lift:hover, .step-card:hover, .float-card:hover, .badge:hover, .logo:hover,
.jstep:hover .spot .blob { transform: none; }
[data-parallax] { transform: none !important; }
.stagger-grid > :nth-child(3n+2) { transform: none; }
}
/* ---------- v2.2: airtasker-style hero + category scroller ---------- */
.hero-air { background: var(--paper); padding: 64px 0 84px; overflow: hidden; }
.hero-air .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-air .inner { grid-template-columns: 1fr; } }
.hero-air h1 {
font-size: clamp(2.4rem, 4.8vw, 3.6rem); font-weight: 800;
line-height: 1.03; letter-spacing: -.04em;
}
.hero-air .sub { font-size: 1.15rem; color: var(--ink-soft); margin: 18px 0 26px; max-width: 42ch; }
.air-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.air-step { display: flex; gap: 14px; align-items: center; font-size: 1.02rem; font-weight: 600; }
.air-step .n {
width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--green-deep);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex-shrink: 0;
}
.cat-scroller {
position: relative; height: 660px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
overflow: hidden; background: var(--mint-soft); border-radius: 28px; padding: 22px;
}
.cat-scroller::before, .cat-scroller::after {
content: ''; position: absolute; left: 0; right: 0; height: 70px; z-index: 2; pointer-events: none;
}
.cat-scroller::before { top: 0; background: linear-gradient(180deg, var(--mint-soft), transparent); border-radius: 28px 28px 0 0; }
.cat-scroller::after { bottom: 0; background: linear-gradient(0deg, var(--mint-soft), transparent); border-radius: 0 0 28px 28px; }
@media (max-width: 900px) { .cat-scroller { height: 420px; } }
.cat-col { display: flex; flex-direction: column; gap: 18px; animation: catUp 46s linear infinite; }
.cat-col.down { animation: catDown 52s linear infinite; }
.cat-scroller:hover .cat-col { animation-play-state: paused; }
@keyframes catUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes catDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cat-col, .cat-col.down { animation: none; } }
.cat-card {
display: flex; gap: 18px; align-items: flex-start; background: var(--paper);
border: none; border-radius: 18px; padding: 20px;
box-shadow: 0 1px 2px rgba(10,46,33,.04); text-decoration: none; color: var(--ink); flex-shrink: 0;
transition: box-shadow .2s, transform .2s;
}
.cat-card:hover { box-shadow: 0 8px 26px rgba(10,46,33,.10); transform: translateY(-2px); }
.cat-card .ci { width: 104px; height: 104px; border-radius: 13px; overflow: hidden; flex-shrink: 0; background: var(--mint); position: relative;
display: flex; align-items: center; justify-content: center; color: var(--green); }
.cat-card .ci img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card b { font-size: 1.12rem; font-weight: 700; display: block; letter-spacing: -.02em; line-height: 1.2; margin-top: 6px; }
.cat-card span { font-size: .85rem; color: var(--ink-soft); line-height: 1.45; display: block; margin-top: 6px; }
@media (max-width: 900px) { #how-grid { grid-template-columns: 1fr !important; } }
/* ---------- v2.3: recent-jobs horizontal marquee ---------- */
.jobs-sec { padding: 0 0 96px; overflow: hidden; }
.jobs-rows { display: flex; flex-direction: column; gap: 16px; }
.jobs-marquee {
overflow: hidden; position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.jobs-track { display: flex; gap: 16px; width: max-content; animation: jobsL 55s linear infinite; }
.jobs-track.right { animation: jobsR 62s linear infinite; }
.jobs-marquee:hover .jobs-track { animation-play-state: paused; }
@keyframes jobsL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes jobsR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .jobs-track, .jobs-track.right { animation: none; } }
.job-card {
width: 470px; flex-shrink: 0; background: var(--mint-soft); border: none;
border-radius: 22px; padding: 28px; transition: box-shadow .2s, transform .2s;
}
.job-card:hover { box-shadow: 0 10px 32px rgba(10,46,33,.10); transform: translateY(-2px); }
.job-card .jc-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.job-card .jc-top img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.job-card .jc-area { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.job-card .jc-title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.job-card .jc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.job-card .jc-stars {
display: inline-flex; align-items: center; gap: 7px; background: var(--paper);
color: var(--ink); font-size: .88rem; font-weight: 700; border-radius: 99px; padding: 9px 18px;
box-shadow: 0 1px 3px rgba(10,46,33,.08);
}
.job-card .jc-stars .st { color: #E9A63B; }
.job-card .jc-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jtabs {
display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap;
border-bottom: 1px solid var(--line); margin: 26px 0 0;
/* break out of .section-head's 680px cap so the row never wraps */
width: 100vw; max-width: 1080px; margin-left: 50%; transform: translateX(-50%);
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.jtabs::-webkit-scrollbar { display: none; }
.jtab {
font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink-soft);
background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer;
padding: 14px 20px; margin-bottom: -1px; transition: color .15s; white-space: nowrap; flex: 0 0 auto;
}
.jtab:hover { color: var(--ink); }
.jtab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--green); }
.jobs-desc { text-align: center; color: var(--ink-soft); font-size: 1.05rem; margin: 22px auto 38px; max-width: 62ch; }
/* ===== v2.4 — trust split (airtasker-style) ===== */
.trust-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
max-width: 1120px; margin: 0 auto;
}
.trust-photo { position: relative; padding: 34px 30px 40px 0; }
.trust-photo > img {
width: 100%; aspect-ratio: 4/4.4; object-fit: cover; border-radius: 26px; display: block;
box-shadow: 0 24px 60px rgba(10,46,33,.16);
}
.tf-rate {
position: absolute; top: 0; left: -8px; z-index: 2;
display: flex; align-items: center; gap: 14px;
background: var(--paper); border-radius: 18px; padding: 14px 22px 14px 14px;
box-shadow: 0 12px 34px rgba(10,46,33,.14);
}
.tf-rate img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tf-rate .n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; display: flex; align-items: center; gap: 7px; }
.tf-rate .n .st { color: #E9A63B; font-size: 1.25rem; }
.tf-rate .l { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.tf-chip {
position: absolute; right: 0; z-index: 2;
display: flex; align-items: center; gap: 11px;
background: var(--paper); border-radius: 99px; padding: 13px 22px;
box-shadow: 0 12px 34px rgba(10,46,33,.14);
font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.tf-chip .ago { color: var(--ink-soft); font-weight: 500; font-size: .85rem; }
.tf-chip.c1 { bottom: 108px; }
.tf-chip.c2 { bottom: 34px; right: 42px; }
.trust-copy h2 {
font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.06;
letter-spacing: -.035em; text-wrap: balance; margin: 0 0 40px;
}
.trust-list { display: flex; flex-direction: column; gap: 30px; }
.trust-item { display: grid; grid-template-columns: 34px 1fr; gap: 18px; align-items: start; }
.trust-item .ic { color: var(--green); margin-top: 2px; }
.trust-item b { display: block; font-size: 1.16rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.trust-item p { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.trust-item a { display: inline-block; margin-top: 9px; font-weight: 700; font-size: .93rem; }
.trust-copy .btn { margin-top: 42px; }
@media (max-width: 940px) {
.trust-split { grid-template-columns: 1fr; gap: 48px; }
.trust-photo { padding: 30px 24px 34px 0; max-width: 460px; }
.trust-copy h2 { margin-bottom: 32px; }
}
/* ===== v2.5 — coverage line (replaces cities marquee) ===== */
.coverage-line { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.coverage-line .wrap {
display: flex; align-items: center; justify-content: center; gap: 14px;
flex-wrap: wrap; padding: 17px 24px; font-size: .93rem; text-align: center;
}
/* The trust bar and the coverage line were two stacked full-width bands with
different backgrounds and a doubled hairline between them, which read as a
banner glitch rather than a design. When they are adjacent, they are one
band: one background, one rule top and bottom, a soft divider inside. */
.trust-bar:has(+ .coverage-line) { border-bottom: 0; padding-bottom: 20px; }
.trust-bar + .coverage-line {
border-top: 0; background: var(--paper-raised);
}
.trust-bar + .coverage-line .wrap {
padding-top: 14px; padding-bottom: 20px; font-size: .88rem;
border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.coverage-line b { font-weight: 800; letter-spacing: -.01em; }
.coverage-line span { color: var(--ink-soft); }
.coverage-line a { font-weight: 700; white-space: nowrap; }
.ba-sec { padding: 62px 0 68px; }
.ba-sec .ba-wrap { margin-top: 0; }
.ba-sec .section-head { margin-bottom: 28px; }
.ba-caption { margin-top: 12px; }
.ba-jobs { margin-top: 14px; }
/* ===== v2.6 — mobile pass (≤620px) =====================================
Tested at 375px. Goal: nothing scrolls sideways, nothing is below 16px,
every tap target clears 44px. */
@media (max-width: 620px) {
/* stop any single element forcing a horizontal scrollbar */
html, body { overflow-x: hidden; }
/* --- hero --- */
.hero-split .inner { grid-template-columns: 1fr; gap: 30px; padding-top: 26px; }
.hero-split .photo-panel { display: none; } /* decorative; costs 1.5MB on 4G */
.headline { font-size: clamp(2rem, 9vw, 2.6rem); }
.hero-trust { gap: 8px; }
.hero-trust .ht { font-size: .78rem; }
.est-card { padding: 18px; }
/* --- category bar: swipe, don't wrap --- */
.cat-bar { border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-lead { padding: 14px 16px; font-size: .82rem; white-space: nowrap; }
.cat-item { white-space: nowrap; font-size: .84rem; }
/* --- how it works --- */
#how-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
.cat-scroller { display: none; } /* two scrolling columns cannot fit */
.air-step { font-size: .95rem; }
/* --- before/after --- */
.ba-sec { padding: 40px 0 44px; }
.ba-wrap { max-width: 100%; }
.ba-jobs { gap: 7px; }
.ba-job { font-size: .8rem; padding: 8px 13px; }
/* --- recent jobs --- */
.job-card { width: 280px; padding: 20px; border-radius: 18px; }
.job-card .jc-top img { width: 48px; height: 48px; }
.job-card .jc-title { font-size: 1.05rem; }
.job-card .jc-price { font-size: 1.2rem; }
.job-card .jc-stars { font-size: .8rem; padding: 7px 14px; }
.jtabs { margin-left: 0; transform: none; width: 100%; max-width: 100%; justify-content: flex-start; }
.jtab { font-size: .95rem; padding: 12px 15px; }
.jobs-desc { font-size: .95rem; }
/* --- trust split --- */
.trust-split { gap: 32px; }
.trust-photo { padding: 26px 20px 30px 0; max-width: 100%; }
.tf-rate { padding: 10px 16px 10px 10px; }
.tf-rate img { width: 44px; height: 44px; }
.tf-rate .n { font-size: 1.2rem; }
.tf-chip { font-size: .82rem; padding: 10px 15px; }
.tf-chip.c1 { bottom: 78px; }
.tf-chip.c2 { bottom: 22px; right: 14px; }
.trust-item { grid-template-columns: 28px 1fr; gap: 14px; }
/* --- prices table: let it scroll rather than crush --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 420px; }
/* --- partner cards --- */
.partner-card { padding: 18px; }
.pc-stats { gap: 10px; font-size: .74rem; }
/* --- coverage line --- */
.coverage-line .wrap { padding: 14px 18px; font-size: .85rem; gap: 8px; }
/* --- sections + type --- */
section { padding: 52px 0; }
.section-head { margin-bottom: 30px; }
.section-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
.wrap, .wrap-narrow { padding-left: 20px; padding-right: 20px; }
/* --- tap targets --- */
.btn { min-height: 46px; }
.nav a, .snav, .cat-item { min-height: 44px; display: flex; align-items: center; }
/* --- app shells --- */
.app { grid-template-columns: 1fr; }
.app-side { display: none; }
.app-main { padding: 18px; }
.firm-cols { grid-template-columns: 1fr !important; }
.dash-cards { grid-template-columns: 1fr 1fr; }
/* --- funnel --- */
.funnel { padding: 20px 18px 60px; }
.progress .p-label { display: none; }
.funnel-nav { gap: 10px; }
.funnel-nav .btn { flex: 1; }
}
/* iOS zooms the page in when a focused input is under 16px */
@media (max-width: 620px) {
input, select, textarea { font-size: 16px; }
}
/* ===== v2.7 — accessibility =============================================
WCAG 2.1 AA. Every value below was measured, not guessed. */
/* BUG: `.nav a { color: var(--ink) }` (0,1,1) outranked `.btn-primary`
(0,1,0), so the main nav CTA rendered dark-on-green at 2.77:1 on every
page. White on --green is 5.28:1. */
.nav a.btn-primary,
.nav .cta { color: #fff; }
/* Star glyphs were --green-bright (#17B877) on white: 2.57:1.
--green (#0B7B4C) is 5.28:1 and reads the same at a glance. */
.stars, .pc-stars .st, .hero-trust .stars { color: var(--green); }
/* Amber stars #E9A63B on white: 2.10:1 → #8A5B14 is 5.32:1 */
.job-card .jc-stars .st,
.tf-rate .n .st,
.review-card .stars { color: #8A5B14; }
/* Decorative pull-quote mark: exempt from contrast, but hide it from
screen readers rather than have them announce a stray quote character. */
.pullquote .mark { color: var(--green); opacity: .35; }
/* Text on the green CTA band — was 3.75:1 */
.section-green .section-sub,
.section-green p { color: #EAF7F0; }
/* Visible keyboard focus on everything interactive. Never remove the
outline without replacing it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--green-bright);
outline-offset: 2px;
border-radius: 4px;
}
.section-green a:focus-visible,
.section-green button:focus-visible { outline-color: #fff; }
/* Skip link must be visible once focused */
.skip-link:focus {
position: fixed; left: 16px; top: 16px; width: auto; height: auto;
padding: 12px 20px; background: var(--paper); color: var(--ink);
border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 9999;
clip: auto; clip-path: none; overflow: visible;
}
/* Respect a reduced-motion preference across every animation we ship */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.jobs-track, .cat-col, .track, .marquee .track { animation: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ===== v2.8 — cost calculator ========================================== */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1080px; margin: 0 auto; align-items: start; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } .calc-grid .estor { position: static !important; } }
.item-counts { display: flex; flex-direction: column; gap: 8px; }
.item-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--fog); border-radius: 10px; padding: 9px 12px; font-size: .88rem;
}
.item-row small { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 450; }
.item-row input { width: 64px; text-align: center; padding: 7px 6px; margin: 0; }
.breakdown { list-style: none; margin: 10px 0 0; padding: 0; }
.breakdown li {
display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
padding: 8px 0; border-bottom: 1px solid var(--fog); font-size: .87rem; color: var(--ink-soft);
}
.breakdown li:last-child { border-bottom: none; }
.breakdown li b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ===== v2.9 — for-firms (airtasker-shaped) ============================= */
.ff-hero { padding: 64px 0 72px; background: var(--mint-soft); }
.ff-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; max-width: 1120px; margin: 0 auto; }
.ff-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
@media (max-width: 900px) { .ff-hero-grid { grid-template-columns: 1fr; gap: 34px; } }
.ff-mock { display: flex; flex-direction: column; gap: 14px; }
.ff-lead { background: var(--paper); border-radius: 20px; padding: 22px; box-shadow: 0 18px 46px rgba(10,46,33,.14); }
.ff-lead-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tagpill { background: var(--mint); color: var(--green-deep); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 5px 12px; }
.ff-ago { font-size: .76rem; color: var(--ink-soft); }
.ff-lead-title { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }
.ff-lead-sub { font-size: .88rem; color: var(--ink-soft); margin: 6px 0 16px; }
.ff-lead-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--fog); }
.ff-lead-foot b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ff-lead-foot small { font-size: .72rem; color: var(--ink-soft); }
.ff-quote-btn { background: var(--green); color: #fff; font-weight: 700; font-size: .86rem; border-radius: 99px; padding: 10px 20px; }
.ff-month { background: var(--ink); color: #D9E8E0; border-radius: 18px; padding: 18px 22px; }
.ff-month > b { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #86A395; }
.ff-month-row { display: flex; gap: 26px; margin-top: 10px; }
.ff-month-row span { font-size: .74rem; color: #86A395; }
.ff-month-row b { display: block; font-size: 1.3rem; font-weight: 800; color: #3ECF95; letter-spacing: -.02em; }
.ff-why { padding: 26px; }
.ff-why b { display: block; font-size: 1.05rem; margin-bottom: 7px; letter-spacing: -.02em; }
.ff-why p { color: var(--ink-soft); font-size: .93rem; line-height: 1.65; margin: 0; }
.ff-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--mint); color: var(--green-deep); margin-bottom: 14px; }
.ff-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .ff-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ff-steps { grid-template-columns: 1fr; } }
.ff-step { position: relative; padding-top: 10px; }
.ff-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; margin-bottom: 14px; }
.ff-step b { display: block; font-size: 1.02rem; margin-bottom: 6px; letter-spacing: -.02em; }
.ff-step p { color: var(--ink-soft); font-size: .92rem; line-height: 1.62; margin: 0; }
.ff-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .ff-price-grid { grid-template-columns: 1fr; } }
.ff-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--green); line-height: 1; margin-bottom: 10px; }
/* ===== v3.0 — probate page ============================================= */
.pb-hero { padding: 60px 0 66px; background: linear-gradient(180deg, var(--mint-soft), var(--paper)); }
.pb-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; max-width: 1100px; margin: 0 auto; }
.pb-hero h1 { font-size: clamp(2rem, 4.4vw, 2.95rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
@media (max-width: 900px) { .pb-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.pb-card { background: var(--paper); border-radius: 20px; padding: 26px; box-shadow: 0 16px 44px rgba(10,46,33,.12); }
.pb-card > b { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.pb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .pb-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pb-steps { grid-template-columns: 1fr; } }
.pb-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--green-deep); font-weight: 800; margin-bottom: 14px; }
.pb-step b { display: block; font-size: 1.04rem; margin-bottom: 6px; letter-spacing: -.02em; }
.pb-step p { color: var(--ink-soft); font-size: .93rem; line-height: 1.65; margin: 0; }
.pb-dest { padding: 22px; }
.pb-dest-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mint); color: var(--green-deep); font-weight: 800; font-size: .86rem; margin-bottom: 12px; }
.pb-dest b { display: block; font-size: 1rem; margin-bottom: 6px; }
.pb-dest p { color: var(--ink-soft); font-size: .88rem; line-height: 1.6; margin: 0; }
.pb-check { margin: 0; padding-left: 0; list-style: none; counter-reset: pb; }
.pb-check li {
counter-increment: pb; position: relative; padding: 9px 0 9px 34px;
font-size: .93rem; line-height: 1.55; border-bottom: 1px solid var(--fog);
}
.pb-check li:last-child { border-bottom: none; }
.pb-check li::before {
content: counter(pb); position: absolute; left: 0; top: 9px;
width: 22px; height: 22px; border-radius: 50%; background: var(--fog); color: var(--ink-soft);
font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* ===== v3.1 — leave a review ============================================ */
.review-ask { padding: 22px; border-color: var(--green); }
.review-ask > b { display: block; font-size: 1.02rem; margin-bottom: 6px; }
.review-ask > p { font-size: .86rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.star-pick { display: flex; gap: 4px; margin-bottom: 12px; }
.star-pick button {
font-size: 1.9rem; line-height: 1; background: none; border: none; cursor: pointer;
color: var(--line); padding: 2px 3px; transition: color .12s, transform .12s;
}
.star-pick button:hover { transform: scale(1.12); }
.star-pick button.on { color: #E9A63B; }
.review-ask textarea { width: 100%; margin-bottom: 12px; }
.review-note { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; }
.review-note.bad { color: #B4451F; }
/* ===== v3.2 — social sign-in ============================================ */
.oauth-row { display: flex; flex-direction: column; gap: 10px; }
.btn-oauth {
display: flex; align-items: center; justify-content: center; gap: 11px;
width: 100%; min-height: 48px; padding: 13px 20px;
font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink);
background: var(--paper); border: 1px solid var(--line); border-radius: 99px;
cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.btn-oauth:hover { border-color: var(--ink-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-oauth:disabled { opacity: .55; cursor: default; transform: none; }
.oauth-note { font-size: .78rem; color: var(--ink-soft); text-align: center; margin: 10px 0 0; }
.or-rule { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--ink-soft); font-size: .8rem; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ===== v3.3 — SEO landing pages ========================================= */
.lp-hero { padding: 56px 0 44px; background: linear-gradient(180deg, var(--mint-soft), var(--paper)); }
.lp-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; max-width: 1120px; margin: 0 auto; }
.lp-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; margin: 8px 0 0; }
.lp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 26px; } }
.crumbs { border-bottom: 1px solid var(--line); background: var(--paper); }
.crumbs .wrap { padding: 11px 24px; font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--green); }
.crumbs .sep { color: var(--line); }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }
.sum-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 12px; }
.sum-card > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--fog); }
.sum-card > div:last-child { border-bottom: none; padding-bottom: 0; }
.sum-card span { font-size: .84rem; color: var(--ink-soft); }
.sum-card b { font-size: .96rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-body { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .lp-body { grid-template-columns: 1fr; gap: 24px; } }
.prose p { line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
.prose p:first-child { font-size: 1.06rem; color: var(--ink); }
.price-card { padding: 24px; }
.price-card h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.price-card .table-wrap { margin-bottom: 12px; }
.price-note { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 14px; }
.link-grid a {
display: block; padding: 11px 15px; border: 1px solid var(--line); border-radius: 11px;
background: var(--paper); font-size: .89rem; font-weight: 600; color: var(--ink);
text-decoration: none; transition: border-color .15s, background .15s, transform .15s;
}
.link-grid a:hover { border-color: var(--green); background: var(--mint-soft); transform: translateY(-1px); }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
.lf { padding: 22px; }
.lf h3 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.lf ul { list-style: none; margin: 0; padding: 0; }
.lf li { padding: 9px 0; border-bottom: 1px solid var(--fog); font-size: .89rem; }
.lf li:last-child { border-bottom: none; }
.lf li b { display: block; }
.lf li span { display: block; color: var(--ink-soft); font-size: .82rem; }
.seo-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; padding-bottom: 26px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.seo-foot b { display: block; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; opacity: .75; }
.seo-foot ul { list-style: none; margin: 0; padding: 0; }
.seo-foot li { padding: 3px 0; }
.seo-foot a { font-size: .86rem; opacity: .82; }
.seo-foot a:hover { opacity: 1; }
.lp-cta { padding: 52px 0; }
/* sticky CTA — the single biggest conversion lever on a long landing page */
.sticky-cta {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
display: flex; align-items: center; gap: 16px; z-index: 60;
background: var(--paper); border: 1px solid var(--line); border-radius: 99px;
padding: 10px 10px 10px 22px; box-shadow: 0 12px 40px rgba(10,46,33,.18);
font-size: .9rem; font-weight: 600; max-width: calc(100vw - 32px);
}
.sticky-cta .btn { padding: 11px 22px; font-size: .86rem; white-space: nowrap; }
@media (max-width: 620px) {
.sticky-cta { left: 12px; right: 12px; transform: none; justify-content: space-between; padding-left: 16px; font-size: .82rem; }
.sticky-cta span { display: none; }
.sticky-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
/* ===== v3.4 — landing page fixes ======================================== */
/* One CTA in the hero. The postcode form is the action; the phone is a
secondary line, not a competing button. */
.lp-call {
display: block; margin-top: 16px; text-decoration: none; color: inherit;
border-left: 3px solid var(--green); padding-left: 14px;
}
.lp-call b { display: block; font-size: .98rem; color: var(--green-deep); }
.lp-call span { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 2px; }
.lp-call:hover b { text-decoration: underline; }
.lp-cta-row { display: none; } /* retired: was the duplicate CTA */
/* the gap under the trust bar was ~90px of nothing */
.lp-body { padding-top: 8px; }
section:has(> .wrap > .lp-body) { padding-top: 40px; }
.lp-hero { padding-bottom: 40px; }
.crumbs + .trust-bar { margin-top: 0; }
/* body column was too narrow against the price card */
.lp-body { grid-template-columns: 1fr .92fr; gap: 40px; }
@media (max-width: 900px) { .lp-body { grid-template-columns: 1fr; gap: 22px; } }
.lp-body .prose p:first-child { font-size: 1.1rem; line-height: 1.65; color: var(--ink); }
/* the sticky bar duplicated the hero CTA on first paint; only show it once
the hero form has scrolled away */
.sticky-cta { opacity: 0; pointer-events: none; transition: opacity .25s; }
.sticky-cta.show { opacity: 1; pointer-events: auto; }
/* ===== v3.5 — landing page structure ==================================== */
.lp-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px;
box-shadow: 0 16px 40px rgba(10,46,33,.14); margin-bottom: 14px; }
.crumbs { border-top: none; }
/* interactive estimator */
.est-sec { background: var(--mint-soft); padding: 54px 0; }
.est-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1040px;
margin: 0 auto; align-items: center; }
@media (max-width: 860px) { .est-wrap { grid-template-columns: 1fr; gap: 24px; } }
.est-intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 10px; }
.est-intro p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 14px; }
.est-more { font-weight: 700; font-size: .92rem; }
.est-panel { background: var(--paper); border-radius: 20px; padding: 24px;
box-shadow: 0 18px 44px rgba(10,46,33,.13); }
.est-field { margin-bottom: 16px; }
.est-field label { display: flex; justify-content: space-between; align-items: baseline;
font-size: .84rem; font-weight: 700; margin-bottom: 7px; }
.est-field label b { color: var(--green); font-weight: 800; }
.est-scale { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-soft); }
.est-out { display: flex; justify-content: space-between; align-items: baseline;
padding: 14px 0; margin: 6px 0 0; border-top: 1px solid var(--line); }
.est-out span { font-size: .84rem; color: var(--ink-soft); }
.est-out b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.est-meta { display: flex; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
margin-bottom: 16px; font-size: .76rem; color: var(--ink-soft); }
.est-meta b { display: block; color: var(--ink); font-size: 1rem; }
.est-note { font-size: .74rem; color: var(--ink-soft); text-align: center; margin: 10px 0 0; }
/* process strip */
.proc-sec { padding: 56px 0; }
.proc { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
gap: 22px; max-width: 1000px; margin: 0 auto; padding: 0; counter-reset: none; }
@media (max-width: 760px) { .proc { grid-template-columns: 1fr; } }
.proc li { position: relative; padding-top: 4px; }
.proc-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; margin-bottom: 12px; }
.proc b { display: block; font-size: 1.02rem; margin-bottom: 6px; letter-spacing: -.02em; }
.proc p { color: var(--ink-soft); font-size: .92rem; line-height: 1.62; margin: 0; }
/* what's included */
.inc-card { background: var(--fog); border-radius: 16px; padding: 22px; margin-top: 18px; }
.inc-card h3 { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }
.inc { list-style: none; margin: 0; padding: 0; }
.inc li { position: relative; padding: 7px 0 7px 26px; font-size: .92rem; }
.inc li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
/* ===== v3.6 — accessibility fixes ======================================= */
/* CRITICAL: .btn-ghost has a mint background. Inline `color:#fff` on the green
CTA band therefore produced white-on-mint at 1.14:1 — an invisible button on
every landing page. On dark grounds the ghost button must be transparent. */
.section-green .btn-ghost,
.ff-hero .btn-ghost.on-dark,
.btn-ghost.on-dark {
background: transparent !important;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, .6) !important;
}
.section-green .btn-ghost:hover,
.btn-ghost.on-dark:hover {
background: rgba(255, 255, 255, .12) !important;
border-color: #fff !important;
}
/* breadcrumb separator was 1.26:1. It carries no meaning, so hide it from
assistive tech and darken it enough to be seen. */
.crumbs .sep { color: var(--ink-soft); opacity: .55; }
/* WCAG 2.2 target size (2.5.8, AA): 24x24 minimum. Inline prose links are
exempt, but standalone links in grids and footers should clear it. */
.link-grid a, .seo-foot a, .est-more, .lf a { min-height: 24px; display: inline-flex; align-items: center; }
.crumbs a { padding: 2px 0; min-height: 24px; display: inline-flex; align-items: center; }
/* ===== v3.7 — conversion-led hero ======================================= */
.lp-hero { padding: 40px 0 48px; }
.lp-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: start; }
.lp-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: 10px; }
.lp-hero .lede { font-size: 1.05rem; margin-bottom: 22px; }
/* form: one field, one button, side by side */
.hero-form { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-form input { flex: 1 1 210px; margin: 0; min-height: 54px; font-size: 1rem; }
.hero-form .btn { min-height: 54px; white-space: nowrap; }
/* phone is a real target: phone leads convert ~6x form leads */
.hero-phone {
display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px;
border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.hero-phone:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.hero-phone svg { color: var(--green); flex-shrink: 0; }
.hero-phone b { display: block; font-size: 1.08rem; letter-spacing: -.01em; }
.hero-phone span { font-size: .82rem; color: var(--ink-soft); }
.hero-phone span b { color: var(--ink); }
.hero-phone.lead { background: var(--mint-soft); border-color: var(--mint); }
/* proof without scrolling — the third trait of pages that beat 8.5% */
.hero-proof { list-style: none; margin: 18px 0 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
.hero-proof li { position: relative; padding-left: 22px; font-size: .84rem; color: var(--ink-soft); }
.hero-proof li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
@media (max-width: 560px) { .hero-proof { grid-template-columns: 1fr; } }
/* estimator as a hero card, money given real size */
.est-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
padding: 22px; box-shadow: 0 18px 44px rgba(10,46,33,.12); }
.est-head b { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.est-head span { font-size: .8rem; color: var(--ink-soft); }
.est-out { text-align: center; padding: 16px 0 14px; margin: 14px 0 4px;
background: var(--mint-soft); border-radius: 14px; }
.est-out b { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em;
font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--green-deep); }
.est-out span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.est-panel .est-field { margin-top: 14px; }
.est-more { display: block; text-align: center; margin-top: 14px; font-weight: 700; font-size: .86rem; }
.est-sec { display: none; } /* retired: estimator now lives in the hero */
.lp-hero-side .sum-card { margin-top: 14px; }
.lp-hero-side .lp-photo { display: none; } /* photo moves below; hero leads with the tool */
/* The v3.7 .lp-hero-grid rule sits later in this file than the 900px media
query, so it was winning and the hero stayed two-column at 375px (190px +
249px, both crushed). Re-state the stack AFTER it. */
@media (max-width: 900px) {
.lp-hero-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
.lp-hero-copy { order: 1; }
.lp-hero-side { order: 2; }
}
@media (max-width: 560px) {
.hero-form { flex-direction: column; }
.hero-form input, .hero-form .btn { width: 100%; }
.lp-hero h1 { font-size: clamp(1.65rem, 7.5vw, 2rem); }
.est-out b { font-size: 1.85rem; }
}
/* =======================================================================
v4.0 — "Considered British Trade"
The audience is an executor three weeks after a funeral, or a landlord
losing £60 a day on a void. Both want calm competence, not personality.
So: a warm serif for authority, bone paper instead of clinical white,
hairline rules instead of drop shadows, and the green demoted to
ACTION ONLY. It was previously used as a background eleven times per
page, which is exactly why nothing felt emphasised.
======================================================================= */
@font-face {
font-family: 'Fraunces';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/fraunces-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: 'Fraunces';
font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/fraunces-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
font-family: 'Fraunces';
font-style: normal; font-weight: 700; font-display: swap;
src: url('../fonts/fraunces-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
:root {
--display: 'Fraunces', Georgia, 'Times New Roman', serif;
/* bone, not white. paper that has been somewhere. */
--paper: #FCFBF7;
--paper-raised: #FFFFFF;
--fog: #F4F2EC;
--line: #E2DFD5;
--line-strong: #CFCBBE;
--ink: #12241C;
--ink-soft: #55655C;
}
body { background: var(--paper); }
/* --- display type: serif, tight, weighty ------------------------------- */
h1, h2, .section-title, .est-out b, .lp-hero h1, .pb-hero h1, .ff-hero h1 {
font-family: var(--display);
font-weight: 600;
letter-spacing: -.02em;
font-optical-sizing: auto;
}
h1, .lp-hero h1 { letter-spacing: -.025em; line-height: 1.08; }
.section-title { letter-spacing: -.02em; }
/* numbers stay in Manrope: tabular figures matter more than character */
.num, .est-out b, .jc-price, .out-range, table .num { font-family: 'Manrope', system-ui, sans-serif; }
/* eyebrow becomes a rule-and-label, an editorial device rather than a chip */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow::before {
content: ""; width: 24px; height: 1px; background: var(--green); flex-shrink: 0;
}
/* --- surfaces: hairlines, not shadows ---------------------------------- */
.card, .est-panel, .sum-card, .pb-card, .ff-lead {
background: var(--paper-raised);
border: 1px solid var(--line);
box-shadow: none;
}
.card.lift:hover, .est-panel:hover { box-shadow: 0 2px 0 var(--line-strong); transform: none; }
.est-panel { box-shadow: 0 1px 0 var(--line-strong); }
.section-fog { background: var(--fog); }
.section-mint { background: #EDF3EE; }
/* paper grain. subtle enough to read as texture, not noise. */
body::before {
content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 2; }
/* --- green is for action only ------------------------------------------ */
.trust-bar { background: var(--paper-raised); border-block: 1px solid var(--line); }
.crumbs { background: transparent; border-bottom: 1px solid var(--line); }
.est-out { background: var(--fog); border: 1px solid var(--line); }
.hero-phone.lead { background: var(--paper-raised); }
.inc-card { background: transparent; border: 1px solid var(--line); }
/* --- page load: one orchestrated stagger ------------------------------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lp-hero-copy > * { animation: riseIn .55s cubic-bezier(.22,1,.36,1) backwards; }
.lp-hero-copy > .eyebrow { animation-delay: .02s; }
.lp-hero-copy > h1 { animation-delay: .08s; }
.lp-hero-copy > .lede { animation-delay: .14s; }
.lp-hero-copy > .hero-form{ animation-delay: .20s; }
.lp-hero-copy > .hero-phone { animation-delay: .26s; }
.lp-hero-copy > .hero-proof { animation-delay: .32s; }
.lp-hero-side { animation: riseIn .6s cubic-bezier(.22,1,.36,1) .18s backwards; }
@media (prefers-reduced-motion: reduce) {
.lp-hero-copy > *, .lp-hero-side { animation: none !important; }
}
/* --- editorial detail --------------------------------------------------- */
.prose p:first-of-type::first-letter {
font-family: var(--display); font-weight: 600; font-size: 3.1rem;
float: left; line-height: .82; padding: 6px 10px 0 0; color: var(--green-deep);
}
.price-card table thead th {
font-family: var(--display); font-weight: 600; font-size: .8rem;
letter-spacing: .04em; text-transform: none; color: var(--ink);
}
.lf li b { font-family: var(--display); font-weight: 600; }
/* ===== v4.1 — scale discipline ==========================================
Measured before this: section padding ran 56/54/40/56/108/64/64/64/52px,
four different h2 sizes on one page, and 14px was the single most common
text size (68 of 168 elements). A scale you can name is the difference
between "designed" and "assembled".
======================================================================= */
:root {
/* spacing: a 4-step scale, nothing between */
--s-tight: 48px;
--s-base: 72px;
--s-loose: 104px;
/* type: 1.25 minor third, anchored at 16px body */
--t-xs: .8rem; /* 12.8 — labels, captions ONLY */
--t-sm: .9rem; /* 14.4 — secondary */
--t-md: 1rem; /* 16 — body default */
--t-lg: 1.25rem; /* 20 — lede */
--t-xl: 1.75rem; /* 28 — sub-section */
--t-2xl: 2.25rem; /* 36 — section */
--t-3xl: 3rem; /* 48 — page */
}
main > section { padding-top: var(--s-base); padding-bottom: var(--s-base); }
main > section.tight, .proc-sec { padding-top: var(--s-tight); padding-bottom: var(--s-tight); }
.lp-hero { padding-top: 40px; padding-bottom: var(--s-tight); }
.section-fog, .section-mint { padding-top: var(--s-loose); padding-bottom: var(--s-loose); }
/* two heading sizes, not four */
.section-title { font-size: clamp(1.6rem, 3vw, var(--t-2xl)); line-height: 1.14; }
.section-head .section-sub { font-size: var(--t-md); }
h3 { font-size: var(--t-lg); }
/* lift the floor: 14px was carrying the page */
body { font-size: var(--t-md); }
.prose p, .faq-body, .proc p, .svc-body span { font-size: var(--t-md); line-height: 1.7; }
.lede { font-size: var(--t-lg); line-height: 1.5; }
.hero-proof li, .est-head span, .price-note, .est-note { font-size: var(--t-sm); }
.eyebrow { font-size: var(--t-xs); }
/* --- services hub ------------------------------------------------------- */
.svc-sec { padding: var(--s-tight) 0; border-top: 1px solid var(--line); }
.svc-sec:first-of-type { border-top: none; }
.svc-head { max-width: 640px; margin-bottom: 26px; }
.svc-head p { color: var(--ink-soft); margin: 10px 0 0; font-size: var(--t-md); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.svc-card {
display: flex; flex-direction: column; text-decoration: none; color: inherit;
background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
overflow: hidden; transition: border-color .18s, transform .18s;
}
.svc-card:hover { border-color: var(--green); transform: translateY(-2px); }
.svc-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.svc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-body b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; }
.svc-body span { color: var(--ink-soft); line-height: 1.55; flex: 1; font-size: var(--t-sm); }
.svc-body em {
font-style: normal; font-weight: 700; font-size: var(--t-sm); color: var(--green-deep);
padding-top: 8px; border-top: 1px solid var(--line);
}
/* ===== v4.2 — layout alignment fixes ====================================
Reported: the summary card "floated" and the block below was "not aligned".
Both were real. The hero side column was 226px against 430px of copy, and
the body columns were 198px against 572px. Unequal grid children do not
look deliberate, they look broken.
======================================================================= */
/* hero: the side column tracks the copy instead of hanging in space */
.lp-hero-grid { align-items: stretch; }
.lp-hero-side { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
@media (max-width: 900px) { .lp-hero-side { justify-content: flex-start; } }
/* body: these templates emit 3-4 sibling elements into a 2-column grid, so
auto-placement was dropping the price card into the LEFT column and the
inclusions card into the right. Place explicitly instead: price card owns
column 2, everything else stacks down column 1. */
.lp-body { align-items: start; grid-auto-rows: min-content; }
.lp-body > * { grid-column: 1; min-width: 0; }
.lp-body > .card { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 88px; }
@media (max-width: 900px) {
.lp-body > *, .lp-body > .card { grid-column: 1; grid-row: auto; position: static; }
}
/* a grid track sizes to its content's min-content width, and an ![]()
with an
intrinsic 800px does not shrink on its own. Without this the single mobile
column resolved to 472px inside a 335px container and clipped. */
.lp-body > img, .lp-photo { max-width: 100%; height: auto; }
/* content must clear the fixed sticky bar */
body { padding-bottom: 92px; }
@media (max-width: 620px) { body { padding-bottom: 84px; } }
/* crumbs sit directly under the header on every template */
.crumbs { margin: 0; }
/* ===== v4.3 — deep service content ======================================
The hub pages were a hero, a price table and seven lists of place names.
These are the blocks that carry the actual substance.
======================================================================= */
/* --- ordered process ------------------------------------------------- */
.dp-sec { padding: 76px 0 80px; }
.dp-list {
list-style: none; margin: 44px auto 0; padding: 0; max-width: 860px;
display: flex; flex-direction: column; gap: 0;
}
.dp-step {
display: grid; grid-template-columns: 56px 1fr; gap: 22px;
padding: 26px 0; border-top: 1px solid var(--line); align-items: start;
}
.dp-step:last-child { border-bottom: 1px solid var(--line); }
.dp-n {
display: grid; place-items: center; width: 42px; height: 42px;
border-radius: 50%; background: var(--green); color: #fff;
font-family: var(--font-num); font-weight: 700; font-size: 1rem;
font-variant-numeric: tabular-nums;
}
.dp-step b { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -.012em; }
.dp-step p { margin: 7px 0 0; color: var(--ink-soft); line-height: 1.72; }
/* --- what the firms do ------------------------------------------------ */
.fd-sec { padding: 78px 0 84px; background: var(--paper-raised); border-block: 1px solid var(--line); }
.fd-grid {
margin-top: 44px; display: grid; gap: 4px 40px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fd-item {
display: grid; grid-template-columns: 26px 1fr; gap: 14px;
align-items: start; padding: 20px 0; border-top: 1px solid var(--line);
}
.fd-item svg { width: 19px; height: 19px; color: var(--green); margin-top: 3px; }
.fd-item b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.fd-item p { margin: 6px 0 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.68; }
/* --- long-form editorial + aside -------------------------------------- */
.ds-sec { padding: 74px 0; }
.ds-grid {
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
gap: 52px; align-items: start; max-width: 1060px; margin: 0 auto;
}
.ds-copy p { color: var(--ink-soft); line-height: 1.78; margin: 0 0 16px; }
.ds-copy p:last-child { margin-bottom: 0; }
.ds-copy .section-title { margin-bottom: 18px; }
.ds-aside {
background: var(--paper-raised); border: 1px solid var(--line);
border-left: 3px solid var(--green); border-radius: 4px;
padding: 26px 28px; position: sticky; top: 96px;
}
.ds-aside b {
display: block; font-size: 1rem; font-weight: 800; margin-bottom: 12px;
letter-spacing: -.01em;
}
.ds-aside p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.7; }
.ask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ask-list li {
position: relative; padding-left: 20px; color: var(--ink-soft);
font-size: .92rem; line-height: 1.6;
}
.ask-list li::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
/* --- checklist -------------------------------------------------------- */
.cl-card {
background: var(--paper-raised); border: 1px solid var(--line);
border-radius: 6px; padding: 38px 40px;
}
.cl-card h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cl-sub { margin: 8px 0 24px; color: var(--ink-soft); font-size: .93rem; }
.cl-list {
margin: 0; padding: 0; list-style: none; counter-reset: cl;
display: flex; flex-direction: column; gap: 0;
}
.cl-list li {
counter-increment: cl; position: relative; padding: 15px 0 15px 46px;
border-top: 1px solid var(--line); line-height: 1.6;
}
.cl-list li::before {
content: counter(cl); position: absolute; left: 0; top: 13px;
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--line); background: var(--paper);
display: grid; place-items: center;
font-family: var(--font-num); font-size: .8rem; font-weight: 700;
color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
.fd-grid { grid-template-columns: 1fr; gap: 0; }
.ds-grid { grid-template-columns: 1fr; gap: 30px; }
.ds-aside { position: static; }
.dp-sec, .fd-sec, .ds-sec { padding: 54px 0 58px; }
.cl-card { padding: 28px 22px; }
}
@media (max-width: 620px) {
.dp-step { grid-template-columns: 40px 1fr; gap: 14px; }
.dp-n { width: 32px; height: 32px; font-size: .85rem; }
}
/* ===== v4.3 — services page ============================================
Was nineteen identical tiles, which gave a sofa removal the same weight as
a probate clearance. Hierarchy now follows the business: two featured, the
rest as scannable rows, single items deliberately small.
======================================================================= */
/* --- the two featured services --------------------------------------- */
.feat-sec { padding: 76px 0 84px; }
.feat-grid {
margin-top: 44px; display: grid; gap: 28px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feat {
display: flex; flex-direction: column; overflow: hidden;
background: var(--paper-raised); border: 1px solid var(--line);
border-radius: 6px; transition: border-color .18s ease, transform .18s ease;
}
.feat:hover { border-color: var(--green); transform: translateY(-2px); }
.feat-img { display: block; }
.feat-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.feat-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.feat-body h3 { font-size: 1.35rem; letter-spacing: -.022em; margin: 0; }
.feat-body h3 a { color: inherit; text-decoration: none; }
.feat-body h3 a:hover { color: var(--green); }
.feat-sum { color: var(--ink-soft); line-height: 1.65; margin: 9px 0 0; font-size: .95rem; }
.feat-pts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feat-pts li {
position: relative; padding-left: 22px; font-size: .9rem;
color: var(--ink-soft); line-height: 1.5;
}
.feat-pts li::before {
content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 7px;
border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
transform: rotate(-45deg);
}
.feat-foot {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.feat-price { display: flex; flex-direction: column; font-size: .78rem; color: var(--ink-soft); }
.feat-price b {
font-family: var(--font-num); font-size: 1.22rem; color: var(--ink);
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.feat-dur {
font-size: .78rem; font-weight: 700; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px;
white-space: nowrap;
}
.feat-go {
margin-top: 18px; font-weight: 700; font-size: .92rem;
color: var(--green); text-decoration: none;
}
.feat-go:hover { text-decoration: underline; }
/* --- scannable service rows ------------------------------------------ */
.srow-sec { padding: 60px 0 66px; }
.srow-head, .srow {
display: grid; align-items: center; gap: 20px;
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) 116px 132px 20px;
}
.srow-head {
padding: 0 14px 10px; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
border-bottom: 1px solid var(--line);
}
.srows { display: flex; flex-direction: column; }
.srow {
padding: 18px 14px; border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit; transition: background .15s ease;
}
.srow:hover { background: var(--paper-raised); }
.srow:hover .srow-go { color: var(--green); transform: translateX(3px); }
.srow-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srow-name b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.012em; }
.srow-name span { font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }
.srow-note { font-size: .87rem; color: var(--ink-soft); line-height: 1.45; }
.srow-dur { font-size: .84rem; color: var(--ink-soft); font-weight: 600; }
.srow-price {
font-family: var(--font-num); font-weight: 700; font-size: .98rem;
letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.srow-go { color: var(--line-strong, var(--ink-soft)); transition: transform .15s ease, color .15s ease; }
/* --- single items: small, because they are small --------------------- */
.item-sec { padding: 62px 0 70px; }
.item-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.item-chip {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px;
background: var(--paper-raised); text-decoration: none; color: inherit;
transition: border-color .15s ease;
}
.item-chip:hover { border-color: var(--green); }
.item-chip b { font-size: .93rem; font-weight: 700; letter-spacing: -.01em; }
.item-chip span {
font-family: var(--font-num); font-size: .84rem; color: var(--ink-soft);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.item-note {
margin: 20px 0 0; font-size: .85rem; color: var(--ink-soft);
line-height: 1.65; max-width: 68ch;
}
/* --- chooser ---------------------------------------------------------- */
.chooser-sec { padding: 72px 0 78px; background: var(--paper-raised); border-block: 1px solid var(--line); }
.chooser { margin-top: 34px; display: flex; flex-direction: column; }
.ch-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.ch-row:last-child { border-bottom: 1px solid var(--line); }
.ch-row b { font-weight: 600; letter-spacing: -.01em; }
.ch-row a { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.chooser-foot {
margin: 26px 0 0; text-align: center; color: var(--ink-soft);
font-size: .92rem; line-height: 1.7;
}
@media (max-width: 900px) {
.feat-grid { grid-template-columns: 1fr; gap: 20px; }
.srow-head { display: none; }
.srow {
grid-template-columns: 1fr auto; gap: 6px 14px; padding: 16px 12px;
align-items: start;
}
.srow-name { grid-column: 1; grid-row: 1 / span 2; }
.srow-note { display: none; }
.srow-dur { grid-column: 2; grid-row: 2; justify-self: end; }
.srow-price { grid-column: 2; grid-row: 1; justify-self: end; }
.srow-go { display: none; }
.feat-sec, .srow-sec, .item-sec, .chooser-sec { padding: 50px 0 56px; }
}
@media (max-width: 620px) {
.item-grid { grid-template-columns: 1fr 1fr; }
.ch-row { flex-direction: column; gap: 6px; }
}
/* ===== v4.4 — product mockups on How it works ==========================
The page was five text cards describing a product nobody could see. These
are the actual surfaces: scope, bidding, booking, change requests, and the
held payment. Built in HTML/CSS rather than screenshots so they stay true
when the product changes, and stay sharp on any display.
======================================================================= */
.pm-sec { padding: 86px 0 92px; }
.pm-grid {
display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 68px; align-items: center; max-width: 1120px; margin: 0 auto;
}
.pm-grid.flip .pm-copy { order: 2; }
.pm-grid.flip .pm-ui { order: 1; }
.pm-step {
display: inline-block; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; color: var(--green);
margin-bottom: 12px;
}
.pm-copy .section-title { margin-bottom: 16px; }
.pm-copy > p { color: var(--ink-soft); line-height: 1.78; margin: 0 0 20px; }
.pm-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pm-pts li {
position: relative; padding-left: 26px; color: var(--ink-soft);
font-size: .94rem; line-height: 1.6;
}
.pm-pts li::before {
content: ''; position: absolute; left: 2px; top: .34em; width: 12px; height: 7px;
border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
transform: rotate(-45deg);
}
.pm-pts b { color: var(--ink); font-weight: 700; }
/* --- the window chrome ------------------------------------------------ */
.ui-win {
background: var(--paper-raised); border: 1px solid var(--line);
border-radius: 9px; overflow: hidden;
box-shadow: 0 1px 2px rgba(20,24,22,.04), 0 12px 30px -14px rgba(20,24,22,.16);
}
.ui-bar {
display: flex; align-items: center; gap: 7px;
padding: 12px 16px; border-bottom: 1px solid var(--line);
background: var(--paper);
}
.ui-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong, #d9d6cd); }
.ui-title {
margin-left: 8px; font-size: .8rem; font-weight: 700; color: var(--ink-soft);
letter-spacing: -.005em;
}
.ui-badge {
margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; padding: 4px 9px; border-radius: 100px;
background: var(--line); color: var(--ink-soft);
}
.ui-badge.live { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.ui-badge.ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.ui-badge.hold { background: #fdf0d8; color: #8a5a00; }
.ui-body { padding: 20px 20px 18px; }
/* --- scope ------------------------------------------------------------ */
.ui-quote {
font-size: .92rem; line-height: 1.65; color: var(--ink);
padding: 14px 16px; margin: 0 0 16px;
background: var(--paper); border-left: 3px solid var(--green); border-radius: 3px;
}
.ui-rows { display: flex; flex-direction: column; }
.ui-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding: 10px 2px; border-top: 1px solid var(--line); font-size: .88rem;
}
.ui-row span { color: var(--ink-soft); }
.ui-row b { font-weight: 700; text-align: right; }
.ui-neg { color: #a33; }
/* --- footer strip ----------------------------------------------------- */
.ui-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.ui-foot.pay { justify-content: flex-start; }
.ui-meta { font-size: .78rem; color: var(--ink-soft); }
.ui-done { color: var(--green); font-weight: 700; }
.ui-btn {
display: inline-block; font-size: .82rem; font-weight: 700;
padding: 8px 15px; border-radius: 5px;
background: var(--green); color: #fff; white-space: nowrap;
}
.ui-btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
/* --- quote comparison table ------------------------------------------ */
.ui-tablewrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ui-table th {
text-align: left; font-size: .68rem; text-transform: uppercase;
letter-spacing: .07em; color: var(--ink-soft); font-weight: 700;
padding: 0 10px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ui-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ui-table td:first-child { min-width: 148px; }
.ui-table td b { display: block; font-weight: 700; font-size: .89rem; }
.ui-table td span { font-size: .74rem; color: var(--ink-soft); }
.ui-table td:not(:first-child) {
font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ui-off { color: var(--green); }
.ui-best { background: color-mix(in srgb, var(--green) 6%, transparent); }
.ui-best td:first-child { box-shadow: inset 3px 0 0 var(--green); padding-left: 11px; }
/* --- calendar --------------------------------------------------------- */
.ui-cal-head { font-size: .8rem; font-weight: 700; margin-bottom: 10px; }
.ui-days, .ui-dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ui-days span {
text-align: center; font-size: .66rem; font-weight: 700; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px;
}
.ui-dates span {
display: grid; place-items: center; aspect-ratio: 1; border-radius: 5px;
font-family: var(--font-num); font-size: .8rem; font-variant-numeric: tabular-nums;
border: 1px solid transparent;
}
.ui-dates .off { color: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
.ui-dates .free { border-color: var(--line); color: var(--ink); background: var(--paper); }
.ui-dates .sel { background: var(--green); color: #fff; font-weight: 700; border-color: var(--green); }
.ui-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ui-slot {
display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px;
font-size: .85rem; font-weight: 700; background: var(--paper);
}
.ui-slot em { font-style: normal; font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.ui-slot.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
/* --- message thread --------------------------------------------------- */
.ui-msg {
font-size: .87rem; line-height: 1.6; padding: 12px 14px;
border-radius: 9px; margin-bottom: 10px; max-width: 92%;
}
.ui-msg.you { background: var(--paper); border: 1px solid var(--line); }
.ui-msg.them {
background: color-mix(in srgb, var(--green) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
margin-left: auto;
}
.ui-who {
display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 5px;
}
.ui-approve {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
padding: 14px; background: var(--paper); border-radius: 6px; margin-top: 4px;
}
.ui-delta { display: flex; flex-direction: column; gap: 3px; }
.ui-delta span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; }
.ui-delta b { font-family: var(--font-num); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
/* --- payment track ---------------------------------------------------- */
.ui-amount {
display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px;
margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.ui-amount b {
font-family: var(--font-num); font-size: 1.9rem; letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
}
.ui-amount span { font-size: .8rem; color: var(--ink-soft); }
.ui-track { list-style: none; margin: 14px 0 0; padding: 0; }
.ui-track li {
position: relative; padding: 0 0 20px 28px; font-size: .86rem; line-height: 1.4;
}
.ui-track li:last-child { padding-bottom: 0; }
.ui-track li span {
position: absolute; left: 0; top: 2px; width: 13px; height: 13px;
border-radius: 50%; border: 2px solid var(--line); background: var(--paper-raised);
}
.ui-track li::after {
content: ''; position: absolute; left: 6px; top: 15px; bottom: 2px;
width: 1px; background: var(--line);
}
.ui-track li:last-child::after { display: none; }
.ui-track li.done span { background: var(--green); border-color: var(--green); }
.ui-track li.done::after { background: var(--green); }
.ui-track li.now span {
border-color: var(--green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.ui-track li b { font-weight: 700; }
.ui-track li em {
display: block; font-style: normal; font-size: .74rem; color: var(--ink-soft); margin-top: 1px;
}
@media (max-width: 940px) {
.pm-grid { grid-template-columns: 1fr; gap: 34px; max-width: 620px; }
.pm-grid.flip .pm-copy, .pm-grid.flip .pm-ui { order: initial; }
.pm-sec { padding: 56px 0 60px; }
}
@media (max-width: 620px) {
.ui-body { padding: 16px 15px 15px; }
.ui-approve { grid-template-columns: 1fr; gap: 8px; }
.ui-slots { grid-template-columns: 1fr; }
.ui-amount b { font-size: 1.6rem; }
.ui-foot { gap: 8px; }
.ui-foot.pay { flex-direction: column; align-items: stretch; }
.ui-foot.pay .ui-btn { text-align: center; }
}
/* ===== v4.5 — supply funnel capture ====================================
/join was 195 words, two buttons and no form. A firm that read the pitch
and wanted in had nowhere to type its name.
======================================================================= */
.fj-hero { padding: 68px 0 76px; }
.fj-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: 60px; align-items: start; max-width: 1080px; margin: 0 auto;
}
.fj-copy h1 {
font-size: clamp(2rem, 4.4vw, 2.9rem); letter-spacing: -.03em;
line-height: 1.07; margin: 18px 0 0;
}
.fj-copy .lede { margin: 16px 0 26px; max-width: 46ch; }
.fj-pts { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fj-pts li {
position: relative; padding-left: 26px; color: var(--ink-soft);
line-height: 1.6; font-size: .96rem;
}
.fj-pts li::before {
content: ''; position: absolute; left: 2px; top: .36em; width: 12px; height: 7px;
border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
transform: rotate(-45deg);
}
.fj-pts b { color: var(--ink); font-weight: 700; }
.fj-founding {
border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
background: color-mix(in srgb, var(--green) 6%, transparent);
border-radius: 6px; padding: 18px 20px;
}
.fj-founding > b {
display: block; font-size: .74rem; text-transform: uppercase;
letter-spacing: .09em; color: var(--green); margin-bottom: 7px;
}
.fj-founding p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.fj-founding p b { color: var(--ink); }
/* --- the form --------------------------------------------------------- */
.fj-formwrap { position: sticky; top: 96px; }
.fj-form, .fj-done {
background: var(--paper-raised); border: 1px solid var(--line);
border-radius: 8px; padding: 30px 30px 26px;
box-shadow: 0 1px 2px rgba(20,24,22,.04), 0 14px 34px -18px rgba(20,24,22,.2);
}
.fj-form h2, .fj-done h2 {
font-size: 1.28rem; letter-spacing: -.022em; margin: 0;
}
.fj-sub { margin: 7px 0 22px; font-size: .9rem; color: var(--ink-soft); }
.fj-form label {
display: block; font-size: .8rem; font-weight: 700; letter-spacing: -.005em;
margin: 0 0 6px;
}
.fj-form input {
width: 100%; padding: 13px 14px; margin-bottom: 16px;
border: 1px solid var(--line); border-radius: 6px;
background: var(--paper); font: inherit; font-size: .96rem; color: var(--ink);
}
.fj-form input::placeholder { color: color-mix(in srgb, var(--ink-soft) 62%, transparent); }
.fj-form input:focus-visible {
outline: none; border-color: var(--green);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.fj-form input[aria-invalid] {
border-color: #b4462f;
box-shadow: 0 0 0 3px rgba(180,70,47,.14);
}
.fj-err {
margin: -6px 0 14px; font-size: .87rem; font-weight: 600; color: #9b3a26;
line-height: 1.5;
}
.fj-submit { width: 100%; justify-content: center; }
.fj-note {
margin: 14px 0 0; font-size: .8rem; color: var(--ink-soft);
line-height: 1.6; text-align: center;
}
.fj-done { text-align: center; }
.fj-done svg { color: var(--green); margin-bottom: 12px; }
.fj-done p { margin: 10px 0 20px; color: var(--ink-soft); line-height: 1.65; font-size: .95rem; }
.fj-done:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
/* --- what happens next ------------------------------------------------ */
.fj-steps { list-style: none; margin: 0; padding: 0; }
.fj-steps li {
display: grid; grid-template-columns: 38px 1fr; gap: 18px;
padding: 0 0 26px; position: relative;
}
.fj-steps li:not(:last-child)::after {
content: ''; position: absolute; left: 18px; top: 40px; bottom: 8px;
width: 2px; border-left: 2px dashed color-mix(in srgb, var(--green) 42%, transparent);
}
.fj-steps li:last-child { padding-bottom: 0; }
.fj-steps li > span {
width: 38px; height: 38px; border-radius: 50%; background: var(--green);
color: #fff; font-family: var(--font-num); font-weight: 700; font-size: .95rem;
display: grid; place-items: center; position: relative; z-index: 1;
}
.fj-steps b { font-size: 1rem; font-weight: 800; letter-spacing: -.012em; }
.fj-steps p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 940px) {
.fj-grid { grid-template-columns: 1fr; gap: 34px; max-width: 560px; }
.fj-formwrap { position: static; order: -1; }
.fj-hero { padding: 44px 0 52px; }
}
@media (max-width: 620px) {
.fj-form, .fj-done { padding: 24px 20px 22px; }
}
/* ===== v4.6 — firm dashboard, work-first =================================
Was: five stat tiles, then leads. A firm opens this to answer one question,
"is there work for me?", so the leads come first and the vanity metrics are
replaced by the two numbers that change behaviour: win rate, and money owed.
======================================================================= */
.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;
}
.fd-h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.app-top-right { display: flex; align-items: center; gap: 12px; }
/* --- the work banner: the first thing the eye lands on ---------------- */
.work-banner {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px; border-radius: 14px; text-decoration: none;
background: var(--ink); color: #fff; margin-bottom: 26px;
transition: transform .15s ease, box-shadow .15s ease;
}
.work-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.work-banner .wb-text { flex: 1; font-size: 1rem; line-height: 1.4; }
.work-banner .wb-text b { font-weight: 800; }
.work-banner .wb-go {
font-weight: 800; font-size: .86rem; color: #3ECF95; white-space: nowrap;
}
.wb-pulse {
width: 11px; height: 11px; border-radius: 50%; background: #3ECF95; flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(62,207,149,.6); animation: wbpulse 2s infinite;
}
@keyframes wbpulse {
0% { box-shadow: 0 0 0 0 rgba(62,207,149,.55); }
70% { box-shadow: 0 0 0 9px rgba(62,207,149,0); }
100% { box-shadow: 0 0 0 0 rgba(62,207,149,0); }
}
.work-banner.empty { background: var(--paper-raised); color: var(--ink-soft); border: 1px solid var(--line); }
.work-banner.empty .wb-pulse { background: var(--line-strong, #cfccc2); animation: none; box-shadow: none; }
.work-banner.empty .wb-go { display: none; }
@media (prefers-reduced-motion: reduce) { .wb-pulse { animation: none; } }
/* --- section headings ------------------------------------------------- */
.fd-sec-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
}
.fd-sec-head h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fd-hint { font-size: .8rem; color: var(--ink-soft); }
#sec-leads, #sec-active, #sec-profile { margin-bottom: 34px; }
/* --- leads: list + detail, list is primary --------------------------- */
.firm-cols { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(0, 1.55fr); gap: 18px; align-items: start; }
.lead-listwrap { display: flex; flex-direction: column; }
/* the lead is now a