/* ==================================================
   Services pages (service.php list + service-details.php).
   Same language as the News / Gallery detail pages: light grid-paper
   background, system font stack, orange on ink, mono "(01) -- Label"
   captions. The list is an editorial index (photo + title + blurb per
   row), not a card grid. Isolated with all:revert like the other
   rebuilt pages, so the old template CSS can't leak in.
   ================================================== */
:root {
    --sv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --sv-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sv-orange: #ff5e14;
    --sv-orange-dark: #e54d0f;
    --sv-ink: #14161a;
    --sv-muted: #6b7280;
    --sv-line: #e9eaee;
}

html { scroll-behavior: smooth; }

.sv-scope,
.sv-scope * {
    all: revert;
    box-sizing: border-box;
}

.sv-scope {
    display: block;
    font-family: var(--sv-font);
    font-weight: 400;
    color: var(--sv-ink);
    background-color: #fafafa;
    background-image:
        linear-gradient(to right, #eceef1 1px, transparent 1px),
        linear-gradient(to bottom, #eceef1 1px, transparent 1px);
    background-size: 42px 42px;
    padding-bottom: 90px;
    /* body has 40px top padding but the fixed top bar is ~36px: tuck up under it */
    margin-top: -6px;
}

.sv-container {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Dark hero band: breadcrumb + title + intro. Continues the dark top
   bar above it instead of leaving an empty white strip (the site's main
   menu stays hidden until you scroll). --- */
.sv-hero {
    display: block;
    padding: 64px 0 64px;
    background-color: var(--sv-ink);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    color: #fff;
}

.sv-crumb {
    display: block;
    margin-bottom: 34px;
    font-family: var(--sv-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.sv-crumb a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.sv-crumb a:hover { color: var(--sv-orange); }

.sv-hero .sv-eyebrow { color: var(--sv-orange); }
.sv-hero .sv-h1 { color: #fff; }
.sv-hero .sv-lead { color: rgba(255, 255, 255, 0.72); }

/* --- Shared type --- */
.sv-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: var(--sv-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sv-ink);
}

.sv-h1 {
    display: block;
    margin: 0 0 16px;
    font-family: var(--sv-font);
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--sv-ink);
}

.sv-h2 {
    display: block;
    margin: 0 0 10px;
    font-family: var(--sv-font);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sv-ink);
}

.sv-lead {
    display: block;
    max-width: 58ch;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--sv-muted);
}

.sv-sub {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sv-muted);
}

/* --- Buttons --- */
.sv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid var(--sv-orange);
    border-radius: 999px;
    background: var(--sv-orange);
    color: #fff;
    font-family: var(--sv-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sv-btn:hover { background: var(--sv-orange-dark); border-color: var(--sv-orange-dark); color: #fff; }

.sv-btn-ghost { background: #fff; border-color: var(--sv-line); color: var(--sv-ink); }
.sv-btn-ghost:hover { background: #fff; border-color: var(--sv-orange); color: var(--sv-orange); }

.sv-btn-dark { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.sv-btn-dark:hover { background: transparent; border-color: var(--sv-orange); color: var(--sv-orange); }

.sv-btn-block { display: flex; width: 100%; }

.sv-btn:disabled { opacity: 0.7; cursor: default; }

.sv-arrow {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-scope a:focus-visible,
.sv-scope button:focus-visible {
    outline: 2px solid var(--sv-orange);
    outline-offset: 3px;
}

/* ==================================================
   LIST PAGE (service.php)
   ================================================== */
.sv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 32px;
}

.sv-chip {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--sv-line);
    border-radius: 999px;
    background: #fff;
    color: var(--sv-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.sv-chip:hover { border-color: var(--sv-orange); color: var(--sv-orange); }
.sv-chip.is-active { background: var(--sv-ink); border-color: var(--sv-ink); color: #fff; }

.sv-list { display: block; padding-top: 8px; }

/* Each row carries its own hairline (::after) and a hidden dark panel
   (::before) that the hover state fades in -- same dark card, orange
   bottom edge, white title and orange link as the homepage service cards. */
.sv-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    margin: 0 -16px;
    padding: 28px 16px;
    border-radius: 22px;
    color: inherit;
    text-decoration: none;
}

.sv-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 22px;
    background: var(--sv-ink);
    box-shadow: inset 0 -4px 0 var(--sv-orange);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sv-row::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: var(--sv-line);
    transition: opacity 0.2s ease;
}

.sv-row-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
}

.sv-row-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sv-row-body { display: block; min-width: 0; }

.sv-row-meta {
    display: block;
    margin-bottom: 10px;
    font-family: var(--sv-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--sv-muted);
}

.sv-row-meta b { font-weight: 600; color: var(--sv-orange); }

.sv-row-title {
    display: block;
    margin: 0 0 10px;
    font-family: var(--sv-font);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--sv-ink);
    transition: color 0.2s ease;
}

.sv-row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sv-muted);
}

.sv-row-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 16px;
}

.sv-row-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sv-ink);
}

