/* Home: gravespestma.help */

.gra98-intro {
    display: grid;
    gap: 12px;
    max-width: 40rem;
    margin-bottom: 36px;
}

.gra98-intro p,
.gra98-note,
.gra98-when,
.gra98-or,
.gra98-who,
.gra98-callbackcopy p,
.gra98-hero-meta p,
.gra98-aboutcopy p,
.gra98-stepcopy p,
.gra98-open p,
.gra98-lane p,
.gra98-panels p {
    color: var(--dna-ink-soft);
}

.gra98-faq,
.gra98-svc,
.gra98-proc,
.gra98-about,
.gra98-callback {
    padding: var(--section-pad) 0;
}

.gra98-faq { background: var(--dna-bg); }
.gra98-svc { background: var(--dna-surface); }
.gra98-proc { background: var(--dna-bg); }
.gra98-about { background: var(--dna-surface); }
.gra98-callback { background: var(--dna-surface-2); }

.gra98-lane > .gra98-num {
    margin: 0;
    font-family: "PT Serif", Georgia, serif;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #d5e2ea;
}

.gra98-frame {
    margin: 0;
    min-width: 0;
}

.gra98-frame img,
.gra98-vis img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}

a[href^="mailto:"] { overflow-wrap: anywhere; }

#what-we-open-first,
#pest-lanes,
#inspect-exclude-return,
#about,
#gra98-callback,
#gra98-once,
#gra98-prev,
#gra98-year {
    scroll-margin-top: 96px;
}

/* Bleed editorial hero */
html[data-dna-hero="bleed"] .gra98-hero.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: calc(100svh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px);
}

.gra98-hero .hero-visual,
.gra98-hero .hero-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.gra98-hero .hero-visual { z-index: 0; }
.gra98-hero .hero-photo { z-index: 0; }

.gra98-hero .hero-photo img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 42% 58%;
    border-radius: 0;
}

html[data-dna-hero="bleed"] .gra98-hero .hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(12, 16, 20, 0.94) 0%,
        rgba(12, 16, 20, 0.86) 26%,
        rgba(12, 16, 20, 0.42) 54%,
        rgba(12, 16, 20, 0.16) 100%
    );
}

html[data-dna-hero="bleed"] .gra98-hero .hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.72fr);
    gap: 36px;
    align-items: end;
    width: min(calc(100% - 48px), var(--maxw));
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

html[data-dna-hero="bleed"] .gra98-hero .hero-copy {
    max-width: none;
}

.gra98-hero h1 {
    font-size: clamp(2.15rem, 4.2vw, 3.45rem);
    color: var(--dna-ink);
}

.gra98-hero-meta {
    display: grid;
    gap: 16px;
    align-content: end;
    padding-bottom: 4px;
    border-left: 2px solid var(--dna-accent);
    padding-left: 18px;
}

.gra98-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gra98-call,
.gra98-line,
.gra98-handoff button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.gra98-call,
.gra98-handoff button {
    border: 0;
    background: var(--dna-accent);
    color: #10161c;
}

.gra98-line {
    border: 1px solid var(--dna-line);
    background: rgba(12, 16, 20, 0.35);
    color: var(--dna-ink);
}

.gra98-call:hover,
.gra98-handoff button:hover { background: #8eb4c6; color: #10161c; }
.gra98-line:hover { border-color: #d5e2ea; color: #d5e2ea; }

.gra98-when { font-size: 0.95rem; }

/* FAQ ledger */
.gra98-faqgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
    gap: 48px;
    align-items: start;
}

.gra98-faq .gra98-intro { margin-bottom: 8px; }

.gra98-opens { display: grid; gap: 0; }

.gra98-open {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    align-content: start;
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--dna-line);
}

.gra98-open:last-child { border-bottom: 1px solid var(--dna-line); }

.gra98-open h3 { font-size: 1.2rem; }

.gra98-note {
    margin-top: 18px;
    max-width: 42rem;
}

.gra98-faq .gra98-frame { margin-top: 8px; }

/* Numbered plan grid */
html.dna-svc-grid .gra98-lanes[data-services-catalog],
.gra98-lanes[data-services-catalog] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 12px;
    align-items: stretch;
    border-top: 1px solid var(--dna-line);
    padding-top: 28px;
}

html.dna-svc-grid .gra98-lane.service-item,
.gra98-lane {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    align-content: start;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.gra98-lane + .gra98-lane { position: relative; }

.gra98-lane + .gra98-lane::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--dna-line);
}

.gra98-lane > * {
    margin: 0;
    min-width: 0;
}

.gra98-lane h3 { font-size: 1.35rem; }

@supports (grid-template-rows: subgrid) {
    .gra98-lane {
        grid-template-rows: subgrid;
        grid-row: span 4;
    }
}

.gra98-lane a {
    justify-self: start;
    color: #d5e2ea;
    font-weight: 700;
    text-decoration: none;
}

.gra98-lane a:hover { color: var(--dna-ink); }

/* Zigzag */
.gra98-zig { display: grid; gap: 48px; }

.gra98-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin: 0;
}

