/* —— Shared hub / pillar accents —— */
.hub-eyebrow {
    margin:0 0 12px;
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--yellow-ink);
}
.hub-page .breadcrumb a,
.emergency-page .breadcrumb a {
    color:var(--muted);
}
.hub-page .breadcrumb a:hover,
.emergency-page .breadcrumb a:hover {
    color:var(--navy);
}
.hub-page .breadcrumb [aria-current],
.emergency-page .breadcrumb [aria-current] {
    color:var(--navy);
}
.hub-page .breadcrumb-separator,
.emergency-page .breadcrumb-separator {
    color:var(--line);
}

/* —— Services hub hero —— */
.hub-hero {
    background:
        linear-gradient(160deg,var(--paper) 0%,var(--white) 55%,#fff8e8 100%);
    border-bottom:1px solid var(--line);
}
.hub-hero-grid {
    display:grid;
    gap:28px;
    padding-block:32px 40px;
    align-items:center;
}
.hub-hero-lead {
    margin:16px 0 0;
    max-width:44ch;
    color:var(--muted);
    font-size:clamp(15px,1.5vw,17px);
    line-height:1.7;
}
.hub-hero-media {
    position:relative;
    justify-self:center;
    width:min(100%,420px);
}
.hub-hero-frame {
    position:absolute;
    inset:18px -14px -14px 22px;
    border:2px solid var(--yellow);
    pointer-events:none;
}
.hub-hero-media img {
    position:relative;
    z-index:1;
    width:100%;
    aspect-ratio:5/4;
    object-fit:cover;
    clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,0 100%);
}
.hub-hero-accent {
    position:absolute;
    z-index:2;
    right:12px;
    bottom:18px;
    width:64px;
    height:4px;
    background:var(--navy);
}

/* Category nav */
.hub-catnav {
    position:sticky;
    top:calc(var(--utility-h,36px) + var(--header-height,68px));
    z-index:30;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(10px);
}
.hub-catnav-inner {
    display:grid;
    gap:8px;
    padding-block:12px;
}
.hub-catnav-label {
    margin:0;
    font-size:11px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--yellow-ink);
}
.hub-catnav-track {
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
}
.hub-catnav-track::-webkit-scrollbar { display:none; }
.hub-catnav-link {
    flex:none;
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--navy);
    font-size:13px;
    font-weight:650;
    text-decoration:none;
    white-space:nowrap;
}
.hub-catnav-link:hover,
.hub-catnav-link.is-active {
    background:var(--navy);
    border-color:var(--navy);
    color:var(--white);
    text-decoration:none;
}

/* Category directory */
.hub-directory {
    background:var(--white);
}
.hub-category {
    padding-block:var(--section-y);
    border-bottom:1px solid var(--line);
    scroll-margin-top:calc(var(--utility-h,36px) + var(--header-height,68px) + 64px);
}
.hub-category.is-featured {
    background:var(--paper);
}
.hub-category-grid {
    display:grid;
    gap:28px;
    align-items:center;
}
.hub-category-media {
    margin:0;
    overflow:hidden;
}
.hub-category-media img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}
.hub-category-num {
    display:block;
    font:750 2rem/1 var(--heading);
    color:#ffb00055;
    letter-spacing:-.04em;
    margin-bottom:8px;
}
.hub-category-intro {
    margin:12px 0 20px;
    max-width:48ch;
    color:var(--muted);
}
.hub-service-list {
    list-style:none;
    display:grid;
    gap:0;
    margin:0;
    border-top:1px solid var(--line);
}
.hub-service-list li {
    border-bottom:1px solid var(--line);
}
.hub-service-list a,
.hub-service-item {
    display:grid;
    gap:4px;
    padding:16px 0;
    text-decoration:none;
    color:inherit;
}
.hub-service-list a:hover {
    text-decoration:none;
}
.hub-service-list a:hover .hub-service-name {
    color:var(--navy-soft);
    text-decoration:underline;
    text-decoration-color:var(--yellow);
}
.hub-service-name {
    font-family:var(--heading);
    font-size:1.05rem;
    font-weight:720;
    color:var(--navy);
}
.hub-service-desc {
    font-size:14px;
    color:var(--muted);
    line-height:1.55;
}
.hub-service-go {
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:700;
    color:var(--yellow-ink);
}
.hub-service-go .icon {
    width:16px;
    height:16px;
}
.hub-service-go.is-soon,
.hub-service-list .is-pending .hub-service-name {
    color:var(--muted);
}
.hub-category-more {
    margin-top:18px;
}

