/* ============================================
   SERVICES PAGE — SPA-style interface
   Uses projects-cta dashboard aesthetic for cards
   ============================================ */


/* ============================================================
   SERVICE-CARD PANEL THEME TOKENS
   Single source of truth for the service-card popup dark theme.
   Edit any of these 17 values to retheme every panel below.
   Only consumed by the override blocks at the end of this file
   and by card 01's renovation theme — original card-scoped
   styles are untouched.
   ============================================================ */
:root {
    /* Surface gradient — light wash matching the home page page-explorer */
    --svc-bg-1: #FFFFFF;
    --svc-bg-2: #FAFAFA;
    --svc-bg-3: #F5F3EF;
    --svc-glow: rgba(255, 59, 48, 0.06);
    --svc-vignette: rgba(50, 48, 47, 0.04);

    /* Text — dark on light */
    --svc-text:        #32302F;
    --svc-text-soft:   rgba(50, 48, 47, 0.78);
    --svc-text-dim:    rgba(50, 48, 47, 0.65);
    --svc-text-muted:  rgba(50, 48, 47, 0.5);
    --svc-text-on-cream: #FFFFFF;

    /* Accent — home page red */
    --svc-accent:      #FF3B30;
    --svc-accent-soft: rgba(255, 59, 48, 0.18);

    /* Glass surfaces — subtle dark on white; primary button uses solid dark */
    --svc-glass:        rgba(50, 48, 47, 0.04);
    --svc-glass-hover:  rgba(50, 48, 47, 0.08);
    --svc-glass-bright: #32302F;

    /* Borders — dark on light */
    --svc-border:        rgba(50, 48, 47, 0.15);
    --svc-border-strong: rgba(50, 48, 47, 0.4);
    --svc-border-subtle: rgba(50, 48, 47, 0.08);
}


/* ============================================
   1. HERO — Minimal, centered
   ============================================ */
.sv-hero { position: relative; background: #FFFFFF; overflow: hidden; }

.sv-hero__grid-bg {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg,   transparent 0, transparent 49px, rgba(50,48,47,0.06) 49px, rgba(50,48,47,0.06) 50px),
        repeating-linear-gradient(60deg,  transparent 0, transparent 49px, rgba(50,48,47,0.06) 49px, rgba(50,48,47,0.06) 50px),
        repeating-linear-gradient(-60deg, transparent 0, transparent 49px, rgba(50,48,47,0.06) 49px, rgba(50,48,47,0.06) 50px);
    pointer-events: none;
}
.sv-hero__grid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, #FFFFFF, transparent); z-index: 1; }

.sv-hero--immersive {
    position: relative;
    isolation: isolate;
    background: #FFFFFF;
    overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex;
    align-items: flex-start;
}
/* No scrim — the pastel sky is light enough for dark text. */
/* Full-bleed kaleidoscope: 2×2 grid of the same photo, each quadrant
   mirrored toward the centre so sky bands meet at the horizontal centre
   and reflections meet at the vertical centre. Each quadrant is sized
   (50% + 1px) on both axes to overlap by 1px on the seams — avoids the
   subpixel hairline that shows up on odd-pixel hero dimensions. */
.sv-hero__bg-pair {
    position: absolute; inset: 0;
    z-index: 0;
}
.sv-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Text overlay sits above the photos, centred. */
.sv-hero__inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1400px;
    margin: 0 auto;
    padding: 180px var(--container-padding) clamp(60px, 8vw, 80px);
    text-align: center;
    display: flex;
    justify-content: center;
}
.sv-hero__content { position: relative; max-width: 900px; }
/* Eyebrow — tracked uppercase label flanked by 40px hairline rules, same
   pattern as the homepage hero's "Across USA & Canada" region line. */
