/*
   ONTARIO CONTRACTING CO. — Design System v1.9
   Derived from the Formative Digital Bio-Geometric system
   (PUM constants, phi line-height, Inter/Outfit) with a
   trade-amber palette. See DESIGN-SYSTEM.md.
*/

:root {
    /* PUM spacing constants (FD lineage) */
    --pum-base: 1.111rem;
    --pum-double: 2.222rem;
    --pum-structure: 3.333rem;
    --pum-action: 6.666rem;
    --t-fast: 0.444s;
    --t-entry: 0.259s;
    --phi: 1.618;

    /* OCC palette */
    --occ-ink: #0E1420;
    --occ-amber: #E8A23D;
    --occ-peach: #FFDAB9;
    --occ-paper: #F7F2EA;
    --occ-steel: #8FA3BF;
    --occ-silver: #C5CBD6;
    --occ-slate: #2A3548;
    --occ-char: #1C2534;
}

* { box-sizing: border-box; }

body {
    background: var(--occ-paper);
    color: var(--occ-char);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    margin: 0;
    overflow-x: hidden;
    line-height: var(--phi);
}

h1, h2, h3, .btn, .nav-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

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

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pum-base); }

/* --- NAV --- */
.main-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: center; align-items: center; gap: 2rem;
    padding: 1.1rem 0; z-index: 1000;
    background: rgba(14, 20, 32, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(232, 162, 61, 0.18);
}
.nav-brand {
    color: var(--occ-peach); text-decoration: none;
    font-family: 'Outfit', sans-serif; letter-spacing: 0.08em;
    text-transform: uppercase; font-size: 0.95rem;
}
.nav-link {
    color: var(--occ-silver); text-decoration: none;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
    transition: color var(--t-fast) ease; position: relative;
}
.nav-link:hover, .nav-link.active { color: var(--occ-amber); }
.nav-link::after {
    content: ''; position: absolute; bottom: -5px; left: 50%;
    width: 0; height: 1px; background: var(--occ-amber);
    transition: width var(--t-fast) ease; transform: translateX(-50%);
}
.nav-link:hover::after { width: 100%; }
.nav-cta {
    background: var(--occ-amber); color: var(--occ-ink) !important;
    padding: 0.5rem 1.2rem; border-radius: 4px; font-weight: 500;
}
.nav-cta::after { display: none; }

/* --- HERO (dark ink canvas) --- */
.hero {
    background:
        linear-gradient(100deg, rgba(14,20,32,0.96) 30%, rgba(14,20,32,0.55) 70%, rgba(14,20,32,0.35)),
        var(--occ-ink) url('/assets/hero-mitch.webp') center top/cover no-repeat;
    background-attachment: scroll, fixed;
    color: var(--occ-silver);
    padding: calc(var(--pum-action) + 3rem) 0 var(--pum-structure);
}
@media (max-width: 820px), (hover: none) {
    /* fixed backgrounds jank on mobile browsers; keep the top-anchored crop instead */
    .hero { background-attachment: scroll; background-position: center top; }
}
.hero h1 {
    color: #fff; font-size: clamp(2rem, 4.5vw, 3.333rem);
    line-height: 1.2; max-width: 21ch; margin: 0 0 var(--pum-base);
}
.hero h1 em { color: var(--occ-amber); font-style: normal; }
.hero-sub { max-width: 56ch; font-size: 1.1rem; margin-bottom: var(--pum-double); }

.btn {
    display: inline-block; text-decoration: none; cursor: pointer;
    border: none; border-radius: 4px;
    padding: var(--pum-base) var(--pum-double);
    font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase;
    transition: all var(--t-fast) cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary {
    background: var(--occ-amber); color: var(--occ-ink);
    box-shadow: 0 0 0 rgba(255, 218, 185, 0);
}
.btn-primary:hover {
    transform: scale(1.04);
    box-shadow: 0 0 22px rgba(232, 162, 61, 0.45);
    background: var(--occ-peach);
}
.btn-ghost {
    background: transparent; color: var(--occ-peach);
    border: 1px solid var(--occ-steel); margin-left: 1rem;
}
.btn-ghost:hover { border-color: var(--occ-peach); }

/* trust strip under hero CTA */
.trust-strip {
    display: flex; flex-wrap: wrap; gap: var(--pum-base) var(--pum-double);
    margin-top: var(--pum-double); padding-top: var(--pum-base);
    border-top: 1px solid rgba(255, 218, 185, 0.15);
    font-size: 0.9rem; color: var(--occ-steel);
}
.trust-strip strong { color: var(--occ-peach); font-weight: 700; }

/* --- STAT BAND (dark) --- */
.stat-band { background: var(--occ-slate); color: var(--occ-silver); padding: var(--pum-double) 0; }
.stat-band .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pum-base); }
.stat { text-align: center; }
.stat b { display: block; font-family: 'Outfit', sans-serif; font-size: 2.222rem; color: var(--occ-amber); }
.stat span { font-size: 0.85rem; }

