/* =========================================================
   YOU HAD ONE JOB™
   FREE PLUMBING + DRAIN SERVICE TEMPLATE
   COMPLETE ONE-PAGE DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
    --porcelain: #f4f2ec;
    --porcelain-warm: #e7e2d8;
    --paper: #fbfaf6;

    --ink: #111716;
    --ink-soft: #29312f;

    --cobalt: #1246d8;
    --cobalt-dark: #0b2d94;
    --cobalt-light: #dce6ff;

    --copper: #b76735;
    --copper-light: #d99a6d;
    --copper-dark: #75401f;

    --emergency: #d94332;

    --line: rgba(17, 23, 22, .18);
    --line-light: rgba(244, 242, 236, .22);

    --display:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    --body:
        "Instrument Sans",
        Arial,
        sans-serif;

    --mono:
        "Spline Sans Mono",
        "Courier New",
        monospace;

    --max: 1200px;

    --gutter:
        clamp(
            1.15rem,
            3vw,
            2.5rem
        );

    --section-y:
        clamp(
            5.5rem,
            9vw,
            9rem
        );

    --ease:
        cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    overflow-x: hidden;

    background:
        var(--porcelain);

    color:
        var(--ink);

    font-family:
        var(--body);

    font-size:
        16px;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;
}


img,
svg,
video {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


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


button {
    cursor: pointer;
}


h1,
h2,
h3,
p,
figure,
blockquote {
    margin-top: 0;
}


section[id] {
    scroll-margin-top: 7rem;
}


::selection {
    background:
        var(--cobalt);

    color:
        white;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link {
    position: fixed;
    z-index: 9999;

    top: 1rem;
    left: 1rem;

    transform:
        translateY(-200%);

    padding:
        .8rem 1rem;

    background:
        var(--ink);

    color:
        white;

    font-family:
        var(--mono);

    font-size:
        .7rem;

    text-transform:
        uppercase;
}


.skip-link:focus {
    transform:
        translateY(0);
}


:focus-visible {
    outline:
        3px solid var(--copper);

    outline-offset:
        4px;
}


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

h1,
h2,
h3 {
    margin-bottom:
        1.25rem;

    font-family:
        var(--display);

    font-weight:
        700;

    text-wrap:
        balance;
}


h1,
h2 {
    line-height:
        .87;

    letter-spacing:
        -.06em;
}


h3 {
    line-height:
        1;

    letter-spacing:
        -.035em;
}


h1 {
    font-size:
        clamp(
            4.5rem,
            7.5vw,
            8.6rem
        );
}


h2 {
    font-size:
        clamp(
            3.6rem,
            6.6vw,
            7rem
        );
}


h3 {
    font-size:
        clamp(
            1.65rem,
            2.7vw,
            2.6rem
        );
}


h1 span,
h2 span {
    display: block;
}


.section-number,
.eyebrow,
.hero__brand-label,
.hero__trust,
.demo-disclosure {
    font-family:
        var(--mono);

    font-size:
        .66rem;

    font-weight:
        600;

    line-height:
        1.45;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.section-number,
.eyebrow {
    color:
        var(--cobalt);
}


.section-number--light {
    color:
        var(--copper-light);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        3.35rem;

    padding:
        .9rem
        1.25rem;

    border:
        2px solid
        transparent;

    font-family:
        var(--mono);

    font-size:
        .68rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;

    transition:
        .2s
        var(--ease);
}


.button::after {
    content:
        " →";

    margin-left:
        .55rem;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button--primary {
    background:
        var(--cobalt);

    border-color:
        var(--cobalt);

    color:
        white;
}


.button--primary:hover {
    background:
        var(--cobalt-dark);

    border-color:
        var(--cobalt-dark);
}


.button--outline {
    background:
        transparent;

    border-color:
        var(--ink);
}


.button--outline:hover {
    background:
        var(--ink);

    color:
        white;
}


.button--light {
    border:
        2px solid
        var(--paper);

    color:
        var(--paper);
}


.button--light:hover {
    background:
        var(--paper);

    color:
        var(--ink);
}


.button--emergency {
    background:
        var(--emergency);

    color:
        white;
}


.button--emergency:hover {
    background:
        white;

    color:
        var(--emergency);
}


/* =========================================================
   UTILITY BAR
   ========================================================= */

.utility-bar {
    background:
        var(--ink);

    color:
        white;
}


.utility-bar__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    min-height:
        2.55rem;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        1.5rem;

    font-family:
        var(--mono);

    font-size:
        .59rem;

    font-weight:
        600;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.utility-bar__middle {
    color:
        rgba(255,255,255,.58);
}


.utility-bar a {
    justify-self:
        end;

    color:
        var(--copper-light);

    font-weight:
        700;
}


/* =========================================================
   HEADER
   ========================================================= */

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

    top: 0;

    background:
        rgba(244,242,236,.96);

    border-bottom:
        1px solid
        var(--line);

    backdrop-filter:
        blur(14px);
}


.site-header__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    min-height:
        5rem;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(210px, .8fr)
        auto
        minmax(150px, .55fr);

    align-items:
        center;

    gap:
        2rem;
}


.site-brand {
    display:
        flex;

    flex-direction:
        column;

    width:
        fit-content;
}


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

    font-size:
        1.15rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -.04em;
}


.site-brand span {
    margin-top:
        .35rem;

    color:
        var(--cobalt);

    font-family:
        var(--mono);

    font-size:
        .52rem;

    font-weight:
        600;

    letter-spacing:
        .1em;
}


.site-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            .85rem,
            2vw,
            1.7rem
        );
}