.sv-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 1em;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1.05vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--space-6);
}
.sv-hero__eyebrow::before,
.sv-hero__eyebrow::after {
    content: '';
    width: 40px; height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* Title — mixed scale: "What we" plays a small italic modifier, "build" is
   the dominant script anchor. Both stay in the existing two fonts. */
.sv-hero__title {
    display: flex; flex-direction: row;
    align-items: baseline; justify-content: center;
    flex-wrap: wrap;
    gap: 0.25em;
    margin: 0 0 var(--space-8);
}
.sv-hero__line--display {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    text-transform: lowercase;
    transform: translateY(-0.45em); /* baseline-raise so it reads as a label tag */
}
.sv-hero__line--script {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(4rem, 11vw, 8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    position: relative;
    padding-bottom: 0.2em;
}
.sv-hero__line--script::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 0.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M 4,8 C 50,3 130,2 200,6 C 270,10 350,8 396,5 C 350,11 270,15 200,12 C 130,9 50,12 4,13 Z' fill='%23FF1A0F' opacity='0.92'/%3E%3Cpath d='M 12,10 C 70,7 150,6 210,9 C 270,12 360,10 390,8' stroke='%23FF1A0F' stroke-width='1' fill='none' opacity='0.45' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
}

/* Lead reformatted as a stat row — numeric anchors + tracked uppercase
   labels, separated by hairline dividers. Same hierarchy principle as the
   homepage hero: small label words pair with bigger anchor numerals. */
.sv-hero__lead {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    flex-wrap: wrap;
    max-width: none;
    margin: 0 auto;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    line-height: 1.1;
}
.sv-hero__stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.35em;
    position: relative;
    padding: 0 clamp(0.6rem, 1.5vw, 1.4rem);
}
.sv-hero__stat + .sv-hero__stat::before {
    content: '';
    position: absolute;
    left: calc(clamp(1.5rem, 4vw, 3.5rem) * -0.5);
    top: 18%; bottom: 18%;
    width: 1px;
    background: currentColor;
    opacity: 0.25;
}
.sv-hero__stat-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-text-primary);
}
.sv-hero__stat-label {
    font-family: var(--font-body);
    font-size: clamp(0.62rem, 0.95vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
@media (max-width: 900px) {
    .sv-hero__stat:nth-child(3) .sv-hero__stat-num,
    .sv-hero__stat:nth-child(3) .sv-hero__stat-label {
        color: #FFFFFF;
    }
}
.sv-hero__model { width: 100%; height: 100%; display: block; background: transparent; --poster-color: transparent; opacity: 0; transition: opacity 220ms ease-out; position: relative; z-index: 1; }
@media (max-width: 900px) {
    .sv-hero__inner { padding-top: 140px; }
    .sv-hero__line--script::after { left: 10%; width: 80%; }
}

/* Short viewports — tighten the vertical rhythm so the hero doesn't
   waste space above "Our Services" and between the title/stats. */
@media (max-height: 800px) {
    .sv-hero__inner {
        padding-top: 110px;
        padding-bottom: clamp(32px, 5vw, 48px);
    }
    .sv-hero__eyebrow { margin-bottom: var(--space-3); }
    .sv-hero__title   { margin-bottom: var(--space-4); }
}
@media (max-height: 640px) {
    .sv-hero__inner {
        padding-top: 80px;
        padding-bottom: clamp(20px, 4vw, 32px);
    }
    .sv-hero__eyebrow { margin-bottom: var(--space-2); }
    .sv-hero__title   { margin-bottom: var(--space-3); }
}

/* ---- Hero entrance animation (page load) ----
   Cinematic stagger:
   1. Eyebrow fades in with letter-spacing collapse
   2. Title lines mask-reveal upward (text rises from beneath the baseline)
   3. Image curtain-wipes left → right while inner img scales 1.18 → 1 (Ken Burns)
   4. Lead paragraph fades up
   5. Red brush underline draws in left → right
*/

/* Eyebrow: letter-spacing tightens while fading in */
.sv-hero__eyebrow {
    opacity: 0;
    transform: translateY(6px);
    letter-spacing: 0.6em;
    animation: svHeroEyebrow 700ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}

/* Title line is a mask; inner content rises into view */
.sv-hero__line {
    display: inline-block;
    overflow: hidden;
    padding: 0.05em 0.04em;
    margin: -0.05em -0.04em;
}
.sv-hero__line-inner {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
    animation: svHeroLineRise 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sv-hero__line--display .sv-hero__line-inner { animation-delay: 140ms; }
.sv-hero__line--script  .sv-hero__line-inner { animation-delay: 230ms; }

/* Lead paragraph: fade-up after the lines have settled */
.sv-hero__lead {
    opacity: 0;
    transform: translateY(18px);
    animation: svHeroFadeUp 600ms cubic-bezier(0.22, 1, 0.36, 1) 440ms forwards;
}

/* Image: the whole card (image + shadow) lifts in as one piece, so the shadow
   never appears around an empty white card. Inner img keeps a subtle Ken Burns. */
.sv-hero__media {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transform-origin: center bottom;
    will-change: transform, opacity;
    animation: svHeroCardLift 800ms cubic-bezier(0.22, 1, 0.36, 1) 190ms forwards;
}
.sv-hero__media img {
    transform: scale(1.06) translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    animation: svHeroKenBurns 1800ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

/* Brush underline draws in left → right after script line lands.
   Reveal at natural width via clip-path (no horizontal stretching). */
.sv-hero__line--script::after {
    clip-path: inset(0 100% 0 0);
    animation: svHeroBrush 1100ms cubic-bezier(0.22, 1, 0.36, 1) 590ms forwards;
}

@keyframes svHeroEyebrow {
    from { opacity: 0; transform: translateY(6px); letter-spacing: 0.6em; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: 0.35em; }
}
@keyframes svHeroLineRise {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}
@keyframes svHeroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes svHeroCardLift {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes svHeroKenBurns {
    from { transform: scale(1.06) translateZ(0); }
    to   { transform: scale(1) translateZ(0); }
}
@keyframes svHeroBrush {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sv-hero__eyebrow,
    .sv-hero__line-inner,
    .sv-hero__lead,
    .sv-hero__media,
    .sv-hero__media img,
    .sv-hero__line--script::after {
        animation: none;
    }
    .sv-hero__eyebrow         { opacity: 1; transform: none; letter-spacing: 0.3em; }
    .sv-hero__line-inner      { transform: none; }
    .sv-hero__lead            { opacity: 1; transform: none; }
    .sv-hero__media           { opacity: 1; transform: none; }
    .sv-hero__media img       { transform: none; }
    .sv-hero__line--script::after  { clip-path: inset(0 0 0 0); }
}


/* ============================================
   2. STICKY NAV — Category filter tabs
   ============================================ */
.sv-nav {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: transparent;
    border-bottom: none;
    padding: var(--space-4) 0;
}

/* Faded backdrop — pseudo-element sits behind the tabs and gets masked
   at top and bottom so the white/blur dissolves into the page rather
   than ending in a hard rectangle + border line. */
.sv-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.85) 70%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.85) 30%,
        rgba(0, 0, 0, 0.85) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.sv-nav__inner {
    position: relative;
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding);
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    overflow-x: auto; scrollbar-width: none;
}
.sv-nav__inner::-webkit-scrollbar { display: none; }

/* Sliding pill — single morphing indicator behind the active tab.
   House motion: cubic-bezier(0.4, 0, 0.1, 1) at 520ms. */
.sv-nav__indicator {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    background: var(--color-text-primary);
    border: 1.5px solid var(--color-text-primary);
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    transform: translate(0, -50%);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                width 520ms cubic-bezier(0.4, 0, 0.1, 1),
                height 520ms cubic-bezier(0.4, 0, 0.1, 1);
    pointer-events: none;
    z-index: 0;
}

.sv-nav__tab {
    position: relative;
    z-index: 1;
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px; font-family: var(--font-body); font-size: 0.8rem;
    font-weight: var(--font-semibold); letter-spacing: 0.02em;
    color: var(--color-text-primary); background: transparent;
    border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
    cursor: pointer; white-space: nowrap;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.sv-nav__tab:hover { border-color: var(--color-text-primary); }
.sv-nav__tab--active { color: var(--color-pure-white); border-color: transparent; }
.sv-nav__tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 0.8rem; font-weight: var(--font-bold); background: rgba(0,0,0,0.08); border-radius: 100px; transition: background var(--duration-base) var(--ease-out); }
.sv-nav__tab--active .sv-nav__tab-count { background: rgba(255,255,255,0.2); }


/* ============================================
   3. SERVICE GRID — Dashboard-style cards
   Inspired by projects-cta component
   ============================================ */
.sv-grid-section {
    background: #F5F3EF; padding: var(--space-8) 0 var(--section-padding);
    min-height: 60vh;
}

.sv-grid {
    max-width: none; margin: 0; padding: 0 clamp(16px, 2vw, 32px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
@media (max-width: 1100px) {
    .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    /* Mobile: tabs are replaced by 3 auto-scrolling marquee rows (one per
       category), so the sticky tab nav is hidden. */
    .sv-nav { display: none; }

    /* Grid becomes a vertical stack of 3 horizontal marquee rows.
       Each row is populated by services-page.js: cards are grouped by
       data-category into .sv-marquee__track, then aria-hidden clones
       are appended to enable a seamless infinite-loop translation. */
    .sv-grid-section {
        padding-top: var(--space-6);
        padding-bottom: var(--space-4);
        min-height: 0;
    }
    .sv-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0;
    }

    .sv-marquee {
        position: relative;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
                mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    }

    .sv-marquee__track {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        gap: 10px;
        padding: 0 8px;
        animation: svMarqueeLeft 55s linear infinite;
        will-change: transform;
    }
    /* Middle row drifts the opposite direction; outer rows slightly
       different speeds so the three rows don't lock-step. */
    .sv-marquee--row-2 .sv-marquee__track { animation: svMarqueeRight 65s linear infinite; }
    .sv-marquee--row-3 .sv-marquee__track { animation-duration: 60s; }

    /* Tap-friendly: pause when the user touches/hovers a row so they
       can comfortably click a card without it sliding away. */
    .sv-marquee:hover .sv-marquee__track,
    .sv-marquee:focus-within .sv-marquee__track,
    .sv-marquee.is-paused .sv-marquee__track {
        animation-play-state: paused;
    }

    /* Cards inside the marquee — pill cards with consistent width.
       Override the desktop hover/open background swap with a default
       white card so the marquee items have a visible surface. */
    .sv-grid .sv-card {
        flex: 0 0 auto;
        width: 240px;
        background: #FFFFFF;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }
    .sv-grid .sv-card__num { opacity: 1; }
    .sv-grid .sv-card__trigger {
        padding: 18px 18px 18px 44px;
    }
    .sv-grid .sv-card__num {
        left: 14px;
        font-size: 1rem;
    }
    .sv-grid .sv-card__title {
        font-size: 0.95rem;
    }
    .sv-grid .sv-card__heading i {
        font-size: 1.4rem;
    }

    /* Clones inserted for the seamless loop are inert. */
    .sv-grid .sv-card[aria-hidden="true"] {
        pointer-events: none;
    }
}

@keyframes svMarqueeLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes svMarqueeRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sv-marquee__track { animation: none !important; }
}

/* Pause all marquee tracks while a service modal is open so cards
   aren't sliding behind the fixed overlay. */
body.sv-modal-active .sv-marquee__track { animation-play-state: paused; }

/* ---- Card: projects-cta inspired ---- */
.sv-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
    transition: background 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sv-card.is-hovered {
    background: #FFFFFF;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}
.sv-card--open {
    background: #FFFFFF;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}
.sv-card--hidden { display: none; }

/* The hover reveal is JS-managed via .is-hovered (not :hover). The
   matching script in services-page.js only adds .is-hovered on mouseenter
   when the user is not currently scrolling, and removes it from every card
   the moment scroll begins. This prevents the cursor passing under cards
   during scroll from triggering reveals. */

/* ---- Trigger: the number is locked to the left edge (consistent
   X across every card in the grid). The icon + title group sits
   in the middle, horizontally centered in the card. No caption. ---- */
.sv-card__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
    padding-left: clamp(56px, 5vw, 72px);
    padding-right: clamp(56px, 5vw, 72px);
    position: relative;
    background: none; border: none; cursor: pointer; text-align: left;
}

.sv-card__num {
    position: absolute;
    left: clamp(20px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.4vw, 1.75rem);
    font-weight: 500;
    color: rgba(50, 48, 47, 0.45);
    line-height: 1;
    letter-spacing: -0.5px;
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.4, 0, 0.1, 1);
    pointer-events: none;
}
.sv-card.is-hovered .sv-card__num,
.sv-card--open .sv-card__num {
    opacity: 1;
}

.sv-card__heading {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 16px);
}
.sv-card__heading i {
    font-size: clamp(1.75rem, 2.2vw, 2.5rem);
    color: var(--color-text-primary);
    flex-shrink: 0;
    opacity: 0.85;
    line-height: 1;
}

.sv-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0;
    text-align: left;
    white-space: normal;
}


/* ---- Panel ----
   Hidden but pre-rendered, so opening the popup is instant. The card's
   click handler promotes the panel to a fixed-overlay popup (see
   services-modal.css + services-page.js). */
.sv-card__panel {
    max-height: 0;
    overflow: hidden;
}

/* ---- Panel inner — dashboard layout ---- */
.sv-card__panel-inner {
    position: relative;
    padding: var(--space-8) var(--space-8) var(--space-10);
    padding-left: calc(70px + var(--space-8) + var(--space-4));
    display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12);
    border-top: 1px solid var(--color-border);
    max-width: 1400px;
    margin: var(--space-6) auto;
    width: calc(100% - var(--space-12));
    box-sizing: border-box;
    background: #F5F3EF;
    border-radius: var(--radius-lg);
}

