/* ============================================================================
   YEG TAX MASTERS — GLOBAL STYLESHEET
   ----------------------------------------------------------------------------
   This is the single source of truth for the site's look and feel.
   It is organized top-to-bottom as:

     1. Design tokens (CSS custom properties — colors, fonts, spacing)
     2. Reset / base element styles
     3. Shared building blocks (container, buttons, section headers, cards)
     4. Site header + navigation (including the no-JavaScript mobile menu)
     5. Site footer
     6. Page sections (hero, trust bar, services grid, reviews, CTA band, etc.)
     7. Forms (contact page)
     8. Responsive breakpoints

   HOW TO CHANGE THE BRAND COLORS:
   Edit the variables in the `:root` block below. Every color on the site
   references these tokens, so one edit updates the whole site.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Brand palette — "modern professional": deep grey + rich purple accent.
       The greys carry a very slight purple tint so the dark surfaces and the
       accent feel like one family instead of two unrelated colors. */
    --grey-950: #0d0b12;   /* near-black with the same purple tint — header bar.
                              Reads as black but blends with the grey family;
                              set to #000 for literal pure black. */
    --grey-900: #1a1721;   /* darkest — footer, hero background */
    --grey-800: #252230;   /* header background, dark cards */
    --grey-700: #3d3850;   /* hover states on dark surfaces */
    --grey-600: #534c68;   /* borders/dividers on dark surfaces */

    /* Purple scale — all four steps share the same violet hue (~275°) so
       hovers/highlights read as "lighter purple", not a different color.
       500 is the brand anchor; 300 is ONLY for text on dark backgrounds
       (500 doesn't have enough contrast against the dark greys). */
    --purple-500: #60238b;   /* primary accent — CTA buttons, highlights on light bg */
    --purple-400: #7e41b5;   /* CTA hover — same hue, one step lighter */
    --purple-300: #c4a5ec;   /* light lavender — accent TEXT on dark surfaces */
    --purple-100: #f1eafa;   /* subtle tint — badges/icon backgrounds */
    --purple-logo: #652095;  /* EXACT logo purple (sampled from YTM-Plain.png) —
                                brand wordmark accents that sit beside the logo */

    /* Gold accent — deliberately OUTSIDE the purple family so "FREE" mentions
       and the form's Send Message button jump off the page (client request;
       CALL NOW went purple 2026-07-11). Complementary to purple, so it reads
       as intentional rather than off-brand.
       700 = on light backgrounds (AA contrast on white);
       300 = on dark/purple surfaces. */
    --gold-700: #b45309;
    --gold-300: #fbbf24;
    --gold-200: #fcd34d;   /* gold hover step */

    /* Neutral ink for light backgrounds — tinted toward the purple family */
    --ink-900: #1f1b28;    /* primary body text on light backgrounds */
    --ink-600: #57506a;    /* secondary/muted text */
    --ink-400: #8d86a0;    /* placeholder / very muted text */

    /* Light text steps for DARK surfaces (hero, footer, dark sections) */
    --mist-100: #efedf5;   /* near-white — headings/strong text on dark */
    --mist-300: #cfcadd;   /* ledes / paragraphs on dark */
    --mist-400: #b3adc6;   /* muted text on dark */

    --paper: #ffffff;          /* card surfaces */
    --paper-warm: #eeefee;     /* light grey bands (client-picked 2026-07-11) —
                                  alternates with white down every page */
    --line: #e6e2ef;           /* light borders and dividers */

    --success: #1e7f4f;    /* form success banner */
    --danger: #b3362b;     /* validation errors, failure banner */

    /* Typography — headings use a serif for a premium/established feel,
       body uses a clean sans-serif for readability. Both loaded in App.razor. */
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Layout rhythm */
    --container-max: 1140px;   /* max content width */
    --section-pad: 5.5rem;     /* vertical padding between page sections */
    --radius: 14px;            /* default rounded-corner radius for cards */
    --radius-sm: 8px;          /* smaller radius for buttons/inputs */
    --shadow-card: 0 2px 24px rgba(38, 24, 58, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(38, 24, 58, 0.16);
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: inherit;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

/* Remove the focus ring Blazor's FocusOnNavigate puts on page headings */
h1:focus { outline: none; }

p { margin: 0 0 1rem; }

a { color: var(--purple-500); }

img { max-width: 100%; display: block; }

/* Blazor's default error UI (shown if something goes wrong server-side).
   Kept minimal — most visitors will never see it. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--danger);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 1000;
}

/* ----------------------------------------------------------------------------
   3. SHARED BUILDING BLOCKS
   ------------------------------------------------------------------------- */

/* Centered max-width wrapper used inside every full-bleed section */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Generic page section with standard vertical rhythm.
   Page bodies alternate white and light grey (client request 2026-07-11);
   the only dark surfaces are the header, the footer and the purple CTA band. */
.section { padding: var(--section-pad) 0; }
.section--warm { background: var(--paper-warm); }    /* alternating grey band */
.section--lilac { background: var(--purple-100); }   /* pale purple emphasis band */

/* Section intro block: small purple eyebrow label + big heading + optional lede */
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple-500);
    margin-bottom: 0.75rem;
}
/* Large eyebrow — for sections where the label IS the section title
   (Why YEG Tax Masters, How It Works, Google Reviews). The base 0.8rem
   stays for eyebrows that sit above a big h2. */