.gra98-step-flip .gra98-vis { order: -1; }

.gra98-stepcopy {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    align-content: start;
    min-width: 0;
}

.gra98-stepcopy h3 { font-size: 1.7rem; }

.gra98-vis {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    margin: 0;
}

.gra98-vis-index {
    align-content: start;
    min-height: 0;
    padding: 0;
    border: 0;
}

.gra98-vis-index span {
    font-family: "PT Serif", Georgia, serif;
    font-size: clamp(4rem, 8vw, 6.5rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: #d5e2ea;
}

/* About */
.gra98-aboutgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    gap: 48px;
    align-items: start;
}

.gra98-aboutcopy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.gra98-aboutcopy h2 { margin-bottom: 4px; }

.gra98-aboutcopy .gra98-statement {
    margin: 0;
    font-family: "PT Serif", Georgia, serif;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--dna-ink);
}

.gra98-who {
    display: grid;
    gap: 2px;
}

.gra98-who b { color: var(--dna-ink); }

.gra98-facts {
    display: grid;
    gap: 12px;
    margin: 8px 0 0;
}

.gra98-facts div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.gra98-facts dt {
    margin: 0;
    color: #d5e2ea;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gra98-facts dd { margin: 0; }

.gra98-facts a { color: var(--dna-ink); text-decoration: none; }
.gra98-facts a:hover { color: #d5e2ea; }

/* Tabs callback */
.gra98-callbackgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
    gap: 40px;
    align-items: start;
}

.gra98-callbackcopy {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.gra98-callbackcopy a { color: #d5e2ea; text-decoration: none; }
.gra98-callbackcopy a:hover { color: var(--dna-ink); }

.gra98-switch {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: var(--dna-bg);
    border: 1px solid var(--dna-line);
    border-radius: 4px;
}

.gra98-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gra98-tabbar a {
    flex: 1 1 0;
    padding: 10px 12px;
    border: 1px solid var(--dna-line);
    border-radius: 4px;
    color: var(--dna-ink);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.gra98-switch:not(:has(:target)) .gra98-tabbar a[href="#gra98-once"],
.gra98-switch:has(#gra98-once:target) .gra98-tabbar a[href="#gra98-once"],
.gra98-switch:has(#gra98-prev:target) .gra98-tabbar a[href="#gra98-prev"],
.gra98-switch:has(#gra98-year:target) .gra98-tabbar a[href="#gra98-year"] {
    background: var(--dna-accent);
    border-color: transparent;
    color: #10161c;
}

.gra98-panels p { display: none; }
.gra98-switch:not(:has(:target)) .gra98-panels p:first-of-type,
.gra98-panels p:target { display: block; }

.gra98-handoff {
    display: grid;
    gap: 8px;
}

.gra98-handoff label { font-weight: 700; }

.gra98-handoff input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--dna-line);
    border-radius: 4px;
    background: var(--dna-surface);
    color: var(--dna-ink);
}

.gra98-handoff button { width: 100%; margin-top: 4px; }

.gra98-or a { color: var(--dna-ink); font-weight: 700; text-decoration: none; }
.gra98-or a:hover { color: #d5e2ea; }

@media (max-width: 860px) {
    .gra98-faq,
    .gra98-svc,
    .gra98-proc,
    .gra98-about,
    .gra98-callback { padding: 56px 0; }

    html[data-dna-hero="bleed"] .gra98-hero .hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        width: min(calc(100% - 32px), var(--maxw));
    }

    .gra98-faqgrid,
    .gra98-aboutgrid,
    .gra98-callbackgrid,
    .gra98-step,
    html.dna-svc-grid .gra98-lanes[data-services-catalog],
    .gra98-lanes[data-services-catalog] {
        grid-template-columns: 1fr;
    }

    .gra98-faqgrid,
    .gra98-aboutgrid,
    .gra98-callbackgrid { gap: 28px; }

    .gra98-step { gap: 16px; }
    .gra98-step-flip .gra98-vis { order: 0; }
    .gra98-zig { gap: 36px; }

    html.dna-svc-grid .gra98-lanes[data-services-catalog],
    .gra98-lanes[data-services-catalog] {
        column-gap: 0;
        row-gap: 12px;
    }

    .gra98-lane + .gra98-lane {
        margin-top: 22px;
        padding-top: 22px;
    }

    .gra98-lane + .gra98-lane::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .gra98-vis-index { padding-top: 0; }
    .gra98-vis-index span { font-size: 4rem; }
}

@media (max-width: 480px) {
    .gra98-faq,
    .gra98-svc,
    .gra98-proc,
    .gra98-about,
    .gra98-callback { padding: 44px 0; }

    .gra98-intro { margin-bottom: 24px; }

    .gra98-hero h1 { font-size: 1.85rem; }
    .gra98-acts { flex-direction: column; align-items: stretch; }
    .gra98-acts a { width: 100%; }

    .gra98-facts div { grid-template-columns: 1fr; gap: 2px; }

    .gra98-tabbar a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .gra98-call,
    .gra98-line,
    .gra98-handoff button { transition: none; }
}