/* Grid bg that appears inside expanded panel */
.sv-card__panel-inner::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(50,48,47,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50,48,47,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none; opacity: 0.5;
}

/* ---- Panel text ---- */
.sv-card__panel-main { position: relative; z-index: 1; }

.sv-card__panel-lead {
    font-family: var(--font-heading); font-size: var(--text-lg);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.5px; line-height: var(--leading-snug);
    margin: 0 0 var(--space-5);
}

.sv-card__panel-main p {
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
}

/* ---- Panel details (right side) — track + items style ---- */
.sv-card__panel-details { position: relative; z-index: 1; }

.sv-card__panel-subtitle {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.sv-card__panel-subtitle + .sv-card__panel-subtitle { margin-top: var(--space-8); }

/* List items — with track dots like projects-cta */
.sv-card__panel-list {
    list-style: none; padding: 0; margin: 0;
    position: relative;
    padding-left: var(--space-8);
}

/* Vertical track line */
.sv-card__panel-list::before {
    content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px;
    width: 2px; background: var(--color-gray-100);
}

.sv-card__panel-list li {
    position: relative;
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    padding: var(--space-3) 0;
}

/* Dot on the track */
.sv-card__panel-list li::before {
    content: ''; position: absolute;
    left: calc(-1 * var(--space-8) + 3px);
    top: calc(var(--space-2) + 0.45em);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--color-gray-300);
    z-index: 1;
}

.sv-card__panel-list li strong {
    font-weight: var(--font-semibold); color: var(--color-text-primary);
}

/* ---- Stats row ---- */
.sv-card__panel-stats {
    display: flex; gap: var(--space-6); margin-top: var(--space-6);
    padding-top: var(--space-5); border-top: 1px solid var(--color-border);
}
.sv-card__panel-stat { display: flex; flex-direction: column; gap: 2px; }
.sv-card__panel-stat-val {
    font-family: var(--font-heading); font-size: var(--text-2xl);
    font-weight: var(--font-bold); color: var(--color-text-primary);
    letter-spacing: -0.04em; line-height: 1;
}
.sv-card__panel-stat-label {
    font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-300);
}

/* ---- Process steps — numbered with track ---- */
.sv-card__panel-steps {
    display: flex; flex-direction: column; gap: 0;
    position: relative; padding-left: var(--space-8);
}

/* Vertical track */
.sv-card__panel-steps::before {
    content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px;
    width: 2px; background: var(--color-gray-100);
}

.sv-card__panel-step {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-4) 0;
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    position: relative;
}

/* Dot on track for steps */
.sv-card__panel-step::before {
    content: ''; position: absolute;
    left: calc(-1 * var(--space-8) + 3px);
    top: calc(var(--space-3) + 5px);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--color-gray-300);
    z-index: 1;
}

.sv-card__panel-step span:first-child {
    display: none; /* hide the number — the dot replaces it */
}

.sv-card__panel-step strong { font-weight: var(--font-semibold); color: var(--color-text-primary); }

/* ---- Highlight callout ---- */
.sv-card__panel-highlight {
    background: #fafaf8; border-left: 3px solid var(--color-text-primary);
    padding: var(--space-6) var(--space-6); margin-top: var(--space-6);
}
.sv-card__panel-highlight p {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; line-height: var(--leading-snug); margin: 0;
    font-style: italic;
}

/* ---- Tag pills ---- */
.sv-card__panel-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sv-card__panel-tag {
    padding: 8px 18px; font-family: var(--font-body);
    font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}

/* ---- Info blocks (key-value) ---- */
.sv-card__panel-info {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    margin-top: var(--space-6);
}
.sv-card__panel-info-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-5); background: #fafaf8;
    border: 0.5px solid var(--color-border);
}
.sv-card__panel-info-label {
    font-family: var(--font-body); font-size: 0.8rem;
    font-weight: var(--font-semibold); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-gray-300);
}
.sv-card__panel-info-value {
    font-family: var(--font-heading); font-size: var(--text-lg);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.4px;
}

/* ---- Multi-column grid ---- */
.sv-card__panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ---- Three-column details ---- */
.sv-card__panel-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.sv-card__panel-col h4 { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-4); }

/* ---- FAQ items ---- */
.sv-card__panel-faq { display: flex; flex-direction: column; gap: var(--space-4); }
.sv-card__panel-faq-item { border-bottom: 1px solid rgba(0,0,0,0.04); padding-bottom: var(--space-4); }
.sv-card__panel-faq-item:last-child { border-bottom: none; }
.sv-card__panel-faq-q { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-2); }
.sv-card__panel-faq-a { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0; }

/* ---- Testimonial ---- */
.sv-card__panel-testimonial {
    padding: var(--space-6); background: #fafaf8;
    border-left: 3px solid var(--color-border);
    margin-top: var(--space-6);
}
.sv-card__panel-testimonial blockquote { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-regular); color: var(--color-text-primary); line-height: var(--leading-snug); letter-spacing: -0.3px; font-style: italic; margin: 0 0 var(--space-3); }
.sv-card__panel-testimonial cite { font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; color: var(--color-text-secondary); }

/* ---- CTA button inside panels ---- */
.sv-card__panel-cta {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: 14px 36px; margin-top: var(--space-6);
    font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--color-pure-white); background: var(--color-text-primary);
    border-radius: var(--radius-pill); text-decoration: none;
    transition: background var(--duration-base) var(--ease-out), gap var(--duration-base) var(--ease-out);
}
.sv-card__panel-cta:hover { background: var(--color-navy); gap: var(--space-4); }
.sv-card__panel-cta i { font-size: 1rem; }

/* ============================================
   UNIQUE PANEL LAYOUTS
   Each service type gets its own inner architecture
   ============================================ */

/* ---- Override: full-width panels (no two-col default) ---- */
.sv-card__panel-inner--renovation,
.sv-card__panel-inner--designbuild {
    display: flex; flex-direction: column; gap: var(--space-6);
    grid-template-columns: none;
}

