/* Plumbing Design 1's stylesheet: the plumbing concept's site.css carried over rule for rule, every color with a role a
   palette slot (--nf-<key>, set by the page's theme), the fonts declared by the page from the design's own files. The
   accent-colored page tops are the Hero Panel setting's (body.hp-accent), the white header the Header setting's
   (body.hdr-light); without them the concept's dark tops and dark header draw. Plumbing Design 1's own additions follow
   the carried-over rules, at the end */
:root {
    --red: var(--nf-accent);
    --carbon: var(--nf-ink);
    --graphite: var(--nf-ink-2);
    --concrete: var(--nf-concrete);
    --steel: var(--nf-steel);
    --fog: var(--nf-fog);
    --ash: var(--nf-ash);
    --slate: var(--nf-slate);
    --line: color-mix(in srgb, var(--nf-ink) 14%, transparent);
    --line-d: rgba(255, 255, 255, 0.12);
    --green: var(--nf-good);
    --display: var(--font-display);
    --body: var(--font-body);
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --wrap: 1296px;
    --gut: clamp(20px, 5vw, 72px);
    --sec: clamp(88px, 10vw, 152px);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        transition: none !important;
    }
}
body {
    margin: 0;
    background: #fff;
    color: var(--carbon);
    font-family: var(--body);
    font-stretch: 100%;
    font-size: 17px;
    line-height: 1.6;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* Links never use text-decoration. Where a line helps, it is a bottom border, which sits under the descenders instead of cutting through them. */
a {
    text-decoration: none;
}
:is(.fine, .sample, .promise-by, .q-note, .bk-note, .bk-foot, .zf-out, .rates .svc, dd) a:not([class]) {
    border-bottom: 1px solid currentColor;
    transition: border-color 0.2s ease;
}
:is(.fine, .sample, .promise-by, .q-note, .bk-note, .bk-foot, .zf-out, .rates .svc, dd) a:not([class]):hover {
    border-bottom-color: var(--red);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
}
button {
    font: inherit;
    color: inherit;
}
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
[hidden] {
    display: none !important;
}
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--gut);
}
.sec {
    padding-block: var(--sec);
}
.dark {
    background: var(--carbon);
    color: #fff;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
}
.eyebrow::before {
    content: '';
    width: 36px;
    height: 3px;
    background: var(--red);
    flex-shrink: 0;
}
.dark .eyebrow {
    color: var(--steel);
}
.h2 {
    margin: 24px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(52px, 6.4vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.head {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 64px;
    align-items: flex-end;
    justify-content: space-between;
}
.head > div {
    max-width: 760px;
}
.lead {
    margin: 0;
    max-width: 25em;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ash);
}
.dark .lead {
    color: var(--steel);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 26px;
    border: 0;
    font: 700 13.5px/1 var(--body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.btn-red {
    background: var(--red);
    color: #fff;
}
.btn-red:hover {
    background: var(--nf-accent-hover);
}
.btn-white {
    background: #fff;
    color: var(--carbon);
}
.btn-ink {
    background: var(--carbon);
    color: #fff;
}
.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-ghost-w {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.link-mono {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    cursor: pointer;
}
.stars {
    color: var(--red);
    letter-spacing: 3px;
    line-height: 1;
}
.micro {
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.photo {
    filter: grayscale(1) contrast(1.06) brightness(0.96);
}
.photo-hero {
    filter: grayscale(1) contrast(1.12) brightness(0.62);
}
html.color .photo {
    filter: saturate(0.92) contrast(1.03);
}
html.color .photo-hero {
    filter: saturate(0.88) brightness(0.6);
}

.util {
    background: var(--carbon);
    color: var(--steel);
    font: 400 11.5px/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.util > .wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    padding-block: 11px;
    white-space: nowrap;
}
.util .grp {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    align-items: center;
    min-width: 0;
}
.util b {
    font-weight: 400;
    color: #fff;
}
.live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
}
.live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bd576;
    box-shadow: 0 0 0 3px rgba(43, 213, 118, 0.2);
}

.hdr {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--nf-ink) 97%, transparent);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hdr > .wrap {
    height: 80px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.brand img {
    height: 36px;
    width: auto;
}
.hdr-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}
.hdr-phone small {
    font: 400 10px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
}
.hdr-phone span {
    font-family: var(--display);
    font-stretch: 75%;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.hdr > .wrap > .btn {
    height: 48px;
    padding: 0 24px;
}
.icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.hero {
    position: relative;
    background: var(--carbon);
    color: #fff;
    overflow: hidden;
}
.hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
    object-position: 28% 42%;
}
.hero-scrim {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--carbon) 0%,
        color-mix(in srgb, var(--nf-ink) 72%, transparent) 26%,
        color-mix(in srgb, var(--nf-ink) 12%, transparent) 62%,
        color-mix(in srgb, var(--nf-ink) 28%, transparent) 100%
    );
}
.hero .wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 48px clamp(32px, 5vw, 80px);
    align-items: center;
    padding-block: clamp(40px, 7vw, 104px);
}
.hero-copy {
    flex: 1 1 560px;
    min-width: 0;
    max-width: 720px;
}
.hero .eyebrow {
    color: #fff;
}
.hero h1 {
    margin: 0;
    font: 500 12.5px/1.5 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.slogan {
    margin: 28px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(64px, 7.8vw, 116px);
    line-height: 0.86;
    letter-spacing: -0.012em;
}
.slogan em {
    font-style: normal;
    color: var(--red);
}
.hero-lead {
    margin: 32px 0 0;
    max-width: 30em;
    font-size: clamp(18px, 1.45vw, 20px);
    line-height: 1.55;
    color: var(--fog);
}
.proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 24px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rating {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rating > b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 48px;
    line-height: 0.9;
    letter-spacing: -0.01em;
}
.rating > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rating .stars {
    font-size: 14px;
}
.vr {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.14);
}
.call {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #fff;
    text-decoration: none;
}
.call strong {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
}
.book-col {
    flex: 0 1 440px;
    min-width: 0;
    margin-left: auto;
}
@media (max-width: 900px) {
    .hero-photo {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-position: 40% 40%;
    }
    .hero-scrim {
        display: none;
    }
    .book-col {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

.bk {
    background: #fff;
    color: var(--carbon);
    padding: 30px 30px 24px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bk-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.bk-kicker {
    font: 500 11px/1.2 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.bk-title {
    margin-top: 10px;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.92;
    letter-spacing: -0.008em;
}
.chip-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 6px 9px;
    background: #e7f6ed;
    color: var(--nf-good-text);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}
.segs {
    display: flex;
    gap: 4px;
}
.segs i {
    flex: 1;
    height: 3px;
    background: #e4e4e0;
    transition: background-color 0.25s ease;
}
.segs i.on {
    background: var(--red);
}
.segs.done i {
    background: var(--green);
}
.bk-step {
    margin-top: -6px;
    font: 400 11px/1.2 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bk-q {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.opt {
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #dcdcd7;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.15s ease;
}
.opt:hover {
    border-color: var(--carbon);
}
.opt i {
    width: 3px;
    height: 22px;
    flex-shrink: 0;
    background: var(--code);
}
.bk-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--concrete);
    font-size: 15px;
}
.bk-job span span {
    color: var(--ash);
}
.txt-btn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.bk label {
    font-size: 14px;
    font-weight: 600;
}
.field {
    width: 100%;
    height: 54px;
    margin-top: -8px;
    padding: 0 16px;
    border: 1px solid #bdbdb7;
    border-radius: 0;
    font: inherit;
    font-size: 17px;
    color: var(--carbon);
    background: #fff;
}
.field:focus {
    outline: 2px solid var(--carbon);
    outline-offset: 0;
}
.bk .consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ash);
}
.consent input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--carbon);
}
.msg {
    margin-top: -6px;
    font-size: 14px;
    font-weight: 500;
}
.done-row {
    display: flex;
    gap: 14px;
    align-items: center;
}
.done-ico {
    width: 48px;
    height: 48px;
    background: #e7f6ed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.done-row b {
    display: block;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.95;
}
.done-row small {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--ash);
}
.tech {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dcdcd7;
    font-size: 14.5px;
    line-height: 1.45;
}
.tech img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.bk-foot {
    padding-top: 16px;
    border-top: 1px solid #ecece8;
    font-size: 13px;
    color: var(--ash);
}

.readouts {
    border-top: 1px solid var(--line-d);
}
.readouts .wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ro {
    padding: 32px 24px 34px 28px;
    border-left: 1px solid var(--line-d);
}
.ro:first-child {
    padding-left: 0;
    border-left: 0;
}
.ro b {
    display: block;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 56px;
    line-height: 0.88;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.ro b small {
    margin-left: 6px;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--steel);
}
.ro span {
    display: block;
    margin-top: 14px;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
}
@media (max-width: 900px) {
    .readouts .wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ro:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
    .ro:nth-child(n + 3) {
        border-top: 1px solid var(--line-d);
    }
}

.tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
    margin-top: 64px;
}
.tile {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--carbon);
}
.tile-img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--graphite);
}
.tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile:hover .tile-img img {
    transform: scale(1.035);
}
.tile-img::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: var(--code);
}
.tile-kind {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 6px 9px;
    background: var(--carbon);
    color: #fff;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tile-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: 22px;
}
.tile-t {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 0.92;
    letter-spacing: -0.006em;
}
.tile-fix {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ash);
}
.tile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tile-cta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.more {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    margin-top: 56px;
}
.more a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    padding: 20px 0 22px;
    border-top: 3px solid var(--code);
    color: var(--carbon);
}
.more b {
    justify-self: start;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    transition: border-color 0.2s ease;
}
.more span {
    grid-row: 2;
    font: 400 12px/1 var(--mono);
    letter-spacing: 0.04em;
    color: var(--ash);
}
.more svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--red);
    transition: transform 0.2s ease;
}
.more a:hover b,
.more a:focus-visible b {
    border-bottom-color: var(--red);
}
.more a:hover svg,
.more a:focus-visible svg {
    transform: translateX(3px);
}
@media (max-width: 1100px) {
    .tiles,
    .more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .tiles,
    .more {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rail {
    position: relative;
    margin-top: 80px;
}
.rail::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 33px;
    height: 2px;
    background: var(--red);
}
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.node {
    width: 68px;
    height: 68px;
    border: 2px solid var(--red);
    background: var(--carbon);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 15px/1 var(--mono);
    letter-spacing: 0.06em;
}
.steps h3 {
    margin: 36px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 0.9;
    letter-spacing: -0.008em;
}
.steps p {
    margin: 16px 0 0;
    max-width: 23em;
    font-size: 17px;
    line-height: 1.6;
    color: var(--steel);
}
@media (max-width: 860px) {
    .rail::before {
        display: none;
    }
    .steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pricing {
    background: var(--concrete);
}
.pricing .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: flex-start;
}
.pricing-intro {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 400px;
}
.pricing-intro > p {
    margin: 28px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--slate);
}
.fees {
    margin: 40px 0 0;
    padding: 0;
    border-top: 2px solid var(--carbon);
}
.fees div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.fees dt {
    font-size: 15px;
    color: var(--ash);
}
.fees dd {
    margin: 0;
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 19px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pricing-table {
    flex: 999 1 560px;
    min-width: 0;
}
.rates {
    width: 100%;
    border-collapse: collapse;
}
.rates caption {
    caption-side: top;
    padding-bottom: 18px;
    text-align: left;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.rates th {
    padding: 0 24px 14px 0;
    border-bottom: 2px solid var(--carbon);
    text-align: left;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.rates th:last-child {
    padding-right: 0;
    text-align: right;
}
.rates td {
    padding: 26px 24px 26px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.rates td:first-child {
    width: 36%;
}
.rates .svc {
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
}
.rates .spec {
    margin-top: 8px;
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
}
.rates td.inc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--slate);
}
.rates td.price {
    padding: 20px 0 22px;
    text-align: right;
    white-space: nowrap;
}
.rates .from {
    font-family: var(--display);
    font-stretch: 62%;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.012em;
    font-variant-numeric: tabular-nums;
}
.rates .mo {
    margin-top: 8px;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--ash);
}
.rates .link-mono {
    margin-top: 12px;
}
.fine {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ash);
}
@media (max-width: 760px) {
    .rates thead {
        display: none;
    }
    .rates tr {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        padding: 22px 0;
        border-bottom: 1px solid var(--line);
    }
    .rates td {
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
    }
    .rates td.price {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 0;
    }
    .rates td.inc {
        grid-column: 1;
        margin-top: 10px;
        font-size: 14.5px;
    }
    .rates .from {
        font-size: 40px;
    }
}

