/* ============================================
   PER-CARD OVERRIDES — services-page-cards.css
   Loaded asynchronously after first paint.
   Contains style overrides for the 21 service-card
   panels. Not required for the closed-card grid;
   only the inside of an opened card depends on these.
   Split out of services-page.css for perf — keeps the
   render-blocking critical CSS under 100 KB.
   ============================================ */

/* ============================================
   CARD 01 — RENOVATION-SPECIFIC OVERRIDES
   Applied AFTER the global pill normalization so they win the cascade.
   Distinguishes renovation visually from cards 02–21.
   ============================================ */

/* Detail cards → outlined FHSA style (1.5px primary-color border, 22px radius, no shadow) */
.sv-reno__detail-card {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    box-shadow: none;
    padding: clamp(18px, 2.2vw, 26px);
    display: flex; align-items: flex-start; gap: var(--space-4);
}
.sv-reno__detail-card:hover {
    background: rgba(0, 0, 0, 0.03);
    transform: none;
    box-shadow: none;
}
.sv-reno__detail-card > i {
    font-size: 1.4rem;
    color: var(--color-text-primary);
    opacity: 0.55;
}
.sv-reno__detail-label {
    font-family: var(--font-body);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
    opacity: 1;
}
.sv-reno__detail-value {
    font-weight: var(--font-regular);
    font-size: var(--text-base);
}

/* Step cards on the dark process band → outlined cards on dark, not white pills */
.sv-reno__step-card {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 22px;
    box-shadow: none;
    padding: clamp(22px, 2.5vw, 32px);
}
.sv-reno__step-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.7);
    transform: none;
    box-shadow: none;
}
.sv-reno__step-label { color: rgba(255, 255, 255, 0.55) !important; }
.sv-reno__step-title { color: var(--color-pure-white) !important; font-weight: var(--font-regular); font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -0.4px; }
.sv-reno__step-desc  { color: rgba(255, 255, 255, 0.55) !important; }

/* Stats grid → keep boxed white-card wrapper (override the "transparent" rule) */
.sv-reno__stats-grid {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
}
.sv-reno__stats-grid:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Stat cells inside the grid → strip the per-cell white-pill so they read as one unified card */
.sv-reno__stat {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4);
}
.sv-reno__stat:hover {
    transform: none;
    box-shadow: none;
}
.sv-reno__stat + .sv-reno__stat::before {
    content: '';
    display: block;
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}
.sv-reno__stat-num {
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    letter-spacing: -0.04em;
}

/* Sector tags → pill chips with primary-color outline, not white pills */
.sv-reno__sector-tag {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 999px;
    box-shadow: none;
    padding: 7px 16px;
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-text-primary);
}
.sv-reno__sector-tag:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: none;
    box-shadow: none;
}


/* ============================================
   CARD 01 — RENOVATION LIFECYCLE DIAGRAM
   Clear chart: bigger icons, axis labels, column guides, bar captions
   ============================================ */

/* Section headline + intro */
.sv-reno__diagram-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

.sv-reno__diagram-intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 clamp(2rem, 3vw, 2.75rem);
    max-width: 640px;
}

/* Active node — make it pop more */
.sv-reno__diagram-node--active .sv-reno__diagram-icon {
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.4);
}

/* Bigger label text */
.sv-reno__diagram-label {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--color-text-primary) !important;
}

/* Connector line — thicker, more visible */
.sv-reno__diagram-connector {
    height: 2px !important;
    margin-top: -36px !important;
    background: repeating-linear-gradient(
        90deg,
        rgba(20, 20, 18, 0.25) 0, rgba(20, 20, 18, 0.25) 6px,
        transparent 6px, transparent 12px
    ) !important;
}

/* ---- Chart container ---- */
.sv-reno__diagram-chart {
    margin-top: clamp(2rem, 3vw, 3rem);
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
}

.sv-reno__diagram-chart-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---- Bars area with column guides ---- */
.sv-reno__diagram-bars {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.75rem, 1vw, 1rem) !important;
}

/* Vertical column guide lines aligned to the 5 phase nodes above */
.sv-reno__diagram-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(20, 20, 18, 0.08);
    z-index: 0;
    pointer-events: none;
}

.sv-reno__diagram-bar {
    display: flex !important;
    align-items: center !important;
    gap: clamp(1rem, 1.5vw, 1.5rem) !important;
    height: auto !important;
    position: relative;
    z-index: 1;
}

.sv-reno__diagram-bar-label {
    flex: 0 0 clamp(120px, 14vw, 160px) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    color: var(--color-text-primary) !important;
    opacity: 1 !important;
    text-align: right !important;
}

/* Track — full-width 100% lane */
.sv-reno__diagram-bar-track {
    flex: 1;
    position: relative;
    height: 36px;
    background: rgba(20, 20, 18, 0.04);
    border-radius: 6px;
}

/* Fill — solid primary color, taller, with caption pill */
.sv-reno__diagram-bar-fill {
    position: absolute !important;
    top: 0 !important;
    height: 36px !important;
    background: var(--color-text-primary) !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s var(--ease-out);
}

.sv-reno__diagram-bar-fill--offset { opacity: 0.85 !important; }
.sv-reno__diagram-bar-fill--full { opacity: 0.95 !important; background: var(--color-text-primary) !important; }

/* Caption inside the bar — what range it covers */
.sv-reno__diagram-bar-pct {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-pure-white);
    white-space: nowrap;
    padding: 0 0.75rem;
}

/* ---- Bottom axis labels — echo the phase names below the bars ---- */
.sv-reno__diagram-axis {
    margin-top: clamp(0.75rem, 1vw, 1rem);
    padding-left: clamp(120px, 14vw, 160px);
    margin-left: clamp(1rem, 1.5vw, 1.5rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.sv-reno__diagram-axis span {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-align: center;
    position: relative;
}

.sv-reno__diagram-axis span::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 1px;
    height: 4px;
    background: rgba(20, 20, 18, 0.2);
}

@media (max-width: 768px) {
    .sv-reno__diagram-icon { width: 64px; height: 64px; }
    .sv-reno__diagram-icon i { font-size: 1.6rem; }
    .sv-reno__diagram-bar-label { flex-basis: 100px !important; font-size: 0.7rem !important; }
    .sv-reno__diagram-axis { padding-left: 100px; }
    .sv-reno__diagram-axis span { font-size: 0.55rem; }
    .sv-reno__diagram-bar-pct { font-size: 0.6rem; padding: 0 0.4rem; }
}


/* ============================================
   CARD 02 — DESIGN-BUILD SPECIFIC OVERRIDES
   Scoped via #design-build so cards 03–21 stay on the global baseline.
   ============================================ */

/* ---- Hero band: concentric ripples for atmosphere ---- */
#design-build .sv-pg__section--dark {
    position: relative;
    isolation: isolate;
    margin-bottom: clamp(48px, 6vw, 96px);
}

#design-build .sv-db__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#design-build .sv-db__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svDbRipple 9s ease-in-out infinite;
}
#design-build .sv-db__hero-circle--1 { width: 30vw; height: 30vw; }
#design-build .sv-db__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#design-build .sv-db__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svDbRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#design-build .sv-pg__heading,
#design-build .sv-pg__subtext { position: relative; z-index: 1; }
#design-build .sv-pg__eyebrow { position: relative; z-index: 1; }

/* ---- Heading — mixed-scale typography (matches homepage hero technique).
   Roles:
     .label   — small tracked uppercase label, lifted (overline)
     .connect — small italic muted connector
     .amp     — tiny italic inline "and"
     .anchor  — full-size dominant focal word, bold, tight tracking ---- */
#design-build .sv-db__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -1px;
    max-width: none;
}

#design-build .sv-db__heading-line {
    display: block;
}

#design-build .sv-db__heading-label {
    display: inline-block;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.65;
    vertical-align: 0.6em;
    margin-right: 0.55em;
}

#design-build .sv-db__heading-connect {
    display: inline-block;
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    vertical-align: 0.35em;
    margin-right: 0.4em;
}

#design-build .sv-db__heading-amp {
    display: inline-block;
    font-size: 0.45em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.55;
    vertical-align: 0.45em;
    margin: 0 0.35em;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

#design-build .sv-db__heading-anchor {
    font-weight: 700;
    letter-spacing: -0.035em;
}

/* ---- Subtext emphasis — same toolkit, smaller doses ---- */
#design-build .sv-db__subtext-key {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
}

#design-build .sv-db__subtext-list {
    font-size: 0.85em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* ---- Stats: single boxed white-card wrapper with internal dividers ---- */
#design-build .sv-pg__stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
#design-build .sv-pg__stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Strip the per-cell white pill — each stat reads as one cell of the unified card */
#design-build .sv-pg__stat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4) !important;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}
#design-build .sv-pg__stat:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Vertical hairline dividers between stat cells */
#design-build .sv-pg__stat + .sv-pg__stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#design-build .sv-pg__stat-num {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#design-build .sv-pg__stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ---- Delivery process flow track: bigger markers, clearer hierarchy ---- */

/* Strip the white pill from each stage; let the flow-track design breathe */
#design-build .sv-panel-db__flow-stage {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--space-4);
}
#design-build .sv-panel-db__flow-stage:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Marker bumped from 40px → 64px, with stronger primary-color border */
#design-build .sv-panel-db__flow-marker {
    width: 64px;
    height: 64px;
    background: var(--color-pure-white);
    border: 1.5px solid var(--color-text-primary);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: var(--font-bold);
    transition: background 280ms var(--ease-out),
                box-shadow 280ms var(--ease-out);
}
#design-build .sv-panel-db__flow-stage:hover .sv-panel-db__flow-marker {
    background: var(--color-text-primary);
    color: var(--color-pure-white);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.3);
}

/* Connecting line: thicker, dashed, aligned to the new larger marker height */
#design-build .sv-panel-db__flow-track::before {
    top: 32px !important;
    height: 2px !important;
    background: repeating-linear-gradient(
        90deg,
        rgba(20, 20, 18, 0.25) 0, rgba(20, 20, 18, 0.25) 6px,
        transparent 6px, transparent 12px
    ) !important;
}

#design-build .sv-card--open .sv-panel-db__flow-track::after {
    top: 32px !important;
    height: 2px !important;
}

/* Title bumped from 1rem → 1.2rem */
#design-build .sv-panel-db__flow-title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
}

#design-build .sv-panel-db__flow-desc {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 180px;
    margin: 0 auto;
}

/* ---- Project Parameters specs: outlined FHSA cards ---- */
#design-build .sv-pg__detail {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px) !important;
    transition: background 280ms var(--ease-out) !important;
}
#design-build .sv-pg__detail:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

#design-build .sv-panel-db__sidebar-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

#design-build .sv-panel-db__sidebar-val {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.25;
}

@media (max-width: 768px) {
    #design-build .sv-panel-db__flow-marker { width: 52px; height: 52px; font-size: 0.95rem; }
    #design-build .sv-panel-db__flow-track::before,
    #design-build .sv-card--open .sv-panel-db__flow-track::after { top: 26px !important; }
}


/* Hide the small "Sec. 0X" labels in dividers across all service dropdowns */
.sv-reno__divider-label,
.sv-pg__divider-label { display: none; }


/* ============================================
   CARD 03 — CONSTRUCTION MANAGEMENT OVERRIDES
   ============================================ */

/* Hero band: concentric ripples for atmosphere */
#construction-management .sv-pg__section--dark { position: relative; isolation: isolate; }

#construction-management .sv-cm__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#construction-management .sv-cm__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svCmRipple 9s ease-in-out infinite;
}
#construction-management .sv-cm__hero-circle--1 { width: 30vw; height: 30vw; }
#construction-management .sv-cm__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#construction-management .sv-cm__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svCmRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#construction-management .sv-pg__heading,
#construction-management .sv-pg__subtext,
#construction-management .sv-pg__eyebrow { position: relative; z-index: 1; }

/* ---- Heading — mixed-scale typography (matches homepage hero technique).
   Roles:
     .num     — display number anchor (huge bold, very tight)
     .label   — small tracked uppercase label, lifted (overline)
     .connect — small italic muted connector
     .anchor  — full-size dominant focal word, bold, tight tracking
     .deck    — standfirst continuation, smaller, regular weight, new line ---- */
#construction-management .sv-cm__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    max-width: none;
    display: block;
}

#construction-management .sv-cm__heading-line {
    display: block;
}

#construction-management .sv-cm__heading-num {
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-right: 0.3em;
}

#construction-management .sv-cm__heading-label {
    display: inline-block;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.7;
    vertical-align: 0.55em;
}

#construction-management .sv-cm__heading-connect {
    display: inline-block;
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    vertical-align: 0.35em;
    margin-right: 0.4em;
}

#construction-management .sv-cm__heading-anchor {
    font-weight: 700;
    letter-spacing: -0.035em;
}

#construction-management .sv-cm__heading-deck {
    display: block;
    margin-top: 0.6em;
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.7;
    max-width: 580px;
}

/* ---- Subtext emphasis ---- */
#construction-management .sv-cm__subtext-key {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.01em;
}

#construction-management .sv-cm__subtext-list {
    font-size: 0.85em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

#construction-management .sv-cm__subtext-proper {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}

/* Stats: single boxed white-card with internal dividers (uses sv-panel-metric__val/label) */
#construction-management .sv-pg__stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
#construction-management .sv-pg__stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#construction-management .sv-pg__stat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4) !important;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    position: relative;
}
#construction-management .sv-pg__stat:hover {
    transform: none !important;
    box-shadow: none !important;
}

#construction-management .sv-pg__stat + .sv-pg__stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#construction-management .sv-panel-metric__val {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#construction-management .sv-panel-metric__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Matrix grid: 2 columns max (was 5), so cards aren't squeezed.
   Drops to 1 column on narrow modal widths. */
#construction-management .sv-panel-matrix__grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: clamp(12px, 1.5vw, 18px);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Matrix label heading: more presence */
#construction-management .sv-panel-matrix__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Comparison cards: outlined FHSA aesthetic */
#construction-management .sv-panel-matrix__card {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(20px, 2.2vw, 26px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1.2vw, 14px) !important;
}
#construction-management .sv-panel-matrix__card:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Letter circle: bigger, primary-color border (was C0392B red) */
#construction-management .sv-panel-matrix__letter {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--color-text-primary);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: var(--font-bold);
}

/* Title bumped from text-base */
#construction-management .sv-panel-matrix__title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
}

/* Description: slightly higher contrast */
#construction-management .sv-panel-matrix__desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}

/* Trait labels: cleaner, more readable */
#construction-management .sv-panel-matrix__trait-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Trait dots: keep brand red accent for filled state, but a touch larger */
#construction-management .sv-panel-matrix__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(20, 20, 18, 0.06);
    border: 1px solid var(--color-border);
}

#construction-management .sv-panel-matrix__dot--filled {
    background: #C0392B;
    border-color: #C0392B;
}


/* ============================================
   CARD 04 — PROJECT MANAGEMENT OVERRIDES
   ============================================ */

/* Hero band: concentric ripples for atmosphere */
#project-management .sv-pg__section--dark { position: relative; isolation: isolate; }

#project-management .sv-pm__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#project-management .sv-pm__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svPmRipple 9s ease-in-out infinite;
}
#project-management .sv-pm__hero-circle--1 { width: 30vw; height: 30vw; }
#project-management .sv-pm__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#project-management .sv-pm__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svPmRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#project-management .sv-pg__heading,
#project-management .sv-pg__subtext,
#project-management .sv-pg__eyebrow { position: relative; z-index: 1; }

/* ---- Heading — mixed-scale typography (matches homepage hero technique).
   Roles:
     .label   — small tracked uppercase label, lifted (overline)
     .connect — small italic muted connector
     .anchor  — full-size dominant focal word, bold, tight tracking
     .deck    — standfirst continuation, smaller, regular weight, new line ---- */
#project-management .sv-pm__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    max-width: none;
    display: block;
}

#project-management .sv-pm__heading-line {
    display: block;
}

#project-management .sv-pm__heading-label {
    display: inline-block;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.7;
    vertical-align: 0.6em;
    margin-right: 0.6em;
}

#project-management .sv-pm__heading-connect {
    display: inline-block;
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    vertical-align: 0.35em;
    margin-right: 0.4em;
}

#project-management .sv-pm__heading-anchor {
    font-weight: 700;
    letter-spacing: -0.035em;
}

#project-management .sv-pm__heading-deck {
    display: block;
    margin-top: 0.6em;
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.7;
    max-width: 580px;
}

/* ---- Subtext bold emphasis — inherits color so it never goes white-on-white ---- */
#project-management .sv-pm__subtext-key {
    font-weight: 700;
    color: inherit;
    letter-spacing: -0.005em;
}

/* ======================================================
   DISPLAY HEADLINE — shared mixed-scale typography utility.
   Opt-in via .sv-pg__heading--split modifier on any hero h3.
   Roles inside the headline:
     .sv-pg__heading-line    — block-level line
     .sv-pg__heading-label   — small tracked uppercase label, lifted (overline)
     .sv-pg__heading-connect — small italic muted connector (from/for/through)
     .sv-pg__heading-amp     — tiny italic "and"
     .sv-pg__heading-anchor  — big bold focal noun, tight tracking
     .sv-pg__heading-num     — number anchor (very tight tracking)
     .sv-pg__heading-deck    — body-style continuation, smaller weight ---- */
.sv-pg__heading--split {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    max-width: none;
    display: block;
}

.sv-pg__heading-line { display: block; }

/* Spacing strategy: every role gets explicit gaps in PARENT-h3 em units (not
   its own small em), so anchors next to small labels never visually collide.
   Anchor itself reserves a tiny trailing gap so anchor→connect pairs work too. */
.sv-pg__heading-label {
    display: inline-block;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.7;
    vertical-align: 0.6em;
    margin: 0 0.45rem 0 0;
}

.sv-pg__heading-connect {
    display: inline-block;
    font-size: 0.5em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    vertical-align: 0.35em;
    margin: 0 0.4rem;
}

.sv-pg__heading-amp {
    display: inline-block;
    font-size: 0.45em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.55;
    vertical-align: 0.45em;
    margin: 0 0.5rem;
    letter-spacing: 0.1em;
}

.sv-pg__heading-anchor {
    font-weight: 700;
    letter-spacing: -0.035em;
    margin-right: 0.15em;
}

.sv-pg__heading-num {
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-right: 0.3em;
}

.sv-pg__heading-deck {
    display: block;
    margin-top: 0.6em;
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.7;
    max-width: 580px;
}

/* ======================================================
   HERO REVEAL — shared black-circle (+) button that toggles
   a collapsible content panel. Click rotates the + into a ×
   and the panel below slides open with the house motion curve.
   Used by any service panel that wants to hide its lead text
   behind a single discoverable affordance.
   JS: delegated handler in services-page.js toggles aria-expanded.
   ====================================================== */
.sv-hero-reveal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

.sv-hero-reveal__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #0A1119;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sv-hero-reveal__btn:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.sv-hero-reveal__btn:focus-visible {
    outline: 2px solid var(--svc-accent, #C0392B);
    outline-offset: 3px;
}

.sv-hero-reveal__icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sv-hero-reveal__icon-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 1px;
}

.sv-hero-reveal__icon-bar:nth-child(1) {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.sv-hero-reveal__icon-bar:nth-child(2) {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.sv-hero-reveal__btn[aria-expanded="true"] .sv-hero-reveal__icon {
    transform: rotate(45deg);
}

/* Collapsible panel — grid-rows 0fr → 1fr trick for smooth
   content-aware height animation without fixed max-height. */
.sv-hero-reveal__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows 520ms cubic-bezier(0.4, 0, 0.1, 1),
                opacity 420ms cubic-bezier(0.4, 0, 0.1, 1),
                margin-top 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sv-hero-reveal__panel > * {
    min-height: 0;
    overflow: hidden;
}

.sv-hero-reveal__btn[aria-expanded="true"] + .sv-hero-reveal__panel {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: clamp(16px, 2vw, 24px);
}

@media (prefers-reduced-motion: reduce) {
    .sv-hero-reveal__btn,
    .sv-hero-reveal__icon,
    .sv-hero-reveal__panel {
        transition: none;
    }
}

/* Modules label — stronger headline */
#project-management .sv-panel-modules__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Modules grid: more breathing room */
#project-management .sv-panel-modules__grid {
    gap: clamp(10px, 1.2vw, 14px);
}

/* 18 module items: outlined FHSA cards with bigger icons */
#project-management .sv-panel-modules__item {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 18px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    text-align: center !important;
}
#project-management .sv-panel-modules__item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Icons: bigger, less faded */
#project-management .sv-panel-modules__item i {
    font-size: 1.9rem !important;
    color: var(--color-text-primary) !important;
    opacity: 0.65 !important;
    transition: opacity 280ms var(--ease-out);
}
#project-management .sv-panel-modules__item:hover i {
    opacity: 1 !important;
}