/* ============================================
   RENOVATION PANEL — Full-page-in-a-dropdown
   Styled to match careers page design language:
   Courier New labels, ghost text, tick marks,
   alternating #fafaf8 / #1a1814 / #F5F5F5 bands
   ============================================ */

/* --- Reset panel-inner: sections own their padding --- */
.sv-card__panel-inner--renovation {
    padding: 0 !important;
    gap: 0 !important;
}

/* --- Shared section shell --- */
.sv-reno__s { position: relative; z-index: 1; width: 100%; }

/* --- Eyebrow: Courier New monospace label (careers pattern) --- */
.sv-reno__eyebrow {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.sv-reno__eyebrow::before {
    content: ''; width: 40px; height: 2px;
    background: var(--color-text-primary); flex-shrink: 0;
}

.sv-reno__eyebrow span {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sv-reno__eyebrow--light::before { background: rgba(255,255,255,0.3); }
.sv-reno__eyebrow--light span { color: rgba(255,255,255,0.4); }

/* ============================
   SECTION 1: HERO — dark warm band (#1a1814)
   Matches cr-profiles / cr-timeline dark sections
   ============================ */
.sv-reno__s--hero {
    background: #1a1814;
    padding: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 64px);
    overflow: hidden;
    isolation: isolate;
}

/* Concentric ripples for atmosphere — same pattern as resilience/standards */
.sv-reno__hero-ripples { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sv-reno__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: svRenoRipple 9s ease-in-out infinite; }
.sv-reno__hero-circle--1 { width: 30vw; height: 30vw; }
.sv-reno__hero-circle--2 { width: 55vw; height: 55vw; animation-delay: 0.6s; }
.sv-reno__hero-circle--3 { width: 80vw; height: 80vw; animation-delay: 1.2s; }
@keyframes svRenoRipple { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }

/* Blueprint grid overlay */
.sv-reno__s--hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Ghost watermark */
.sv-reno__s--hero::after {
    content: 'R&R';
    position: absolute; right: clamp(24px, 4vw, 64px); top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-heading);
    font-size: clamp(6rem, 14vw, 12rem);
    font-weight: 800;
    color: var(--color-pure-white);
    opacity: 0.03;
    line-height: 1; pointer-events: none; white-space: nowrap;
}

.sv-reno__headline {
    position: relative; z-index: 1;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 400;
    color: var(--color-pure-white);
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 var(--space-5);
    max-width: 600px;
}

.sv-reno__subhead {
    position: relative; z-index: 1;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin: 0;
    max-width: 520px;
}

/* ============================
   SECTION 2: STATS — off-white band (#fafaf8)
   Matches cr-tracks / cr-benefits light sections
   ============================ */
.sv-reno__s--stats {
    background: #fafaf8;
    padding: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 64px);
}

.sv-reno__stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    position: relative;
    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);
}

.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);
}

/* Tick marks softened — opacity 0.35, lighter color */
.sv-reno__stats-grid::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
    background:
        repeating-linear-gradient(90deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 0 0 / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 0 100% / 100% 4px no-repeat;
}

.sv-reno__stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    padding: clamp(28px, 3.5vw, 44px) var(--space-4);
    position: relative;
    z-index: 1;
}

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

.sv-reno__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;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.sv-card--open .sv-reno__stat-num { opacity: 1; transform: translateY(0); }
.sv-reno__stat:nth-child(1) .sv-reno__stat-num { transition-delay: 0.1s; }
.sv-reno__stat:nth-child(2) .sv-reno__stat-num { transition-delay: 0.18s; }
.sv-reno__stat:nth-child(3) .sv-reno__stat-num { transition-delay: 0.26s; }
.sv-reno__stat:nth-child(4) .sv-reno__stat-num { transition-delay: 0.34s; }

.sv-reno__stat-label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color-text-secondary); opacity: 0.5;
}

/* ============================
   SECTION 3: ABOUT — grey band (#F5F5F5)
   Two-col editorial like cr-split
   ============================ */
.sv-reno__s--about {
    background: #F5F5F5;
    padding: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 64px);
}

.sv-reno__about-grid {
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: clamp(48px, 6vw, 80px);
    align-items: start;
}

.sv-reno__about-text p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-5);
}

.sv-reno__about-text p:last-child { margin-bottom: 0; }

.sv-reno__about-details {
    display: flex; flex-direction: column; gap: var(--space-3);
}

.sv-reno__detail-card {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: clamp(18px, 2.2vw, 26px);
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 22px;
    transition: background 280ms var(--ease-out);
}

.sv-reno__detail-card:hover {
    background: rgba(0, 0, 0, 0.03);
}

.sv-reno__detail-card > i {
    font-size: 1.4rem;
    color: var(--color-text-primary);
    opacity: 0.55;
    flex-shrink: 0; margin-top: 2px;
}

.sv-reno__detail-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: 5px;
}

.sv-reno__detail-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;
}

/* ============================
   LIFECYCLE DIAGRAM — CSS-only visual
   ============================ */
.sv-reno__s--diagram {
    background: #fafaf8;
    padding: clamp(40px, 5vw, 56px) clamp(32px, 4vw, 64px);
    border-top: 1px solid rgba(10,17,25,0.06);
}

/* --- Flow nodes --- */
.sv-reno__diagram {
    display: flex; align-items: center;
    gap: 0;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.sv-reno__diagram-node {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3);
    position: relative; z-index: 1;
}

.sv-reno__diagram-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--color-text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--duration-base) var(--ease-out);
}

.sv-reno__diagram-icon i {
    font-size: 2.1rem;
    color: var(--color-text-primary);
    transition: color var(--duration-base) var(--ease-out);
}

.sv-reno__diagram-node:hover .sv-reno__diagram-icon {
    border-color: var(--color-text-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.sv-reno__diagram-node:hover .sv-reno__diagram-icon i {
    color: var(--color-text-primary);
}

/* Active/highlighted node */
.sv-reno__diagram-node--active .sv-reno__diagram-icon {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

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

.sv-reno__diagram-label {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* --- Connectors between nodes --- */
.sv-reno__diagram-connector {
    flex: 0.6;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        #c8c8c8 0, #c8c8c8 6px,
        transparent 6px, transparent 12px
    );
    margin-top: -24px; /* align with icon center */
}

/* --- Gantt-style bars below --- */
.sv-reno__diagram-bars {
    display: flex; flex-direction: column; gap: var(--space-3);
}

.sv-reno__diagram-bar {
    display: flex; align-items: center; gap: var(--space-4);
    height: 28px;
}

.sv-reno__diagram-bar-label {
    flex: 0 0 140px;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-text-secondary); opacity: 0.6;
    text-align: right;
}

.sv-reno__diagram-bar-fill {
    height: 6px;
    background: var(--color-text-primary);
    border-radius: 3px;
    opacity: 0.15;
    position: relative;
    transition: opacity 0.3s var(--ease-out);
}

.sv-reno__diagram-bar:hover .sv-reno__diagram-bar-fill {
    opacity: 0.3;
}

.sv-reno__diagram-bar-fill--offset {
    background: var(--color-text-primary);
    opacity: 0.25;
}

.sv-reno__diagram-bar-fill--full {
    background: var(--color-text-primary);
    opacity: 0.08;
}

/* Diagram responsive */
@media (max-width: 768px) {
    .sv-reno__diagram-icon { width: 44px; height: 44px; }
    .sv-reno__diagram-icon i { font-size: 1.1rem; }
    .sv-reno__diagram-connector { margin-top: -20px; }
    .sv-reno__diagram-bar-label { flex: 0 0 100px; font-size: 0.55rem; }
}

@media (max-width: 600px) {
    .sv-reno__diagram { flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
    .sv-reno__diagram-connector { display: none; }
    .sv-reno__diagram-node { flex: 0 0 auto; }
    .sv-reno__diagram-bars { display: none; }
}

/* ============================
   SECTION 4: PROCESS — dark band (#1a1814)
   Matches cr-timeline section
   ============================ */
.sv-reno__s--process {
    background: #1a1814;
    padding: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 64px);
    overflow: hidden;
}

/* Grid bg */
.sv-reno__s--process::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sv-reno__process-grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
}

.sv-reno__step-card {
    padding: clamp(22px, 2.5vw, 32px);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 22px;
    transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out);
}