.system {
    background-color: var(--carbon);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.system .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 56px clamp(40px, 5vw, 80px);
    align-items: center;
}
.sys-copy {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sys-copy .h2 {
    margin: 0;
    font-size: clamp(52px, 6vw, 88px);
}
.legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 4px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line-d);
    list-style: none;
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
}
.legend li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.legend i {
    width: 28px;
    flex-shrink: 0;
    border-top: 3px solid var(--c);
}
.legend i.dash {
    border-top-style: dashed;
}
.sys-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 24px;
    background: #fff;
    color: var(--carbon);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.sys-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sys-card-top span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--red);
    color: #fff;
    font: 600 12px/1 var(--mono);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sys-card-top b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.92;
    letter-spacing: -0.006em;
}
.sys-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--slate);
}
.sys-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #ecece8;
}
.sys-card-foot strong {
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sys-card .btn {
    height: 44px;
    padding: 0 18px;
    font-size: 12.5px;
}
.sys-hint {
    padding: 18px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fog);
}
.sys-draw {
    flex: 999 1 560px;
    min-width: 0;
}
.sys-stage {
    position: relative;
    width: 100%;
}
.sys-stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.spot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #fff;
    background: var(--red);
    color: #fff;
    font: 600 12.5px/1 var(--mono);
    cursor: pointer;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--nf-accent) 28%, transparent);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.spot.on {
    background: #fff;
    color: var(--carbon);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28);
}

.reviews .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 56px clamp(40px, 7vw, 112px);
    align-items: flex-start;
}
.rv-side {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 360px;
}
.rv-big {
    margin: 28px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: clamp(132px, 15vw, 216px);
    line-height: 0.76;
    letter-spacing: -0.035em;
}
.rv-count {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
.rv-count .stars {
    font-size: 16px;
    letter-spacing: 4px;
}
.rv-count b {
    font-size: 16px;
    font-weight: 600;
}
.dist {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 30px;
}
.dist div {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 400 11.5px/1 var(--mono);
    color: var(--ash);
}
.dist div > span:first-child {
    width: 10px;
}
.dist em {
    position: relative;
    flex: 1;
    height: 4px;
    background: #ecece8;
}
.dist em i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--carbon);
}
.dist div > span:last-child {
    width: 32px;
    text-align: right;
}
.rv-note {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ash);
}
.rv-note strong {
    color: var(--carbon);
    font-weight: 600;
}
.rv-main {
    flex: 999 1 560px;
    min-width: 0;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip {
    height: 40px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--nf-ink) 20%, transparent);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.chip[aria-pressed='true'] {
    background: var(--carbon);
    border-color: var(--carbon);
    color: #fff;
}
.quote {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}
.quote .stars {
    font-size: 13px;
}
.quote blockquote {
    margin: 0;
    max-width: 34em;
    font-size: clamp(20px, 1.75vw, 25px);
    line-height: 1.42;
    letter-spacing: -0.012em;
    font-weight: 400;
}
.quote figcaption {
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
}
.reply {
    margin-left: clamp(0px, 3vw, 40px);
    padding: 16px 18px;
    background: var(--concrete);
    font-size: 15px;
    line-height: 1.55;
    color: var(--slate);
}
.reply span {
    display: block;
    margin-bottom: 6px;
    font: 400 10.5px/1.3 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.sample {
    margin-top: 22px;
    font: 400 10.5px/1.5 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
}

.crew {
    background: var(--concrete);
}
.crew .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 88px clamp(40px, 6vw, 96px);
    align-items: center;
}
.crew-photos {
    position: relative;
    flex: 1 1 520px;
    min-width: 0;
    padding-bottom: 36px;
}
.crew-photos .main {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: 50% 55%;
}
.crew-photos .cap {
    position: absolute;
    left: 0;
    bottom: 8px;
    font: 400 10.5px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.crew-copy {
    flex: 1 1 400px;
    min-width: 0;
}
.crew-copy > p {
    margin: 28px 0 0;
    max-width: 28em;
    font-size: 18px;
    line-height: 1.6;
    color: var(--slate);
}
.roster {
    margin-top: 40px;
    border-top: 2px solid var(--carbon);
}
.roster div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.roster b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.roster .num {
    font: 400 11.5px/1.4 var(--mono);
    letter-spacing: 0.08em;
    color: var(--carbon);
    text-align: right;
}
.roster .sub {
    font-size: 14.5px;
    color: var(--ash);
}
.roster .who {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
    color: var(--ash);
    text-align: right;
}
.promise {
    margin: 40px 0 0;
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.012em;
}
.promise-by {
    margin-top: 14px;
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
}
.plan {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 3vw, 44px);
    border: 1px solid color-mix(in srgb, var(--nf-ink) 16%, transparent);
    background: #fff;
}
.plan.feat {
    background: var(--carbon);
    color: #fff;
    border: 0;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.plan-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.plan h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 0.9;
    letter-spacing: -0.008em;
}
.tag {
    padding: 6px 10px;
    background: var(--red);
    color: #fff;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan .for {
    margin-top: -10px;
    font-size: 15.5px;
    color: var(--ash);
}
.plan.feat .for {
    color: var(--steel);
}
.tanks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tank {
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.tank[aria-pressed='true'] {
    background: #fff;
    border-color: #fff;
    color: var(--carbon);
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.plan.feat .plan-price {
    border-color: rgba(255, 255, 255, 0.14);
}
.plan-price b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.85;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.plan-price span {
    font: 400 11.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.plan.feat .plan-price span {
    color: var(--steel);
}
.plan ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.45;
}
.plan li {
    display: flex;
    gap: 12px;
}
.plan li svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.plan .btn {
    width: 100%;
    margin-top: auto;
}
.plan .terms {
    margin-top: -8px;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
    text-align: center;
}
.plan.feat .terms {
    color: var(--steel);
}
@media (max-width: 860px) {
    .plans-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.answers {
    background: var(--concrete);
}
.ans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 40px;
    margin-top: 64px;
}
.ans {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 28px;
    border-top: 2px solid var(--carbon);
}
.ans h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.012em;
}
.ans p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--slate);
}
.byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.byline img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.byline span {
    font-size: 13.5px;
    line-height: 1.45;
}
.byline small {
    font: 400 10.5px/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
}
@media (max-width: 960px) {
    .ans-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.area .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: center;
}
.area-copy {
    flex: 1 1 440px;
    min-width: 0;
}
.area-copy > p {
    margin: 28px 0 0;
    max-width: 30em;
    font-size: 18px;
    line-height: 1.6;
    color: var(--slate);
}
.towns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    margin-top: 40px;
    border-top: 2px solid var(--carbon);
}
.towns a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 500;
}
.towns span {
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--ash);
    white-space: nowrap;
}
.area-map {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 540px;
}
.area-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
@media (max-width: 560px) {
    .towns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.offers {
    background: var(--red);
    color: #fff;
}
.offers .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 48px clamp(40px, 6vw, 96px);
    align-items: center;
}
.offers .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}
.offers .eyebrow::before {
    background: #fff;
}
.offers-copy {
    flex: 1 1 440px;
    min-width: 0;
}
.offers-copy > p {
    margin: 28px 0 0;
    max-width: 30em;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}
.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}
.coupons {
    flex: 1 1 420px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.coupon {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px;
    border: 1.5px dashed rgba(255, 255, 255, 0.72);
}
.coupon b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 38px;
    line-height: 0.9;
    letter-spacing: -0.008em;
}
.coupon p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.coupon div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.5);
    font: 400 11.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.coupon div span:last-child {
    color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 560px) {
    .coupons {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cta {
    position: relative;
    background: var(--carbon);
    color: #fff;
    overflow: hidden;
}
.cta > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 60%;
    opacity: 0.55;
}
.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--nf-ink) 94%, transparent) 0%,
        color-mix(in srgb, var(--nf-ink) 70%, transparent) 55%,
        color-mix(in srgb, var(--nf-ink) 50%, transparent) 100%
    );
}
.cta .wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 64px;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: clamp(96px, 11vw, 168px);
}
.cta h2 {
    max-width: 780px;
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(64px, 9vw, 148px);
    line-height: 0.84;
    letter-spacing: -0.015em;
}
.cta h2 em {
    font-style: normal;
    color: var(--red);
}
.cta-copy > p {
    margin: 28px 0 0;
    max-width: 30em;
    font-size: 18px;
    line-height: 1.6;
    color: var(--fog);
}
.cta-act {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}
.cta-phone {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: clamp(48px, 5.4vw, 76px);
    line-height: 0.88;
    letter-spacing: -0.005em;
    color: #fff;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.ftr {
    background: var(--carbon);
    color: var(--fog);
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ftr .wrap {
    padding-block: 80px 36px;
}
.ftr-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
    gap: 48px 40px;
}
.ftr-brand img {
    height: 40px;
    width: auto;
}
.ftr address {
    margin-top: 24px;
    font-style: normal;
    line-height: 1.6;
}
.ftr-brand a {
    display: inline-block;
    margin-top: 12px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.ftr h4 {
    margin: 0 0 16px;
    font: 400 10.5px/1.3 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.ftr ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ftr ul.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}
.ftr ul a {
    color: var(--fog);
    text-decoration: none;
    transition: color 0.2s ease;
}
.ftr ul a:hover {
    color: #fff;
}
.lic {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 56px;
}
.lic span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: var(--steel);
}
@media (max-width: 960px) {
    .ftr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .ftr-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sticky {
    display: none;
}
.sticky a {
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 600 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}
.sticky .s1 {
    background: var(--red);
    color: #fff;
}
.sticky .s2 {
    background: #fff;
    color: var(--carbon);
}
.sticky .s3 {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}
.concept {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 50;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: color-mix(in srgb, var(--nf-ink) 92%, transparent);
    color: var(--fog);
    font: 400 10.5px/1.3 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
@media (max-width: 760px) {
    .sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--nf-ink) 97%, transparent);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    body {
        padding-bottom: 84px;
    }
    .concept {
        bottom: 96px;
    }
}

/* Header: navigation, mega menus, branch switcher, mobile menu */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.util .util-left {
    /* Takes what the offer and the branch switch leave, and clips there, so nothing runs into the next. The open line
       keeps its room; the hours show only where there's room for them, ending in an ellipsis where they don't quite
       fit; and the offer gives way last, ending in one too */
    flex: 1 1 0;
    min-width: 25em;
    overflow: hidden;
    container: util-left / inline-size;
}
.util-left > .live {
    flex: none;
}
.util-left > .util-hours {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
@container util-left (max-width: 33em) {
    .util-left > .util-hours {
        display: none;
    }
}
.util > .wrap > .grp:last-child {
    flex: 0 1 auto;
}
.util > .wrap > .grp:last-child > * {
    flex: none;
}
.util > .wrap > .grp:last-child > .util-offer {
    flex: 0 1 auto;
    min-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.branch-switch {
    position: relative;
}
.bs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--steel);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.bs-trigger b {
    font-weight: 400;
    color: #fff;
}
.bs-trigger > svg:last-child {
    transition: transform 0.2s ease;
}
.bs-trigger[aria-expanded='true'] > svg:last-child {
    transform: rotate(180deg);
}
.bs-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    width: 300px;
    padding: 8px;
    background: var(--graphite);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    text-transform: none;
    letter-spacing: 0;
}
.bs-title {
    margin: 8px 12px 10px;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.bs-menu a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 12px 13px 14px;
    border-left: 2px solid transparent;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.bs-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
}
.bs-menu a.is-active {
    border-left-color: var(--red);
    background: color-mix(in srgb, var(--nf-accent) 10%, transparent);
}
.bs-menu a span {
    font: 500 15px/1.2 var(--body);
}
.bs-menu a span b {
    font-weight: 700;
}
.bs-menu a small {
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.06em;
    color: var(--steel);
}

.hdr > .wrap {
    gap: clamp(18px, 2.4vw, 40px);
}
.nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: clamp(28px, 2.3vw, 36px);
    flex: 1;
    min-width: 0;
}
.nav-item {
    display: flex;
}
.nav-trigger,
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    font: 500 15px/1 var(--body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}
.nav-trigger:hover,
.nav-link:hover,
.nav-trigger[aria-expanded='true'] {
    color: #fff;
}
.nav-trigger::after,
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-trigger[aria-expanded='true']::after,
.nav-link:hover::after {
    transform: scaleX(1);
}
.nav-trigger svg {
    opacity: 0.7;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}