.eyebrow--lg { font-size: 1.5rem; margin-bottom: 1rem; }

.section-head .lede { color: var(--ink-600); font-size: 1.1rem; }

/* --- Buttons -------------------------------------------------------------
   .btn is the base; combine with a variant class:
     .btn--purple    solid purple CTA (primary action)
     .btn--outline transparent with border (secondary action on dark bg)
     .btn--grey    solid grey (primary action on light bg)
     .btn--lg      larger padding for hero CTAs
--------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--purple { background: var(--purple-500); color: #fff; }
.btn--purple:hover { background: var(--purple-400); }

.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--outline:hover { border-color: #fff; }

.btn--grey { background: var(--grey-800); color: #fff; }
.btn--grey:hover { background: var(--grey-700); }

/* White button — the primary action on PURPLE backgrounds (CTA band),
   where both the purple and grey buttons would blend into the backdrop. */
.btn--light { background: #fff; color: var(--purple-500); }
.btn--light:hover { background: var(--purple-100); }

/* CALL NOW — the standout call button (client request 2026-07-11: purple,
   not gold — gold now belongs to the FREE highlight only). */
.btn--call { background: var(--purple-500); color: #fff; font-weight: 800; letter-spacing: 0.02em; }
.btn--call:hover { background: var(--purple-400); color: #fff; }
/* On the purple CTA band a purple button would blend in — a white outline
   keeps it visible while staying purple. */
.cta-band .btn--call { border: 2px solid #fff; }

.btn--lg { padding: 1rem 2.2rem; font-size: 1.05rem; }

/* --- "FREE" highlight -------------------------------------------------------
   Client request: every mention of "free" is uppercase, bold and a standout
   color. Usage: <span class="free">FREE</span> (write the text uppercase in
   the markup too — text-transform here is just a safety net). */
.free { font-weight: 800; text-transform: uppercase; color: var(--purple-logo); }
/* Dark and purple surfaces need the light gold step to stay readable */
.cta-band .free,
.site-footer .free,
.btn--purple .free { color: var(--gold-300); }
/* …but the white button (on the purple CTA band) is a light surface again */
.btn--light .free { color: var(--gold-700); }

/* --- Cards --------------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------------------
   4. SITE HEADER + NAVIGATION
   ----------------------------------------------------------------------------
   The mobile menu works WITHOUT JavaScript: a hidden checkbox (#nav-toggle)
   is toggled by the hamburger <label>. When checked, the sibling nav list is
   revealed via the CSS `:checked` selector. This keeps the whole site fully
   functional with zero client-side script.
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--grey-950);
    /* On near-black a solid grey border looks harsh — a faint translucent
       line + soft shadow separate the sticky bar from light sections while
       melting into the dark hero below. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.site-header__inner {
    position: relative;   /* anchor for the absolutely-positioned mobile menu */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
}

/* Logo image + two-tone wordmark: "YEG" in lavender, rest in white.
   Base size = footer; the HEADER-ONLY overrides below make the header
   brand much larger (client request) without inflating the footer too. */
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Size the logo with CSS (overrides the height attribute on the <img>) */
.brand img { height: 40px; width: auto; }

/* Header only: big logo + wordmark. Vertical padding on the bar keeps the
   72px logo from touching the header's edges. */
.site-header .brand { font-size: 2.35rem; }
.site-header .brand img { height: 72px; }
.site-header__inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* The big wordmark + full nav can't share one row on smaller screens —
   step the header brand down before things start to crowd or wrap. */
@media (max-width: 1024px) {
    .site-header .brand { font-size: 1.7rem; }
    .site-header .brand img { height: 56px; }
}
@media (max-width: 640px) {
    .site-header .brand { font-size: 1.5rem; }
    .site-header .brand img { height: 48px; }
}
/* "YEG" in the wordmark matches the logo's exact purple (header AND footer) */
.brand__accent { color: var(--purple-300); }

/* Hidden checkbox that drives the mobile menu open/closed state */
.nav-toggle-input { display: none; }

/* Hamburger button — hidden on desktop, shown on mobile via media query */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav { display: flex; align-items: center; gap: 0.25rem; }

.site-nav a {
    color: var(--mist-300);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: #fff; background: var(--grey-700); }

/* NavLink adds class="active" on the current page — highlight in the logo
   purple so it matches the brand mark (client request 2026-07-11) */
.site-nav a.active { color: var(--purple-300); }

/* The nav's CTA button gets extra spacing from the regular links,
   and overrides the generic link styling above */
.site-nav a.btn { margin-left: 0.75rem; color: #fff; }
.site-nav a.btn:hover { background: var(--purple-400); color: #fff; }

/* --- Services dropdown -----------------------------------------------------
   Pure CSS, no JavaScript, two behaviors:
     Desktop (>640px): opens on :hover of the wrapper and on :focus-within
       (keyboard users tabbing through the nav get it too).
     Mobile (≤640px): the ▾ caret is a <label> for the hidden checkbox below,
       tapping it expands the list inline inside the menu panel — the same
       checkbox pattern as the hamburger.
   In both modes the "Services" link itself still navigates to /services. */
.nav-dropdown { position: relative; }

/* Hidden checkbox driving the mobile expand/collapse state */
.nav-services-input { display: none; }

/* Row holding the Services label + caret. The label is NOT a link — there
   is no services overview page; the dropdown entries are the destinations.
   tabindex="0" in the markup keeps it focusable so :focus-within still
   opens the menu for keyboard users. */
.nav-dropdown__trigger { display: flex; align-items: center; }
.nav-dropdown__label {
    color: var(--mist-300);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.55rem 0.3rem 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    cursor: default;
}
.nav-dropdown:hover .nav-dropdown__label { color: #fff; }

/* The ▾ glyph lives in a pseudo-element so it can rotate independently of
   the label (on mobile the label stretches over the whole row). */
.nav-dropdown__caret {
    color: var(--mist-300);
    opacity: 0.75;
    cursor: pointer;
}
.nav-dropdown__caret::after {
    content: "▾";
    display: block;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.nav-dropdown__menu { display: none; flex-direction: column; }

.nav-dropdown__menu a { padding: 0.55rem 0.8rem; font-size: 0.92rem; white-space: nowrap; }

/* Desktop: floating panel under the trigger, opened by hover/focus.
   (Below 961px the header switches to the hamburger menu — the big brand
   plus nav links plus the CALL NOW button don't fit on one row.) */
@media (min-width: 961px) {
    /* Caret is purely decorative on desktop (hover opens the menu) — let
       clicks fall through so it can't toggle the mobile checkbox state. */
    .nav-dropdown__caret { pointer-events: none; padding: 0.55rem 0.6rem 0.55rem 0.1rem; }

    .nav-dropdown__menu {
        position: absolute;
        top: 100%;               /* directly below the trigger — no hover gap */
        left: 50%;
        transform: translateX(-50%);
        min-width: 240px;
        padding: 0.5rem;
        background: var(--grey-800);
        border: 1px solid var(--grey-600);
        border-radius: var(--radius-sm);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
        z-index: 110;
    }

    .nav-dropdown:hover .nav-dropdown__menu,
    .nav-dropdown:focus-within .nav-dropdown__menu { display: flex; }
}

/* ----------------------------------------------------------------------------
   5. SITE FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--grey-900);
    color: var(--mist-300);
    padding: 4rem 0 2rem;
    font-size: 0.95rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.site-footer h4 {
    color: #fff;
    font-family: var(--font-body);   /* footer headings stay sans-serif, smaller */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.site-footer a { color: var(--mist-300); text-decoration: none; }
.site-footer a:hover { color: var(--purple-300); }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }

.site-footer__brand-blurb { max-width: 280px; }

.site-footer__bottom {
    border-top: 1px solid var(--grey-600);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--mist-400);
}

/* ----------------------------------------------------------------------------
   6. PAGE SECTIONS
   ------------------------------------------------------------------------- */

/* --- Hero (home page) ----------------------------------------------------
   Full-width dark grey banner with a subtle radial purple glow. -------------- */
.hero {
    /* Soft grey band holding just the headline and lede; the white form
       section follows. Centered; the only button is the mobile-only
       CALL NOW (see .hero__call). */
    background: var(--paper-warm);
    color: var(--ink-900);
    text-align: center;
    padding: 5rem 0 3rem;
}

.hero__inner { max-width: 780px; margin: 0 auto; }

/* Client request 2026-07-11: the home headline is bold and ALL CAPS */
.hero h1 { margin-bottom: 1.25rem; text-transform: uppercase; font-weight: 800; }
.hero h1 em { font-style: italic; color: var(--purple-500); }   /* italic highlight word */

.hero .lede {
    font-size: 1.2rem;
    color: var(--ink-600);
    margin: 0 auto;
    max-width: 580px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Hero CALL NOW — mobile/tablet only: once the nav collapses behind the
   hamburger (≤960px) the header's CALL NOW button is out of sight, so the
   hero shows the same button at its bottom. Hidden on desktop, where the
   header button is always visible. */
.hero__call { display: none; }
@media (max-width: 960px) {
    .hero__call { display: inline-block; margin-top: 2rem; }
}

/* --- Services grid (home preview + services page) ------------------------ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.service-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }

/* Circular purple-tinted icon holder at the top of each service card */
.service-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-500);
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
}

.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { color: var(--ink-600); font-size: 0.97rem; margin: 0; }

/* "Learn more →" affordance pinned to the card bottom */
.service-card__more {
    margin-top: auto;
    padding-top: 1.25rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--purple-500);
}

/* --- Detailed service rows (services page) --------------------------------
   Alternating two-column blocks: text on one side, feature list on the other.
   `id` anchors let the home page cards deep-link to each service. ---------- */
.service-detail {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: start;
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--line);
    /* Offset anchor targets so the sticky header doesn't cover the heading */
    scroll-margin-top: 90px;
}
.service-detail:last-child { border-bottom: none; }
.service-detail:nth-child(even) { direction: rtl; }      /* flip column order on even rows */
.service-detail:nth-child(even) > * { direction: ltr; }  /* restore text direction inside */

.service-detail h2 { font-size: 1.6rem; }
.service-detail p { color: var(--ink-600); }

/* On the services overview the row headings link to each service's page —
   keep them looking like headings, purple only on hover */
.service-detail h2 a { color: inherit; text-decoration: none; }
.service-detail h2 a:hover { color: var(--purple-500); }

/* Centered call-to-action row under a section's grid/list */
.section-cta { text-align: center; margin-top: 2.5rem; }

/* --- Service page FAQs -----------------------------------------------------
   CSS-only accordion built on <details>/<summary> — keeps the zero-JS rule.
   The +/– indicator is a pseudo-element swapped by the [open] state. */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;               /* hide the default disclosure triangle */
    position: relative;
    padding: 1.2rem 3.2rem 1.2rem 1.5rem;
    font-weight: 600;
    color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple-500);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
    margin: 0;
    padding: 0 1.5rem 1.3rem;
    color: var(--ink-600);
    line-height: 1.65;
}

/* --- "How it works" steps (home page) -------------------------------------
   Three numbered columns; the number circle echoes the check-list marker. */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
}
.step-item { text-align: center; }
.step-item__num {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-500);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}
.step-item h3 { margin-bottom: 0.5rem; }
.step-item p { color: var(--ink-600); line-height: 1.6; margin: 0; }
.step-item p a { color: var(--purple-500); font-weight: 600; }