.sv-row-link .sv-arrow { transition: transform 0.2s ease; }

.sv-row-price {
    font-family: var(--sv-mono);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--sv-muted);
}

.sv-row-meta, .sv-row-desc, .sv-row-link, .sv-row-price { transition: color 0.25s ease; }
.sv-row-thumb { transition: box-shadow 0.25s ease; }

@media (hover: hover) and (min-width: 769px) {
    .sv-row:is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
    .sv-row:is(:hover, :focus-visible)::after { opacity: 0; }

    .sv-row:is(:hover, :focus-visible) .sv-row-title { color: #fff; }
    .sv-row:is(:hover, :focus-visible) .sv-row-meta { color: rgba(255, 255, 255, 0.55); }
    .sv-row:is(:hover, :focus-visible) .sv-row-desc { color: rgba(255, 255, 255, 0.72); }
    .sv-row:is(:hover, :focus-visible) .sv-row-price { color: rgba(255, 255, 255, 0.6); }
    .sv-row:is(:hover, :focus-visible) .sv-row-link {
        color: var(--sv-orange);
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-thickness: 1.5px;
    }

    .sv-row:is(:hover, :focus-visible) .sv-row-thumb { box-shadow: 0 0 0 3px #fff; }
    .sv-row:is(:hover, :focus-visible) .sv-row-thumb img { transform: scale(1.04); }
    .sv-row:is(:hover, :focus-visible) .sv-row-link .sv-arrow { transform: translateX(4px); }
}

.sv-empty {
    display: block;
    max-width: 640px;
    padding: 36px;
    border: 1px solid var(--sv-line);
    border-radius: 20px;
    background: #fff;
}

.sv-empty-title {
    display: block;
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.sv-empty p {
    display: block;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sv-muted);
}

/* Closing quote band (list page) */
.sv-band {
    display: block;
    margin-top: 64px;
    padding: 48px 44px;
    border-radius: 22px;
    background: var(--sv-ink);
    color: #fff;
}

.sv-band-cap {
    display: block;
    margin-bottom: 14px;
    font-family: var(--sv-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sv-orange);
}

.sv-band-title {
    display: block;
    max-width: 22em;
    margin: 0 0 10px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
}

.sv-band-text {
    display: block;
    max-width: 52ch;
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
}

/* ==================================================
   DETAIL PAGE (service-details.php)
   ================================================== */
.sv-intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: center;
}

.sv-intro-text { display: block; min-width: 0; }

.sv-price {
    display: block;
    margin: 18px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

.sv-price b { font-weight: 700; color: #fff; }

.sv-intro-text .sv-actions { margin-top: 26px; }

.sv-intro-photo {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: #2a2d33;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.sv-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
    padding-top: 60px;
}

.sv-article { display: block; min-width: 0; }

/* Long description comes from the admin's rich-text editor: headings,
   paragraphs and bullet lists. Typeset it here instead of leaving it raw. */
.sv-prose {
    display: block;
    font-size: 16px;
    line-height: 1.75;
    color: #3b4048;
    overflow-wrap: break-word;
    counter-reset: svs;
    --sv-li-pad: 10px;
    --sv-li-fs: 15px;
}

.sv-prose > :first-child { margin-top: 0; }

.sv-prose h2 {
    display: block;
    margin: 40px 0 12px;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--sv-ink);
    counter-increment: svs;
}

.sv-prose h2::before {
    content: counter(svs, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    font-family: var(--sv-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--sv-orange);
}

.sv-prose h3 {
    display: block;
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sv-ink);
}

.sv-prose h2 br:first-child { display: none; }

.sv-prose p { display: block; max-width: 68ch; margin: 0 0 16px; }
.sv-prose p:empty { display: none; }

.sv-prose strong,
.sv-prose b { font-weight: 700; color: var(--sv-ink); }

.sv-prose em,
.sv-prose i { font-style: italic; }

.sv-prose a { color: var(--sv-orange); text-decoration: underline; text-underline-offset: 3px; }

.sv-prose ul,
.sv-prose ol {
    display: block;
    margin: 4px 0 20px;
    padding: 0;
    list-style: none;
}

.sv-prose ol { counter-reset: svo; }

.sv-prose li {
    display: block;
    position: relative;
    padding: var(--sv-li-pad) 0 var(--sv-li-pad) 24px;
    border-bottom: 1px solid var(--sv-line);
    font-size: var(--sv-li-fs);
    line-height: 1.55;
}

.sv-prose ul > li:first-child,
.sv-prose ol > li:first-child { border-top: 1px solid var(--sv-line); }

.sv-prose ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: calc(var(--sv-li-pad) + var(--sv-li-fs) * 0.775 - 1px);
    width: 8px;
    height: 2px;
    background: var(--sv-orange);
}

.sv-prose ol > li { counter-increment: svo; }

.sv-prose ol > li::before {
    content: counter(svo, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--sv-li-pad);
    line-height: calc(var(--sv-li-fs) * 1.55);
    font-family: var(--sv-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sv-orange);
}

.sv-prose ol > li { padding-left: 32px; }

.sv-prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; }