.nav-trigger[aria-expanded='true'] svg {
    opacity: 1;
    transform: rotate(180deg);
}
.hdr-call,
.menu-btn {
    display: none;
}
.burger {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
}
.burger i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition:
        transform 0.25s ease,
        opacity 0.2s ease,
        top 0.25s ease;
}
.burger i:nth-child(1) {
    top: 0;
}
.burger i:nth-child(2) {
    top: 5px;
}
.burger i:nth-child(3) {
    top: 10px;
}
.menu-btn[aria-expanded='true'] .burger i:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}
.menu-btn[aria-expanded='true'] .burger i:nth-child(2) {
    opacity: 0;
}
.menu-btn[aria-expanded='true'] .burger i:nth-child(3) {
    top: 5px;
    transform: rotate(-45deg);
}

.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 31;
    background: var(--carbon);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 48px 80px -24px rgba(0, 0, 0, 0.65);
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mega.open {
    opacity: 1;
    transform: none;
}
.mega-grid {
    display: grid;
    gap: clamp(32px, 4vw, 56px);
    padding-block: 44px 48px;
}
.mega-services {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
}
.mega-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.mega-h::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--red);
}
.mega-col ul,
.co-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mega-col a,
.co-links a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
.mi-name {
    justify-self: start;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: border-color 0.2s ease;
}
.mega-col a:hover .mi-name,
.co-links a:hover .mi-name,
.mega-col a:focus-visible .mi-name {
    border-bottom-color: var(--red);
}
.mi-from {
    font: 400 11px/1.7 var(--mono);
    letter-spacing: 0.06em;
    color: var(--steel);
    text-align: right;
    white-space: nowrap;
}
.mi-blurb {
    grid-column: 1/-1;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--steel);
}
.mega-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 26px;
    background: var(--graphite);
    color: #fff;
    text-decoration: none;
}
.mf-img {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.mf-img::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 3px;
    background: var(--red);
}
.mf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mega-feature:hover .mf-img img {
    transform: scale(1.04);
}
.mf-kicker,
.mf-title,
.mf-meta,
.mf-cta {
    padding-inline: 24px;
}
.mf-kicker {
    margin-top: 12px;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.mf-title {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 0.92;
    letter-spacing: -0.006em;
}
.mf-meta {
    font-size: 14px;
    line-height: 1.5;
    color: var(--steel);
}
.mf-cta {
    margin-top: 6px;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.mega-foot {
    background: #070708;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mega-foot .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 32px;
    padding-block: 16px;
    font: 400 11px/1.5 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.mega-foot a {
    color: #fff;
    text-decoration: none;
}
.mega-locations {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.85fr);
    align-items: start;
}
.loc-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff;
}
.lc-img {
    position: relative;
    display: block;
    margin-bottom: 12px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--graphite);
}
.lc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lc-badge,
.bc-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 1;
    padding: 6px 9px;
    background: var(--red);
    color: #fff;
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lc-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.lc-city {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 0.88;
    letter-spacing: -0.01em;
}
.lc-addr {
    font-size: 14.5px;
    color: var(--fog);
}
.lc-phone {
    font-family: var(--display);
    font-stretch: 75%;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.lc-towns {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--steel);
}
.lc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 10px;
}
.btn-sm {
    height: 44px;
    padding: 0 18px;
    font-size: 12px;
}
.lc-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2bd576;
}
.lc-current::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bd576;
}
.lc-link {
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.zip-finder {
    align-self: stretch;
    padding: 28px;
    background: var(--graphite);
}
.zip-finder > p:not(.mega-h) {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fog);
}
.zf {
    display: flex;
    gap: 8px;
}
.zf .field {
    flex: 1;
    min-width: 0;
    height: 48px;
    margin: 0;
    background: var(--carbon);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.zf .field::placeholder {
    color: #80858c;
}
.zf .btn {
    height: 48px;
    padding: 0 20px;
}
.zf-out {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #fff;
}
.zf-out a {
    color: #fff;
}
.mega-company {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.co-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}
.co-proof {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    background: var(--graphite);
}
.co-rating {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.8;
    letter-spacing: -0.03em;
}
.co-proof .stars {
    font-size: 15px;
    letter-spacing: 4px;
}
.co-count {
    font-size: 15px;
    font-weight: 600;
}
.co-lic {
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.06em;
    color: var(--steel);
}

.mmenu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 29;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--carbon);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: mm-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes mm-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.mm-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block: 20px calc(40px + env(safe-area-inset-bottom, 0px));
}
.mm-branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mm-branch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
}
.mm-branch b {
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.mm-branch span {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 0.9;
}
.mm-branch small {
    font: 400 11px/1 var(--mono);
    color: var(--steel);
}
.mm-branch.is-active {
    border-color: var(--red);
    background: color-mix(in srgb, var(--nf-accent) 12%, transparent);
}
.mm-branch.is-active b {
    color: var(--red);
}
.mm-acc {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: none;
    color: #fff;
    text-align: left;
    text-decoration: none;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.9;
    letter-spacing: -0.006em;
    cursor: pointer;
}
.mm-row svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}
.mm-row[aria-expanded='true'] svg {
    transform: rotate(180deg);
}
.mm-panel {
    padding: 4px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mm-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 6px;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.mm-h::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--red);
}
.mm-panel > a,
.mm-group > a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    font-size: 16.5px;
    font-weight: 500;
}
.mm-panel > a span,
.mm-group > a span {
    font: 400 11px/1.6 var(--mono);
    color: var(--steel);
    white-space: nowrap;
}
.mm-loc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mm-loc b {
    font-size: 16px;
}
.mm-loc span {
    font-size: 14px;
    color: var(--fog);
}
.mm-loc a {
    color: #fff;
    font-family: var(--display);
    font-stretch: 75%;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}
.mm-panel .zf {
    margin-top: 18px;
}
.mm-cta {
    display: grid;
    gap: 10px;
}
body.menu-open {
    overflow: hidden;
}
/* The full nav only shows where it has room to breathe. Below 1280px the header keeps the logo, phone, quote button and menu button. */
@media (max-width: 1279px) {
    .nav {
        display: none;
    }
    .menu-btn {
        display: flex;
    }
    .hdr-phone {
        margin-left: auto;
    }
}
@media (min-width: 1280px) {
    .mmenu {
        display: none !important;
    }
}
@media (max-width: 1180px) {
    .util .util-offer {
        display: none;
    }
}
@media (max-width: 760px) {
    .hdr-phone {
        display: none;
    }
    .hdr-call {
        display: flex;
        margin-left: auto;
    }
}
@media (max-width: 760px) {
    .util .util-left {
        display: none;
    }
    .util > .wrap {
        justify-content: flex-end;
    }
    .brand img {
        height: 30px;
    }
}
@media (max-width: 420px) {
    .bs-pre {
        display: none;
    }
}
@media (max-width: 520px) {
    .hdr-cta {
        display: none;
    }
}

/* Branches and service area */
.area .wrap {
    display: block;
}
.branch-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
}
.branch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--carbon);
    color: #fff;
}
.branch-card.is-active {
    box-shadow: inset 0 0 0 2px var(--red);
}
.bc-img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.bc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px 24px;
    padding: 28px 30px 32px;
}
.bc-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.bc-city {
    margin: 10px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(44px, 4.4vw, 64px);
    line-height: 0.86;
    letter-spacing: -0.012em;
}
.bc-addr {
    margin-top: 12px;
    font-size: 15px;
    color: var(--fog);
}
.bc-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    text-align: right;
}
.bc-phone {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 30px;
    line-height: 0.9;
    color: #fff;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.bc-towns {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.area-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 80px;
}
.area-tab {
    height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--nf-ink) 20%, transparent);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.area-tab[aria-selected='true'] {
    background: var(--carbon);
    border-color: var(--carbon);
    color: #fff;
}
.area-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: center;
    margin-top: 40px;
}
@media (max-width: 860px) {
    .branch-cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .bc-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .bc-side {
        align-items: flex-start;
        text-align: left;
    }
}