.site-nav a {
    position:
        relative;

    padding:
        .4rem 0;

    font-family:
        var(--mono);

    font-size:
        .59rem;

    font-weight:
        600;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.site-nav a::after {
    content:
        "";

    position:
        absolute;

    left: 0;
    right: 100%;
    bottom: 0;

    height:
        2px;

    background:
        var(--cobalt);

    transition:
        right .2s var(--ease);
}


.site-nav a:hover::after {
    right:
        0;
}


.header-call {
    justify-self:
        end;

    padding:
        .8rem
        1rem;

    background:
        var(--cobalt);

    color:
        white;

    font-family:
        var(--mono);

    font-size:
        .59rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.header-call::after {
    content:
        " →";
}


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

.hero {
    position: relative;

    min-height:
        720px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, .92fr);

    overflow:
        hidden;

    background:
        var(--porcelain);
}


.hero__content {
    position:
        relative;

    z-index:
        3;

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2rem, 5vw, 5rem)
        clamp(4rem, 7vw, 7rem)
        max(
            var(--gutter),
            calc((100vw - var(--max)) / 2)
        );
}


.job-status {
    max-width:
        37rem;

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

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

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

    font-family:
        var(--mono);

    font-size:
        .56rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.job-status > * {
    display:
        flex;

    align-items:
        center;

    min-height:
        2.35rem;

    padding:
        .5rem
        .7rem;
}


.job-status > span {
    background:
        var(--ink);

    color:
        white;
}


.job-status strong {
    border-right:
        1px solid
        var(--ink);
}


.job-status b {
    background:
        var(--emergency);

    color:
        white;
}


.hero__brand-label {
    margin-bottom:
        1.4rem;

    color:
        var(--copper);
}


.hero h1 {
    max-width:
        47rem;

    margin-bottom:
        2rem;
}


.hero h1 span:first-child {
    color:
        var(--cobalt);
}


.hero__intro {
    max-width:
        37rem;

    margin-bottom:
        2rem;

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

    line-height:
        1.55;
}


.hero__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        .75rem;

    margin-bottom:
        1.75rem;
}


.hero__trust {
    max-width:
        39rem;

    color:
        rgba(17,23,22,.62);
}


.hero__media {
    position:
        relative;

    z-index:
        2;

    margin:
        0;

    min-height:
        720px;

    background:
        var(--cobalt-dark);
}


.hero__media figcaption {
    position:
        absolute;

    left:
        1.25rem;
    right:
        1.25rem;
    bottom:
        1.25rem;

    z-index:
        3;

    padding-top:
        .7rem;

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

    color:
        white;

    font-family:
        var(--mono);

    font-size:
        .55rem;

    letter-spacing:
        .09em;
}


.hero__pipe {
    position:
        absolute;

    z-index:
        4;

    top:
        0;
    bottom:
        0;
    left:
        55%;

    width:
        5px;

    background:
        var(--copper);
}


.hero__pipe::before {
    content:
        "";

    position:
        absolute;

    top:
        7rem;
    left:
        50%;

    width:
        1.25rem;
    height:
        1.25rem;

    border:
        5px solid
        var(--copper);

    border-radius:
        50%;

    background:
        var(--porcelain);

    transform:
        translateX(-50%);
}


.hero__pipe-tag {
    position:
        absolute;

    top:
        8.5rem;
    right:
        .75rem;

    padding:
        .35rem
        .5rem;

    background:
        var(--copper);

    color:
        white;

    font-family:
        var(--mono);

    font-size:
        .52rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    white-space:
        nowrap;
}


/* =========================================================
   PHOTO PLACEHOLDERS
   ========================================================= */

.photo-placeholder {
    position: relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .5rem;

    min-height:
        26rem;

    padding:
        2rem;

    background:
        var(--cobalt);

    color:
        white;

    text-align:
        center;
}


.photo-placeholder::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 1px,
            transparent 1px
        );

    background-size:
        42px
        42px;
}


.photo-placeholder::after {
    content:
        "";

    position:
        absolute;

    width:
        55%;
    height:
        55%;

    border:
        5px solid
        rgba(255,255,255,.17);

    border-radius:
        50%;
}


.photo-placeholder span,
.photo-placeholder strong {
    position:
        relative;

    z-index:
        2;
}


.photo-placeholder span {
    font-family:
        var(--mono);

    font-size:
        .58rem;

    letter-spacing:
        .1em;
}


.photo-placeholder strong {
    max-width:
        23rem;

    font-family:
        var(--display);

    font-size:
        2rem;

    line-height:
        1;
}


.photo-placeholder--hero {
    height:
        100%;

    min-height:
        720px;

    background:
        linear-gradient(
            145deg,
            var(--cobalt-dark),
            var(--cobalt)
        );
}


.photo-placeholder--wide {
    min-height:
        30rem;

    background:
        linear-gradient(
            125deg,
            var(--copper-dark),
            var(--copper)
        );
}


.photo-placeholder--emergency {
    height:
        100%;

    min-height:
        36rem;

    background:
        linear-gradient(
            145deg,
            #16201e,
            var(--copper-dark)
        );
}


.photo-placeholder--trust {
    min-height:
        34rem;

    background:
        linear-gradient(
            145deg,
            var(--cobalt-dark),
            #18366d
        );
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        var(--section-y)
        0;
}


.section__intro {
    display:
        grid;

    grid-template-columns:
        minmax(250px, .65fr)
        minmax(0, 1.35fr);

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

    margin-bottom:
        clamp(
            4rem,
            7vw,
            7rem
        );
}


.section__lead {
    max-width:
        35rem;

    font-size:
        1.05rem;
}


