/* ==========================================================================
   WHC — Drain Line Restoration page (Figma 758:8170)
   Theme: medium red #A32F2F hero/accents, dark red CTA, dark-grey steps bg.
   ========================================================================== */

.dl-page {
    background: var(--whc-white);
    --dl-red:    #A32F2F;
    --dl-pastel: #F2BABA;
    --dl-dark:   #282828;
}

/* ============================================================
   1. Hero (red)
   ============================================================ */
.dl-hero {
    position: relative;
    background: var(--dl-red);
    overflow: hidden;
    min-height: 684px;
}
.dl-hero__inner {
    position: relative;
    height: 684px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.dl-hero__content {
    position: relative;
    z-index: 2;
    color: var(--whc-white);
    padding-left: var(--container-pad);
    width: 100%;
    max-width: calc(477px + var(--container-pad));
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.dl-hero__title {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.96px;
    margin: 0;
    color: var(--whc-white);
    font-weight: 400;
}
.dl-hero__title strong { font-weight: 600; }
.dl-hero__cta { align-self: flex-start; }
.dl-hero__pattern {
    position: absolute;
    top: 0;
    left: calc(50% - 11%);
    width: 684px;
    height: 684px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.dl-hero__pattern img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0) invert(1);
}
.dl-hero__visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    overflow: hidden;
}
.dl-hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   2. Intro / dark rounded card (no accent)
   ============================================================ */
.dl-intro { background: var(--whc-white); padding: 96px 0 64px; }
.dl-intro__inner {
    max-width: min(1280px, calc(100% - 2 * var(--container-pad)));
    margin: 0 auto;
    padding: 64px 102px;
    background: #343A40;
    border-radius: 24px;
    color: var(--whc-white);
}
.dl-intro__heading {
    margin: 0 0 35px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.72px;
    color: var(--whc-white);
}
.dl-intro__text {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-white);
}
.dl-intro__heading .accent { color: var(--dl-pastel); font-weight: 500; }

/* ============================================================
   3. Common Signs — icon grid (flex-wrap)
   ============================================================ */
.dl-signs { background: var(--whc-white); padding: 53px 0 80px; }
.dl-signs__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.dl-signs__title {
    margin: 0 auto 72px;
    text-align: center;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-black);
}
.dl-signs__title strong { font-weight: 600; color: var(--dl-red); }
.dl-signs__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 33px 42px;
}
.dl-sign-card {
    position: relative;
    width: 304px;
    height: 257px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    gap: 16px;
}
.dl-sign-card__icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dl-sign-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.dl-sign-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-black);
}

/* ============================================================
   4. 3-Step Process (dark-grey bg, numbered cards)
   ============================================================ */
.dl-steps { background: var(--dl-dark); padding: 96px 0; }
.dl-steps__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    color: var(--whc-white);
}
.dl-steps__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 56px;
    max-width: 537px;
}
.dl-steps__title {
    margin: 0;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-white);
}
.dl-steps__title strong { font-weight: 600; }
.dl-steps__sub {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--whc-white);
}
.dl-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}
.dl-step {
    background: var(--whc-white);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 460px;
}
.dl-step__num {
    margin: 12px 0 0 25px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.28px;
    color: var(--dl-red);
}
.dl-step__body {
    padding: 26px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--whc-grey-dark);
}
.dl-step__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--whc-grey-dark);
}
.dl-step__text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-grey-dark);
}
.dl-step__image {
    margin-top: auto;
    width: 100%;
    height: 167px;
    background: #C7C7C7;
    overflow: hidden;
}
.dl-step__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   5. Solution Table
   ============================================================ */
.dl-solution { background: var(--whc-white); padding: 80px 0; }
.dl-solution__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.dl-solution__title {
    margin: 0 auto 56px;
    text-align: center;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-black);
}
.dl-solution__title strong { font-weight: 600; color: var(--dl-red); }

/* Reformatted (feedback #17): clean rounded card instead of a heavy
   full-red grid — red header bar, tinted first column, light row dividers. */
