/* GarCar Showroom - loaded after studio.css.
   Part 1: tokens and base. Part 2: new layout components (sr-*).
   Part 3: overrides that restyle the studio components reused by forms, quote flow and CMS pages. */

/* ============ 1. Tokens & base ============ */
:root {
    color-scheme: dark;
    --sr-bg: #0d0d0e;
    --sr-bg-2: #141415;
    --sr-bg-3: #1c1c1e;
    --sr-text: #f3f2ef;
    --sr-mute: #9c9a95;
    --sr-dim: #63625e;
    --sr-line: rgba(255, 255, 255, .13);
    --sr-line-2: rgba(255, 255, 255, .28);
    --sr-ok: #7fd4a3;
    --sr-err: #ff8a80;
    --sr-gut: clamp(20px, 4.2vw, 64px);
    --sr-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --color-border: #2a2a2c;
}

html:has(.sr-body) { scrollbar-gutter: auto; background: #0d0d0e; }
.sr-body {
    background: var(--sr-bg);
    color: var(--sr-text);
    font-family: var(--sr-font);
    font-size: 17px;
    line-height: 1.6;
}
.sr-body h1, .sr-body h2, .sr-body h3, .sr-body h4 {
    font-family: var(--sr-font);
    font-stretch: 118%;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--sr-text);
}
.sr-body.sr-menu-open { overflow: hidden; }
.sr-body :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sr-body ::selection { background: #f3f2ef; color: #0d0d0e; }
.sr-body .st-wrap {
    max-width: 1360px;
    padding-left: var(--sr-gut);
    padding-right: var(--sr-gut);
}
.sr-skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: #fff; color: #000; padding: 10px 16px; border-radius: 999px; font-weight: 600;
}
.sr-skip:focus { top: 12px; }

/* ============ 2. Layout components ============ */
/* type */
.sr-pre { margin: 0 0 18px; color: var(--sr-mute); font-size: 15px; }
.sr-h1 {
    margin: 0;
    font-stretch: 125% !important;
    font-weight: 500 !important;
    letter-spacing: -.035em !important;
    line-height: .94 !important;
    font-size: clamp(2.9rem, 7.6vw, 6.6rem);
    max-width: 12.5ch;
    text-wrap: balance;
}
.sr-h1--page { font-size: clamp(2.5rem, 6.2vw, 6.2rem); max-width: 16ch; }
.sr-h2 {
    margin: 0;
    font-stretch: 125% !important;
    font-weight: 500 !important;
    letter-spacing: -.035em !important;
    line-height: .98 !important;
    font-size: clamp(2.1rem, 4.6vw, 4.5rem);
    text-wrap: balance;
}
.sr-h2--xl { font-size: clamp(2.5rem, 6.4vw, 6.6rem); }
.sr-lead { margin: 18px 0 0; max-width: 34rem; color: var(--sr-mute); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.55; }
.sr-statement {
    margin: 0; max-width: 22em;
    font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1.16;
    font-stretch: 112%; font-weight: 400; letter-spacing: -.022em; text-wrap: pretty;
}
.sr-statement--sm { font-size: clamp(1.35rem, 2.3vw, 2.1rem); }
.sr-lbl { margin: 0 0 10px; font-size: 14px; color: var(--sr-mute); }
.sr-muted { color: var(--sr-mute); }
.sr-open { color: var(--sr-ok); }
.sr-closed { color: var(--sr-mute); }

/* buttons & text links */
.sr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
    font: 500 15.5px/1 var(--sr-font); font-stretch: 110%;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.sr-btn--solid { background: var(--sr-text); color: var(--sr-bg); border-color: var(--sr-text); }