/* Service detail page */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
}
.crumbs a {
    color: var(--fog);
    text-decoration: none;
}
.crumbs li + li::before {
    content: '/';
    margin-right: 8px;
    color: var(--ash);
}
.calc-sizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.size {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid #dcdcd7;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.size b {
    font-size: 15px;
    font-weight: 600;
}
.size small {
    font: 400 11.5px/1.2 var(--mono);
    color: var(--ash);
}
.size:hover {
    border-color: var(--carbon);
}
.size[aria-pressed='true'] {
    border-color: var(--carbon);
    box-shadow: inset 0 0 0 1px var(--carbon);
}
.toggles {
    display: flex;
    flex-direction: column;
}
.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #ecece8;
    font-size: 14.5px;
    cursor: pointer;
}
.toggle span small {
    display: block;
    font: 400 11px/1.4 var(--mono);
    color: var(--ash);
}
.toggle input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--carbon);
}
.calc-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 2px solid var(--carbon);
}
.calc-total span {
    font: 400 11px/1.5 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.calc-total b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 64px;
    line-height: 0.82;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.inc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: center;
}
.inc-list {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.inc-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.inc-list svg {
    margin-top: 3px;
}
.inc-list b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.inc-list span {
    grid-column: 2;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ash);
}
.inc-photo {
    position: relative;
}
.inc-photo img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}
.inc-photo span {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 10px;
    background: var(--carbon);
    color: #fff;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.signs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 64px;
    background: var(--line);
    border: 1px solid var(--line);
}
.sign {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 34px 30px;
    background: #fff;
}
.sign i {
    width: 10px;
    height: 10px;
    background: var(--red);
}
.sign h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.sign p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--slate);
}
.freq {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: start;
    margin-top: 64px;
}
.freq-tool {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(28px, 3vw, 40px);
    background: var(--carbon);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.select {
    width: 100%;
    height: 54px;
    padding: 0 44px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    background: var(--nf-ink-2)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A3A7AE' stroke-width='1.8'/%3E%3C/svg%3E")
        no-repeat right 16px center;
    color: #fff;
    font: 500 16px/1 var(--body);
    letter-spacing: 0;
    text-transform: none;
    appearance: none;
    cursor: pointer;
}
.freq-out {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.freq-out span {
    display: block;
    font: 400 11px/1.5 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
}
.freq-out b {
    display: block;
    margin-top: 10px;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(56px, 6vw, 84px);
    line-height: 0.84;
    letter-spacing: -0.015em;
}
.freq-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.freq-list li {
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ash);
}
.freq-list b {
    display: block;
    margin-bottom: 6px;
    color: var(--carbon);
}
.freq-plans {
    align-self: flex-start;
    color: #fff;
}
.freq-out p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fog);
}
.rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.rules li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.rules em {
    font: 500 10.5px/1.4 var(--mono);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.rules b {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.rules span {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--slate);
}
.faq {
    margin-top: 56px;
    border-top: 2px solid var(--carbon);
}
.faq details {
    border-bottom: 1px solid var(--line);
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--display);
    font-stretch: 75%;
    font-size: clamp(20px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary i {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.faq summary i::before,
.faq summary i::after {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 2px;
    background: var(--red);
}
.faq summary i::after {
    transform: rotate(90deg);
}
.faq details[open] summary i {
    transform: rotate(45deg);
}
.faq .faq-a {
    max-width: 46em;
    padding: 0 0 30px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--slate);
}
.related {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.rel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 210px;
    padding: 26px 24px 24px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--carbon);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.rel:hover {
    border-color: var(--carbon);
}
.rel small {
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--ash);
}
.rel b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.9;
    letter-spacing: -0.006em;
}
.rel span {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ash);
}
.rel em {
    margin-top: auto;
    font: 600 11px/1 var(--mono);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.upsell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px clamp(40px, 6vw, 96px);
    align-items: center;
}
@media (max-width: 1100px) {
    .related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 860px) {
    .inc-grid,
    .freq,
    .upsell {
        grid-template-columns: minmax(0, 1fr);
    }
    .signs {
        grid-template-columns: 1fr 1fr;
    }
    .rules {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 560px) {
    .signs,
    .related {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Quote page */
.q-hero {
    padding-block: clamp(48px, 6vw, 88px) clamp(132px, 13vw, 184px);
}
.q-hero h1 {
    margin: 24px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(56px, 7vw, 108px);
    line-height: 0.86;
    letter-spacing: -0.012em;
}
.q-hero h1 em {
    font-style: normal;
    color: var(--red);
}
.q-hero p {
    margin: 24px 0 0;
    max-width: 34em;
    font-size: 19px;
    line-height: 1.55;
    color: var(--fog);
}
.q-body {
    background: var(--concrete);
}
.q-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
    margin-top: calc(-1 * clamp(96px, 10vw, 136px));
    padding-bottom: var(--sec);
}
.q-form {
    min-width: 0;
    padding: clamp(24px, 4vw, 56px);
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.q-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
}
.q-steps li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: 500 10.5px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9da3;
}
.q-steps li::before {
    content: '';
    height: 3px;
    background: #e4e4e0;
    transition: background-color 0.25s ease;
}
.q-steps li.on {
    color: var(--carbon);
}
.q-steps li.on::before {
    background: var(--red);
}
.q-steps li.done {
    color: var(--ash);
}
.q-steps li.done::before {
    background: var(--carbon);
}
.q-step h2 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: 0.9;
    letter-spacing: -0.01em;
}
.q-step > p {
    margin: 14px 0 0;
    max-width: 36em;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ash);
}
.q-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}
.q-cat {
    height: 42px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--nf-ink) 20%, transparent);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.q-cat[aria-pressed='true'] {
    background: var(--carbon);
    border-color: var(--carbon);
    color: #fff;
}
.q-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.q-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid #dcdcd7;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.q-opt b {
    padding-right: 16px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
}
.q-opt small {
    font: 400 11px/1.3 var(--mono);
    color: var(--ash);
}
.q-opt:hover {
    border-color: var(--carbon);
}
.q-opt[aria-pressed='true'] {
    border-color: var(--carbon);
    box-shadow: inset 0 0 0 1px var(--carbon);
}
.q-opt[aria-pressed='true']::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 12px;
    width: 9px;
    height: 9px;
    background: var(--red);
}
.q-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.q-seg .q-opt {
    min-height: 68px;
}
.q-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}
.q-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--carbon);
}
.q-label small {
    margin-left: 6px;
    color: var(--ash);
    letter-spacing: 0.06em;
    text-transform: none;
}
.q-input,
.q-textarea {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #bdbdb7;
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-size: 17px;
    color: var(--carbon);
}
.q-textarea {
    height: auto;
    min-height: 140px;
    padding: 14px 16px;
    line-height: 1.55;
    resize: vertical;
}
.q-input:focus,
.q-textarea:focus {
    outline: 2px solid var(--carbon);
    outline-offset: 0;
    border-color: var(--carbon);
}
.q-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.q-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    padding: 24px;
    border: 1.5px dashed #bdbdb7;
    background: #fafaf8;
    color: var(--ash);
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}
.q-drop.drag,
.q-drop:hover {
    border-color: var(--carbon);
    background: var(--concrete);
}
.q-drop b {
    color: var(--carbon);
    font-weight: 600;
}
.q-drop small {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.06em;
}
.q-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.q-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.q-branch {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--concrete);
    font-size: 15px;
    line-height: 1.5;
}
.q-branch img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.q-note {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ash);
}
.q-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ash);
    cursor: pointer;
}
.q-consent input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--carbon);
}
.q-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.q-nav .txt-btn {
    align-self: center;
}
.q-error {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--nf-bad);
}
.q-side {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.q-summary {
    padding: 28px;
    background: var(--carbon);
    color: #fff;
}
.q-summary h2 {
    margin: 0 0 14px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.q-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14.5px;
}
.q-row span {
    color: var(--steel);
    flex-shrink: 0;
}
.q-row b {
    font-weight: 600;
    text-align: right;
}
.q-est {
    margin-top: 20px;
}
.q-est span {
    display: block;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel);
}
.q-est b {
    display: block;
    margin-top: 10px;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 56px;
    line-height: 0.85;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.q-est small {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--steel);
}
.q-trust {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
}
.q-trust ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.45;
}
.q-trust li {
    display: flex;
    gap: 12px;
}
.q-trust svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.q-done h2 em {
    font-style: normal;
    color: var(--red);
}
.q-ref {
    display: inline-block;
    margin-top: 18px;
    padding: 7px 10px;
    background: var(--concrete);
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.q-timeline {
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.q-timeline li {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.55;
}
.q-timeline time {
    font: 500 11px/1.6 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
}
@media (max-width: 1100px) {
    .q-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .q-side {
        position: static;
    }
}
@media (max-width: 760px) {
    .q-grid {
        grid-template-columns: 1fr 1fr;
    }
    .q-seg {
        grid-template-columns: 1fr 1fr;
    }
    .q-two {
        grid-template-columns: minmax(0, 1fr);
    }
    .q-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .q-steps li {
        font-size: 0;
        gap: 0;
    }
    .q-timeline li {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}
@media (max-width: 480px) {
    .q-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Refinements */
.mega-services {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr);
}
.mega-col a {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
}
.mega-col .mi-name {
    grid-column: 1/-1;
}
.mega-col .mi-blurb {
    grid-column: 1;
    grid-row: 2;
}
.mega-col .mi-from {
    grid-column: 2;
    grid-row: 2;
    line-height: 1.5;
}
.hero > .wrap {
    gap: 48px clamp(32px, 4.4vw, 64px);
}
.book-col {
    flex: 0 1 420px;
}
.slogan {
    font-size: clamp(56px, 6.9vw, 104px);
}
.concept {
    max-width: calc(100vw - 32px);
    white-space: normal;
}
.svc-h1 {
    margin: 28px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(56px, 6.9vw, 104px);
    line-height: 0.86;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.svc-h1 span {
    display: block;
    color: var(--red);
}
.hero .crumbs + .eyebrow {
    margin-top: 0;
}
.steps.steps-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .steps.steps-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .steps-4 .node {
        position: relative;
    }
}
@media (max-width: 1100px) {
    .rail:has(.steps-4)::before {
        display: none;
    }
}
@media (max-width: 860px) {
    .steps.steps-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}
.bk .btn {
    width: 100%;
}
.q-hero > .wrap {
    display: block;
    padding-block: clamp(40px, 6vw, 88px) clamp(128px, 13vw, 184px);
}
.q-hero {
    padding: 0;
}
.q-seg.q-seg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.q-done {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.q-done .h2 {
    margin-top: 18px;
}
.q-done .h2 em {
    font-style: normal;
    color: var(--red);
}
.q-done .q-ref {
    align-self: flex-start;
}
.q-done .btns {
    margin-top: 28px;
}
.q-trust li span {
    min-width: 0;
}
@media (max-width: 760px) {
    .q-seg.q-seg-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}
html,
body {
    overflow-x: clip;
}
.crew .wrap {
    align-items: start;
}
.crew-photos {
    position: sticky;
    top: 120px;
}
@media (max-width: 980px) {
    .crew-photos {
        position: relative;
        top: auto;
    }
}
body.menu-open .sticky {
    display: none;
}
@media (max-width: 760px) {
    .concept {
        display: none;
    }
}

/* ===== Full site: shared additions ===== */
.skip {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 100;
    padding: 12px 16px;
    background: var(--red);
    color: #fff;
    font: 600 13px/1 var(--body);
    text-decoration: none;
}
.skip:focus {
    top: 16px;
}
.live.is-closed {
    color: var(--fog);
}
.live.is-closed::before {
    background: var(--nf-warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-warn) 20%, transparent);
}
.chip-live.is-closed {
    background: #f3f3ef;
    color: var(--ash);
}
.chip-live.is-closed::before {
    background: var(--steel);
}
.util-hours {
    color: var(--steel);
}
.util .util-offer {
    color: var(--steel);
    text-decoration: none;
}
.util .util-offer:hover {
    color: #fff;
}
.bs-all {
    display: block;
    margin-top: 6px;
    padding: 12px 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font: 600 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
@media (max-width: 1240px) {
    .util-hours {
        display: none;
    }
}
.inc-photo {
    margin: 0;
}
.inc-photo figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 10px;
    background: var(--carbon);
    color: #fff;
    font: 400 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

/* Mega menus */
.mega-services {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.12fr);
    gap: clamp(24px, 2.6vw, 44px);
}
.mega-services .mega-col a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}
.mega-services .mega-col .mi-name {
    font-size: 15px;
    line-height: 1.3;
}
.mega-services .mega-col .mi-from {
    flex-shrink: 0;
    line-height: 1.3;
}
.mega-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}
.mega-side .mega-feature {
    padding-bottom: 20px;
}
.mega-side .mf-title {
    font-size: 26px;
}
.mega-side .mf-kicker,
.mega-side .mf-title,
.mega-side .mf-meta {
    padding-inline: 18px;
}
.mega-com .mega-h {
    margin-bottom: 4px;
}
.mega-foot .mf-links {
    display: flex;
    gap: 28px;
}
.mega-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr);
    align-items: stretch;
}
.mp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.mp-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
}
.mp-card.is-feat {
    background: #fff;
    color: var(--carbon);
    border-color: #fff;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.mp-tag {
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.mp-name {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.92;
    letter-spacing: -0.006em;
}
.mp-for {
    font-size: 14px;
    line-height: 1.45;
    color: var(--steel);
}
.mp-card.is-feat .mp-for {
    color: var(--ash);
}
.mp-price {
    margin-top: 4px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mp-card.is-feat .mp-price {
    border-color: var(--line);
}
.mp-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--fog);
}
.mp-card.is-feat .mp-list {
    color: var(--slate);
}
.mp-list span {
    position: relative;
    padding-left: 16px;
}
.mp-list span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 2px;
    background: var(--red);
}
.mp-cta {
    margin-top: auto;
    padding-top: 10px;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.mp-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 26px;
    background: var(--graphite);
}
.mp-side p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fog);
}
.mp-side .mega-h {
    color: #fff;
}
.co-hours {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font: 400 11px/1.7 var(--mono);
    letter-spacing: 0.06em;
    color: var(--fog);
}
.mm-panel .mm-all,
.mm-loc-link {
    margin-top: 6px;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red) !important;
    text-decoration: none;
}
.mm-hours {
    margin: 6px 0 0;
    font: 400 11px/1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
}