/* --- Numbered guide (service page long-form sections) ----------------------
   Used by ServiceDetail for a service's extra Sections (ServiceCatalog.cs):
   each paragraph becomes one numbered white card on the pale purple band. */
.guide-steps { max-width: 880px; display: grid; gap: 1.5rem; }
.guide-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.6rem 1.8rem;
}
.guide-step__num {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-500);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
}
.guide-step p { margin: 0; color: var(--ink-600); line-height: 1.75; }

@media (max-width: 640px) {
    .guide-step { grid-template-columns: 1fr; gap: 0.9rem; padding: 1.3rem 1.4rem; }
}

/* Prose variant of the long-form sections (ServiceSection.Numbered = false):
   plain paragraphs instead of numbered cards. */
.guide-prose { max-width: 820px; }
.guide-prose p { margin: 0 0 1.1rem; color: var(--ink-600); line-height: 1.75; }
.guide-prose p:last-child { margin-bottom: 0; }
.guide-prose .check-list { margin: 0 0 1.1rem; }

/* --- Service page testimonial (real Google review above the CTA) --------- */
.testimonial {
    margin: 1.75rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--paper-warm);
    border-left: 3px solid var(--purple-500);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.testimonial blockquote {
    margin: 0.6rem 0 0.5rem;
    color: var(--ink-900);
    font-style: italic;
    line-height: 1.6;
}
.testimonial blockquote::before { content: "“"; }
.testimonial blockquote::after { content: "”"; }
.testimonial figcaption { color: var(--ink-400); font-size: 0.9rem; }