/* Item label: tighter, primary color */
#project-management .sv-panel-modules__item span {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--color-text-primary);
    text-transform: none;
}


/* ============================================
   CARD 05 — LEAN CONSTRUCTION OVERRIDES
   ============================================ */

/* Hero band: concentric ripples for atmosphere */
#lean-construction .sv-pg__section--dark { position: relative; isolation: isolate; }

#lean-construction .sv-lean__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#lean-construction .sv-lean__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svLeanRipple 9s ease-in-out infinite;
}
#lean-construction .sv-lean__hero-circle--1 { width: 30vw; height: 30vw; }
#lean-construction .sv-lean__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#lean-construction .sv-lean__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svLeanRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#lean-construction .sv-pg__heading,
#lean-construction .sv-pg__subtext,
#lean-construction .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Outcome stats (arrow + label, no numbers): boxed white card with internal dividers */
#lean-construction .sv-pg__stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
#lean-construction .sv-pg__stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#lean-construction .sv-pg__stat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    position: relative;
}
#lean-construction .sv-pg__stat:hover {
    transform: none !important;
    box-shadow: none !important;
}

#lean-construction .sv-pg__stat + .sv-pg__stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

/* Arrow circles: bigger and bolder; keep semantic green/red (meaningful here) */
#lean-construction .sv-panel-tools__arrow {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    font-weight: var(--font-bold);
}
#lean-construction .sv-panel-tools__arrow--up {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
#lean-construction .sv-panel-tools__arrow--down {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

#lean-construction .sv-panel-metric__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Tool cards: outlined FHSA */
#lean-construction .sv-panel-tools {
    gap: clamp(12px, 1.5vw, 18px);
}

#lean-construction .sv-panel-tools__card {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(20px, 2.2vw, 28px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1.2vw, 14px) !important;
}
#lean-construction .sv-panel-tools__card:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Initial letter (P / K / L / T): consistent with card 03 letter-circle treatment */
#lean-construction .sv-panel-tools__initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: var(--font-bold);
}

#lean-construction .sv-panel-tools__title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
}

#lean-construction .sv-panel-tools__desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}


/* ============================================
   CARD 06 — CIVIL WORKS OVERRIDES
   ============================================ */

/* Hero band: concentric ripples for atmosphere */
#civil-works .sv-pg__section--dark { position: relative; isolation: isolate; }

#civil-works .sv-civil__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#civil-works .sv-civil__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svCivilRipple 9s ease-in-out infinite;
}
#civil-works .sv-civil__hero-circle--1 { width: 30vw; height: 30vw; }
#civil-works .sv-civil__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#civil-works .sv-civil__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svCivilRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#civil-works .sv-pg__heading,
#civil-works .sv-pg__subtext,
#civil-works .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Scope label — stronger headline */
#civil-works .sv-panel-scope__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Scope grid: more breathing room */
#civil-works .sv-panel-scope__grid {
    gap: clamp(12px, 1.5vw, 18px);
}

/* 6 scope items: outlined FHSA cards */
#civil-works .sv-panel-scope__item {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(24px, 2.8vw, 32px) clamp(20px, 2.2vw, 26px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    text-align: center !important;
    transition: background 280ms var(--ease-out) !important;
}
#civil-works .sv-panel-scope__item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Icon circle: bigger, primary-color border (was C0392B red) */
#civil-works .sv-panel-scope__icon {
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
}
#civil-works .sv-panel-scope__icon i {
    font-size: 1.9rem;
    color: var(--color-text-primary);
    opacity: 0.85;
}

/* Scope name: bumped serif title */
#civil-works .sv-panel-scope__name {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
}

/* Scope detail: primary color at 70% for better contrast than secondary */
#civil-works .sv-panel-scope__detail {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}


/* ============================================
   CARD 07 — PRE-CONSTRUCTION OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#preconstruction .sv-pg__section--dark { position: relative; isolation: isolate; }

#preconstruction .sv-precon__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#preconstruction .sv-precon__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svPreconRipple 9s ease-in-out infinite;
}
#preconstruction .sv-precon__hero-circle--1 { width: 30vw; height: 30vw; }
#preconstruction .sv-precon__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#preconstruction .sv-precon__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svPreconRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#preconstruction .sv-pg__heading,
#preconstruction .sv-pg__subtext,
#preconstruction .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Stats: single boxed white card with internal hairline dividers */
#preconstruction .sv-pg__stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
#preconstruction .sv-pg__stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#preconstruction .sv-pg__stat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4) !important;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    position: relative;
}
#preconstruction .sv-pg__stat:hover {
    transform: none !important;
    box-shadow: none !important;
}

#preconstruction .sv-pg__stat + .sv-pg__stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#preconstruction .sv-card__panel-stat-val {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#preconstruction .sv-card__panel-stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Pillars label: stronger headline */
#preconstruction .sv-panel-pillars__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Pillar grid: more breathing room */
#preconstruction .sv-panel-pillars__row {
    gap: clamp(12px, 1.5vw, 18px);
}

/* Flat resizable grid for the 5 pillar boxes (tabs replaced).
   auto-fit with minmax lets the grid reflow from 1→2→3 cols
   as the modal width changes. */
#preconstruction .sv-panel-pillars__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
}

/* Capability detail boxes: same resizable grid, tighter min so they sit
   smaller than the pillar cards. */
#preconstruction .sv-panel-pillars__caps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(10px, 1.2vw, 14px);
    margin-top: clamp(0.75rem, 1.2vw, 1rem);
}

/* 5 pillar cards: outlined FHSA, drop the red top accent */
#preconstruction .sv-panel-pillars__card {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    border-top: 1.5px solid var(--color-text-primary) !important;
    box-shadow: none !important;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 1.2vw, 14px) !important;
}
#preconstruction .sv-panel-pillars__card:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Pillar number: circle badge instead of faded text */
#preconstruction .sv-panel-pillars__num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

/* Pillar icon (replaces the number badge) — large standalone Phosphor icon. */
#preconstruction .sv-panel-pillars__icon {
    font-size: 3rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Capability detail icon — smaller, inline above the label. */
#preconstruction .sv-panel-pillars__cap-icon {
    font-size: 1.75rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
}

/* Ensure .sv-pg__detail boxes stack their content vertically so the new
   icon sits above the label/value pair. */
#preconstruction .sv-pg__detail {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

/* Pillar title: bumped serif */
#preconstruction .sv-panel-pillars__title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
}

/* Pillar desc: primary at 70% for better contrast */
#preconstruction .sv-panel-pillars__desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}

/* Capabilities detail items: outlined FHSA */
#preconstruction .sv-pg__detail {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px) !important;
    transition: background 280ms var(--ease-out) !important;
}
#preconstruction .sv-pg__detail:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

#preconstruction .sv-card__panel-info-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

#preconstruction .sv-card__panel-info-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.25;
}


/* ============================================
   CARD 08 — COST ESTIMATION OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#cost-estimation .sv-pg__section--dark { position: relative; isolation: isolate; }

#cost-estimation .sv-cost__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#cost-estimation .sv-cost__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svCostRipple 9s ease-in-out infinite;
}
#cost-estimation .sv-cost__hero-circle--1 { width: 30vw; height: 30vw; }
#cost-estimation .sv-cost__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#cost-estimation .sv-cost__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svCostRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#cost-estimation .sv-pg__heading,
#cost-estimation .sv-pg__subtext,
#cost-estimation .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Bars label: stronger headline */
#cost-estimation .sv-panel-bars__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Wrap chart in white-card aesthetic for clarity */
#cost-estimation .sv-panel-bars__chart {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* Bar rows: bigger track, primary-color fill, larger label */
#cost-estimation .sv-panel-bars__row {
    grid-template-columns: clamp(110px, 14vw, 150px) 1fr clamp(60px, 8vw, 80px);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}

#cost-estimation .sv-panel-bars__stage {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-text-primary);
    text-align: right;
}

#cost-estimation .sv-panel-bars__track {
    height: 28px;
    background: rgba(20, 20, 18, 0.04);
    border-radius: 6px;
}

#cost-estimation .sv-panel-bars__fill {
    background: var(--color-text-primary);
    border-radius: 6px;
}

#cost-estimation .sv-panel-bars__pct {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
}

/* Checklist label: stronger headline */
#cost-estimation .sv-panel-checklist__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

#cost-estimation .sv-panel-checklist__items {
    gap: clamp(10px, 1.2vw, 14px);
}

/* Checklist items: outlined FHSA */
#cost-estimation .sv-panel-checklist__item {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    transition: background 280ms var(--ease-out) !important;
}
#cost-estimation .sv-panel-checklist__item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Check icon: bigger circle, primary-color border */
#cost-estimation .sv-panel-checklist__check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    color: var(--color-text-primary);
    font-size: 1rem;
    margin-top: 0;
}

/* Item text: primary at 70% for better readability */
#cost-estimation .sv-panel-checklist__item > span:last-child {
    color: var(--color-text-primary);
    opacity: 0.75;
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ============================================
   CARD 09 — PERMITTING & COMPLIANCE OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#permitting-compliance .sv-pg__section--dark { position: relative; isolation: isolate; }

#permitting-compliance .sv-permit__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#permitting-compliance .sv-permit__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svPermitRipple 9s ease-in-out infinite;
}
#permitting-compliance .sv-permit__hero-circle--1 { width: 30vw; height: 30vw; }
#permitting-compliance .sv-permit__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#permitting-compliance .sv-permit__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svPermitRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#permitting-compliance .sv-pg__heading,
#permitting-compliance .sv-pg__subtext,
#permitting-compliance .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Jurisdictions label: stronger headline */
#permitting-compliance .sv-panel-jurisdictions__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Jurisdiction pills: outlined pill chips with icon */
#permitting-compliance .sv-panel-jurisdictions__pills {
    gap: clamp(10px, 1.2vw, 14px);
}

#permitting-compliance .sv-panel-jurisdictions__pill {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: clamp(12px, 1.4vw, 16px) clamp(18px, 2vw, 24px) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    text-transform: none !important;
    transition: background 280ms var(--ease-out) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}
#permitting-compliance .sv-panel-jurisdictions__pill,
#permitting-compliance .sv-panel-jurisdictions__pill:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-text-primary) !important;
}
#permitting-compliance .sv-panel-jurisdictions__pill i,
#permitting-compliance .sv-panel-jurisdictions__pill:hover i {
    color: var(--color-text-primary) !important;
}

#permitting-compliance .sv-panel-jurisdictions__pill i {
    font-size: 1.3rem;
    opacity: 0.85;
    color: var(--color-text-primary);
}

/* Body paragraphs in grey section: stronger contrast for readability */
#permitting-compliance .sv-pg__section--grey .sv-pg__subtext {
    color: var(--color-text-primary) !important;
    opacity: 1;
}


/* ============================================
   CARD 10 — QUALITY ASSURANCE OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#quality-assurance .sv-pg__section--dark { position: relative; isolation: isolate; }

#quality-assurance .sv-qa__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#quality-assurance .sv-qa__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svQaRipple 9s ease-in-out infinite;
}
#quality-assurance .sv-qa__hero-circle--1 { width: 30vw; height: 30vw; }
#quality-assurance .sv-qa__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#quality-assurance .sv-qa__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svQaRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#quality-assurance .sv-pg__heading,
#quality-assurance .sv-pg__subtext,
#quality-assurance .sv-pg__eyebrow { position: relative; z-index: 1; }

/* PDCA Loop label: stronger headline */
#quality-assurance .sv-panel-loop__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Loop ring: more breathing room between segments */
#quality-assurance .sv-panel-loop__ring {
    gap: clamp(8px, 1vw, 14px);
}

/* PDCA Loop segments: outlined FHSA cards */
#quality-assurance .sv-panel-loop__segment {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2vw, 24px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    text-align: center !important;
}
#quality-assurance .sv-panel-loop__segment:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Icon circle (was P/D/C/A letters, now thematic phosphor icons) — bigger. */
#quality-assurance .sv-panel-loop__seg-letter {
    width: 80px;
    height: 80px;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}

#quality-assurance .sv-panel-loop__seg-letter i {
    color: var(--color-text-primary);
}

/* Segment title: bigger serif */
#quality-assurance .sv-panel-loop__seg-title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    color: var(--color-text-primary);
}

/* Segment desc: primary at 70% for readability */
#quality-assurance .sv-panel-loop__seg-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}

/* Connector arrow between PDCA segments — sized to match the icons.
   Override the wide `[class*="__connector"] { background: ... }` rule below
   so the arrow sits without a pill background. */
#quality-assurance .sv-panel-loop__connector,
.sv-card__panel-inner #quality-assurance .sv-panel-loop__connector {
    color: var(--color-text-primary);
    opacity: 0.85;
    font-size: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

#quality-assurance .sv-panel-loop__connector i {
    color: var(--color-text-primary);
}

/* ISO badge tags: outlined pill chips */
#quality-assurance .sv-card__panel-tags {
    gap: clamp(10px, 1.2vw, 14px) !important;
    margin-top: clamp(2rem, 3vw, 2.5rem) !important;
}

#quality-assurance .sv-card__panel-tag {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 280ms var(--ease-out);
}
#quality-assurance .sv-card__panel-tag:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Split section: body + spec sidebar */
#quality-assurance .sv-panel-split__main p {
    color: var(--color-text-primary);
    opacity: 0.72;
}

/* Spec items in sidebar: outlined FHSA */
#quality-assurance .sv-panel-spec {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px) !important;
    margin-bottom: clamp(10px, 1.2vw, 14px) !important;
    transition: background 280ms var(--ease-out) !important;
}
#quality-assurance .sv-panel-spec:last-child { margin-bottom: 0 !important; }
#quality-assurance .sv-panel-spec:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
}

#quality-assurance .sv-panel-spec__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

#quality-assurance .sv-panel-spec__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.25;
}


/* ============================================
   CARD 11 — POST-CONSTRUCTION OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#post-construction .sv-pg__section--dark { position: relative; isolation: isolate; }

#post-construction .sv-postcon__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#post-construction .sv-postcon__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svPostconRipple 9s ease-in-out infinite;
}
#post-construction .sv-postcon__hero-circle--1 { width: 30vw; height: 30vw; }
#post-construction .sv-postcon__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#post-construction .sv-postcon__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svPostconRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#post-construction .sv-pg__heading,
#post-construction .sv-pg__subtext,
#post-construction .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Checklist label: stronger headline */
#post-construction .sv-panel-checklist__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 6 large checklist items: outlined FHSA cards */
#post-construction .sv-panel-checklist__items--large {
    gap: clamp(12px, 1.5vw, 18px);
}

#post-construction .sv-panel-checklist__item--large {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.2vw, 28px) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: clamp(16px, 1.8vw, 22px) !important;
    transition: background 280ms var(--ease-out) !important;
}
#post-construction .sv-panel-checklist__item--large:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Check circle: bigger, primary border */
#post-construction .sv-panel-checklist__check--circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    color: var(--color-text-primary);
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Item title (strong): bumped to serif heading */
#post-construction .sv-panel-checklist__item--large strong {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

/* Item sub: primary at 70% for readability */
#post-construction .sv-panel-checklist__sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}

/* Handover deliverables grid: 6 cards, resizable. Tab nav was removed —
   cards live directly in the grid and are all visible at once. */
#post-construction .sv-postcon__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

#post-construction .sv-postcon__card {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
    transition: background 280ms var(--ease-out);
}

#post-construction .sv-postcon__card:hover {
    background: rgba(0, 0, 0, 0.03);
}

#post-construction .sv-postcon__card-icon {
    font-size: 3rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#post-construction .sv-postcon__card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#post-construction .sv-postcon__card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}


/* ============================================
   CARD 12 — ACCELERATED PAYMENT OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#accelerated-payment .sv-pg__section--dark { position: relative; isolation: isolate; }

#accelerated-payment .sv-pay__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#accelerated-payment .sv-pay__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svPayRipple 9s ease-in-out infinite;
}
#accelerated-payment .sv-pay__hero-circle--1 { width: 30vw; height: 30vw; }
#accelerated-payment .sv-pay__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#accelerated-payment .sv-pay__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svPayRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#accelerated-payment .sv-pg__heading,
#accelerated-payment .sv-pg__subtext,
#accelerated-payment .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Metrics: single boxed white card with internal hairline dividers */
#accelerated-payment .sv-panel-metrics {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px) clamp(2rem, 4vw, 3rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    border-bottom: none;
    gap: clamp(1rem, 2vw, 2.5rem);
}
#accelerated-payment .sv-panel-metrics:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#accelerated-payment .sv-panel-metric {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 1;
    gap: 8px;
}
#accelerated-payment .sv-panel-metric:hover {
    transform: none !important;
    box-shadow: none !important;
}

#accelerated-payment .sv-panel-metric__val {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#accelerated-payment .sv-panel-metric__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

#accelerated-payment .sv-panel-metric__divider {
    width: 1px;
    height: 56px;
    background: var(--color-border);
}

/* 3-Step flow: outlined FHSA cards */
#accelerated-payment .sv-panel-flow {
    border-bottom: none;
    gap: clamp(8px, 1vw, 12px);
}

#accelerated-payment .sv-panel-flow__stage {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(24px, 2.8vw, 32px) clamp(20px, 2.2vw, 26px) !important;
    gap: var(--space-3) !important;
    transition: background 280ms var(--ease-out) !important;
}
#accelerated-payment .sv-panel-flow__stage:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

/* Stage number: circle badge */
#accelerated-payment .sv-panel-flow__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

/* Stage title: bigger serif */
#accelerated-payment .sv-panel-flow__title {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
}

/* Stage description: primary at 70% */
#accelerated-payment .sv-panel-flow__desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
}

/* Arrow connector: bigger, primary color */
#accelerated-payment .sv-panel-flow__arrow {
    color: var(--color-text-primary);
    opacity: 0.4;
    font-size: 1.4rem;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* FAQ subtitle: stronger headline */
#accelerated-payment .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* FAQ items: outlined FHSA cards */
#accelerated-payment .sv-card__panel-faq {
    gap: clamp(12px, 1.5vw, 18px);
}

#accelerated-payment .sv-card__panel-faq-item {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
    transition: background 280ms var(--ease-out);
}
#accelerated-payment .sv-card__panel-faq-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

#accelerated-payment .sv-card__panel-faq-q {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

#accelerated-payment .sv-card__panel-faq-a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* Testimonial: white card with quote presence */
#accelerated-payment .sv-card__panel-testimonial {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(2rem, 3.5vw, 3rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    margin: 0 auto;
}

#accelerated-payment .sv-card__panel-testimonial blockquote {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: var(--font-regular);
    line-height: 1.45;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    font-style: normal;
    margin: 0 0 var(--space-4);
}

#accelerated-payment .sv-card__panel-testimonial cite {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-style: normal;
}


/* ============================================
   CARD 13 — FABRICATION SHOP OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#fabrication-shop .sv-pg__section--dark { position: relative; isolation: isolate; }

#fabrication-shop .sv-fab__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#fabrication-shop .sv-fab__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svFabRipple 9s ease-in-out infinite;
}
#fabrication-shop .sv-fab__hero-circle--1 { width: 30vw; height: 30vw; }
#fabrication-shop .sv-fab__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#fabrication-shop .sv-fab__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svFabRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#fabrication-shop .sv-pg__heading,
#fabrication-shop .sv-pg__subtext,
#fabrication-shop .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Subtitle headline */
#fabrication-shop .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Service category steps: outlined FHSA cards (drop the dot-track timeline) */
#fabrication-shop .sv-card__panel-steps {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
#fabrication-shop .sv-card__panel-steps::before { display: none; }

