/* ==========================================================================
   I KNOW A GUY™
   Handyman + Home Repair
   Main Stylesheet
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    --paper: #f3ecdc;
    --paper-2: #e8deca;
    --paper-3: #d9cbb2;

    --ink: #171717;
    --ink-soft: #2a2926;
    --muted: #6b6458;

    --blue: #174d67;
    --blue-deep: #10384d;
    --blue-soft: #d7e6eb;

    --yellow: #f0c438;
    --yellow-soft: #f9e9a7;

    --red: #c53a2f;
    --red-deep: #962820;
    --red-soft: #f0d5cf;

    --white: #fffdf8;

    --line: rgba(23, 23, 23, 0.18);
    --line-strong: rgba(23, 23, 23, 0.38);

    --display:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        "Arial Narrow",
        sans-serif;

    --body:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    --mono:
        "Courier New",
        Courier,
        monospace;

    --max: 1480px;

    --page-pad:
        clamp(1rem, 3vw, 3rem);

    --section-y:
        clamp(4.8rem, 8vw, 8.5rem);

    --shadow-hard:
        7px 7px 0
        rgba(23, 23, 23, 0.92);

    --shadow-soft:
        0 24px 70px
        rgba(23, 23, 23, 0.16);
}


/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    margin: 0;

    color: var(--ink);

    background:
        linear-gradient(
            rgba(23, 23, 23, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 23, 23, 0.018) 1px,
            transparent 1px
        ),
        var(--paper);

    background-size:
        28px 28px,
        28px 28px,
        auto;

    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

img {
    display: block;

    width: 100%;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

::selection {
    color: var(--white);
    background: var(--blue);
}

.section-shell,
.header-inner,
.footer-inner,
.hero-inner,
.utility-inner,
.process-shell,
.house-rule-inner {
    width:
        min(
            calc(100% - (var(--page-pad) * 2)),
            var(--max)
        );

    margin-inline: auto;
}

.section-label {
    margin: 0;

    color: var(--red);

    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-label::before {
    content: "// ";
}


/* ==========================================================================
   03. HEADER
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    color: var(--ink);

    background:
        linear-gradient(
            180deg,
            rgba(243, 236, 220, 0.98),
            rgba(243, 236, 220, 0.94)
        );

    border-bottom: 2px solid var(--ink);

    backdrop-filter: blur(14px);
}

.header-inner {
    display: grid;

    grid-template-columns:
        minmax(240px, 0.8fr)
        minmax(420px, 1.35fr)
        auto;

    align-items: center;

    gap: 1.5rem;

    min-height: 78px;
}

.brand {
    display: inline-flex;

    align-items: center;

    gap: 0.85rem;

    min-width: 0;
}

.brand-mark {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 52px;
    aspect-ratio: 1;

    color: var(--white);
    background: var(--blue);

    border: 2px solid var(--ink);

    box-shadow:
        4px 4px 0
        var(--yellow);

    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 900;

    letter-spacing: 0.06em;

    transform: rotate(-2deg);
}

.brand-copy {
    display: grid;

    gap: 0.08rem;

    min-width: 0;
}

.brand-copy strong {
    font-family: var(--display);

    font-size:
        clamp(1.2rem, 1.7vw, 1.75rem);

    font-weight: 900;
    line-height: 0.9;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.brand-copy small {
    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.site-nav {
    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        clamp(1.1rem, 2.4vw, 2.6rem);
}

.site-nav a {
    position: relative;

    padding: 0.6rem 0;

    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.site-nav a::after {
    position: absolute;

    right: 0;
    bottom: 0.25rem;
    left: 0;

    height: 2px;

    content: "";

    background: var(--red);

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 160ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 0.8rem;
}

.header-cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0.72rem
        1rem;

    color: var(--white);
    background: var(--red);

    border:
        2px solid
        var(--ink);

    box-shadow:
        3px 3px 0
        var(--ink);

    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.header-cta:hover,
.header-cta:focus-visible {
    background: var(--blue);

    transform:
        translate(-2px, -2px);

    box-shadow:
        5px 5px 0
        var(--ink);
}

.menu-toggle {
    display: none;

    width: 46px;
    height: 44px;

    padding: 0.72rem;

    border:
        2px solid
        var(--ink);

    background:
        var(--yellow);

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    height: 2px;

    background: currentColor;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.menu-toggle span + span {
    margin-top: 5px;
}

.menu-toggle.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding:
        0.9rem
        1.35rem;

    border:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.055em;

    text-transform: uppercase;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.button:hover,
.button:focus-visible {
    transform:
        translate(-3px, -3px);
}

.button-primary {
    color: var(--white);
    background: var(--red);

    box-shadow:
        6px 6px 0
        var(--yellow);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--blue);

    box-shadow:
        8px 8px 0
        var(--yellow);
}

.button-secondary {
    color: var(--ink);
    background: var(--paper);

    box-shadow:
        6px 6px 0
        var(--ink);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    color: var(--white);
    background: var(--ink);
}


/* ==========================================================================
   05. HERO / OPEN WORK ORDER
   ========================================================================== */

.hero {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    color: var(--white);
    background: var(--ink);
}

.hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;

    content: "";

    background:
        linear-gradient(
            90deg,
            rgba(18, 18, 18, 0.96) 0%,
            rgba(18, 18, 18, 0.89) 35%,
            rgba(18, 18, 18, 0.5) 67%,
            rgba(18, 18, 18, 0.38) 100%
        );
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.hero-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 0.72fr);

    align-items: center;

    gap:
        clamp(3rem, 6vw, 7rem);

    min-height:
        min(
            820px,
            calc(100vh - 78px)
        );

    padding-block:
        clamp(4.5rem, 8vw, 7.5rem);
}

.hero-copy {
    max-width: 790px;
}

.hero-kicker {
    display: inline-flex;

    margin:
        0
        0
        clamp(1.5rem, 3vw, 2.3rem);

    padding:
        0.55rem
        0.72rem;

    color: var(--ink);
    background: var(--yellow);

    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transform:
        rotate(-1.4deg);
}

.hero h1 {
    margin: 0;

    font-family: var(--display);

    font-size:
        clamp(5.8rem, 10.5vw, 11rem);

    font-weight: 900;
    line-height: 0.72;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}

.hero h1 span {
    display: block;

    color: var(--yellow);
}

.hero-tagline {
    margin:
        clamp(1.5rem, 3vw, 2.2rem)
        0
        0;

    color: var(--paper);

    font-family: var(--mono);

    font-size:
        clamp(1rem, 1.6vw, 1.35rem);

    font-weight: 900;

    letter-spacing: 0.015em;

    text-transform: uppercase;
}

.hero-intro {
    max-width: 650px;

    margin:
        1.15rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.75);

    font-size:
        clamp(1rem, 1.4vw, 1.15rem);
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top:
        clamp(2rem, 4vw, 3rem);
}


/* ==========================================================================
   06. WORK TICKETS
   ========================================================================== */