/* --- LIGHT SECTIONS --- */
section.light { padding: var(--pum-structure) 0; }
section.light h2, .dark-band h2 {
    font-size: clamp(1.6rem, 3vw, 2.222rem); line-height: 1.25;
    margin: 0 0 var(--pum-base); color: var(--occ-char);
}
.kicker {
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem;
    color: var(--occ-amber); font-weight: 700; display: block; margin-bottom: 0.5rem;
}

.card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pum-base); margin-top: var(--pum-double);
}
.card {
    background: #fff; border: 1px solid #E7DFD2; border-radius: 6px;
    padding: var(--pum-double) var(--pum-base);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(14,20,32,0.08); }
.card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.card p { margin: 0; font-size: 0.95rem; color: #4A5568; }

/* process steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pum-base); margin-top: var(--pum-double); }
.step { position: relative; padding-left: 3.6rem; }
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0.1rem;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--occ-ink); color: var(--occ-amber);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif; font-size: 1.15rem;
}
.step h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.step p { margin: 0; font-size: 0.92rem; color: #4A5568; }

/* --- DARK CTA / HONESTY BANDS --- */
.dark-band { background: var(--occ-ink); color: var(--occ-silver); padding: var(--pum-structure) 0; }
.dark-band h2 { color: #fff; }
.dark-band .kicker { color: var(--occ-peach); }
.dark-band a:not(.btn) { color: var(--occ-peach); }
.honesty-list { list-style: none; padding: 0; margin: var(--pum-double) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pum-base); }
.honesty-list li {
    background: var(--occ-slate); border-left: 3px solid var(--occ-amber);
    padding: var(--pum-base); border-radius: 0 6px 6px 0; font-size: 0.95rem;
}
.honesty-list strong { color: var(--occ-peach); display: block; margin-bottom: 0.3rem; }

/* owner block */
.owner { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--pum-double); align-items: center; }
.owner img { border-radius: 8px; border: 1px solid rgba(255,218,185,0.2); }
@media (max-width: 720px) { .owner { grid-template-columns: 1fr; } }