#fabrication-shop .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.8vw, 22px);
    transition: background 280ms var(--ease-out);
}
#fabrication-shop .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#fabrication-shop .sv-card__panel-step::before { display: none; }

/* Show the number — circle badge instead of timeline dot */
#fabrication-shop .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#fabrication-shop .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.55;
    font-size: 0.9rem;
}

#fabrication-shop .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}

/* Product tags: outlined pill chips */
#fabrication-shop .sv-card__panel-tags {
    gap: clamp(8px, 1vw, 12px);
}

#fabrication-shop .sv-card__panel-tag {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 280ms var(--ease-out);
}
#fabrication-shop .sv-card__panel-tag:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* ============================================
   CARD 14 — INSURANCE & SURETY OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#insurance-surety .sv-pg__section--dark { position: relative; isolation: isolate; }

#insurance-surety .sv-ins__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#insurance-surety .sv-ins__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svInsRipple 9s ease-in-out infinite;
}
#insurance-surety .sv-ins__hero-circle--1 { width: 30vw; height: 30vw; }
#insurance-surety .sv-ins__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#insurance-surety .sv-ins__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svInsRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#insurance-surety .sv-pg__heading,
#insurance-surety .sv-pg__subtext,
#insurance-surety .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Subtitle headline */
#insurance-surety .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 7 service area steps: outlined FHSA cards */
#insurance-surety .sv-card__panel-steps {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
#insurance-surety .sv-card__panel-steps::before { display: none; }

#insurance-surety .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.8vw, 22px);
    transition: background 280ms var(--ease-out);
}
#insurance-surety .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#insurance-surety .sv-card__panel-step::before { display: none; }

#insurance-surety .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#insurance-surety .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.55;
    font-size: 0.9rem;
}

#insurance-surety .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}

/* Service-area grid: 5 cards, resizable. Replaced the tab nav so all
   cards are visible at once. Mirrors the post-construction pattern. */
#insurance-surety .sv-ins__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

#insurance-surety .sv-ins__card {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
    transition: background 280ms var(--ease-out);
}

#insurance-surety .sv-ins__card:hover {
    background: rgba(0, 0, 0, 0.03);
}

#insurance-surety .sv-ins__card-icon {
    font-size: 3rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#insurance-surety .sv-ins__card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#insurance-surety .sv-ins__card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* Highlight callout: convert to white-card with serif emphasis */
#insurance-surety .sv-card__panel-highlight {
    background: var(--color-pure-white);
    border-left: none;
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(2rem, 3vw, 2.5rem);
    margin-top: 0;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    position: relative;
}

/* Add a subtle quote-style left accent bar inside */
#insurance-surety .sv-card__panel-highlight::before {
    content: '';
    position: absolute;
    left: clamp(2rem, 3vw, 2.5rem);
    top: clamp(2rem, 3vw, 2.5rem);
    width: 32px;
    height: 2px;
    background: var(--color-text-primary);
}

#insurance-surety .sv-card__panel-highlight p {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: var(--font-regular);
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    font-style: normal;
    margin: var(--space-4) 0 0;
}


/* ============================================
   CARD 15 — OFFSITE MANUFACTURING OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#offsite-manufacturing .sv-pg__section--dark { position: relative; isolation: isolate; }

#offsite-manufacturing .sv-offsite__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#offsite-manufacturing .sv-offsite__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svOffsiteRipple 9s ease-in-out infinite;
}
#offsite-manufacturing .sv-offsite__hero-circle--1 { width: 30vw; height: 30vw; }
#offsite-manufacturing .sv-offsite__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#offsite-manufacturing .sv-offsite__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svOffsiteRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#offsite-manufacturing .sv-pg__heading,
#offsite-manufacturing .sv-pg__subtext,
#offsite-manufacturing .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Stats: single boxed white card with hairline dividers between cells */
#offsite-manufacturing .sv-card__panel-stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px) clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    margin-top: 0;
    border-top: none;
    padding-top: clamp(28px, 3.5vw, 44px);
    gap: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
#offsite-manufacturing .sv-card__panel-stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#offsite-manufacturing .sv-card__panel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}
#offsite-manufacturing .sv-card__panel-stat + .sv-card__panel-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#offsite-manufacturing .sv-card__panel-stat-val {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#offsite-manufacturing .sv-card__panel-stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* 4-col value cards: outlined FHSA cards (override the inline-styled red circle icons) */
#offsite-manufacturing .sv-card__panel-cols {
    gap: clamp(12px, 1.5vw, 18px) !important;
    margin-top: 0 !important;
}

#offsite-manufacturing .sv-card__panel-col {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px);
    transition: background 280ms var(--ease-out);
}
#offsite-manufacturing .sv-card__panel-col:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Override the inline-styled icon circle (red border, 36px) */
#offsite-manufacturing .sv-card__panel-col > div:first-child {
    width: 56px !important;
    height: 56px !important;
    border: 1.5px solid var(--color-text-primary) !important;
    background: var(--color-pure-white) !important;
    margin-bottom: var(--space-4) !important;
}

#offsite-manufacturing .sv-card__panel-col > div:first-child i {
    font-size: 1.5rem !important;
    color: var(--color-text-primary) !important;
}

/* Heading inside each col card */
#offsite-manufacturing .sv-card__panel-col h4 {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

/* Description in each col card */
#offsite-manufacturing .sv-card__panel-col .sv-card__panel-faq-a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* End-to-End Services subtitle */
#offsite-manufacturing .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 8 service steps: outlined FHSA cards */
#offsite-manufacturing .sv-card__panel-steps {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
#offsite-manufacturing .sv-card__panel-steps::before { display: none; }

#offsite-manufacturing .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.8vw, 22px);
    transition: background 280ms var(--ease-out);
}
#offsite-manufacturing .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#offsite-manufacturing .sv-card__panel-step::before { display: none; }

#offsite-manufacturing .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#offsite-manufacturing .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.55;
    font-size: 0.9rem;
}

#offsite-manufacturing .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}


/* ============================================
   CARD 16 — RISK MANAGEMENT OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#risk-management .sv-pg__section--dark { position: relative; isolation: isolate; }

#risk-management .sv-risk__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#risk-management .sv-risk__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svRiskRipple 9s ease-in-out infinite;
}
#risk-management .sv-risk__hero-circle--1 { width: 30vw; height: 30vw; }
#risk-management .sv-risk__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#risk-management .sv-risk__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svRiskRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#risk-management .sv-pg__heading,
#risk-management .sv-pg__subtext,
#risk-management .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Body paragraph in grey section: better contrast */
#risk-management .sv-pg__section--grey > p {
    color: var(--color-text-primary) !important;
    opacity: 0.72;
}

/* Subtitle headline */
#risk-management .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 5 service offering steps: outlined FHSA cards */
#risk-management .sv-card__panel-steps {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
#risk-management .sv-card__panel-steps::before { display: none; }

#risk-management .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.8vw, 22px);
    transition: background 280ms var(--ease-out);
}
#risk-management .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#risk-management .sv-card__panel-step::before { display: none; }

#risk-management .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#risk-management .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.55;
    font-size: 0.9rem;
}

#risk-management .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}

/* Highlight callout: white card with primary accent */
#risk-management .sv-card__panel-highlight {
    background: var(--color-pure-white);
    border-left: none;
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(2rem, 3vw, 2.5rem);
    margin-top: 0;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    position: relative;
}

#risk-management .sv-card__panel-highlight::before {
    content: '';
    position: absolute;
    left: clamp(2rem, 3vw, 2.5rem);
    top: clamp(2rem, 3vw, 2.5rem);
    width: 32px;
    height: 2px;
    background: var(--color-text-primary);
}

#risk-management .sv-card__panel-highlight p {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: var(--font-regular);
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    font-style: normal;
    margin: var(--space-4) 0 0;
}


/* ============================================
   CARD 17 — SELF-PERFORM OPERATIONS OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#self-perform .sv-pg__section--dark { position: relative; isolation: isolate; }

#self-perform .sv-spo__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#self-perform .sv-spo__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svSpoRipple 9s ease-in-out infinite;
}
#self-perform .sv-spo__hero-circle--1 { width: 30vw; height: 30vw; }
#self-perform .sv-spo__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#self-perform .sv-spo__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svSpoRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#self-perform .sv-pg__heading,
#self-perform .sv-pg__subtext,
#self-perform .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Metrics: single boxed white card with internal hairline dividers */
#self-perform .sv-panel-metrics {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px) clamp(2rem, 4vw, 3rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    border-bottom: none;
    gap: clamp(1rem, 2vw, 2.5rem);
}
#self-perform .sv-panel-metrics:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#self-perform .sv-panel-metric {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 1;
    gap: 8px;
}

#self-perform .sv-panel-metric__val {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#self-perform .sv-panel-metric__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

#self-perform .sv-panel-metric__divider {
    width: 1px;
    height: 56px;
    background: var(--color-border);
}

/* Subtitles */
#self-perform .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Trade tags: outlined pill chips */
#self-perform .sv-card__panel-tags {
    gap: clamp(8px, 1vw, 12px);
}

#self-perform .sv-card__panel-tag {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 280ms var(--ease-out);
}
#self-perform .sv-card__panel-tag:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Workforce list: convert to outlined FHSA cards */
#self-perform .sv-card__panel-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
}
#self-perform .sv-card__panel-list::before { display: none; }

#self-perform .sv-card__panel-list li {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 18px;
    padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 26px);
    list-style: none;
    color: var(--color-text-primary);
    opacity: 0.8;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    transition: background 280ms var(--ease-out);
}
#self-perform .sv-card__panel-list li:hover {
    background: rgba(0, 0, 0, 0.03);
    opacity: 1;
}
#self-perform .sv-card__panel-list li::before { display: none; }

/* Highlight callout: white card aesthetic */
#self-perform .sv-card__panel-highlight {
    background: var(--color-pure-white);
    border-left: none;
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(2rem, 3vw, 2.5rem);
    margin-top: 0;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 900px;
    position: relative;
}

#self-perform .sv-card__panel-highlight::before {
    content: '';
    position: absolute;
    left: clamp(2rem, 3vw, 2.5rem);
    top: clamp(2rem, 3vw, 2.5rem);
    width: 32px;
    height: 2px;
    background: var(--color-text-primary);
}

#self-perform .sv-card__panel-highlight p {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: var(--font-regular);
    line-height: 1.55;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    font-style: normal;
    margin: var(--space-4) 0 0;
}

/* Split section: body text + spec sidebar */
#self-perform .sv-panel-split__main p {
    color: var(--color-text-primary) !important;
    opacity: 0.72 !important;
    font-size: var(--text-base) !important;
}

#self-perform .sv-panel-spec {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px) !important;
    margin-bottom: clamp(10px, 1.2vw, 14px) !important;
    transition: background 280ms var(--ease-out) !important;
}
#self-perform .sv-panel-spec:last-child { margin-bottom: 0 !important; }
#self-perform .sv-panel-spec:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

#self-perform .sv-panel-spec__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

#self-perform .sv-panel-spec__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.25;
}


/* ============================================
   CARD 18 — SUPPLY CHAIN MANAGEMENT OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#supply-chain .sv-pg__section--dark { position: relative; isolation: isolate; }

#supply-chain .sv-supply__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#supply-chain .sv-supply__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svSupplyRipple 9s ease-in-out infinite;
}
#supply-chain .sv-supply__hero-circle--1 { width: 30vw; height: 30vw; }
#supply-chain .sv-supply__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#supply-chain .sv-supply__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svSupplyRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#supply-chain .sv-pg__heading,
#supply-chain .sv-pg__subtext,
#supply-chain .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Body paragraph: better contrast */
#supply-chain .sv-pg__section--grey > p {
    color: var(--color-text-primary) !important;
    opacity: 0.72 !important;
    font-size: var(--text-base) !important;
}

/* Subtitle */
#supply-chain .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 4 service category steps: outlined FHSA cards */
#supply-chain .sv-card__panel-steps {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
#supply-chain .sv-card__panel-steps::before { display: none; }

#supply-chain .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 28px);
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.8vw, 22px);
    transition: background 280ms var(--ease-out);
}
#supply-chain .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#supply-chain .sv-card__panel-step::before { display: none; }

#supply-chain .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#supply-chain .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.55;
    font-size: 0.9rem;
}

#supply-chain .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}

/* Info grid: outlined FHSA cards (key-value pairs) */
#supply-chain .sv-card__panel-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
}

#supply-chain .sv-card__panel-info-item {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 18px;
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px);
    transition: background 280ms var(--ease-out);
}
#supply-chain .sv-card__panel-info-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

#supply-chain .sv-card__panel-info-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

#supply-chain .sv-card__panel-info-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    line-height: 1.25;
}


/* ============================================
   CARD 19 — ENGINEERING GROUP OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#engineering-group .sv-pg__section--dark { position: relative; isolation: isolate; }

#engineering-group .sv-eng__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#engineering-group .sv-eng__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svEngRipple 9s ease-in-out infinite;
}
#engineering-group .sv-eng__hero-circle--1 { width: 30vw; height: 30vw; }
#engineering-group .sv-eng__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#engineering-group .sv-eng__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svEngRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#engineering-group .sv-pg__heading,
#engineering-group .sv-pg__subtext,
#engineering-group .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Stats: single boxed white card with internal hairline dividers */
#engineering-group .sv-card__panel-stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px) clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    margin-top: 0;
    border-top: none;
    padding-top: clamp(28px, 3.5vw, 44px);
    gap: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
#engineering-group .sv-card__panel-stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#engineering-group .sv-card__panel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}
#engineering-group .sv-card__panel-stat + .sv-card__panel-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#engineering-group .sv-card__panel-stat-val {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#engineering-group .sv-card__panel-stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Modules label: stronger headline */
#engineering-group .sv-panel-modules__label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

#engineering-group .sv-panel-modules__grid {
    gap: clamp(10px, 1.2vw, 14px);
}

/* 13 module items: outlined FHSA cards */
#engineering-group .sv-panel-modules__item {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 18px) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    text-align: center !important;
}
#engineering-group .sv-panel-modules__item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--color-text-primary) !important;
}

#engineering-group .sv-panel-modules__item i {
    font-size: 1.9rem !important;
    color: var(--color-text-primary) !important;
    opacity: 0.65 !important;
    transition: opacity 280ms var(--ease-out);
}
#engineering-group .sv-panel-modules__item:hover i {
    opacity: 1 !important;
}

#engineering-group .sv-panel-modules__item span {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: var(--color-text-primary);
    text-transform: none;
}

/* Body paragraph: better contrast */
#engineering-group .sv-pg__section--light > p {
    color: var(--color-text-primary) !important;
    opacity: 0.72 !important;
    font-size: var(--text-base) !important;
}


/* ============================================
   CARD 20 — TECHNICAL SERVICES OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#technical-services .sv-pg__section--dark { position: relative; isolation: isolate; }

#technical-services .sv-tech__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#technical-services .sv-tech__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svTechRipple 9s ease-in-out infinite;
}
#technical-services .sv-tech__hero-circle--1 { width: 30vw; height: 30vw; }
#technical-services .sv-tech__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#technical-services .sv-tech__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svTechRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#technical-services .sv-pg__heading,
#technical-services .sv-pg__subtext,
#technical-services .sv-pg__eyebrow { position: relative; z-index: 1; }

/* 3-column service cards: outlined FHSA */
#technical-services .sv-card__panel-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 18px);
    margin-top: 0;
}

#technical-services .sv-card__panel-col {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px);
    transition: background 280ms var(--ease-out);
}
#technical-services .sv-card__panel-col:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Override the inline-styled red accent bar — convert to primary-color */
#technical-services .sv-card__panel-col > div:first-child {
    background: var(--color-text-primary) !important;
    width: 32px !important;
    height: 3px !important;
    border-radius: 2px !important;
    margin-bottom: var(--space-4) !important;
}

#technical-services .sv-card__panel-col h4 {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

/* Inner ul list inside each col: clean simple bullet list */
#technical-services .sv-card__panel-col .sv-card__panel-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#technical-services .sv-card__panel-col .sv-card__panel-list::before { display: none; }

#technical-services .sv-card__panel-col .sv-card__panel-list li {
    list-style: none;
    color: var(--color-text-primary);
    opacity: 0.75;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    position: relative;
    padding-left: var(--space-5);
}
#technical-services .sv-card__panel-col .sv-card__panel-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.65em;
    width: 12px;
    height: 1px;
    background: var(--color-text-primary);
    opacity: 0.4;
    border-radius: 0;
    border: none;
    background-color: var(--color-text-primary);
}

/* Body paragraph: better contrast */
#technical-services .sv-pg__section--light > p {
    color: var(--color-text-primary) !important;
    opacity: 0.72 !important;
    font-size: var(--text-base) !important;
}


/* ============================================
   CARD 21 — VDC OVERRIDES
   ============================================ */

/* Hero band: concentric ripples */
#vdc .sv-pg__section--dark { position: relative; isolation: isolate; }

#vdc .sv-vdc__hero-ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
#vdc .sv-vdc__hero-circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: svVdcRipple 9s ease-in-out infinite;
}
#vdc .sv-vdc__hero-circle--1 { width: 30vw; height: 30vw; }
#vdc .sv-vdc__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
#vdc .sv-vdc__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }

@keyframes svVdcRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

#vdc .sv-pg__heading,
#vdc .sv-pg__subtext,
#vdc .sv-pg__eyebrow { position: relative; z-index: 1; }

/* Stats: single boxed white card with internal hairline dividers */
#vdc .sv-card__panel-stats {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px) clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    margin-top: 0;
    border-top: none;
    padding-top: clamp(28px, 3.5vw, 44px);
    gap: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
#vdc .sv-card__panel-stats:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

#vdc .sv-card__panel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}
#vdc .sv-card__panel-stat + .sv-card__panel-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: var(--color-border);
}

#vdc .sv-card__panel-stat-val {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

#vdc .sv-card__panel-stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Subtitle headline */
#vdc .sv-card__panel-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--color-text-primary);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* 12 VDC services: outlined FHSA cards in 2-col grid */
#vdc .sv-card__panel-steps {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 1.2vw, 14px);
}
#vdc .sv-card__panel-steps::before { display: none; }

#vdc .sv-card__panel-step {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(18px, 2.2vw, 24px);
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.6vw, 18px);
    transition: background 280ms var(--ease-out);
}
#vdc .sv-card__panel-step:hover {
    background: rgba(0, 0, 0, 0.03);
}
#vdc .sv-card__panel-step::before { display: none; }

#vdc .sv-card__panel-step span:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    background: var(--color-pure-white);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

#vdc .sv-card__panel-step span:last-child {
    flex: 1;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.5;
    font-size: 0.85rem;
}

#vdc .sv-card__panel-step strong {
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: 1rem;
    letter-spacing: -0.3px;
    display: block;
    margin-bottom: 4px;
    opacity: 1;
}

@media (max-width: 700px) {
    #vdc .sv-card__panel-steps { grid-template-columns: 1fr; }
}

/* Highlight callout: white card with primary accent */
#vdc .sv-card__panel-highlight {
    background: var(--color-pure-white);
    border-left: none;
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(2rem, 3vw, 2.5rem);
    margin-top: 0;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    position: relative;
}

#vdc .sv-card__panel-highlight::before {
    content: '';
    position: absolute;
    left: clamp(2rem, 3vw, 2.5rem);
    top: clamp(2rem, 3vw, 2.5rem);
    width: 32px;
    height: 2px;
    background: var(--color-text-primary);
}

#vdc .sv-card__panel-highlight p {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: var(--font-regular);
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    font-style: normal;
    margin: var(--space-4) 0 0;
}


/* ============================================
   PER-CARD HERO IMAGE
   Full-bleed right side: image touches top/right/bottom of the dark hero.
   Text on the left with internal padding; image fills the remaining width.
   ============================================ */
.sv-pg__section--dark,
.sv-reno__s--hero {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    /* Warm graphite gradient — depth instead of flat pure-dark */
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.05), transparent 55%),
        linear-gradient(135deg, #211e1a 0%, #100e0c 100%) !important;
}

/* Replace the rigid 40px grid with a softer dot mesh */
.sv-pg__section--dark::before,
.sv-reno__s--hero::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) !important;
    background-size: 22px 22px !important;
    background-position: 0 0 !important;
}