/* Extra photos (image 2 / image 3) */
.sv-extra { display: grid; gap: 16px; margin-top: 44px; }
.sv-extra--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-extra--1 { grid-template-columns: minmax(0, 1fr); }

.sv-extra-photo {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
}

.sv-extra--1 .sv-extra-photo { aspect-ratio: 16 / 9; }

.sv-extra-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Side column */
.sv-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 104px;
}

.sv-quote {
    display: block;
    padding: 28px;
    border-radius: 20px;
    background: var(--sv-ink);
    color: #fff;
}

.sv-quote-cap {
    display: block;
    margin-bottom: 12px;
    font-family: var(--sv-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sv-orange);
}

.sv-quote-title {
    display: block;
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #fff;
}

.sv-quote-text {
    display: block;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.sv-quote-contact {
    display: block;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sv-quote-contact a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
}

.sv-quote-contact a + a { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.sv-quote-contact a:hover { color: var(--sv-orange); }

.sv-more {
    display: block;
    padding: 22px 24px;
    border: 1px solid var(--sv-line);
    border-radius: 20px;
    background: #fff;
}

.sv-more-cap {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sv-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sv-muted);
}

.sv-more-list { display: block; margin: 0; padding: 0; list-style: none; }

.sv-more-list li { display: block; border-bottom: 1px solid var(--sv-line); }
.sv-more-list li:last-child { border-bottom: 0; }

.sv-more-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sv-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sv-more-list a .sv-arrow { color: var(--sv-muted); transition: transform 0.2s ease, color 0.2s ease; }
.sv-more-list a:hover { color: var(--sv-orange); }
.sv-more-list a:hover .sv-arrow { color: var(--sv-orange); transform: translateX(3px); }

.sv-more-all {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sv-orange);
    text-decoration: none;
}

.sv-more-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Recent projects */
.sv-projects {
    display: block;
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--sv-line);
    scroll-margin-top: 96px;
}

.sv-projects-head { display: block; margin-bottom: 28px; }

.sv-proj-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 28px;
}