/* Footer */
.ftr-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) repeat(3, minmax(0, 0.85fr));
    gap: 48px 36px;
}
.ftr-brand p {
    margin: 20px 0 0;
    max-width: 26em;
    line-height: 1.6;
}
.ftr-hours {
    margin: 22px 0 0;
    padding: 0;
}
.ftr-hours div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 290px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
}
.ftr-hours dt {
    color: var(--steel);
}
.ftr-hours dd {
    margin: 0;
    color: #fff;
}
.ftr-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ftr-social a {
    color: var(--fog);
    text-decoration: none;
}
.ftr-social a:hover {
    color: #fff;
}
.ftr-branch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.ftr-branch address {
    margin-top: 0;
}
.ftr-branch > a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ftr-branch .ftr-mail {
    font-weight: 400;
    font-size: 13.5px;
    color: var(--fog);
    word-break: break-all;
}
.ftr-branch .ftr-more {
    margin-top: 6px;
    font: 600 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.legal-links a {
    color: inherit;
    text-decoration: none;
}
.legal-links a:hover {
    color: #fff;
}
@media (max-width: 1180px) {
    .ftr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ftr-brand {
        grid-column: 1/-1;
    }
}
@media (max-width: 640px) {
    .ftr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Page hero */
.page-hero {
    position: relative;
    background: var(--carbon);
    color: #fff;
    overflow: hidden;
}
.ph-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    object-fit: cover;
}
.ph-scrim {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--carbon) 0%,
        color-mix(in srgb, var(--nf-ink) 55%, transparent) 34%,
        color-mix(in srgb, var(--nf-ink) 12%, transparent) 72%,
        color-mix(in srgb, var(--nf-ink) 30%, transparent) 100%
    );
}
.page-hero .wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-end;
    padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 120px);
}
.ph-copy {
    flex: 1 1 560px;
    min-width: 0;
    max-width: 780px;
}
.page-hero .eyebrow {
    color: #fff;
}
.ph-title {
    margin: 28px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(60px, 7.6vw, 120px);
    line-height: 0.86;
    letter-spacing: -0.014em;
    text-wrap: balance;
}
.ph-title em {
    display: block;
    font-style: normal;
    color: var(--red);
}
.ph-lead {
    margin: 32px 0 0;
    max-width: 34em;
    font-size: clamp(18px, 1.45vw, 20px);
    line-height: 1.55;
    color: var(--fog);
}
.page-hero .btns .btn-ghost {
    border-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 900px) {
    .ph-photo {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    .ph-scrim {
        display: none;
    }
    .page-hero .wrap {
        padding-top: 40px;
    }
}

/* Service page additions */
.price-card .pc-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.pc-rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #ecece8;
    font-size: 15px;
}
.pc-rows b {
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.band-warranty {
    background: var(--carbon);
    color: #fff;
}
.band-warranty .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    padding-block: 28px;
}
.bw-tag {
    padding: 7px 10px;
    background: var(--red);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.band-warranty p {
    flex: 1 1 420px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}
.band-warranty .link-mono {
    color: #fff;
}
.signs.signs-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof-band {
    background: var(--concrete);
    border-top: 1px solid var(--line);
}
.proof-band .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 48px;
    padding-block: 28px;
}
.pb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--carbon);
    text-decoration: none;
}
.pb-item b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 44px;
    line-height: 0.9;
}
.pb-item > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
}
.pb-item .stars {
    font-size: 12px;
}
.pb-lic {
    margin-left: auto;
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.06em;
    color: var(--ash);
}
.video-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px clamp(40px, 6vw, 96px);
    align-items: center;
}
.video {
    margin: 0;
}
.video-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--carbon);
    cursor: pointer;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.video-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition:
        opacity 0.2s ease,
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.video-btn:hover img {
    opacity: 1;
    transform: scale(1.02);
}
.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
}
.video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
}
.video figcaption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
}
.video figcaption b {
    font-size: 17px;
    font-weight: 600;
}
.video figcaption span {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ash);
}
.video-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 56px;
}
.plans-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plan-alt {
    margin: -8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ash);
}
.plan.feat .plan-alt {
    color: var(--steel);
}
.plan-alt b {
    color: var(--carbon);
    font-weight: 600;
}
.plan.feat .plan-alt b {
    color: #fff;
}
.plan-acts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}
.plan-acts .btn {
    width: 100%;
}
.plan-more {
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
}
.plans-grid.three .plan-price b {
    font-size: 72px;
}
.upsell .link-mono {
    display: inline-block;
}
@media (max-width: 1100px) {
    .plans-grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .signs.signs-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 760px) {
    .plans-grid.three {
        grid-template-columns: minmax(0, 1fr);
    }
    .video-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .pb-lic {
        margin-left: 0;
    }
}
@media (max-width: 560px) {
    .signs.signs-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hubs */
.subnav {
    position: sticky;
    top: 80px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(10px);
}
.subnav .wrap {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav .wrap::-webkit-scrollbar {
    display: none;
}
.subnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    border-bottom: 2px solid transparent;
    font: 500 11.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
    text-decoration: none;
    white-space: nowrap;
}
.subnav a:hover {
    color: var(--carbon);
    border-color: var(--red);
}
.subnav a span {
    color: var(--red);
}
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 56px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.svc-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    padding: 28px 28px 26px;
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--carbon);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pricing .svc-card {
    background: var(--concrete);
}
.svc-card:hover {
    background: #fafaf8;
}
.sc-from {
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--ash);
}
.sc-name {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 0.9;
    letter-spacing: -0.008em;
}
.sc-blurb {
    font-size: 15px;
    line-height: 1.5;
    color: var(--slate);
}
.sc-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.svc-card:hover .sc-go svg {
    transform: translateX(3px);
}
.sc-go svg {
    transition: transform 0.2s ease;
}
@media (max-width: 1000px) {
    .svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .svc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .subnav {
        top: 72px;
    }
}

/* Memberships */
.cmp-scroll {
    margin-top: 56px;
    overflow-x: auto;
}
.compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}
.compare caption {
    caption-side: top;
    padding-bottom: 18px;
    text-align: left;
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.compare th,
.compare td {
    padding: 18px 20px 18px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.compare thead th {
    border-bottom: 2px solid var(--carbon);
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 0.95;
}
.compare thead th:first-child {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
}
.compare thead a {
    color: inherit;
    text-decoration: none;
}
.compare tbody th {
    font-size: 15.5px;
    font-weight: 600;
    width: 34%;
}
.compare td {
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--slate);
}
.cmp-no {
    color: var(--steel);
}
.which {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.which-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 28px;
    border-top: 3px solid var(--red);
    background: var(--concrete);
    color: var(--carbon);
    text-decoration: none;
}
.which-card small {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.which-card b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 0.92;
}
.which-card span {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--slate);
}
.which-card em {
    margin-top: auto;
    padding-top: 8px;
    font: 600 11px/1 var(--mono);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.plan-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: start;
}
.pd-block + .pd-block {
    margin-top: 72px;
}
.pd-block .h2 {
    margin-bottom: 8px;
}
.pd-h3 {
    margin: 20px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 0.9;
}
.pd-side {
    position: sticky;
    top: 112px;
}
.checklist {
    columns: 2;
    column-gap: 40px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.checklist li {
    break-inside: avoid;
    padding: 14px 0 14px 22px;
    border-bottom: 1px solid var(--line);
    position: relative;
    font-size: 15.5px;
    line-height: 1.45;
}
.checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    width: 10px;
    height: 2px;
    background: var(--red);
}
.value-table td:first-child {
    width: auto;
}
.value-table tr.total td {
    border-top: 2px solid var(--carbon);
    border-bottom: 0;
}
.value-table tr.total .from {
    color: var(--red);
}
.extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    background: var(--line-d);
    border: 1px solid var(--line-d);
}
.extras li {
    padding: 28px 26px;
    background: var(--carbon);
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 1000px) {
    .plan-detail {
        grid-template-columns: minmax(0, 1fr);
    }
    .pd-side {
        position: static;
    }
    .which {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    .checklist {
        columns: 1;
    }
}

/* Locations */
.finder .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px clamp(40px, 6vw, 96px);
    align-items: end;
}
.finder .h2 {
    font-size: clamp(48px, 5.6vw, 84px);
}
.finder-box {
    padding: 32px;
    background: var(--graphite);
}
.zf-lg .field {
    height: 60px;
    font-size: 18px;
}
.zf-lg .btn {
    height: 60px;
}
.finder-note {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--steel);
}
.towns-all {
    columns: 5 180px;
    column-gap: 32px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.towns-all li {
    break-inside: avoid;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 500;
}
.branch-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: start;
}
.bi-list {
    margin: 40px 0 0;
    padding: 0;
    border-top: 2px solid var(--carbon);
}
.bi-list div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.bi-list dt {
    font: 500 11px/1.6 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.bi-list dd {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.55;
}
.bi-list dd a {
    color: var(--carbon);
}
.bi-list small {
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
}
.bi-phone {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    text-decoration: none;
}
.bi-map {
    max-width: none;
}
.bi-near {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.bi-near li {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 500;
}
.bi-near span {
    font: 400 11px/1.6 var(--mono);
    color: var(--ash);
}
.districts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.districts li {
    padding: 26px 24px;
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}
.other-branch {
    background: var(--concrete);
    border-top: 1px solid var(--line);
}
.other-branch .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.ob-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.dark-ink {
    color: var(--carbon) !important;
    font-size: 44px;
}
.bc-city a {
    color: inherit;
    text-decoration: none;
}
.bc-img {
    display: block;
}
@media (max-width: 900px) {
    .finder .wrap,
    .branch-info {
        grid-template-columns: minmax(0, 1fr);
    }
    .districts {
        grid-template-columns: minmax(0, 1fr);
    }
    .ob-side {
        align-items: flex-start;
    }
}

/* Answers and articles */
.ans-cat {
    font: 500 10.5px/1.3 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.ans h3 a {
    color: inherit;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.ans h3 a:hover {
    border-bottom-color: var(--red);
}
.qa-group {
    margin-top: 64px;
}
.qa-group .faq {
    margin-top: 20px;
}
.qa-h {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 48px;
    line-height: 0.9;
}
.faq-a .link-mono {
    margin-left: 6px;
    white-space: nowrap;
}
.article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 56px clamp(40px, 7vw, 120px);
    align-items: start;
}
.prose {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--slate);
}
.prose h2 {
    margin: 56px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--carbon);
}
.prose p {
    margin: 20px 0 0;
}
.prose .lede {
    margin: 0;
    font-size: 21px;
    line-height: 1.55;
    color: var(--carbon);
}
.prose ul,
.prose ol {
    margin: 20px 0 0;
    padding-left: 22px;
}
.prose li {
    margin-top: 8px;
}
.prose li::marker {
    color: var(--red);
}
.prose a {
    color: var(--carbon);
    border-bottom: 1px solid var(--red);
}
.prose .note {
    padding: 16px 18px;
    background: var(--concrete);
    font-size: 15px;
    line-height: 1.55;
}
.prose .table-scroll {
    margin-top: 24px;
    overflow-x: auto;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
}
.prose th {
    padding: 0 16px 12px 0;
    border-bottom: 2px solid var(--carbon);
    text-align: left;
    font: 500 11px/1.3 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--carbon);
}
.prose td {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.short-answer {
    padding: 28px 30px;
    background: var(--carbon);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.short-answer span {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.short-answer p {
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.55;
    color: #fff;
}
.article-by {
    margin-top: 48px;
}
.article-side {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-side .rel {
    min-height: 0;
}
.side-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 26px;
    background: var(--concrete);
}
.side-cta b {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.side-cta > a:not(.btn):not(.link-mono) {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--carbon);
    text-decoration: none;
}
.draft-note {
    margin: 0 0 32px !important;
    padding: 14px 16px;
    border-left: 3px solid var(--red);
    background: var(--concrete);
    font: 500 12px/1.5 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--carbon);
}
@media (max-width: 1000px) {
    .article {
        grid-template-columns: minmax(0, 1fr);
    }
    .article-side {
        position: static;
    }
}

/* Careers */
.jobs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.job-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 34px 32px 30px;
    background: var(--carbon);
    color: #fff;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.jc-meta {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.job-card b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 52px;
    line-height: 0.88;
}
.jc-head {
    font-size: 16px;
    line-height: 1.5;
    color: var(--fog);
}
.jc-pay {
    font-family: var(--display);
    font-stretch: 75%;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.job-card em {
    margin-top: auto;
    padding-top: 10px;
    font: 600 11px/1 var(--mono);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    background: var(--line-d);
    border: 1px solid var(--line-d);
}
.perks li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 28px;
    background: var(--carbon);
}
.perks b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 0.92;
}
.perks span {
    font-size: 15px;
    line-height: 1.55;
    color: var(--steel);
}
.job-side .side-cta {
    gap: 14px;
}
.js-pay {
    font-family: var(--display) !important;
    font-stretch: 62%;
    font-weight: 800 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--carbon) !important;
}
.job-side .side-cta > span {
    font-size: 14px;
    color: var(--ash);
}
.js-perks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.4;
}
.js-perks li {
    display: flex;
    gap: 10px;
}
.js-perks svg {
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .jobs,
    .perks {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Pricing page */
.promise-strip {
    background: var(--carbon);
    color: #fff;
    border-top: 1px solid var(--line-d);
}
.promise-strip .wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.promise-strip .wrap > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 24px 30px 28px;
    border-left: 1px solid var(--line-d);
}
.promise-strip .wrap > div:first-child {
    padding-left: 0;
    border-left: 0;
}
.promise-strip b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 0.92;
}
.promise-strip span {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--steel);
}
.price-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 64px;
    margin-top: 56px;
}
.pl-service h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.92;
}
.pl-service h3 a {
    color: inherit;
    text-decoration: none;
}
.pl-table {
    width: 100%;
    margin-top: 18px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.pl-table th {
    padding: 0 12px 10px 0;
    border-bottom: 2px solid var(--carbon);
    text-align: left;
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pl-table th:not(:first-child),
.pl-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}
.pl-table td {
    padding: 12px 12px 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    vertical-align: top;
}
.pl-table td:first-child {
    font-weight: 600;
}
.pl-table td small {
    display: block;
    margin-top: 3px;
    font: 400 10.5px/1.3 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ash);
    font-weight: 400;
}
.pl-table td:nth-child(2) {
    font-weight: 600;
}
.pl-table td:nth-child(3) {
    color: var(--ash);
}
.pl-service .link-mono {
    margin-top: 14px;
}
@media (max-width: 900px) {
    .promise-strip .wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .promise-strip .wrap > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
    .promise-strip .wrap > div:nth-child(n + 3) {
        border-top: 1px solid var(--line-d);
    }
    .price-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Offers, financing, reviews */
.coupons-page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 56px;
}
.cp-amount {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 64px;
    line-height: 0.85;
    letter-spacing: -0.01em;
}
.coupons-page .coupon b {
    font-size: 28px;
}
.coupons-page .coupon div {
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: 0.08em;
}
.discounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
}
.discounts li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 26px;
    background: #fff;
}
.discounts b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 56px;
    line-height: 0.85;
    color: var(--red);
}
.discounts span {
    font-size: 16px;
    font-weight: 600;
}
.lenders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.lender {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 34px 32px;
    border: 1px solid var(--line);
}
.ld-n {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    color: var(--red);
}
.lender h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 0.9;
}
.lender p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--slate);
}
.platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: 24px;
    margin-top: 56px;
}
.platform {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 30px;
    background: var(--concrete);
    color: var(--carbon);
    text-decoration: none;
}
.platform > b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.8;
    letter-spacing: -0.03em;
}
.pf-src {
    font-size: 17px;
    font-weight: 600;
}
.pf-count {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ash);
}
.platform em {
    margin-top: auto;
    padding-top: 10px;
    font: 600 11px/1 var(--mono);
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
}
.pf-badges ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--carbon);
}
.pf-badges li {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}
.rv-platforms {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    border-top: 2px solid var(--carbon);
}
.rv-platforms a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--carbon);
    text-decoration: none;
}
.rv-platforms b {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
}
.rv-platforms span {
    font: 400 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ash);
}
.rv-link {
    margin-top: 24px;
}
.leave {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.leave .btns {
    margin-top: 0;
}
@media (max-width: 1000px) {
    .coupons-page,
    .platforms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .discounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .coupons-page,
    .platforms,
    .lenders,
    .discounts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* About and contact */
.story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: center;
}
.story-copy p {
    margin: 24px 0 0;
    max-width: 32em;
    font-size: 18px;
    line-height: 1.65;
    color: var(--slate);
}
.story-copy p strong {
    color: var(--carbon);
}
.story-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.story-photos img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 30px;
    background: var(--carbon);
    color: #fff;
}
.contact-card.is-active {
    box-shadow: inset 0 0 0 2px var(--red);
}
.contact-card h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 52px;
    line-height: 0.86;
}
.cc-phone {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.contact-card dl {
    margin: 8px 0 0;
    padding: 0;
    border-top: 1px solid var(--line-d);
}
.contact-card dl div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-d);
    font-size: 14.5px;
}
.contact-card dt {
    font: 400 10.5px/1.6 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.contact-card dd {
    margin: 0;
    color: var(--fog);
    word-break: break-word;
}
.contact-card dd a {
    color: #fff;
}
.cc-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: auto;
    padding-top: 12px;
}
.hours-card {
    background: var(--concrete);
    color: var(--carbon);
}
.hours-card dl {
    border-color: var(--line);
}
.hours-card dl div {
    border-color: var(--line);
}
.hours-card dt {
    color: var(--ash);
}
.hours-card .bc-label {
    color: var(--red-ink);
}
.hours-card dd {
    color: var(--carbon);
    font-weight: 600;
}
.cc-note {
    margin: auto 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ash);
}
.contact-form-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px clamp(40px, 6vw, 96px);
    align-items: start;
}
.msg-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px;
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.msg-form .btn {
    align-self: flex-start;
}
.msg-done {
    margin: 0;
    padding: 14px 16px;
    background: #e7f6ed;
    color: var(--nf-good-text);
    font-size: 15px;
    font-weight: 500;
}
.nf-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
}
.nf-links a {
    font: 600 12px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--carbon);
    text-decoration: none;
}
@media (max-width: 1000px) {
    .story,
    .contact-form-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}