/* Highlight */
.hub-highlight {
    position:relative;
    min-height:420px;
    display:grid;
    align-items:end;
    color:#d7e2ee;
    overflow:hidden;
}
.hub-highlight-media {
    position:absolute;
    inset:0;
}
.hub-highlight-media img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.hub-highlight-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,#061f38f2 12%,#061f38aa 48%,#061f3840 100%);
}
.hub-highlight-panel {
    position:relative;
    z-index:1;
    padding-block:48px;
    max-width:560px;
}
.hub-highlight-panel h2 {
    color:var(--white);
    margin-bottom:14px;
}
.hub-highlight-panel p {
    margin:0 0 22px;
    color:#b8c6d6;
    max-width:42ch;
}

/* Why */
.hub-why {
    background:var(--white);
}
.hub-why-title {
    max-width:14ch;
    margin-bottom:28px;
}
.hub-why-rows {
    list-style:none;
    margin:0;
    border-top:1px solid var(--line);
}
.hub-why-rows li {
    display:grid;
    grid-template-columns:56px 1fr;
    gap:16px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
}
.hub-why-num {
    font:750 1.25rem/1 var(--heading);
    color:var(--yellow-ink);
}
.hub-why-rows h3 {
    margin-bottom:6px;
}
.hub-why-rows p {
    color:var(--muted);
    font-size:15px;
}

/* Process timeline */
.hub-process {
    background:var(--paper);
}
.hub-timeline {
    list-style:none;
    display:grid;
    gap:0;
    margin:0;
    counter-reset:none;
}
.hub-timeline li {
    position:relative;
    padding:24px 0;
    border-top:1px solid var(--line);
}
.hub-timeline li:last-child {
    border-bottom:1px solid var(--line);
}
.hub-timeline-num {
    display:block;
    font:750 clamp(1.8rem,4vw,2.4rem)/1 var(--heading);
    color:#ffb00055;
    margin-bottom:8px;
}
.hub-timeline h3 {
    margin-bottom:8px;
}
.hub-timeline p {
    max-width:38ch;
    color:var(--muted);
    font-size:15px;
}

/* Areas */
.hub-areas {
    background:var(--white);
}
.hub-areas-panel,
.emergency-areas-panel {
    display:grid;
    gap:28px;
    padding:var(--panel-pad);
    background:linear-gradient(145deg,var(--navy-dark),var(--navy));
    color:#d7e2ee;
}
.hub-areas-panel h2,
.emergency-areas-panel h2 {
    color:var(--white);
}
.hub-areas-panel p,
.emergency-areas-panel p {
    margin-top:12px;
    color:#b8c6d6;
    max-width:48ch;
}
.hub-areas-list {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0;
}
.hub-areas-list a,
.hub-areas-list .is-soon {
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 14px;
    border:1px solid #ffffff22;
    background:#ffffff0d;
    color:var(--white);
    font-weight:650;
    font-size:14px;
    text-decoration:none;
}
.hub-areas-list a:hover {
    border-color:var(--yellow);
    color:var(--yellow);
}