.sv-proj {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.sv-proj::before {
    content: "";
    position: absolute;
    inset: -10px -10px -12px;
    z-index: -1;
    border-radius: 20px;
    background: var(--sv-ink);
    box-shadow: inset 0 -4px 0 var(--sv-orange);
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sv-proj-media { position: relative; display: block; }

/* The photo itself is a button: clicking it opens the full-size lightbox. */
.sv-proj-thumb {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
    cursor: zoom-in;
    transition: box-shadow 0.25s ease;
}

.sv-proj-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Small "View details" pill over the photo: shown on hover (and keyboard
   focus) on desktop, always visible on touch screens where there's no hover. */
.sv-proj-detail {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--sv-orange);
    color: #fff;
    font-family: var(--sv-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.sv-proj-detail:hover { background: var(--sv-orange-dark); color: #fff; }

.sv-proj-media:is(:hover, :focus-within) .sv-proj-detail { opacity: 1; transform: none; }

@media (hover: none) {
    .sv-proj-detail { opacity: 1; transform: none; }
}

/* ---------- Full-size photo viewer (lightbox) ---------- */
.sv-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 72px 24px;
    background: rgba(10, 11, 14, 0.94);
}

.sv-lb.is-open { display: flex; }

.sv-lb-fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin: 0;
}

.sv-lb-img {
    display: block;
    max-width: 100%;
    max-height: 68vh;
    object-fit: contain;
    border-radius: 8px;
    background: #1b1d22;
    transition: opacity 0.2s ease;
}

.sv-lb-img.is-loading { opacity: 0.55; }

.sv-lb-cap {
    display: block;
    max-width: 760px;
    max-height: 16vh;
    margin-top: 14px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}

.sv-lb-count {
    position: absolute;
    top: 22px;
    left: 24px;
    font-family: var(--sv-mono);
    font-size: 12px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.6);
}

.sv-lb-close,
.sv-lb-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: var(--sv-font);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sv-lb-close { top: 14px; right: 16px; }
.sv-lb-prev { left: 16px; top: 50%; margin-top: -23px; }
.sv-lb-next { right: 16px; top: 50%; margin-top: -23px; }

.sv-lb-close:hover,
.sv-lb-nav:hover { background: var(--sv-orange); border-color: var(--sv-orange); }

.sv-lb-nav:disabled { opacity: 0.25; cursor: default; }
.sv-lb-nav:disabled:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }

.sv-proj-cap {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sv-ink);
    transition: color 0.25s ease;
}

.sv-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Hover lift only where hover exists, so touch screens don't get stuck states */
@media (hover: hover) {
    .sv-btn:hover { transform: translateY(-2px); }
}