.zf-hours {
    margin: auto 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
}
.zip-finder {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.zip-finder > p:not(.mega-h):not(.zf-out):not(.zf-hours) {
    margin: 0;
}
.bi-phone {
    white-space: nowrap;
    font-size: clamp(30px, 8vw, 40px);
}
.bi-list dd,
.contact-card dd {
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    .towns-all {
        columns: 2;
        column-gap: 20px;
    }
    .towns-all li {
        font-size: 14px;
    }
    .bi-list div {
        grid-template-columns: 96px minmax(0, 1fr);
    }
    .contact-card dd {
        font-size: 13.5px;
    }
}
.from-pre {
    display: block;
    margin-bottom: 8px;
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ash);
}
.ro b .ro-pre {
    margin: 0 8px 0 0;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--steel);
}
.mega-services .mega-col .mi-from {
    font-size: 10.5px;
    letter-spacing: 0.02em;
}

/* ===== Accessibility and headline fixes ===== */
:root {
    --red-ink: var(--nf-accent-text);
    --red-glow: var(--nf-accent-light);
}
.hero .svc-h1 {
    margin: 28px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: clamp(52px, 6.4vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    text-wrap: balance;
}
.hero .svc-h1 span {
    display: block;
    color: var(--red);
}
.link-mono,
.rules em,
.sc-go,
.rel em,
.which-card em,
.platform em,
.ans-cat,
.ld-n,
.tile-cta span,
.bk-kicker,
.plan-more,
.mp-card.is-feat .mp-tag,
.mp-card.is-feat .mp-cta {
    color: var(--red-ink);
}
.dark .link-mono,
.plan.feat .plan-more,
.mp-tag,
.mp-cta,
.mf-kicker,
.lc-label,
.bc-label,
.ftr-branch .ftr-more,
.short-answer span,
.job-card em,
.mm-panel .mm-all,
.mm-loc-link,
.mm-h::before {
    color: var(--red-glow);
}
.ftr .ftr-h {
    margin: 0 0 16px;
    font: 400 10.5px/1.3 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.offers .eyebrow,
.offers-copy > p,
.coupon p,
.coupon div,
.coupon div span:last-child {
    color: #fff;
}
.offers .eyebrow::before {
    background: #fff;
}
span.spot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 10.5px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nf-accent) 28%, transparent);
    cursor: default;
}
.sys-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.sys-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.sys-chip i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    font: 600 11px/1 var(--mono);
    font-style: normal;
}
.sys-chip[aria-pressed='true'] {
    background: #fff;
    color: var(--carbon);
}