/* Text column carries the section's normal padding internally */
.sv-card__hero-text {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 5vw, 80px) clamp(2rem, 3.5vw, 3.5rem) clamp(40px, 5vw, 80px) clamp(32px, 4vw, 64px);
}

/* Image takes flexible width on the right and bleeds top→bottom→right */
.sv-card__hero-image {
    flex: 1 1 0;
    min-width: 38%;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: none;
    z-index: 1;
}

.sv-card__hero-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sv-card__hero-image:hover .sv-card__hero-image-img {
    transform: scale(1.04);
}

/* Hide the corner-bracket markup since the image is now full-bleed */
.sv-card__hero-image-corner { display: none; }

/* Mobile — stack vertically, image becomes a full-width banner above text */
@media (max-width: 768px) {
    .sv-pg__section--dark,
    .sv-reno__s--hero {
        flex-direction: column;
        align-items: stretch;
    }
    .sv-card__hero-image {
        order: -1;
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        height: 240px;
    }
}


/* ============================================================
   CARD 01 — RENOVATION & RETROFIT — BLACK & WHITE NEWSPRINT
   High contrast, paper-feel surfaces, ink-black hairlines and
   rules, near-black text. Same fonts; only color/chrome shift.
   ============================================================ */

#renovation-retrofit {
    --np-paper: #fafaf6;
    --np-paper-alt: #f3efe6;
    --np-ink: var(--svc-text-on-cream);
    --np-ink-soft: rgba(20, 17, 13, 0.7);
    --np-hairline: rgba(20, 17, 13, 0.18);
    --np-rule: rgba(20, 17, 13, 0.85);
}

/* ---- HERO: paper-tone, sharp ink hairlines ---- */
#renovation-retrofit .sv-reno__s--hero {
    background: var(--np-paper) !important;
    isolation: auto;
    border-bottom: 2px solid var(--np-rule);
}

#renovation-retrofit .sv-reno__s--hero::before { display: none !important; }
#renovation-retrofit .sv-reno__s--hero::after { display: none !important; }
#renovation-retrofit .sv-reno__hero-ripples { display: none !important; }

#renovation-retrofit .sv-reno__eyebrow span {
    color: var(--np-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Render the eyebrow's ::before bar as black ink */
#renovation-retrofit .sv-reno__eyebrow::before {
    background: var(--np-ink) !important;
}

#renovation-retrofit .sv-reno__headline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.75vw, 3.25rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -1px;
    color: var(--np-ink);
    max-width: 720px;
}

#renovation-retrofit .sv-reno__subhead {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--np-ink);
    max-width: 60ch;
    margin-top: var(--space-6);
}

/* Hero image keeps full-bleed right; remove dark gradient overlay */
#renovation-retrofit .sv-card__hero-image::after { display: none; }

/* ---- STATS: thick black top rules, ink-numerals ---- */
#renovation-retrofit .sv-reno__s--stats {
    background: var(--color-pure-white);
    padding: clamp(3rem, 6vw, 5rem) clamp(32px, 4vw, 64px);
    border-bottom: 1px solid var(--np-rule);
}

#renovation-retrofit .sv-reno__stats-grid {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: clamp(2rem, 5vw, 5rem) !important;
    max-width: var(--container-max);
    margin: 0 auto;
}

#renovation-retrofit .sv-reno__stats-grid:hover {
    transform: none !important;
    box-shadow: none !important;
}

#renovation-retrofit .sv-reno__stats-grid::after { display: none !important; }

#renovation-retrofit .sv-reno__stat {
    padding: var(--space-8) 0 0 !important;
    border-top: 2px solid var(--np-rule);
    align-items: flex-start !important;
    text-align: left !important;
    gap: var(--space-5) !important;
}

#renovation-retrofit .sv-reno__stat + .sv-reno__stat::before { display: none !important; }

#renovation-retrofit .sv-reno__stat-num {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    font-weight: var(--font-regular) !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
    color: var(--np-ink) !important;
    opacity: 1 !important;
    transform: none !important;
}

#renovation-retrofit .sv-reno__stat-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--np-ink);
    opacity: 1;
    line-height: var(--leading-normal);
}

/* ---- ABOUT / CAPABILITIES: paper-tone alternation, ink hairlines ---- */
/* First about section = paper #fafaf6; second (with inline white) = pure white. */
#renovation-retrofit .sv-reno__s--about {
    background: var(--np-paper) !important;
    padding: clamp(3rem, 6vw, 5rem) clamp(32px, 4vw, 64px) !important;
    border-bottom: 1px solid var(--np-rule);
}

#renovation-retrofit .sv-reno__s--about[style*="background:#fff"] {
    background: var(--color-pure-white) !important;
}

#renovation-retrofit .sv-reno__about-text p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--np-ink);
    line-height: var(--leading-normal);
    opacity: 1;
}

#renovation-retrofit .sv-reno__about-details {
    gap: var(--space-3) !important;
}

/* Detail cards → ink hairline cards on the alt paper tone */
#renovation-retrofit .sv-reno__detail-card {
    background: var(--color-pure-white) !important;
    border: 1px solid var(--np-rule) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.1rem, 1.8vw, 1.5rem) !important;
    box-shadow: none !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
}

/* In the white-bg about section, swap detail cards to alt-paper for contrast */
#renovation-retrofit .sv-reno__s--about[style*="background:#fff"] .sv-reno__detail-card {
    background: var(--np-paper) !important;
}

#renovation-retrofit .sv-reno__detail-card:hover {
    background: var(--np-paper-alt) !important;
    border-color: var(--np-ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

#renovation-retrofit .sv-reno__detail-card > i {
    font-size: 1.2rem;
    color: var(--np-ink);
    opacity: 0.6;
    margin-top: 2px;
}

#renovation-retrofit .sv-reno__detail-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--np-ink);
    opacity: 0.55;
    margin-bottom: 3px;
}

#renovation-retrofit .sv-reno__detail-value {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: var(--font-semibold);
    color: var(--np-ink);
    letter-spacing: -0.2px;
    line-height: var(--leading-snug);
}

/* ---- LIFECYCLE DIAGRAM: ink-on-paper, sharp ---- */
#renovation-retrofit .sv-reno__s--diagram {
    background: var(--np-paper) !important;
    border-bottom: 1px solid var(--np-rule);
    padding: clamp(3rem, 6vw, 5rem) clamp(32px, 4vw, 64px) !important;
}

#renovation-retrofit .sv-reno__diagram-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--font-semibold);
    color: var(--np-ink);
    letter-spacing: -0.5px;
}

#renovation-retrofit .sv-reno__diagram-intro {
    color: var(--np-ink);
    opacity: 1;
}

#renovation-retrofit .sv-reno__diagram-icon {
    background: var(--color-pure-white);
    border: 2px solid var(--np-ink);
    width: 72px;
    height: 72px;
}

#renovation-retrofit .sv-reno__diagram-icon i {
    color: var(--np-ink);
    font-size: 1.85rem;
}

#renovation-retrofit .sv-reno__diagram-node--active .sv-reno__diagram-icon {
    background: var(--np-ink);
    border-color: var(--np-ink);
}

#renovation-retrofit .sv-reno__diagram-node--active .sv-reno__diagram-icon i {
    color: var(--color-pure-white);
}

#renovation-retrofit .sv-reno__diagram-connector {
    background: repeating-linear-gradient(
        90deg,
        var(--np-ink) 0, var(--np-ink) 4px,
        transparent 4px, transparent 8px
    ) !important;
    height: 1.5px !important;
    opacity: 1 !important;
}

#renovation-retrofit .sv-reno__diagram-label {
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: var(--np-ink) !important;
    text-transform: uppercase;
}

/* Chart wrapper — newsprint plate */
#renovation-retrofit .sv-reno__diagram-chart {
    background: var(--color-pure-white);
    border: 1.5px solid var(--np-ink);
    border-radius: 0;
    box-shadow: none;
    padding: clamp(2rem, 3.5vw, 3rem);
}

#renovation-retrofit .sv-reno__diagram-chart-eyebrow {
    color: var(--np-ink);
    opacity: 0.55;
}

#renovation-retrofit .sv-reno__diagram-bar-label {
    color: var(--np-ink) !important;
    font-weight: var(--font-semibold) !important;
    font-size: 0.85rem !important;
}

#renovation-retrofit .sv-reno__diagram-bar-track {
    background: var(--np-paper-alt);
    border: 1px solid var(--np-ink);
    border-radius: 0;
}

#renovation-retrofit .sv-reno__diagram-bar-fill {
    background: var(--np-ink) !important;
    border-radius: 0 !important;
}

#renovation-retrofit .sv-reno__diagram-bar-pct {
    color: var(--color-pure-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

#renovation-retrofit .sv-reno__diagram-axis span {
    color: var(--np-ink);
    opacity: 0.6;
    font-size: 0.65rem;
}

#renovation-retrofit .sv-reno__diagram-axis span::before {
    background: var(--np-ink);
}

/* ---- PROCESS PHASES: paper plate, ink hairline cards ---- */
#renovation-retrofit .sv-reno__s--process {
    background: var(--np-paper-alt) !important;
    padding: clamp(3rem, 6vw, 5rem) clamp(32px, 4vw, 64px) !important;
    border-bottom: 1px solid var(--np-rule);
}

#renovation-retrofit .sv-reno__s--process::before { display: none !important; }

#renovation-retrofit .sv-reno__s--process .sv-reno__eyebrow span {
    color: var(--np-ink) !important;
    opacity: 0.65;
}
#renovation-retrofit .sv-reno__s--process .sv-reno__eyebrow::before {
    background: var(--np-ink) !important;
}

#renovation-retrofit .sv-reno__process-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
}

#renovation-retrofit .sv-reno__step-card {
    background: var(--color-pure-white) !important;
    border: 1px solid var(--np-rule) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(2rem, 2.8vw, 2.5rem) clamp(1.75rem, 2.4vw, 2.25rem) !important;
    transition: background 280ms var(--ease-out) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
}

#renovation-retrofit .sv-reno__step-card:hover {
    background: var(--np-paper) !important;
    border-color: var(--np-ink) !important;
}

#renovation-retrofit .sv-reno__step-label {
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--np-ink) !important;
    opacity: 0.55 !important;
    margin: 0 !important;
}

#renovation-retrofit .sv-reno__step-title {
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: var(--font-semibold) !important;
    line-height: var(--leading-snug) !important;
    letter-spacing: -0.3px !important;
    color: var(--np-ink) !important;
    margin: 0 !important;
}

#renovation-retrofit .sv-reno__step-desc {
    color: var(--np-ink) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.6 !important;
    opacity: 0.85 !important;
    margin: 0 !important;
}

@media (max-width: 1100px) {
    #renovation-retrofit .sv-reno__process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    #renovation-retrofit .sv-reno__process-grid { grid-template-columns: 1fr; }
}

/* ---- DASHED DIVIDER ---- */
#renovation-retrofit .sv-reno__divider {
    background: var(--color-pure-white) !important;
    padding: 0 clamp(32px, 4vw, 64px) !important;
}

#renovation-retrofit .sv-reno__divider-line {
    background: repeating-linear-gradient(
        90deg,
        var(--np-ink) 0, var(--np-ink) 4px,
        transparent 4px, transparent 8px
    ) !important;
    height: 1.5px !important;
    opacity: 0.7;
}

/* ---- CTA: ink-on-paper ---- */
#renovation-retrofit .sv-reno__s--cta {
    background: var(--color-pure-white) !important;
    padding: clamp(3rem, 5vw, 4rem) clamp(32px, 4vw, 64px) !important;
}

#renovation-retrofit .sv-reno__sector-tag {
    background: transparent !important;
    border: 1px solid var(--np-ink) !important;
    color: var(--np-ink) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 18px !important;
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    transition: background 280ms var(--ease-out) !important;
}

#renovation-retrofit .sv-reno__sector-tag:hover {
    background: var(--np-ink) !important;
    color: var(--color-pure-white) !important;
}

#renovation-retrofit .sv-reno__cta-btn {
    background: var(--np-ink) !important;
    color: var(--color-pure-white) !important;
    padding: 16px 36px !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: gap var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out) !important;
}

#renovation-retrofit .sv-reno__cta-btn:hover {
    background: #000 !important;
    box-shadow: none !important;
    gap: var(--space-4) !important;
}


/* ============================================================
   CARD 01 — DARK THEME OVERRIDE (renovation)
   Reads from the same --svc-* tokens defined at the top of
   this file. Card 01 uses its own --np-* alias tokens which
   are set here to point at the global service-card tokens.
   ============================================================ */

#renovation-retrofit {
    --np-paper: transparent;
    --np-paper-alt: transparent;
    --np-ink: var(--svc-text);
    --np-ink-soft: var(--svc-text-dim);
    --np-hairline: rgba(50, 48, 47, 0.14);
    --np-rule: rgba(50, 48, 47, 0.45);
    --np-accent: var(--svc-accent);
}

/* Outer panel — flat surface (gradient layers removed for the editorial
   newspaper-style content). */
#renovation-retrofit .sv-card__panel-inner--renovation,
#design-build .sv-card__panel-inner--designbuild {
    background: var(--svc-bg-1) !important;
}

/* Flatten the dark/light/grey/white alternating bands inside design-build
   so the merged sidebar pattern reads as one continuous editorial sheet. */
#design-build .sv-pg__section--dark,
#design-build .sv-pg__section--light,
#design-build .sv-pg__section--grey,
#design-build .sv-pg__section--white {
    background: transparent !important;
}
#design-build .sv-pg__section--dark::before { display: none !important; }

/* ============================================
   DB-EXPLORE — Merged sidebar nav for the Design-Build card
   Mirrors .rr-explore (renovation card #1).
   ============================================ */
#design-build .db-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}

#design-build .db-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#design-build .db-explore__nav::-webkit-scrollbar { width: 4px; }
#design-build .db-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#design-build .db-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#design-build .db-explore__navbox:hover {
    background: rgba(255, 255, 255, 0.08);
}
#design-build .db-explore__navbox.is-active {
    background: rgba(255, 255, 255, 0.06);
}
#design-build .db-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

#design-build .db-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#design-build .db-explore__navbox.is-active .db-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}

#design-build .db-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#design-build .db-explore__navbox.is-active .db-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}

#design-build .db-explore__content { min-width: 0; }
#design-build .db-explore__panels { position: relative; }

#design-build .db-explore__panel { display: none; }
#design-build .db-explore__panel.is-active {
    display: block;
    animation: dbExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dbExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reset section-level padding so panels render flush inside the grid */
#design-build .db-explore__panel > section.sv-pg__section {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* One-typeface enforcement inside panels (newspaper feel). The script
   font on hero/eyebrow/heading is overridden so the panel reads as a
   single editorial voice. */
#design-build .db-explore__panel,
#design-build .db-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}

@media (max-width: 1023px) {
    #design-build .db-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #design-build .db-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #design-build .db-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #design-build .db-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   CM-EXPLORE — Construction Management card (#3) merged sidebar
   Same pattern as .db-explore, scoped to #construction-management.
   ============================================ */

/* Outer panel — flat surface */
#construction-management .sv-card__panel-inner--cm {
    background: var(--svc-bg-1) !important;
}

/* Flatten the dark/light/grey/white alternating bands */
#construction-management .sv-pg__section--dark,
#construction-management .sv-pg__section--light,
#construction-management .sv-pg__section--grey,
#construction-management .sv-pg__section--white {
    background: transparent !important;
}
#construction-management .sv-pg__section--dark::before { display: none !important; }

#construction-management .cm-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}

#construction-management .cm-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#construction-management .cm-explore__nav::-webkit-scrollbar { width: 4px; }
#construction-management .cm-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#construction-management .cm-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#construction-management .cm-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#construction-management .cm-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#construction-management .cm-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

#construction-management .cm-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#construction-management .cm-explore__navbox.is-active .cm-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}

#construction-management .cm-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#construction-management .cm-explore__navbox.is-active .cm-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}

#construction-management .cm-explore__content { min-width: 0; }
#construction-management .cm-explore__panels { position: relative; }
#construction-management .cm-explore__panel { display: none; }
#construction-management .cm-explore__panel.is-active {
    display: block;
    animation: cmExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#construction-management .cm-explore__panel > section.sv-pg__section {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
#construction-management .cm-explore__panel,
#construction-management .cm-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}

@media (max-width: 1023px) {
    #construction-management .cm-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #construction-management .cm-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #construction-management .cm-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #construction-management .cm-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   PM-EXPLORE — Project Management card (#4) merged sidebar
   Same pattern, scoped to #project-management. The 4 panels are the
   existing .sv-pm__lane lifecycle phases — content untouched.
   ============================================ */

#project-management .sv-card__panel-inner--pm {
    background: var(--svc-bg-1) !important;
}

#project-management .sv-pg__section--dark,
#project-management .sv-pg__section--light,
#project-management .sv-pg__section--grey,
#project-management .sv-pg__section--white {
    background: transparent !important;
}
#project-management .sv-pg__section--dark::before { display: none !important; }

#project-management .pm-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}

#project-management .pm-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#project-management .pm-explore__nav::-webkit-scrollbar { width: 4px; }
#project-management .pm-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#project-management .pm-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#project-management .pm-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#project-management .pm-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#project-management .pm-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

#project-management .pm-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#project-management .pm-explore__navbox.is-active .pm-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}

#project-management .pm-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#project-management .pm-explore__navbox.is-active .pm-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}

#project-management .pm-explore__content { min-width: 0; }
#project-management .pm-explore__panels { position: relative; }
#project-management .pm-explore__panel { display: none; }
#project-management .pm-explore__panel.is-active {
    display: block;
    animation: pmExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pmExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#project-management .pm-explore__panel,
#project-management .pm-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}

@media (max-width: 1023px) {
    #project-management .pm-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #project-management .pm-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #project-management .pm-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #project-management .pm-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   LN-EXPLORE — Lean Construction card (#5) merged sidebar
   ============================================ */
#lean-construction .sv-card__panel-inner--lean {
    background: var(--svc-bg-1) !important;
}
#lean-construction .sv-pg__section--dark,
#lean-construction .sv-pg__section--light,
#lean-construction .sv-pg__section--grey,
#lean-construction .sv-pg__section--white {
    background: transparent !important;
}
#lean-construction .sv-pg__section--dark::before { display: none !important; }

#lean-construction .ln-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#lean-construction .ln-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#lean-construction .ln-explore__nav::-webkit-scrollbar { width: 4px; }
#lean-construction .ln-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#lean-construction .ln-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#lean-construction .ln-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#lean-construction .ln-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#lean-construction .ln-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#lean-construction .ln-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#lean-construction .ln-explore__navbox.is-active .ln-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#lean-construction .ln-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#lean-construction .ln-explore__navbox.is-active .ln-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#lean-construction .ln-explore__content { min-width: 0; }
#lean-construction .ln-explore__panels { position: relative; }
#lean-construction .ln-explore__panel { display: none; }
#lean-construction .ln-explore__panel.is-active {
    display: block;
    animation: lnExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lnExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#lean-construction .ln-explore__panel,
#lean-construction .ln-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #lean-construction .ln-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #lean-construction .ln-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #lean-construction .ln-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #lean-construction .ln-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   CV-EXPLORE — Civil Works card (#6) merged sidebar
   ============================================ */
#civil-works .sv-card__panel-inner--civil {
    background: var(--svc-bg-1) !important;
}
#civil-works .sv-pg__section--dark,
#civil-works .sv-pg__section--light,
#civil-works .sv-pg__section--grey,
#civil-works .sv-pg__section--white {
    background: transparent !important;
}
#civil-works .sv-pg__section--dark::before { display: none !important; }

#civil-works .cv-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#civil-works .cv-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#civil-works .cv-explore__nav::-webkit-scrollbar { width: 4px; }
#civil-works .cv-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#civil-works .cv-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#civil-works .cv-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#civil-works .cv-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#civil-works .cv-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#civil-works .cv-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#civil-works .cv-explore__navbox.is-active .cv-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#civil-works .cv-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#civil-works .cv-explore__navbox.is-active .cv-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#civil-works .cv-explore__content { min-width: 0; }
#civil-works .cv-explore__panels { position: relative; }
#civil-works .cv-explore__panel { display: none; }
#civil-works .cv-explore__panel.is-active {
    display: block;
    animation: cvExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cvExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#civil-works .cv-explore__panel,