.sr-btn--solid:hover { background: #fff; color: #000; }
.sr-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.sr-btn--ghost:hover { background: var(--sr-text); color: var(--sr-bg); border-color: var(--sr-text); }
.sr-btn--sm { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
.sr-tl {
    font-size: 15.5px; font-stretch: 110%; color: #fff; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    padding-bottom: 3px; transition: background-size .3s;
}
.sr-tl:hover { background-size: 0 1px; background-position: 100% 100%; }
.sr-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

/* header */
.sr-hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 90;
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid transparent;
    transition: background .3s, border-color .3s;
}
.sr-hdr.is-solid { background: rgba(13, 13, 14, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--sr-line); }
.sr-hdr__in { display: flex; align-items: center; gap: 36px; height: 84px; }
.sr-logo img { height: 24px; width: auto; }
.sr-nav { display: flex; gap: 30px; margin-inline: auto; }
.sr-nav a { font-size: 15px; color: rgba(243, 242, 239, .8); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s; white-space: nowrap; }
.sr-nav a:hover, .sr-nav a[aria-current="page"] { color: #fff; }
.sr-nav a[aria-current="page"] { border-bottom-color: #fff; }
.sr-hdr__r { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.sr-hdr__tel { font-size: 15px; font-stretch: 112%; color: #fff; text-decoration: none; white-space: nowrap; }
.sr-menu-btn { background: none; border: 0; padding: 8px 0; cursor: pointer; font: 500 15px var(--sr-font); color: #fff; letter-spacing: .02em; }
.sr-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto;
    background: var(--sr-bg); border-top: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line);
    padding: 36px 0 44px; animation: sr-menu-in .22s ease both;
}
@keyframes sr-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sr-menu__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px clamp(32px, 5vw, 88px); }
.sr-menu__lbl { margin: 0 0 12px !important; font-size: 14px; color: var(--sr-mute); }
.sr-menu__col a {
    display: block; width: fit-content; padding: 6px 0; text-decoration: none; color: rgba(243, 242, 239, .82);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-stretch: 116%; font-weight: 500; letter-spacing: -.015em; line-height: 1.25;
    transition: color .2s;
}
.sr-menu__col a:hover, .sr-menu__col a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.sr-menu__aside { display: grid; gap: 8px; align-content: start; color: var(--sr-mute); font-size: 15px; padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--sr-line); }
.sr-menu__aside p { margin: 0; }
.sr-menu__aside .sr-btn { justify-self: start; margin-top: 14px; }
.sr-menu__tel { font-size: clamp(1.5rem, 2.2vw, 2rem); font-stretch: 125%; color: #fff; text-decoration: none; letter-spacing: -.03em; }
.sr-menu-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); animation: sr-fade-in .22s ease both; }
@keyframes sr-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* homepage hero */
.sr-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: min(94vh, 980px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(150px, 15vw, 200px) 0 0;
}
.sr-hero__bg { position: absolute; inset: 0; z-index: -1; }
.sr-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; filter: brightness(.82) contrast(1.05) saturate(.95); }
.sr-hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13,13,14,.9) 0%, rgba(13,13,14,.62) 40%, rgba(13,13,14,.1) 76%, rgba(13,13,14,.3) 100%),
        linear-gradient(180deg, rgba(13,13,14,.6) 0%, rgba(13,13,14,0) 22%, rgba(13,13,14,0) 58%, var(--sr-bg) 100%);
}
.sr-hero__in { width: 100%; }
.sr-hero__row { margin-top: clamp(24px, 3vw, 40px); }
.sr-hero__row .sr-cta-row { margin-top: 30px; }
.sr-hero__lead { margin: 0; max-width: 30rem; color: #d9d7d2; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.sr-hero__links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 30px; }
.sr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 5vw, 80px) 0 0; border-top: 1px solid var(--sr-line); }
.sr-stat { padding: 30px 24px 44px 0; margin: 0; }
.sr-stat + .sr-stat { padding-left: 28px; border-left: 1px solid var(--sr-line); }
.sr-stat dt { font-size: clamp(2.4rem, 4.8vw, 4.6rem); font-stretch: 125%; font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.sr-stat dd { margin: 14px 0 0; color: var(--sr-mute); font-size: 15px; }

/* sections */
.sr-sec { padding: clamp(80px, 10vw, 150px) 0; }
.sr-sec--alt { background: var(--sr-bg-2); }
.sr-shead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; margin-bottom: clamp(40px, 5vw, 72px); }
.sr-shead > .sr-tl, .sr-cta-row > .sr-tl { justify-self: start; }
.sr-about, .sr-dyno { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.sr-dyno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sr-about__p { margin: 26px 0 0; max-width: 38rem; color: var(--sr-mute); font-size: 17px; }
.sr-info { margin: 0; border-top: 1px solid var(--sr-line); }
.sr-info div { padding: 20px 0; border-bottom: 1px solid var(--sr-line); }
.sr-info dt { font-size: 14px; color: var(--sr-mute); margin-bottom: 6px; }
.sr-info dd { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-stretch: 112%; line-height: 1.4; }
.sr-info a { color: inherit; text-decoration: none; }
.sr-list { list-style: none; margin: 30px 0 36px; padding: 0; border-top: 1px solid var(--sr-line); }
.sr-list li { padding: 15px 0; border-bottom: 1px solid var(--sr-line); font-stretch: 108%; }

/* services grid */
.sr-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 88px); }
.sr-sitem { display: flex; flex-direction: column; gap: 12px; padding: 32px 0 30px; border-top: 1px solid var(--sr-line); text-decoration: none; color: inherit; }
.sr-sgrid .sr-sitem:nth-last-child(-n+2) { border-bottom: 1px solid var(--sr-line); }
.sr-sitem__t { font-size: clamp(1.5rem, 2.7vw, 2.5rem); font-stretch: 125%; font-weight: 500; letter-spacing: -.03em; line-height: 1.02; }
.sr-sitem__d { color: var(--sr-mute); max-width: 33rem; font-size: 16px; line-height: 1.55; }
.sr-sitem__m { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; font-size: 14px; color: var(--sr-mute); }
.sr-sitem__m span:last-child { font-size: 18px; transition: transform .25s, color .25s; }
.sr-sitem:hover .sr-sitem__m span:last-child { transform: translateX(5px); color: #fff; }

/* dyno panel */
.sr-dpanel { background: var(--sr-bg-2); border-radius: 2px; padding: clamp(24px, 3.2vw, 44px); }
.sr-dpanel__h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 22px; }
.sr-dpanel__h b { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-stretch: 118%; font-weight: 500; }
.sr-dpanel__h span { font-size: 14px; color: var(--sr-mute); }
.sr-dgroup { padding: 20px 0; border-top: 1px solid var(--sr-line); }
.sr-drow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 4.4rem; align-items: center; gap: 14px; padding: 6px 0; font-size: 14.5px; color: var(--sr-mute); }
.sr-drow i { display: block; height: 2px; background: var(--sr-dim); }
.sr-drow.is-po i { height: 3px; background: var(--sr-text); }
.sr-drow b { text-align: right; font-weight: 400; font-size: 17px; font-stretch: 115%; color: var(--sr-text); font-variant-numeric: tabular-nums; }
.sr-ddelta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid var(--sr-line); }
.sr-ddelta b { display: block; font-size: clamp(2.2rem, 4vw, 3.6rem); font-stretch: 125%; font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.sr-ddelta span { display: block; margin-top: 8px; font-size: 14px; color: var(--sr-mute); }
.sr-dpanel--empty b { font-size: 4rem; font-stretch: 125%; font-weight: 300; }
.sr-dpanel--empty p { margin: 10px 0 0; color: var(--sr-mute); }
.sr-sec--alt .sr-dpanel { background: var(--sr-bg-3); }

/* portfolio cards */
.sr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.sr-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.sr-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--sr-bg-3); }
.sr-card__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) contrast(1.05) saturate(.88); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sr-card:hover .sr-card__img img { transform: scale(1.04); }
.sr-card__ph { display: grid; place-items: center; height: 100%; color: var(--sr-dim); font-stretch: 118%; }
.sr-card__cat { margin: 18px 0 8px; font-size: 13.5px; color: var(--sr-mute); }
.sr-card__t { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-stretch: 118%; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.sr-card__v { margin: 8px 0 0; font-size: 14.5px; color: var(--sr-mute); }
.sr-card .sr-tl { align-self: flex-start; margin-top: 18px; }

/* news rows */
.sr-news { border-top: 1px solid var(--sr-line); }
.sr-nrow { display: grid; grid-template-columns: 7.5rem minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 10px 40px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--sr-line); text-decoration: none; color: inherit; }
.sr-nrow__d { color: var(--sr-mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.sr-nrow__t { font-size: clamp(1.25rem, 2vw, 1.85rem); font-stretch: 120%; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.sr-nrow__e { color: var(--sr-mute); font-size: 15px; line-height: 1.55; }
.sr-nrow__a { font-size: 14.5px; white-space: nowrap; color: var(--sr-mute); transition: color .25s; }
.sr-nrow:hover .sr-nrow__a { color: #fff; }

/* reviews */
.sr-opinie { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.sr-score { margin: 0; font-size: clamp(3rem, 6vw, 5.4rem); font-stretch: 125%; font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.sr-score small { font-size: .35em; color: var(--sr-mute); letter-spacing: 0; margin-left: .15em; }
.sr-opinie .sr-muted { margin: 12px 0 22px; }
.sr-op { margin: 0; padding: 30px 0; border-top: 1px solid var(--sr-line); }
.sr-op:last-child { border-bottom: 1px solid var(--sr-line); }
.sr-op blockquote { margin: 12px 0 16px; font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-stretch: 108%; line-height: 1.35; letter-spacing: -.01em; }
.sr-op figcaption { font-size: 14px; color: var(--sr-mute); }
.sr-stars { letter-spacing: 3px; font-size: 13px; color: var(--sr-text); }
.sr-cta .sr-lead { margin: 26px 0 36px; }

/* page head */
.sr-phead { padding: clamp(150px, 16vw, 210px) 0 clamp(48px, 6vw, 88px); }
.sr-phead__desc { margin-top: 26px; max-width: 40rem; }
.sr-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; font-size: 14px; color: rgba(243, 242, 239, .7); }
.sr-crumbs a { color: rgba(243, 242, 239, .7); text-decoration: none; }
.sr-crumbs a:hover { color: #fff; }

/* footer & dock */
.sr-ftr { padding: 64px 0 32px; border-top: 1px solid var(--sr-line); font-size: 15px; }
.sr-ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.sr-ftr__logo { height: 22px; width: auto; margin-bottom: 18px; }
.sr-ftr__h { margin: 0 0 12px; font-size: 14px !important; font-weight: 400 !important; font-stretch: 100% !important; letter-spacing: 0 !important; color: var(--sr-mute) !important; }
.sr-ftr a { display: block; padding: 4px 0; text-decoration: none; color: var(--sr-text); }
.sr-ftr a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sr-ftr p { margin: 0 0 6px; color: var(--sr-mute); }
.sr-ftr__strong { font-size: 18px; font-stretch: 115%; }
.sr-ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--sr-line); font-size: 13.5px; color: var(--sr-dim); }
.sr-ftr__legal a { display: inline; color: var(--sr-mute); }
.sr-ftr__btn { background: none; border: 0; padding: 0; font: inherit; color: var(--sr-mute); cursor: pointer; }
.sr-ftr__btn:hover { color: var(--sr-text); text-decoration: underline; text-underline-offset: 5px; }
.sr-dock { display: none; }

/* ============ responsive ============ */
@media (max-width: 1180px) {
    .sr-nav { display: none; }
}
@media (max-width: 900px) {
    .sr-about, .sr-dyno, .sr-opinie { grid-template-columns: 1fr; }
    .sr-menu__grid { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
    .sr-menu__aside { grid-column: 1 / -1; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--sr-line); }
    .sr-hero__row { grid-template-columns: 1fr; }
    .sr-cards { grid-template-columns: 1fr 1fr; }
    .sr-nrow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
    .sr-nrow__d, .sr-nrow__e { grid-column: 1 / -1; }
    .sr-nrow__a { grid-column: 2; grid-row: 2; }
    .sr-ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .sr-body { font-size: 16px; }
    .sr-hdr__in { height: 68px; gap: 16px; }
    .sr-hdr__tel, .sr-hdr__cta { display: none; }
    .sr-menu { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); padding: 24px 0 32px; }
    .sr-menu__col a { font-size: 1.1rem; padding: 5px 0; }
    .sr-menu__grid { gap: 24px 20px; }
    .sr-hero { min-height: 0; padding-top: 140px; }
    .sr-hero__row .sr-cta-row .sr-btn { flex: 1 1 100%; }
    .sr-stats { grid-template-columns: 1fr 1fr; }
    .sr-stat, .sr-stat + .sr-stat { padding: 22px 0 26px; border-left: 0; }
    .sr-stat:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--sr-line); }
    .sr-stat:nth-child(n+3) { border-top: 1px solid var(--sr-line); }
    .sr-shead { grid-template-columns: 1fr; }
    .sr-sgrid { grid-template-columns: 1fr; }
    .sr-sgrid .sr-sitem:nth-last-child(2) { border-bottom: 0; }
    .sr-cards { grid-template-columns: 1fr; }
    .sr-phead { padding-top: 120px; }
    .sr-ftr { padding-bottom: 100px; }
    .sr-ftr__grid { grid-template-columns: 1fr; }
    .sr-dock {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
        background: var(--sr-line); border-top: 1px solid var(--sr-line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sr-dock a { display: flex; align-items: center; justify-content: center; min-height: 56px; background: rgba(13, 13, 14, .97); font: 500 15px var(--sr-font); font-stretch: 110%; color: #fff; text-decoration: none; }
    .sr-dock a.sr-dock__main { background: var(--sr-text); color: var(--sr-bg); }
    .sr-body .st-cookie-consent { bottom: 64px; }
}

/* ============ 3. Studio component overrides ============ */
/* never hide content while waiting for scripts */
.sr-body [data-reveal] { opacity: 1 !important; transform: none !important; }

/* buttons */
.sr-body .st-btn {
    border-radius: 999px; font-family: var(--sr-font); font-weight: 500; font-stretch: 110%; letter-spacing: 0; text-transform: none;
    min-height: 48px; padding: 0 24px;
}
.sr-body .st-btn--sm { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
.sr-body .st-btn--red, .sr-body .st-btn--fill, .sr-body .st-btn--invert {
    background: var(--sr-text) !important; color: var(--sr-bg) !important; border-color: var(--sr-text) !important; box-shadow: none !important;
}
.sr-body .st-btn--red:hover, .sr-body .st-btn--fill:hover, .sr-body .st-btn--invert:hover { background: #fff !important; color: #000 !important; }
.sr-body .st-btn--line, .sr-body .st-btn--ghost {
    background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45) !important;
}
.sr-body .st-btn--line:hover, .sr-body .st-btn--ghost:hover { background: var(--sr-text) !important; color: var(--sr-bg) !important; border-color: var(--sr-text) !important; }
.sr-body .st-link { color: #fff; font-stretch: 110%; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; }
.sr-body .st-link:hover { border-bottom-color: transparent; color: #fff; }

/* section headings used by CMS pages */
.sr-body .st-section { background: transparent; padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.sr-body .st-section--dark, .sr-body .st-section--lift { background: var(--sr-bg-2); }
.sr-body .st-sec-num, .sr-body .st-cms-label { color: var(--sr-mute) !important; font: 400 15px var(--sr-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
.sr-body .st-sec-title, .sr-body .st-cms-h2 {
    font-stretch: 125% !important; font-weight: 500 !important; letter-spacing: -.035em !important; line-height: 1 !important;
    font-size: clamp(2rem, 4.2vw, 4rem) !important;
}
.sr-body .st-cms-h3 { font-stretch: 118%; font-weight: 500; letter-spacing: -.02em; }
.sr-body .st-sec-lead, .sr-body .st-cms-text, .sr-body .st-prose { color: var(--sr-mute); }
.sr-body .st-prose h2, .sr-body .st-prose h3 { color: var(--sr-text); margin: 1.6em 0 .6em; }
.sr-body .st-prose a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* cards & panels: fewer boxes, hairlines instead */
.sr-body .st-cms-panel, .sr-body .st-promo-card, .sr-body .st-about-card, .sr-body .st-policy-panel, .sr-body .st-quote-cta--card,
.sr-body .st-related-grid__cell, .sr-body .st-svc-row, .sr-body .st-showcase__card, .sr-body .st-reviews__card, .sr-body .st-ecu-dual__panel {
    border-radius: 2px !important; box-shadow: none !important;
}
.sr-body .st-cms-tag, .sr-body .st-tag-strip__tag { border-radius: 999px; color: var(--sr-text); border-color: var(--sr-line-2); background: transparent; }

/* forms (quote, contact, confirmation) */
.sr-body input[type="text"], .sr-body input[type="email"], .sr-body input[type="tel"], .sr-body input[type="number"],
.sr-body input[type="date"], .sr-body input[type="search"], .sr-body select, .sr-body textarea {
    font-family: var(--sr-font); font-size: 16px; color: var(--sr-text);
    background-color: var(--sr-bg-2); border: 1px solid var(--sr-line-2); border-radius: 4px;
}
.sr-body input:focus, .sr-body select:focus, .sr-body textarea:focus { outline: none; border-color: #fff !important; box-shadow: 0 0 0 1px #fff !important; }
.sr-body input[type="checkbox"], .sr-body input[type="radio"] { accent-color: #f3f2ef; }
.sr-body .st-contact-form__field label {
    text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--sr-mute);
}
.sr-body .st-quote-form__legend {
    text-transform: none; letter-spacing: -.01em; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; font-stretch: 118%;
    color: var(--sr-text); border-bottom-color: var(--sr-line);
}
.sr-body .st-quote-form__optional { color: var(--sr-dim) !important; text-transform: none; letter-spacing: 0; }
.sr-body .st-contact-alert--ok { border-color: rgba(127, 212, 163, .45); }
.sr-body .st-contact-alert--err { border-color: rgba(255, 138, 128, .5); }

/* red accents from studio.css mapped to the showroom palette (red stays only in the logo) */
.sr-body .st-menu__label, .sr-body .st-about-card__lbl, .sr-body .st-showcase__meta, .sr-body .st-card__meta,
.sr-body .st-cms-step__n, .sr-body .st-process-grid__n, .sr-body .st-policy-item__n, .sr-body .st-svc-row__icon,
.sr-body .st-quote-services__cat, .sr-body .st-panel-kicker, .sr-body .st-panel-order-card__stage, .sr-body .st-panel-pick-card__stage,
.sr-body .st-footer__title, .sr-body .st-faq__icon, .sr-body .st-marquee__track span::after, .sr-body .st-contact-form__field label span,
.sr-body .st-quote-cta__badge, .sr-body .st-svc-scope__n, .sr-body .st-drives-grid__n {
    color: var(--sr-mute) !important;
}
.sr-body .st-price-row__amt, .sr-body .st-service-price, .sr-body .st-quote-confirm__amount, .sr-body .st-detail-meta__row--gain dd,
.sr-body .st-dyno-result__col--gain .st-dyno-result__num, .sr-body .st-power__gain .st-power__val, .sr-body .st-price-row__cta,
.sr-body .st-page-hero__back, .sr-body .st-panel-order-card__link, .sr-body .st-panel-notify__link, .sr-body .st-panel-notify__clear,
.sr-body .st-quote-cta__icon, .sr-body .st-panel-step__num {
    color: var(--sr-text) !important;
}
.sr-body .st-svc-row:hover .st-svc-row__n, .sr-body .st-svc-row:hover .st-svc-row__arrow, .sr-body .st-showcase__card:hover .st-showcase__more,
.sr-body .st-about-card__val a:hover, .sr-body .st-page-hero__trail a:hover, .sr-body .st-contact-board__phone-val:hover,
.sr-body a.st-contact-board__val:hover, .sr-body .st-quote-cat-table__remove:hover, .sr-body .st-footer__contact-val--link:hover,
.sr-body .st-panel-order-card h2 a:hover, .sr-body .st-svc-scope__cell:hover .st-svc-scope__n, .sr-body .st-drives-grid__cell:hover .st-drives-grid__n,
.sr-body .st-error-links__item:hover .st-error-links__arrow {
    color: #fff !important;
}
/* bullets, bars, dots */
.sr-body .st-dyno-board__list li::before, .sr-body .st-blog-prose__list li::before, .sr-body .st-about-card__checks li::before,
.sr-body .st-promo-card__list li::before, .sr-body .st-quote-cta__steps li::before, .sr-body .st-equip-grid__dot {
    background: var(--sr-mute) !important;
}
.sr-body .st-dyno-board__fill--gain, .sr-body .st-order-timeline__fill, .sr-body .st-panel-wizard__progress-bar,
.sr-body .st-order-timeline__step.is-current .st-order-timeline__dot {
    background: var(--sr-text) !important;
}
/* badges and numbered chips: light chip, dark text */
.sr-body .st-showcase__badge, .sr-body .st-cms-badge, .sr-body .st-card__badge, .sr-body .st-svc-scope__badge, .sr-body .st-quote-steps__num,
.sr-body .st-panel-status, .sr-body .st-panel-notify__badge, .sr-body .st-dyno-board__gain span {
    background: var(--sr-text) !important; color: var(--sr-bg) !important; border-color: var(--sr-text) !important;
}
/* bands that were solid red */
.sr-body .st-cta, .sr-body .st-page-cta-band, .sr-body .st-quote-cta--compact, .sr-body .st-panel-dashboard__welcome {
    background: var(--sr-bg-2) !important; color: var(--sr-text) !important;
    border-top: 1px solid var(--sr-line) !important; border-bottom: 1px solid var(--sr-line) !important; border-left: 0 !important; border-right: 0 !important;
}
.sr-body .st-page-cta-band__title, .sr-body .st-cta__title {
    font-stretch: 125% !important; font-weight: 500 !important; letter-spacing: -.035em !important; font-size: clamp(2rem, 4.2vw, 4rem) !important; line-height: 1 !important;
}
.sr-body .st-page-cta-band__text, .sr-body .st-cta__text { color: var(--sr-mute) !important; }
.sr-body .st-page-cta-band .st-btn, .sr-body .st-cta .st-btn { border-color: rgba(255, 255, 255, .45) !important; }
.sr-body .st-page-cta-band .st-btn:first-child, .sr-body .st-cta .st-btn:first-child {
    background: var(--sr-text) !important; color: var(--sr-bg) !important; border-color: var(--sr-text) !important;
}
.sr-body .st-quote-cta--strip::before, .sr-body .st-page-hero::before, .sr-body .st-error-hero::before, .sr-body .st-menu__grid::before,
.sr-body .st-hero__chip::before, .sr-body .st-hero__scroll-line, .sr-body .st-hero__bg-sweep {
    display: none !important;
}
/* hover / selected / focus states */
.sr-body .st-svc-row:hover { background: rgba(255, 255, 255, .04) !important; }
.sr-body .st-showcase__card:hover, .sr-body .st-pills a:hover, .sr-body .st-page-jump a:hover, .sr-body .st-quote-cat-pick:hover,
.sr-body .st-quote-cat-electronic__item:hover, .sr-body .st-panel-order-card:hover, .sr-body .st-faq__item[open], .sr-body .st-panel-active-order {
    border-color: var(--sr-line-2) !important;
}
.sr-body .st-quote-intent__option:has(input:checked), .sr-body .st-panel-pick-card:has(input:checked), .sr-body .st-panel-filter-btn.is-active {
    background: rgba(255, 255, 255, .06) !important; border-color: #fff !important; color: var(--sr-text) !important;
}
.sr-body .st-contact-form__field input:focus, .sr-body .st-contact-form__field textarea:focus, .sr-body .st-contact-form__field select:focus,
.sr-body .st-quote-cat-table input:focus, .sr-body .st-quote-confirm__reject-note:focus {
    border-color: #fff !important;
}
/* side accent lines */
.sr-body .st-cms-callout, .sr-body .st-cms-callout--note, .sr-body .st-contact-board__phone, .sr-body .st-quote-form__disclaimer,
.sr-body .st-quote-total, .sr-body .st-quote-form__note--lead, .sr-body .st-story-split__quote, .sr-body .st-mod-intro__quote,
.sr-body .st-pull-statement__a, .sr-body .st-order-timeline__step.is-current {
    border-left-color: var(--sr-line-2) !important;
}
.sr-body .st-quote-form__note--lead { background: var(--sr-bg-2) !important; color: var(--sr-text) !important; }
.sr-body .st-story-split__quote { background: transparent !important; }
.sr-body .st-contact-form__rodo input, .sr-body .st-quote-intent__option input, .sr-body .st-quote-services__item input,
.sr-body .st-quote-cat-pick input, .sr-body .st-quote-cat-electronic__item input {
    accent-color: #f3f2ef !important;
}

/* small uppercase labels -> quiet sentence-case labels */
.sr-body .st-menu__label, .sr-body .st-about-card__lbl, .sr-body .st-dyno-board__metric-head, .sr-body .st-quote-cta__badge,
.sr-body .st-cms-badge, .sr-body .st-bento-contact__label, .sr-body .st-detail-meta__row dt, .sr-body .st-dyno-result__tag,
.sr-body .st-dyno-result__unit, .sr-body .st-contact-board__label, .sr-body .st-quote-services__cat, .sr-body .st-quote-total__label,
.sr-body .st-quote-cat-table th, .sr-body .st-quote-confirm__row dt, .sr-body .st-quote-confirm__reject-label, .sr-body .st-cennik-nav__label,
.sr-body .st-story-split__contact p span, .sr-body .st-power__label, .sr-body .st-svc-scope__badge, .sr-body .st-footer__title,
.sr-body .st-footer__contact-lbl, .sr-body .st-panel-kicker, .sr-body .st-panel-status__label, .sr-body .st-panel-summary dt,
.sr-body .st-panel-prefill__grid dt, .sr-body .st-order-timeline__hero-kicker {
    text-transform: none !important; letter-spacing: 0 !important; font-family: var(--sr-font) !important; font-weight: 400 !important;
}
.sr-body .st-dyno-result__tag, .sr-body .st-contact-board__label, .sr-body .st-quote-confirm__row dt, .sr-body .st-detail-meta__row dt,
.sr-body .st-power__label, .sr-body .st-quote-total__label { font-size: 14px !important; color: var(--sr-mute) !important; }

/* red-tinted surfaces -> neutral */
.sr-body .st-quote-cta--card { background: var(--sr-bg-2) !important; }
.sr-body .st-quote-cta__icon { background: transparent !important; border-color: var(--sr-line-2) !important; }
.sr-body .st-dyno-result__col--gain { background: var(--sr-bg-3) !important; }
.sr-body .st-showcase__media--empty { background: var(--sr-bg-3) !important; }
.sr-body .st-panel-notify__item.is-unread { background: rgba(255, 255, 255, .05) !important; }
.sr-body .st-quote-cat-pick:hover, .sr-body .st-quote-cat-electronic__item:hover { background: rgba(255, 255, 255, .04) !important; }

/* big figures in the showroom face */
.sr-body .st-dyno-result__num, .sr-body .st-contact-board__phone-val, .sr-body .st-reviews__score, .sr-body .st-power__val,
.sr-body .st-quote-confirm__amount, .sr-body .st-stats__val, .sr-body .st-error-hero__code {
    font-family: var(--sr-font) !important; font-stretch: 125% !important; font-weight: 300 !important; letter-spacing: -.04em !important;
}
.sr-body .st-svc-row__title { font-stretch: 118%; font-weight: 500; letter-spacing: -.015em; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.sr-body .st-svc-row__n { color: var(--sr-dim) !important; font-family: var(--sr-font); }
.sr-body .st-page-jump { background: transparent !important; }
.sr-body .st-page-jump a, .sr-body .st-pills a { border-radius: 999px !important; background: transparent !important; }
.sr-body .st-faq__icon { color: var(--sr-mute) !important; }

/* cookie banner */
.sr-body .st-cookie-consent { background: rgba(13, 13, 14, .97); border-top: 1px solid var(--sr-line); }
.sr-body .st-cookie-consent__title { color: var(--sr-text) !important; letter-spacing: 0 !important; text-transform: none !important; font: 500 15px var(--sr-font) !important; font-stretch: 112% !important; }
.sr-body .st-cookie-consent__text { color: var(--sr-mute); }
.sr-body.sr-menu-open .st-cookie-consent, .sr-body.sr-menu-open .sr-dock { visibility: hidden; }

/* old hero / page hero styles are not used by this theme's markup, but keep legacy variants tidy */
.sr-body .st-page-hero { padding-top: clamp(150px, 16vw, 210px); }

/* ============ 4. Subpage components (prototype A) ============ */
.sr-sec--tight { padding: clamp(56px, 7vw, 100px) 0; }
.sr-phead + .sr-sec:not(.sr-sec--alt), .sr-phead + script + .sr-sec:not(.sr-sec--alt) { padding-top: clamp(24px, 3vw, 48px); }
.sr-sec--cont { padding-top: 0; }
.sr-phead__cta { margin-top: 34px; }
.sr-h3 {
    margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-stretch: 120% !important; font-weight: 500 !important; letter-spacing: -.025em !important; line-height: 1.05 !important;
}
.sr-small { font-size: 14.5px; color: var(--sr-mute); }
.sr-note-text { margin: 40px 0 0; font-size: 13px; color: var(--sr-dim); }
.sr-lead--wide { max-width: 44rem; }
.sr-mb { margin-bottom: clamp(36px, 5vw, 64px); }

/* two-column text: heading on the left, copy on the right */
.sr-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.sr-cols2 .sr-about__p:first-child, .sr-about > div > .sr-about__p:first-child { margin-top: 0; }
.sr-copy .sr-about__p { margin: 0 0 18px; }
.sr-copy .sr-about__p--first { color: var(--sr-text); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; font-stretch: 108%; }

/* pillars, modules, inline lists */
.sr-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 88px); }
.sr-pillar { padding: 32px 0; border-top: 1px solid var(--sr-line); }
.sr-pillars .sr-pillar:last-child { border-bottom: 1px solid var(--sr-line); }
.sr-pillars:not(.sr-pillars--3) .sr-pillar:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--sr-line); }
.sr-pillars--3 .sr-pillar:nth-last-child(-n+3) { border-bottom: 1px solid var(--sr-line); }
.sr-pillar .sr-h3 { margin-bottom: 14px; }
.sr-pillar p { margin: 0; color: var(--sr-mute); max-width: 32rem; }
.sr-pillar__badge { margin-left: 10px; font-size: 13.5px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--sr-mute); vertical-align: middle; }
.sr-pillar .sr-tl { display: inline-block; margin-top: 18px; }
.sr-pillar .sr-pre { margin-bottom: 10px; }
.sr-pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-mods { margin: 0; border-top: 1px solid var(--sr-line); }
.sr-mods div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sr-line); }
.sr-mods dt { font-stretch: 118%; font-weight: 500; }
.sr-mods dd { margin: 0; color: var(--sr-mute); font-size: 15.5px; }
.sr-list--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); margin-bottom: 0; }
.sr-list--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; }
.sr-pgrid.sr-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-list--flush { margin-top: 0; }
.sr-inline { margin: 22px 0 0; color: var(--sr-mute); font-size: 15px; font-stretch: 108%; }

/* note row */
.sr-noterow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(40px, 6vw, 110px); padding-top: 32px; border-top: 1px solid var(--sr-line); }
.sr-noterow .sr-lead { margin: 0; }
.sr-noterow--solo { grid-template-columns: minmax(0, 1fr); }

/* big "next" link */
.sr-next { display: block; text-decoration: none; color: inherit; padding: clamp(56px, 7vw, 110px) 0; border-top: 1px solid var(--sr-line); }
.sr-next .sr-h2 { color: var(--sr-dim); transition: color .3s; }
.sr-next:hover .sr-h2 { color: var(--sr-text); }
.sr-next .sr-lead { margin-top: 22px; }
.sr-sec .sr-next { border-bottom: 1px solid var(--sr-line); }

/* price rows */
.sr-prow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 7rem 11rem; gap: 6px 32px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--sr-line); }
.sr-prows > .sr-prow:last-child { border-bottom: 1px solid var(--sr-line); }
.sr-prow__name { font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-stretch: 112%; font-weight: 500; letter-spacing: -.01em; }
.sr-prow__desc { color: var(--sr-mute); font-size: 15px; line-height: 1.5; }
.sr-prow__time { color: var(--sr-mute); font-size: 14.5px; }
.sr-prow__price { text-align: right; font-size: 16.5px; font-stretch: 112%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-prow__price.is-soft { color: var(--sr-mute); font-size: 14.5px; }
.sr-prow__ask { display: block; margin-top: 6px; font-size: 13.5px; color: var(--sr-mute); text-decoration: none; }
.sr-prow__ask:hover { color: #fff; }
.sr-pgroup + .sr-pgroup { margin-top: clamp(64px, 8vw, 110px); }
.sr-pgroup__h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 28px; }
.sr-pgroup__sub { margin: 36px 0 12px; font-size: 14px; color: var(--sr-mute); }
.sr-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; }