/* Quote flow refinements */
.q-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 14px 0 0;
    padding: 12px 16px;
    background: var(--concrete);
    font-size: 15px;
}
.q-chosen span {
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
}
.q-chosen b {
    font-weight: 600;
}
.q-chosen .txt-btn {
    margin-left: auto;
    font-size: 14px;
}
.q-nav {
    align-items: center;
}
.q-free {
    margin-left: auto;
    margin-right: 16px;
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ash);
}
.q-input[aria-invalid='true'],
.q-textarea[aria-invalid='true'] {
    border-color: var(--nf-bad);
    box-shadow: inset 0 0 0 1px var(--nf-bad);
}
select.q-input {
    appearance: none;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230B0B0C' stroke-width='1.8'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")
        no-repeat right 16px center;
    padding-right: 40px;
}
.q-step h2:focus,
.q-done h2:focus {
    outline: none;
}
.q-free-proof {
    display: none;
}
@media (max-width: 480px) {
    .q-nav {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .q-free {
        order: -1;
        flex: 1 0 100%;
        margin: 0;
        text-align: center;
    }
    .q-free-proof {
        display: inline;
    }
}

/* ===== Paid-ad landing pages ===== */
.lp-body {
    background: #fff;
}
.lp-hdr {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--nf-ink) 97%, transparent);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-hdr .wrap {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.lp-hdr .brand img {
    height: 34px;
    width: auto;
}
.lp-hdr-proof {
    margin-left: auto;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
    white-space: nowrap;
}
.lp-hdr-proof .stars {
    font-size: 12px;
    letter-spacing: 2px;
    margin-right: 6px;
}
.lp-hdr .lp-hdr-phone {
    display: flex;
    margin-left: 8px;
}
.lp-hdr .lp-hdr-phone small {
    display: block;
}
.lp-hdr .lp-hdr-call {
    display: none;
}
.lp-hero {
    position: relative;
    background: var(--carbon);
    color: #fff;
    overflow: hidden;
}
.lp-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    object-fit: cover;
}
.lp-scrim {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--carbon) 0%,
        color-mix(in srgb, var(--nf-ink) 78%, transparent) 30%,
        color-mix(in srgb, var(--nf-ink) 35%, transparent) 70%,
        color-mix(in srgb, var(--nf-ink) 55%, transparent) 100%
    );
}
.lp-hero .wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 40px clamp(32px, 5vw, 80px);
    align-items: center;
    padding-block: clamp(36px, 5vw, 72px);
}
.lp-copy {
    flex: 1 1 520px;
    min-width: 0;
    max-width: 680px;
}
.lp-hero .eyebrow {
    color: #fff;
}
.lp-h1 {
    margin: 24px 0 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(48px, 6vw, 92px);
    line-height: 0.88;
    letter-spacing: -0.012em;
    text-wrap: balance;
}
.lp-h1 span {
    display: block;
    color: var(--red);
}
.lp-lead {
    margin: 24px 0 0;
    max-width: 32em;
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.55;
    color: var(--fog);
}
.lp-points {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 24px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.lp-points li {
    display: flex;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--fog);
}
.lp-points li b {
    color: #fff;
    font-weight: 600;
}
.lp-points svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.lp-form-col {
    flex: 0 1 440px;
    min-width: 0;
    margin-left: auto;
}
.lp-card .bk-title {
    margin: 10px 0 0;
}
.lp-options {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-options legend {
    margin-bottom: 12px;
    padding: 0;
}
.lp-options .opt[aria-pressed='true'] {
    border-color: var(--carbon);
    box-shadow: inset 0 0 0 1px var(--carbon);
}
.lp-card label {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.lp-card .field {
    margin-top: 6px;
}
.lp-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.lp-cover {
    margin: -6px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--nf-good-text);
}
.lp-card .consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ash);
}
.lp-card .btn {
    width: 100%;
    height: 58px;
    font-size: 14px;
}
.lp-card .bk-foot a {
    color: var(--carbon);
    font-weight: 600;
}
.lp-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-done {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lp-done:focus {
    outline: none;
}
.lp-done-note {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--slate);
}
.lp-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: start;
}
.lp-prices {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px;
    background: var(--concrete);
}
.lp-price-rows {
    margin: 0;
}
.lp-offer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1.5px dashed var(--red);
    background: #fff;
}
.lp-offer-amount {
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    font-size: 44px;
    line-height: 0.9;
    color: var(--red);
}
.lp-offer b {
    font-size: 16px;
}
.lp-offer p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ash);
}
.lp-ftr {
    background: var(--carbon);
    color: var(--steel);
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.06em;
}
.lp-ftr .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    justify-content: space-between;
    padding-block: 28px 96px;
}
.lp-ftr .legal-links a {
    color: var(--fog);
}
@media (max-width: 1100px) {
    .lp-hdr-proof {
        display: none;
    }
}
@media (max-width: 900px) {
    .lp-photo,
    .lp-scrim {
        display: none;
    }
    .lp-two-col {
        grid-template-columns: minmax(0, 1fr);
    }
    .lp-prices {
        position: static;
    }
    .lp-form-col {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .lp-hero .wrap {
        padding-block: 28px 40px;
    }
}
@media (max-width: 760px) {
    .lp-hdr .wrap {
        height: 64px;
        gap: 16px;
    }
    .lp-hdr .brand img {
        height: 28px;
    }
    .lp-hdr .lp-hdr-phone {
        margin-left: auto;
    }
    .lp-hdr .lp-hdr-phone small {
        display: none;
    }
    .lp-hdr .lp-hdr-phone span {
        font-size: 19px;
    }
    .lp-sticky {
        display: grid;
    }
    .lp-points li:nth-child(n + 3) {
        display: none;
    }
    .lp-hero .eyebrow {
        display: none;
    }
    .lp-hero .wrap {
        padding-block: 24px 36px;
        gap: 28px;
    }
    .lp-h1 {
        margin-top: 0;
    }
    .lp-lead {
        margin-top: 16px;
    }
    .lp-points {
        margin-top: 20px;
        padding-top: 18px;
    }
}
@media (max-width: 480px) {
    .lp-card.bk {
        padding: 24px 18px 20px;
    }
    .lp-options .opt {
        font-size: 14px;
        padding: 8px 10px;
        gap: 10px;
        min-height: 52px;
    }
}
@media (max-width: 340px) {
    .lp-hdr .lp-hdr-phone {
        display: none;
    }
    .lp-hdr .lp-hdr-call {
        display: flex;
        margin-left: auto;
    }
}
@media (max-width: 420px) {
    .lp-two {
        grid-template-columns: minmax(0, 1fr);
    }
}
.q-step > .q-chosen {
    max-width: none;
    color: var(--carbon);
}
@media (max-width: 760px) {
    .q-hero .crumbs,
    .q-hero .eyebrow {
        display: none;
    }
    .q-hero > .wrap {
        padding-block: 20px 120px;
    }
    .q-hero h1 {
        margin-top: 0;
        font-size: 46px;
    }
    .q-hero p {
        margin-top: 12px;
        font-size: 15.5px;
        line-height: 1.5;
    }
    .q-steps {
        margin-bottom: 28px;
    }
}

/* Size sweep fixes: long labels wrap instead of clipping, and headings fit their column */
.btn {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    text-wrap: balance;
}
@media (max-width: 420px) {
    .plan-top,
    .bk-top {
        flex-wrap: wrap;
    }
}
.pricing-intro .h2 {
    font-size: clamp(48px, 4.6vw, 72px);
}
.faq summary i {
    margin-right: 3px;
}
.lp-sticky {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
    .q-hours {
        display: none;
    }
}
/* Phones and tablets: the hero photo sits behind the headline instead of pushing it below the fold */
@media (max-width: 900px) {
    .hero-photo {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: min(600px, 78vh);
        aspect-ratio: auto;
        object-position: 40% 40%;
    }
    .hero-scrim {
        display: block;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: min(600px, 78vh);
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--nf-ink) 50%, transparent) 0%,
            color-mix(in srgb, var(--nf-ink) 72%, transparent) 50%,
            var(--carbon) 100%
        );
    }
}
@media (max-width: 900px) {
    .ph-photo {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: min(560px, 75vh);
        aspect-ratio: auto;
    }
    .ph-scrim {
        display: block;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: min(560px, 75vh);
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--nf-ink) 50%, transparent) 0%,
            color-mix(in srgb, var(--nf-ink) 74%, transparent) 50%,
            var(--carbon) 100%
        );
    }
    .page-hero .wrap {
        padding-top: 32px;
    }
}
/* Second sweep fixes: long single words at 1024 and on 320 to 360 px phones */
.towns a {
    flex-wrap: wrap;
    column-gap: 8px;
}
.towns span {
    margin-left: auto;
}
.bc-city {
    font-size: clamp(40px, 4vw, 64px);
}
.contact-card h3 {
    font-size: clamp(40px, 4.4vw, 52px);
}
.faq-a .link-mono {
    white-space: normal;
}
.pricing-intro .h2 {
    font-size: clamp(44px, 4vw, 56px);
}
@media (max-width: 360px) {
    .ph-title,
    .svc-h1,
    .hero .svc-h1 {
        font-size: 44px;
    }
    .h2 {
        font-size: 42px;
    }
    .cta h2 {
        font-size: 46px;
    }
    .readouts .wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    .ro {
        padding: 22px 0;
        border-left: 0;
    }
    .ro + .ro {
        border-top: 1px solid var(--line-d);
    }
}
.bk-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ash);
}
.bk .q-error {
    margin: 0;
}
.bk .field[aria-invalid='true'] {
    border-color: var(--nf-bad);
    box-shadow: inset 0 0 0 1px var(--nf-bad);
}
.concept {
    display: flex;
    align-items: center;
    gap: 12px;
}
.concept[hidden] {
    display: none;
}
.concept button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: none;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.concept button:hover {
    border-color: #fff;
}
/* Contrast: small labels on white */
.q-steps li {
    color: #6f737a;
}
.bi-main .lc-current {
    color: var(--nf-good-text);
}
.bi-main .lc-current::before {
    background: var(--nf-good-text);
}
/* Hero: above 900px the copy and the booking card always sit side by side, never wrapping into a lopsided second row. Below that they stack at one shared width. */
@media (min-width: 901px) {
    .hero > .wrap {
        flex-wrap: nowrap;
    }
    .hero-copy {
        flex: 1 1 auto;
    }
    .book-col {
        flex: 0 0 clamp(360px, 33vw, 420px);
    }
}
@media (max-width: 900px) {
    .book-col {
        flex: 1 1 100%;
        max-width: 720px;
        margin-left: 0;
    }
}
/* Home widget urgency choices */
.urg {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    min-height: 66px;
    padding: 12px;
}
.urg b {
    font-size: 15px;
    font-weight: 600;
}
.urg small {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--ash);
}
.bk-emergency {
    color: var(--carbon);
    font-weight: 500;
}
.bk-emergency a {
    color: var(--red-ink);
    font-weight: 700;
    white-space: nowrap;
}
/* No lopsided rows. The landing page form sits beside the copy above 900px, and grids close their last row instead of leaving empty cells. */
@media (min-width: 901px) {
    .lp-hero .wrap {
        flex-wrap: nowrap;
    }
    .lp-copy {
        flex: 1 1 auto;
    }
    .lp-form-col {
        flex: 0 0 clamp(360px, 33vw, 440px);
    }
}
.svc-grid .svc-help {
    background: var(--carbon);
    color: #fff;
}
.svc-grid .svc-help:hover {
    background: var(--graphite);
}
.svc-help .sc-from {
    color: var(--steel);
}
.svc-help .sc-blurb {
    color: var(--fog);
}
.svc-grid .svc-help .sc-go {
    color: var(--red-glow);
}
@media (min-width: 1001px) {
    .svc-help:nth-child(3n + 1) {
        grid-column: 1/-1;
    }
    .svc-help:nth-child(3n + 2) {
        grid-column: span 2;
    }
}
@media (min-width: 601px) and (max-width: 1000px) {
    .svc-help:nth-child(odd) {
        grid-column: 1/-1;
    }
}
.pl-help {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(28px, 3vw, 40px);
    background: var(--carbon);
    color: #fff;
}
.pl-help .eyebrow {
    color: var(--steel);
}
.pl-help h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 0.92;
}
.pl-help p:not(.eyebrow) {
    margin: 0;
    max-width: 30em;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--fog);
}
.pl-help .btn {
    margin-top: auto;
}
@media (min-width: 1101px) {
    .related:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 901px) {
    .districts li:last-child:nth-child(3n + 1) {
        grid-column: 1/-1;
    }
    .districts li:last-child:nth-child(3n + 2) {
        grid-column: span 2;
    }
}
.extras {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 601px) and (max-width: 899px) {
    .extras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .extras li:last-child:nth-child(odd) {
        grid-column: 1/-1;
    }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .extras {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .extras li:last-child:nth-child(3n + 1) {
        grid-column: 1/-1;
    }
    .extras li:last-child:nth-child(3n + 2) {
        grid-column: span 2;
    }
}
@media (min-width: 1100px) {
    .extras {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}
@media (min-width: 641px) and (max-width: 1000px) {
    .platforms > .pf-badges:nth-child(3) {
        grid-column: 1/-1;
    }
    .pf-badges ul {
        columns: 2;
        column-gap: 40px;
    }
    .pf-badges li {
        break-inside: avoid;
    }
}
/* Three plans on two columns: the third plan spans the row and sets its list beside the price */
@media (min-width: 761px) and (max-width: 1100px) {
    .plans-grid.three > .plan:nth-child(3):last-child {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(32px, 5vw, 64px);
        row-gap: 0;
        align-content: start;
    }
    .plans-grid.three > .plan:nth-child(3):last-child > * {
        grid-column: 1;
        margin-top: 22px;
    }
    .plans-grid.three > .plan:nth-child(3):last-child > :first-child {
        margin-top: 0;
    }
    .plans-grid.three > .plan:nth-child(3):last-child > .for {
        margin-top: 12px;
    }
    .plans-grid.three > .plan:nth-child(3):last-child > .plan-alt {
        margin-top: 14px;
    }
    .plans-grid.three > .plan:nth-child(3):last-child > ul {
        grid-column: 2;
        grid-row: 1 / span 20;
        align-self: center;
        margin-top: 0;
    }
}
/* Branch cards put the phone under the address whenever the card is too narrow for the city name and the phone side by side */
.branch-card {
    container-type: inline-size;
}
@container (max-width:540px) {
    .bc-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .bc-side {
        align-items: flex-start;
        text-align: left;
    }
}
/* When the town map drops below the town list, it centers instead of hugging the left edge */
.area-grid > .area-map {
    margin-inline: auto;
}
/* The menu button serves laptops up to 1279px, so wider menus set their lists in columns instead of stretching each row across the screen */
@media (min-width: 761px) {
    .mm-panel {
        columns: 2;
        column-gap: 48px;
        padding-top: 18px;
    }
    .mm-group .mm-h {
        margin-top: 0;
    }
    .mm-group + .mm-group {
        margin-top: 22px;
    }
    .mm-group,
    .mm-panel > a,
    .mm-loc {
        break-inside: avoid;
    }
    .mm-panel > .mm-all,
    .mm-panel .zf,
    .mm-panel .zf-out {
        column-span: all;
    }
    .mm-cta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mm-hours {
        grid-column: 1/-1;
    }
}
@media (min-width: 1100px) {
    .mm-panel:not(#mmp-locations) {
        columns: 3;
    }
}

/* Brand red bands, alternating with the black ones so the page carries both logo colors. */
.red {
    background: var(--red);
    color: #fff;
}
.red .eyebrow,
.red .lead,
.red .steps p,
.red .ro span,
.red .ro b small,
.red .ro b .ro-pre,
.red .link-mono {
    color: #fff;
}
.red .eyebrow::before {
    background: var(--carbon);
}
.red .readouts,
.readouts.red {
    border-top-color: color-mix(in srgb, var(--nf-ink) 22%, transparent);
}
.red .ro {
    border-color: color-mix(in srgb, var(--nf-ink) 22%, transparent);
}
.red .rail::before {
    background: var(--carbon);
}
.red .node {
    border-color: var(--carbon);
    background: var(--carbon);
    color: #fff;
}

/* Red-led brand (Drainworks, 2026-11-03): heroes, page heroes and the closing call carry the logo red over red-toned mono photos; black stays for the readouts strip, the system diagram, the offers band and the footer. */
:where(.hp-accent) .hero,
:where(.hp-accent) .page-hero,
:where(.hp-accent) .cta {
    background: var(--red);
}
:where(.hp-accent) .hero-scrim {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--nf-accent) 70%, transparent) 26%,
        color-mix(in srgb, var(--nf-accent) 0%, transparent) 62%
    );
}
:where(.hp-accent) .ph-scrim {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--nf-accent) 55%, transparent) 34%,
        color-mix(in srgb, var(--nf-accent) 0%, transparent) 72%
    );
}
:where(.hp-accent) .cta::after {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--nf-accent) 82%, transparent) 55%,
        color-mix(in srgb, var(--nf-accent) 45%, transparent) 100%
    );
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .photo-hero {
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.15) brightness(0.92);
}
:where(.hp-accent) .cta > img {
    opacity: 1;
}
html.color :where(.hp-accent) :is(.hero, .page-hero, .cta) .photo-hero {
    mix-blend-mode: normal;
    filter: saturate(0.88) brightness(0.6);
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) :is(.slogan em, .svc-h1 span, .ph-title em, h2 em) {
    color: var(--carbon);
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) :is(.hero-lead, .ph-lead, .cta-copy > p) {
    color: #fff;
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .eyebrow::before {
    background: var(--carbon);
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .stars {
    color: #fff;
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .btn-red {
    background: var(--carbon);
    color: #fff;
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .btn-red:hover {
    background: #000;
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .btn-ghost {
    border-color: rgba(255, 255, 255, 0.6);
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .link-mono {
    color: #fff;
}
.offers {
    background: var(--carbon);
}
.offers .coupon {
    border-color: color-mix(in srgb, var(--nf-accent-light) 90%, transparent);
}
.offers .eyebrow::before {
    background: var(--red);
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) :is(.micro, .crumbs, .crumbs a, .crumbs li, .crumbs span) {
    color: #fff;
}
:where(.hp-accent) :is(.hero, .page-hero, .cta) .crumbs li + li::before {
    color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 900px) {
    :where(.hp-accent) .hero-scrim,
    :where(.hp-accent) .ph-scrim {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--nf-accent) 84%, transparent) 0%,
            color-mix(in srgb, var(--nf-accent) 90%, transparent) 45%,
            var(--red) 100%
        );
    }
    :where(.hp-accent) :is(.hero, .page-hero) .photo-hero {
        filter: grayscale(1) contrast(1.05) brightness(1.08);
    }
}

/* Red chrome (Drainworks, 2026-11-03): the header and menus use deep complementary reds; the utility bar and readouts strip stay black (2026-11-05), with greys and accents re-toned for contrast and a one-color white logo. */
:root {
    --red-deep: var(--nf-chrome-deep);
    --red-dark: var(--nf-chrome);
    --red-card: var(--nf-chrome-card);
    --red-tint: var(--nf-chrome-tint);
}
.util,
.hdr,
.mmenu,
.bs-menu,
.readouts,
.sticky {
    --steel: rgba(255, 255, 255, 0.8);
    --fog: rgba(255, 255, 255, 0.9);
    --ash: rgba(255, 255, 255, 0.55);
    --graphite: var(--red-card);
    --red-glow: var(--red-tint);
    --line-d: rgba(255, 255, 255, 0.2);
}
.util {
    background: var(--carbon);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.hdr {
    background: var(--red-dark);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
.mega,
.mmenu {
    background: var(--red-dark);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 48px 80px -24px color-mix(in srgb, var(--nf-chrome-deep) 55%, #000);
}
.mega-foot {
    background: var(--red-deep);
}
.mega-col a,
.co-links a,
.mega-panel a {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
:is(.hdr, .mmenu, .bs-menu) :is(.nav-trigger, .nav-link, .mega-h, .mf-kicker, .mm-branch.is-active b, .mm-h) {
    --red: var(--red-tint);
}
.hdr .nav-trigger::after,
.hdr .nav-link::after,
.mega-h::before,
.mm-h::before,
.mf-img::before {
    background: #fff;
}
.mf-kicker,
.mm-branch.is-active b {
    color: var(--red-tint);
}
.mega-col a:hover .mi-name,
.co-links a:hover .mi-name,
.mega-col a:focus-visible .mi-name {
    border-bottom-color: #fff;
}
.mm-branch.is-active {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.hdr .btn-red,
.mmenu .btn-red,
.sticky .btn-red {
    background: #fff;
    color: var(--red-dark);
}
.hdr .btn-red:hover,
.mmenu .btn-red:hover,
.sticky .btn-red:hover {
    background: color-mix(in srgb, var(--nf-chrome-tint) 35%, #fff);
}
.hdr .brand img,
.mmenu .brand img {
    filter: brightness(0) invert(1);
}
.zf .field {
    background: var(--red-deep);
}
.readouts.dark {
    background: var(--carbon);
    border-top-color: rgba(255, 255, 255, 0.18);
}
.readouts .ro {
    border-color: rgba(255, 255, 255, 0.2);
}
.readouts .ro b small,
.readouts .ro b .ro-pre,
.readouts .ro span {
    color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 760px) {
    .sticky {
        background: var(--red-dark);
        border-top-color: rgba(255, 255, 255, 0.2);
    }
}
:is(.hero, .page-hero) .photo-hero {
    filter: grayscale(1) contrast(0.85) brightness(1.12);
}
/* Hero photos keep their natural colors (Luc, 2026-11-03): no grayscale, no red tint. The red comes from the solid panel that fades into the photo's edge; on phones the photo sits above the red panel as a banner. */
:is(.hero, .page-hero, .cta) .photo-hero,
html.color :is(.hero, .page-hero, .cta) .photo-hero {
    mix-blend-mode: normal;
    filter: none;
}
:where(.hp-accent) .hero-scrim {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--nf-accent) 55%, transparent) 18%,
        color-mix(in srgb, var(--nf-accent) 0%, transparent) 42%
    );
}
:where(.hp-accent) .ph-scrim {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        color-mix(in srgb, var(--nf-accent) 50%, transparent) 20%,
        color-mix(in srgb, var(--nf-accent) 0%, transparent) 46%
    );
}
:where(.hp-accent) .cta::after {
    background: linear-gradient(
        90deg,
        var(--red) 0%,
        var(--red) 38%,
        color-mix(in srgb, var(--nf-accent) 70%, transparent) 60%,
        color-mix(in srgb, var(--nf-accent) 0%, transparent) 88%
    );
}
@media (max-width: 900px) {
    .hero-photo,
    .ph-photo {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        object-position: 40% 40%;
    }
    .hero-scrim,
    .ph-scrim {
        display: none;
    }
    :where(.hp-accent) .cta::after {
        background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent) 90%, transparent) 0%, var(--red) 55%);
    }
}
@media (max-width: 900px) {
    .cta > img {
        display: none;
    }
    .cta::after {
        display: none;
    }
}
.mega {
    --steel: rgba(255, 255, 255, 0.8);
    --fog: rgba(255, 255, 255, 0.9);
    --ash: rgba(255, 255, 255, 0.55);
    --graphite: var(--red-card);
    --red-glow: var(--red-tint);
}
.mega .stars {
    color: #fff;
}
:where(.hp-accent) .hero.q-hero h1 em {
    color: var(--carbon);
}
:where(.hp-accent) .hero.q-hero :is(p, .q-hours) {
    color: #fff;
}
.mega .mp-card.is-feat {
    --ash: var(--nf-ash);
    --steel: var(--nf-ash);
    --fog: var(--nf-slate);
}
/* White header with the full-color logo, as on the approved calldrainworks.com; the utility bar above and the menus below stay deep red. */
:where(.hdr-light) .hdr,
:where(.hdr-light) .lp-hdr {
    --steel: var(--nf-ash);
    --fog: var(--nf-slate);
    --ash: var(--nf-ash);
    background: #fff;
    color: var(--carbon);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--nf-ink) 4%, transparent);
}
:where(.hdr-light) .hdr .brand img,
:where(.hdr-light) .lp-hdr .brand img {
    filter: none;
}
:where(.hdr-light) .hdr .nav-trigger,
:where(.hdr-light) .hdr .nav-link {
    --red: var(--red);
    color: var(--slate);
}
:where(.hdr-light) .hdr .nav-trigger:hover,
:where(.hdr-light) .hdr .nav-link:hover,
:where(.hdr-light) .hdr .nav-trigger[aria-expanded='true'] {
    color: var(--carbon);
}
:where(.hdr-light) .hdr .nav-trigger::after,
:where(.hdr-light) .hdr .nav-link::after {
    background: var(--red);
}
:where(.hdr-light) .hdr-phone,
:where(.hdr-light) .lp-hdr .hdr-phone {
    color: var(--carbon);
}
:where(.hdr-light) .hdr .icon-btn,
:where(.hdr-light) .lp-hdr .icon-btn {
    border-color: var(--line);
    color: var(--carbon);
}
:where(.hdr-light) .hdr .burger i {
    background: var(--carbon);
}
:where(.hdr-light) .hdr .btn-red {
    background: var(--red);
    color: #fff;
}
:where(.hdr-light) .hdr .btn-red:hover {
    background: var(--nf-accent-hover);
}
:where(.hdr-light) .lp-hdr-proof {
    color: var(--slate);
}
@media (min-width: 901px) {
    :where(.hp-accent) .hero-scrim,
    :where(.hp-accent) .ph-scrim {
        background: var(--red);
        clip-path: polygon(0 0, 26% 0, 16% 100%, 0 100%);
    }
}
@media (min-width: 901px) {
    .hero-lead {
        max-width: 27em;
    }
}
@media (min-width: 901px) and (max-width: 1180px) {
    :where(.hp-accent) .hero-scrim,
    :where(.hp-accent) .ph-scrim {
        clip-path: polygon(0 0, 36% 0, 26% 100%, 0 100%);
    }
}
@media (min-width: 901px) {
    :where(.hp-accent) .hero-scrim {
        width: calc(60% + 2px);
    }
    :where(.hp-accent) .ph-scrim {
        width: calc(52% + 2px);
    }
}
.mega {
    color: #fff;
}