.meme-strip {
    display:
        grid;

    gap:
        .35rem;

    max-width:
        18rem;

    padding:
        1rem;

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

    font-family:
        var(--mono);

    font-size:
        .6rem;

    line-height:
        1.4;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.meme-strip strong {
    color:
        var(--cobalt);
}


.meme-strip span {
    color:
        var(--emergency);
}


/* =========================================================
   PROBLEMS
   ========================================================= */

.problem-list {
    position:
        relative;

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


.problem-list::before {
    content:
        "";

    position:
        absolute;

    top:
        0;
    bottom:
        0;
    left:
        4.15rem;

    width:
        4px;

    background:
        var(--cobalt);
}


.problem-row {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        6rem
        minmax(0, 1fr)
        auto;

    gap:
        clamp(
            1.5rem,
            4vw,
            4rem
        );

    align-items:
        center;

    padding:
        2.35rem
        0;

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


.problem-row::before {
    content:
        "";

    position:
        absolute;

    left:
        3.68rem;

    width:
        1.15rem;
    height:
        1.15rem;

    border:
        4px solid
        var(--cobalt);

    border-radius:
        50%;

    background:
        var(--porcelain);
}


.problem-row__number {
    font-family:
        var(--mono);

    font-size:
        .62rem;
}


.problem-row h3 {
    margin-bottom:
        .5rem;
}


.problem-row strong {
    display:
        block;

    margin-bottom:
        .45rem;

    color:
        var(--cobalt);

    font-weight:
        600;
}


.problem-row p {
    max-width:
        43rem;

    margin:
        0;
}


.problem-row > a {
    align-self:
        center;

    color:
        var(--copper-dark);

    font-family:
        var(--mono);

    font-size:
        .61rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services {
    background:
        var(--paper);

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

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


.services__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        var(--section-y)
        0;
}


.services__heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, .6fr);

    gap:
        5rem;

    align-items:
        end;

    margin-bottom:
        5rem;
}


.services__heading .section-number {
    grid-column:
        1 / -1;
}


.services__heading p:last-child {
    max-width:
        26rem;
}


.services__grid {
    display:
        grid;

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

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

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


.services__grid article {
    min-height:
        20rem;

    padding:
        2rem;

    border-right:
        1px solid
        var(--line);

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


.services__grid article > span {
    display:
        block;

    margin-bottom:
        4rem;

    color:
        var(--cobalt);

    font-family:
        var(--mono);

    font-size:
        .58rem;
}


.services__grid h3 {
    margin-bottom:
        .9rem;
}


.services__photo {
    position:
        relative;

    margin:
        4rem
        0
        0;
}


.services__photo figcaption {
    position:
        absolute;

    right:
        1.5rem;
    bottom:
        1.5rem;

    padding:
        .6rem
        .8rem;

    background:
        var(--ink);

    color:
        white;

    font-family:
        var(--mono);

    font-size:
        .56rem;

    letter-spacing:
        .08em;
}


.services__panic {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        1.3rem
        0;

    border-bottom:
        4px solid
        var(--emergency);

    font-family:
        var(--mono);

    font-size:
        .7rem;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.services__panic strong {
    color:
        var(--emergency);
}


/* =========================================================
   EMERGENCY
   ========================================================= */

.emergency {
    background:
        var(--ink);

    color:
        white;
}


.emergency__inner {
    min-height:
        650px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;
}


.emergency__copy {
    padding:
        var(--section-y)
        max(
            var(--gutter),
            calc((100vw - var(--max)) / 2)
        );
}


.emergency__copy h2 {
    max-width:
        38rem;
}


.emergency__copy h2 span:nth-child(2) {
    color:
        var(--copper-light);
}


.emergency__copy > p:not(.section-number) {
    max-width:
        32rem;

    color:
        rgba(255,255,255,.75);
}


.emergency__phone {
    display:
        block;

    width:
        fit-content;

    margin:
        2.5rem
        0
        1.5rem;

    color:
        var(--copper-light);

    font-family:
        var(--display);

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            5rem
        );

    font-weight:
        700;

    line-height:
        1;
}


.emergency__copy small {
    display:
        block;

    margin-top:
        1.25rem;

    font-family:
        var(--mono);

    font-size:
        .58rem;

    letter-spacing:
        .1em;
}


/* =========================================================
   TRUST
   ========================================================= */

.trust__heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(250px, .65fr);

    gap:
        5rem;

    align-items:
        end;

    margin-bottom:
        4rem;
}


.trust__heading .section-number {
    grid-column:
        1 / -1;
}


.trust__heading p:last-child {
    max-width:
        26rem;
}


.trust__grid {
    display:
        grid;

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

    margin-bottom:
        4rem;

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

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


.trust__grid article {
    min-height:
        17rem;

    padding:
        1.75rem;

    border-right:
        1px solid
        var(--line);

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


.trust__grid article > span {
    display:
        block;

    margin-bottom:
        4rem;

    color:
        var(--copper);

    font-family:
        var(--mono);

    font-size:
        .58rem;
}


.trust__grid h3 {
    font-size:
        clamp(
            1.6rem,
            2vw,
            2.15rem
        );
}


.trust__photo {
    margin:
        0
        0
        2rem;
}


.demo-disclosure {
    max-width:
        50rem;

    padding-top:
        1rem;

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

    color:
        rgba(17,23,22,.6);
}


/* =========================================================
   PROCESS
   ========================================================= */

.process {
    background:
        var(--cobalt-light);
}


.process__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        var(--section-y)
        0;
}


.process__heading {
    max-width:
        50rem;

    margin-bottom:
        5rem;
}


.process__steps {
    position:
        relative;

    display:
        grid;

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

    margin-bottom:
        3rem;

    border-top:
        4px solid
        var(--copper);
}


.process__steps article {
    position:
        relative;

    min-height:
        20rem;

    padding:
        2.4rem
        2rem;

    border-right:
        1px solid
        rgba(17,23,22,.17);

    border-bottom:
        1px solid
        rgba(17,23,22,.17);
}


.process__steps article:first-child {
    border-left:
        1px solid
        rgba(17,23,22,.17);
}


.process__steps article::before {
    content:
        "";

    position:
        absolute;

    top:
        -11px;
    left:
        2rem;

    width:
        1.1rem;
    height:
        1.1rem;

    border:
        4px solid
        var(--copper);

    border-radius:
        50%;

    background:
        var(--cobalt-light);
}


.process__steps span {
    display:
        block;

    margin-bottom:
        5rem;

    font-family:
        var(--mono);

    font-size:
        .6rem;
}


/* =========================================================
   SERVICE AREA
   ========================================================= */

.service-area {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--cobalt);

    color:
        white;
}


.service-area::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .14;

    background-image:
        linear-gradient(
            rgba(255,255,255,.22) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.22) 1px,
            transparent 1px
        );

    background-size:
        60px
        60px;
}


.service-area__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        var(--section-y)
        0;
}