/* split feature with image */
.sr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.sr-split__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sr-bg-3); }
.sr-split__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) contrast(1.05) saturate(.9); }
.sr-split .sr-h2 { margin-bottom: 24px; }
.sr-kv { margin: 34px 0 36px; padding: 0; border-top: 1px solid var(--sr-line); }
.sr-kv div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--sr-line); }
.sr-kv dt { color: var(--sr-mute); font-size: 15px; }
.sr-kv dd { margin: 0; text-align: right; font-stretch: 108%; }

/* FAQ */
.sr-faq details { border-top: 1px solid var(--sr-line); }
.sr-faq details:last-child { border-bottom: 1px solid var(--sr-line); }
.sr-faq summary {
    display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-stretch: 115%; font-weight: 500; letter-spacing: -.015em;
}
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: "+"; color: var(--sr-mute); font-weight: 300; font-size: 1.4em; line-height: .8; }
.sr-faq details[open] summary::after { content: "\2212"; }
.sr-faq details p { margin: 0 0 26px; max-width: 44rem; color: var(--sr-mute); }
.sr-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.sr-detail--faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.sr-detail--dyno { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: end; }
.sr-detail .sr-lead { margin-top: 22px; }

/* contact block */
.sr-phone {
    display: inline-block; font-size: clamp(2.9rem, 8.6vw, 8.6rem); font-stretch: 125%; font-weight: 400;
    letter-spacing: -.045em; line-height: .95; text-decoration: none; white-space: nowrap; color: var(--sr-text); font-variant-numeric: tabular-nums;
}
.sr-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 100px); padding-top: 32px; border-top: 1px solid var(--sr-line); }
.sr-cols3 h3 { margin: 0 0 10px; font-size: 14px !important; font-weight: 400 !important; font-stretch: 100% !important; letter-spacing: 0 !important; color: var(--sr-mute) !important; }
.sr-cols3 p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; }
.sr-cols3 .sr-cta-row { gap: 14px 24px; margin-top: 4px; }

