/* Fonts and brand.css (design tokens) are loaded via tags in each page's , injected by scripts/build.js — no render-blocking @import. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.75; color: var(--warm-white); background: var(--near-black); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Typography ── */ .eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--forest-green); } h1, h2 { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; line-height: 1.05; } h1 { font-size: clamp(42px, 7vw, 86px); } h2 { font-size: clamp(28px, 4vw, 54px); } h3 { font-family: var(--font-ui); font-weight: 600; font-size: clamp(16px, 2vw, 20px); text-transform: uppercase; letter-spacing: 1px; } p { font-size: clamp(15px, 1.2vw, 17px); color: var(--steel-grey); } /* ── Layout ── */ .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } section { padding: 96px 0; } .section-header { margin-bottom: 56px; } .section-header .eyebrow { margin-bottom: 12px; } .section-header h2 { margin-bottom: 16px; } .section-header p { max-width: 560px; } /* ── Buttons ── */ .btn { display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 14px 32px; border: none; cursor: pointer; transition: opacity 0.2s, background 0.2s; } .btn-primary { background: var(--steel-blue); color: var(--white); } .btn-primary:hover { opacity: 0.85; } .btn-outline { background: transparent; color: var(--warm-white); border: 1px solid var(--steel-grey); } .btn-outline:hover { border-color: var(--warm-white); } /* ── Skip link — off-screen until keyboard focus lands on it ── */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 300; padding: 12px 20px; background: var(--steel-blue); color: var(--white); font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } .skip-link:focus { top: 12px; } /* ── Nav ── */ nav { position: fixed; top: 0; width: 100%; z-index: 100; background: rgba(13, 13, 15, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(138, 146, 153, 0.15); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); display: flex; flex-direction: row; align-items: center; line-height: 1; gap: 10px; } .nav-logo span { color: var(--steel-blue); } .nav-logo-mark { height: 34px; width: auto; flex: none; display: block; overflow: visible; } .nav-logo-text { display: flex; flex-direction: column; gap: 4px; } .nav-logo-sub { font-family: var(--font-ui); font-weight: 500; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--steel-grey); } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links a { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel-grey); transition: color 0.2s; } .nav-links a:hover { color: var(--warm-white); } .nav-cta { margin-left: 16px; } /* .nav-links a outranks .btn-primary, so restate the button text color */ .nav-links a.nav-cta { color: var(--white); } .nav-chevron { display: none; } .nav-sub-menu { display: none; list-style: none; } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 9px; flex-shrink: 0; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--warm-white); transition: transform 0.2s, opacity 0.2s; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Hero ── */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 64px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(225deg, transparent 0%, rgba(46, 109, 164, 0.06) 100%); pointer-events: none; } .hero-logo-wrap { position: absolute; z-index: 0; top: 50%; left: 4%; height: 62%; max-height: 440px; transform: translateY(-50%); pointer-events: none; } .hero-logo-mark { height: 100%; width: auto; display: block; overflow: visible; } @media (max-width: 1000px) { .hero-logo-wrap { display: none; } } .hero-content { max-width: 820px; position: relative; z-index: 1; } @media (min-width: 1001px) { .hero-content { margin-left: auto; } } .hero .eyebrow { margin-bottom: 20px; } .hero h1 { color: var(--white); margin-bottom: 24px; } .hero h1 em { font-style: normal; color: var(--steel-blue); } /* The practice tagline, demoted from the H1 so the H1 can carry the keyword and location. Sits well below the H1's scale so the hierarchy still reads H1 → tagline → sub. */ .hero-tagline { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; color: var(--white); margin-bottom: 24px; } .hero-tagline em { font-style: normal; color: var(--steel-blue); } .hero-sub { font-family: var(--font-ui); font-weight: 400; font-size: clamp(16px, 1.5vw, 18px); color: var(--steel-grey); margin-bottom: 40px; max-width: 560px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ── Trust Bar ── */ .trust-bar { padding: 40px 0; border-top: 1px solid rgba(138, 146, 153, 0.15); border-bottom: 1px solid rgba(138, 146, 153, 0.15); } .trust-bar-inner { display: flex; gap: 48px; flex-wrap: wrap; } .trust-item {} .trust-item .number { font-family: var(--font-heading); font-weight: 800; font-size: 40px; color: var(--steel-blue); line-height: 1; } .trust-item .label { font-family: var(--font-ui); font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel-grey); margin-top: 4px; } /* ── Cards ── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; } .card { background: rgba(240, 242, 244, 0.03); border: 1px solid rgba(138, 146, 153, 0.12); padding: 40px 36px; transition: border-color 0.2s, background 0.2s; } .card:hover { border-color: rgba(46, 109, 164, 0.4); background: rgba(46, 109, 164, 0.04); } .card-number { font-family: var(--font-heading); font-weight: 800; font-size: 48px; /* solid steel blue: ~3.4:1 on the card background — the WCAG large-text minimum is 3:1, so no opacity fade here */ color: var(--steel-blue); line-height: 1; margin-bottom: 20px; } .card h3 { color: var(--white); margin-bottom: 12px; } .card p { font-size: 15px; } .card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #5B96CF; /* accessible bright variant of --steel-blue for small text */ /* 10px type gives an 18px box; this is the primary target of every card, so pad it to the 24px WCAG 2.5.8 minimum. margin-top absorbs the 6px of top padding so the spacing below the copy is unchanged. */ padding: 6px 0; margin-top: 18px; transition: gap 0.2s; } .card:hover .card-link { gap: 12px; } /* ── Why Section ── */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why-points { display: flex; flex-direction: column; gap: 32px; } .why-point { display: flex; gap: 20px; align-items: flex-start; } .why-point-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--forest-green); } .why-point h3 { font-size: 14px; color: var(--white); margin-bottom: 6px; } .why-point p { font-size: 14px; } /* ── CTA Banner ── */ .cta-banner { background: var(--steel-blue); padding: 80px 0; } .cta-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-banner h2 { color: var(--white); } .cta-banner p { color: rgba(255,255,255,0.9); margin-top: 8px; } /* ≥4.5:1 on steel blue */ .btn-white { background: var(--white); color: var(--steel-blue); } .btn-white:hover { opacity: 0.9; } /* ── Footer ── */ footer { padding: 48px 0; border-top: 1px solid rgba(138, 146, 153, 0.15); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-motto { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--steel-grey); font-style: italic; } /* The phone number is its own paragraph, not a link inside a sentence, so the WCAG 2.5.8 inline exception doesn't cover it — and on a phone it is the tap-to-call target. Pad the 16px box out to 24px. */ .footer-motto a { transition: color 0.2s; display: inline-block; padding: 4px 0; } .footer-motto a:hover { color: var(--warm-white); } /* Wraps because the eight links are ~634px of nowrap text: on a phone an unwrapped row set the whole document's scroll width and every page scrolled sideways. Wrapped rows stay compact and on desktop the row still fits on one line and looks unchanged. Row gap is 0, not the 12px it used to be, because .footer-links a now carries 6px of vertical padding for its tap target — that padding supplies the same 12px of visual separation. Reinstating a row gap here would double-space the wrapped block on mobile. */ .footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; list-style: none; } .footer-links a { font-family: var(--font-ui); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel-grey); transition: color 0.2s; white-space: nowrap; /* 10px type in a 12px box is under the 24px WCAG 2.5.8 target minimum. inline-block so the vertical padding actually grows the hit area. */ display: inline-block; padding: 6px 0; } .footer-links a:hover { color: var(--warm-white); } /* ── Services Page ── */ .services-hero { padding-top: 160px; padding-bottom: 80px; } /* ── Section Sub-Nav ── */ .subnav { position: sticky; top: 64px; z-index: 90; background: rgba(13, 13, 15, 0.97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(138, 146, 153, 0.15); } .subnav-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .subnav-inner::-webkit-scrollbar { display: none; } .subnav-link { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-grey); white-space: nowrap; flex-shrink: 0; padding: 17px 18px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .subnav-link:hover { color: var(--warm-white); } .subnav-link.active { color: var(--white); border-bottom-color: var(--steel-blue); } .service-row { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding: 64px 0; border-top: 1px solid rgba(138, 146, 153, 0.15); align-items: start; scroll-margin-top: 116px; } .service-row:last-child { border-bottom: 1px solid rgba(138, 146, 153, 0.15); } .service-meta .eyebrow { margin-bottom: 12px; } .service-meta h3 { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 40px); font-weight: 800; text-transform: uppercase; color: var(--white); /* This is display type, not the 16-20px UI text the base h3 rule assumes, so it needs the h1/h2 line-height. Without it the 1.75 from body applies and a wrapped heading ("Corporate Income Tax — T2") splits with a 30px gap through the middle of it. */ line-height: 1.05; } .service-meta .price { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--steel-blue); margin-top: 16px; } .service-detail p { margin-bottom: 20px; } .service-detail ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } .service-detail ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--steel-grey); } .service-detail ul li::before { content: '✓'; color: var(--forest-green); font-weight: 600; flex-shrink: 0; margin-top: 1px; } /* 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; } /* ── 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-item { border-bottom: 1px solid rgba(138, 146, 153, 0.15); } .faq-item:first-of-type { 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; } .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; } @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; } /* ── 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 ── */ @media (min-width: 641px) { .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; } } @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: 640px) { .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; } .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; } }