.dl-solution__table-wrap {
    overflow-x: auto;
    border: 1px solid #EEDCDC;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(163, 47, 47, 0.08);
    background: var(--whc-white);
    -webkit-overflow-scrolling: touch;
}
.dl-solution__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.dl-solution__table th,
.dl-solution__table td {
    padding: 20px 24px;
    border: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
}
/* Header bar */
.dl-solution__table thead th {
    background: var(--dl-red);
    color: var(--whc-white);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.dl-solution__table thead th:first-child { border-top-left-radius: 16px; }
.dl-solution__table thead th:last-child  { border-top-right-radius: 16px; }
/* Body cells */
.dl-solution__table tbody td {
    background: var(--whc-white);
    color: var(--whc-grey-dark);
}
/* First column = row labels: soft red tint + red text */
.dl-solution__table tbody th {
    background: #FBF3F3;
    color: var(--dl-red);
    font-weight: 600;
    white-space: nowrap;
}
/* Horizontal dividers only (no dense grid) */
.dl-solution__table tbody tr + tr th,
.dl-solution__table tbody tr + tr td {
    border-top: 1px solid #F1E4E4;
}
.dl-solution__table tbody tr:last-child th:first-child { border-bottom-left-radius: 16px; }

/* ============================================================
   6. What Sets WHC Apart — photo banner + horizontal cards on top
   ============================================================ */
.dl-apart {
    position: relative;
    background: var(--whc-white);
    padding: 238px 0 20px;
    overflow: hidden;
    min-height: 667px;
}
.dl-apart__bg {
    position: absolute;
    top: 94px;
    left: 0; right: 0;
    height: 439px;
    z-index: 0;
}
.dl-apart__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-apart__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.dl-apart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 104px;
}
.dl-apart__title {
    margin: 0;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-grey-dark);
}
/* Scroll indicator buttons (feedback #18) — same pattern as the homepage
   Industries carousel arrows, themed to the drain-line red. */
.dl-apart__nav { display: flex; gap: 8px; flex-shrink: 0; }
.dl-apart__btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--whc-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--dl-red);
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.dl-apart__btn:hover { background: var(--dl-red); color: var(--whc-white); transform: scale(1.05); }
.dl-apart__btn svg { width: 20px; height: 20px; }
.dl-apart__row {
    --dl-apart-bleed: max(0px, (100vw - var(--container-max)) / 2);
    --dl-apart-edge:  calc(var(--container-pad) + var(--dl-apart-bleed));
    display: flex;
    gap: 21px;
    overflow-x: auto;
    margin-left: calc(-1 * var(--dl-apart-edge));
    margin-right: calc(-1 * var(--dl-apart-edge));
    padding: 0 var(--dl-apart-edge) 16px;
    scroll-padding-left: var(--dl-apart-edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.dl-apart__row::-webkit-scrollbar { display: none; }
.dl-apart-card {
    flex: 0 0 412px;
    scroll-snap-align: start;
    background: var(--whc-white);
    border: 1px solid #C1C1C1;
    border-radius: 12px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 249px;
}
.dl-apart-card__icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.dl-apart-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.dl-apart-card__heading { display: flex; flex-direction: column; gap: 12px; }
.dl-apart-card__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dl-red);
}
.dl-apart-card__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-black);
}

/* ============================================================
   7. CTA Banner — dark red
   ============================================================ */
.dl-cta {
    position: relative;
    background: var(--whc-red-dark);
    overflow: hidden;
    min-height: 580px;
}
.dl-cta__inner {
    position: relative;
    height: 580px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.dl-cta__pattern {
    position: absolute;
    top: -9px;
    left: calc(50% - 270px);
    width: 598px; height: 598px;
    pointer-events: none;
    z-index: 3;
}
.dl-cta__pattern img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0) invert(1);
}
.dl-cta__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(424px + var(--container-pad));
    padding-left: var(--container-pad);
    color: var(--whc-white);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.dl-cta__text { display: flex; flex-direction: column; gap: 24px; }