/* projects grid & detail */
.sr-filters { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 34px; }
.sr-filters button {
    background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; cursor: pointer;
    font: 400 15.5px var(--sr-font); font-stretch: 110%; color: var(--sr-dim); transition: color .2s, border-color .2s;
}
.sr-filters button:hover { color: var(--sr-text); }
.sr-filters button[aria-pressed="true"] { color: var(--sr-text); border-bottom-color: var(--sr-text); }
.sr-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); }
.sr-item { display: block; margin: 0; text-decoration: none; color: inherit; }
.sr-item[hidden] { display: none; }
.sr-item__img { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; background: var(--sr-bg-3); }
.sr-item__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) contrast(1.05) saturate(.88); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sr-item:hover .sr-item__img img { transform: scale(1.04); }
.sr-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; }
.sr-cap b { font-weight: 500; font-stretch: 112%; font-size: 17px; letter-spacing: -.01em; }
.sr-cap span { color: var(--sr-mute); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-pimg { aspect-ratio: 16 / 8; overflow: hidden; border-radius: 2px; background: var(--sr-bg-2); }
.sr-pimg img, .sr-pimg button { width: 100%; height: 100%; }
.sr-pimg img { object-fit: cover; filter: brightness(.9) contrast(1.05) saturate(.9); }
.sr-pimg button, .sr-gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 2px; }
.sr-prose--lines p { margin: 0 0 12px; font-size: 17px; }
.sr-h1.sr-h1--post { font-size: clamp(2.1rem, 4.6vw, 4.5rem); max-width: 18ch; }
.sr-pgroup { scroll-margin-top: 110px; }
.sr-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.sr-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; filter: brightness(.88) contrast(1.05) saturate(.9); }
.sr-gallery--wide { margin-top: clamp(56px, 7vw, 100px); }
.sr-spec { width: 100%; max-width: 32rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sr-spec--full { max-width: none; }
.sr-spec th, .sr-spec td { padding: 13px 0; border-top: 1px solid var(--sr-line); text-align: left; font-weight: 400; vertical-align: baseline; }
.sr-spec tr:last-child th, .sr-spec tr:last-child td { border-bottom: 1px solid var(--sr-line); }
.sr-spec th { color: var(--sr-mute); font-size: 14.5px; width: 34%; }
.sr-spec td { font-size: 16.5px; font-stretch: 112%; color: var(--sr-text); }
.sr-spec td span { color: var(--sr-dim); }
.sr-scope { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--sr-line); }
.sr-scope li { padding: 14px 0; border-bottom: 1px solid var(--sr-line); font-stretch: 108%; }
.sr-prose { max-width: 44rem; }
.sr-prose p, .sr-prose .st-prose p { margin: 0 0 22px; font-size: 18px; line-height: 1.65; color: #d9d7d2; }
.sr-prose ul { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--sr-line); }
.sr-prose li { padding: 12px 0; border-bottom: 1px solid var(--sr-line); color: #d9d7d2; }
.sr-prose li::before { display: none !important; }
.sr-prose h2, .sr-prose h3 { margin: 1.6em 0 .6em; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.1; }
.sr-prose h2:first-child { margin-top: 0; }
.sr-prose a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* project caption second line */
.sr-cap__sub { margin: 6px 0 0; font-size: 14px; color: var(--sr-mute); }

/* project photo mosaic: one large + two stacked, "+N" on the last tile */
.sr-mosaic { display: grid; gap: clamp(8px, 1vw, 14px); height: clamp(320px, 52vw, 640px); }
.sr-mosaic--1 { grid-template-columns: 1fr; }
.sr-mosaic--2 { grid-template-columns: 2fr 1fr; }
.sr-mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sr-mosaic--3 .sr-mosaic__i:first-child { grid-row: 1 / span 2; }
.sr-mosaic__i { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--sr-bg-3); cursor: zoom-in; }
.sr-mosaic__i img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92) contrast(1.05) saturate(.9); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sr-mosaic__i:hover img { transform: scale(1.03); }
.sr-mosaic__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 13, 14, .55); color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-stretch: 118%; font-weight: 500; }

