/* ===================================
   Tax Radar - Bespoke builds
   Evidence Pack register, compressed: one hero, one method split, two ruled
   entries, one boxed CTA. No card grids, no process diagram, no artefact.

   Loaded last, after css/tokens.css, css/fonts.css, css/cookie-consent.css,
   css/footer.css and css/nav.css. Every var() carries the tokens.css hex as a
   fallback so the page still renders correctly if tokens.css fails to load.
   The brand palette is not re-declared here; the only local custom property
   is the hover teal, which has no token and is the same value the homepage,
   contact and walkthrough pages already carry.

   The global reset lives here because this page carries no inline <style>
   block and css/footer.css relies on list and heading margins being zeroed.

   Motion: the only animation is the .reveal fade and lift, armed by html.js
   so that with JavaScript off the content is simply visible, and disabled
   outright under prefers-reduced-motion.
   ================================ */

:root {
    /* Mockup value with no token, as on the homepage and contact pages. */
    --teal-hover: #238A7E;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--paper, #F8F9FA);
    color: var(--navy, #1B2A4A);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--teal, #2A9D8F);
}

a:hover {
    color: var(--teal-hover, #238A7E);
}

img {
    max-width: 100%;
}

/* Skip link --------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-size: 15px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

/* Page shell --------------------------------------------------------- */

.bespoke-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Shared type -------------------------------------------------------- */

/* Page kicker: teal, with the short leading rule, above the h1. */
.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    margin-bottom: 26px;
}

.kicker-rule {
    width: 28px;
    height: 1px;
    background: var(--teal, #2A9D8F);
    flex: none;
}

/* Section kicker: quieter than the page kicker, teal only on the qualifier,
   so the two do not compete when both are in view. */
.section-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-tag b {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

/* Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--teal-hover, #238A7E);
    color: #FFFFFF;
}

.btn-lg {
    font-size: 17px;
    padding: 16px 32px;
}

/* Hero --------------------------------------------------------------- */

.hero {
    padding: 96px 0 64px;
}

.hero h1 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin-bottom: 26px;
}

.hero-lede {
    font-size: 19px;
    color: var(--ink-soft, #4A5568);
    max-width: 56ch;
    line-height: 1.65;
}

/* The six capability tags. A flex row that wraps rather than a grid, so at
   any width the tags reflow instead of the longest one setting a column. */
.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 32px;
    list-style: none;
}

/* Cased in CSS rather than typed uppercase, as the kicker is, so a screen
   reader is not handed six initialisms. */
.capability-tags li {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
}

/* Method ------------------------------------------------------------- */

.method {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.method-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
}

.method h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    max-width: 20ch;
}

.method p {
    font-size: 16px;
    color: var(--ink-soft, #4A5568);
    max-width: 60ch;
}

.method p + p {
    margin-top: 14px;
}

/* Built to date ------------------------------------------------------ */

.builds {
    padding: 80px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.builds h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    margin-bottom: 16px;
    max-width: 26ch;
}

.build-list {
    margin-top: 44px;
    list-style: none;
}

/* Ruled ledger rows: the fixed first column holds the build name, the
   second the description, hairline ruled top and bottom. */
.build-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 32px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    align-items: baseline;
}

.build-row:first-child {
    border-top: 1px solid var(--rule, #D6DAE1);
}

.build-row h3 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.build-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    margin-top: 6px;
}

.build-row p {
    font-size: 15.5px;
    color: var(--ink-soft, #4A5568);
    max-width: 66ch;
}

.builds-note {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--ink-soft, #4A5568);
    margin-top: 16px;
    letter-spacing: 0.06em;
}

/* CTA ---------------------------------------------------------------- */

.cta-section {
    padding: 96px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.cta {
    position: relative;
    border: 1px solid var(--navy, #1B2A4A);
    background: #FFFFFF;
    padding: 56px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}

/* Breaks the top border, so the box reads as a stamped panel. */
.cta-caption {
    position: absolute;
    top: -9px;
    left: 48px;
    background: var(--paper, #F8F9FA);
    padding: 0 12px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--teal, #2A9D8F);
}

.cta h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.15;
}

.cta p {
    color: var(--ink-soft, #4A5568);
    font-size: 16px;
    margin-top: 12px;
    max-width: 48ch;
}

.cta-action {
    text-align: right;
}

/* Reveal ------------------------------------------------------------- */

/* Armed only once js/reveal.js has swapped html.no-js for html.js, so
   with scripting off the content is simply visible and never hidden. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
    .hero {
        padding: 72px 0 56px;
    }

    /* The method split stops earning its two columns once the h2 measure
       drops below its 20ch; heading and body stack. */
    .method-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .method,
    .builds {
        padding: 64px 0;
    }

    .cta-section {
        padding: 80px 0;
    }

    .cta {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 40px;
    }

    .cta-caption {
        left: 40px;
    }

    .cta-action {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .bespoke-shell {
        padding: 0 24px;
    }

    .hero {
        padding: 56px 0 48px;
    }

    .hero-lede {
        font-size: 17px;
    }

    /* The 260px name column no longer leaves a usable measure for the
       description, so each entry stacks name over body. */
    .build-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 28px 0;
    }

    .build-row h3 {
        font-size: 21px;
    }

    .cta-section {
        padding: 64px 0;
    }
}

@media (max-width: 640px) {
    .bespoke-shell {
        padding: 0 20px;
    }

    .method,
    .builds {
        padding: 56px 0;
    }

    /* The tags run as a single wrapping column of short lines at this
       width; the tighter row gap keeps the block from reading as a list. */
    .capability-tags {
        gap: 10px 18px;
        margin-top: 28px;
    }

    .method p,
    .build-row p,
    .cta p {
        max-width: none;
    }

    .cta {
        padding: 36px 24px;
    }

    /* At this width the caption is wider than the border run it breaks, so
       it leaves the absolute position and sits above the box in flow. */
    .cta-caption {
        position: static;
        display: block;
        background: transparent;
        padding: 0;
        margin-bottom: 12px;
    }
}

/* Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* No hover transform is declared on this page; the reset is kept so a
       later addition cannot reintroduce motion here unnoticed. */
    .btn,
    .btn:hover {
        transform: none;
        transition: none;
    }
}