.dl-cta__title {
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--whc-white);
}
.dl-cta__sub {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 380px;
    color: var(--whc-white);
}
.dl-cta__cta { width: 153px; padding-left: 0; padding-right: 0; }
.dl-cta__visual { position: relative; z-index: 2; align-self: stretch; overflow: hidden; }
.dl-cta__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .dl-hero__pattern { display: none; }
    .dl-intro__inner { padding: 56px 64px; }
    .dl-intro__heading { font-size: 32px; }
    .dl-signs__title,
    .dl-steps__title,
    .dl-solution__title { font-size: 40px; }
    .dl-apart { padding-top: 200px; min-height: 600px; }
    .dl-apart__title { font-size: 40px; margin-bottom: 90px; }
    .dl-cta__title { font-size: 36px; }
}
@media (max-width: 991px) {
    .dl-hero__inner,
    .dl-cta__inner { grid-template-columns: 1fr; }

    .dl-hero { min-height: auto; }
    .dl-hero__inner { height: auto; padding-top: 0; padding-bottom: 0; }
    .dl-hero__content { padding: 64px var(--container-pad) 48px; max-width: none; }
    .dl-hero__visual { height: 320px; }
    .dl-signs__title { margin-bottom: 0; }

    .dl-intro { padding: 64px 0 32px; }
    .dl-intro__inner { padding: 48px 32px; border-radius: 16px; }
    .dl-intro__heading { font-size: 28px; }
    .dl-intro__text { font-size: 18px; }

    .dl-signs__grid { gap: 0; }

    .dl-steps { padding: 64px 0; }
    .dl-steps__grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 16px;
    }
    .dl-steps__grid::-webkit-scrollbar { display: none; }
    .dl-step { flex: 0 0 320px; scroll-snap-align: start; }

    .dl-apart { padding: 0 0 64px; min-height: 0; }
    .dl-apart__bg { position: relative; top: 0; height: 240px; }
    .dl-apart__title { margin: 32px 0; }

    .dl-cta { min-height: auto; }
    .dl-cta__inner { height: auto; }
    .dl-cta__copy { padding: 64px var(--container-pad); max-width: none; }
    .dl-cta__visual { height: 320px; }
    .dl-cta__pattern { display: none; }
}
@media (max-width: 600px) {
    .dl-hero__title,
    .dl-signs__title,
    .dl-steps__title,
    .dl-solution__title,
    .dl-apart__title { font-size: 32px; letter-spacing: -0.5px; }
    .dl-cta__title { font-size: 28px; }
    .dl-intro__inner { padding: 40px 24px; }
    .dl-intro__heading { font-size: 24px; }
    .dl-intro__text { font-size: 16px; }
    .dl-sign-card { width: 100%; max-width: 360px; margin: 0 auto; }
    .dl-apart-card { flex: 0 0 300px; }
    .dl-apart-card__title { font-size: 22px; }
}

/* ============================================================
   Sign-card corner-fill hover animation
   Added 2026-05-22 in HTML; ported to WP 2026-05-25.
   ============================================================ */

/* Registered property so the corner-fill radius can transition. */
@property --red-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.dl-sign-card {
    background-color: var(--whc-white);
    transition: transform 0.3s var(--ease),
                box-shadow 0.3s var(--ease);
}

/* corner-fill layer — 4 red discs grow from corners; opacity fades in
   simultaneously so the red "appears" while it's filling */
.dl-sign-card::before {
    content: "";
    position: absolute;
    inset: 0;
    --red-r: 0px;
    background-image:
        radial-gradient(circle var(--red-r) at 0%   0%,   var(--dl-red) 99%, transparent 100%),
        radial-gradient(circle var(--red-r) at 100% 0%,   var(--dl-red) 99%, transparent 100%),
        radial-gradient(circle var(--red-r) at 0%   100%, var(--dl-red) 99%, transparent 100%),
        radial-gradient(circle var(--red-r) at 100% 100%, var(--dl-red) 99%, transparent 100%);
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: --red-r 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.55s ease;
}

.dl-sign-card:hover::before {
    --red-r: 260px;
    opacity: 1;
}

.dl-sign-card__icon,
.dl-sign-card__title {
    position: relative;
    z-index: 1;
}

.dl-sign-card__icon img {
    transition: filter 0.25s ease;
}

.dl-sign-card:hover .dl-sign-card__icon img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease 0.05s;
}

.dl-sign-card__title {
    transition: color 0.25s ease;
}

.dl-sign-card:hover .dl-sign-card__title {
    color: var(--whc-white);
    transition: color 0.3s ease 0.1s;
}