/* Justin's own photography (Drainworks, 2026-11-05): every photo shows in its natural color, cards included, now that no stock or low-resolution images are left. The homepage hero loop sits exactly over its poster photo. */
.photo,
html.color .photo,
.photo-hero,
html.color .photo-hero {
    filter: none;
}
video.hero-photo {
    background: transparent;
}

/* ---------- Plumbing Design 1's own additions ---------- */
/* What the concept wrote as style attributes, as classes */
.cta-act .btns-flush {
    margin-top: 0;
}
.wrap.wrap-block {
    display: block;
}
.lead.lead-gap,
.link-mono.lead-gap {
    margin-top: 28px;
}
.offers .lead.lead-on-red {
    color: rgba(255, 255, 255, 0.88);
}
.quote-instead {
    margin-top: 24px;
    display: inline-block;
}
.bk-where {
    margin-top: -10px;
    font-size: 14px;
    color: var(--ash);
}
.msg.is-bad {
    color: var(--nf-bad);
}
.legend .lg-cold {
    --c: var(--nf-water-cold-light);
}
.legend .lg-hot {
    --c: var(--nf-water-hot);
}
.legend .lg-drain {
    --c: #ecebe6;
}
.legend .lg-effluent {
    --c: var(--steel);
}
/* The drive-time map's colors, from the palette */
.tm-bg {
    fill: var(--concrete);
}
.tm-ring {
    fill: none;
    stroke: color-mix(in srgb, var(--nf-ink) 22%, transparent);
    stroke-dasharray: 2 6;
}
.tm-min {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 1.5px;
    fill: var(--ash);
}
.tm-dot {
    fill: var(--carbon);
}
.tm-town {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    fill: var(--carbon);
}
.tm-shop {
    fill: var(--red);
}
.tm-shop-t {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    fill: #fff;
}
/* A business with no logo yet shows its name; one with no logo for dark grounds whitens its own there */
.brand-name {
    font: 800 22px/1 var(--display);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: inherit;
}
.brand img + .brand-name {
    margin-left: 10px;
}
.hdr .brand img.own,
.lp-hdr .brand img.own {
    filter: none;
}
.ftr-name {
    font: 800 24px/1 var(--display);
    text-transform: uppercase;
    color: #fff;
}
.ftr-logo-light {
    filter: brightness(0) invert(1);
}
/* The business's reply under a review, the lenders' sample terms, a source's credit */
.ld-sample {
    margin-top: 12px;
    font-size: 13px;
    color: var(--ash);
}
.source-credit {
    font-weight: 600;
}
/* A page whose article stands alone: the policies, the thank-you */
.article.article-solo {
    display: block;
    max-width: 820px;
}
.q-shell.q-shell-solo {
    display: block;
    max-width: 820px;
}
/* The back-soon page, which stands on its own */
.err-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--carbon);
    color: #fff;
    font: 400 17px/1.55 var(--body);
}
.err-wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}
.err-hdr {
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.err-hdr img {
    height: 34px;
    width: auto;
    display: block;
}
.err-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 56px 0;
}
.err-code {
    font: 500 12px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-glow);
}
.err-main h1 {
    margin-top: 20px;
    font: 800 clamp(34px, 6vw, 56px)/1.02 var(--display);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.err-lead {
    margin-top: 18px;
    max-width: 34em;
    color: var(--fog);
}
.err-calls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 36px;
}
.err-calls a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.err-calls a:hover,
.err-calls a:focus-visible {
    border-color: var(--red);
}
.err-calls small {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}
.err-calls b {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.err-home {
    display: inline-block;
    margin-top: 28px;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.err-home:hover,
.err-home:focus-visible {
    border-color: var(--red);
}
.err-ftr {
    padding: 24px 0;
    color: var(--steel);
    font: 400 11px/1.6 var(--mono);
    letter-spacing: 0.06em;
}
.svc-h1 span span,
.hero .svc-h1 span span {
    display: inline;
    color: inherit;
}
.ic-check {
    color: var(--red);
}

/* Site Facts' rating with no reviews to show: the score beside the listing's row and the note */
.reviews-rating .rv-main {
    max-width: 560px;
}
.reviews-rating .rv-platforms {
    margin-top: 0;
}
.reviews-rating .rv-platforms + .rv-note {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}
.pf-note {
    max-width: 640px;
}

/* Night Fox's credit beside the copyright line (site-core's SITE_CREDIT), in the footer's own type and colour */
.site-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-credit a:hover {
    color: #fff;
}