.service-area__heading {
    max-width:
        55rem;

    margin-bottom:
        5rem;
}


.service-area__heading p:last-child {
    max-width:
        31rem;

    color:
        rgba(255,255,255,.75);
}


.service-network {
    position:
        relative;

    display:
        grid;

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

    gap:
        1px;

    margin-bottom:
        3rem;

    background:
        rgba(255,255,255,.28);

    border:
        1px solid
        rgba(255,255,255,.28);
}


.service-network span {
    position:
        relative;

    min-height:
        8rem;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        1.25rem;

    background:
        var(--cobalt);

    font-family:
        var(--mono);

    font-size:
        .64rem;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.service-network span::before {
    content:
        "";

    position:
        absolute;

    top:
        1.25rem;
    left:
        1.25rem;

    width:
        .9rem;
    height:
        .9rem;

    border:
        3px solid
        var(--copper-light);

    border-radius:
        50%;
}


.service-network__main {
    grid-column:
        span 2;

    font-family:
        var(--display) !important;

    font-size:
        2.2rem !important;

    font-weight:
        700;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.reviews__heading {
    max-width:
        52rem;

    margin-bottom:
        5rem;
}


.reviews__grid {
    display:
        grid;

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

    margin-bottom:
        3rem;

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

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


.reviews figure {
    min-height:
        25rem;

    margin:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        2rem;

    border-right:
        1px solid
        var(--line);

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


.reviews figure > span {
    margin-bottom:
        5rem;

    color:
        var(--cobalt);

    font-family:
        var(--mono);

    font-size:
        .6rem;
}


.reviews blockquote {
    margin:
        0
        0
        auto;

    font-family:
        var(--display);

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

    font-weight:
        600;

    line-height:
        1.12;

    letter-spacing:
        -.035em;
}


.reviews figcaption {
    margin-top:
        2rem;

    color:
        var(--copper-dark);

    font-family:
        var(--mono);

    font-size:
        .58rem;

    letter-spacing:
        .08em;
}


/* =========================================================
   REQUEST SERVICE FORM
   ========================================================= */

.request-service {
    background:
        var(--paper);

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

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


.request-service__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        var(--section-y)
        0;

    display:
        grid;

    grid-template-columns:
        minmax(280px, .75fr)
        minmax(0, 1.25fr);

    gap:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.request-service__heading h2 {
    max-width:
        35rem;
}


.request-service__heading > p:not(.section-number) {
    max-width:
        28rem;
}


.request-service__note {
    margin-top:
        3rem;

    display:
        grid;

    max-width:
        22rem;

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

    font-family:
        var(--mono);

    font-size:
        .58rem;

    letter-spacing:
        .07em;
}


.request-service__note strong,
.request-service__note span {
    padding:
        .65rem
        .8rem;
}


.request-service__note strong {
    width:
        fit-content;

    background:
        var(--ink);

    color:
        white;
}


.request-service__note span {
    color:
        var(--emergency);
}


.service-form {
    display:
        grid;

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

    gap:
        2rem
        1.5rem;
}


.form-field {
    display:
        grid;

    gap:
        .45rem;
}


.form-field--full {
    grid-column:
        1 / -1;
}


.form-field label,
.form-field legend {
    font-family:
        var(--mono);

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.form-field input,
.form-field select,
.form-field textarea {
    width:
        100%;

    border:
        0;

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

    border-radius:
        0;

    background:
        transparent;

    color:
        var(--ink);
}


.form-field input,
.form-field select {
    min-height:
        3.65rem;
}


.form-field textarea {
    padding:
        .8rem
        0;

    resize:
        vertical;
}


.urgency {
    border:
        0;

    padding:
        0;
}


.urgency label {
    display:
        flex;

    align-items:
        center;

    gap:
        .7rem;

    min-height:
        3rem;

    border-bottom:
        1px solid
        var(--line);

    font-family:
        var(--body);

    font-size:
        .95rem;

    font-weight:
        400;

    letter-spacing:
        0;

    text-transform:
        none;
}


.urgency input {
    width:
        auto;

    min-height:
        auto;
}


.form-status {
    margin:
        0;

    color:
        rgba(17,23,22,.6);

    font-family:
        var(--mono);

    font-size:
        .57rem;

    letter-spacing:
        .07em;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq {
    display:
        grid;

    grid-template-columns:
        minmax(280px, .75fr)
        minmax(0, 1.25fr);

    gap:
        clamp(
            4rem,
            8vw,
            8rem
        );
}


.faq__heading h2 {
    font-size:
        clamp(
            3.2rem,
            5vw,
            5.6rem
        );
}


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


.faq details {
    border-bottom:
        1px solid
        var(--line);
}


.faq summary {
    position:
        relative;

    padding:
        1.45rem
        3rem
        1.45rem
        0;

    list-style:
        none;

    cursor:
        pointer;

    font-family:
        var(--display);

    font-size:
        1.45rem;

    font-weight:
        650;

    line-height:
        1.1;
}


.faq summary::-webkit-details-marker {
    display:
        none;
}


.faq summary::after {
    content:
        "+";

    position:
        absolute;

    right:
        .5rem;

    color:
        var(--cobalt);

    font-family:
        var(--mono);

    font-size:
        1.2rem;
}


.faq details[open] summary::after {
    content:
        "−";
}


.faq details p {
    max-width:
        40rem;

    margin:
        0;

    padding:
        0
        3rem
        1.5rem
        0;

    color:
        var(--ink-soft);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
    position:
        relative;

    min-height:
        620px;

    display:
        grid;

    grid-template-columns:
        minmax(280px, .7fr)
        minmax(0, 1.3fr);

    align-items:
        center;

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

    padding:
        var(--section-y)
        max(
            var(--gutter),
            calc((100vw - var(--max)) / 2)
        );

    overflow:
        hidden;

    background:
        var(--porcelain-warm);

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


.final-cta__valve {
    position:
        relative;

    width:
        min(
            28vw,
            18rem
        );

    aspect-ratio:
        1;

    border:
        12px solid
        var(--cobalt);

    border-radius:
        50%;
}


.final-cta__valve::before,
.final-cta__valve::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;
    left:
        50%;

    width:
        125%;

    height:
        10px;

    background:
        var(--cobalt);
}


.final-cta__valve::before {
    transform:
        translate(-50%,-50%)
        rotate(45deg);
}


.final-cta__valve::after {
    transform:
        translate(-50%,-50%)
        rotate(-45deg);
}


.final-cta__valve span {
    position:
        absolute;

    top:
        50%;
    left:
        50%;

    width:
        4rem;
    height:
        4rem;

    border-radius:
        50%;

    background:
        var(--copper);

    transform:
        translate(-50%,-50%);
}


.final-cta__content {
    max-width:
        52rem;
}


.final-cta__content > p:not(.section-number) {
    font-size:
        1.1rem;
}


.final-cta__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        .75rem;

    margin-top:
        2rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

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

    color:
        white;
}


.site-footer__inner {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    padding:
        5rem
        0;

    display:
        grid;

    grid-template-columns:
        1.4fr
        repeat(3, .6fr);

    gap:
        4rem;
}


.footer-brand {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


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

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

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -.05em;
}


.footer-brand > span {
    margin-top:
        .8rem;

    color:
        var(--copper-light);

    font-family:
        var(--mono);

    font-size:
        .58rem;

    letter-spacing:
        .09em;
}


.footer-brand p {
    margin-top:
        1.5rem;

    color:
        rgba(255,255,255,.64);
}


.footer-column {
    display:
        flex;

    flex-direction:
        column;

    gap:
        .55rem;
}


.footer-column strong {
    margin-bottom:
        .75rem;

    color:
        var(--copper-light);

    font-family:
        var(--mono);

    font-size:
        .6rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.footer-column a,
.footer-column span {
    font-size:
        .9rem;

    color:
        rgba(255,255,255,.72);
}


.footer-column a:hover {
    color:
        white;
}


.site-footer__bottom {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--max)
        );

    margin:
        auto;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        1.5rem
        0;

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

    font-family:
        var(--mono);

    font-size:
        .55rem;

    line-height:
        1.6;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.site-footer__bottom p {
    margin:
        0;

    color:
        rgba(255,255,255,.48);
}


.site-footer__bottom strong {
    color:
        var(--copper-light);
}


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

@media (max-width: 1050px) {

    .site-header__inner {
        gap:
            1rem;
    }


    .site-nav {
        gap:
            .75rem;
    }


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


    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .85fr);
    }


    .hero__pipe {
        left:
            56%;
    }


    .services__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .trust__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .service-network {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .reviews__grid {
        grid-template-columns:
            1fr;
    }


    .reviews figure {
        min-height:
            auto;
    }


    .reviews figure > span {
        margin-bottom:
            2rem;
    }


    .site-footer__inner {
        grid-template-columns:
            1.2fr
            repeat(3, .7fr);

        gap:
            2rem;
    }

}


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

@media (max-width: 760px) {

    :root {
        --gutter:
            1rem;

        --section-y:
            5rem;
    }


    h1 {
        font-size:
            clamp(
                3.55rem,
                16vw,
                5rem
            );
    }


    h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .utility-bar__inner {
        grid-template-columns:
            1fr
            auto;

        min-height:
            2.75rem;
    }


    .utility-bar__middle {
        display:
            none;
    }


    .site-header__inner {
        grid-template-columns:
            1fr
            auto;

        gap:
            .7rem;

        padding:
            .9rem
            0;
    }


    .site-brand strong {
        font-size:
            .98rem;
    }


    .header-call {
        padding:
            .7rem;

        font-size:
            .52rem;
    }


    .site-nav {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        padding-top:
            .65rem;

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

        scrollbar-width:
            none;
    }


    .site-nav::-webkit-scrollbar {
        display:
            none;
    }


    .site-nav a {
        flex:
            0 0 auto;

        font-size:
            .55rem;
    }


    .hero {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;
    }


    .hero__content {
        padding:
            3.5rem
            var(--gutter)
            4rem;
    }


    .job-status {
        grid-template-columns:
            auto
            1fr;

        margin-bottom:
            3rem;
    }


    .job-status strong {
        border-right:
            0;
    }


    .job-status b {
        grid-column:
            1 / -1;

        justify-content:
            center;

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


    .hero__actions {
        flex-direction:
            column;
    }


    .hero__actions .button {
        width:
            100%;
    }


    .hero__media,
    .photo-placeholder--hero {
        min-height:
            30rem;
    }


    .hero__pipe {
        display:
            none;
    }


    .section__intro,
    .services__heading,
    .trust__heading,
    .request-service__inner,
    .faq {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .section__intro,
    .services__heading,
    .trust__heading {
        margin-bottom:
            3.5rem;
    }


    .problem-list::before {
        left:
            1rem;
    }


    .problem-row {
        grid-template-columns:
            2rem
            1fr;

        gap:
            1rem;

        padding:
            2rem
            0;
    }


    .problem-row::before {
        left:
            .55rem;
    }


    .problem-row > a {
        grid-column:
            2;

        justify-self:
            start;

        margin-top:
            .5rem;
    }


    .services__grid,
    .trust__grid,
    .process__steps,
    .service-network {
        grid-template-columns:
            1fr;
    }


    .services__grid article,
    .trust__grid article {
        min-height:
            auto;
    }


    .services__grid article > span,
    .trust__grid article > span {
        margin-bottom:
            2.5rem;
    }


    .emergency__inner {
        grid-template-columns:
            1fr;
    }


    .emergency__copy {
        padding:
            5rem
            var(--gutter);
    }


    .photo-placeholder--emergency {
        min-height:
            28rem;
    }


    .process__steps {
        border-top:
            0;

        border-left:
            4px solid
            var(--copper);
    }


    .process__steps article {
        min-height:
            auto;

        padding:
            2.5rem
            1.5rem;
    }


    .process__steps article::before {
        top:
            2.6rem;

        left:
            -11px;
    }


    .process__steps span {
        margin-bottom:
            2rem;
    }


    .service-network__main {
        grid-column:
            span 1;
    }


    .reviews figure {
        padding:
            1.5rem;
    }


    .service-form {
        grid-template-columns:
            1fr;
    }


    .form-field--full {
        grid-column:
            auto;
    }


    .faq {
        width:
            min(
                calc(100% - (var(--gutter) * 2)),
                var(--max)
            );
    }


    .final-cta {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        padding:
            5rem
            var(--gutter);
    }


    .final-cta__valve {
        width:
            10rem;

        border-width:
            8px;
    }


    .final-cta__valve::before,
    .final-cta__valve::after {
        height:
            7px;
    }


    .final-cta__actions {
        flex-direction:
            column;
    }


    .final-cta__actions .button {
        width:
            100%;
    }


    .site-footer__inner {
        grid-template-columns:
            1fr
            1fr;

        gap:
            3rem
            1.5rem;
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }


    .site-footer__bottom {
        flex-direction:
            column;
    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 440px) {

    .header-call {
        max-width:
            7.5rem;

        text-align:
            center;
    }


    .hero__content {
        padding-top:
            2.75rem;
    }


    .utility-bar__inner {
        font-size:
            .52rem;
    }


    .problem-row h3 {
        font-size:
            1.8rem;
    }


    .site-footer__inner {
        grid-template-columns:
            1fr;
    }


    .footer-brand {
        grid-column:
            auto;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}

/* =========================================================
   WIDE SCREEN — EMERGENCY COMPOSITION FIX
   ========================================================= */

@media (min-width: 1500px) {

    /*
       Keep the full-bleed dark/photo treatment,
       but stop applying the large readable-shell gutter
       to BOTH sides of the left column.
    */

    .emergency__inner {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(560px, .96fr);
    }


    .emergency__copy {
        padding-top:
            var(--section-y);

        padding-bottom:
            var(--section-y);

        padding-left:
            max(
                var(--gutter),
                calc((100vw - var(--max)) / 2)
            );

        padding-right:
            clamp(
                3rem,
                5vw,
                5.5rem
            );
    }


    .emergency__copy h2 {
        max-width:
            44rem;

        font-size:
            clamp(
                4.8rem,
                5.8vw,
                7.3rem
            );
    }


    .emergency__copy > p:not(.section-number) {
        max-width:
            34rem;
    }


    .emergency__phone {
        font-size:
            clamp(
                3rem,
                3.8vw,
                4.75rem
            );
    }


    .photo-placeholder--emergency {
        min-height:
            650px;
    }

}


/* =========================================================
   ALL WEBSITE PHOTOGRAPHY — WIRED
   =========================================================

   SAVE REPLACEMENT IMAGES AS:

   assets/images/hero-plumber.webp
   assets/images/services-plumber.webp
   assets/images/emergency-shutoff.webp
   assets/images/trust-plumber.webp

   No additional HTML or CSS changes are required when
   replacing these four photographs.
   ========================================================= */


/* ---------------------------------------------------------
   REAL PHOTO FOUNDATION
   --------------------------------------------------------- */

.photo-placeholder--hero,
.photo-placeholder--wide,
.photo-placeholder--emergency,
.photo-placeholder--trust {
    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center;
}


/*
   Remove the temporary grid and oval placeholder graphics
   from the real photography slots.
*/

.photo-placeholder--hero::before,
.photo-placeholder--hero::after,
.photo-placeholder--wide::before,
.photo-placeholder--wide::after,
.photo-placeholder--emergency::before,
.photo-placeholder--emergency::after,
.photo-placeholder--trust::before,
.photo-placeholder--trust::after {
    display:
        none;
}


/*
   Hide the temporary PHOTO / caption text that was placed
   inside the image placeholders.

   External figcaptions remain visible where the design
   intentionally uses them.
*/

.photo-placeholder--hero > span,
.photo-placeholder--hero > strong,
.photo-placeholder--wide > span,
.photo-placeholder--wide > strong,
.photo-placeholder--emergency > span,
.photo-placeholder--emergency > strong,
.photo-placeholder--trust > span,
.photo-placeholder--trust > strong {
    display:
        none;
}


/* ---------------------------------------------------------
   IMAGE 01 — HERO
   --------------------------------------------------------- */

.photo-placeholder--hero {
    background-color:
        var(--cobalt-dark);

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 18, 17, .04),
            rgba(10, 18, 17, .14)
        ),
        url("../images/hero-plumber.webp");

    background-position:
        54% center;
}


/* ---------------------------------------------------------
   IMAGE 02 — SERVICES
   --------------------------------------------------------- */

.photo-placeholder--wide {
    background-color:
        var(--copper-dark);

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 18, 17, .10),
            rgba(10, 18, 17, .04)
        ),
        url("../images/services-plumber.webp");

    background-position:
        center 48%;
}


/* ---------------------------------------------------------
   IMAGE 03 — EMERGENCY / SHUTOFF
   --------------------------------------------------------- */

.photo-placeholder--emergency {
    background-color:
        #16201e;

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 18, 17, .12),
            rgba(10, 18, 17, .02)
        ),
        url("../images/emergency-shutoff.webp");

    background-position:
        center;
}


/* ---------------------------------------------------------
   IMAGE 04 — TRUST / PROFESSIONAL SERVICE
   --------------------------------------------------------- */

.photo-placeholder--trust {
    background-color:
        var(--cobalt-dark);

    background-image:
        linear-gradient(
            90deg,
            rgba(10, 18, 17, .08),
            rgba(10, 18, 17, .02)
        ),
        url("../images/trust-plumber.webp");

    background-position:
        center 42%;
}


/* ---------------------------------------------------------
   HERO CROPPING — MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .photo-placeholder--hero {
        background-position:
            58% center;
    }


    .photo-placeholder--wide {
        background-position:
            center;
    }


    .photo-placeholder--emergency {
        background-position:
            center;
    }


    .photo-placeholder--trust {
        background-position:
            center;
    }

}


/* ---------------------------------------------------------
   HERO CROPPING — WIDE / ULTRAWIDE
   --------------------------------------------------------- */

@media (min-width: 1500px) {

    .photo-placeholder--hero {
        background-position:
            52% center;
    }


    .photo-placeholder--wide {
        background-position:
            center 48%;
    }


    .photo-placeholder--trust {
        background-position:
            center 40%;
    }

}


/* =========================================================
   SERVICES PHOTO — BACKGROUND INTEGRATION
   ========================================================= */

.services {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    background:
        var(--paper);
}


/*
   Real plumbing photograph becomes environmental background
   instead of a separate content block.
*/

.services::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    background-image:
        url("../images/services-plumber.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center 52%;

    opacity:
        .26;

    filter:
        saturate(.85)
        contrast(.95);
}


/*
   Porcelain veil keeps all service copy readable while
   allowing the real work image to show through.
*/

.services::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(251, 250, 246, .97) 0%,
            rgba(251, 250, 246, .94) 34%,
            rgba(251, 250, 246, .82) 62%,
            rgba(251, 250, 246, .62) 100%
        );

    pointer-events:
        none;
}


.services__inner {
    position:
        relative;

    z-index:
        2;
}


/*
   The original figure is no longer needed visually.
   Keeping the markup intact avoids unnecessary HTML surgery.
*/

.services__photo {
    display:
        none;
}


/*
   Service grid gets a translucent paper surface so it
   remains readable while still feeling integrated into
   the photography.
*/

.services__grid {
    background:
        rgba(251, 250, 246, .78);

    backdrop-filter:
        blur(2px);
}


.services__grid article {
    background:
        rgba(251, 250, 246, .52);
}


/*
   Restore breathing room where the old photo used to sit.
*/

.services__panic {
    margin-top:
        3.5rem;

    padding-left:
        1rem;

    padding-right:
        1rem;

    background:
        rgba(251, 250, 246, .82);

    backdrop-filter:
        blur(2px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .services::before {
        background-position:
            62% center;

        opacity:
            .18;
    }


    .services::after {
        background:
            rgba(251, 250, 246, .88);
    }


    .services__grid,
    .services__grid article {
        background:
            rgba(251, 250, 246, .74);
    }

}


/* ---------------------------------------------------------
   WIDE / ULTRAWIDE
   --------------------------------------------------------- */

@media (min-width: 1500px) {

    .services::before {
        background-position:
            center 48%;

        opacity:
            .28;
    }


    .services::after {
        background:
            linear-gradient(
                90deg,
                rgba(251, 250, 246, .98) 0%,
                rgba(251, 250, 246, .93) 38%,
                rgba(251, 250, 246, .72) 70%,
                rgba(251, 250, 246, .48) 100%
            );
    }

}


/* =========================================================
   SERVICES BACKGROUND — VISIBLE PHOTO PASS
   ========================================================= */


/*
   Keep the actual photograph at full strength.
   The readability treatment happens ABOVE it instead of
   reducing the photograph itself to near invisibility.
*/

.services::before {
    opacity:
        1;

    background-position:
        center 52%;

    filter:
        saturate(.88)
        contrast(.96);
}


/*
   Strong porcelain protection on the left where the
   headline lives, fading to a much clearer view of the
   plumbing work toward the right.
*/

.services::after {
    background:
        linear-gradient(
            90deg,
            rgba(251, 250, 246, .97) 0%,
            rgba(251, 250, 246, .92) 24%,
            rgba(251, 250, 246, .73) 48%,
            rgba(251, 250, 246, .38) 72%,
            rgba(251, 250, 246, .16) 100%
        );
}


/*
   Keep the grid readable, but allow the photograph to
   actually show through and around the cards.
*/

.services__grid {
    background:
        rgba(251, 250, 246, .26);

    backdrop-filter:
        blur(1.5px);
}


.services__grid article {
    background:
        rgba(251, 250, 246, .74);
}


/*
   Give every second card slightly more transparency.
   This lets the real service photograph become part of
   the composition without sacrificing readability.
*/

.services__grid article:nth-child(even) {
    background:
        rgba(251, 250, 246, .62);
}


/*
   Panic strip stays readable but no longer forms a giant
   opaque block across the background.
*/

.services__panic {
    background:
        rgba(251, 250, 246, .68);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .services::before {
        opacity:
            1;

        background-position:
            62% center;
    }


    .services::after {
        background:
            rgba(251, 250, 246, .74);
    }


    .services__grid {
        background:
            transparent;
    }


    .services__grid article,
    .services__grid article:nth-child(even) {
        background:
            rgba(251, 250, 246, .78);
    }

}


/* ---------------------------------------------------------
   WIDE / ULTRAWIDE
   --------------------------------------------------------- */

@media (min-width: 1500px) {

    .services::before {
        opacity:
            1;

        background-position:
            center 48%;
    }


    .services::after {
        background:
            linear-gradient(
                90deg,
                rgba(251, 250, 246, .98) 0%,
                rgba(251, 250, 246, .91) 24%,
                rgba(251, 250, 246, .67) 47%,
                rgba(251, 250, 246, .30) 70%,
                rgba(251, 250, 246, .10) 100%
            );
    }

}


/* =========================================================
   TRUST PHOTO — BACKGROUND INTEGRATION
   ========================================================= */

.trust {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;
}


/*
   Finished plumbing becomes environmental proof behind
   the Trust / Why Us section instead of a separate image.
*/

.trust::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -2;

    inset:
        0;

    background-image:
        url("../images/trust-plumber.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center 52%;
}


/*
   Porcelain veil preserves the clean technical layout while
   allowing the finished-job photography to remain visible.
*/

.trust::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(244, 242, 236, .97) 0%,
            rgba(244, 242, 236, .92) 30%,
            rgba(244, 242, 236, .74) 58%,
            rgba(244, 242, 236, .42) 80%,
            rgba(244, 242, 236, .20) 100%
        );
}