/* news: thumbnails in rows, featured post */
.sr-nrow--thumb { grid-template-columns: 11rem minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: start; padding: 26px 0; }
.sr-nrow__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--sr-bg-3); }
.sr-nrow__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) contrast(1.05) saturate(.9); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sr-nrow:hover .sr-nrow__img img { transform: scale(1.04); }
.sr-nrow__head { display: grid; gap: 10px; }
.sr-nrow--thumb .sr-nrow__e { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sr-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; text-decoration: none; color: inherit; }
.sr-feature__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: var(--sr-bg-3); }
.sr-feature__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92) contrast(1.05) saturate(.9); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sr-feature:hover .sr-feature__img img { transform: scale(1.03); }
.sr-feature__txt { display: flex; flex-direction: column; }
.sr-feature__t { font-size: clamp(1.8rem, 3.4vw, 3.2rem); font-stretch: 122%; font-weight: 500; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.sr-feature .sr-lead { margin-top: 22px; }

/* single post: text + uncropped photo */
.sr-post { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.sr-post__media { position: sticky; top: 110px; }
.sr-post__cover { display: block; width: 100%; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--sr-bg-3); cursor: zoom-in; }
.sr-post__cover img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.sr-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sr-thumbs button { display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--sr-bg-3); cursor: zoom-in; }
.sr-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* photo preview (lightbox) */
.sr-lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #080809; color: var(--sr-text); }
.sr-lb[hidden] { display: none; }
.sr-lb__top { display: flex; align-items: center; gap: 24px; padding: 18px var(--sr-gut); }
.sr-lb__title { margin: 0; flex: 1; min-width: 0; font-stretch: 112%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-lb__count { margin: 0; color: var(--sr-mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.sr-lb__close { background: none; border: 0; padding: 8px 0; color: #fff; font: 500 15px var(--sr-font); cursor: pointer; }
.sr-lb__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 clamp(16px, 7vw, 110px); }
.sr-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; user-select: none; }
.sr-lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--sr-line-2); background: rgba(13, 13, 14, .6); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s, color .2s;
}
.sr-lb__nav:hover { background: var(--sr-text); color: var(--sr-bg); }
.sr-lb__prev { left: var(--sr-gut); }
.sr-lb__next { right: var(--sr-gut); }
.sr-lb__thumbs { display: flex; gap: 8px; justify-content: safe center; padding: 16px var(--sr-gut) 22px; overflow-x: auto; scrollbar-width: none; }
.sr-lb__thumbs button { flex: 0 0 72px; height: 54px; padding: 0; border: 1px solid transparent; border-radius: 2px; overflow: hidden; background: none; opacity: .45; cursor: pointer; transition: opacity .2s; }
.sr-lb__thumbs button:hover { opacity: .8; }
.sr-lb__thumbs button[aria-current="true"] { opacity: 1; border-color: #fff; }
.sr-lb__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* dyno page */
.sr-big { margin: 0; font-size: clamp(4.4rem, 11vw, 11rem); font-stretch: 125%; font-weight: 300; letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-big small { font-size: .28em; letter-spacing: -.01em; font-weight: 400; margin-left: .2em; color: var(--sr-mute); }
.sr-car-name { margin: 26px 0 22px; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-stretch: 112%; font-weight: 500; letter-spacing: -.01em; }
.sr-picker { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 34px 0 0; padding: 0; list-style: none; }
.sr-picker button {
    background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; cursor: pointer;
    font: 400 14.5px var(--sr-font); font-stretch: 108%; color: var(--sr-dim); transition: color .2s, border-color .2s;
}
.sr-picker button:hover { color: var(--sr-text); }
.sr-picker button[aria-pressed="true"] { color: var(--sr-text); border-bottom-color: var(--sr-text); }
.sr-rtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sr-rtable th { text-align: left; font-weight: 400; font-size: 14px; color: var(--sr-mute); padding: 0 16px 14px 0; border-bottom: 1px solid var(--sr-line-2); }
.sr-rtable td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--sr-line); font-size: 16.5px; font-stretch: 108%; }
.sr-rtable td:first-child { font-weight: 500; font-stretch: 112%; }
.sr-rtable td:first-child a { color: inherit; text-decoration: none; }
.sr-rtable td:first-child a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sr-rtable .r { text-align: right; padding-right: 0; }
.sr-rtable td.r { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 300; font-stretch: 125%; letter-spacing: -.02em; }

