/* ===================================
   Tax Radar - About
   Evidence Pack register: statement hero, two founder photo cards over an
   unnamed engineering row, a five-entry dated ledger, a ruled facts block
   and a boxed CTA. No card grids beyond the two founders.

   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 single local custom property
   below is a mockup value that has no token, declared the same way the
   homepage, walkthrough, contact, bespoke and pricing stylesheets declare
   theirs.

   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, walkthrough, contact,
       bespoke and pricing 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 --------------------------------------------------------- */

.about-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-heading {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.15;
}

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

/* 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 72px;
}

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

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

/* Founders ----------------------------------------------------------- */

.founders {
    padding: 72px 0 88px;
}

.founder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.founder-card {
    background: #FFFFFF;
    border: 1px solid var(--rule, #D6DAE1);
}

/* The mockup's portrait well. The photographs are square, so object-fit
   crops them to this ratio rather than letterboxing. */
.founder-photo {
    aspect-ratio: 4 / 4.6;
    background: var(--paper-deep, #EFF1F4);
    overflow: hidden;
}

.founder-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same treatment as the homepage team cards. */
.team-photo-img {
    filter: grayscale(1);
}

/* 1.18 lifts the darker original to sit level with the other once both are
   desaturated. */
.team-photo-img-bright {
    filter: grayscale(1) brightness(1.18);
}

.founder-body {
    padding: 24px 26px;
    border-top: 2px solid var(--navy, #1B2A4A);
}

.founder-name {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 22px;
    font-weight: 600;
}

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

.founder-bio {
    font-size: 14.5px;
    color: var(--ink-soft, #4A5568);
}

/* Engineering: the unnamed function row beneath the two founder cards. */
.engineering {
    margin-top: 32px;
    border: 1px solid var(--rule, #D6DAE1);
    background: #FFFFFF;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: baseline;
}

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

.engineering-body {
    font-size: 15px;
    color: var(--ink-soft, #4A5568);
    max-width: 70ch;
}

/* The record --------------------------------------------------------- */

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

/* The section heading is the mono ledger label, so the h2 carries the
   caption styling rather than the display face. */
.record-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.record-list {
    margin-top: 16px;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.record-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    padding: 34px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
}

.record-date {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    padding-top: 5px;
}

.record-body h3 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 10px;
}

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

/* The facts on file -------------------------------------------------- */

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

.facts-list {
    margin-top: 40px;
    border-top: 1px solid var(--rule, #D6DAE1);
}

.facts-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    font-size: 15px;
}

.facts-key {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    padding-top: 2px;
}

.facts-value {
    color: var(--navy, #1B2A4A);
}

.facts-note {
    display: block;
    color: var(--ink-soft, #4A5568);
    font-size: 13px;
    margin-top: 2px;
}

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

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

.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, 34px);
    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;
    }

    .founders {
        padding: 56px 0 72px;
    }

    .record,
    .facts {
        padding: 72px 0;
    }

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

    .cta {
        padding: 44px;
    }

    .cta-caption {
        left: 36px;
    }
}

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

    /* Two portrait cards side by side stop being legible well before the
       ledger rows do. */
    .founder-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .founder-photo {
        aspect-ratio: 4 / 3;
    }

    .cta {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .cta p {
        max-width: none;
    }
}

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

    /* The 200px and 280px fixed tracks overflow a 375px viewport once the
       32px shell padding and the 40px gap are taken out, so both ledgers and
       the engineering row restack. */
    .engineering,
    .record-row,
    .facts-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .engineering {
        padding: 24px;
    }

    .record-date {
        padding-top: 0;
    }

    .record-body p,
    .engineering-body {
        max-width: none;
    }

    .facts-row {
        padding: 16px 0;
    }

    .cta {
        padding: 36px 24px;
    }

    .cta-caption {
        position: static;
        display: block;
        background: none;
        padding: 0;
        margin-bottom: 16px;
    }
}

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

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

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

    .btn,
    a {
        transition: none;
    }
}