/*
   Remove the dedicated photography block.
*/

.trust__photo {
    display:
        none;
}


/*
   Cards remain readable without completely hiding
   the background image.
*/

.trust__grid {
    background:
        rgba(244, 242, 236, .26);

    backdrop-filter:
        blur(1.5px);
}


.trust__grid article {
    background:
        rgba(244, 242, 236, .76);
}


.trust__grid article:nth-child(even) {
    background:
        rgba(244, 242, 236, .64);
}


/*
   Disclosure gets a light reading surface rather than
   floating directly over photography.
*/

.trust .demo-disclosure {
    padding:
        1rem;

    background:
        rgba(244, 242, 236, .78);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .trust::before {
        background-position:
            60% center;
    }


    .trust::after {
        background:
            rgba(244, 242, 236, .78);
    }


    .trust__grid article,
    .trust__grid article:nth-child(even) {
        background:
            rgba(244, 242, 236, .82);
    }

}


/* ---------------------------------------------------------
   WIDE / ULTRAWIDE
   --------------------------------------------------------- */

@media (min-width: 1500px) {

    .trust::before {
        background-position:
            center 48%;
    }


    .trust::after {
        background:
            linear-gradient(
                90deg,
                rgba(244, 242, 236, .98) 0%,
                rgba(244, 242, 236, .91) 28%,
                rgba(244, 242, 236, .66) 55%,
                rgba(244, 242, 236, .31) 78%,
                rgba(244, 242, 236, .12) 100%
            );
    }

}