#civil-works .cv-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #civil-works .cv-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #civil-works .cv-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #civil-works .cv-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #civil-works .cv-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   PC-EXPLORE — Pre-Construction card (#7) merged sidebar
   ============================================ */
#preconstruction .sv-card__panel-inner--precon {
    background: var(--svc-bg-1) !important;
}
#preconstruction .sv-pg__section--dark,
#preconstruction .sv-pg__section--light,
#preconstruction .sv-pg__section--grey,
#preconstruction .sv-pg__section--white {
    background: transparent !important;
}
#preconstruction .sv-pg__section--dark::before { display: none !important; }

#preconstruction .pc-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#preconstruction .pc-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#preconstruction .pc-explore__nav::-webkit-scrollbar { width: 4px; }
#preconstruction .pc-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#preconstruction .pc-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#preconstruction .pc-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#preconstruction .pc-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#preconstruction .pc-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#preconstruction .pc-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#preconstruction .pc-explore__navbox.is-active .pc-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#preconstruction .pc-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#preconstruction .pc-explore__navbox.is-active .pc-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#preconstruction .pc-explore__content { min-width: 0; }
#preconstruction .pc-explore__panels { position: relative; }
#preconstruction .pc-explore__panel { display: none; }
#preconstruction .pc-explore__panel.is-active {
    display: block;
    animation: pcExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pcExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#preconstruction .pc-explore__panel,
#preconstruction .pc-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #preconstruction .pc-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #preconstruction .pc-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #preconstruction .pc-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #preconstruction .pc-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   CE-EXPLORE — Cost Estimation card (#8) merged sidebar
   ============================================ */
#cost-estimation .sv-card__panel-inner {
    background: var(--svc-bg-1) !important;
}
#cost-estimation .sv-pg__section--dark,
#cost-estimation .sv-pg__section--light,
#cost-estimation .sv-pg__section--grey,
#cost-estimation .sv-pg__section--white {
    background: transparent !important;
}
#cost-estimation .sv-pg__section--dark::before { display: none !important; }

#cost-estimation .ce-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#cost-estimation .ce-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#cost-estimation .ce-explore__nav::-webkit-scrollbar { width: 4px; }
#cost-estimation .ce-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#cost-estimation .ce-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#cost-estimation .ce-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#cost-estimation .ce-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#cost-estimation .ce-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#cost-estimation .ce-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#cost-estimation .ce-explore__navbox.is-active .ce-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#cost-estimation .ce-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#cost-estimation .ce-explore__navbox.is-active .ce-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#cost-estimation .ce-explore__content { min-width: 0; }
#cost-estimation .ce-explore__panels { position: relative; }
#cost-estimation .ce-explore__panel { display: none; }
#cost-estimation .ce-explore__panel.is-active {
    display: block;
    animation: ceExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ceExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#cost-estimation .ce-explore__panel,
#cost-estimation .ce-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #cost-estimation .ce-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #cost-estimation .ce-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #cost-estimation .ce-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #cost-estimation .ce-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   PE-EXPLORE — Permitting & Compliance card (#9) merged sidebar
   ============================================ */
#permitting-compliance .sv-card__panel-inner {
    background: var(--svc-bg-1) !important;
}
#permitting-compliance .sv-pg__section--dark,
#permitting-compliance .sv-pg__section--light,
#permitting-compliance .sv-pg__section--grey,
#permitting-compliance .sv-pg__section--white {
    background: transparent !important;
}
#permitting-compliance .sv-pg__section--dark::before { display: none !important; }

#permitting-compliance .pe-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#permitting-compliance .pe-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#permitting-compliance .pe-explore__nav::-webkit-scrollbar { width: 4px; }
#permitting-compliance .pe-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#permitting-compliance .pe-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#permitting-compliance .pe-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#permitting-compliance .pe-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#permitting-compliance .pe-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#permitting-compliance .pe-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#permitting-compliance .pe-explore__navbox.is-active .pe-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#permitting-compliance .pe-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#permitting-compliance .pe-explore__navbox.is-active .pe-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#permitting-compliance .pe-explore__content { min-width: 0; }
#permitting-compliance .pe-explore__panels { position: relative; }
#permitting-compliance .pe-explore__panel { display: none; }
#permitting-compliance .pe-explore__panel.is-active {
    display: block;
    animation: peExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes peExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#permitting-compliance .pe-explore__panel,
#permitting-compliance .pe-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #permitting-compliance .pe-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #permitting-compliance .pe-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #permitting-compliance .pe-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #permitting-compliance .pe-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   QA-EXPLORE — Quality Assurance card (#10) merged sidebar
   ============================================ */
#quality-assurance .sv-card__panel-inner--qa {
    background: var(--svc-bg-1) !important;
}
#quality-assurance .sv-pg__section--dark,
#quality-assurance .sv-pg__section--light,
#quality-assurance .sv-pg__section--grey,
#quality-assurance .sv-pg__section--white {
    background: transparent !important;
}
#quality-assurance .sv-pg__section--dark::before { display: none !important; }

#quality-assurance .qa-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#quality-assurance .qa-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#quality-assurance .qa-explore__nav::-webkit-scrollbar { width: 4px; }
#quality-assurance .qa-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#quality-assurance .qa-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#quality-assurance .qa-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#quality-assurance .qa-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#quality-assurance .qa-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#quality-assurance .qa-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#quality-assurance .qa-explore__navbox.is-active .qa-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#quality-assurance .qa-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#quality-assurance .qa-explore__navbox.is-active .qa-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#quality-assurance .qa-explore__content { min-width: 0; }
#quality-assurance .qa-explore__panels { position: relative; }
#quality-assurance .qa-explore__panel { display: none; }
#quality-assurance .qa-explore__panel.is-active {
    display: block;
    animation: qaExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qaExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#quality-assurance .qa-explore__panel,
#quality-assurance .qa-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #quality-assurance .qa-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #quality-assurance .qa-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #quality-assurance .qa-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #quality-assurance .qa-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   PO-EXPLORE — Post-Construction card (#11) merged sidebar
   ============================================ */
#post-construction .sv-card__panel-inner--postcon {
    background: var(--svc-bg-1) !important;
}
#post-construction .sv-pg__section--dark,
#post-construction .sv-pg__section--light,
#post-construction .sv-pg__section--grey,
#post-construction .sv-pg__section--white {
    background: transparent !important;
}
#post-construction .sv-pg__section--dark::before { display: none !important; }

#post-construction .po-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#post-construction .po-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#post-construction .po-explore__nav::-webkit-scrollbar { width: 4px; }
#post-construction .po-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#post-construction .po-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#post-construction .po-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#post-construction .po-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#post-construction .po-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#post-construction .po-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#post-construction .po-explore__navbox.is-active .po-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#post-construction .po-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#post-construction .po-explore__navbox.is-active .po-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#post-construction .po-explore__content { min-width: 0; }
#post-construction .po-explore__panels { position: relative; }
#post-construction .po-explore__panel { display: none; }
#post-construction .po-explore__panel.is-active {
    display: block;
    animation: poExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes poExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#post-construction .po-explore__panel,
#post-construction .po-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #post-construction .po-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #post-construction .po-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #post-construction .po-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #post-construction .po-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   AP-EXPLORE — Accelerated Payment card (#12) merged sidebar
   ============================================ */
#accelerated-payment .sv-card__panel-inner--payment {
    background: var(--svc-bg-1) !important;
}
#accelerated-payment .sv-pg__section--dark,
#accelerated-payment .sv-pg__section--light,
#accelerated-payment .sv-pg__section--grey,
#accelerated-payment .sv-pg__section--white {
    background: transparent !important;
}
#accelerated-payment .sv-pg__section--dark::before { display: none !important; }

#accelerated-payment .ap-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#accelerated-payment .ap-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#accelerated-payment .ap-explore__nav::-webkit-scrollbar { width: 4px; }
#accelerated-payment .ap-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#accelerated-payment .ap-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#accelerated-payment .ap-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#accelerated-payment .ap-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#accelerated-payment .ap-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#accelerated-payment .ap-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#accelerated-payment .ap-explore__navbox.is-active .ap-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#accelerated-payment .ap-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#accelerated-payment .ap-explore__navbox.is-active .ap-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#accelerated-payment .ap-explore__content { min-width: 0; }
#accelerated-payment .ap-explore__panels { position: relative; }
#accelerated-payment .ap-explore__panel { display: none; }
#accelerated-payment .ap-explore__panel.is-active {
    display: block;
    animation: apExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes apExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#accelerated-payment .ap-explore__panel,
#accelerated-payment .ap-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #accelerated-payment .ap-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #accelerated-payment .ap-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #accelerated-payment .ap-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #accelerated-payment .ap-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   FB-EXPLORE — Fabrication Shop card (#13) merged sidebar
   ============================================ */
#fabrication-shop .sv-card__panel-inner--fab {
    background: var(--svc-bg-1) !important;
}
#fabrication-shop .sv-pg__section--dark,
#fabrication-shop .sv-pg__section--light,
#fabrication-shop .sv-pg__section--grey,
#fabrication-shop .sv-pg__section--white {
    background: transparent !important;
}
#fabrication-shop .sv-pg__section--dark::before { display: none !important; }

#fabrication-shop .fb-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#fabrication-shop .fb-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#fabrication-shop .fb-explore__nav::-webkit-scrollbar { width: 4px; }
#fabrication-shop .fb-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#fabrication-shop .fb-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#fabrication-shop .fb-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#fabrication-shop .fb-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#fabrication-shop .fb-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#fabrication-shop .fb-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#fabrication-shop .fb-explore__navbox.is-active .fb-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#fabrication-shop .fb-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#fabrication-shop .fb-explore__navbox.is-active .fb-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#fabrication-shop .fb-explore__content { min-width: 0; }
#fabrication-shop .fb-explore__panels { position: relative; }
#fabrication-shop .fb-explore__panel { display: none; }
#fabrication-shop .fb-explore__panel.is-active {
    display: block;
    animation: fbExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fbExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#fabrication-shop .fb-explore__panel,
#fabrication-shop .fb-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #fabrication-shop .fb-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #fabrication-shop .fb-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #fabrication-shop .fb-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #fabrication-shop .fb-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   INS-EXPLORE — Insurance & Surety card (#14) merged sidebar
   ============================================ */
#insurance-surety .sv-card__panel-inner--insurance {
    background: var(--svc-bg-1) !important;
}
#insurance-surety .sv-pg__section--dark,
#insurance-surety .sv-pg__section--light,
#insurance-surety .sv-pg__section--grey,
#insurance-surety .sv-pg__section--white {
    background: transparent !important;
}
#insurance-surety .sv-pg__section--dark::before { display: none !important; }

#insurance-surety .ins-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#insurance-surety .ins-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#insurance-surety .ins-explore__nav::-webkit-scrollbar { width: 4px; }
#insurance-surety .ins-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#insurance-surety .ins-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#insurance-surety .ins-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#insurance-surety .ins-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#insurance-surety .ins-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#insurance-surety .ins-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#insurance-surety .ins-explore__navbox.is-active .ins-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#insurance-surety .ins-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#insurance-surety .ins-explore__navbox.is-active .ins-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#insurance-surety .ins-explore__content { min-width: 0; }
#insurance-surety .ins-explore__panels { position: relative; }
#insurance-surety .ins-explore__panel { display: none; }
#insurance-surety .ins-explore__panel.is-active {
    display: block;
    animation: insExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes insExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#insurance-surety .ins-explore__panel,
#insurance-surety .ins-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #insurance-surety .ins-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #insurance-surety .ins-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #insurance-surety .ins-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #insurance-surety .ins-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   OM-EXPLORE — Offsite Manufacturing card (#15) merged sidebar
   ============================================ */
#offsite-manufacturing .sv-card__panel-inner--offsite {
    background: var(--svc-bg-1) !important;
}
#offsite-manufacturing .sv-pg__section--dark,
#offsite-manufacturing .sv-pg__section--light,
#offsite-manufacturing .sv-pg__section--grey,
#offsite-manufacturing .sv-pg__section--white {
    background: transparent !important;
}
#offsite-manufacturing .sv-pg__section--dark::before { display: none !important; }

#offsite-manufacturing .om-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#offsite-manufacturing .om-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#offsite-manufacturing .om-explore__nav::-webkit-scrollbar { width: 4px; }
#offsite-manufacturing .om-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#offsite-manufacturing .om-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#offsite-manufacturing .om-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#offsite-manufacturing .om-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#offsite-manufacturing .om-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#offsite-manufacturing .om-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#offsite-manufacturing .om-explore__navbox.is-active .om-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#offsite-manufacturing .om-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#offsite-manufacturing .om-explore__navbox.is-active .om-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#offsite-manufacturing .om-explore__content { min-width: 0; }
#offsite-manufacturing .om-explore__panels { position: relative; }
#offsite-manufacturing .om-explore__panel { display: none; }
#offsite-manufacturing .om-explore__panel.is-active {
    display: block;
    animation: omExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes omExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#offsite-manufacturing .om-explore__panel,
#offsite-manufacturing .om-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #offsite-manufacturing .om-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #offsite-manufacturing .om-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #offsite-manufacturing .om-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #offsite-manufacturing .om-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   RM-EXPLORE — Risk Management card (#16) merged sidebar
   ============================================ */
#risk-management .sv-card__panel-inner--risk {
    background: var(--svc-bg-1) !important;
}
#risk-management .sv-pg__section--dark,
#risk-management .sv-pg__section--light,
#risk-management .sv-pg__section--grey,
#risk-management .sv-pg__section--white {
    background: transparent !important;
}
#risk-management .sv-pg__section--dark::before { display: none !important; }

#risk-management .rm-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#risk-management .rm-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#risk-management .rm-explore__nav::-webkit-scrollbar { width: 4px; }
#risk-management .rm-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#risk-management .rm-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#risk-management .rm-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#risk-management .rm-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#risk-management .rm-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#risk-management .rm-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#risk-management .rm-explore__navbox.is-active .rm-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#risk-management .rm-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#risk-management .rm-explore__navbox.is-active .rm-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#risk-management .rm-explore__content { min-width: 0; }
#risk-management .rm-explore__panels { position: relative; }
#risk-management .rm-explore__panel { display: none; }
#risk-management .rm-explore__panel.is-active {
    display: block;
    animation: rmExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rmExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#risk-management .rm-explore__panel,
#risk-management .rm-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #risk-management .rm-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #risk-management .rm-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #risk-management .rm-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #risk-management .rm-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   SP-EXPLORE — Self-Perform Operations card (#17) merged sidebar
   ============================================ */
#self-perform .sv-card__panel-inner--spo {
    background: var(--svc-bg-1) !important;
}
#self-perform .sv-pg__section--dark,
#self-perform .sv-pg__section--light,
#self-perform .sv-pg__section--grey,
#self-perform .sv-pg__section--white {
    background: transparent !important;
}
#self-perform .sv-pg__section--dark::before { display: none !important; }

#self-perform .sp-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#self-perform .sp-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#self-perform .sp-explore__nav::-webkit-scrollbar { width: 4px; }
#self-perform .sp-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#self-perform .sp-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#self-perform .sp-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#self-perform .sp-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#self-perform .sp-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#self-perform .sp-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#self-perform .sp-explore__navbox.is-active .sp-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#self-perform .sp-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#self-perform .sp-explore__navbox.is-active .sp-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#self-perform .sp-explore__content { min-width: 0; }
#self-perform .sp-explore__panels { position: relative; }
#self-perform .sp-explore__panel { display: none; }
#self-perform .sp-explore__panel.is-active {
    display: block;
    animation: spExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes spExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#self-perform .sp-explore__panel,
#self-perform .sp-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #self-perform .sp-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #self-perform .sp-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #self-perform .sp-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #self-perform .sp-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   SC-EXPLORE — Supply Chain card (#18) merged sidebar
   ============================================ */
#supply-chain .sv-card__panel-inner--supply {
    background: var(--svc-bg-1) !important;
}
#supply-chain .sv-pg__section--dark,
#supply-chain .sv-pg__section--light,
#supply-chain .sv-pg__section--grey,
#supply-chain .sv-pg__section--white {
    background: transparent !important;
}
#supply-chain .sv-pg__section--dark::before { display: none !important; }

#supply-chain .sc-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#supply-chain .sc-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#supply-chain .sc-explore__nav::-webkit-scrollbar { width: 4px; }
#supply-chain .sc-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#supply-chain .sc-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#supply-chain .sc-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#supply-chain .sc-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#supply-chain .sc-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#supply-chain .sc-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#supply-chain .sc-explore__navbox.is-active .sc-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#supply-chain .sc-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#supply-chain .sc-explore__navbox.is-active .sc-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#supply-chain .sc-explore__content { min-width: 0; }
#supply-chain .sc-explore__panels { position: relative; }
#supply-chain .sc-explore__panel { display: none; }
#supply-chain .sc-explore__panel.is-active {
    display: block;
    animation: scExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#supply-chain .sc-explore__panel,
#supply-chain .sc-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #supply-chain .sc-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #supply-chain .sc-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #supply-chain .sc-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #supply-chain .sc-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   EG-EXPLORE — Engineering Group card (#19) merged sidebar
   ============================================ */
#engineering-group .sv-card__panel-inner--eng {
    background: var(--svc-bg-1) !important;
}
#engineering-group .sv-pg__section--dark,
#engineering-group .sv-pg__section--light,
#engineering-group .sv-pg__section--grey,
#engineering-group .sv-pg__section--white {
    background: transparent !important;
}
#engineering-group .sv-pg__section--dark::before { display: none !important; }

#engineering-group .eg-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#engineering-group .eg-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#engineering-group .eg-explore__nav::-webkit-scrollbar { width: 4px; }
#engineering-group .eg-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#engineering-group .eg-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#engineering-group .eg-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#engineering-group .eg-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#engineering-group .eg-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#engineering-group .eg-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#engineering-group .eg-explore__navbox.is-active .eg-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#engineering-group .eg-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#engineering-group .eg-explore__navbox.is-active .eg-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#engineering-group .eg-explore__content { min-width: 0; }
#engineering-group .eg-explore__panels { position: relative; }
#engineering-group .eg-explore__panel { display: none; }
#engineering-group .eg-explore__panel.is-active {
    display: block;
    animation: egExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes egExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#engineering-group .eg-explore__panel,
#engineering-group .eg-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #engineering-group .eg-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #engineering-group .eg-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #engineering-group .eg-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #engineering-group .eg-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   TS-EXPLORE — Technical Services card (#20) merged sidebar
   ============================================ */
#technical-services .sv-card__panel-inner--techserv {
    background: var(--svc-bg-1) !important;
}
#technical-services .sv-pg__section--dark,
#technical-services .sv-pg__section--light,
#technical-services .sv-pg__section--grey,
#technical-services .sv-pg__section--white {
    background: transparent !important;
}
#technical-services .sv-pg__section--dark::before { display: none !important; }

#technical-services .ts-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#technical-services .ts-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#technical-services .ts-explore__nav::-webkit-scrollbar { width: 4px; }
#technical-services .ts-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#technical-services .ts-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#technical-services .ts-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#technical-services .ts-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#technical-services .ts-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#technical-services .ts-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#technical-services .ts-explore__navbox.is-active .ts-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#technical-services .ts-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#technical-services .ts-explore__navbox.is-active .ts-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#technical-services .ts-explore__content { min-width: 0; }
#technical-services .ts-explore__panels { position: relative; }
#technical-services .ts-explore__panel { display: none; }
#technical-services .ts-explore__panel.is-active {
    display: block;
    animation: tsExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tsExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#technical-services .ts-explore__panel,
#technical-services .ts-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #technical-services .ts-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #technical-services .ts-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #technical-services .ts-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #technical-services .ts-explore__navbox.is-active::before {
        display: none;
    }
}


/* ============================================
   VDC-EXPLORE — Virtual Design & Construction card (#21) merged sidebar
   ============================================ */
#vdc .sv-card__panel-inner--vdc {
    background: var(--svc-bg-1) !important;
}
#vdc .sv-pg__section--dark,
#vdc .sv-pg__section--light,
#vdc .sv-pg__section--grey,
#vdc .sv-pg__section--white {
    background: transparent !important;
}
#vdc .sv-pg__section--dark::before { display: none !important; }

