/* Clean Flow Plumbing Services - public landing page.

   Built from full-width sections on a plain background: a photo hero with a
   navy overlay, light service cards, a tinted "how it works" band, an FAQ, a
   call-to-action band and a footer. The nav comes from cake.css so it matches
   every other page. */

html {
    scroll-behavior: smooth;
}

body.landing-page {
    background: var(--color-white);
    color: var(--color-ink);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-brand-navy);
    color: var(--color-white);
    padding: 0.8rem 1.4rem;
    z-index: 100;
}
.skip-link:focus {
    left: 0;
}

a:focus,
a.button:focus {
    outline: 3px solid var(--color-brand-yellow);
    outline-offset: 2px;
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: min(72rem, calc(100vh - var(--top-nav-height)));
    padding: 8rem 3.2rem 11rem;
    background: #0b2e4a;
    color: var(--color-white);
}

/* The photo has its subject on the left, which is exactly where the headline
   goes. Mirroring it puts the person on the right, clear of the text. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/plumbing-background.jpg') center 25% / cover no-repeat;
    transform: scaleX(-1);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 36, 58, 0.96) 0%, rgba(11, 46, 74, 0.88) 38%, rgba(11, 46, 74, 0.28) 78%, rgba(11, 46, 74, 0.12) 100%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
}

.hero-text {
    max-width: 66rem;
}

.hero-eyebrow {
    display: inline-block;
    margin: 0 0 2rem;
    padding: 0.6rem 1.4rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffe08a;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-text h1 {
    margin: 0 0 2rem;
    color: var(--color-white);
    font-size: clamp(4.2rem, 6.4vw, 7.2rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.hero-lead {
    max-width: 56rem;
    margin: 0 0 3.2rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.9rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.6rem;
}

.hero-button {
    min-height: 5.2rem;
    padding: 1rem 2.8rem;
    background: var(--color-brand-yellow);
    border-color: var(--color-brand-yellow);
    color: #102b3d;
    font-size: 1.6rem;
    font-weight: 700;
}
.hero-button:hover,
.hero-button:focus {
    background: #ffd45a;
    border-color: #ffd45a;
    color: #102b3d;
    transform: translateY(-1px);
}
.hero-button--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--color-white);
    box-shadow: none;
}
.hero-button--ghost:hover,
.hero-button--ghost:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--color-white);
    color: var(--color-white);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    font-weight: 500;
}
.hero-trust li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
}
.hero-trust svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: #ffe08a;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A nudge that there is more below the fold. landing.js adds
   is-hidden once the visitor starts scrolling, so it gets out of the way. */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 5.6rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hero-scroll:hover,