.sv-reno__step-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.7);
}

.sv-reno__step-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: var(--space-3);
}

.sv-reno__step-title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-weight: var(--font-regular);
    color: var(--color-pure-white);
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 var(--space-3);
}

.sv-reno__step-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    margin: 0;
}

/* ============================
   DASHED DIVIDER between process and CTA
   ============================ */
.sv-reno__divider {
    background: #fafaf8;
    padding: clamp(16px, 2vw, 28px) clamp(32px, 4vw, 64px);
    display: flex; align-items: center; gap: var(--space-6);
}

.sv-reno__divider-line {
    flex: 1; height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(10,17,25,0.15) 0, rgba(10,17,25,0.15) 4px,
        transparent 4px, transparent 8px
    );
}

.sv-reno__divider-label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--color-text-secondary); opacity: 0.5;
    white-space: nowrap;
}

/* ============================
   SECTION 5: CTA — off-white band
   Matches cr-hub-hero CTA style
   ============================ */
.sv-reno__s--cta {
    background: #F5F5F5;
    padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px);
    border-top: 1px solid rgba(10,17,25,0.1);
}

.sv-reno__cta-grid {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-8); flex-wrap: wrap;
}

.sv-reno__sector-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sv-reno__sector-tag {
    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);
    border: 1.5px solid var(--color-text-primary);
    border-radius: 999px;
    transition: background 280ms var(--ease-out);
}

.sv-reno__sector-tag:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sv-reno__cta-btn {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: 14px 32px;
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    border-radius: 100px; text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}

.sv-reno__cta-btn:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.sv-reno__cta-btn i { font-size: 0.9rem; }

/* ============================
   RENOVATION — Responsive
   ============================ */
@media (max-width: 900px) {
    .sv-reno__stats-grid { grid-template-columns: repeat(2, 1fr); }
    .sv-reno__stat:nth-child(3)::before { display: none; }
    .sv-reno__about-grid { gap: clamp(32px, 4vw, 48px); }
    .sv-reno__process-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .sv-reno__s--hero::after { display: none; }
    .sv-reno__headline { font-size: 1.5rem; }
    .sv-reno__about-grid { grid-template-columns: 1fr; }
    .sv-reno__process-grid { grid-template-columns: repeat(2, 1fr); }
    .sv-reno__cta-grid { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .sv-reno__stats-grid { grid-template-columns: 1fr 1fr; }
    .sv-reno__about-details { gap: var(--space-2); }
    .sv-reno__process-grid { grid-template-columns: 1fr; }
}


/* ============================================
   SHARED PAGE-IN-A-POPUP SYSTEM (sv-pg__)
   Used by panels 02–21 for consistent
   full-webpage section bands
   ============================================ */

/* --- Reset panel inner when using sv-pg --- */
.sv-pg {
    padding: 0 !important;
    gap: 0 !important;
}

/* --- Section bands --- */
.sv-pg__section {
    position: relative; z-index: 1; width: 100%;
    padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 64px);
}

.sv-pg__section--dark {
    background: #1a1814;
    overflow: hidden;
}

/* Blueprint grid on dark sections */
.sv-pg__section--dark::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sv-pg__section--light { background: #fafaf8; }
.sv-pg__section--grey { background: #F5F5F5; }
.sv-pg__section--white { background: #fff; }

/* --- Eyebrow label (Courier New, line prefix) --- */
.sv-pg__eyebrow {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-6);
    position: relative; z-index: 1;
}

.sv-pg__eyebrow::before {
    content: ''; width: 40px; height: 2px;
    background: var(--color-text-primary); flex-shrink: 0;
}

.sv-pg__eyebrow span {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sv-pg__eyebrow--light::before { background: rgba(255,255,255,0.3); }
.sv-pg__eyebrow--light span { color: rgba(255,255,255,0.4); }

/* --- Section heading --- */
.sv-pg__heading {
    position: relative; z-index: 1;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin: 0 0 var(--space-5);
    max-width: 680px;
}

/* --- Section subtext --- */
.sv-pg__subtext {
    position: relative; z-index: 1;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 580px;
}

/* --- Stats grid (tick-mark bordered) --- */
.sv-pg__stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border: 0.5px solid #c8c8c8;
    position: relative; overflow: hidden;
}

.sv-pg__stats--three { grid-template-columns: repeat(3, 1fr); }

/* Tick marks */
.sv-pg__stats::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 4px no-repeat;
}

.sv-pg__stat {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center;
    padding: clamp(24px, 3vw, 40px) var(--space-4);
    position: relative;
}

.sv-pg__stat + .sv-pg__stat::before {
    content: ''; position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 0.5px; background: #c8c8c8;
}

.sv-pg__stat-num {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tighter);
    line-height: 1;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.sv-card--open .sv-pg__stat-num { opacity: 1; transform: translateY(0); }
.sv-pg__stat:nth-child(1) .sv-pg__stat-num { transition-delay: 0.1s; }
.sv-pg__stat:nth-child(2) .sv-pg__stat-num { transition-delay: 0.18s; }
.sv-pg__stat:nth-child(3) .sv-pg__stat-num { transition-delay: 0.26s; }
.sv-pg__stat:nth-child(4) .sv-pg__stat-num { transition-delay: 0.34s; }

.sv-pg__stat-label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color-text-secondary); opacity: 0.5;
}

/* --- Body text inside sections --- */
.sv-pg__body-text {
    position: relative; z-index: 1;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 600px;
}

.sv-pg__body-text--light {
    color: rgba(255,255,255,0.55);
}

/* --- Divider --- */
.sv-pg__divider {
    background: #fafaf8;
    padding: clamp(16px, 2vw, 28px) clamp(32px, 4vw, 64px);
    display: flex; align-items: center; justify-content: center; gap: var(--space-6);
    max-width: 600px;
    margin: 0 auto;
}

.sv-pg__divider-line {
    flex: 1; height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(10,17,25,0.15) 0, rgba(10,17,25,0.15) 4px,
        transparent 4px, transparent 8px
    );
}

.sv-pg__divider-label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--color-text-secondary); opacity: 0.5;
    white-space: nowrap;
}

/* --- CTA section --- */
.sv-pg__cta-section {
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid rgba(10,17,25,0.06);
    padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 32px);
}

.sv-pg__cta-btn {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 32px 72px;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    border-radius: 100px; text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
}

.sv-pg__cta-btn:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.sv-pg__cta-btn i { font-size: 1.9rem; }

/* --- Shared responsive --- */
@media (max-width: 900px) {
    .sv-pg__stats { grid-template-columns: repeat(2, 1fr); }
    .sv-pg__stats--three { grid-template-columns: repeat(3, 1fr); }
    .sv-pg__stat:nth-child(3)::before { display: none; }
}

@media (max-width: 768px) {
    .sv-pg__heading { font-size: 1.4rem; }
    .sv-pg__cta-section { justify-content: center; }
}

@media (max-width: 600px) {
    .sv-pg__stats { grid-template-columns: 1fr 1fr; }
    .sv-pg__stats--three { grid-template-columns: 1fr 1fr; }
}


/* ============================================
   DESIGN-BUILD PANEL — Premium Redesign
   ============================================ */

/* --- Zone 1: Metrics Grid --- */
.sv-panel-db__metrics {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0 calc(-1 * (70px + var(--space-8) + var(--space-4)));
    padding: var(--space-6);
    background: var(--color-navy);
    border-radius: var(--radius-md);
}

.sv-panel-db__metric-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center;
    padding: var(--space-6) var(--space-4);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
}