.work-ticket,
.request-ticket {
    position: relative;

    color: var(--ink);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(23, 23, 23, 0.045) 0,
            rgba(23, 23, 23, 0.045) 1px,
            transparent 1px,
            transparent 31px
        ),
        var(--paper);

    border:
        2px solid
        var(--ink);

    box-shadow:
        var(--shadow-hard);

    transform:
        rotate(1.1deg);
}

.work-ticket::before,
.request-ticket::before {
    position: absolute;

    top: -12px;
    left: 50%;

    width: 92px;
    height: 24px;

    content: "";

    background:
        rgba(229, 216, 183, 0.86);

    border:
        1px solid
        rgba(23, 23, 23, 0.16);

    transform:
        translateX(-50%)
        rotate(-2deg);
}

.hero-ticket {
    width:
        min(100%, 520px);

    justify-self: end;

    padding:
        clamp(1.4rem, 3vw, 2rem);
}

.ticket-topline,
.request-ticket-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 0.75rem;

    border-bottom:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.ticket-topline strong {
    color: var(--red);
}

.ticket-heading {
    padding:
        1.4rem
        0
        1.1rem;

    border-bottom:
        1px dashed
        var(--line-strong);
}

.ticket-heading p {
    margin: 0;

    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.ticket-heading h2 {
    margin:
        0.25rem
        0
        0;

    font-family: var(--display);

    font-size:
        clamp(2.6rem, 4.6vw, 4.2rem);

    line-height: 0.86;

    letter-spacing: -0.035em;

    text-transform: uppercase;
}

.ticket-options {
    display: grid;

    margin-top: 0.6rem;
}

.ticket-option {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    align-items: center;

    gap: 0.75rem;

    min-height: 52px;

    padding:
        0.55rem
        0;

    border-bottom:
        1px dashed
        var(--line-strong);

    font-family: var(--mono);
    font-size: 0.72rem;

    letter-spacing: 0.01em;

    text-transform: uppercase;
}

.ticket-box {
    font-size: 1.2rem;
    line-height: 1;
}

.ticket-option-highlight {
    color: var(--blue);
}

.ticket-button,
.request-button {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 1.4rem;

    padding:
        1rem
        1.05rem;

    color: var(--white);
    background: var(--red);

    border:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    transition:
        background 160ms ease,
        transform 160ms ease;
}

.ticket-button:hover,
.ticket-button:focus-visible,
.request-button:hover,
.request-button:focus-visible {
    background: var(--blue);

    transform:
        translateY(-2px);
}

.ticket-note,
.request-note {
    margin:
        0.85rem
        0
        0;

    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1.5;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ==========================================================================
   07. UTILITY STRIP
   ========================================================================== */

.utility-strip {
    color: var(--ink);
    background: var(--yellow);

    border-top:
        2px solid
        var(--ink);

    border-bottom:
        2px solid
        var(--ink);
}

.utility-inner {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.utility-inner p {
    display: flex;

    align-items: center;

    gap: 0.7rem;

    min-height: 76px;

    margin: 0;

    padding:
        0.8rem
        clamp(0.8rem, 2vw, 1.4rem);

    border-right:
        1px solid
        rgba(23, 23, 23, 0.28);

    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 900;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.utility-inner p:first-child {
    padding-left: 0;
}

.utility-inner p:last-child {
    border-right: 0;
}

.utility-inner p span {
    color: var(--red);

    font-size: 0.58rem;
}


/* ==========================================================================
   08. HONEY-DO LIST / LEDGER
   ========================================================================== */

.list-section {
    padding:
        var(--section-y)
        0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            transparent
        );
}

.list-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    gap:
        clamp(2rem, 6vw, 7rem);

    align-items: end;
}

.list-heading .section-label {
    grid-column: 1 / -1;
}

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2,
.house-rule-inner h2 {
    margin:
        0.9rem
        0
        0;

    font-family: var(--display);

    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.list-heading h2 {
    font-size:
        clamp(4rem, 7.2vw, 7.4rem);
}

.list-heading h2 span,
.reports-intro h2 span,
.process-heading h2 span,
.trust-heading h2 span,
.recent-heading h2 span,
.severity-heading h2 span,
.reviews-heading h2 span,
.request-copy h2 span {
    display: block;

    color: var(--blue);
}

.list-heading > p:last-child {
    max-width: 470px;

    margin: 0;

    color: var(--muted);
}

.repair-ledger {
    margin-top:
        clamp(3rem, 6vw, 5rem);

    border:
        2px solid
        var(--ink);

    background: var(--white);

    box-shadow:
        var(--shadow-hard);
}

.ledger-header,
.ledger-row {
    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        minmax(190px, 0.34fr);

    align-items: center;
}

.ledger-header {
    min-height: 48px;

    color: var(--white);
    background: var(--ink);

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.ledger-header > * {
    padding:
        0.65rem
        1rem;
}

.ledger-row {
    min-height: 76px;

    border-top:
        1px dashed
        var(--line-strong);
}

.ledger-row:first-of-type {
    border-top: 0;
}

.ledger-row > * {
    padding:
        0.9rem
        1rem;
}

.ledger-number {
    color: var(--red);

    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 900;
}

.ledger-row strong {
    font-size:
        clamp(1rem, 1.7vw, 1.35rem);
}

.ledger-status {
    justify-self: start;

    padding:
        0.45rem
        0.6rem !important;

    color: var(--ink);
    background: var(--yellow);

    border:
        1px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 900;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transform:
        rotate(-1deg);
}

.ledger-row-featured {
    background: var(--blue-soft);
}

.ledger-row-featured .ledger-status {
    color: var(--white);
    background: var(--blue);
}

.list-footer {
    display: grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(0, 1fr);

    gap: 2rem;

    margin-top: 2rem;

    padding-top: 1.5rem;

    border-top:
        2px solid
        var(--ink);
}

.list-footer strong {
    font-family: var(--mono);
    font-size: 0.78rem;

    letter-spacing: 0.05em;
}

.list-footer p {
    margin: 0;

    color: var(--muted);

    font-style: italic;
}


/* ==========================================================================
   09. REPAIR REPORTS
   ========================================================================== */

.repair-reports {
    padding:
        var(--section-y)
        0;

    color: var(--paper);
    background: var(--ink);
}

.reports-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(260px, 0.55fr);

    align-items: end;

    gap:
        clamp(2rem, 6vw, 7rem);
}

.reports-intro .section-label {
    grid-column: 1 / -1;

    color: var(--yellow);
}

.reports-intro h2 {
    font-size:
        clamp(4rem, 7vw, 7.2rem);
}

.reports-intro h2 span {
    color: var(--yellow);
}

.reports-intro > p:last-child {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.68);
}

.repair-report {
    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(360px, 0.74fr);

    align-items: stretch;

    gap:
        clamp(2rem, 5vw, 5rem);

    margin-top:
        clamp(4rem, 8vw, 7rem);

    padding-top:
        clamp(2rem, 4vw, 3rem);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.18);
}

.report-door {
    grid-template-columns:
        minmax(360px, 0.74fr)
        minmax(0, 1.04fr);
}

.report-image {
    position: relative;

    min-height:
        clamp(420px, 48vw, 680px);

    overflow: hidden;

    border:
        2px solid
        var(--paper);

    box-shadow:
        10px 10px 0
        rgba(240, 196, 56, 0.92);
}

.report-door .report-image {
    box-shadow:
        10px 10px 0
        rgba(197, 58, 47, 0.95);
}

.report-fixture .report-image {
    box-shadow:
        10px 10px 0
        rgba(23, 77, 103, 0.95);
}

.report-image img {
    height: 100%;

    object-fit: cover;
}

.image-note {
    position: absolute;
    z-index: 2;

    display: inline-block;

    max-width:
        min(78%, 480px);

    padding:
        0.65rem
        0.8rem;

    color: var(--ink);

    border:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.3;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    box-shadow:
        4px 4px 0
        var(--ink);
}

.image-note-red {
    top: 1.3rem;
    right: 1.3rem;

    color: var(--white);
    background: var(--red);

    transform:
        rotate(2deg);
}

.image-note-blue {
    right: 1.3rem;
    bottom: 1.3rem;

    color: var(--white);
    background: var(--blue);

    transform:
        rotate(-2deg);
}

.image-note-yellow {
    top: 1.3rem;
    left: 1.3rem;

    background: var(--yellow);

    transform:
        rotate(-1.5deg);
}

.report-copy {
    display: flex;

    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.report-meta {
    display: flex;

    flex-wrap: wrap;
    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 0.7rem;

    border-bottom:
        1px dashed
        rgba(255, 255, 255, 0.28);

    color:
        rgba(255, 255, 255, 0.56);

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.report-copy h3 {
    margin:
        1.6rem
        0
        0;

    font-family: var(--display);

    font-size:
        clamp(3.4rem, 5.5vw, 5.8rem);

    font-weight: 900;
    line-height: 0.82;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.report-copy h3 span {
    display: block;

    color: var(--yellow);
}

.report-copy > p:not(.report-footnote) {
    margin:
        1.3rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.72);
}

.report-list {
    display: grid;

    gap: 0.6rem;

    margin:
        1.5rem
        0
        0;

    padding: 0;

    list-style: none;
}

.report-list li {
    position: relative;

    padding-left: 1.5rem;

    color: var(--paper);

    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.02em;

    text-transform: uppercase;
}

.report-list li::before {
    position: absolute;
    left: 0;

    content: "✓";

    color: var(--yellow);
}

.report-footnote {
    margin:
        1.7rem
        0
        0;

    padding:
        0.7rem
        0.8rem;

    color: var(--ink);
    background: var(--paper);

    border-left:
        7px solid
        var(--red);

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.45;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   10. PROCESS / RECEIPT
   ========================================================================== */

.process-section {
    padding:
        var(--section-y)
        0;

    background:
        linear-gradient(
            180deg,
            var(--blue-soft),
            var(--paper)
        );
}

.process-shell {
    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(520px, 1fr);

    align-items: start;

    gap:
        clamp(3rem, 7vw, 8rem);
}

.process-heading {
    position: sticky;

    top: 120px;
}

.process-heading h2 {
    font-size:
        clamp(4rem, 6.8vw, 7rem);
}

.process-heading > p:last-child {
    max-width: 470px;

    color: var(--muted);
}

.process-receipt {
    position: relative;

    padding:
        clamp(1.5rem, 3vw, 2.2rem);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(23, 23, 23, 0.045) 0,
            rgba(23, 23, 23, 0.045) 1px,
            transparent 1px,
            transparent 30px
        ),
        var(--white);

    border:
        2px solid
        var(--ink);

    box-shadow:
        var(--shadow-hard);
}

.process-receipt::after {
    position: absolute;

    right: 0;
    bottom: -15px;
    left: 0;

    height: 16px;

    content: "";

    background:
        linear-gradient(
            -45deg,
            transparent 8px,
            var(--white) 0
        )
        0 0 / 16px 16px repeat-x;
}

.receipt-top,
.receipt-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.receipt-top {
    padding-bottom: 0.9rem;

    border-bottom:
        2px solid
        var(--ink);
}

.process-step {
    display: grid;

    grid-template-columns:
        74px
        minmax(0, 1fr);

    gap: 1.2rem;

    padding:
        1.4rem
        0;

    border-bottom:
        1px dashed
        var(--line-strong);
}

.step-number {
    display: grid;
    place-items: center;

    width: 56px;
    aspect-ratio: 1;

    color: var(--white);
    background: var(--blue);

    border:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 900;

    transform:
        rotate(-2deg);
}

.process-step:nth-of-type(even) .step-number {
    background: var(--red);

    transform:
        rotate(2deg);
}

.process-step h3 {
    margin: 0;

    font-family: var(--display);

    font-size:
        clamp(1.8rem, 3vw, 2.8rem);

    line-height: 0.9;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.process-step p {
    margin:
        0.55rem
        0
        0;

    color: var(--muted);
}

.receipt-bottom {
    margin-top: 1.25rem;

    padding-top: 1rem;

    border-top:
        2px solid
        var(--ink);
}

.receipt-bottom strong {
    color: var(--red);
}


/* ==========================================================================
   11. TRUST / CREDENTIAL BELT
   ========================================================================== */

.trust-section {
    padding:
        var(--section-y)
        0;

    color: var(--paper);
    background: var(--blue-deep);
}

.trust-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, 0.55fr);

    align-items: end;

    gap:
        clamp(2rem, 6vw, 6rem);
}

.trust-heading .section-label {
    grid-column: 1 / -1;

    color: var(--yellow);
}

.trust-heading h2 {
    font-size:
        clamp(4rem, 7vw, 7.2rem);
}

.trust-heading h2 span {
    color: var(--yellow);
}

.trust-heading > p:last-child {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.7);
}

.credential-belt {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;

    margin-top:
        clamp(3rem, 6vw, 5rem);
}

.credential {
    position: relative;

    min-height: 210px;

    padding: 1.4rem;

    border:
        2px solid
        var(--paper);

    box-shadow:
        6px 6px 0
        rgba(0, 0, 0, 0.55);
}

.credential::before {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 10px;
    aspect-ratio: 1;

    content: "";

    background: var(--paper);

    border-radius: 50%;
}

.credential > span {
    display: block;

    margin-bottom: 2.8rem;

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;
}

.credential strong {
    display: block;

    font-family: var(--display);

    font-size:
        clamp(1.8rem, 2.5vw, 2.6rem);

    line-height: 0.88;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.credential p {
    margin:
        0.8rem
        0
        0;

    font-size: 0.86rem;
    line-height: 1.45;
}

.credential-blue {
    background: var(--blue);
}

.credential-yellow {
    color: var(--ink);
    background: var(--yellow);
}

.credential-yellow::before {
    background: var(--ink);
}

.credential-red {
    background: var(--red);
}

.credential-dark {
    background: var(--ink);
}

.trust-disclaimer {
    margin:
        1.5rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.55);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ==========================================================================
   12. RECENT FIX / JOB SHEET
   ========================================================================== */

.recent-fixes {
    padding:
        var(--section-y)
        0;

    background: var(--paper);
}

.recent-heading {
    max-width: 920px;
}

.recent-heading h2 {
    font-size:
        clamp(4rem, 7vw, 7rem);
}

.recent-heading > p:last-child {
    max-width: 560px;

    color: var(--muted);
}

.job-sheet {
    margin-top:
        clamp(3rem, 6vw, 5rem);

    padding:
        clamp(1.3rem, 3vw, 2rem);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(23, 23, 23, 0.04) 0,
            rgba(23, 23, 23, 0.04) 1px,
            transparent 1px,
            transparent 32px
        ),
        var(--white);

    border:
        2px solid
        var(--ink);

    box-shadow:
        var(--shadow-hard);
}

.job-sheet-header {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;

    padding-bottom: 1rem;

    border-bottom:
        2px solid
        var(--ink);
}

.job-sheet-header div {
    display: grid;

    gap: 0.2rem;
}

.job-sheet-header span,
.job-sheet-notes span {
    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 900;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.job-sheet-header strong {
    font-family: var(--mono);
    font-size: 0.78rem;
}

.status-closed {
    color: var(--red);
}

.job-photos {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(1.2rem, 3vw, 2rem);

    margin-top: 1.8rem;
}

.job-photo {
    position: relative;

    margin: 0;

    border:
        2px solid
        var(--ink);

    background:
        var(--paper-2);

    box-shadow:
        5px 5px 0
        rgba(23, 23, 23, 0.85);
}

.job-before {
    transform:
        rotate(-1.4deg);
}

.job-after {
    transform:
        rotate(1.1deg);
}

.job-photo img {
    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-bottom:
        2px solid
        var(--ink);
}

.job-photo figcaption {
    padding: 1rem;
}

.job-photo figcaption > span {
    display: inline-block;

    margin-bottom: 0.7rem;

    padding:
        0.35rem
        0.5rem;

    color: var(--white);
    background: var(--blue);

    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 900;

    letter-spacing: 0.05em;
}

.job-after figcaption > span {
    background: var(--red);
}

.job-photo figcaption strong {
    display: block;

    font-family: var(--mono);
    font-size: 0.6rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.job-photo figcaption p {
    margin:
        0.45rem
        0
        0;

    color: var(--muted);

    font-style: italic;
}

.job-sheet-notes {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.42fr);

    gap: 2rem;

    margin-top: 2rem;

    padding-top: 1.4rem;

    border-top:
        1px dashed
        var(--line-strong);
}

.job-sheet-notes p {
    margin:
        0.45rem
        0
        0;
}

.job-sheet-notes strong {
    display: inline-block;

    margin-top: 0.45rem;

    padding:
        0.45rem
        0.6rem;

    color: var(--white);
    background: var(--red);

    font-family: var(--mono);
    font-size: 0.6rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    transform:
        rotate(-1deg);
}


/* ==========================================================================
   13. SEVERITY SCALE
   ========================================================================== */

.severity-section {
    padding:
        var(--section-y)
        0;

    color: var(--paper);
    background: var(--ink);
}

.severity-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.56fr)
        minmax(0, 1fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: start;
}

.severity-heading {
    position: sticky;

    top: 120px;
}

.severity-heading .section-label {
    color: var(--yellow);
}

.severity-heading h2 {
    font-size:
        clamp(4rem, 6vw, 6.2rem);
}

.severity-heading h2 span {
    color: var(--yellow);
}

.severity-heading > p:last-child {
    color:
        rgba(255, 255, 255, 0.68);
}

.severity-scale {
    border:
        2px solid
        rgba(255, 255, 255, 0.6);
}

.severity-row {
    display: grid;

    grid-template-columns:
        74px
        minmax(0, 1fr)
        minmax(130px, 0.25fr);

    align-items: center;

    gap: 1rem;

    min-height: 130px;

    padding:
        1.1rem
        1.2rem;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.2);
}