.hero-scroll:focus {
    color: #ffe08a;
}
.hero-scroll svg {
    width: 3.2rem;
    height: 3.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
.hero-scroll.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* On wider screens the hero can run a little past the bottom of the window,
   so pin the arrow to the window instead and it is always seen on arrival. */
@media (min-width: 64.01rem) {
    .hero-scroll {
        position: fixed;
        z-index: 5;
    }
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(0.8rem); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll svg {
        animation: none;
    }
}

/* ---------- generic sections ---------- */

.section {
    padding: 9rem 3.2rem;
    background: var(--color-white);
}
.section--tint {
    background: var(--color-main-bg);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.section__inner {
    max-width: 120rem;
    margin: 0 auto;
}
.section__inner--narrow {
    max-width: 78rem;
    text-align: center;
}
.faq details {
    text-align: left;
}
.section__eyebrow {
    margin: 0 0 1rem;
    color: var(--color-brand-navy-mid);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section__title {
    margin: 0 0 1.2rem;
    font-size: clamp(3.2rem, 4vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.section__intro {
    max-width: 62rem;
    margin: 0 0 4.8rem;
    color: var(--color-muted);
    font-size: 1.8rem;
}

/* ---------- services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.service-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
    transform: translateY(-3px);
    border-color: #c5d6e6;
    box-shadow: var(--shadow-md);
}

/* The photos come in different shapes, so every one is cropped to the same
   box. The icon badge hangs over the bottom-left corner of the photo. */
.service-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-brand-navy-pale);
}
.service-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.service-card:hover .service-card__media img {
    transform: scale(1.04);
}
/* The pipe repairs photo is tall and has foreign-language branding on the
   uniform near the top. Cropping toward the hands keeps it out of frame. */
.service-card:first-child .service-card__media img {
    object-position: 50% 78%;
}
.service-card__media {
    overflow: hidden;
}
.service-card__icon {
    position: absolute;
    left: 1.8rem;
    bottom: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}
.service-card__icon svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: var(--color-brand-navy);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-card__body {
    padding: 2.2rem 2.4rem 2.6rem;
}
.service-card h3 {
    margin: 0 0 0.8rem;
    font-size: 2rem;
}
.service-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.55rem;
}

/* ---------- how it works ---------- */

.steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 2rem;
    margin: 3.2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.steps-list li {
    margin: 0;
    padding: 2.8rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
}
.steps-list__title {
    display: block;
    font-weight: 700;
}
.steps-list__text {
    display: block;
    margin-top: 0.8rem;
    color: var(--color-muted);
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.55;
}
.steps-list__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 1.8rem;
    border-radius: 50%;
    background: var(--color-brand-navy);
    color: var(--color-white);
    font-size: 1.9rem;
    font-weight: 700;
}

/* ---------- FAQ ---------- */

.faq {
    margin-top: 3.2rem;
}
.faq details {
    margin-bottom: 1.2rem;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.faq details[open] {
    border-color: #c5d6e6;
}
.faq summary {
    position: relative;
    padding: 2rem 5.6rem 2rem 2.4rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.7rem;
    font-weight: 600;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary::after {
    content: '+';
    position: absolute;
    right: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-brand-navy-mid);
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
}
.faq details[open] summary::after {
    content: '\2212';
}
.faq details p {
    margin: 0;
    padding: 0 2.4rem 2.2rem;
    color: var(--color-muted);
    font-size: 1.6rem;
}

/* ---------- call to action band ---------- */

.cta-band {
    padding: 8rem 3.2rem;
    background: linear-gradient(135deg, #0b2e4a 0%, #12466f 100%);
    color: var(--color-white);
    text-align: center;
}
.cta-band__inner {
    max-width: 72rem;
    margin: 0 auto;
}
.cta-band h2 {
    margin: 0 0 1.2rem;
    color: var(--color-white);
    font-size: clamp(3.2rem, 4vw, 4.4rem);
    font-weight: 800;
}
.cta-band p {
    margin: 0 0 3.2rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.8rem;
}

/* ---------- footer ---------- */

.site-footer {
    padding: 3.2rem;
    background: #08243a;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.4rem;
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    align-items: center;
    justify-content: space-between;
    max-width: 120rem;
    margin: 0 auto;
}
.site-footer p {
    margin: 0;
}
.site-footer a {
    margin-left: 2rem;
    color: rgba(255, 255, 255, 0.86);
}
.site-footer a:first-child {
    margin-left: 0;
}
.site-footer a:hover,
.site-footer a:focus {
    color: var(--color-white);
}

@media (max-width: 64rem) {
    .hero {
        min-height: 0;
        padding: 6rem 2.4rem 12rem;
    }
    .hero::after {
        background: linear-gradient(180deg, rgba(8, 36, 58, 0.92), rgba(11, 46, 74, 0.86));
    }
    .section,
    .cta-band {
        padding: 6rem 2.4rem;
    }
}

@media (max-width: 40rem) {
    .hero-lead {
        font-size: 1.7rem;
    }
    .hero-actions .button {
        width: 100%;
    }
}

/* ---------- legal pages and the footer notice ---------- */

/* Long-form text wants a narrower column than the marketing sections. Around
   70 characters a line is where reading comfort sits, and a privacy notice is
   read rather than skimmed. */
.section__inner--prose {
    max-width: 78rem;
}

.section__inner--prose h2 {
    margin: 4rem 0 1.2rem;
    font-size: 2.6rem;
}

.section__inner--prose h3 {
    margin: 2.8rem 0 .8rem;
    font-size: 1.9rem;
}

.section__inner--prose p,
.section__inner--prose li {
    font-size: 1.65rem;
    line-height: 1.7;
}

.section__inner--prose ul {
    margin: 0 0 2rem;
    padding-left: 2.2rem;
}

.section__inner--prose li {
    margin-bottom: 1rem;
}

.legal-updated {
    margin-bottom: 3.2rem;
    color: var(--color-muted);
    font-size: 1.4rem;
}

/* The unanswered questions, marked so they are impossible to miss in review
   and impossible to mistake for finished copy if this ships by accident. */
.legal-confirm {
    margin: 0 0 2rem;
    padding: 1.4rem 1.8rem;
    background: #fff8e1;
    border-left: .4rem solid #f2c230;
    border-radius: .4rem;
    color: #5b4a12;
    font-size: 1.5rem;
}

/* Scoped with the parent on purpose, not for tidiness.
   `.site-footer p` above sets margin: 0 and is more specific than a single
   class, so a plain .site-footer__privacy rule loses the margin fight: the
   notice ended up jammed against the links above it and aligned to the
   footer's padding edge rather than centred with the row. Matching that
   specificity is what makes the spacing hold. */
.site-footer .site-footer__privacy {
    max-width: 120rem;
    margin: 2.4rem auto 0;
    padding-top: 2.4rem;
    border-top: .1rem solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .62);
    font-size: 1.3rem;
    line-height: 1.65;
}

/* Same contest: `.site-footer a` sets margin-left: 2rem to space the nav
   links apart, which inside a sentence opens a gap before the link. */
.site-footer .site-footer__privacy a {
    margin-left: 0;
    color: rgba(255, 255, 255, .86);
    text-decoration: underline;
}