.sv-panel-db__metric-val {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: var(--font-bold);
    color: var(--color-pure-white);
    letter-spacing: var(--tracking-tighter);
    line-height: 1;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.sv-card--open .sv-panel-db__metric-val { opacity: 1; transform: translateY(0); }
.sv-panel-db__metric-card:nth-child(1) .sv-panel-db__metric-val { transition-delay: 0.1s; }
.sv-panel-db__metric-card:nth-child(2) .sv-panel-db__metric-val { transition-delay: 0.18s; }
.sv-panel-db__metric-card:nth-child(3) .sv-panel-db__metric-val { transition-delay: 0.26s; }
.sv-panel-db__metric-card:nth-child(4) .sv-panel-db__metric-val { transition-delay: 0.34s; }

.sv-panel-db__metric-label {
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-text-on-dark-muted);
}

/* --- Zone 2: Body (Narrative + Sidebar) --- */
.sv-panel-db__body {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: var(--space-10);
    padding: var(--space-10) 0;
}

.sv-panel-db__lead {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-5);
}

.sv-panel-db__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
}

.sv-panel-db__sidebar {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.sv-panel-db__sidebar-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-5) var(--space-5);
    background: #fafaf8;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--ease-out);
}

.sv-panel-db__sidebar-item:hover { border-color: var(--color-gray-300); }

.sv-panel-db__sidebar-label {
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-gray-300);
}

.sv-panel-db__sidebar-val {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

/* --- Zone 3: Process Flow --- */
.sv-panel-db__flow {
    position: relative; z-index: 1;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.sv-panel-db__flow-label {
    font-family: var(--font-body);
    font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-gray-300);
    margin: 0 0 var(--space-6);
}

.sv-panel-db__flow-track {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    position: relative;
}

/* Connecting line behind markers */
.sv-panel-db__flow-track::before {
    content: ''; position: absolute;
    top: 20px;
    left: calc(10% + 6px); right: calc(10% + 6px);
    height: 2px; background: var(--color-gray-100);
}

/* Animated accent line */
.sv-card--open .sv-panel-db__flow-track::after {
    content: ''; position: absolute;
    top: 20px;
    left: calc(10% + 6px); right: calc(10% + 6px);
    height: 2px; background: #C0392B;
    transform-origin: left; transform: scaleX(0);
    animation: svDbFillTrack 1s 0.3s var(--ease-out-expo) forwards;
}

@keyframes svDbFillTrack { to { transform: scaleX(1); } }

.sv-panel-db__flow-stage {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--space-3);
    position: relative;
}

.sv-panel-db__flow-marker {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-pure-white);
    border: 2px solid var(--color-gray-200);
    font-family: var(--font-heading);
    font-size: 0.75rem; font-weight: var(--font-bold);
    color: var(--color-gray-300); z-index: 1;
    transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.sv-card--open .sv-panel-db__flow-marker {
    border-color: #C0392B;
    color: var(--color-text-primary);
    box-shadow: 0 0 0 5px rgba(192, 57, 43, 0.1);
}

.sv-panel-db__flow-title {
    font-family: var(--font-heading);
    font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--color-text-primary); letter-spacing: -0.3px;
    margin: 0;
}

.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: 160px; margin: 0 auto;
}

/* --- Design-Build Responsive --- */
@media (max-width: 900px) {
    .sv-panel-db__metrics {
        grid-template-columns: repeat(2, 1fr);
        margin-left: calc(-1 * var(--space-6));
        margin-right: calc(-1 * var(--space-6));
        margin-top: calc(-1 * var(--space-8));
    }
}

@media (max-width: 768px) {
    .sv-panel-db__metrics {
        grid-template-columns: repeat(2, 1fr);
        margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-6)) 0;
        margin-left: calc(-1 * var(--space-6));
        padding: var(--space-5);
    }
    .sv-panel-db__metric-val { font-size: clamp(1.6rem, 3vw, 2.2rem); }
    .sv-panel-db__body {
        grid-template-columns: 1fr; gap: var(--space-8);
        padding: var(--space-8) 0;
    }
    .sv-panel-db__sidebar {
        grid-template-columns: 1fr 1fr;
    }
    .sv-panel-db__flow-track {
        grid-template-columns: 1fr; gap: var(--space-4);
    }
    .sv-panel-db__flow-track::before,
    .sv-card--open .sv-panel-db__flow-track::after {
        top: 20px; bottom: 20px;
        left: 20px; right: auto;
        width: 2px; height: auto;
    }
    .sv-panel-db__flow-stage {
        flex-direction: row; text-align: left;
        gap: var(--space-4); align-items: flex-start;
    }
    .sv-panel-db__flow-desc { max-width: none; margin: 0; }
}

@media (max-width: 600px) {
    .sv-panel-db__metrics { grid-template-columns: 1fr 1fr; }
    .sv-panel-db__sidebar { grid-template-columns: 1fr; }
}


/* ---- PHASE TIMELINE (Renovation — legacy, used as reference) ---- */
.sv-panel-phases {
    position: relative; z-index: 1;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.sv-panel-phases__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-6);
}

.sv-panel-phases__track {
    display: flex; align-items: flex-start; gap: 0;
    position: relative;
}

/* Horizontal line connecting all phases */
.sv-panel-phases__track::before {
    content: ''; position: absolute;
    top: 7px; left: 7px; right: 7px;
    height: 2px; background: var(--color-gray-100);
}

.sv-card--open .sv-panel-phases__track::after {
    content: ''; position: absolute;
    top: 7px; left: 7px; right: 7px;
    height: 2px; background: #C0392B;
    transform-origin: left; transform: scaleX(0);
    animation: svFillTrack 0.8s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes svFillTrack {
    to { transform: scaleX(1); }
}

.sv-panel-phase {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--space-2); position: relative;
}

.sv-panel-phase__marker {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--color-gray-300);
    z-index: 1; flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s;
}

.sv-card--open .sv-panel-phase__marker {
    background: #C0392B; border-color: #C0392B;
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.15);
}

.sv-panel-phase__name {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px;
}

.sv-panel-phase__detail {
    font-family: var(--font-body); font-size: 0.75rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    max-width: 160px;
}

/* ---- METRICS BAR (Design-Build) ---- */
.sv-panel-metrics {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-6); position: relative; z-index: 1;
    padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border);
}

.sv-panel-metric {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
}

.sv-panel-metric__val {
    font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: var(--font-bold); color: var(--color-text-primary);
    letter-spacing: -0.04em; line-height: 1;
}

.sv-panel-metric__label {
    font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-300);
}

.sv-panel-metric__divider {
    width: 1px; height: 32px; background: var(--color-border);
}

/* ---- FLOW DIAGRAM (Design-Build) ---- */
.sv-panel-flow {
    display: flex; align-items: flex-start;
    gap: 0; position: relative; z-index: 1;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.sv-panel-flow__stage {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
}

.sv-panel-flow__num {
    font-family: var(--font-heading); font-size: var(--text-sm);
    font-weight: var(--font-bold); color: rgba(50,48,47,0.15);
}

.sv-panel-flow__title {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; margin: 0;
}

.sv-panel-flow__desc {
    font-family: var(--font-body); font-size: 0.75rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

.sv-panel-flow__arrow {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--space-1); color: #C0392B; font-size: 0.9rem;
    flex-shrink: 0; margin-top: var(--space-6);
    opacity: 0.5;
}

/* ---- SPLIT: narrative + specs (shared) ---- */
.sv-panel-split {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: var(--space-8); position: relative; z-index: 1;
}

.sv-panel-split__main { }
.sv-panel-split__main .sv-card__panel-lead { margin-bottom: var(--space-4); }
.sv-panel-split__main p { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0 0 var(--space-4); }

.sv-panel-split__specs {
    display: flex; flex-direction: column; gap: 0;
}

.sv-panel-spec {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.sv-panel-spec:last-child { border-bottom: none; }

.sv-panel-spec__label {
    font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-300);
}

.sv-panel-spec__value {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; text-align: right;
}

/* ---- PANEL FOOTER ---- */
.sv-panel-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); position: relative; z-index: 1;
    padding-top: var(--space-5); border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