/* Hub CTA */
.hub-cta,
.emergency-cta {
    background:
        radial-gradient(ellipse 50% 60% at 100% 0%,#ffb00022,transparent 55%),
        linear-gradient(160deg,var(--navy-dark),var(--navy));
    color:#d7e2ee;
    padding-block:56px;
    position:relative;
    overflow:hidden;
}
.hub-cta::before,
.emergency-cta::before {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:2px solid #ffb00033;
    right:-40px;
    bottom:-50px;
    transform:rotate(18deg);
    pointer-events:none;
}
.hub-cta-inner,
.emergency-cta-inner {
    position:relative;
    z-index:1;
    display:grid;
    gap:24px;
}
.hub-cta h2,
.emergency-cta h2 {
    color:var(--white);
    max-width:16ch;
}
.hub-cta p,
.emergency-cta p {
    margin-top:12px;
    max-width:46ch;
    color:#b8c6d6;
}

/* —— Emergency pillar —— */
.emergency-hero {
    background:linear-gradient(155deg,var(--navy-dark),var(--navy) 55%,var(--navy-soft));
    color:#d7e2ee;
}
.emergency-hero .hub-eyebrow {
    color:var(--yellow);
}
.emergency-hero .breadcrumb a {
    color:#bac4d3;
}
.emergency-hero .breadcrumb a:hover {
    color:var(--yellow);
}
.emergency-hero .breadcrumb [aria-current] {
    color:#93a3b8;
}
.emergency-hero h1 {
    color:var(--white);
    font-size:clamp(1.7rem,4.2vw,2.75rem);
    max-width:18ch;
}
.emergency-hero-grid {
    display:grid;
    gap:28px;
    padding-block:32px 40px;
    align-items:start;
}
.emergency-hero-lead {
    margin:16px 0 0;
    max-width:54ch;
    color:#d7e2ee;
    line-height:1.7;
}
.emergency-hero-lead a {
    color:var(--yellow);
    font-weight:700;
}
.emergency-hero-note {
    margin:14px 0 0;
    max-width:54ch;
    color:#b8c6d6;
    font-size:15px;
}
.emergency-hero-fine {
    margin:14px 0 0;
    font-size:13px;
    color:#93a3b8;
}
.emergency-hero .button-ghost-light {
    color:var(--white);
    border-color:#ffffff55;
}
.emergency-hero-panel {
    background:var(--white);
    color:var(--ink);
    padding:24px;
    border-top:4px solid var(--yellow);
    box-shadow:var(--shadow);
}
.emergency-panel-kicker {
    margin:0;
    font-size:11px;
    font-weight:750;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--yellow-ink);
}
.emergency-panel-phone {
    margin:10px 0 16px;
    font-family:var(--heading);
    font-size:clamp(1.5rem,3vw,1.9rem);
    font-weight:750;
}
.emergency-panel-phone a {
    color:var(--navy);
    text-decoration:none;
}
.emergency-hero-panel ul {
    list-style:none;
    display:grid;
    gap:10px;
    margin:0;
}
.emergency-hero-panel li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:650;
    color:var(--navy);
}
.emergency-hero-panel .icon {
    width:18px;
    height:18px;
    color:var(--amber);
}

.emergency-when {
    background:var(--paper);
}
.emergency-when-grid {
    display:grid;
    gap:24px;
}
.emergency-check-list {
    list-style:none;
    display:grid;
    gap:10px;
    margin:18px 0;
}
.emergency-check-list li {
    position:relative;
    padding:14px 14px 14px 36px;
    background:var(--white);
    border:1px solid var(--line);
    font-size:15px;
    line-height:1.5;
}
.emergency-check-list li::before {
    content:"";
    position:absolute;
    left:14px;
    top:1.15em;
    width:10px;
    height:2px;
    background:var(--yellow);
}
.emergency-when-note {
    color:var(--muted);
    font-size:15px;
    max-width:54ch;
}
.emergency-gas {
    padding:24px;
    background:var(--navy);
    color:#d7e2ee;
}
.emergency-gas h3 {
    color:var(--yellow);
    margin-bottom:10px;
}
.emergency-gas p {
    color:#b8c6d6;
    margin-bottom:0;
}
.emergency-gas a {
    color:var(--yellow);
    font-weight:700;
}

.emergency-jobs {
    background:var(--white);
}
.emergency-job-grid {
    display:grid;
    gap:12px;
}
.emergency-job {
    padding:22px 20px;
    border:1px solid var(--line);
    background:var(--paper);
    display:grid;
    gap:8px;
}
.emergency-job.is-live {
    background:var(--white);
}
.emergency-job-num {
    font:650 12px/1 var(--heading);
    letter-spacing:.08em;
    color:var(--amber);
}
.emergency-job h3 {
    font-size:1.1rem;
}
.emergency-job p {
    font-size:14px;
    color:var(--muted);
    line-height:1.55;
}

