— becomes
its own flex item and gets a 12px gap punched in either side of it, so the
sentence visibly comes apart. Absolute positioning keeps the li in normal
inline flow, so marked-up text wraps like text. */
.service-detail ul li {
position: relative;
/* Both numbers are measured against the old flex geometry, not chosen, so the
refactor doesn't nudge every bullet on seven pages: 23px is the tick's width
plus the 12px gap it used to sit in. The floor is what the flex row's height
used to be — max(text, tick + its 1px margin-top) — which only ever showed
on single-line items. min-height reproduces that max(); padding-bottom would
not, because it would also add 1px to items that already wrap. */
padding-left: 23px;
min-height: 27px;
font-size: 15px;
color: var(--steel-grey);
}
.service-detail ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 1px;
color: var(--forest-green);
font-weight: 600;
}
/* Tax note under a list of published prices. Every price on these pages is
quoted before HST, so the note carries the rate and the registration
number CRA requires us to show. */
.fee-note {
padding-top: 24px;
font-size: 14px;
color: var(--steel-grey);
max-width: 720px;
}
.fee-note a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Fee Ladder & Fee Table ──
A T1 base fee is a three-step ladder, not one number: the return is priced
by its most complex element. This has to sit next to the add-on menu
wherever that menu appears, because the menu alone reads as additive — a
rental looks like $149 + $150 when the return is in fact $399. That $100
gap is exactly the "surprise at filing" the rest of the page promises
there won't be, so the ladder is published, not left to the calculator. */
.fee-ladder {
border: 1px solid rgba(138, 146, 153, 0.24);
margin: 0 0 24px;
}
.fee-ladder-step {
display: grid;
grid-template-columns: 148px 1fr;
gap: 24px;
padding: 18px 22px;
border-bottom: 1px solid rgba(138, 146, 153, 0.15);
}
.fee-ladder-step:last-child { border-bottom: 0; }
.fee-ladder-amt {
font-family: var(--font-heading);
font-weight: 800;
font-size: 26px;
line-height: 1.15;
color: var(--steel-blue);
font-variant-numeric: tabular-nums;
}
/* The tier name rides under its own price rather than beside it: the price is
the thing being compared down the column, and the name is the label for it. */
.fee-ladder-amt span {
display: block;
font-family: var(--font-ui);
font-weight: 600;
font-size: 10px;
line-height: 1.6;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--steel-grey);
}
.fee-ladder-what {
font-size: 15px;
line-height: 1.65;
}
/* Published price list. Name on the left, figure on the right, one row per
line item — the same shape as the internal fee schedule, so the two can be
read against each other without translation. */
.fee-table {
border-top: 1px solid rgba(138, 146, 153, 0.24);
margin: 0 0 8px;
}
.fee-table-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: baseline;
padding: 13px 2px;
border-bottom: 1px solid rgba(138, 146, 153, 0.15);
}
.fee-table-nm {
font-size: 15px;
line-height: 1.5;
}
.fee-table-nm span {
display: block;
font-family: var(--font-ui);
font-size: 13px;
line-height: 1.5;
color: var(--steel-grey);
}
.fee-table-amt {
font-family: var(--font-heading);
font-weight: 800;
font-size: 19px;
color: var(--steel-blue);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fee-table-head {
font-family: var(--font-ui);
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
color: var(--steel-grey);
margin: 32px 0 12px;
}
/* Under 600px the two-column rows stop being legible: a 148px price column
leaves ~90px for prose, and the add-on names wrap to three lines against a
right-aligned figure. Both collapse to stacked blocks instead. */
@media (max-width: 600px) {
.fee-ladder-step {
grid-template-columns: 1fr;
gap: 8px;
padding: 16px 18px;
}
.fee-table-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* ── Contact Page ── */
.contact-hero {
padding-top: 160px;
padding-bottom: 80px;
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 40px; }
.contact-item h3 {
font-size: 12px;
color: var(--forest-green);
margin-bottom: 6px;
}
.contact-item p { font-size: 15px; color: var(--warm-white); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
font-family: var(--font-ui);
font-weight: 600;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--steel-grey);
}
.form-group input,
.form-group select,
.form-group textarea {
background: rgba(240, 242, 244, 0.04);
border: 1px solid rgba(138, 146, 153, 0.2);
color: var(--warm-white);
font-family: var(--font-body);
font-weight: 300;
font-size: 15px;
padding: 14px 16px;
outline: none;
transition: border-color 0.2s;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--steel-blue);
}
/* Keyboard focus gets a clear ring; mouse focus keeps the subtle border above. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
outline: 2px solid var(--steel-blue);
outline-offset: 2px;
border-color: var(--steel-blue);
}
/* Links and custom controls would otherwise show only the muted UA default
against the brand background. */
a:focus-visible,
button:focus-visible,
.opt:focus-visible,
.toggle:focus-visible,
.type-opt:focus-visible,
[role="option"]:focus-visible {
outline: 2px solid var(--steel-blue);
outline-offset: 2px;
border-radius: 3px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(138, 146, 153, 0.5);
}
.form-group select option { background: var(--near-black); }
.form-group textarea { resize: vertical; min-height: 140px; }
.form-submit { margin-top: 8px; }
.form-success {
display: none;
background: rgba(90, 138, 60, 0.1);
border: 1px solid rgba(90, 138, 60, 0.3);
padding: 20px 24px;
color: var(--forest-green);
font-family: var(--font-ui);
font-size: 14px;
}
.form-error {
background: rgba(178, 74, 74, 0.1);
border: 1px solid rgba(178, 74, 74, 0.3);
padding: 20px 24px;
color: #c66;
font-family: var(--font-ui);
font-size: 14px;
}
.form-error[hidden] { display: none; }
.form-check label {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
color: var(--warm-white);
line-height: 1.5;
}
.form-check input[type="checkbox"] {
appearance: auto;
-webkit-appearance: auto;
width: 16px;
height: 16px;
padding: 0;
margin-top: 2px;
flex: none;
accent-color: var(--forest-green);
}
.form-check em { font-style: normal; color: var(--steel-grey); }
/* ── About Page ── */
.about-hero {
padding-top: 160px;
padding-bottom: 80px;
}
.about-hero h1 em {
font-style: normal;
color: var(--steel-blue);
}
/* Freshness and authorship line on the tax guides — these carry tax-year
sensitive advice, so the review date and who stands behind it are visible
on the page. Bump the date whenever a guide is revised for a new tax year. */
.guide-meta {
font-family: var(--font-ui);
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: var(--steel-grey);
margin-top: 24px;
max-width: 620px;
}
.guide-meta a {
color: #5B96CF; /* accessible bright variant of --steel-blue */
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── FAQ Page ── */
.faq-wrap {
max-width: 780px;
display: flex;
flex-direction: column;
gap: 88px;
}
/* ── FAQ filter ── */
/* Revealed by js/faq-filter.js, so a no-JS visitor never sees a dead
search box above a list it can't filter. */
.faq-tools[hidden],
.faq-item[hidden],
.faq-group[hidden] { display: none; }
.faq-filter-label {
display: block;
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--steel-grey);
margin-bottom: 10px;
}
.faq-filter-row { display: flex; gap: 12px; align-items: stretch; }
.faq-filter-input {
background: rgba(240, 242, 244, 0.04);
border: 1px solid rgba(138, 146, 153, 0.2);
color: var(--warm-white);
font-family: var(--font-body);
font-weight: 300;
font-size: 15px;
padding: 14px 16px;
outline: none;
transition: border-color 0.2s;
flex: 1;
min-width: 0;
}
.faq-filter-input::placeholder { color: rgba(138, 146, 153, 0.5); }
.faq-filter-input:focus { border-color: var(--steel-blue); }
.faq-filter-input:focus-visible {
outline: 2px solid var(--steel-blue);
outline-offset: 2px;
border-color: var(--steel-blue);
}
.faq-filter-clear[hidden] { display: none; }
.faq-filter-status {
font-size: 14px;
color: var(--steel-grey);
margin-top: 10px;
min-height: 20px; /* reserve the line so results don't jump as it fills */
}
.faq-empty[hidden] { display: none; }
.faq-empty { font-size: 15px; }
.faq-item {
border-bottom: 1px solid rgba(138, 146, 153, 0.15);
}
.faq-item:first-of-type,
.faq-item.is-first-visible {
border-top: 1px solid rgba(138, 146, 153, 0.15);
}
.faq-item summary {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 20px 0;
cursor: pointer;
list-style: none;
font-family: var(--font-ui);
font-weight: 600;
font-size: 16px;
color: var(--white);
transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
flex-shrink: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 24px;
line-height: 1;
color: #5B96CF; /* accessible bright variant of --steel-blue for small text on dark */
transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: #5B96CF; }
.faq-item summary:focus-visible {
outline: 2px solid var(--steel-blue);
outline-offset: 4px;
}
.faq-answer { padding: 0 32px 24px 0; }
.faq-answer p { font-size: 15px; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── How It Works (home) ── */
.process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(138, 146, 153, 0.15);
border: 1px solid rgba(138, 146, 153, 0.15);
}
.process-step { background: var(--near-black); padding: 36px 32px; }
.process-step .step-n {
font-family: var(--font-ui);
font-weight: 600;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: #5B96CF; /* accessible bright variant of --steel-blue for small text on dark */
margin-bottom: 16px;
}
.process-step h3 { color: var(--white); margin-bottom: 10px; }
.process-step p { font-size: 15px; }
.process-step a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 900px) {
.process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.process-grid { grid-template-columns: 1fr; }
}
/* ── Checklist Page (what to bring) ── */
.check-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 72px; }
.check-intro p + p { margin-top: 24px; }
/* Was a , so it inherited the p + p rule above; keep the same rhythm
now that it's a flex row holding the print button and the PDF link. */
.check-actions { margin-top: 24px; }
.check-group .section-header { margin-bottom: 28px; }
.check-list { list-style: none; }
.check-list li {
position: relative;
padding: 14px 0 14px 36px;
border-bottom: 1px solid rgba(138, 146, 153, 0.12);
font-family: var(--font-ui);
font-weight: 400;
font-size: 15.5px;
color: var(--warm-white);
line-height: 1.5;
}
.check-list li:first-child { border-top: 1px solid rgba(138, 146, 153, 0.12); }
.check-list li::before {
content: '';
position: absolute;
left: 2px;
top: 18px;
width: 14px;
height: 14px;
border: 2px solid var(--steel-grey);
}
.check-why {
display: block;
font-size: 13.5px;
font-weight: 300;
color: var(--steel-grey);
margin-top: 2px;
}
/* ── Key Dates Page ── */
.dates-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 72px; }
.dates-group .section-header { margin-bottom: 28px; }
.date-row {
display: grid;
grid-template-columns: 170px 1fr;
gap: 28px;
padding: 26px 0;
border-bottom: 1px solid rgba(138, 146, 153, 0.15);
}
.section-header + .date-row { border-top: 1px solid rgba(138, 146, 153, 0.15); }
.date-when {
font-family: var(--font-heading);
font-weight: 700;
font-size: 26px;
text-transform: uppercase;
line-height: 1;
color: #5B96CF;
}
.date-when small {
display: block;
font-family: var(--font-ui);
font-weight: 600;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--steel-grey);
margin-top: 8px;
}
.date-what h3 { color: var(--white); margin-bottom: 8px; }
.date-what p { font-size: 15px; }
.date-what a,
.dates-note a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
.date-what em { font-style: normal; color: var(--warm-white); }
.dates-note p { font-size: 14px; }
.dates-actions { margin-top: 24px; }
/* Sits under the calendar-download button to say what the file contains
before the click, since a downloaded .ics is awkward to inspect. */
.dates-note-small { font-size: 14px; margin-top: 12px; }
/* ── Intake Form Page ── */
.intake-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 64px; }
.intake-intro p + p { margin-top: 20px; }
.intake-privacy strong { color: var(--warm-white); }
.intake-privacy-note { font-size: 15px; color: var(--steel-grey); }
.intake-group { display: flex; flex-direction: column; gap: 24px; }
.intake-group .section-header { margin-bottom: 0; }
/* The shared .form-row is a fixed two-column grid; the address and dependant
rows here need three and four, and must still collapse on a phone. */
.intake-wrap .form-row {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.intake-fieldset { border: 0; padding: 0; margin: 0; }
.intake-fieldset legend {
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--steel-grey);
padding: 0;
margin-bottom: 14px;
}
/* The CRA yes/no questions are full sentences, so their legends read as
prose rather than as field labels. */
.intake-yesno legend {
text-transform: none;
letter-spacing: normal;
font-size: 15px;
font-family: var(--font-body);
font-weight: 300;
color: var(--warm-white);
line-height: 1.6;
}
.intake-radio-row { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.intake-checks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px 24px;
}
.intake-choice {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
font-size: 14px;
font-weight: 400;
color: var(--warm-white);
line-height: 1.5;
}
.intake-choice input[type="checkbox"],
.intake-choice input[type="radio"] {
appearance: auto;
-webkit-appearance: auto;
width: 16px;
height: 16px;
padding: 0;
margin-top: 2px;
flex: none;
accent-color: var(--forest-green);
}
.intake-optional {
font-family: var(--font-body);
font-weight: 300;
font-size: 12px;
letter-spacing: normal;
text-transform: none;
color: var(--steel-grey);
}
.intake-hint { font-size: 13px; color: var(--steel-grey); line-height: 1.6; }
.intake-hint a,
.intake-consent a,
.intake-intro a,
.intake-success a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
.intake-dependant + .intake-dependant { margin-top: 8px; }
.intake-consent {
font-size: 14px;
color: var(--steel-grey);
line-height: 1.7;
border-left: 2px solid rgba(138, 146, 153, 0.25);
padding-left: 20px;
}
.intake-actions { margin-top: 8px; }
/* The booking CTA on the contact page sits inside a .contact-item, whose
rules would otherwise leave the button flush against the copy. */
.contact-book-action { margin-top: 14px; }
/* ── Send Documents Page ── */
.send-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 64px; }
.send-intro .lead { margin: 0; }
/* The upload button is the entire point of the page, so it gets its own
band rather than sitting in a paragraph. */
.send-action {
border: 1px solid rgba(90, 138, 60, 0.4);
background: rgba(90, 138, 60, 0.07);
padding: 32px;
text-align: center;
}
.btn-lg { font-size: 15px; padding: 18px 36px; }
.send-action-note { font-size: 13px; color: var(--steel-grey); margin-top: 14px; }
.send-group { display: flex; flex-direction: column; gap: 24px; }
.send-group .section-header { margin-bottom: 0; }
.send-group p { font-size: 15px; }
.send-group a,
.send-intro a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
.send-group em { font-style: normal; color: var(--warm-white); }
/* Inline messages. aria-invalid drives the border so the cue isn't colour
alone — the message text sits under the field either way. */
.intake-wrap [aria-invalid="true"] { border-color: #C4574F; }
.intake-field-error,
.intake-error {
color: #E08A83;
font-size: 13px;
line-height: 1.5;
}
.intake-error { font-size: 15px; }
.intake-success {
border: 1px solid rgba(90, 138, 60, 0.5);
background: rgba(90, 138, 60, 0.08);
padding: 24px;
}
.intake-success h3 { font-size: 20px; margin-bottom: 10px; }
.intake-success p { font-size: 15px; }
.intake-success p + p { margin-top: 12px; }
.intake-group[hidden],
.intake-conditional[hidden],
.intake-dependant[hidden],
.intake-success[hidden],
.intake-error[hidden],
.intake-wrap button[hidden] { display: none; }
@media (max-width: 640px) {
.date-row { grid-template-columns: 1fr; gap: 10px; }
}
/* ── Privacy Policy Page ── */
.privacy-hero {
padding-top: 160px;
padding-bottom: 80px;
}
/* ── 404 Page ── */
.notfound-hero {
padding-top: 180px;
padding-bottom: 120px;
}
.notfound-links {
margin-top: 8px;
font-family: var(--font-ui);
font-size: 15px;
color: var(--steel-grey);
}
.policy-content {
max-width: 720px;
display: flex;
flex-direction: column;
gap: 56px;
}
.policy-updated {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--steel-grey);
}
.policy-section h2 {
font-size: clamp(18px, 2vw, 24px);
color: var(--white);
margin-bottom: 20px;
}
.policy-section p { margin-bottom: 16px; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px 0;
}
.policy-section ul li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--steel-grey);
}
.policy-section ul li::before {
content: '–';
color: var(--steel-blue);
flex-shrink: 0;
}
/* ── Prose Layout (who-we-are / about content blocks) ── */
.prose-block { max-width: 720px; margin-bottom: 80px; }
.prose-block-last { max-width: 720px; }
.prose-divider { border-top: 1px solid rgba(138, 146, 153, 0.15); padding-top: 64px; }
/* ── Founder Block ──
The bio block widens to carry the headshot, but the text column stays at the
720px every other prose block uses and stays where they start — the photo
goes into the empty right-hand space of the 1160px container rather than
pushing the copy inward. Moving the copy would break the left edge that runs
down the whole page.
The figure is first in the DOM so the stacked phone layout leads with the
face; the grid puts it back on the right at desktop width. */
.prose-block.founder-block {
max-width: 1076px;
display: grid;
grid-template-columns: minmax(0, 720px) 300px;
column-gap: 56px;
align-items: start;
}
.founder-text { grid-column: 1; grid-row: 1; }
.founder-photo {
grid-column: 2;
grid-row: 1;
margin: 0;
}
/* The backdrop is a mid-grey against a near-black page, so without a frame the
photo reads as a grey rectangle that failed to knock out its background. A
hairline in the same tone as the section rules makes it deliberate. */
.founder-photo img {
display: block;
width: 100%;
height: auto;
border: 1px solid rgba(138, 146, 153, 0.24);
}
.founder-caption {
margin-top: 16px;
border-top: 2px solid var(--steel-blue);
padding-top: 12px;
}
.founder-caption .name {
font-family: var(--font-heading);
font-weight: 800;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 0.5px;
line-height: 1.1;
color: var(--white);
}
.founder-caption .role {
display: block;
font-family: var(--font-ui);
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color: var(--steel-grey);
margin-top: 4px;
}
.founder-caption .profile {
display: inline-block;
margin-top: 10px;
font-family: var(--font-ui);
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1.5px;
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Below the container's own breakpoint the two columns stop fitting: 300px of
photo plus a 56px gutter leaves the copy under 400px, which is too narrow
for 17px body text. Stack instead, and cap the photo so it doesn't become a
full-width portrait taller than the phone screen. */
@media (max-width: 900px) {
.prose-block.founder-block {
display: block;
max-width: 720px;
}
.founder-photo {
max-width: 280px;
margin-bottom: 40px;
}
}
/* ── Spacing Utilities ── */
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-16 { margin-top: 16px; }
/* ── Typography Utilities ── */
.lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--warm-white); font-family: var(--font-ui); font-weight: 400; }
.text-warm { color: var(--warm-white); }
.text-blue {
color: #5B96CF; /* accessible bright variant of --steel-blue */
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Section Modifiers ── */
.section-flush { padding-top: 0; }
.section-flush-bottom { padding-top: 0; padding-bottom: 120px; }
.section-border-top { border-top: 1px solid rgba(138, 146, 153, 0.15); }
/* ── Layout Utilities ── */
.why-grid-single { grid-template-columns: 1fr; max-width: 720px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline-light { border-color: rgba(255,255,255,0.4); color: white; }
/* ── Fee Calculator Page Hero/Body ── */
.calc-page-hero { padding: 140px 0 48px; }
.calc-page-body { padding: 0 16px 100px; }
.calc-desc { font-family: var(--font-ui); font-weight: 400; font-size: 17px; color: var(--steel-grey); margin-top: 16px; }
/* ── Contact Page ── */
.contact-lead { font-size: 16px; color: var(--warm-white); }
/* ── Footer ── */
footer .nav-logo { margin-bottom: 8px; }
/* ── Motion ── */
@media (prefers-reduced-motion: no-preference) {
/* Logo entrance: each shape settles in, staggered */
.logo-mark-svg .logo-path {
opacity: 0;
transform: translateY(5px) scale(0.94);
transform-origin: center;
animation: logoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.logo-mark-svg .logo-path:nth-child(1) { animation-delay: 0.32s; }
.logo-mark-svg .logo-path:nth-child(2) { animation-delay: 0.08s; }
.logo-mark-svg .logo-path:nth-child(3) { animation-delay: 0.14s; }
.logo-mark-svg .logo-path:nth-child(4) { animation-delay: 0.2s; }
.logo-mark-svg .logo-path:nth-child(5) { animation-delay: 0.02s; }
.logo-mark-svg .logo-path:nth-child(6) { animation-delay: 0.26s; }
@keyframes logoIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hero logo: grows up from the ground, like a tree */
.hero-logo-mark.logo-mark-svg .logo-path {
opacity: 1;
transform: none;
animation: none;
}
.hero-logo-wrap {
clip-path: inset(100% 0 0 0);
animation: heroLogoGrow 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.15s;
}
@keyframes heroLogoGrow {
to { clip-path: inset(0 0 0 0); }
}
/* Hero entrance */
.hero-anim {
opacity: 0;
transform: translateY(18px);
animation: heroUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-anim:nth-child(1) { animation-delay: 0.05s; }
.hero-anim:nth-child(2) { animation-delay: 0.16s; }
.hero-anim:nth-child(3) { animation-delay: 0.3s; }
.hero-anim:nth-child(4) { animation-delay: 0.44s; }
@keyframes heroUp {
to { opacity: 1; transform: translateY(0); }
}
/* Hero ambient background drift */
.hero::after {
content: '';
position: absolute;
z-index: 0;
top: -15%;
left: -10%;
width: 55%;
height: 70%;
background: radial-gradient(circle, rgba(90, 138, 60, 0.07) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
animation: heroDrift 24s ease-in-out infinite alternate;
}
@keyframes heroDrift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(50px, 30px) scale(1.15); }
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.cards .card.reveal:nth-child(2) { transition-delay: 0.06s; }
.cards .card.reveal:nth-child(3) { transition-delay: 0.12s; }
.cards .card.reveal:nth-child(4) { transition-delay: 0.18s; }
.cards .card.reveal:nth-child(5) { transition-delay: 0.24s; }
.cards .card.reveal:nth-child(6) { transition-delay: 0.3s; }
.why-points .why-point.reveal:nth-child(2) { transition-delay: 0.08s; }
.why-points .why-point.reveal:nth-child(3) { transition-delay: 0.16s; }
.why-points .why-point.reveal:nth-child(4) { transition-delay: 0.24s; }
.trust-bar-inner .trust-item.reveal:nth-child(2) { transition-delay: 0.1s; }
.trust-bar-inner .trust-item.reveal:nth-child(3) { transition-delay: 0.2s; }
/* Card hover lift */
.card { transition: border-color 0.2s, background 0.2s, transform 0.25s ease; }
.card:hover { transform: translateY(-4px); }
/* Logo hover */
.logo-mark-svg { transition: transform 0.25s ease; }
.nav-logo:hover .logo-mark-svg { transform: translateY(-1px) scale(1.04); }
/* CTA button micro-interaction */
.btn-primary, .btn-white { transition: opacity 0.2s, background 0.2s, transform 0.2s ease; }
.btn-primary:hover, .btn-white:hover { transform: translateY(-2px); }
}
/* ── Responsive ── */
/* The bar needs 1000px to lay out on one line. Below that the labels wrap
and the nav overflows its own 64px height, so the burger takes over instead.
Measured, not guessed: logo 126px + the seven items 604px + six 36px gaps +
the CTA margin + container padding lands at ~1000px, and no gap this design
would tolerate closes that — even at 16px the bar still needs ~840px, which
is nowhere near the 641px this used to claim to support.
1000/1001 is reused from the hero-logo breakpoint rather than being a second
magic number three pixels away from it. */
@media (min-width: 1001px) {
/* Every row in the bar lays out the same way. The dropdown parents are flex
(text + chevron), so their
is only as tall as the 11px line box. A
plain link is inline, so its picks up the 16px body strut instead and
the label lands 1.6px lower than its neighbours. Flex on the drops
the strut and the six labels share a baseline.
Desktop only: the mobile menu makes these anchors display:block for
full-width tap targets, and flex items would shrink them to their text. */
.nav-links > li { display: flex; align-items: center; }
.nav-has-sub { position: relative; }
.nav-has-sub .nav-parent {
display: flex;
align-items: center;
gap: 5px;
}
.nav-has-sub .nav-chevron {
display: block;
width: 10px;
height: 6px;
transition: transform 0.2s;
}
.nav-has-sub:hover .nav-chevron,
.nav-has-sub.open .nav-chevron {
transform: rotate(180deg);
}
/* Keyboard: kept as separate rules so a parser that doesn't know
:focus-within can't invalidate the hover selectors above/below */
.nav-has-sub:focus-within .nav-chevron { transform: rotate(180deg); }
.nav-has-sub .nav-sub-menu {
display: block;
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 190px;
/* Opaque, not 0.96: the panel overlaps the hero, and at 4% the headline
behind it stays legible straight through the menu. */
background: var(--near-black);
border: 1px solid rgba(138, 146, 153, 0.2);
backdrop-filter: blur(8px);
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
z-index: 101;
}
.nav-has-sub:hover .nav-sub-menu,
.nav-has-sub.open .nav-sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-has-sub:focus-within .nav-sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
/* no fade for keyboard focus: items must be tabbable the moment
focus enters, not 0.18s later */
transition: none;
}
.nav-sub-menu a {
display: block;
padding: 10px 18px;
white-space: nowrap;
}
.nav-sub-menu a:hover {
background: rgba(138, 146, 153, 0.08);
color: var(--warm-white);
}
.nav-sub-label {
padding: 8px 18px 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--steel-grey);
border-top: 1px solid rgba(138, 146, 153, 0.15);
margin-top: 4px;
cursor: default;
}
.nav-sub-label-first {
border-top: none;
margin-top: 0;
padding-top: 6px;
}
/* "All guides →" — a destination, not a fourth guide. Takes the same hairline
the group labels use, so the menu reads as three groups rather than a list
with an odd item on the end. */
.nav-sub-all {
border-top: 1px solid rgba(138, 146, 153, 0.15);
margin-top: 4px;
padding-top: 2px;
}
}
@media (max-width: 900px) {
section { padding: 64px 0; }
.why-grid,
.contact-layout { grid-template-columns: 1fr; gap: 48px; }
.service-row { grid-template-columns: 1fr; gap: 24px; }
.cta-banner-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1000px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
.nav-links.open {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: var(--near-black);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(138, 146, 153, 0.15);
padding: 4px 24px 20px;
/* This panel is absolute inside a fixed nav, so it cannot be scrolled to
by scrolling the page. Without a bounded, scrollable height, a tall
open sub-menu pushes the items below it off-screen for good: on a
375x667 phone with Resources expanded, Contact and Get Started ended up
176px past the fold and unreachable. */
max-height: calc(100vh - 64px);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-links.open li {
border-bottom: 1px solid rgba(138, 146, 153, 0.1);
}
.nav-links.open li:last-child { border-bottom: none; }
.nav-links.open a {
display: block;
padding: 14px 0;
color: var(--warm-white);
font-size: 13px;
}
.nav-links.open .nav-cta {
display: block;
margin: 10px 0 4px;
text-align: center;
padding: 13px 32px;
}
.nav-links.open .nav-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.nav-links.open .nav-chevron {
display: block;
width: 12px;
height: 8px;
flex-shrink: 0;
transition: transform 0.2s;
}
.nav-links.open .nav-has-sub.open .nav-chevron {
transform: rotate(180deg);
}
.nav-links.open .nav-has-sub.open .nav-sub-menu {
display: block;
padding: 0 0 10px 14px;
border-left: 2px solid var(--forest-green);
margin-top: -4px;
}
.nav-links.open .nav-sub-menu li {
border-bottom: none !important;
}
.nav-links.open .nav-sub-menu a {
padding: 8px 0;
font-size: 12px;
color: var(--steel-grey);
}
.nav-links.open .nav-sub-menu a:hover { color: var(--warm-white); }
.nav-links.open .nav-sub-menu .nav-sub-label {
padding: 10px 0 2px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--steel-grey);
border-top: 1px solid rgba(138, 146, 153, 0.15);
margin-top: 4px;
cursor: default;
}
.nav-links.open .nav-sub-menu .nav-sub-label-first {
border-top: none;
margin-top: 0;
padding-top: 2px;
}
.nav-links.open .nav-sub-menu .nav-sub-all {
border-top: 1px solid rgba(138, 146, 153, 0.15);
margin-top: 6px;
padding-top: 2px;
}
.form-row { grid-template-columns: 1fr; }
.trust-bar-inner { gap: 32px; }
.hero-actions { flex-direction: column; }
.hero-actions .btn { text-align: center; }
}
/* ── Print (checklists and reference pages on paper) ── */
@media print {
body { background: #fff; color: #000; }
nav, footer, .cta-banner, .no-print { display: none !important; }
section { padding: 24px 0; }
.about-hero { padding: 24px 0 0; }
h1, h2, h3,
.check-list li,
.date-what h3 { color: #000 !important; }
p, .check-why, .eyebrow, .date-when small { color: #333 !important; }
.date-when { color: #000 !important; }
.check-list li { border-color: #bbb; }
.check-list li::before { border-color: #000; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ── Client reviews ─────────────────────────────────────────────────────────
Visible testimonials only. These are quoted from the practice's Google
Business Profile and are deliberately NOT marked up: Google treats a review
about you republished on your own site as a self-serving review, so Review /
AggregateRating here would buy no stars and would put the sitewide
AccountingService markup at risk on every page. tests/page-schema.test.js
enforces that across the whole site, not just the guides.
Excerpts are contiguous runs from each review, never spliced across
sentences that were not adjacent — a testimonial that improves on what the
client actually wrote is a fabricated one. */
.quotes {
display: grid;
/* min() on the track floor, not a bare minmax(300px, 1fr): a bare floor
cannot shrink, so on a 320px phone the 300px track plus the container's
48px of padding pushed the page to 324px and scrolled it sideways. This
keeps 300px as the preference and lets the track collapse to the container
when there is less room than that, so it cannot overflow at any width. */
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 2px;
}
.quote {
background: rgba(240, 242, 244, 0.03);
border: 1px solid rgba(138, 146, 153, 0.12);
padding: 36px 32px 30px;
margin: 0;
display: flex;
flex-direction: column;
transition: border-color 0.2s, background 0.2s;
}
.quote:hover {
border-color: rgba(46, 109, 164, 0.4);
background: rgba(46, 109, 164, 0.04);
}
.quote-stars {
color: var(--forest-green);
font-size: 13px;
letter-spacing: 0.22em;
margin-bottom: 16px;
}
.quote p {
margin: 0 0 22px;
flex: 1;
}
.quote cite {
font-family: var(--font-ui);
font-weight: 600;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
color: var(--steel-grey);
}
.quotes-note {
margin-top: 28px;
font-size: 15px;
color: var(--steel-grey);
}
/* The base rule is `a { color: inherit; text-decoration: none }`, so an inline
link in prose is invisible until it is given both back. Same treatment as
.process-step a — the verification link is the whole point of the note, and a
link the reader cannot see is one they cannot use to check the quotes. */
.quotes-note a {
color: #5B96CF;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Mobile menu scrim ──────────────────────────────────────────────────────
The open menu used to leave the page behind it at full strength, so content
ran right up under the panel edge and got cut mid-glyph — it read as a
rendering fault rather than a layer sitting over the page.
Hidden by default at every width and only revealed under the mobile
breakpoint, so it can never appear on desktop even if `.open` were somehow
left on the list. z-index sits between the page and the fixed nav (100), so
the panel — which lives inside nav — always paints above it.
`visibility` is animated alongside opacity rather than relying on opacity
alone: a fully transparent element still takes pointer events, which would
leave an invisible sheet swallowing taps across the whole page. */
.nav-scrim {
position: fixed;
inset: 64px 0 0 0;
z-index: 90;
background: rgba(13, 13, 15, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (max-width: 1000px) {
nav:has(.nav-links.open) + .nav-scrim {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Fade only where motion is welcome. Without the delay on `visibility`, the
element would jump to hidden at the start of the fade-out and the transition
would never be seen. Browsers without :has() simply never reveal the scrim,
which is exactly the behaviour that shipped before it existed. */
@media (prefers-reduced-motion: no-preference) {
.nav-scrim {
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
nav:has(.nav-links.open) + .nav-scrim {
transition: opacity 0.25s ease, visibility 0s linear 0s;
}
}