/* ---- Responsive for unique layouts ---- */
@media (max-width: 768px) {
    .sv-panel-phases__track { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .sv-panel-phases__track::before { top: 7px; bottom: 7px; left: 7px; right: auto; width: 2px; height: auto; }
    .sv-panel-phase { flex-direction: row; text-align: left; gap: var(--space-3); }
    .sv-panel-phase__detail { max-width: none; }

    .sv-panel-flow { flex-direction: column; gap: var(--space-2); }
    .sv-panel-flow__arrow { transform: rotate(90deg); padding: 0; margin: 0; }

    .sv-panel-metrics { flex-wrap: wrap; gap: var(--space-4); }
    .sv-panel-metric__divider { display: none; }

    .sv-panel-split { grid-template-columns: 1fr; }
}


/* ---- Responsive ---- */
@media (max-width: 900px) {
    .sv-card__trigger { grid-template-columns: 40px 1fr auto; }
    .sv-card__cat { display: none; }
    .sv-card__num { font-size: var(--text-base); }
    .sv-card__title { font-size: var(--text-base); }
    .sv-card__panel-inner { grid-template-columns: 1fr; padding-left: var(--space-6); }
}

@media (max-width: 600px) {
    .sv-card__trigger { grid-template-columns: 1fr auto; gap: var(--space-3); }
    .sv-card__num { display: none; }
    .sv-card__panel-stats { flex-wrap: wrap; }
    .sv-card__panel-grid { grid-template-columns: 1fr; }
    .sv-card__panel-info { grid-template-columns: 1fr; }
    .sv-card__panel-cols { grid-template-columns: 1fr; }
}


/* ---- Override: full-width panels for new unique layouts ---- */
.sv-card__panel-inner--cm,
.sv-card__panel-inner--pm,
.sv-card__panel-inner--lean,
.sv-card__panel-inner--civil,
.sv-card__panel-inner--precon,
.sv-card__panel-inner--cost,
.sv-card__panel-inner--permit,
.sv-card__panel-inner--qa,
.sv-card__panel-inner--postcon,
.sv-card__panel-inner--payment,
.sv-card__panel-inner--fab,
.sv-card__panel-inner--insurance,
.sv-card__panel-inner--offsite,
.sv-card__panel-inner--risk,
.sv-card__panel-inner--spo,
.sv-card__panel-inner--supply,
.sv-card__panel-inner--eng,
.sv-card__panel-inner--techserv,
.sv-card__panel-inner--vdc {
    display: flex; flex-direction: column; gap: var(--space-6);
    grid-template-columns: none;
}


/* ============================================
   COMPARISON MATRIX (Construction Management)
   ============================================ */
.sv-panel-matrix { position: relative; z-index: 1; }

.sv-panel-matrix__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.sv-panel-matrix__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3);
}

.sv-panel-matrix__card {
    padding: var(--space-4); background: #fafaf8;
    border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: var(--space-2);
}

.sv-panel-matrix__letter {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid #C0392B; background: transparent;
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-bold); color: var(--color-text-primary);
    flex-shrink: 0;
}

.sv-panel-matrix__title {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; margin: 0; line-height: var(--leading-snug);
}

.sv-panel-matrix__desc {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

.sv-panel-matrix__traits { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }

.sv-panel-matrix__trait {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
}

.sv-panel-matrix__trait-label {
    font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-300);
}

.sv-panel-matrix__trait-dots { display: flex; gap: 4px; }

.sv-panel-matrix__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-gray-100); border: 1px solid var(--color-border);
}

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

@media (max-width: 900px) {
    .sv-panel-matrix__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .sv-panel-matrix__grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================
   MODULE GRID (Project Management)
   ============================================ */
.sv-panel-modules { position: relative; z-index: 1; }

.sv-panel-modules__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-5);
}

.sv-panel-modules__grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4);
}

.sv-panel-modules__grid--compact {
    grid-template-columns: repeat(5, 1fr);
}

.sv-panel-modules__item {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); padding: var(--space-5) var(--space-3);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md); text-align: center;
    transition: border-color 0.2s ease;
}

.sv-panel-modules__item:hover { border-color: var(--color-gray-300); }

.sv-panel-modules__item i {
    font-size: 1.5rem; color: var(--color-text-primary); opacity: 0.5;
}

.sv-panel-modules__item span {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.04em; color: var(--color-text-secondary);
    line-height: var(--leading-snug);
}

@media (max-width: 900px) {
    .sv-panel-modules__grid { grid-template-columns: repeat(4, 1fr); }
    .sv-panel-modules__grid--compact { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .sv-panel-modules__grid { grid-template-columns: repeat(3, 1fr); }
    .sv-panel-modules__grid--compact { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================
   LEAN TOOLS (Lean Construction)
   ============================================ */
.sv-panel-tools { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

.sv-panel-tools__card {
    padding: var(--space-5) var(--space-4);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: var(--space-2);
}

.sv-panel-tools__initial {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-md);
    border: 2px solid #C0392B; background: transparent;
    font-family: var(--font-heading); font-size: var(--text-lg);
    font-weight: var(--font-bold); color: var(--color-text-primary);
    flex-shrink: 0;
}

.sv-panel-tools__title {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; margin: 0;
}

.sv-panel-tools__desc {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

.sv-panel-tools__outcomes {
    position: relative; z-index: 1;
    display: flex; gap: var(--space-6); align-items: center;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.sv-panel-tools__outcome {
    display: flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-body); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-secondary);
}

.sv-panel-tools__arrow {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 0.9rem; font-weight: var(--font-bold);
    flex-shrink: 0;
}

.sv-panel-tools__arrow--up { background: rgba(34,197,94,0.1); color: #22c55e; }
.sv-panel-tools__arrow--down { background: rgba(239,68,68,0.1); color: #ef4444; }

@media (max-width: 768px) {
    .sv-panel-tools { grid-template-columns: 1fr 1fr; }
    .sv-panel-tools__outcomes { flex-wrap: wrap; gap: var(--space-4); }
}
@media (max-width: 480px) {
    .sv-panel-tools { grid-template-columns: 1fr; }
}


/* ============================================
   SCOPE GRID (Civil Works)
   ============================================ */
.sv-panel-scope { position: relative; z-index: 1; }

.sv-panel-scope__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.sv-panel-scope__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}

.sv-panel-scope__item {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2); padding: var(--space-5) var(--space-3);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md); text-align: center;
}

.sv-panel-scope__icon {
    width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid #C0392B; background: transparent;
    display: flex; align-items: center; justify-content: center;
}

.sv-panel-scope__icon i { font-size: 1.5rem; color: var(--color-text-primary); }

.sv-panel-scope__name {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px;
}

.sv-panel-scope__detail {
    font-family: var(--font-body); font-size: 0.75rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
}

@media (max-width: 600px) {
    .sv-panel-scope__grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================
   PILLAR CARDS (Pre-Construction)
   ============================================ */
.sv-panel-pillars { position: relative; z-index: 1; }

.sv-panel-pillars__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-5);
}

.sv-panel-pillars__row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
}

.sv-panel-pillars__card {
    padding: var(--space-6) var(--space-5);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: var(--space-3);
    border-top: 3px solid #C0392B;
}

.sv-panel-pillars__num {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-bold); color: rgba(50,48,47,0.15);
}

.sv-panel-pillars__title {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; margin: 0; line-height: var(--leading-snug);
}