.emergency-wait {
    background:var(--paper);
}
.emergency-wait-layout {
    display:grid;
    gap:24px;
}
.emergency-wait-steps {
    list-style:none;
    margin:0;
    display:grid;
    gap:0;
    border-top:1px solid var(--line);
}
.emergency-wait-steps li {
    display:grid;
    grid-template-columns:48px 1fr;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
}
.emergency-wait-steps span {
    font:750 1.1rem/1 var(--heading);
    color:var(--yellow-ink);
}
.emergency-wait-steps p {
    margin:0;
    font-size:15px;
    line-height:1.65;
}

.emergency-prices {
    background:var(--white);
}
.emergency-price-wrap {
    overflow:auto;
    border:1px solid var(--line);
}
.emergency-price-table {
    width:100%;
    border-collapse:collapse;
    font-size:14.5px;
}
.emergency-price-table th,
.emergency-price-table td {
    padding:14px 16px;
    text-align:left;
    border-bottom:1px solid var(--line);
    vertical-align:top;
}
.emergency-price-table thead th {
    background:var(--navy);
    color:var(--white);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.emergency-price-table tbody th {
    font-weight:600;
    color:var(--navy);
}
.emergency-price-table td {
    font-weight:750;
    color:var(--yellow-ink);
    white-space:nowrap;
}
.emergency-price-table tbody tr:last-child th,
.emergency-price-table tbody tr:last-child td {
    border-bottom:0;
}
.emergency-price-note {
    margin-top:16px;
    font-size:14px;
    color:var(--muted);
    max-width:70ch;
}

.emergency-process {
    background:var(--paper);
}
.emergency-process-rail {
    list-style:none;
    margin:0;
    display:grid;
    gap:0;
}
.emergency-process-rail li {
    padding:22px 0;
    border-top:1px solid var(--line);
}
.emergency-process-rail li:last-child {
    border-bottom:1px solid var(--line);
}
.emergency-process-num {
    display:block;
    font:750 2rem/1 var(--heading);
    color:#ffb00055;
    margin-bottom:8px;
}
.emergency-process-rail p {
    color:var(--muted);
    font-size:15px;
    max-width:42ch;
}

.emergency-why {
    background:var(--white);
}
.emergency-why-layout {
    display:grid;
    gap:24px;
}
.emergency-why-list {
    list-style:none;
    margin:0;
    display:grid;
    gap:0;
    border-top:1px solid var(--line);
}
.emergency-why-list li {
    display:grid;
    gap:6px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
}
.emergency-why-list strong {
    color:var(--navy);
    font-size:1.05rem;
}
.emergency-why-list span {
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
}

.emergency-areas {
    background:var(--white);
}
.emergency-related {
    background:var(--paper);
}
.emergency-related-text {
    margin-top:12px;
    max-width:68ch;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

/* —— Minor plumbing / light pillar hero —— */
.pillar-hero {
    background:
        linear-gradient(160deg,var(--paper) 0%,var(--white) 50%,#fff8e8 100%);
    border-bottom:1px solid var(--line);
}
.pillar-hero .hub-eyebrow {
    color:var(--yellow-ink);
}
.pillar-hero h1 {
    color:var(--navy);
    font-size:clamp(1.7rem,4.2vw,2.75rem);
    max-width:18ch;
}
.pillar-hero-lead {
    margin:16px 0 0;
    max-width:54ch;
    color:var(--muted);
    line-height:1.7;
}
.pillar-hero-note {
    margin:14px 0 0;
    max-width:54ch;
    color:var(--ink);
    font-size:15px;
    line-height:1.7;
}
.pillar-hero-fine {
    margin:14px 0 0;
    font-size:13px;
    color:var(--muted);
}
.pillar-problems {
    background:var(--paper);
}
.pillar-problem-grid {
    display:grid;
    gap:12px;
}
.pillar-problem {
    padding:22px 20px;
    background:var(--white);
    border:1px solid var(--line);
    border-left:3px solid var(--yellow);
}
.pillar-problem h3 {
    margin-bottom:8px;
    font-size:1.08rem;
}
.pillar-problem p {
    margin:0;
    font-size:15px;
    color:var(--muted);
    line-height:1.65;
}
.pillar-emergency-note {
    margin-top:22px;
    max-width:68ch;
    font-size:15px;
    color:var(--ink);
    padding:16px 18px;
    background:var(--white);
    border:1px solid var(--line);
}
.pillar-process-tip {
    margin-top:22px;
    max-width:62ch;
    font-size:15px;
    font-weight:650;
    color:var(--navy);
    padding:16px 18px;
    background:var(--white);
    border-left:3px solid var(--yellow);
}
@media(min-width:768px) {
    .pillar-problem-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .pillar-process-rail.emergency-process-rail {
        grid-template-columns:repeat(4,1fr);
    }
}
@media(min-width:1024px) {
    .pillar-problem-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .pillar-problem-grid .pillar-problem:nth-child(4),
    .pillar-problem-grid .pillar-problem:nth-child(5) {
        grid-column:span 1;
    }
}

@media(min-width:600px) {
    .emergency-job-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .hub-areas-list {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(min-width:768px) {
    .hub-hero-grid {
        grid-template-columns:1.05fr .95fr;
        gap:40px;
        padding-block:44px 52px;
    }
    .hub-catnav-inner {
        grid-template-columns:auto 1fr;
        align-items:center;
        gap:18px;
    }
    .hub-category-grid {
        grid-template-columns:1fr 1.05fr;
        gap:40px;
    }
    .hub-category.is-reverse .hub-category-grid {
        grid-template-columns:1.05fr 1fr;
    }
    .hub-category.is-reverse .hub-category-media {
        order:2;
    }
    .hub-timeline {
        grid-template-columns:repeat(4,1fr);
        gap:0;
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
    }
    .hub-timeline li {
        padding:28px 18px 28px 0;
        border:0;
        border-right:1px solid var(--line);
    }
    .hub-timeline li:last-child {
        border:0;
        padding-right:0;
    }
    .hub-areas-panel,
    .emergency-areas-panel {
        grid-template-columns:1fr 1.15fr;
        align-items:center;
        gap:36px;
    }
    .hub-cta-inner,
    .emergency-cta-inner {
        grid-template-columns:1fr auto;
        align-items:center;
        gap:40px;
    }
    .emergency-hero-grid {
        grid-template-columns:1.2fr .8fr;
        gap:40px;
        align-items:center;
    }
    .emergency-when-grid {
        grid-template-columns:1.2fr .8fr;
        gap:32px;
        align-items:start;
    }
    .emergency-wait-layout {
        grid-template-columns:.85fr 1.15fr;
        gap:36px;
        align-items:start;
    }
    .emergency-process-rail {
        grid-template-columns:repeat(5,1fr);
        border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);
    }
    .emergency-process-rail li {
        padding:28px 14px 28px 0;
        border:0;
        border-right:1px solid var(--line);
    }
    .emergency-process-rail li:last-child {
        border:0;
        padding-right:0;
    }
    .emergency-why-list {
        grid-template-columns:1fr 1fr;
        gap:0 32px;
    }
    .hub-highlight-panel {
        padding-block:64px;
    }
}
@media(min-width:1024px) {
    .emergency-job-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .hub-hero-media {
        width:100%;
        max-width:none;
        justify-self:end;
    }
}
@media(min-width:1280px) {
    .hub-category-grid {
        gap:56px;
    }
}

.pillar-supply-grid {
    display:grid;
    gap:16px;
}
.pillar-supply-card {
    padding:22px 20px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
}
.pillar-supply-card h3 {
    margin:0 0 8px;
    font:720 1.1rem/1.25 var(--heading);
    color:var(--navy);
}
.pillar-supply-card p {
    margin:0;
    font-size:15px;
    line-height:1.65;
    color:var(--muted);
}
.pillar-timeline-panel {
    max-width:68ch;
    padding:28px 24px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    border-left:4px solid var(--yellow);
}
.pillar-timeline-panel h2 {
    margin:8px 0 12px;
}
.pillar-timeline-panel p {
    margin:0;
    font-size:1.02rem;
    line-height:1.65;
    color:var(--ink);
}
.pillar-gallery-grid {
    display:grid;
    gap:16px;
}
.pillar-gallery-item {
    margin:0;
    overflow:hidden;
    border-radius:12px;
    background:var(--paper);
    border:1px solid var(--line);
}
.pillar-gallery-item img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
}
.pillar-gallery-item figcaption {
    padding:12px 14px;
    font-size:14px;
    font-weight:650;
    color:var(--navy);
}
@media(min-width:768px) {
    .pillar-supply-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }
    .pillar-gallery-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(min-width:1024px) {
    .pillar-gallery-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}