/* Long reviews: preview + CSS-only "Read more" expander (<details>, no JS).
   The blockquote's own “ ” pseudo-quotes would wrap the expander UI, so the
   split variant puts “ on the preview and ” at the end of the expanded text. */
.testimonial blockquote.testimonial__quote--split::before,
.testimonial blockquote.testimonial__quote--split::after { content: none; }
.testimonial__quote--split p { margin: 0 0 0.5rem; }
.testimonial__quote--split > p:first-of-type::before { content: "“"; }
.testimonial__more p:last-of-type { margin-bottom: 0; }
.testimonial__more p:last-of-type::after { content: "”"; }
.testimonial__more summary {
    cursor: pointer;
    list-style: none;
    color: var(--purple-500);
    font-weight: 600;
    font-style: normal;
    font-size: 0.9rem;
}
.testimonial__more summary::-webkit-details-marker { display: none; }
.testimonial__more summary:hover { color: var(--purple-400); }
.testimonial__more[open] .testimonial__more-open { display: none; }
.testimonial__more:not([open]) .testimonial__more-close { display: none; }
.testimonial__more p { margin-top: 0.5rem; }

/* --- Google-rating trust line above the contact form ---------------------- */
.trust-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    color: var(--ink-600);
    font-size: 0.95rem;
}
.trust-line a { color: var(--purple-500); font-weight: 600; }