/* --- QUOTE WIZARD --- */
.quote-section { background: var(--occ-ink); padding: var(--pum-structure) 0 var(--pum-action); color: var(--occ-silver); }
.wizard {
    background: var(--occ-slate); border: 1px solid rgba(232,162,61,0.25);
    border-radius: 8px; padding: var(--pum-double);
    max-width: 640px; margin: var(--pum-double) auto 0;
}
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: rise var(--t-entry) ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wizard h3 { color: #fff; margin-top: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: var(--pum-base) 0; }
.choice {
    background: var(--occ-ink); border: 1px solid var(--occ-steel);
    color: var(--occ-silver); padding: 0.9rem 0.6rem; border-radius: 6px;
    cursor: pointer; text-align: center; font-size: 0.9rem;
    transition: all var(--t-fast) ease;
}
.choice:hover, .choice.selected { border-color: var(--occ-amber); color: var(--occ-peach); background: rgba(232,162,61,0.08); }
.wizard input[type=text], .wizard input[type=tel], .wizard input[type=email], .wizard textarea {
    width: 100%; background: var(--occ-ink); color: #fff;
    border: 1px solid var(--occ-steel); border-radius: 6px;
    padding: 0.85rem; margin: 0.4rem 0 1rem; font-family: inherit; font-size: 1rem;
}
.wizard input:focus, .wizard textarea:focus { outline: none; border-color: var(--occ-amber); }
.wizard-nav { display: flex; justify-content: space-between; margin-top: var(--pum-base); }
.progress { height: 4px; background: var(--occ-ink); border-radius: 2px; margin-bottom: var(--pum-base); overflow: hidden; }
.progress b { display: block; height: 100%; background: var(--occ-amber); width: 33%; transition: width var(--t-fast) ease; }
.reply-promise { text-align: center; font-size: 0.85rem; color: var(--occ-steel); margin-top: var(--pum-base); }

/* --- GUIDE / HUB PAGES --- */
.page-hero { background: var(--occ-ink); color: var(--occ-silver); padding: calc(var(--pum-action) + 1rem) 0 var(--pum-double); }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.2; max-width: 26ch; margin: 0 0 0.8rem; }
.page-hero .kicker { color: var(--occ-peach); }
.crumbs { font-size: 0.8rem; margin-bottom: var(--pum-base); }
.crumbs a { color: var(--occ-steel); text-decoration: none; }
.crumbs a:hover { color: var(--occ-peach); }
.article { max-width: 780px; margin: 0 auto; padding: var(--pum-structure) var(--pum-base); }
.article h2 { font-size: 1.7rem; margin: var(--pum-double) 0 0.7rem; color: var(--occ-char); }
.article h3 { font-size: 1.2rem; margin: var(--pum-base) 0 0.4rem; }
.article p, .article li { font-size: 1.02rem; color: #333C4A; }
.article a { color: #A65E12; }
.callout {
    background: #fff; border-left: 4px solid var(--occ-amber);
    padding: var(--pum-base); border-radius: 0 6px 6px 0; margin: var(--pum-base) 0;
    box-shadow: 0 4px 16px rgba(14,20,32,0.05);
}
.spoke-list { list-style: none; padding: 0; }
.spoke-list li { padding: 0.8rem 0; border-bottom: 1px solid #E7DFD2; }
.spoke-list .soon { color: #8A93A3; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.5rem; }
.expert-quote {
    margin: var(--pum-double) 0; padding: var(--pum-base) var(--pum-double);
    background: var(--occ-ink); border-radius: 8px; color: var(--occ-silver);
    border-left: 4px solid var(--occ-amber);
}
.expert-quote p { color: var(--occ-peach) !important; font-size: 1.1rem !important; font-style: italic; margin: 0 0 0.6rem; }
.expert-quote cite { color: var(--occ-steel); font-style: normal; font-size: 0.85rem; }
.sources { font-size: 0.85rem; color: #5B6472; margin-top: var(--pum-double); border-top: 1px solid #E7DFD2; padding-top: var(--pum-base); }
.sources li { margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pum-base); }
.hub-cards .card a { text-decoration: none; color: inherit; }
.hub-cards .card h3 a { color: var(--occ-char); }

/* --- FOOTER --- */
footer { background: #0A0F19; color: var(--occ-steel); padding: var(--pum-double) 0; font-size: 0.85rem; }
footer a { color: var(--occ-silver); text-decoration: none; }
footer a:hover { color: var(--occ-peach); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pum-base); }

/* --- STICKY MOBILE BAR --- */
.sticky-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1001;
    display: none; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--occ-ink); border-top: 1px solid rgba(232,162,61,0.3);
}
.sticky-bar .sticky-call { background: var(--occ-ink); color: var(--occ-peach); }
.sticky-bar a {
    padding: 0.9rem; text-align: center; text-decoration: none;
    font-family: 'Outfit', sans-serif; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 0.9rem;
    background: var(--occ-amber); color: var(--occ-ink);
}
/* --- MOBILE NAV (hamburger, CSS-only checkbox pattern) --- */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; }


/* Data tables (StatCan / cost series) - added v1.9 */
.table-scroll { overflow-x: auto; margin: var(--pum-base) 0 var(--pum-double); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 30rem; }
.data-table caption { text-align: left; font-size: 0.85rem; color: #5B6472; padding-bottom: 0.5rem; }
.data-table th, .data-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #E7DFD2; text-align: left; }
.data-table thead th { font-family: 'Outfit', sans-serif; font-weight: 500; background: var(--occ-ink); color: var(--occ-peach); border-bottom: none; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:nth-child(even) td { background: rgba(14,20,32,0.025); }
.data-table .up { color: #A8541C; font-weight: 700; }
.data-table .flat { color: #5B6472; }


@media (max-width: 820px) {
    .sticky-bar { display: grid; }
    body { padding-bottom: 3.2rem; }
    /* Row 1: brand + burger + pinned CTA. Links collapse into a panel. */
    .main-nav {
        flex-wrap: wrap; justify-content: flex-start; align-items: center;
        gap: 0; padding: 0.7rem 0.9rem; overflow: visible;
    }
    .nav-brand {
        order: 0; flex: 0 1 auto; margin-right: auto;
        font-size: 0.7rem; letter-spacing: 0.02em; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    .nav-cta {
        order: 1; display: inline-block !important;
        padding: 0.35rem 0.5rem; font-size: 0.66rem; letter-spacing: 0.02em;
        margin-right: 0.4rem; white-space: nowrap; flex: none;
    }
    .nav-burger {
        order: 2; display: flex; flex-direction: column; justify-content: center;
        gap: 4px; width: 34px; height: 34px; padding: 6px;
        border: 1px solid rgba(232,162,61,0.45); border-radius: 6px;
    }
    .nav-burger span {
        display: block; height: 2px; width: 100%;
        background: var(--occ-peach); border-radius: 1px;
        transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
    }
    .main-nav .nav-link:not(.nav-cta) {
        order: 3; display: none; width: 100%;
        padding: 0.85rem 0.2rem; margin: 0;
        border-top: 1px solid rgba(255,218,185,0.12);
        font-size: 0.95rem;
    }
    .main-nav .nav-link::after { display: none; }
    .nav-toggle:checked ~ .nav-link:not(.nav-cta) { display: block; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* compact the hero trust strip */
    .trust-strip { gap: 0.55rem; font-size: 0.82rem; margin-top: 1.4rem; }
    /* tighter cards so long grids scan faster */
    .card { padding: 1.2rem 1rem; }
    .card p { font-size: 0.9rem; }
    .card-grid, .hub-cards { gap: 0.8rem; }
    .stat-band .wrap { gap: 1.4rem; }
    .stat span { font-size: 0.8rem; }
    .hero { padding-top: 6rem; }
    .page-hero { padding-top: 5.5rem; }
    .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
    .btn { display: block; text-align: center; margin: 0 0 0.8rem; }
    .btn-ghost { margin-left: 0; }
    .article { padding: var(--pum-double) var(--pum-base); }
    .expert-quote { padding: var(--pum-base); }
    .owner img { max-width: 320px; margin: 0 auto; }
    .wizard { padding: var(--pum-base); }
}