#vdc .vdc-explore {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    margin: 16px 0 0;
}
#vdc .vdc-explore__nav {
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-accent, #FF3B30);
    border-radius: 16px;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
#vdc .vdc-explore__nav::-webkit-scrollbar { width: 4px; }
#vdc .vdc-explore__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
#vdc .vdc-explore__navbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    padding: clamp(0.55rem, 0.9vw, 0.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    position: relative;
    transition: background 0.2s, opacity 0.2s;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}
#vdc .vdc-explore__navbox:hover { background: rgba(255, 255, 255, 0.08); }
#vdc .vdc-explore__navbox.is-active { background: rgba(255, 255, 255, 0.06); }
#vdc .vdc-explore__navbox.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}
#vdc .vdc-explore__navbox-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 24px;
    letter-spacing: 0.02em;
}
#vdc .vdc-explore__navbox.is-active .vdc-explore__navbox-num {
    color: rgba(255, 255, 255, 0.8);
}
#vdc .vdc-explore__navbox-title {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
#vdc .vdc-explore__navbox.is-active .vdc-explore__navbox-title {
    color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 600;
}
#vdc .vdc-explore__content { min-width: 0; }
#vdc .vdc-explore__panels { position: relative; }
#vdc .vdc-explore__panel { display: none; }
#vdc .vdc-explore__panel.is-active {
    display: block;
    animation: vdcExploreFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vdcExploreFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#vdc .vdc-explore__panel,
#vdc .vdc-explore__panel *:not([class*="ph-"]) {
    font-family: var(--font-body, 'Urbanist', sans-serif) !important;
}
@media (max-width: 1023px) {
    #vdc .vdc-explore {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #vdc .vdc-explore__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0.75rem 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    #vdc .vdc-explore__navbox {
        flex: 0 0 auto;
        padding: 0.6rem 1rem;
    }
    #vdc .vdc-explore__navbox.is-active::before {
        display: none;
    }
}


/* Replace the dark-line grid mesh with a barely-there cream mesh */
#renovation-retrofit .sv-card__panel-inner--renovation::before {
    background-image:
        linear-gradient(rgba(50, 48, 47, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 48, 47, 0.022) 1px, transparent 1px) !important;
}

/* All section bands → transparent so the gradient shows through */
#renovation-retrofit .sv-reno__s--hero,
#renovation-retrofit .sv-reno__s--stats,
#renovation-retrofit .sv-reno__s--about,
#renovation-retrofit .sv-reno__s--about[style*="background:#fff"],
#renovation-retrofit .sv-reno__s--diagram,
#renovation-retrofit .sv-reno__s--process,
#renovation-retrofit .sv-reno__s--cta {
    background: transparent !important;
    border-bottom-color: var(--svc-border-subtle) !important;
}

/* Eyebrow bar → orange accent */
#renovation-retrofit .sv-reno__eyebrow::before {
    background: var(--np-accent) !important;
}

#renovation-retrofit .sv-reno__eyebrow span {
    color: var(--svc-text-muted) !important;
}

/* Stats top rules → cream */
#renovation-retrofit .sv-reno__stat {
    border-top-color: var(--svc-border-strong) !important;
}

/* Glass cards (about details, step cards, diagram chart, etc.) */
#renovation-retrofit .sv-reno__detail-card,
#renovation-retrofit .sv-reno__step-card,
#renovation-retrofit .sv-reno__diagram-chart,
#renovation-retrofit .sv-reno__s--about[style*="background:#fff"] .sv-reno__detail-card {
    background: #fff !important;
    border-color: var(--svc-border) !important;
}

#renovation-retrofit .sv-reno__detail-card:hover,
#renovation-retrofit .sv-reno__step-card:hover {
    background: var(--svc-glass-hover) !important;
    border-color: rgba(50, 48, 47, 0.45) !important;
}

#renovation-retrofit .sv-reno__detail-card > i {
    color: var(--svc-text) !important;
    opacity: 0.7;
}

/* Phase label on step cards → orange accent (the only "Phase 01" type marker) */
#renovation-retrofit .sv-reno__step-label {
    color: var(--np-accent) !important;
    opacity: 1 !important;
}

/* Diagram icons (lifecycle nodes) */
#renovation-retrofit .sv-reno__diagram-icon {
    background: rgba(50, 48, 47, 0.05) !important;
    border: 2px solid rgba(50, 48, 47, 0.45) !important;
}

#renovation-retrofit .sv-reno__diagram-icon i {
    color: var(--svc-text) !important;
}

/* Active diagram node — fill with orange accent (signature highlight) */
#renovation-retrofit .sv-reno__diagram-node--active .sv-reno__diagram-icon {
    background: var(--np-accent) !important;
    border-color: var(--np-accent) !important;
    box-shadow: 0 0 0 6px var(--svc-accent-soft);
}

#renovation-retrofit .sv-reno__diagram-node--active .sv-reno__diagram-icon i {
    color: var(--svc-text) !important;
}

/* Diagram dashed connectors → cream */
#renovation-retrofit .sv-reno__diagram-connector {
    background: repeating-linear-gradient(
        90deg,
        var(--svc-border-strong) 0, var(--svc-border-strong) 4px,
        transparent 4px, transparent 8px
    ) !important;
}

#renovation-retrofit .sv-reno__diagram-label {
    color: var(--svc-text) !important;
}

/* Bar chart inside diagram-chart */
#renovation-retrofit .sv-reno__diagram-bar-track {
    background: rgba(50, 48, 47, 0.06) !important;
    border-color: rgba(50, 48, 47, 0.2) !important;
}

#renovation-retrofit .sv-reno__diagram-bar-fill {
    background: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__diagram-bar-pct {
    color: var(--svc-text-on-cream) !important;
}

#renovation-retrofit .sv-reno__diagram-bar-label {
    color: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__diagram-axis span {
    color: var(--svc-text-muted) !important;
}

#renovation-retrofit .sv-reno__diagram-axis span::before {
    background: var(--svc-border-strong) !important;
}

/* Diagram chart eyebrow */
#renovation-retrofit .sv-reno__diagram-chart-eyebrow {
    color: var(--svc-text-muted) !important;
}

/* Process step typography */
#renovation-retrofit .sv-reno__step-title {
    color: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__step-desc {
    color: var(--svc-text-dim) !important;
}

#renovation-retrofit .sv-reno__diagram-headline,
#renovation-retrofit .sv-reno__diagram-intro {
    color: var(--svc-text) !important;
}

/* Hero typography */
#renovation-retrofit .sv-reno__headline {
    color: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__subhead {
    color: var(--svc-text-dim) !important;
}

/* About paragraph text */
#renovation-retrofit .sv-reno__about-text p {
    color: var(--svc-text-soft) !important;
}

#renovation-retrofit .sv-reno__about-text p strong {
    color: var(--svc-text) !important;
}

/* Detail card label/value */
#renovation-retrofit .sv-reno__detail-label {
    color: var(--svc-text-muted) !important;
}

#renovation-retrofit .sv-reno__detail-value {
    color: var(--svc-text) !important;
}

/* Stats typography */
#renovation-retrofit .sv-reno__stat-num {
    color: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__stat-label {
    color: var(--svc-text-dim) !important;
}

/* Sector tags */
#renovation-retrofit .sv-reno__sector-tag {
    border-color: rgba(50, 48, 47, 0.45) !important;
    color: var(--svc-text) !important;
}

#renovation-retrofit .sv-reno__sector-tag:hover {
    background: var(--np-accent) !important;
    border-color: var(--np-accent) !important;
    color: var(--svc-text) !important;
}

/* CTA button — cream fill, dark text → orange on hover */
#renovation-retrofit .sv-reno__cta-btn {
    background: var(--svc-text) !important;
    color: var(--svc-text-on-cream) !important;
}

#renovation-retrofit .sv-reno__cta-btn:hover {
    background: var(--np-accent) !important;
    color: var(--svc-text) !important;
}

/* Dashed divider */
#renovation-retrofit .sv-reno__divider {
    background: transparent !important;
}

#renovation-retrofit .sv-reno__divider-line {
    background: repeating-linear-gradient(
        90deg,
        var(--svc-border-strong) 0, var(--svc-border-strong) 4px,
        transparent 4px, transparent 8px
    ) !important;
}


/* ============================================
   CARD 02 — DESIGN-BUILD: kill the 580px cap on
   body paragraphs in non-dark sections so text
   fills the section width.
   ============================================ */
#design-build .sv-pg__section--grey .sv-pg__subtext,
#design-build .sv-pg__section--light .sv-pg__subtext,
#design-build .sv-pg__section--white .sv-pg__subtext,
#design-build .sv-pg__section:not(.sv-pg__section--dark) .sv-pg__subtext,
#design-build .sv-pg__section:not(.sv-pg__section--dark) p.sv-pg__subtext {
    max-width: none !important;
}


/* ============================================
   Hide the small monofont eyebrows with horizontal-line
   prefix across all 21 service-card dropdown panels.
   Scoped to .sv-card__panel so the page-level hero
   eyebrow ("Our Services") is unaffected.
   ============================================ */
.sv-card__panel .sv-pg__eyebrow,
.sv-card__panel .sv-reno__eyebrow,
.sv-card__panel .sv-reno__diagram-chart-eyebrow,
.sv-card__panel .sv-reno__stat-label,
.sv-card__panel .sv-reno__diagram-label,
.sv-card__panel .sv-reno__diagram-bar-label,
.sv-card__panel .sv-reno__diagram-axis,
.sv-card__panel .sv-reno__diagram-axis span,
.sv-card__panel .sv-reno__detail-label,
.sv-card__panel .sv-reno__step-label,
.sv-card__panel .sv-reno__divider-label,
.sv-card__panel .sv-pg__stat-label,
.sv-card__panel .sv-pg__divider-label,
.sv-card__panel .sv-db__compare-tag,
.sv-card__panel .sv-db__compare-divider-label,
.sv-card__panel .sv-db__pricing-tag,
.sv-card__panel .sv-db__timeline-duration,
.sv-card__panel .sv-db__timeline-axis,
.sv-card__panel .sv-db__timeline-axis > span,
.sv-card__panel .sv-cm__cadence-freq,
.sv-card__panel .sv-panel-db__sidebar-label,
.sv-card__panel .sv-panel-matrix__trait-label,
.sv-card__panel .sv-card__panel-testimonial cite,
.sv-card__panel .sv-reno__sector-tag,
.sv-card__panel .sv-reno__sector-tags,
.sv-card__panel .sv-panel-db__metric-label,
.sv-card__panel .sv-panel-db__flow-label,
.sv-card__panel .sv-db__sector-tag,
.sv-card__panel .sv-db__sector-tags,
.sv-card__panel [class*="__sector-tag"],
.sv-card__panel [class*="__sector-tags"],
.sv-card__panel [class*="__pill"]:not([class*="__pills"]) { display: none !important; }


/* ============================================
   CARD 02 — DESIGN-BUILD: Premium Section Upgrades
   New sections: DBB vs DB compare, Concurrent
   timeline, Why-DB benefits, Pricing structures,
   Best-fit sector tags
   ============================================ */

/* ---- DBB vs N.Sani DB comparison ---- */
#design-build .sv-db__compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(20px, 2.5vw, 36px);
    align-items: stretch;
    margin-top: var(--space-7);
}

#design-build .sv-db__compare-card {
    background: var(--color-pure-white);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: clamp(24px, 2.6vw, 36px);
    display: flex; flex-direction: column;
    gap: clamp(18px, 2vw, 26px);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}
#design-build .sv-db__compare-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.22);
}

#design-build .sv-db__compare-card--legacy {
    background: rgba(20, 20, 18, 0.025);
    border-style: dashed;
}

#design-build .sv-db__compare-card--nsani {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-pure-white);
}

#design-build .sv-db__compare-tag {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    margin-bottom: var(--space-4);
}

#design-build .sv-db__compare-tag--accent {
    color: var(--color-pure-white);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

#design-build .sv-db__compare-title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: inherit;
    margin: 0;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-title {
    color: var(--color-pure-white);
}

#design-build .sv-db__compare-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-sub {
    color: rgba(255, 255, 255, 0.65);
}

#design-build .sv-db__compare-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: var(--space-3);
}

#design-build .sv-db__compare-list li {
    display: flex; align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

#design-build .sv-db__compare-card--legacy .sv-db__compare-list li {
    color: var(--color-text-secondary);
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-list li {
    color: rgba(255, 255, 255, 0.85);
}

#design-build .sv-db__compare-list li i {
    flex-shrink: 0;
    font-size: 1.05rem;
    margin-top: 1px;
    color: var(--color-text-secondary);
    opacity: 0.55;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-list li i {
    color: var(--color-pure-white);
    opacity: 1;
}

#design-build .sv-db__compare-divider {
    display: flex; align-items: center; justify-content: center;
    position: relative;
    width: 48px;
}

#design-build .sv-db__compare-divider::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(
        180deg,
        rgba(20, 20, 18, 0.18) 0, rgba(20, 20, 18, 0.18) 4px,
        transparent 4px, transparent 8px
    );
}

#design-build .sv-db__compare-divider-label {
    position: relative;
    background: #F5F5F5;
    padding: 8px 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* ---- Concurrent Timeline ---- */
#design-build .sv-db__timeline {
    position: relative;
    margin-top: var(--space-6);
    background: #fafaf8;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: clamp(28px, 3.5vw, 44px);
    display: flex; flex-direction: column;
    gap: clamp(18px, 2.2vw, 28px);
}

#design-build .sv-db__timeline-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
}

#design-build .sv-db__timeline-meta {
    display: flex; flex-direction: column;
    gap: 4px;
}

#design-build .sv-db__timeline-model {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-semibold);
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    line-height: 1.2;
}

#design-build .sv-db__timeline-duration {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

#design-build .sv-db__timeline-track {
    position: relative;
    height: 56px;
    background: rgba(20, 20, 18, 0.05);
    border-radius: 8px;
    overflow: visible;
}

#design-build .sv-db__timeline-bar {
    position: absolute;
    height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-pure-white);
    border-radius: 6px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms cubic-bezier(0.4, 0, 0.1, 1);
}

/* Lanes: design/bid/gmp ride the top lane, build rides the bottom lane.
   In DB rows the lanes overlap in time, making concurrency self-evident. */
#design-build .sv-db__timeline-bar--design,
#design-build .sv-db__timeline-bar--bid,
#design-build .sv-db__timeline-bar--gmp { top: 5px; }

#design-build .sv-db__timeline-bar--build { top: 29px; }

#design-build .sv-card--open .sv-db__timeline-bar { transform: scaleX(1); }

#design-build .sv-db__timeline-bar--design { background: #6b7280; transition-delay: 0.15s; }
#design-build .sv-db__timeline-bar--bid    { background: #9ca3af; transition-delay: 0.3s; }
#design-build .sv-db__timeline-bar--build  { background: #4b5563; transition-delay: 0.4s; }

#design-build .sv-db__timeline-row--accent .sv-db__timeline-bar--design { background: var(--color-text-primary); transition-delay: 0.55s; }
#design-build .sv-db__timeline-row--accent .sv-db__timeline-bar--gmp    { background: #C0392B; transition-delay: 0.7s; }
#design-build .sv-db__timeline-row--accent .sv-db__timeline-bar--build  { background: #1a1814; transition-delay: 0.8s; }

#design-build .sv-db__timeline-row--accent .sv-db__timeline-track {
    box-shadow: 0 0 0 1.5px var(--color-text-primary), 0 12px 28px -16px rgba(0, 0, 0, 0.25);
    background: rgba(20, 20, 18, 0.04);
}

#design-build .sv-db__timeline-axis {
    display: flex;
    justify-content: space-between;
    padding-left: calc(200px + clamp(16px, 2vw, 28px));
    margin-top: -8px;
}

#design-build .sv-db__timeline-axis > span {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.55;
}

#design-build .sv-db__timeline-note {
    margin: var(--space-4) 0 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-style: italic;
    opacity: 0.8;
}

/* ---- Why Design-Build benefit grid ---- */
#design-build .sv-db__benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin-top: var(--space-6);
}

#design-build .sv-db__benefit {
    background: var(--color-pure-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: clamp(22px, 2.4vw, 30px);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    position: relative;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1),
                border-color 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

#design-build .sv-db__benefit:hover {
    transform: translateY(-4px);
    border-color: var(--color-text-primary);
    box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.22);
}

#design-build .sv-db__benefit-icon {
    font-size: 3rem;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    background: transparent;
    margin-bottom: var(--space-2);
}

#design-build .sv-db__benefit-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#design-build .sv-db__benefit-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ---- Pricing Models cards ---- */
#design-build .sv-db__pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 32px);
    margin-top: var(--space-6);
}

#design-build .sv-db__pricing-card {
    background: var(--color-pure-white);
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(24px, 2.6vw, 34px);
    display: flex; flex-direction: column;
    gap: var(--space-4);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

#design-build .sv-db__pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.25);
}

#design-build .sv-db__pricing-head {
    display: flex; align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

#design-build .sv-db__pricing-mark {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-text-primary);
    color: var(--color-pure-white);
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
}

#design-build .sv-db__pricing-title {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.15;
    color: var(--color-text-primary);
    margin: 0;
}

#design-build .sv-db__pricing-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 4px 0 0;
}

#design-build .sv-db__pricing-body {
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0;
}

#design-build .sv-db__pricing-feats {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

#design-build .sv-db__pricing-feats li {
    display: flex; align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

#design-build .sv-db__pricing-feats li i {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-top: 1px;
}

/* ---- Best-Fit Sectors ---- */
#design-build .sv-db__sectors {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}

#design-build .sv-db__sector-tags {
    display: flex; flex-wrap: wrap;
    gap: clamp(8px, 1vw, 12px);
}

#design-build .sv-db__sector-tag {
    display: inline-flex; align-items: center;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    background: var(--color-pure-white);
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
    transition: background 280ms var(--ease-out),
                color 280ms var(--ease-out),
                transform 280ms var(--ease-out);
    cursor: default;
}

#design-build .sv-db__sector-tag:hover {
    background: var(--color-text-primary);
    color: var(--color-pure-white);
    transform: translateY(-2px);
}

/* ---- Responsive — Design-Build new sections ---- */
@media (max-width: 1024px) {
    #design-build .sv-db__benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    #design-build .sv-db__compare {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    #design-build .sv-db__compare-divider {
        width: 100%; height: 32px;
    }
    #design-build .sv-db__compare-divider::before {
        top: 50%; bottom: auto;
        left: 0; right: 0;
        width: 100%; height: 1px;
        background: repeating-linear-gradient(
            90deg,
            rgba(20, 20, 18, 0.18) 0, rgba(20, 20, 18, 0.18) 4px,
            transparent 4px, transparent 8px
        );
    }
    #design-build .sv-db__compare-divider-label {
        padding: 4px 12px;
    }

    #design-build .sv-db__timeline-row,
    #design-build .sv-db__timeline-axis {
        grid-template-columns: 1fr;
    }
    #design-build .sv-db__timeline-axis {
        padding-left: 0;
    }

    #design-build .sv-db__pricing { grid-template-columns: 1fr; }
    #design-build .sv-db__sectors { grid-template-columns: 1fr; align-items: flex-start; }
}

@media (max-width: 600px) {
    #design-build .sv-db__benefits { grid-template-columns: 1fr; }
    #design-build .sv-db__compare-card { padding: var(--space-5); }
    #design-build .sv-db__pricing-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    #design-build .sv-db__timeline { padding: var(--space-5); }
    #design-build .sv-db__timeline-bar { font-size: 0.65rem; padding: 0 6px; }
}


/* ============================================
   CARD 03 — CONSTRUCTION MANAGEMENT: Premium Section Upgrades
   New sections: Performance KPIs, Capabilities grid,
   Reporting Cadence pulse visualization
   ============================================ */

/* ---- Capabilities grid ---- */
#construction-management .sv-cm__caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

#construction-management .sv-cm__cap {
    background: var(--color-pure-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: clamp(24px, 2.6vw, 32px);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    position: relative;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                border-color 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

#construction-management .sv-cm__cap:hover {
    transform: translateY(-4px);
    border-color: var(--color-text-primary);
    box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.22);
}