/* --- Tax deadlines page ---------------------------------------------------- */
.deadline-list { max-width: 900px; margin: 0 auto; }
.deadline-item {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1.75rem;
    margin-bottom: 1.25rem;
    align-items: start;
}
.deadline-item__date {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--purple-500);
    line-height: 1.3;
}
.deadline-item h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.deadline-item p { margin: 0; color: var(--ink-600); line-height: 1.6; }
.deadline-item p a { color: var(--purple-500); font-weight: 600; }
.deadline-note {
    max-width: 900px;
    margin: 2rem auto 0;
    color: var(--ink-400);
    font-size: 0.9rem;
}
.deadline-note a { color: var(--purple-500); font-weight: 600; }

/* Numbered "what happens next" steps (contact + thank-you pages) */
.next-steps {
    margin: 0 0 2rem;
    padding-left: 1.3rem;
    color: var(--ink-600);
}
.next-steps li { margin-bottom: 0.7rem; line-height: 1.55; }
.next-steps li::marker { color: var(--purple-500); font-weight: 700; }
.contact-info .next-steps { margin-bottom: 0; font-size: 0.95rem; }

/* Checkmark feature list used inside service details */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.85rem;
    color: var(--ink-900);
}
/* purple checkmark drawn with a pseudo-element (no icon files needed) */
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-500);
    font-size: 0.8rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* --- Google Reviews section (home page) ---------------------------------- */