/* service index rows */
.sr-rows { border-bottom: 1px solid var(--sr-line); }
.sr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; padding: 26px 0 24px; border-top: 1px solid var(--sr-line); text-decoration: none; color: inherit; }
.sr-row__name { font-size: clamp(1.75rem, 3.5vw, 3.3rem); font-stretch: 125%; font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--sr-dim); transition: color .3s; }
.sr-row__meta { font-size: 14px; color: var(--sr-mute); white-space: nowrap; font-stretch: 108%; }
.sr-row__desc { grid-column: 1 / -1; max-width: 34rem; font-size: 15.5px; color: var(--sr-mute); line-height: 1.5; }
.sr-row:hover .sr-row__name, .sr-row:focus-visible .sr-row__name { color: var(--sr-text); }

/* forms: underline fields like the prototype */
.sr-body .sr-form-wrap input[type="text"], .sr-body .sr-form-wrap input[type="email"], .sr-body .sr-form-wrap input[type="tel"],
.sr-body .sr-form-wrap input[type="number"], .sr-body .sr-form-wrap input[type="date"], .sr-body .sr-form-wrap select, .sr-body .sr-form-wrap textarea {
    background-color: transparent; border: 0; border-bottom: 1px solid var(--sr-line-2); border-radius: 0;
    padding: 10px 0 12px; font-size: 18px; font-stretch: 108%; box-shadow: none;
}
.sr-body .sr-form-wrap input:focus, .sr-body .sr-form-wrap select:focus, .sr-body .sr-form-wrap textarea:focus {
    border-color: var(--sr-line-2) !important; border-bottom-color: #fff !important; box-shadow: none !important;
}
.sr-body .sr-form-wrap select option { background: var(--sr-bg-3); color: #fff; }
.sr-body .sr-form-wrap textarea { min-height: 110px; line-height: 1.5; }
.sr-body .sr-form-wrap ::placeholder { color: #55544f; }
.sr-body .sr-form-wrap .st-contact-form, .sr-body .sr-form-wrap .st-quote-form {
    background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
/* quote form choices as chips and hairline rows (prototype), no boxed panels */
.sr-body .sr-form-wrap .st-quote-cat-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-body .sr-form-wrap .st-quote-cat-electronic { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.sr-body .sr-form-wrap .st-quote-cat-pick, .sr-body .sr-form-wrap .st-quote-cat-electronic__item {
    position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
    border: 1px solid var(--sr-line-2) !important; border-radius: 999px; background: transparent !important;
    font-size: 15px; font-stretch: 108%; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.sr-body .sr-form-wrap .st-quote-cat-pick input, .sr-body .sr-form-wrap .st-quote-cat-electronic__item input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.sr-body .sr-form-wrap .st-quote-cat-pick__title, .sr-body .sr-form-wrap .st-quote-cat-electronic__name { font-weight: 500; font-size: 15px; color: inherit; }
.sr-body .sr-form-wrap .st-quote-cat-pick:has(input:checked), .sr-body .sr-form-wrap .st-quote-cat-electronic__item:has(input:checked) {
    background: var(--sr-text) !important; color: var(--sr-bg); border-color: var(--sr-text) !important;
}
.sr-body .sr-form-wrap .st-quote-cat-pick:has(input:focus-visible), .sr-body .sr-form-wrap .st-quote-cat-electronic__item:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.sr-body .sr-form-wrap .st-quote-intent { gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--sr-line); }
.sr-body .sr-form-wrap .st-quote-intent__option, .sr-body .sr-form-wrap .st-quote-intent__option:has(input:checked) {
    padding: 16px 0; border: 0 !important; border-bottom: 1px solid var(--sr-line) !important; background: transparent !important; color: var(--sr-mute);
}
.sr-body .sr-form-wrap .st-quote-intent__option:has(input:checked) .st-quote-intent__title { color: #fff; }
.sr-body .sr-form-wrap .st-quote-intent__title { color: var(--sr-mute); font-weight: 500; font-stretch: 112%; }
.sr-body .sr-form-wrap .st-quote-form__disclaimer, .sr-body .sr-form-wrap .st-quote-form__note--lead,
.sr-body .sr-form-wrap .st-quote-submit-summary {
    background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--sr-mute) !important; font-size: 14px;
}
.sr-body .sr-form-wrap .st-quote-cat-panel { background: transparent; border: 0; border-top: 1px solid var(--sr-line); padding: 18px 0 4px; }
.sr-body .sr-form-wrap .st-quote-form__note { color: var(--sr-mute); font-size: 13.5px; }
.sr-aside { display: grid; gap: 40px; align-content: start; }
.sr-aside .sr-phone { font-size: clamp(2.4rem, 4.4vw, 4rem); }

/* scroll-driven entrance (content stays visible where unsupported) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sr-rv { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
        .sr-item__img img, .sr-gallery img, .sr-card__img img { animation: sr-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    }
}
@keyframes sr-rise { from { opacity: .3; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes sr-zoom { from { scale: 1.12; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
    .sr-body *, .sr-body *::before, .sr-body *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
    .sr-cols2, .sr-split, .sr-detail, .sr-detail--faq, .sr-detail--dyno { grid-template-columns: 1fr; }
    .sr-pillars--3 { grid-template-columns: 1fr 1fr; }
    .sr-pillars--3 .sr-pillar:nth-last-child(3) { border-bottom: 0; }
    .sr-list--cols { grid-template-columns: 1fr 1fr; }
    .sr-pgrid.sr-pgrid--3 { grid-template-columns: 1fr 1fr; }
    .sr-cols3 { grid-template-columns: 1fr; }
    .sr-noterow { grid-template-columns: 1fr; }
    .sr-prow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; }
    .sr-prow__desc { grid-column: 1 / -1; grid-row: 2; }
    .sr-prow__time { grid-column: 1 / -1; grid-row: 3; }
    .sr-prow__price { grid-column: 2; grid-row: 1; }
    .sr-split__img { aspect-ratio: 4 / 3; }
    .sr-split--rev .sr-split__img { order: -1; }
    .sr-feature, .sr-post { grid-template-columns: 1fr; }
    .sr-post__media { position: static; order: -1; }
    .sr-nrow--thumb { grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 20px; }
    .sr-nrow--thumb .sr-nrow__img { grid-row: 1 / span 3; }
    .sr-nrow--thumb .sr-nrow__head, .sr-nrow--thumb .sr-nrow__e, .sr-nrow--thumb .sr-nrow__a { grid-column: 2; grid-row: auto; }
}
@media (max-width: 640px) {
    .sr-pillars, .sr-pillars--3 { grid-template-columns: 1fr; }
    .sr-pillars .sr-pillar:not(:last-child) { border-bottom: 0 !important; }
    .sr-list--cols, .sr-list--pair { grid-template-columns: 1fr; }
    .sr-pgrid, .sr-pgrid.sr-pgrid--3 { grid-template-columns: 1fr; }
    .sr-mods div { grid-template-columns: 1fr; gap: 4px; }
    .sr-phead__cta .sr-btn { flex: 1 1 100%; }
    .sr-pimg { aspect-ratio: 4 / 3; }
    .sr-rtable thead { display: none; }
    .sr-rtable, .sr-rtable tbody, .sr-rtable tr, .sr-rtable td { display: block; width: 100%; }
    .sr-rtable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid var(--sr-line); }
    .sr-rtable td { border: 0; padding: 0; font-size: 15px; }
    .sr-rtable td:first-child { grid-column: 1 / -1; font-size: 17px; margin-bottom: 2px; }
    .sr-rtable td[data-l]::before { content: attr(data-l) " "; color: var(--sr-mute); }
    .sr-rtable td.r { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
    .sr-row { padding: 22px 0; }
    .sr-row__name { font-size: 1.6rem; color: var(--sr-text); }
    .sr-row__meta { grid-column: 1; grid-row: 3; margin-top: 8px; }
    .sr-mosaic { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .sr-mosaic .sr-mosaic__i { aspect-ratio: 4 / 3; }
    .sr-mosaic .sr-mosaic__i:first-child { grid-column: 1 / -1; grid-row: auto; }
    .sr-nrow--thumb { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 6px 16px; }
    .sr-nrow--thumb .sr-nrow__e { -webkit-line-clamp: 3; }
    .sr-lb__nav { display: none; }
    .sr-lb__stage { padding: 0; }
}