.severity-row:last-child {
    border-bottom: 0;
}

.severity-number {
    display: grid;
    place-items: center;

    width: 54px;
    aspect-ratio: 1;

    color: var(--ink);
    background: var(--yellow);

    border:
        2px solid
        var(--paper);

    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 900;

    transform:
        rotate(-2deg);
}

.severity-copy h3 {
    margin: 0;

    font-family: var(--display);

    font-size:
        clamp(1.9rem, 3.2vw, 3.1rem);

    line-height: 0.9;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.severity-copy p {
    margin:
        0.45rem
        0
        0;

    color:
        rgba(255, 255, 255, 0.62);
}

.severity-status {
    justify-self: end;

    padding:
        0.42rem
        0.55rem;

    color: var(--ink);
    background: var(--paper);

    font-family: var(--mono);
    font-size: 0.55rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.severity-row-danger {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(197, 58, 47, 0.3),
            rgba(197, 58, 47, 0.3) 10px,
            transparent 10px,
            transparent 20px
        );
}

.severity-row-danger .severity-number {
    color: var(--white);
    background: var(--red);
}

.severity-row-danger .severity-status {
    color: var(--white);
    background: var(--red);
}


/* ==========================================================================
   14. REVIEWS / COMPLETION NOTES
   ========================================================================== */

.reviews-section {
    padding:
        var(--section-y)
        0;

    background:
        linear-gradient(
            180deg,
            var(--paper),
            var(--paper-2)
        );
}

.reviews-heading {
    max-width: 950px;
}

.reviews-heading h2 {
    font-size:
        clamp(4rem, 7vw, 7rem);
}

.reviews-heading > p:last-child {
    max-width: 560px;

    color: var(--muted);
}

.review-stack {
    display: grid;

    gap:
        clamp(1rem, 2.5vw, 1.8rem);

    margin-top:
        clamp(3rem, 6vw, 5rem);
}

.review-note {
    position: relative;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        minmax(210px, 0.32fr);

    align-items: center;

    gap:
        clamp(1.2rem, 3vw, 2.4rem);

    margin: 0;

    padding:
        clamp(1.3rem, 2.8vw, 2rem);

    background: var(--white);

    border:
        2px solid
        var(--ink);

    box-shadow:
        5px 5px 0
        rgba(23, 23, 23, 0.85);
}

.review-note-one {
    transform:
        rotate(-0.45deg);
}

.review-note-two {
    transform:
        rotate(0.35deg);
}

.review-note-three {
    transform:
        rotate(-0.25deg);
}

.review-check {
    display: grid;
    place-items: center;

    width: 58px;
    aspect-ratio: 1;

    color: var(--white);
    background: var(--blue);

    border:
        2px solid
        var(--ink);

    font-size: 1.5rem;

    transform:
        rotate(-3deg);
}

.review-note:nth-child(2) .review-check {
    background: var(--red);
}

.review-note:nth-child(3) .review-check {
    color: var(--ink);
    background: var(--yellow);
}

.review-note p {
    margin: 0;

    font-family: var(--display);

    font-size:
        clamp(1.8rem, 3.2vw, 3.15rem);

    line-height: 0.9;

    letter-spacing: -0.025em;

    text-transform: uppercase;
}

.review-note footer {
    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 1.5;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ==========================================================================
   15. HOUSE RULE
   ========================================================================== */

.house-rule {
    overflow: hidden;

    color: var(--white);
    background: var(--red-deep);
}

.house-rule-tape {
    display: flex;

    gap: 3rem;

    width: max-content;

    padding:
        0.8rem
        0;

    color: var(--ink);

    background:
        repeating-linear-gradient(
            -45deg,
            var(--yellow) 0,
            var(--yellow) 18px,
            #e1b42e 18px,
            #e1b42e 36px
        );

    border-top:
        2px solid
        var(--ink);

    border-bottom:
        2px solid
        var(--ink);

    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 900;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transform:
        translateX(-2%)
        rotate(-1deg);
}

.house-rule-tape span {
    white-space: nowrap;
}

.house-rule-inner {
    padding-block:
        clamp(4.5rem, 8vw, 7.5rem);
}

.house-rule-inner .section-label {
    color: var(--yellow);
}

.house-rule-inner h2 {
    max-width: 1150px;

    font-size:
        clamp(4rem, 8.4vw, 8.5rem);
}

.house-rule-inner h2 span {
    display: block;

    color: var(--yellow);
}

.house-rule-inner > p:not(.section-label) {
    margin:
        1.8rem
        0
        0;

    font-family: var(--mono);

    font-size:
        clamp(1rem, 1.7vw, 1.4rem);

    font-weight: 900;

    text-transform: uppercase;
}

.house-rule-signoff {
    display: block;

    margin-top: 1.1rem;

    color:
        rgba(255, 255, 255, 0.58);

    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================================
   16. REQUEST / FINAL WORK ORDER
   ========================================================================== */

.request-section {
    padding:
        var(--section-y)
        0;

    background:
        linear-gradient(
            135deg,
            var(--paper) 0%,
            var(--paper) 72%,
            var(--yellow-soft) 72%,
            var(--yellow-soft) 100%
        );
}

.request-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(460px, 0.72fr);

    align-items: center;

    gap:
        clamp(3rem, 7vw, 8rem);
}

.request-copy h2 {
    font-size:
        clamp(4rem, 7vw, 7rem);
}

.request-lead {
    margin:
        1.5rem
        0
        0;

    color: var(--red);

    font-family: var(--mono);

    font-size:
        clamp(1rem, 1.5vw, 1.25rem);

    font-weight: 900;

    text-transform: uppercase;
}

.request-copy > p:last-child {
    max-width: 600px;

    color: var(--muted);
}

.request-ticket {
    padding:
        clamp(1.4rem, 3vw, 2rem);
}

.request-priority {
    padding:
        0.35rem
        0.45rem;

    color: var(--white);
    background: var(--red);

    border:
        1px solid
        var(--ink);
}

.request-line {
    display: grid;

    grid-template-columns:
        minmax(120px, 0.35fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 1rem;

    min-height: 72px;

    border-bottom:
        1px dashed
        var(--line-strong);
}

.request-line span {
    color: var(--muted);

    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.request-line strong {
    font-family: var(--mono);
    font-size: 0.68rem;

    text-transform: uppercase;
}

.request-line-photo strong {
    color: var(--blue);
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer {
    color: var(--paper);
    background: var(--ink);

    border-top:
        2px solid
        var(--yellow);
}

.footer-inner {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(0, 1fr);

    gap:
        2rem
        4rem;

    padding-block:
        2.5rem;
}

.footer-brand {
    display: grid;

    gap: 0.35rem;
}

.footer-brand strong {
    font-family: var(--display);

    font-size:
        clamp(2rem, 3.4vw, 3.2rem);

    line-height: 0.85;

    text-transform: uppercase;
}

.footer-brand span {
    color:
        rgba(255, 255, 255, 0.55);

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.footer-links {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap:
        1rem
        2rem;
}

.footer-links a {
    color:
        rgba(255, 255, 255, 0.72);

    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--yellow);
}

.footer-meta {
    grid-column: 1 / -1;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 1rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);

    color:
        rgba(255, 255, 255, 0.42);

    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ==========================================================================
   18. FOCUS STATES
   ========================================================================== */

a:focus-visible,
button:focus-visible {
    outline:
        3px solid
        var(--yellow);

    outline-offset: 4px;
}


/* ==========================================================================
   19. LARGE TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1180px) {

    .header-inner {
        grid-template-columns:
            minmax(220px, 0.8fr)
            minmax(360px, 1fr)
            auto;
    }

    .site-nav {
        gap:
            clamp(0.8rem, 1.6vw, 1.4rem);
    }

    .site-nav a {
        font-size: 0.56rem;
    }

    .hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.72fr);

        gap: 3rem;
    }

    .credential-belt {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   20. TABLET / MOBILE NAV
   ========================================================================== */

@media (max-width: 980px) {

    html {
        scroll-padding-top: 72px;
    }

    .header-inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        min-height: 70px;
    }

    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .site-nav {
        position: fixed;

        top: 70px;
        right: 0;
        left: 0;
        z-index: 99;

        display: grid;

        max-height: 0;

        overflow: hidden;

        visibility: hidden;
        opacity: 0;

        color: var(--ink);
        background: var(--paper);

        border-bottom:
            2px solid
            var(--ink);

        transition:
            max-height 220ms ease,
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .site-nav.is-open {
        max-height: 420px;

        visibility: visible;
        opacity: 1;
    }

    .site-nav a {
        padding:
            1rem
            var(--page-pad);

        border-top:
            1px solid
            var(--line);
    }

    .site-nav a::after {
        display: none;
    }

    .hero-inner {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(18, 18, 18, 0.94) 0%,
                rgba(18, 18, 18, 0.8) 62%,
                rgba(18, 18, 18, 0.76) 100%
            );
    }

    .hero-ticket {
        width:
            min(100%, 680px);

        justify-self: start;
    }

    .utility-inner {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .utility-inner p {
        border-bottom:
            1px solid
            rgba(23, 23, 23, 0.25);
    }

    .utility-inner p:nth-child(2) {
        border-right: 0;
    }

    .utility-inner p:nth-child(3),
    .utility-inner p:nth-child(4) {
        border-bottom: 0;
    }

    .list-heading,
    .reports-intro,
    .trust-heading {
        display: block;
    }

    .list-heading > p:last-child,
    .reports-intro > p:last-child,
    .trust-heading > p:last-child {
        max-width: 680px;

        margin-top: 1.35rem;
    }

    .repair-report,
    .report-door {
        grid-template-columns: 1fr;
    }

    .report-door .report-copy {
        order: 2;
    }

    .report-door .report-image {
        order: 1;
    }

    .report-image {
        min-height:
            clamp(380px, 72vw, 640px);
    }

    .process-shell,
    .severity-layout,
    .request-layout {
        grid-template-columns: 1fr;
    }

    .process-heading,
    .severity-heading {
        position: static;
    }

    .process-receipt,
    .request-ticket {
        width:
            min(100%, 760px);
    }

    .job-sheet-notes {
        grid-template-columns: 1fr;
    }

    .review-note {
        grid-template-columns:
            64px
            minmax(0, 1fr);
    }

    .review-note footer {
        grid-column: 2;
    }

}


/* ==========================================================================
   21. MOBILE
   ========================================================================== */

@media (max-width: 680px) {

    :root {
        --page-pad: 1rem;
        --section-y: 4.5rem;
    }

    .brand-copy small {
        display: none;
    }

    .brand-mark {
        width: 46px;
    }

    .brand-copy strong {
        font-size: 1.05rem;
    }

    .hero-inner {
        gap: 2.5rem;

        padding-block:
            3.5rem
            4rem;
    }

    .hero h1 {
        font-size:
            clamp(4.9rem, 22vw, 7rem);
    }

    .hero-tagline {
        font-size: 0.9rem;
    }

    .hero-actions {
        display: grid;
    }

    .button {
        width: 100%;
    }

    .hero-ticket {
        padding: 1.1rem;
    }

    .ticket-heading h2 {
        font-size:
            clamp(2.3rem, 12vw, 3.4rem);
    }

    .utility-inner {
        grid-template-columns: 1fr;
    }

    .utility-inner p {
        min-height: 58px;

        padding-inline: 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(23, 23, 23, 0.25);
    }

    .utility-inner p:nth-child(3) {
        border-bottom:
            1px solid
            rgba(23, 23, 23, 0.25);
    }

    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2 {
        font-size:
            clamp(3.35rem, 16vw, 5rem);
    }

    .ledger-header {
        display: none;
    }

    .ledger-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            0
            0.6rem;

        padding:
            0.9rem
            0.8rem;
    }

    .ledger-row > * {
        padding: 0;
    }

    .ledger-number {
        grid-row: 1 / span 2;
    }

    .ledger-status {
        grid-column: 2;

        width: fit-content;

        margin-top: 0.5rem;

        padding:
            0.35rem
            0.45rem !important;
    }

    .list-footer {
        grid-template-columns: 1fr;

        gap: 0.6rem;
    }

    .repair-report {
        gap: 2rem;

        margin-top: 3.5rem;
    }

    .report-image {
        min-height: 340px;
    }

    .report-copy h3 {
        font-size:
            clamp(3.2rem, 15vw, 4.8rem);
    }

    .image-note {
        max-width: 85%;

        font-size: 0.52rem;
    }

    .process-receipt {
        padding: 1.1rem;
    }

    .process-step {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap: 0.8rem;
    }

    .step-number {
        width: 44px;
    }

    .process-step h3 {
        font-size:
            clamp(1.7rem, 8vw, 2.4rem);
    }

    .credential-belt {
        grid-template-columns: 1fr;
    }

    .credential {
        min-height: 180px;
    }

    .job-sheet {
        padding: 1rem;
    }

    .job-sheet-header {
        grid-template-columns: 1fr;

        gap: 0.8rem;
    }

    .job-photos {
        grid-template-columns: 1fr;
    }

    .job-before,
    .job-after {
        transform: none;
    }

    .severity-row {
        grid-template-columns:
            56px
            minmax(0, 1fr);

        gap:
            0.7rem
            1rem;

        min-height: 0;

        padding: 1rem;
    }

    .severity-number {
        width: 46px;
    }

    .severity-status {
        grid-column: 2;

        justify-self: start;
    }

    .review-note {
        grid-template-columns: 1fr;

        gap: 1rem;

        transform: none;
    }

    .review-check {
        width: 48px;
    }

    .review-note footer {
        grid-column: auto;
    }

    .house-rule-tape {
        gap: 2rem;
    }

    .house-rule-inner h2 {
        font-size:
            clamp(3.7rem, 17vw, 5.7rem);
    }

    .request-section {
        background: var(--paper);
    }

    .request-ticket {
        padding: 1.1rem;
    }

    .request-line {
        grid-template-columns: 1fr;

        gap: 0.3rem;

        padding:
            0.8rem
            0;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .footer-meta {
        grid-column: auto;

        display: grid;
    }

}


/* ==========================================================================
   22. SMALL MOBILE
   ========================================================================== */

@media (max-width: 390px) {

    .hero h1 {
        font-size: 4.6rem;
    }

    .brand-copy strong {
        font-size: 0.95rem;
    }

    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2 {
        font-size: 3.15rem;
    }

    .report-copy h3 {
        font-size: 3rem;
    }

    .house-rule-inner h2 {
        font-size: 3.45rem;
    }

}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.001ms !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* IKG DESKTOP STRUCTURE POLISH — V2 */


/* ==========================================================================
   CREDENTIAL BELT

   Keep this as a true horizontal contractor credential strip on desktop.
   Do not let it turn into a generic 2x2 card grid at laptop widths.
   ========================================================================== */

@media (min-width: 981px) {

    .credential-belt {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 0.75rem;
    }

    .credential {
        min-width: 0;
        min-height: 235px;

        padding:
            1.2rem
            1rem;
    }

    .credential strong {
        font-size:
            clamp(1.5rem, 2.15vw, 2.35rem);

        overflow-wrap: normal;
        word-break: normal;
    }

    .credential p {
        font-size: 0.8rem;
    }

}


/* Tablet becomes the intentional 2x2 layout. */

@media (max-width: 980px) and (min-width: 681px) {

    .credential-belt {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   HOUSE RULE TAPE

   Force the strip to travel fully across the viewport.
   ========================================================================== */

.house-rule-tape {
    width: 104%;
    min-width: 104%;

    justify-content: space-around;

    padding-inline:
        1.5rem;

    transform:
        translateX(-2%)
        rotate(-1deg);
}

.house-rule-tape span {
    flex: 0 0 auto;
}


/* Mobile still gets a full-width strip without horizontal overflow. */

@media (max-width: 680px) {

    .house-rule-tape {
        width: 108%;
        min-width: 108%;

        gap: 1.5rem;

        padding-inline:
            1rem;

        transform:
            translateX(-4%)
            rotate(-1deg);
    }

}


/* END IKG DESKTOP STRUCTURE POLISH — V2 */


/* IKG HEADING SPACING FIX — V3 */


/* ==========================================================================
   HERO

   Keep the giant poster typography, but stop I KNOW / A GUY
   from physically colliding.
   ========================================================================== */

.hero h1 {
    line-height: 0.84;
}

.hero h1 span {
    margin-top: 0.08em;
}


/* ==========================================================================
   LARGE SECTION HEADINGS

   These should feel tight and industrial, not smashed together.
   ========================================================================== */

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2 {
    line-height: 0.91;
}


/* Add deliberate breathing room before the colored second line. */

.list-heading h2 span,
.reports-intro h2 span,
.process-heading h2 span,
.trust-heading h2 span,
.recent-heading h2 span,
.severity-heading h2 span,
.reviews-heading h2 span,
.request-copy h2 span {
    margin-top: 0.075em;
}


/* ==========================================================================
   HOUSE RULE

   Three huge lines need slightly more room than two-line headings.
   ========================================================================== */

.house-rule-inner h2 {
    line-height: 0.92;
}

.house-rule-inner h2 span {
    margin-top: 0.075em;
    margin-bottom: 0.075em;
}


/* ==========================================================================
   MOBILE

   Preserve the tighter poster feel, but never overlap.
   ========================================================================== */

@media (max-width: 680px) {

    .hero h1 {
        line-height: 0.88;
    }

    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2,
    .house-rule-inner h2 {
        line-height: 0.94;
    }

}


/* END IKG HEADING SPACING FIX — V3 */


/* IKG REPORT HEADING SPACING — V4 */


/* ==========================================================================
   REPAIR REPORT HEADLINES

   These were still using the original 0.82 line-height.
   Give each stacked phrase a clearly separated second line.
   ========================================================================== */

.report-copy h3 {
    line-height: 1;
}


/* Colored second line gets deliberate separation. */

.report-copy h3 span {
    display: block;

    margin-top: 0.14em;
}


/* Mobile needs the same treatment. */

@media (max-width: 680px) {

    .report-copy h3 {
        line-height: 1.02;
    }

    .report-copy h3 span {
        margin-top: 0.16em;
    }

}


/* END IKG REPORT HEADING SPACING — V4 */


/* IKG GLOBAL TYPOGRAPHY RESET — V5 */


/* ==========================================================================
   GLOBAL DISPLAY TYPOGRAPHY

   Previous typography was intentionally compressed too far.
   This resets the whole system for readability while keeping the
   industrial / contractor-poster personality.
   ========================================================================== */


/* HERO --------------------------------------------------------------- */

.hero h1 {
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
}

.hero h1 span {
    display: block !important;
    margin-top: 0.14em !important;
}


/* MAIN SECTION HEADLINES --------------------------------------------- */

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2 {
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
}

.list-heading h2 span,
.reports-intro h2 span,
.process-heading h2 span,
.trust-heading h2 span,
.recent-heading h2 span,
.severity-heading h2 span,
.reviews-heading h2 span,
.request-copy h2 span {
    display: block !important;

    margin-top: 0.16em !important;
}


/* REPAIR REPORT HEADLINES ------------------------------------------- */

.report-copy h3 {
    line-height: 1.06 !important;
    letter-spacing: -0.018em !important;
}

.report-copy h3 span {
    display: block !important;

    margin-top: 0.18em !important;
}


/* PROCESS STEP HEADLINES -------------------------------------------- */

.process-step h3 {
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
}


/* CREDENTIAL LABELS ------------------------------------------------- */

.credential strong {
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
}


/* SEVERITY SCALE ---------------------------------------------------- */

.severity-copy h3 {
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
}


/* CUSTOMER REVIEW HEADLINES ---------------------------------------- */

.review-note p {
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
}


/* HOUSE RULE -------------------------------------------------------- */

.house-rule-inner h2 {
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
}

.house-rule-inner h2 span {
    display: block !important;

    margin-top: 0.16em !important;
    margin-bottom: 0.16em !important;
}


/* FOOTER BRAND ------------------------------------------------------ */

.footer-brand strong {
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
}


/* ==========================================================================
   MOBILE

   Do NOT squeeze typography back together on phones.
   ========================================================================== */

@media (max-width: 680px) {

    .hero h1 {
        line-height: 1.02 !important;
        letter-spacing: -0.018em !important;
    }

    .hero h1 span {
        margin-top: 0.16em !important;
    }


    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2,
    .house-rule-inner h2 {
        line-height: 1.06 !important;
        letter-spacing: -0.015em !important;
    }


    .list-heading h2 span,
    .reports-intro h2 span,
    .process-heading h2 span,
    .trust-heading h2 span,
    .recent-heading h2 span,
    .severity-heading h2 span,
    .reviews-heading h2 span,
    .request-copy h2 span,
    .house-rule-inner h2 span {
        margin-top: 0.18em !important;
    }


    .report-copy h3 {
        line-height: 1.08 !important;
        letter-spacing: -0.012em !important;
    }

    .report-copy h3 span {
        margin-top: 0.2em !important;
    }


    .process-step h3,
    .credential strong,
    .severity-copy h3,
    .review-note p {
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
    }

}


/* END IKG GLOBAL TYPOGRAPHY RESET — V5 */


/* IKG HARD LINE GAP — V7 */


/* ==========================================================================
   FORCE REAL PHYSICAL SPACE BETWEEN STACKED DISPLAY LINES

   Padding is intentional here. Unlike the previous margin/line-height
   tweaks, this creates guaranteed visible space above the second line.
   ========================================================================== */


/* HERO */

.hero h1 {
    line-height: 1 !important;
}

.hero h1 span {
    display: block !important;

    margin-top: 0 !important;
    padding-top: 0.22em !important;
}


/* LARGE SECTION HEADINGS */

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2 {
    line-height: 1 !important;
}

.list-heading h2 span,
.reports-intro h2 span,
.process-heading h2 span,
.trust-heading h2 span,
.recent-heading h2 span,
.severity-heading h2 span,
.reviews-heading h2 span,
.request-copy h2 span {
    display: block !important;

    margin-top: 0 !important;
    padding-top: 0.24em !important;
}


/* REPAIR REPORT HEADINGS */

.report-copy h3 {
    line-height: 1 !important;
}

.report-copy h3 span {
    display: block !important;

    margin-top: 0 !important;
    padding-top: 0.24em !important;
}


/* HOUSE RULE */

.house-rule-inner h2 {
    line-height: 1 !important;
}

.house-rule-inner h2 span {
    display: block !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0.24em !important;
    padding-bottom: 0.08em !important;
}


/* MOBILE */

@media (max-width: 680px) {

    .hero h1 span {
        padding-top: 0.25em !important;
    }

    .list-heading h2 span,
    .reports-intro h2 span,
    .process-heading h2 span,
    .trust-heading h2 span,
    .recent-heading h2 span,
    .severity-heading h2 span,
    .reviews-heading h2 span,
    .request-copy h2 span,
    .report-copy h3 span,
    .house-rule-inner h2 span {
        padding-top: 0.27em !important;
    }

}


/* END IKG HARD LINE GAP — V7 */


/* IKG FINAL LINE GAP NUDGE — V8 */

.hero h1 span {
    padding-top: 0.28em !important;
}

.list-heading h2 span,
.reports-intro h2 span,
.process-heading h2 span,
.trust-heading h2 span,
.recent-heading h2 span,
.severity-heading h2 span,
.reviews-heading h2 span,
.request-copy h2 span,
.report-copy h3 span,
.house-rule-inner h2 span {
    padding-top: 0.30em !important;
}

@media (max-width: 680px) {

    .hero h1 span {
        padding-top: 0.30em !important;
    }

    .list-heading h2 span,
    .reports-intro h2 span,
    .process-heading h2 span,
    .trust-heading h2 span,
    .recent-heading h2 span,
    .severity-heading h2 span,
    .reviews-heading h2 span,
    .request-copy h2 span,
    .report-copy h3 span,
    .house-rule-inner h2 span {
        padding-top: 0.32em !important;
    }

}

/* END IKG FINAL LINE GAP NUDGE — V8 */


/* IKG LETTER SPACING FIX — V9 */


/* ==========================================================================
   HORIZONTAL LETTER SPACING

   The display font is naturally very condensed.
   Previous negative tracking made the letters visually fuse together.
   ========================================================================== */


/* HERO */

.hero h1 {
    letter-spacing: 0.018em !important;
}


/* LARGE SECTION HEADINGS */

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2,
.house-rule-inner h2 {
    letter-spacing: 0.018em !important;
}


/* REPAIR REPORT HEADLINES */

.report-copy h3 {
    letter-spacing: 0.022em !important;
}


/* PROCESS STEP HEADLINES */

.process-step h3 {
    letter-spacing: 0.018em !important;
}


/* TRUST LABELS */

.credential strong {
    letter-spacing: 0.018em !important;
}


/* SEVERITY SCALE */

.severity-copy h3 {
    letter-spacing: 0.018em !important;
}


/* REVIEWS */

.review-note p {
    letter-spacing: 0.018em !important;
}


/* FOOTER BRAND */

.footer-brand strong {
    letter-spacing: 0.018em !important;
}


/* MOBILE — give the letters slightly more room */

@media (max-width: 680px) {

    .hero h1,
    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2,
    .house-rule-inner h2,
    .report-copy h3,
    .process-step h3,
    .credential strong,
    .severity-copy h3,
    .review-note p {
        letter-spacing: 0.022em !important;
    }

}


/* END IKG LETTER SPACING FIX — V9 */


/* IKG MOBILE NAV VIEWPORT FIX */

@media (max-width: 980px) {

    /*
    |--------------------------------------------------------------------------
    | Keep Header Above Everything
    |--------------------------------------------------------------------------
    */

    .site-header,
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        overflow: visible !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Keep Burger Above Open Menu
    |--------------------------------------------------------------------------
    */

    .menu-toggle {
        position: relative !important;
        z-index: 10002 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile Navigation
    |--------------------------------------------------------------------------
    |
    | The menu must belong to the VIEWPORT, not the document position.
    | This prevents it from opening back at the top of the page after
    | an anchor link has already scrolled the visitor elsewhere.
    |
    */

    #site-nav,
    .site-nav {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100dvh !important;
        max-height: none !important;

        padding-top: 7rem !important;
        padding-bottom: 2rem !important;

        overflow-y: auto !important;
        overscroll-behavior: contain;

        z-index: 10001 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-10px) !important;

        transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 160ms ease !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Open State
    |--------------------------------------------------------------------------
    */

    #site-nav.is-open,
    .site-nav.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Prevent Page Movement Behind Menu
    |--------------------------------------------------------------------------
    */

    body.nav-open {
        overflow: hidden !important;
    }

}


/* END IKG MOBILE NAV VIEWPORT FIX */


/* IKG WIDTH + SCALE CONTROL — V10 */

:root {
    --ikg-content-max: 1320px;
    --ikg-reading-max: 1180px;
}


/* ==========================================================================
   GLOBAL CONTENT WIDTH
   ========================================================================== */

main > section > *:not(.house-rule-tape),
.hero > *,
.utility-strip > *,
.site-footer > * {
    width: min(
        calc(100% - 3rem),
        var(--ikg-content-max)
    ) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
|
| Keep the cream header full width, but stop its contents from stretching
| from one end of an ultrawide monitor to the other.
|
*/

.site-header > * {
    max-width: var(--ikg-content-max);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   ULTRAWIDE TYPOGRAPHY CEILINGS
   ========================================================================== */

.hero h1 {
    font-size: clamp(
        5.5rem,
        7.25vw,
        7.5rem
    ) !important;
}


/* Main editorial headings */

.list-heading h2,
.reports-intro h2,
.process-heading h2,
.trust-heading h2,
.recent-heading h2,
.severity-heading h2,
.reviews-heading h2,
.request-copy h2 {
    font-size: clamp(
        3.9rem,
        5.5vw,
        5.75rem
    ) !important;
}


/* Individual repair-report headlines */

.report-copy h3 {
    font-size: clamp(
        3rem,
        4.4vw,
        4.75rem
    ) !important;
}


/* House Rule is allowed to stay dramatic,
   but it no longer becomes billboard-sized. */

.house-rule-inner h2 {
    font-size: clamp(
        4rem,
        6vw,
        6.25rem
    ) !important;
}


/* ==========================================================================
   READING WIDTHS
   ========================================================================== */

.list-heading,
.reports-intro,
.process-heading,
.trust-heading,
.recent-heading,
.severity-heading,
.reviews-heading,
.request-copy {
    max-width: var(--ikg-reading-max);
}


/* Paragraphs should not become giant horizontal sentences */

.list-heading p,
.reports-intro p,
.process-heading p,
.trust-heading p,
.recent-heading p,
.severity-heading p,
.reviews-heading p,
.request-copy p {
    max-width: 62ch;
}


/* ==========================================================================
   ULTRAWIDE SAFETY
   ========================================================================== */

@media (min-width: 1600px) {

    :root {
        --ikg-content-max: 1280px;
    }

    .hero h1 {
        font-size: 7.25rem !important;
    }

    .list-heading h2,
    .reports-intro h2,
    .process-heading h2,
    .trust-heading h2,
    .recent-heading h2,
    .severity-heading h2,
    .reviews-heading h2,
    .request-copy h2 {
        font-size: 5.4rem !important;
    }

    .report-copy h3 {
        font-size: 4.4rem !important;
    }

    .house-rule-inner h2 {
        font-size: 5.8rem !important;
    }

}


/* ==========================================================================
   TABLET / MOBILE
   ========================================================================== */

@media (max-width: 980px) {

    main > section > *:not(.house-rule-tape),
    .hero > *,
    .utility-strip > *,
    .site-footer > * {
        width: min(
            calc(100% - 2rem),
            var(--ikg-content-max)
        ) !important;
    }

}


@media (max-width: 680px) {

    main > section > *:not(.house-rule-tape),
    .hero > *,
    .utility-strip > *,
    .site-footer > * {
        width: min(
            calc(100% - 1.5rem),
            var(--ikg-content-max)
        ) !important;
    }

}


/* END IKG WIDTH + SCALE CONTROL — V10 */