/* Summary row above the review cards: big number + stars + total count */
.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.reviews-summary__score {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--grey-900);
    line-height: 1;
}
.reviews-summary__meta { color: var(--ink-600); font-size: 0.95rem; }
.reviews-summary__meta a { color: var(--purple-500); font-weight: 600; }

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.review-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
}

.review-card__header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.5rem; }

/* Reviewer avatar: Google profile photo, or initial-letter fallback circle */
.review-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.review-card__avatar--fallback {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grey-800);
    color: var(--purple-300);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.review-card__name { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.review-card__time { color: var(--ink-400); font-size: 0.82rem; }

.review-card__text {
    color: var(--ink-600);
    font-size: 0.95rem;
    margin: 0.75rem 0 0;
    /* Clamp very long reviews to keep card heights consistent */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Star rating — filled stars are purple, empty stars are light grey */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; }
.star--filled { color: var(--purple-500); }
.star--empty { color: var(--line); }

/* "Read all reviews on Google" link under the reviews grid */
.reviews-cta { text-align: center; margin-top: 2.5rem; }

/* --- "Why YEG Tax Masters" story (home page grey band) ---------------------
   Short prose paragraphs that build up to the punchline heading below them. */
.why-story { max-width: 720px; }
.why-story p { color: var(--ink-600); font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.25rem; }
.why-story .why-punchline {
    margin: 2.25rem 0 0;
    color: var(--purple-500);
}

/* --- Contact form card (home page + /contact) -------------------------------
   The form sits in a purple card (same gradient family as the CTA band) so
   it pops off the white page. Everything inside that needs to stay readable
   on purple is overridden below: labels go white, validation errors go
   light red, and the submit button goes gold (the page's standout action);
   the inputs themselves stay white cards with dark text. */
.form-card {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(115deg, #47196a 0%, var(--purple-500) 55%, var(--purple-400) 100%);
    border: 1px solid var(--purple-400);
    border-radius: var(--radius);
    padding: 2.5rem 2.75rem;
    box-shadow: var(--shadow-card-hover);
}

.form-card .form-field label { color: #fff; }
.form-card .form-field .optional { color: rgba(255, 255, 255, 0.65); }

/* Brand-purple text/buttons vanish on purple — switch to visible-on-purple */
.form-card .validation-message { color: #ffc4bb; }
.form-card .btn--purple { background: var(--gold-300); color: #201503; font-weight: 800; }
.form-card .btn--purple:hover { background: var(--gold-200); }

@media (max-width: 640px) {
    .form-card { padding: 1.5rem 1.25rem; }
}

/* Utilities used by the home page's hero → heading → form-card stack */
.section--tight { padding-top: 1.5rem; }
.section-head--snug { margin-bottom: 1.75rem; }
.trust-line--center { justify-content: center; }

/* --- CTA band: full-width purple call-to-action before the footer ----------
   Deep purple gradient with WHITE text — the brand purple is dark, so light
   text is the only readable option here. Buttons: .btn--light + .btn--outline. */
.cta-band {
    background: linear-gradient(115deg, #47196a 0%, var(--purple-500) 55%, var(--purple-300) 100%);
    padding: 4.5rem 0;
}
.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin: 0 0 0.35rem; }
.cta-band p { color: rgba(255, 255, 255, 0.82); margin: 0; font-weight: 500; }

/* --- Page hero: smaller banner used on About/Services/Contact ------------ */
.page-hero {
    /* Light grey banner (was dark grey until 2026-07-11 — client wants the
       page bodies light; only header/footer/CTA band stay dark). */
    background: var(--paper-warm);
    color: var(--ink-900);
    padding: 4.5rem 0 3.5rem;
}
.page-hero h1 { margin-bottom: 0.5rem; }
.page-hero .lede { color: var(--ink-600); font-size: 1.15rem; margin: 0; max-width: 640px; }

/* --- About page: pull-review wall -----------------------------------------
   Curated verbatim Google reviews stretched down the page, one per row:
   big purple highlight phrase ("Quick to respond") on the left, the full
   quote on the right.
   (The home page keeps the standard .review-card grid — see ReviewsSection.) */
.pull-reviews { max-width: 980px; margin: 0 auto; }

.pull-review {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 1.5rem 4rem;
    /* Center the highlight beside its quote so it reads as belonging to
       THIS review, not the row above or below it */
    align-items: center;
    padding: 3rem 0;
    border-top: 1px solid var(--line);
}
.pull-review:first-child { border-top: 0; padding-top: 1rem; }

.pull-review__highlight {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    color: var(--purple-500);
    margin: 0;
}

.pull-review__quote {
    margin: 0 0 1rem;
    color: var(--ink-900);
    font-size: 1.05rem;
    line-height: 1.7;
}
/* Typographic quotation marks around the verbatim review */
.pull-review__quote::before { content: "\201C"; }
.pull-review__quote::after { content: "\201D"; }

/* One line: "Name · Google review · ★★★★★" */
.pull-review__attribution {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.95rem;
}
.pull-review__author { font-weight: 700; color: var(--ink-900); }
.pull-review__source { color: var(--ink-400); }

/* Google Maps embed (About page "Find us" section). The iframe fills the
   container; height gives it a comfortable map viewport on all screens. */
.map-embed {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

/* ----------------------------------------------------------------------------
   7. FORMS (contact page)
   ------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3.5rem;
    align-items: start;
}

.form-field { margin-bottom: 1.4rem; }

.form-field label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}
.form-field .optional { color: var(--ink-400); font-weight: 400; }

/* Inputs, selects and textareas share one style */
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-900);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(96, 35, 139, 0.16);
}

/* Blazor adds .invalid to inputs that fail DataAnnotations validation */
.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid { border-color: var(--danger); outline: none; }
.form-field input.valid,
.form-field select.valid,
.form-field textarea.valid { outline: none; }

/* Validation message shown under a field that failed validation */
.validation-message {
    display: block;
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

/* Two fields side by side (name/email, phone/service) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* Honeypot anti-spam field: visually removed but still present in the DOM,
   so bots fill it in and humans never see it. See Contact.razor for details. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Success / error banners shown after the form is submitted */
.form-banner {
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.form-banner--success { background: #e8f5ee; color: var(--success); border: 1px solid #bfe3cf; }
.form-banner--error { background: #fbeae8; color: var(--danger); border: 1px solid #f0c8c3; }

/* Contact info sidebar cards */
.contact-info .card { margin-bottom: 1.25rem; padding: 1.5rem 1.75rem; }
.contact-info h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.contact-info p { color: var(--ink-600); margin: 0; font-size: 0.97rem; }
.contact-info a { color: var(--purple-500); font-weight: 600; text-decoration: none; }
.contact-info a:hover { color: var(--purple-400); }

/* ----------------------------------------------------------------------------
   8. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .services-grid,
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }

    .steps-grid { grid-template-columns: 1fr; gap: 2rem; }

    /* three short trust items still fit side by side at tablet widths;
       the 640px rule below stacks them */

    .contact-grid,
    .service-detail { grid-template-columns: 1fr; gap: 2rem; }

    /* Service pages: drop the "What's included" sidebar once the two-column
       layout stacks — below the CTA it only made the page longer
       (client request 2026-07-12) */
    .service-detail__deliverables { display: none; }

    /* Pull-reviews stack: highlight above its quote */
    .pull-review { grid-template-columns: 1fr; gap: 0.75rem; padding: 2.25rem 0; }

    .site-footer__grid { grid-template-columns: 1fr 1fr; }

    /* --- Hamburger navigation (tablet + mobile) ---------------------------
       Below 961px the big brand + nav links + CALL NOW button can't share
       one row, so the nav collapses behind the hamburger: the hidden
       checkbox is toggled by the hamburger <label>, and :checked reveals
       the nav as a full-width panel under the header. */
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: -1.5rem;    /* stretch past the container padding to full width */
        right: -1.5rem;
        flex-direction: column;
        align-items: stretch;
        background: var(--grey-800);
        border-bottom: 1px solid var(--grey-600);
        padding: 0.75rem 1.5rem 1.25rem;
        gap: 0.25rem;
    }
    .site-nav a { padding: 0.85rem 0.9rem; }
    .site-nav a.btn { margin: 0.5rem 0 0; }

    /* Services dropdown: hover doesn't exist on touch, so the caret
       <label> is stretched INVISIBLY over the whole "Services" row —
       tapping anywhere on the row toggles the hidden .nav-services-input
       checkbox and expands the inline list of service pages. */
    .nav-dropdown__trigger { position: relative; }
    .nav-dropdown__label { flex: 1; padding: 0.85rem 0.9rem; }

    .nav-dropdown__caret {
        position: absolute;
        inset: 0;                    /* cover the entire row */
        display: flex;
        align-items: center;
        justify-content: flex-end;   /* ▾ glyph sits at the right edge */
        padding-right: 1.1rem;
    }
    .nav-dropdown__caret::after { font-size: 0.75rem; }

    .nav-dropdown__menu {
        padding-left: 0.9rem;
        margin-left: 0.9rem;
        border-left: 2px solid var(--grey-600);   /* visual "sub-menu" cue */
    }

    /* Row tap → expand the list, flip the arrow */
    .nav-services-input:checked ~ .nav-dropdown__menu { display: flex; }
    .nav-services-input:checked ~ .nav-dropdown__trigger .nav-dropdown__caret::after { transform: rotate(180deg); }

    /* Reveal the panel when the checkbox is checked */
    .nav-toggle-input:checked ~ .site-nav { display: flex; }

    /* Morph hamburger into an X while open */
    .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px) {
    :root { --section-pad: 3.5rem; }

    .services-grid,
    .reviews-grid,
    .form-row,
    .deadline-item,
    .site-footer__grid { grid-template-columns: 1fr; }

    .deadline-item { gap: 0.5rem; }
}