@media (hover: hover) and (min-width: 769px) {
    .sv-proj:is(:hover, :focus-within)::before { opacity: 1; transform: none; }
    .sv-proj:is(:hover, :focus-within) .sv-proj-cap { color: #fff; }
    .sv-proj:is(:hover, :focus-within) .sv-proj-thumb { box-shadow: 0 0 0 3px #fff; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
    .sv-row { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
    .sv-intro { grid-template-columns: 1fr; gap: 30px; }
    .sv-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .sv-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .sv-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile: compact type, minimal motion ---------- */
@media (max-width: 768px) {
    .sv-scope { background-size: 28px 28px; padding-bottom: 56px; }
    .sv-container { padding: 0 16px; }
    .sv-hero { padding: 36px 0 36px; }
    .sv-crumb { font-size: 11.5px; margin-bottom: 16px; }
    .sv-crumb a { display: inline-block; padding: 6px 0; }

    .sv-eyebrow { font-size: 10.5px; letter-spacing: 1px; margin-bottom: 10px; }
    .sv-h1 { font-size: 26px; margin-bottom: 12px; }
    .sv-h2 { font-size: 22px; }
    .sv-lead { font-size: 14.5px; }
    .sv-sub { font-size: 13.5px; }

    .sv-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .sv-btn { padding: 14px 22px; font-size: 14px; }

    .sv-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 24px -16px 12px;
        padding: 2px 16px 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sv-chips::-webkit-scrollbar { display: none; }
    .sv-chip { flex: none; font-size: 13px; padding: 8px 14px; }

    .sv-row { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 22px 0; border-radius: 0; align-items: start; }
    .sv-row::before { display: none; }
    .sv-row::after { left: 0; right: 0; }
    .sv-row-thumb { aspect-ratio: 16 / 10; border-radius: 12px; }
    .sv-row-meta { font-size: 11px; margin-bottom: 8px; }
    .sv-row-title { font-size: 20px; margin-bottom: 8px; }
    .sv-row-desc { font-size: 13.5px; line-height: 1.6; }
    .sv-row-foot { margin-top: 12px; }
    .sv-row-link { font-size: 13.5px; }

    .sv-empty { padding: 24px 20px; border-radius: 16px; }
    .sv-empty-title { font-size: 19px; }
    .sv-empty p { font-size: 13.5px; }

    .sv-band { margin-top: 44px; padding: 30px 20px; border-radius: 16px; }
    .sv-band-title { font-size: 21px; }
    .sv-band-text { font-size: 13.5px; margin-bottom: 20px; }

    .sv-intro { gap: 24px; }
    .sv-intro-photo { border-radius: 14px; }
    .sv-price { margin-top: 14px; font-size: 13px; }
    .sv-intro-text .sv-actions { margin-top: 20px; }

    .sv-body { padding-top: 32px; gap: 32px; }
    .sv-prose { font-size: 14.5px; line-height: 1.7; --sv-li-pad: 9px; --sv-li-fs: 13.5px; }
    .sv-prose h2 { font-size: 18px; margin: 28px 0 10px; }
    .sv-prose h2::before { font-size: 10.5px; margin-bottom: 6px; }
    .sv-prose h3 { font-size: 16px; }
    .sv-prose li { padding-left: 20px; }
    .sv-prose ol > li { padding-left: 28px; }

    .sv-extra { gap: 10px; margin-top: 30px; }
    .sv-extra-photo { border-radius: 12px; }

    .sv-aside { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .sv-quote { padding: 22px 20px; border-radius: 16px; }
    .sv-quote-title { font-size: 18px; }
    .sv-quote-text { font-size: 13.5px; margin-bottom: 16px; }
    .sv-more { padding: 18px 20px; border-radius: 16px; }
    .sv-more-list a { font-size: 13.5px; }

    .sv-projects { margin-top: 48px; padding-top: 36px; }
    .sv-projects-head { margin-bottom: 20px; }
    .sv-proj::before { display: none; }
    .sv-proj-grid { gap: 16px 12px; }
    .sv-proj-thumb { border-radius: 10px; }
    .sv-proj-detail { left: 6px; bottom: 6px; padding: 6px 10px; font-size: 11px; }
    .sv-proj-cap { font-size: 12px; margin-top: 8px; }

    .sv-lb { padding: 56px 10px 16px; }
    .sv-lb-img { max-height: 62vh; border-radius: 6px; }
    .sv-lb-cap { font-size: 13px; max-height: 18vh; margin-top: 10px; }
    .sv-lb-count { top: 20px; left: 16px; font-size: 11px; }
    .sv-lb-close { top: 8px; right: 8px; }
    .sv-lb-close, .sv-lb-nav { width: 42px; height: 42px; font-size: 24px; }
    .sv-lb-prev { left: 6px; margin-top: -21px; background: rgba(0, 0, 0, 0.45); }
    .sv-lb-next { right: 6px; margin-top: -21px; background: rgba(0, 0, 0, 0.45); }
    .sv-more-wrap { margin-top: 24px; }
    .sv-more-wrap .sv-btn { width: 100%; }
}

@media (max-width: 480px) {
    .sv-extra--2 { grid-template-columns: minmax(0, 1fr); }
    .sv-extra--2 .sv-extra-photo { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sv-btn, .sv-row-thumb img, .sv-row-link .sv-arrow, .sv-proj-thumb, .sv-more-list a .sv-arrow,
    .sv-row::before, .sv-proj::before { transition: none; }
}