.sv-panel-pillars__desc {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

@media (max-width: 900px) {
    .sv-panel-pillars__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .sv-panel-pillars__row { grid-template-columns: 1fr 1fr; }
}


/* ============================================
   BAR CHART (Cost Estimation)
   ============================================ */
.sv-panel-bars { position: relative; z-index: 1; }

.sv-panel-bars__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.sv-panel-bars__chart {
    display: flex; flex-direction: column; gap: var(--space-3);
}

.sv-panel-bars__row {
    display: grid; grid-template-columns: 90px 1fr 60px;
    gap: var(--space-3); align-items: center;
}

.sv-panel-bars__stage {
    font-family: var(--font-body); font-size: 0.8rem; font-weight: var(--font-semibold);
    letter-spacing: 0.04em; color: var(--color-text-secondary); text-align: right;
}

.sv-panel-bars__track {
    height: 12px; background: var(--color-gray-100);
    border-radius: 6px; overflow: hidden;
}

.sv-panel-bars__fill {
    height: 100%; background: #C0392B; border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

.sv-panel-bars__pct {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px;
}


/* ============================================
   CHECKLIST (Cost Estimation & Post-Construction)
   ============================================ */
.sv-panel-checklist__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.sv-panel-checklist__items {
    display: flex; flex-direction: column; gap: var(--space-2);
}

.sv-panel-checklist__item {
    display: flex; align-items: flex-start; gap: var(--space-4);
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    padding: var(--space-3) 0;
}

.sv-panel-checklist__check {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 6px; background: rgba(192,57,43,0.12);
    color: var(--color-text-primary); font-size: 0.85rem;
    margin-top: 2px;
}

.sv-panel-checklist__check--circle {
    border-radius: 50%; width: 36px; height: 36px;
    border: 2px solid #C0392B; background: transparent;
    font-size: 1rem;
}

.sv-panel-checklist__items--large { gap: var(--space-4); }

.sv-panel-checklist__item--large {
    padding: var(--space-5); background: #fafaf8;
    border: 0.5px solid var(--color-border); border-radius: var(--radius-md);
    align-items: center;
}

.sv-panel-checklist__item--large strong {
    display: block; font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px; margin-bottom: 4px;
}

.sv-panel-checklist__sub {
    display: block; font-family: var(--font-body); font-size: 0.8rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
}


/* ============================================
   JURISDICTION PILLS (Permitting)
   ============================================ */
.sv-panel-jurisdictions__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.sv-panel-jurisdictions__pills {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
}

.sv-panel-jurisdictions__pill {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: #fafaf8; border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.2px;
}

.sv-panel-jurisdictions__pill i { font-size: 1.3rem; opacity: 0.5; }


/* ============================================
   PDCA LOOP (Quality Assurance)
   ============================================ */
.sv-panel-loop { position: relative; z-index: 1; }

.sv-panel-loop__label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-semibold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-300);
    margin-bottom: var(--space-5);
}

.sv-panel-loop__ring {
    display: flex; align-items: stretch; gap: 0;
}

.sv-panel-loop__segment {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); padding: var(--space-6) var(--space-4);
    background: #fafaf8; border: 0.5px solid var(--color-border);
    text-align: center;
}

.sv-panel-loop__segment:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.sv-panel-loop__segment:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.sv-panel-loop__seg-letter {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid #C0392B; background: transparent;
    font-family: var(--font-heading); font-size: var(--text-lg);
    font-weight: var(--font-bold); color: var(--color-text-primary);
}

.sv-panel-loop__seg-title {
    font-family: var(--font-heading); font-size: var(--text-base);
    font-weight: var(--font-semibold); color: var(--color-text-primary);
    letter-spacing: -0.3px;
}

.sv-panel-loop__seg-desc {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--color-text-secondary); line-height: var(--leading-normal);
}

.sv-panel-loop__connector {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--space-1); color: #C0392B; font-size: 0.9rem;
    flex-shrink: 0; opacity: 0.5;
}

@media (max-width: 600px) {
    .sv-panel-loop__ring { flex-direction: column; }
    .sv-panel-loop__segment:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .sv-panel-loop__segment:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
    .sv-panel-loop__connector { transform: rotate(90deg); padding: var(--space-1) 0; }
}


/* ============================================
   OFFSITE 4-COL VALUE CARDS override
   ============================================ */
@media (max-width: 900px) {
    .sv-card__panel-inner--offsite .sv-card__panel-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sv-card__panel-inner--offsite .sv-card__panel-cols { grid-template-columns: 1fr; }
}


/* ============================================
   ACCORDION PANEL CARDS — Pill family normalization
   Mirrors .co-about__indicator + map popup + project cards + contact buttons
   + tracks + projects-carousel + related-projects + ct-links + sc-steps.
   Applies to EVERY discrete card-like component inside open service panels.
   ============================================ */
.sv-panel-db__metric-card,
.sv-panel-db__sidebar-item,
.sv-panel-db__flow-stage,
.sv-panel-phase,
.sv-panel-metric,
.sv-panel-flow__stage,
.sv-panel-spec,
.sv-panel-matrix__card,
.sv-panel-modules__item,
.sv-panel-tools__card,
.sv-panel-scope__item,
.sv-panel-pillars__card,
.sv-panel-checklist__item,
.sv-panel-checklist__item--large,
.sv-panel-jurisdictions__pill,
.sv-panel-loop__segment,
.sv-pg__stat,
.sv-pg__detail,
.sv-reno__detail-card,
.sv-reno__step-card,
.sv-reno__stat,
.sv-reno__sector-tag {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.12),
                0 1px 3px rgba(0, 0, 0, 0.025);
    padding: clamp(16px, 1.6vw, 24px);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sv-panel-db__metric-card:hover,
.sv-panel-db__sidebar-item:hover,
.sv-panel-db__flow-stage:hover,
.sv-panel-phase:hover,
.sv-panel-metric:hover,
.sv-panel-flow__stage:hover,
.sv-panel-spec:hover,
.sv-panel-matrix__card:hover,
.sv-panel-modules__item:hover,
.sv-panel-tools__card:hover,
.sv-panel-scope__item:hover,
.sv-panel-pillars__card:hover,
.sv-panel-checklist__item:hover,
.sv-panel-checklist__item--large:hover,
.sv-panel-jurisdictions__pill:hover,
.sv-panel-loop__segment:hover,
.sv-pg__stat:hover,
.sv-pg__detail:hover,
.sv-reno__detail-card:hover,
.sv-reno__step-card:hover,
.sv-reno__stat:hover,
.sv-reno__sector-tag:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.16),
                0 2px 5px rgba(0, 0, 0, 0.03);
}

/* Layout conflicts — kill dividers/borders/first-last-child shape overrides
   that the original "joined card row" or "stacked rows" patterns relied on. */
.sv-pg__stat + .sv-pg__stat::before { display: none; }
.sv-reno__stat + .sv-reno__stat::before { display: none; }
.sv-panel-spec { border-bottom: none; }
.sv-panel-loop__segment:first-child,
.sv-panel-loop__segment:last-child { border-radius: 18px; }

/* Kill all tick-mark / grid-line decorations on cards and stat wrappers. */
.sv-reno__stats-grid::after,
.sv-reno__detail-card::after,
.sv-reno__step-card::after,
.sv-pg__stats::after { display: none; }

/* Step cards live on a dark section but their original text was white.
   Now that the pill normalization makes them white, flip text to dark. */
.sv-reno__step-label { color: var(--color-text-secondary); }
.sv-reno__step-title { color: var(--color-text-primary); }
.sv-reno__step-desc  { color: var(--color-text-secondary); }

/* Strip the boxed wrapper around stat strips — each stat is now its own pill. */
.sv-reno__stats-grid,
.sv-pg__stats {
    background: transparent;
    border: 0;
    overflow: visible;
}

.sv-panel-loop__ring,
.sv-pg__stats,
.sv-reno__stats-grid,
.sv-panel-spec ~ .sv-panel-spec,
.sv-panel-jurisdictions__pills,
.sv-reno__sector-tags { gap: clamp(12px, 1.2vw, 18px); }


/* ---------------------------------------- */
/* Per-card OVERRIDES (CARD 01 — CARD 21+) live in */
/* services-page-cards.css, loaded async after first paint. */
/* ---------------------------------------- */