/* =========================================================
   TRUST — WIDE FULL-BLEED BACKGROUND
   ========================================================= */

@media (min-width: 1500px) {

    /*
       On wide displays the photography/background spans the
       viewport, while the readable Trust content remains
       aligned to the established 1200px site canvas.
    */

    .trust.section {
        width:
            100%;

        max-width:
            none;

        margin:
            0;

        padding-top:
            var(--section-y);

        padding-bottom:
            var(--section-y);

        padding-left:
            max(
                var(--gutter),
                calc((100vw - var(--max)) / 2)
            );

        padding-right:
            max(
                var(--gutter),
                calc((100vw - var(--max)) / 2)
            );
    }


    /*
       Background now belongs to the full section rather than
       the narrow content canvas.
    */

    .trust::before,
    .trust::after {
        left:
            0;

        right:
            0;

        width:
            auto;
    }


    /*
       Keep the useful finished-plumbing area visible toward
       the right half of the wide composition.
    */

    .trust::before {
        background-position:
            center 50%;
    }


    /*
       Slightly rebalance the veil so the photograph remains
       clearly visible without compromising the headline.
    */

    .trust::after {
        background:
            linear-gradient(
                90deg,
                rgba(244, 242, 236, .98) 0%,
                rgba(244, 242, 236, .92) 25%,
                rgba(244, 242, 236, .68) 50%,
                rgba(244, 242, 236, .32) 74%,
                rgba(244, 242, 236, .12) 100%
            );
    }


    /*
       Content remains comfortably readable rather than
       stretching across the monitor.
    */

    .trust__heading,
    .trust__grid,
    .trust .demo-disclosure {
        position:
            relative;

        z-index:
            2;
    }

}


/* =========================================================
   FORM FUNCTIONALITY STATES
   ========================================================= */

.service-form button:disabled {
    opacity:
        .6;

    cursor:
        wait;

    transform:
        none;
}


.form-status--success {
    color:
        var(--cobalt);

    font-weight:
        700;
}