#construction-management .sv-cm__cap-icon {
    font-size: 3rem;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    background: transparent;
    margin-bottom: var(--space-2);
}

#construction-management .sv-cm__cap-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#construction-management .sv-cm__cap-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

#construction-management .sv-cm__cap-feats {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column;
    gap: 6px;
}

#construction-management .sv-cm__cap-feats li {
    position: relative;
    padding-left: 16px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

#construction-management .sv-cm__cap-feats li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 8px; height: 1px;
    background: var(--color-text-primary);
}

/* ---- Reporting Cadence — pulse rhythm ---- */
/* Override the global rule that forces .sv-pg__section--dark into a
   flex-row hero layout. This section is content, not a hero. */
#construction-management .sv-cm__cadence-section {
    display: block !important;
    flex-direction: unset;
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.05), transparent 55%),
        linear-gradient(135deg, #211e1a 0%, #100e0c 100%) !important;
    padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px) !important;
    overflow: hidden;
    isolation: isolate;
    position: relative;
}

/* Restore the dotted-mesh backdrop for this content-style dark section */
#construction-management .sv-cm__cadence-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) !important;
    background-size: 22px 22px !important;
    pointer-events: none;
    z-index: 0;
}

#construction-management .sv-cm__cadence-section > * {
    position: relative;
    z-index: 1;
}

#construction-management .sv-cm__cadence {
    position: relative;
    margin-top: var(--space-4);
}

/* Pulse track running across all 4 tiers */
#construction-management .sv-cm__cadence-track {
    position: relative;
    height: 56px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
    pointer-events: none;
}

#construction-management .sv-cm__cadence-line {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1100ms cubic-bezier(0.4, 0, 0.1, 1) 0.2s;
}

#construction-management .sv-card--open .sv-cm__cadence-line {
    transform: scaleX(1);
}

#construction-management .sv-cm__cadence-pulse {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-pure-white);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
}

#construction-management .sv-cm__cadence-pulse--daily     { left: 12.5%; transition-delay: 0.6s; }
#construction-management .sv-cm__cadence-pulse--weekly    { left: 37.5%; transition-delay: 0.85s; }
#construction-management .sv-cm__cadence-pulse--monthly   { left: 62.5%; transition-delay: 1.1s; }
#construction-management .sv-cm__cadence-pulse--quarterly { left: 87.5%; transition-delay: 1.35s; }

#construction-management .sv-card--open .sv-cm__cadence-pulse {
    transform: translate(-50%, -50%) scale(1);
    animation: svCmPulseRing 2.4s ease-out infinite 1.6s;
}

#construction-management .sv-card--open .sv-cm__cadence-pulse--monthly {
    background: #C0392B;
}

@keyframes svCmPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

#construction-management .sv-cm__cadence-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
}

#construction-management .sv-cm__cadence-tier {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: clamp(20px, 2.2vw, 28px);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                background 520ms cubic-bezier(0.4, 0, 0.1, 1),
                border-color 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

#construction-management .sv-cm__cadence-tier:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
}

#construction-management .sv-cm__cadence-tier--accent {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.4);
}

#construction-management .sv-cm__cadence-tier--accent:hover {
    background: rgba(192, 57, 43, 0.16);
    border-color: rgba(192, 57, 43, 0.6);
}

#construction-management .sv-cm__cadence-freq {
    display: inline-flex; align-self: flex-start;
    padding: 5px 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
}

#construction-management .sv-cm__cadence-tier--accent .sv-cm__cadence-freq {
    color: var(--color-pure-white);
    background: rgba(192, 57, 43, 0.25);
    border-color: rgba(192, 57, 43, 0.5);
}

#construction-management .sv-cm__cadence-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.15;
    color: var(--color-pure-white);
    margin: 0;
}

#construction-management .sv-cm__cadence-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; flex-direction: column;
    gap: 6px;
}

#construction-management .sv-cm__cadence-tier--accent .sv-cm__cadence-list {
    border-top-color: rgba(255, 255, 255, 0.18);
}

#construction-management .sv-cm__cadence-list li {
    position: relative;
    padding-left: 16px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

#construction-management .sv-cm__cadence-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 8px; height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

/* ---- CM Responsive ---- */
@media (max-width: 1024px) {
    #construction-management .sv-cm__caps          { grid-template-columns: repeat(2, 1fr); }
    #construction-management .sv-cm__cadence-grid  { grid-template-columns: repeat(2, 1fr); }
    #construction-management .sv-cm__cadence-track { display: none; }
}

@media (max-width: 768px) {
    #construction-management .sv-pg__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    #construction-management .sv-cm__caps,
    #construction-management .sv-cm__cadence-grid {
        grid-template-columns: 1fr;
    }
}



/* ============================================
   CARD 04 — PROJECT MANAGEMENT
   Four-phase lifecycle "swim lanes" — restructures
   the 18 service components into PMI-aligned
   phase groupings. Concept-only, no fabricated data.
   ============================================ */

#project-management .sv-pm__lanes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.8vw, 22px);
    margin-top: var(--space-4);
}

/* Outlined FHSA card — matches the preconstruction pillar pattern:
   transparent fill, 1.5px primary stroke, 22px radius, no shadow,
   faint hover wash only. Lane-head's red top accent removed.
   !important needed to beat the SVC-palette enumeration overrides
   later in this file (lines ~9069). */
#project-management .sv-pm__lane {
    background: transparent !important;
    border: 1.5px solid var(--color-text-primary) !important;
    border-radius: 22px !important;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px);
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.6vw, 18px);
    position: relative;
    box-shadow: none !important;
    transition: background 280ms var(--ease-out);
}

#project-management .sv-pm__lane::before { content: none !important; }

#project-management .sv-pm__lane:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none;
    border-color: var(--color-text-primary) !important;
    box-shadow: none !important;
}

#project-management .sv-pm__lane-head {
    display: flex; flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
    padding-bottom: 0;
    border-bottom: none;
}

/* Number → 42×42 circle badge (white fill, 1.5px stroke, centered numeral).
   !important on color to beat the old --svc-accent override. */
#project-management .sv-pm__lane-num {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    border: 1.5px solid var(--color-text-primary) !important;
    background: var(--color-pure-white) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--font-bold);
    letter-spacing: 0;
    color: var(--color-text-primary) !important;
    line-height: 1;
}

#project-management .sv-pm__lane-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#project-management .sv-pm__lane-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* List items — strip the filled pill; let them sit as plain
   icon + label rows inside the outlined card. */
#project-management .sv-pm__lane-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: clamp(8px, 1vw, 12px);
}

#project-management .sv-pm__lane-list li {
    display: flex; align-items: center;
    gap: clamp(14px, 1.6vw, 18px);
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
    font-weight: var(--font-semibold);
    color: var(--color-text-primary) !important;
    transition: opacity 280ms var(--ease-out);
}

#project-management .sv-pm__lane-list li:hover {
    background: transparent !important;
    border-color: transparent !important;
    transform: none;
}

#project-management .sv-pm__lane-list li i {
    flex-shrink: 0;
    font-size: clamp(2rem, 2.6vw, 2.5rem) !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: opacity 280ms var(--ease-out);
}

#project-management .sv-pm__lane-list li:hover i { opacity: 1 !important; }

@media (max-width: 1024px) {
    #project-management .sv-pm__lanes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    #project-management .sv-pm__lanes { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK THEME OVERRIDES — All 21 service-card popup panels
   ============================================================
   Single consolidated block that flips every card's popup
   panel content to the warm dark theme defined in the :root
   token block at the top of this file.

   Reads from these tokens (edit them, not the rules below):
     --svc-bg-1/2/3, --svc-glow, --svc-vignette
     --svc-text, --svc-text-soft, --svc-text-dim, --svc-text-muted
     --svc-accent, --svc-accent-soft
     --svc-glass, --svc-glass-hover, --svc-glass-bright
     --svc-border, --svc-border-strong, --svc-border-subtle
     --svc-text-on-cream

   Internally organized as:
     1.  Panel-inner gradient + section bands
     2.  Section bands: transparent
     3.  Shared sv-pg__ typography
     4.  CTA button
     5.  Card-typed surfaces — broad attribute matches
     6.  Card-specific titles, descriptions, body text
     7.  Lists, panels, feature items
     8.  Card-specific overrides (cards 02–04 styled surfaces)
     9.  Modules grid
     10. Hero text overrides
     11. Panel-inner panel-list bullets
     12. Panel cols
     5a. sv-panel-* sweeping coverage (cards 05–21)
     5b. sv-card__panel-* sweeping coverage
     6a. Generic <h2>–<h6> + panel-col list items
     6b. var-redefinition + white-bg enumeration safety net
   ============================================================ */

/* === 1. Outer panel-inner: flat white surface === */
.sv-card__panel-inner {
    background: var(--svc-bg-1) !important;
    border-color: var(--svc-glass-hover) !important;
}

/* Replace dark grid mesh with subtle cream mesh */
.sv-card__panel-inner::before {
    background-image:
        linear-gradient(rgba(50, 48, 47, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 48, 47, 0.022) 1px, transparent 1px) !important;
}

/* === 2. Section bands: transparent so the gradient shows through === */
.sv-card .sv-pg__section--light,
.sv-card .sv-pg__section--grey,
.sv-card .sv-pg__section--white {
    background: transparent !important;
    border-bottom-color: var(--svc-border-subtle) !important;
}

/* Dark hero band: flat white (transparent so panel-inner shows through) */
.sv-card .sv-pg__section--dark {
    background: transparent !important;
}

/* Card-specific dark sections (CM cadence, etc.) — flat */
#construction-management .sv-cm__cadence-section,
#project-management .sv-pm__owner-section {
    background: transparent !important;
}

/* === 3. Shared sv-pg typography === */
.sv-card .sv-pg__heading {
    color: var(--svc-text) !important;
}

.sv-card .sv-pg__subtext {
    color: var(--svc-text-dim) !important;
}

.sv-card .sv-pg__eyebrow span,
.sv-card .sv-pg__eyebrow--light span {
    color: var(--svc-text-muted) !important;
}

.sv-card .sv-pg__eyebrow::before,
.sv-card .sv-pg__eyebrow--light::before {
    background: var(--svc-accent) !important;
}

.sv-card .sv-pg__stat-num {
    color: var(--svc-text) !important;
}

.sv-card .sv-pg__stat-label {
    color: var(--svc-text-dim) !important;
    opacity: 1 !important;
}

.sv-card .sv-pg__divider {
    background: transparent !important;
}

.sv-card .sv-pg__divider-label {
    color: var(--svc-text-muted) !important;
}

.sv-card .sv-pg__divider-line {
    background: repeating-linear-gradient(
        90deg,
        var(--svc-border-strong) 0, var(--svc-border-strong) 4px,
        transparent 4px, transparent 8px
    ) !important;
}

/* sv-pg__stats container (boxed white card) → dark glass */
.sv-card .sv-pg__stats {
    background: #fff !important;
    border-color: var(--svc-border) !important;
}

.sv-card .sv-pg__stat + .sv-pg__stat::before,
.sv-card .sv-pg__stats::after {
    background: var(--svc-border) !important;
}

/* Stat tick-mark gradient pattern */
.sv-card .sv-pg__stats::after {
    background:
        repeating-linear-gradient(90deg, rgba(50, 48, 47, 0.22) 0px, rgba(50, 48, 47, 0.22) 1px, transparent 1px, transparent 36px) 0 0 / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, rgba(50, 48, 47, 0.22) 0px, rgba(50, 48, 47, 0.22) 1px, transparent 1px, transparent 36px) 0 100% / 100% 4px no-repeat !important;
}

/* sv-pg__detail (parameter cards) → outlined dark glass */
.sv-card .sv-pg__detail {
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

.sv-card .sv-pg__detail:hover {
    background: var(--svc-glass-hover) !important;
}

/* === 4. CTA button: cream fill / dark text → orange on hover === */
.sv-card .sv-pg__cta-btn {
    background: var(--svc-text) !important;
    color: var(--svc-text-on-cream) !important;
    box-shadow: none !important;
}

.sv-card .sv-pg__cta-btn:hover {
    background: var(--svc-accent) !important;
    color: var(--svc-text) !important;
    box-shadow: 0 12px 28px -10px rgba(255, 59, 48, 0.35) !important;
}

.sv-card .sv-pg__cta-section {
    border-top-color: var(--svc-border-subtle) !important;
}

/* === 5. Card-typed surfaces — broad attribute matches for glass treatment === */
/* Each rule targets a specific card-style class root with !important.
   Excludes container/parent classes (--legacy, --accent, hero-image, etc.). */
.sv-card__panel-inner [class*="__compare-card"]:not([class*="--legacy"]):not([class*="--nsani"]),
.sv-card__panel-inner [class*="__benefit"]:not([class*="__benefits"]):not([class*="__benefit-"]),
.sv-card__panel-inner [class*="__pricing-card"],
.sv-card__panel-inner [class*="__cap"]:not([class*="__caps"]):not([class*="__cap-"]):not([class*="__capacity"]),
.sv-card__panel-inner [class*="__step-card"],
.sv-card__panel-inner [class*="__detail-card"],
.sv-card__panel-inner [class*="__matrix__card"],
.sv-card__panel-inner [class*="__panel-matrix__card"],
.sv-card__panel-inner .sv-panel-matrix__card,
.sv-card__panel-inner .sv-panel-modules__item,
.sv-card__panel-inner .sv-card__panel-stat,
.sv-card__panel-inner .sv-card__panel-info-item,
.sv-card__panel-inner .sv-card__panel-faq-item,
.sv-card__panel-inner .sv-card__panel-step,
.sv-card__panel-inner .sv-card__panel-testimonial,
.sv-card__panel-inner .sv-card__panel-highlight,
.sv-card__panel-inner [class*="__timeline"]:not([class*="__timeline-"]),
.sv-card__panel-inner [class*="__cadence-tier"]:not([class*="--accent"]),
.sv-card__panel-inner [class*="__sectors"]:not([class*="__sector-"]) {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* === 6. Card-specific titles, descriptions, body text → cream === */
.sv-card__panel-inner [class*="__compare-title"],
.sv-card__panel-inner [class*="__benefit-title"],
.sv-card__panel-inner [class*="__pricing-title"],
.sv-card__panel-inner [class*="__cap-title"],
.sv-card__panel-inner [class*="__step-title"],
.sv-card__panel-inner [class*="__detail-value"],
.sv-card__panel-inner [class*="__matrix__title"],
.sv-card__panel-inner [class*="__cadence-title"],
.sv-card__panel-inner [class*="__flow-title"],
.sv-card__panel-inner [class*="__owner-title"],
.sv-card__panel-inner [class*="__sector-tag"],
.sv-card__panel-inner [class*="__panel-info-value"],
.sv-card__panel-inner [class*="__panel-stat-val"],
.sv-card__panel-inner [class*="__panel-step-title"],
.sv-card__panel-inner [class*="__panel-faq-q"],
.sv-card__panel-inner [class*="__panel-highlight-title"],
.sv-card__panel-inner [class*="__panel-testimonial-quote"] {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner [class*="__compare-sub"],
.sv-card__panel-inner [class*="__compare-list"],
.sv-card__panel-inner [class*="__compare-list"] li,
.sv-card__panel-inner [class*="__benefit-desc"],
.sv-card__panel-inner [class*="__pricing-body"],
.sv-card__panel-inner [class*="__pricing-tag"],
.sv-card__panel-inner [class*="__pricing-feats"],
.sv-card__panel-inner [class*="__pricing-feats"] li,
.sv-card__panel-inner [class*="__cap-desc"],
.sv-card__panel-inner [class*="__cap-feats"] li,
.sv-card__panel-inner [class*="__step-desc"],
.sv-card__panel-inner [class*="__detail-label"],
.sv-card__panel-inner [class*="__matrix__desc"],
.sv-card__panel-inner [class*="__cadence-list"] li,
.sv-card__panel-inner [class*="__cadence-list"],
.sv-card__panel-inner [class*="__flow-desc"],
.sv-card__panel-inner [class*="__owner-desc"],
.sv-card__panel-inner [class*="__panel-info-label"],
.sv-card__panel-inner [class*="__panel-stat-label"],
.sv-card__panel-inner [class*="__panel-step-desc"],
.sv-card__panel-inner [class*="__panel-faq-a"],
.sv-card__panel-inner [class*="__panel-highlight-desc"],
.sv-card__panel-inner [class*="__panel-testimonial-cite"] {
    color: var(--svc-text-dim) !important;
}

/* === 7. Lists, panels, and feature items inside cards === */
.sv-card__panel-inner [class*="__pricing-feats"] li i,
.sv-card__panel-inner [class*="__compare-list"] li i,
.sv-card__panel-inner [class*="__pricing-mark"] {
    color: var(--svc-text) !important;
    background: rgba(50, 48, 47, 0.05) !important;
}

/* Capability + benefit icons render as standalone icons (no container). */
.sv-card__panel-inner [class*="__cap-icon"],
.sv-card__panel-inner [class*="__benefit-icon"] {
    color: var(--svc-text) !important;
    background: transparent !important;
}

/* Sector / pill tags */
.sv-card__panel-inner [class*="__sector-tag"] {
    background: transparent !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

.sv-card__panel-inner [class*="__sector-tag"]:hover {
    background: var(--svc-accent) !important;
    border-color: var(--svc-accent) !important;
    color: var(--svc-text) !important;
}

/* Phase / step labels — orange accent */
.sv-card__panel-inner [class*="__step-label"],
.sv-card__panel-inner [class*="__phase-marker"],
.sv-card__panel-inner [class*="__cadence-freq"],
.sv-card__panel-inner [class*="__owner-freq"],
.sv-card__panel-inner [class*="__compare-tag"]:not([class*="--accent"]) {
    color: var(--svc-text-dim) !important;
    background: transparent !important;
    border-color: var(--svc-border) !important;
}

/* === 8. Card-specific overrides (cards 02-04 styled surfaces) === */

/* Design-Build: nsani comparison card — clean white with large red checks */
#design-build .sv-db__compare-card--nsani {
    background: #fff !important;
    border-color: var(--svc-border) !important;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-title,
#design-build .sv-db__compare-card--nsani .sv-db__compare-sub,
#design-build .sv-db__compare-card--nsani .sv-db__compare-list li {
    color: var(--svc-text) !important;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-list li {
    align-items: center !important;
    gap: clamp(14px, 1.6vw, 20px) !important;
}

#design-build .sv-db__compare-card--nsani .sv-db__compare-list li i {
    color: var(--svc-accent) !important;
    font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
    margin-top: 0 !important;
    opacity: 1 !important;
}

#design-build .sv-db__compare-tag--accent {
    background: rgba(255, 59, 48, 0.25) !important;
    border-color: var(--svc-accent) !important;
    color: var(--svc-text) !important;
}

/* Design-Build timeline — track + bars */
#design-build .sv-db__timeline {
    background: #fff !important;
    border-color: var(--svc-border) !important;
}

#design-build .sv-db__timeline-model {
    color: var(--svc-text) !important;
}

#design-build .sv-db__timeline-duration,
#design-build .sv-db__timeline-axis > span,
#design-build .sv-db__timeline-note {
    color: var(--svc-text-muted) !important;
}

#design-build .sv-db__timeline-track {
    background: rgba(50, 48, 47, 0.06) !important;
}

#design-build .sv-db__timeline-row--accent .sv-db__timeline-track {
    box-shadow: 0 0 0 1.5px var(--svc-accent), 0 12px 28px -16px rgba(255, 59, 48, 0.4) !important;
    background: rgba(255, 59, 48, 0.1) !important;
}

/* DB pricing mark squares */
#design-build .sv-db__pricing-mark {
    background: var(--svc-text) !important;
    color: var(--svc-text-on-cream) !important;
}

/* Construction-management — comparison matrix */
#construction-management .sv-panel-matrix__label {
    color: var(--svc-text) !important;
}

#construction-management .sv-panel-matrix__letter {
    background: transparent !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

#construction-management .sv-panel-matrix__title { color: var(--svc-text) !important; }
#construction-management .sv-panel-matrix__desc { color: var(--svc-text-dim) !important; }

#construction-management .sv-panel-matrix__trait-label {
    color: var(--svc-text-muted) !important;
}

#construction-management .sv-panel-matrix__dot {
    background: var(--svc-border-subtle) !important;
    border-color: rgba(50, 48, 47, 0.3) !important;
}

#construction-management .sv-panel-matrix__dot--filled {
    background: var(--svc-accent) !important;
    border-color: var(--svc-accent) !important;
}

/* CM cadence — accent monthly tier */
#construction-management .sv-cm__cadence-tier--accent {
    background: var(--svc-accent-soft) !important;
    border-color: rgba(255, 59, 48, 0.5) !important;
}

#construction-management .sv-cm__cadence-tier--accent .sv-cm__cadence-freq {
    background: var(--svc-accent) !important;
    color: var(--color-pure-white) !important;
    border-color: var(--svc-accent) !important;
}

/* Executive Review tier — make the card itself match the other 3 (white bg, dark text).
   Only the "Monthly" badge keeps the red accent so the tile still reads as the
   featured cadence. The earlier "color: white" title override produced poor contrast
   on the soft-pink bg, so the tier surface is now flattened to white. */
#construction-management .sv-cm__cadence-tier--accent {
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
}

#construction-management .sv-cm__cadence-tier--accent .sv-cm__cadence-title {
    color: var(--svc-text) !important;
}

#construction-management .sv-cm__cadence-tier--accent .sv-cm__cadence-list li {
    color: var(--svc-text-soft) !important;
}

#construction-management .sv-cm__cadence-pulse {
    background: var(--svc-text) !important;
}

#construction-management .sv-card--open .sv-cm__cadence-pulse--monthly {
    background: var(--svc-accent) !important;
}

/* CM cadence list bullet ticks */
#construction-management .sv-cm__cadence-list li {
    color: var(--svc-text-soft) !important;
}

#construction-management .sv-cm__cadence-list li::before {
    background: rgba(50, 48, 47, 0.4) !important;
}

/* PM lanes — outlined-card variant uses dark numeral inside a bordered
   white badge; the old red accent stripe/numeral is intentionally dropped. */
#project-management .sv-pm__lane::before { content: none !important; }

/* === 9. Modules grid (used by PM 18-component lane lists, etc.) === */
.sv-card__panel-inner .sv-panel-modules__label {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-panel-modules__item {
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-panel-modules__item:hover {
    background: var(--svc-glass-hover) !important;
}

.sv-card__panel-inner .sv-panel-modules__item i {
    color: var(--svc-text) !important;
    opacity: 0.7;
}

.sv-card__panel-inner .sv-panel-modules__item span {
    color: var(--svc-text) !important;
}

/* === 10. Hero-specific text colors (h3 inline style) honored === */
/* The HTML has style="color:var(--color-pure-white)" on hero h3s, which is white.
   Override to cream for warm-tone cohesion. */
.sv-card .sv-pg__section--dark .sv-pg__heading,
.sv-card .sv-pg__section--dark h3,
.sv-card .sv-pg__section--dark h2 {
    color: var(--svc-text) !important;
}

.sv-card .sv-pg__section--dark .sv-pg__subtext,
.sv-card .sv-pg__section--dark p {
    color: rgba(50, 48, 47, 0.65) !important;
}

/* === 11. Page-inner panel-list bullets === */
.sv-card__panel-inner .sv-card__panel-list li,
.sv-card__panel-inner .sv-card__panel-list li strong {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-list li::before {
    background: var(--svc-accent) !important;
}

.sv-card__panel-inner .sv-card__panel-subtitle {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-lead,
.sv-card__panel-inner .sv-card__panel-main p {
    color: var(--svc-text-soft) !important;
}

/* === 12. Panel cols used by some cards === */
.sv-card__panel-inner .sv-card__panel-col {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-tag {
    background: transparent !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-tag:hover {
    background: var(--svc-accent) !important;
    border-color: var(--svc-accent) !important;
}


/* ──── 5a. sv-panel-* sweeping coverage (cards 05–21) ──── */

/* All sv-panel-* item / card / row / stage surfaces → dark glass */
.sv-card__panel-inner [class*="sv-panel-"][class*="__item"]:not([class*="__items"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__card"]:not([class*="__cards"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__row"]:not([class*="__rows"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__stage"]:not([class*="__stages"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__pill"]:not([class*="__pills"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__chart"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__track"]:not([class*="__tracks"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__ring"] {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* All sv-panel-* titles, labels, names, values → cream */
.sv-card__panel-inner [class*="sv-panel-"][class*="__title"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__label"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__name"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__val"]:not([class*="__value"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__value"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__pct"] {
    color: var(--svc-text) !important;
}

/* All sv-panel-* descriptions / subs → cream-72% */
.sv-card__panel-inner [class*="sv-panel-"][class*="__desc"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__sub"]:not([class*="__subtitle"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__detail"]:not([class*="__details"]) {
    color: var(--svc-text-dim) !important;
}

/* All <strong> inside panel items → cream (handles checklist items) */
.sv-card__panel-inner [class*="sv-panel-"][class*="__item"] strong,
.sv-card__panel-inner [class*="sv-panel-"][class*="__card"] strong,
.sv-card__panel-inner [class*="sv-panel-"][class*="__row"] strong {
    color: var(--svc-text) !important;
}

/* sv-panel-* numbers / letters / initials → orange accent */
.sv-card__panel-inner [class*="sv-panel-"][class*="__num"]:not([class*="__number"]),
.sv-card__panel-inner [class*="sv-panel-"][class*="__letter"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__initial"] {
    color: var(--svc-accent) !important;
}

/* sv-panel-* icons / checks → cream */
.sv-card__panel-inner [class*="sv-panel-"][class*="__icon"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__check"] {
    background: var(--svc-text) !important;
    color: var(--svc-text-on-cream) !important;
}

.sv-card__panel-inner [class*="sv-panel-"][class*="__check"] i {
    color: var(--svc-text-on-cream) !important;
}

/* Pill / tag styling on panel jurisdictions / pills */
.sv-card__panel-inner [class*="sv-panel-"][class*="__pill"] {
    background: transparent !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text) !important;
}

.sv-card__panel-inner [class*="sv-panel-"][class*="__pill"]:not([class*="__pills"]):hover {
    background: var(--svc-accent) !important;
    border-color: var(--svc-accent) !important;
}

/* Bars / tracks fills (used in panel-bars chart) */
.sv-card__panel-inner [class*="sv-panel-"][class*="__fill"] {
    background: var(--svc-text) !important;
}

/* Connectors */
.sv-card__panel-inner [class*="sv-panel-"][class*="__connector"],
.sv-card__panel-inner [class*="sv-panel-"][class*="__divider"] {
    background: rgba(50, 48, 47, 0.4) !important;
}

/* Flow arrows */
.sv-card__panel-inner [class*="sv-panel-"][class*="__arrow"] {
    color: var(--svc-border-strong) !important;
}

/* Trait labels (used in matrix) */
.sv-card__panel-inner [class*="sv-panel-"][class*="__trait-label"] {
    color: var(--svc-text-muted) !important;
}

/* Specs blocks (panel-spec, panel-split) */
.sv-card__panel-inner .sv-panel-spec__value,
.sv-card__panel-inner .sv-panel-split__main,
.sv-card__panel-inner .sv-panel-split__specs {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-panel-spec__label {
    color: var(--svc-text-muted) !important;
}


/* ──── 5b. sv-card__panel-* sweeping coverage ──── */

/* sv-card__panel-step (used by insurance-surety, fabrication-shop, etc.) */
.sv-card__panel-inner .sv-card__panel-step {
    color: var(--svc-text-soft) !important;
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
}

.sv-card__panel-inner .sv-card__panel-step:hover {
    background: var(--svc-glass-hover) !important;
}

.sv-card__panel-inner .sv-card__panel-step strong,
.sv-card__panel-inner .sv-card__panel-step b {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-step span,
.sv-card__panel-inner .sv-card__panel-step span:last-child {
    color: var(--svc-text-soft) !important;
    opacity: 1 !important;
}

/* The number-circle on step cards (first-child span) */
.sv-card__panel-inner .sv-card__panel-step span:first-child {
    background: var(--svc-glass-bright) !important;
    border-color: var(--svc-border-strong) !important;
    color: var(--svc-text-on-cream) !important;
}

/* The inline timeline-dot pseudo */
.sv-card__panel-inner .sv-card__panel-step::before {
    background: var(--svc-text) !important;
    border-color: var(--svc-border-strong) !important;
}

/* Highlight callout (sv-card__panel-highlight) */
.sv-card__panel-inner .sv-card__panel-highlight {
    background: #fff !important;
    border-left-color: var(--svc-accent) !important;
    color: rgba(50, 48, 47, 0.85) !important;
}

.sv-card__panel-inner .sv-card__panel-highlight p,
.sv-card__panel-inner .sv-card__panel-highlight strong {
    color: rgba(50, 48, 47, 0.85) !important;
}

.sv-card__panel-inner .sv-card__panel-highlight strong {
    color: var(--svc-text) !important;
}

/* Generic <strong> / <b> inside any panel section that isn't already handled */
.sv-card__panel-inner section strong,
.sv-card__panel-inner section b {
    color: var(--svc-text) !important;
}

/* All <p> in panel sections that don't have explicit class colors */
.sv-card__panel-inner section p {
    color: var(--svc-text-soft) !important;
}

/* Hero band p uses inline style for opacity tweak — preserve via !important */
.sv-card__panel-inner .sv-pg__section--dark p,
.sv-card__panel-inner .sv-pg__section--dark .sv-pg__subtext {
    color: rgba(50, 48, 47, 0.65) !important;
}

/* Divider label (was hidden anyway, but covers stray uses) */
.sv-card__panel-inner .sv-pg__divider span {
    color: var(--svc-border-strong) !important;
}

/* sv-card__panel-info / panel-info-item residual text */
.sv-card__panel-inner .sv-card__panel-info-label {
    color: var(--svc-text-muted) !important;
}

.sv-card__panel-inner .sv-card__panel-info-value {
    color: var(--svc-text) !important;
}

/* sv-card__panel-faq Q/A pair */
.sv-card__panel-inner .sv-card__panel-faq-q {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-faq-a {
    color: var(--svc-text-dim) !important;
}

/* sv-card__panel-testimonial */
.sv-card__panel-inner .sv-card__panel-testimonial-quote {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-testimonial-cite {
    color: var(--svc-text-muted) !important;
}

/* sv-card__panel-stat container + values */
.sv-card__panel-inner .sv-card__panel-stat {
    background: #fff !important;
    border-color: var(--svc-border) !important;
}

.sv-card__panel-inner .sv-card__panel-stat-val {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-stat-label {
    color: var(--svc-text-muted) !important;
}

/* sv-card__panel-list bullets (already partly handled, reinforce) */
.sv-card__panel-inner .sv-card__panel-list,
.sv-card__panel-inner .sv-card__panel-list li {
    color: var(--svc-text-soft) !important;
}

.sv-card__panel-inner .sv-card__panel-list li strong {
    color: var(--svc-text) !important;
}


/* ──── 6a. Generic <h2>–<h6> + panel-col list items ──── */

.sv-card__panel-inner h2,
.sv-card__panel-inner h3,
.sv-card__panel-inner h4,
.sv-card__panel-inner h5,
.sv-card__panel-inner h6 {
    color: var(--svc-text) !important;
}

/* Dim secondary headings via secondary-color → keep cream-72% */
.sv-card__panel-inner .sv-card__panel-col h4 {
    color: var(--svc-text) !important;
}

/* List items inside panel-col → cream-78% */
.sv-card__panel-inner .sv-card__panel-col .sv-card__panel-list li,
.sv-card__panel-inner .sv-card__panel-col li {
    color: var(--svc-text-soft) !important;
    opacity: 1 !important;
}

/* Inline red accent bars in panel-col headers → orange accent */
.sv-card__panel-inner .sv-card__panel-col > div:first-child[style*="background:#C0392B"],
.sv-card__panel-inner .sv-card__panel-col > div[style*="background:#C0392B"] {
    background: var(--svc-accent) !important;
}

/* Generic sv-card__panel-col surface → glass card */
.sv-card__panel-inner .sv-card__panel-col {
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
}

.sv-card__panel-inner .sv-card__panel-col:hover {
    background: var(--svc-glass-hover) !important;
}


/* ──── 6b. var-redefinition + white-bg enumeration ──── */

/* === STEP 1: Redefine color vars within all panel scopes === */
.sv-card__panel-inner {
    --color-text-primary: var(--svc-text);
    --color-text-secondary: var(--svc-text-dim);
    --color-text-on-dark-muted: var(--svc-text-muted);
    --color-border: var(--svc-border);
    --color-border-dark: rgba(50, 48, 47, 0.3);
    --color-gray-100: rgba(50, 48, 47, 0.12);
    --color-gray-200: rgba(50, 48, 47, 0.25);
    --color-gray-300: var(--svc-text-muted);
    --color-navy: #1a0e08;
}

/* Renovation card uses --np-* tokens, defined elsewhere — leave its scope alone */
#renovation-retrofit .sv-card__panel-inner {
    --color-text-primary: var(--svc-text);
    --color-text-secondary: var(--svc-text-dim);
    --color-border: var(--svc-border);
    --color-gray-300: var(--svc-text-muted);
}

/* === STEP 2: White-bg surfaces — every card-scoped class hit by grep === */
/* Stats containers (5 cards: design-build, CM, lean, preconstruction, eng-group, offsite, vdc) */
#design-build .sv-pg__stats,
#construction-management .sv-pg__stats,
#lean-construction .sv-pg__stats,
#preconstruction .sv-pg__stats,
#engineering-group .sv-card__panel-stats,
#offsite-manufacturing .sv-card__panel-stats,
#vdc .sv-card__panel-stats {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* Stat-cell dividers between stats */
#vdc .sv-card__panel-stat + .sv-card__panel-stat::before,
#offsite-manufacturing .sv-card__panel-stat + .sv-card__panel-stat::before,
#engineering-group .sv-card__panel-stat + .sv-card__panel-stat::before,
#preconstruction .sv-pg__stat + .sv-pg__stat::before,
#lean-construction .sv-pg__stat + .sv-pg__stat::before,
#construction-management .sv-pg__stat + .sv-pg__stat::before,
#design-build .sv-pg__stat + .sv-pg__stat::before {
    background: var(--svc-border) !important;
}

/* Highlight callouts (4 cards: insurance, risk, self-perform, vdc) */
#insurance-surety .sv-card__panel-highlight,
#risk-management .sv-card__panel-highlight,
#self-perform .sv-card__panel-highlight,
#vdc .sv-card__panel-highlight {
    background: #fff !important;
    border-left-color: var(--svc-accent) !important;
    box-shadow: none !important;
}

/* Testimonials (accelerated-payment) */
#accelerated-payment .sv-card__panel-testimonial {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* Metrics grids (accelerated-payment, self-perform) */
#accelerated-payment .sv-panel-metrics,
#self-perform .sv-panel-metrics {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* Bar chart wrapper (cost-estimation) */
#cost-estimation .sv-panel-bars__chart {
    background: #fff !important;
    border-color: var(--svc-border) !important;
    box-shadow: none !important;
}

/* Card 02-04 surfaces I already styled — reinforce with !important enumeration */
#design-build .sv-db__compare-card:not(.sv-db__compare-card--nsani),
#design-build .sv-db__benefit,
#design-build .sv-db__pricing-card,
#design-build .sv-db__timeline,
#construction-management .sv-cm__cap,
#construction-management .sv-cm__cadence-tier:not(.sv-cm__cadence-tier--accent),
#construction-management .sv-panel-matrix__card {
    background: #fff !important;
    border-color: var(--svc-border-strong) !important;
    box-shadow: none !important;
}

/* Flow markers (DB process steps) */
#design-build .sv-panel-db__flow-marker,
.sv-card__panel-inner .sv-panel-db__flow-marker {
    background: var(--svc-glass-bright) !important;
    border-color: rgba(50, 48, 47, 0.6) !important;
    color: var(--svc-text-on-cream) !important;
}

#design-build .sv-card--open .sv-panel-db__flow-marker {
    background: var(--svc-text) !important;
    color: var(--svc-text-on-cream) !important;
}

/* Panel-stat val/label colors (used by 6+ cards) */
.sv-card__panel-inner .sv-card__panel-stat-val,
.sv-card__panel-inner .sv-card__panel-stat-label {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-card__panel-stat-label {
    color: var(--svc-text-muted) !important;
}

/* Panel-metric val/label */
.sv-card__panel-inner .sv-panel-metric__val {
    color: var(--svc-text) !important;
}

.sv-card__panel-inner .sv-panel-metric__label {
    color: var(--svc-text-muted) !important;
}

.sv-card__panel-inner .sv-panel-metric__divider {
    background: var(--svc-border) !important;
}

/* === STEP 3: Hardcoded #fafaf8 / #F5F5F5 light backgrounds === */
/* These appear in inline styles for sub-cards. Use attribute selector. */
.sv-card__panel-inner [style*="background:#fafaf8"],
.sv-card__panel-inner [style*="background: #fafaf8"],
.sv-card__panel-inner [style*="background:#fff"],
.sv-card__panel-inner [style*="background: #fff"],
.sv-card__panel-inner [style*="background:#F5F5F5"],
.sv-card__panel-inner [style*="background: #F5F5F5"] {
    background: #fff !important;
}

/* === STEP 4: Catch-all body text safety net === */
/* Plain text elements without explicit color → cream */
.sv-card__panel-inner section > p:not([class]),
.sv-card__panel-inner section > div > p:not([class]),
.sv-card__panel-inner section li:not([class]) {
    color: var(--svc-text-soft) !important;
}

/* All <strong> / <b> not already targeted → cream solid */
.sv-card__panel-inner strong,
.sv-card__panel-inner b {
    color: var(--svc-text) !important;
}

/* Generic <a> links inside panels */
.sv-card__panel-inner section a:not([class]) {
    color: var(--svc-accent) !important;
}

/* === STEP 5: Inline accent-bar colors (red #C0392B) → orange === */
/* Many cards use red inline-style accent bars. Flip to orange. */
.sv-card__panel-inner [style*="background:#C0392B"],
.sv-card__panel-inner [style*="background: #C0392B"] {
    background: var(--svc-accent) !important;
}

/* === STEP 6: Hero subtext readability boost ===
   Subtext on dark hero was 65% — at small sizes, that reads as washed out.
   Bump to 78% for readability. */
.sv-card__panel-inner .sv-pg__section--dark p,
.sv-card__panel-inner .sv-pg__section--dark .sv-pg__subtext {
    color: var(--svc-text-soft) !important;
}


/* ============================================
   CARD-GRID CONVERSIONS (post-tab-nav cleanup)
   - Offsite Manufacturing (.sv-om__grid)
   - Cost Estimation (.sv-ce__grid)
   - Project Management (.sv-pm__phases-grid)
   ============================================ */

/* Offsite Manufacturing: 4 benefit cards + 8 service cards.
   Same outlined-card pattern used on post-construction / insurance. */
#offsite-manufacturing .sv-om__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

#offsite-manufacturing .sv-om__card {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
    transition: background 280ms var(--ease-out);
}

#offsite-manufacturing .sv-om__card:hover {
    background: rgba(0, 0, 0, 0.03);
}

#offsite-manufacturing .sv-om__card-icon {
    font-size: 3rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#offsite-manufacturing .sv-om__card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#offsite-manufacturing .sv-om__card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* Cost Estimation: 5 deliverable cards. */
#cost-estimation .sv-ce__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

#cost-estimation .sv-ce__card {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    padding: clamp(22px, 2.5vw, 30px) clamp(18px, 2.2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 14px);
    transition: background 280ms var(--ease-out);
}

#cost-estimation .sv-ce__card:hover {
    background: rgba(0, 0, 0, 0.03);
}

#cost-estimation .sv-ce__card-icon {
    font-size: 3rem !important;
    color: var(--color-text-primary) !important;
    background: transparent !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#cost-estimation .sv-ce__card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

#cost-estimation .sv-ce__card-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin: 0;
}

/* Project Management: 4 phase cards in a 2-col grid on wide, 1-col on narrow.
   Inner `.sv-pm__lane` is already styled — this just wraps them. */
#project-management .sv-pm__phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
}