:root {
    --ink-950: #171116;
    --ink-900: #241820;
    --plum-800: #4b2940;
    --pink-500: #e875b5;
    --pink-400: #f094c7;
    --pink-100: #fde7f3;
    --cyan-500: #4fc5e8;
    --cyan-100: #e1f6fc;
    --stone-50: #fffafd;
    --stone-100: #f8f0f5;
    --stone-200: #eadce5;
    --ink: #21191f;
    --muted: #73656e;
    --white: #fffefe;
    --shadow: 0 24px 70px rgba(24, 17, 23, .12);
    --radius-lg: 28px;
    --radius-md: 18px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--stone-50); font-family: "DM Sans", Arial, sans-serif; line-height: 1.6; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin-top: 0; font-family: "Manrope", Arial, sans-serif; letter-spacing: -.045em; line-height: 1.08; }
p { color: var(--muted); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 2000; padding: 10px 16px; border-radius: 6px; background: var(--white); }
.skip-link:focus { top: 12px; }

.site-header { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(24, 17, 23, .07); background: rgba(255, 250, 253, .93); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-950); text-decoration: none; }
.brand img { width: 58px; height: 58px; object-fit: contain; clip-path: circle(41.8% at 50% 50%); filter: drop-shadow(0 5px 10px rgba(75, 41, 64, .15)); }
.brand-copy { display: flex; flex-direction: column; line-height: .94; text-transform: uppercase; }
.brand-copy strong { font: 800 21px/1 "Manrope", Arial, sans-serif; letter-spacing: -.05em; }
.brand-copy small { margin-top: 5px; font: 600 9px/1 "Manrope", Arial, sans-serif; letter-spacing: .28em; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 12px 22px; border: 0; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 39px; padding: 8px 17px; font-size: .86rem; }
.button-pink { color: var(--ink-950); background: var(--pink-500); }
.button-pink:hover, .button-pink:focus-visible { background: var(--pink-400); box-shadow: 0 10px 28px rgba(232, 117, 181, .3); }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid rgba(24, 17, 23, .25); font-weight: 800; text-decoration: none; }
.text-link.light { border-color: rgba(255,255,255,.3); color: var(--white); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--plum-800); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow > span { width: 25px; height: 2px; background: var(--pink-500); }

.hero-section { position: relative; min-height: 680px; overflow: hidden; background: linear-gradient(135deg, var(--ink-950), #2c1927 70%, #43253a); }
.hero-section::before { content: ""; position: absolute; top: -390px; left: -340px; width: 800px; height: 800px; border: 1px solid rgba(79, 197, 232, .14); border-radius: 50%; box-shadow: 0 0 0 89px rgba(232,117,181,.03), 0 0 0 178px rgba(79,197,232,.02); }
.hero-grid { display: grid; min-height: 680px; grid-template-columns: minmax(0, .764fr) minmax(0, 1.236fr); align-items: center; gap: 89px; padding: 70px 0 82px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { color: var(--pink-400); }
.hero-copy h1 { max-width: 590px; margin-bottom: 26px; color: var(--white); font-size: clamp(3.25rem, 5vw, 5rem); font-weight: 700; }
.hero-copy h1 em { display: block; color: var(--cyan-500); font-style: normal; font-weight: 600; }
.hero-copy > p { max-width: 530px; color: rgba(255,255,255,.68); font-size: 1.12rem; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 38px 0 46px; }
.hero-note { display: flex; align-items: center; gap: 13px; color: var(--white); }
.quality-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(79,197,232,.45); border-radius: 50%; color: var(--cyan-500); }
.hero-note > span:last-child { display: flex; flex-direction: column; }
.hero-note small { color: rgba(255,255,255,.48); font-size: .78rem; }
.hero-gallery { position: relative; }
.hero-gallery::before { content: ""; position: absolute; inset: -22px 34px 23px -22px; border: 1px solid rgba(232,117,181,.32); border-radius: 320px 320px 32px 32px; }
.gallery-placeholder { position: relative; display: grid; min-height: 515px; overflow: hidden; place-items: center; border-radius: 280px 280px 24px 24px; background: radial-gradient(circle at 30% 25%, #8e426e, #48263d 58%, #261821); box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.gallery-placeholder::before, .gallery-placeholder::after { content: ""; position: absolute; width: 70%; height: 43%; border: 2px solid rgba(79,197,232,.20); border-radius: 50%; }
.gallery-placeholder::before { top: 58%; left: -10%; transform: rotate(11deg); }
.gallery-placeholder::after { top: 40%; right: -22%; transform: rotate(-16deg); }
.placeholder-card { position: relative; z-index: 2; max-width: 330px; padding: 38px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(24,17,23,.52); backdrop-filter: blur(10px); }
.placeholder-card span { color: var(--cyan-500); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.placeholder-card strong { display: block; margin: 11px 0; color: var(--white); font: 700 1.45rem/1.25 "Manrope", Arial, sans-serif; }
.placeholder-card small { color: rgba(255,255,255,.58); }
.floating-badge { position: absolute; right: -32px; bottom: 76px; z-index: 8; display: flex; width: 105px; height: 105px; flex-direction: column; align-items: center; justify-content: center; border: 8px solid var(--ink-950); border-radius: 50%; color: var(--ink-950); background: var(--pink-500); text-align: center; transform: rotate(-6deg); }
.floating-badge strong { font-family: "Manrope", Arial, sans-serif; font-size: .92rem; }
.floating-badge span { max-width: 70px; font-size: .66rem; line-height: 1.2; }

.promise-strip { color: var(--white); background: var(--plum-800); }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.promise-grid > div { display: grid; grid-template: auto auto / 42px 1fr; padding: 30px 35px; border-left: 1px solid rgba(255,255,255,.1); }
.promise-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.promise-grid span { grid-row: 1 / 3; color: var(--cyan-500); font: 700 .72rem "Manrope", Arial, sans-serif; }
.promise-grid strong { font-family: "Manrope", Arial, sans-serif; font-size: .95rem; }
.promise-grid small { color: rgba(255,255,255,.52); font-size: .74rem; }

.section-pad { padding: 112px 0; }
.section-heading h2 { max-width: 650px; margin-bottom: 0; color: var(--ink-950); font-size: clamp(2.3rem, 4vw, 3.8rem); }
.section-heading.centred { display: flex; max-width: 670px; margin: 0 auto 60px; align-items: center; flex-direction: column; text-align: center; }
.section-heading.centred p { max-width: 570px; }
.section-heading.split { display: flex; margin-bottom: 48px; align-items: end; justify-content: space-between; gap: 55px; }
.section-heading.split > p { max-width: 450px; margin: 0 0 5px; color: rgba(255,255,255,.52); }
.eyebrow.light { color: var(--pink-100); }
.button-dark { color: var(--white); background: var(--ink-950); }
.button-dark:hover, .button-dark:focus-visible { background: var(--plum-800); box-shadow: 0 10px 24px rgba(24, 17, 23, .2); }

.hero-photo { position: relative; min-height: 515px; margin: 0; overflow: hidden; border-radius: 280px 280px 24px 24px; background: var(--plum-800); box-shadow: 0 35px 90px rgba(0,0,0,.32); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(24,17,23,.86)); }
.hero-photo img { display: block; width: 100%; height: 515px; object-fit: cover; }
.hero-photo figcaption { position: absolute; right: 42px; bottom: 40px; left: 42px; z-index: 2; display: flex; flex-direction: column; color: var(--white); }
.hero-photo figcaption span { color: var(--cyan-500); font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-photo figcaption strong { font: 700 1.35rem "Manrope", Arial, sans-serif; }
.hero-photo figcaption small { margin-top: 3px; color: rgba(255,255,255,.66); }
.hero-carousel { position: relative; }
.hero-carousel-slide { animation: carousel-fade .45s ease; }
.hero-carousel-controls { position: absolute; right: 31px; bottom: 18px; left: 31px; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.hero-carousel-controls button { display: grid; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: var(--white); background: rgba(24,17,23,.68); cursor: pointer; backdrop-filter: blur(7px); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-carousel-controls button:hover, .hero-carousel-controls button:focus-visible { border-color: var(--cyan-500); background: var(--plum-800); transform: translateY(-1px); }
.carousel-arrow { width: 34px; font-size: 1.45rem; line-height: 1; }
.carousel-pause { min-width: 58px; padding: 0 12px !important; font: 700 .66rem "Manrope", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.carousel-dots { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.carousel-dots button { width: 9px; height: 9px; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }
.carousel-dots button.active { border-color: var(--pink-500); background: var(--pink-500); transform: scale(1.18); }
@keyframes carousel-fade { from { opacity: .45; } to { opacity: 1; } }

.intro-section { background: var(--stone-50); }
.intro-grid { display: grid; grid-template-columns: minmax(0, .764fr) minmax(0, 1.236fr); gap: 89px; align-items: start; }
.intro-copy .lead { margin-top: 0; color: var(--ink); font: 600 1.3rem/1.6 "Manrope", Arial, sans-serif; }
.intro-copy p:not(.lead) { max-width: 650px; }

.services-overview { background: var(--white); }
.services-overview .section-heading { margin-bottom: 48px; }
.services-overview .section-heading.split > p { color: var(--muted); }
.services-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-overview-card { display: flex; min-height: 285px; padding: 34px 30px; flex-direction: column; border: 1px solid var(--stone-200); border-radius: var(--radius-md); background: var(--stone-50); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.service-overview-card:hover { border-color: rgba(232,117,181,.65); box-shadow: 0 22px 46px rgba(24,17,23,.08); transform: translateY(-5px); }
.service-overview-card > span { color: var(--pink-500); font: 800 .68rem "Manrope", Arial, sans-serif; letter-spacing: .12em; }
.service-overview-card h3 { margin: 28px 0 13px; color: var(--ink-950); font-size: 1.35rem; }
.service-overview-card p { margin: 0 0 24px; }
.service-overview-card .text-link { margin-top: auto; align-self: start; }
.estimate-banner { display: grid; margin-top: 24px; padding: 36px 40px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 45px; border-radius: var(--radius-md); color: var(--white); background: linear-gradient(125deg, var(--plum-800), var(--ink-950)); }
.estimate-banner span { color: var(--cyan-500); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.estimate-banner h3 { margin: 7px 0 5px; color: var(--white); font-size: 1.55rem; }
.estimate-banner p { max-width: 710px; margin: 0; color: rgba(255,255,255,.62); }
.estimate-banner .button-dark { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.estimate-banner .button-dark:hover, .estimate-banner .button-dark:focus-visible { background: var(--pink-500); }

.service-area-section { overflow: hidden; background: linear-gradient(135deg, var(--pink-100), #fff7fb 58%, #f4e8f0); }
.service-area-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); align-items: center; gap: clamp(55px, 8vw, 115px); }
.service-area-copy h2 { max-width: 720px; margin: 13px 0 23px; color: var(--ink-950); font-size: clamp(2.45rem, 4.8vw, 4.5rem); letter-spacing: -.055em; }
.service-area-copy p { max-width: 690px; margin-bottom: 31px; font-size: 1.03rem; }
.service-area-card { position: relative; padding: 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); color: var(--white); background: linear-gradient(145deg, var(--plum-800), var(--ink-950)); box-shadow: 0 28px 70px rgba(36,23,32,.18); }
.service-area-card::after { content: ""; position: absolute; top: -95px; right: -80px; width: 220px; height: 220px; border: 42px solid rgba(79,197,232,.12); border-radius: 50%; }
.service-area-card > div { position: relative; z-index: 1; display: flex; align-items: end; gap: 12px; margin-bottom: 27px; }
.service-area-card > div strong { color: var(--cyan-500); font: 800 4.4rem/.78 "Manrope", Arial, sans-serif; letter-spacing: -.08em; }
.service-area-card > div span { max-width: 85px; color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.service-area-card > p { margin-bottom: 14px; color: rgba(255,255,255,.62); font-size: .74rem; }
.service-area-card ul { position: relative; z-index: 1; display: grid; margin: 0 0 26px; padding: 0; grid-template-columns: 1fr 1fr; gap: 9px; list-style: none; }
.service-area-card li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.9); font-size: .78rem; font-weight: 600; }
.service-area-card li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--pink-400); box-shadow: 0 0 0 4px rgba(232,117,181,.12); }
.service-area-card small { position: relative; z-index: 1; display: block; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font-size: .65rem; line-height: 1.5; }

.process-section { background: var(--white); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.process-card { position: relative; min-height: 300px; padding: 38px 28px 30px; overflow: hidden; border: 1px solid var(--stone-200); border-radius: var(--radius-md); background: var(--stone-50); transition: transform .25s, border .25s, box-shadow .25s; }
.process-card:hover { transform: translateY(-8px); border-color: rgba(232,117,181,.7); box-shadow: 0 24px 46px rgba(24,17,23,.08); }
.process-card > span { position: absolute; top: 19px; right: 21px; color: #a0a9a7; font: 700 .68rem "Manrope", Arial, sans-serif; }
.process-icon { display: grid; width: 62px; height: 62px; margin-bottom: 50px; place-items: center; border-radius: 50%; color: var(--ink-950); background: var(--pink-100); font-size: 1.55rem; }
.process-card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.process-card p { margin: 0; font-size: .9rem; }

.panels-section { color: var(--white); background: linear-gradient(145deg, var(--ink-950), #321e2d); }
.panels-section .section-heading h2 { color: var(--white); }
.panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.panel-card a { display: block; color: inherit; text-decoration: none; }
.panel-image { position: relative; display: block; overflow: hidden; aspect-ratio: 1.18 / 1; border-radius: var(--radius-md); background: var(--plum-800); }
.panel-image::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(24,17,23,.75)); }
.panel-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.panel-card:hover img { transform: scale(1.045); }
.panel-card-action { position: absolute; right: 16px; bottom: 15px; left: 16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: var(--white); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.panel-card-action b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: .9rem; }
.panel-copy { display: flex; padding: 16px 3px 0; flex-direction: column; }
.panel-copy strong { color: var(--white); font: 700 1.14rem "Manrope", Arial, sans-serif; }
.panel-copy small { color: rgba(255,255,255,.48); }
.empty-gallery { display: flex; min-height: 210px; padding: 42px; align-items: center; justify-content: center; gap: 25px; border: 1px dashed rgba(255,255,255,.22); border-radius: var(--radius-md); text-align: left; }
.empty-gallery .empty-mark { display: grid; width: 68px; height: 68px; flex: none; place-items: center; border-radius: 50%; color: var(--cyan-500); background: rgba(79,197,232,.1); font-size: 1.8rem; }
.empty-gallery strong { color: var(--white); font: 700 1.35rem "Manrope", Arial, sans-serif; }
.empty-gallery p { margin: 5px 0 0; color: rgba(255,255,255,.5); }
.empty-gallery code { color: var(--pink-400); }

.panel-collection-hero { padding: 88px 0 72px; background: linear-gradient(135deg, var(--pink-100), #fff7fb 58%, #f4e8f0); }
.panel-collection-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; }
.panel-collection-heading h1 { margin: 8px 0 0; color: var(--ink-950); font-size: clamp(3.2rem, 6vw, 5.8rem); }
.panel-collection-heading p { max-width: 520px; margin: 0 0 8px; font-size: 1.03rem; }
.panel-collection-intro { display: flex; align-items: start; flex-direction: column; gap: 14px; }
.panel-collection-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.panel-collection-page { min-height: 55vh; background: var(--stone-50); }
.panel-collection-page .panel-copy strong { color: var(--ink-950); }
.panel-collection-page .panel-copy small { color: var(--muted); }
.panel-guide-section { background: #fff; }
.panel-guide-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.panel-guide-intro h2 { max-width: 620px; }
.panel-guide-copy .lead { margin-top: 0; color: var(--ink); font: 600 1.2rem/1.6 "Manrope", Arial, sans-serif; }
.panel-guide-copy p:last-child { margin-bottom: 0; }
.panel-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.panel-guide-card { padding: 30px; border: 1px solid var(--stone-200); border-radius: var(--radius-lg); background: var(--stone-50); }
.panel-guide-card > span { display: inline-block; margin-bottom: 28px; color: var(--pink-600); font-weight: 800; letter-spacing: .08em; }
.panel-guide-card h3 { margin: 0 0 12px; color: var(--ink-950); font-size: 1.25rem; }
.panel-guide-card p { margin: 0; color: var(--muted); }
.panel-gallery-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; margin-bottom: 44px; }
.panel-gallery-heading h2 { margin: 8px 0 0; }
.panel-gallery-heading p { margin: 0 0 5px; }
.panel-faq-section { background: #fff; }
.panel-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.panel-faq-list { border-top: 1px solid var(--stone-200); }
.panel-faq-list details { border-bottom: 1px solid var(--stone-200); }
.panel-faq-list summary { position: relative; padding: 22px 46px 22px 0; color: var(--ink-950); font-weight: 700; cursor: pointer; list-style: none; }
.panel-faq-list summary::-webkit-details-marker { display: none; }
.panel-faq-list summary::after { content: "+"; position: absolute; right: 2px; top: 18px; color: var(--pink-600); font-size: 1.5rem; font-weight: 500; }
.panel-faq-list details[open] summary::after { content: "−"; }
.panel-faq-list details p { margin: -4px 46px 22px 0; color: var(--muted); }
.collection-count { margin-bottom: 28px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.collection-count strong { color: var(--pink-500); }
.collection-empty, .panel-status { padding: 55px 30px; border: 1px dashed var(--stone-200); border-radius: var(--radius-md); text-align: center; }
.collection-empty strong { color: var(--ink-950); font: 700 1.3rem "Manrope", Arial, sans-serif; }
.collection-empty p { margin: 8px 0 0; }

.panel-detail-hero { padding: 54px 0 75px; color: var(--white); background: linear-gradient(135deg, var(--ink-950), #382033 70%, var(--plum-800)); }
.panel-back-link { display: inline-flex; margin-bottom: 34px; align-items: center; gap: 10px; color: rgba(255,255,255,.65); font-size: .84rem; font-weight: 700; text-decoration: none; }
.panel-back-link:hover { color: var(--white); }
.panel-detail-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: center; gap: 75px; }
.panel-detail-heading h1 { margin: 8px 0 20px; color: var(--white); font-size: clamp(3.2rem, 6vw, 5.8rem); }
.panel-detail-heading p { max-width: 650px; color: rgba(255,255,255,.62); font-size: 1.05rem; }
.panel-detail-heading small { color: var(--cyan-500); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-detail-meta { display: flex; margin-top: 25px; align-items: center; flex-wrap: wrap; gap: 20px; }
.panel-detail-heading > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 8px solid rgba(255,255,255,.1); border-radius: 24px; box-shadow: 0 28px 70px rgba(0,0,0,.28); transform: rotate(1.5deg); }
.panel-detail-status { min-height: 60vh; display: grid; align-items: center; background: var(--stone-50); }
.panel-detail-status h1 { max-width: 720px; font-size: clamp(2.7rem, 5vw, 4.6rem); }
.panel-photo-section { background: var(--stone-50); }
.panel-photo-heading { display: flex; margin-bottom: 36px; align-items: end; justify-content: space-between; gap: 40px; }
.panel-photo-heading span { color: var(--pink-500); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.panel-photo-heading h2 { margin: 4px 0 0; color: var(--ink-950); font-size: clamp(2rem, 3.5vw, 3.2rem); }
.panel-photo-heading p { max-width: 320px; margin: 0 0 6px; }
.panel-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.panel-photo-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-md); background: var(--stone-100); box-shadow: 0 14px 35px rgba(24,17,23,.08); cursor: zoom-in; }
.panel-photo-card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(24,17,23,.55)); opacity: .6; transition: opacity .25s ease; }
.panel-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.panel-photo-number { position: absolute; top: 14px; left: 15px; z-index: 1; color: var(--white); font: 800 .64rem "Manrope", Arial, sans-serif; letter-spacing: .1em; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.panel-photo-expand { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--white); background: rgba(24,17,23,.25); transition: background .25s ease, transform .25s ease; }
.panel-photo-expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.panel-photo-card:hover img { transform: scale(1.045); }
.panel-photo-card:hover::after { opacity: .9; }
.panel-photo-card:hover .panel-photo-expand { background: var(--pink-500); transform: scale(1.08); }
.panel-photo-card:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 4px; }

.service-page-hero { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(135deg, var(--ink-950), #382033 70%, var(--plum-800)); }
.service-page-hero::before { content: ""; position: absolute; top: -260px; left: -210px; width: 620px; height: 620px; border: 1px solid rgba(79,197,232,.13); border-radius: 50%; box-shadow: 0 0 0 72px rgba(232,117,181,.025); }
.panel-service-hero { background: linear-gradient(135deg, #102c36, var(--ink-950) 72%, var(--plum-800)); }
.service-page-hero-grid { position: relative; z-index: 1; display: grid; min-height: 665px; padding: 76px 0 82px; grid-template-columns: minmax(0, 1.08fr) minmax(350px, .72fr); align-items: center; gap: clamp(55px, 8vw, 105px); }
.service-page-copy .eyebrow { margin-bottom: 17px; color: var(--pink-400); }
.service-page-copy h1 { max-width: 760px; margin-bottom: 24px; color: var(--white); font-size: clamp(3rem, 5.2vw, 5.3rem); }
.service-page-copy > p { max-width: 700px; color: rgba(255,255,255,.67); font-size: 1.08rem; }
.service-breadcrumb { display: inline-flex; margin-bottom: 34px; align-items: center; gap: 9px; color: rgba(255,255,255,.52); font-size: .72rem; font-weight: 700; text-decoration: none; }
.service-breadcrumb:hover, .service-breadcrumb:focus-visible { color: var(--white); }
.service-page-actions { display: flex; margin-top: 34px; align-items: center; flex-wrap: wrap; gap: 24px; }
.service-page-photo { position: relative; min-height: 470px; margin: 0; overflow: hidden; border: 8px solid rgba(255,255,255,.09); border-radius: 230px 230px 24px 24px; background: var(--plum-800); box-shadow: 0 32px 80px rgba(0,0,0,.3); }
.service-page-photo::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(24,17,23,.88)); }
.service-page-photo img { display: block; width: 100%; height: 470px; object-fit: cover; }
.service-page-photo figcaption { position: absolute; right: 30px; bottom: 28px; left: 30px; z-index: 1; display: flex; flex-direction: column; }
.service-page-photo figcaption span { color: var(--cyan-500); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.service-page-photo figcaption strong { font: 700 1.08rem "Manrope", Arial, sans-serif; }
.service-proof-strip { color: var(--white); background: var(--plum-800); }
.service-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.service-proof-grid > div { padding: 29px 32px; border-left: 1px solid rgba(255,255,255,.1); }
.service-proof-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.service-proof-grid strong, .service-proof-grid span { display: block; }
.service-proof-grid strong { margin-bottom: 4px; color: var(--cyan-500); font: 700 .92rem "Manrope", Arial, sans-serif; }
.service-proof-grid span { color: rgba(255,255,255,.57); font-size: .77rem; }
.service-content-section { background: var(--stone-50); }
.service-content-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .7fr); align-items: center; gap: clamp(55px, 8vw, 105px); }
.service-content-copy h2 { max-width: 760px; margin-bottom: 24px; color: var(--ink-950); font-size: clamp(2.5rem, 4.6vw, 4.35rem); }
.service-content-copy .lead { max-width: 720px; color: var(--ink); font: 600 1.18rem/1.6 "Manrope", Arial, sans-serif; }
.service-content-copy > p:not(.lead) { max-width: 720px; margin-bottom: 30px; }
.estimate-card { padding: 38px; border: 1px solid var(--stone-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.estimate-card > span { color: var(--pink-500); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.estimate-card h3 { margin: 13px 0 14px; color: var(--ink-950); font-size: 1.45rem; }
.estimate-card p { margin: 0 0 22px; }
.estimate-card ul { margin: 22px 0; padding: 0; list-style: none; }
.estimate-card li { position: relative; padding: 10px 0 10px 25px; border-bottom: 1px solid var(--stone-100); color: var(--ink); font-size: .88rem; }
.estimate-card li::before { content: "✓"; position: absolute; left: 0; color: var(--pink-500); font-weight: 800; }
.estimate-card small { display: block; color: var(--muted); line-height: 1.6; }
.renovation-section { background: var(--white); }
.service-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-feature-card { min-height: 230px; padding: 32px 29px; border: 1px solid var(--stone-200); border-radius: var(--radius-md); background: var(--stone-50); }
.service-feature-card > span { color: var(--pink-500); font: 800 .67rem "Manrope", Arial, sans-serif; letter-spacing: .12em; }
.service-feature-card h3 { margin: 27px 0 12px; color: var(--ink-950); font-size: 1.3rem; }
.service-feature-card p { margin: 0; }
.service-crosslink { display: grid; margin-top: 24px; padding: 33px 38px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; border-radius: var(--radius-md); background: var(--pink-100); }
.service-crosslink > div { display: flex; flex-direction: column; }
.service-crosslink span { color: var(--pink-500); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.service-crosslink strong { margin-top: 5px; color: var(--ink-950); font: 700 1.12rem "Manrope", Arial, sans-serif; }
.service-inline-links { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.service-contact-section { color: var(--white); background: linear-gradient(135deg, var(--plum-800), var(--ink-950)); }
.service-contact-card { display: grid; grid-template-columns: 1.15fr .75fr auto; align-items: center; gap: 55px; }
.service-contact-card h2 { margin: 0; color: var(--white); font-size: clamp(2.2rem, 3.6vw, 3.7rem); }
.service-contact-card p { margin: 0; color: rgba(255,255,255,.62); }
.contact-phone-light { color: var(--ink-950); background: var(--pink-500); box-shadow: 0 16px 38px rgba(0,0,0,.22); }
.contact-phone-light:hover, .contact-phone-light:focus-visible { color: var(--ink-950); background: var(--pink-400); }
.contact-phone-light span { color: var(--plum-800); }

body.lightbox-open { overflow: hidden; }
.project-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; color: var(--white); background: rgba(18,13,18,.975); }
.project-lightbox::backdrop { background: rgba(18,13,18,.82); backdrop-filter: blur(14px); }
.project-lightbox[open] { animation: lightbox-in .25s ease-out; }
.project-lightbox-shell { display: grid; height: 100%; padding: clamp(18px, 3vw, 38px) clamp(18px, 4vw, 58px) clamp(16px, 2.5vw, 30px); grid-template-rows: auto minmax(0, 1fr) auto; }
.project-lightbox-header, .project-lightbox-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.project-lightbox-header > div:first-child > span { display: block; margin-bottom: 3px; color: var(--pink-400); font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-lightbox-header h2 { margin: 0; color: var(--white); font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: -.02em; }
.project-lightbox-tools { display: flex; align-items: center; gap: 13px; }
.project-lightbox-counter { min-width: 68px; color: rgba(255,255,255,.72); font: 700 .72rem "Manrope", Arial, sans-serif; letter-spacing: .08em; text-align: center; }
.project-lightbox-close, .project-lightbox-arrow { display: grid; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.075); cursor: pointer; backdrop-filter: blur(10px); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.project-lightbox-close { width: 46px; height: 46px; }
.project-lightbox-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.project-lightbox-close:hover, .project-lightbox-arrow:hover { border-color: rgba(255,255,255,.5); background: var(--pink-500); transform: scale(1.05); }
.project-lightbox-close:focus-visible, .project-lightbox-arrow:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 3px; }
.project-lightbox-stage { display: grid; min-height: 0; grid-template-columns: 68px minmax(0, 1fr) 68px; align-items: center; gap: clamp(12px, 2.5vw, 36px); touch-action: pan-y; }
.project-lightbox-stage figure { display: grid; min-width: 0; height: 100%; margin: 0; place-items: center; }
.project-lightbox-stage figure img { display: block; max-width: 100%; max-height: calc(100dvh - 178px); border-radius: clamp(10px, 1.4vw, 18px); opacity: 0; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.4); transform: scale(.985); transition: opacity .22s ease, transform .3s ease; }
.project-lightbox-stage figure img.is-loaded { opacity: 1; transform: scale(1); }
.project-lightbox-arrow { width: 58px; height: 58px; }
.project-lightbox-arrow svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.project-lightbox-arrow.previous { justify-self: start; }
.project-lightbox-arrow.next { justify-self: end; }
.project-lightbox-footer { min-height: 34px; padding-top: 8px; color: rgba(255,255,255,.6); }
.project-lightbox-footer p { margin: 0; color: inherit; font-size: .7rem; }
.project-lightbox-footer small { font-size: .61rem; letter-spacing: .04em; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.gallery-section { background: var(--stone-50); }
.gallery-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.gallery-heading > p { max-width: 520px; margin: 0 0 6px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-card { position: relative; display: block; min-height: 350px; overflow: hidden; border-radius: var(--radius-md); background: var(--stone-100); box-shadow: 0 15px 38px rgba(24,17,23,.08); }
.project-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(24,17,23,.9)); }
.project-card img { display: block; width: 100%; height: 350px; object-fit: cover; transition: transform .4s ease; }
.project-card:hover img { transform: scale(1.045); }
.project-card > span { position: absolute; right: 24px; bottom: 22px; left: 24px; z-index: 1; display: flex; flex-direction: column; color: var(--white); }
.project-card small { color: var(--cyan-500); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-card strong { font: 700 1.25rem "Manrope", Arial, sans-serif; }
.project-card em { color: rgba(255,255,255,.6); font-size: .75rem; font-style: normal; }
.gallery-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 225px auto; gap: 18px; }
.gallery-template-grid > div { position: relative; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--stone-100), #f0dfe9); }
.gallery-template-grid > div::before { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(75,41,64,.12); border-radius: 50%; }
.gallery-template-grid > div span { position: absolute; top: 20px; left: 22px; color: var(--plum-800); font: 800 .68rem "Manrope", Arial, sans-serif; }
.gallery-template-grid article { grid-column: 1 / -1; display: flex; padding: 28px 32px; align-items: center; gap: 28px; border: 1px solid var(--stone-200); border-radius: var(--radius-md); background: var(--white); }
.gallery-template-grid article small { color: var(--pink-500); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gallery-template-grid article strong { font: 700 1.15rem "Manrope", Arial, sans-serif; }
.gallery-template-grid article p { margin: 0 0 0 auto; }

.closing-section { background: var(--pink-100); }
.closing-card { display: grid; grid-template-columns: 1.45fr .9fr auto; align-items: center; gap: 55px; padding: 60px 65px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.closing-card h2 { margin: 0; color: var(--ink-950); font-size: clamp(2rem, 3vw, 3rem); }
.closing-card .eyebrow { margin-bottom: 12px; }
.closing-card p { margin: 0; }
.contact-phone { display: flex; min-width: 205px; padding: 15px 20px; flex-direction: column; border-radius: 14px; color: var(--white); background: var(--ink-950); text-align: center; text-decoration: none; box-shadow: 0 14px 30px rgba(24,17,23,.18); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.contact-phone:hover, .contact-phone:focus-visible { background: var(--plum-800); box-shadow: 0 18px 36px rgba(24,17,23,.24); transform: translateY(-2px); }
.contact-phone span { color: var(--pink-400); font-size: .64rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.contact-phone strong { font: 800 1.23rem "Manrope", Arial, sans-serif; letter-spacing: .01em; }
.review-section { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--plum-800), var(--ink-950)); }
.review-section::before { content: ""; position: absolute; right: -210px; bottom: -370px; width: 680px; height: 680px; border: 1px solid rgba(79,197,232,.18); border-radius: 50%; box-shadow: 0 0 0 75px rgba(232,117,181,.04), 0 0 0 150px rgba(79,197,232,.025); }
.review-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(285px, .618fr); align-items: center; gap: 78px; }
.review-copy h2 { max-width: 700px; margin-bottom: 24px; color: var(--white); font-size: clamp(2.6rem, 4.7vw, 4.7rem); }
.review-copy p { max-width: 650px; margin-bottom: 31px; color: rgba(255,255,255,.62); font-size: 1.02rem; }
.review-qr { display: flex; max-width: 355px; justify-self: end; flex-direction: column; align-items: center; padding: 26px 28px 25px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: var(--ink); background: var(--white); box-shadow: 0 28px 70px rgba(0,0,0,.28); text-decoration: none; transform: rotate(1.5deg); transition: transform .25s, box-shadow .25s; }
.review-qr:hover, .review-qr:focus-visible { color: var(--ink); box-shadow: 0 34px 80px rgba(0,0,0,.34); transform: rotate(0) translateY(-5px); }
.review-qr img { width: 250px; height: 250px; margin: 6px 0 13px; border-radius: 8px; image-rendering: pixelated; }
.review-stars { color: var(--pink-500); font-size: 1.05rem; letter-spacing: .16em; }
.review-qr strong { font: 700 1rem "Manrope", Arial, sans-serif; }
.review-qr small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.not-found { min-height: 65vh; display: grid; align-items: center; background: radial-gradient(circle at 70% 20%, var(--pink-100), var(--stone-50) 48%); }
.not-found h1 { max-width: 760px; margin-bottom: 20px; color: var(--ink-950); font-size: clamp(3rem, 6vw, 5.4rem); }
.not-found p { max-width: 620px; margin-bottom: 30px; font-size: 1.05rem; }

.site-footer { padding: 80px 0 25px; color: var(--white); background: #051720; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .6fr 1fr; gap: 90px; padding-bottom: 65px; }
.brand-footer { color: var(--white); }
.footer-grid > div:first-child > p { max-width: 360px; margin: 20px 0 0; color: rgba(255,255,255,.46); }
.footer-grid h2 { margin-bottom: 18px; color: var(--cyan-500); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: start; }
.footer-grid a:not(.brand) { margin: 4px 0; color: rgba(255,255,255,.65); text-decoration: none; font-size: .86rem; }
.footer-grid p { margin: 0 0 10px; color: rgba(255,255,255,.46); }
.footer-link { border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-grid .footer-phone { margin-bottom: 8px; color: var(--white); font: 800 1.16rem "Manrope", Arial, sans-serif; letter-spacing: .01em; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.34); font-size: .72rem; }

#blazor-error-ui { display: none; }
.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto; margin: auto; }
.loading-progress circle { fill: none; stroke: var(--stone-200); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--pink-500); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { position: absolute; inset: calc(20vh + 3.25rem) 0 auto; text-align: center; font-weight: 800; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

@media (max-width: 991px) {
    .hero-grid { grid-template-columns: 1fr; gap: 60px; padding-top: 85px; }
    .hero-copy { max-width: 680px; }
    .hero-gallery { width: min(650px, 100%); margin: auto; }
    .service-area-grid { grid-template-columns: 1fr; }
    .service-area-card { width: min(620px, 100%); }
    .services-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-overview-grid .service-overview-card:last-child { grid-column: 1 / -1; }
    .service-page-hero-grid, .service-content-grid { grid-template-columns: 1fr; }
    .service-page-photo { width: min(620px, 100%); }
    .service-contact-card { grid-template-columns: 1fr auto; }
    .service-contact-card p { grid-row: 2; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .panel-detail-heading { gap: 45px; }
    .panel-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing-card { grid-template-columns: 1fr auto; }
    .closing-card p { grid-row: 2; }
    .review-card { grid-template-columns: 1fr; gap: 45px; }
    .review-qr { justify-self: start; }
    .footer-grid { gap: 45px; }
}

@media (max-width: 767px) {
    .container { width: min(100% - 28px, 1180px); }
    .hero-grid { min-height: auto; }
    .hero-copy h1 { font-size: 3.25rem; }
    .hero-actions { align-items: start; flex-direction: column; }
    .gallery-placeholder, .hero-photo, .hero-photo img { min-height: 430px; height: 430px; }
    .floating-badge { right: -5px; bottom: -20px; }
    .promise-grid { grid-template-columns: 1fr; }
    .promise-grid > div { border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
    .section-pad { padding: 76px 0; }
    .intro-grid, .gallery-heading { grid-template-columns: 1fr; gap: 35px; }
    .services-overview-grid, .service-proof-grid, .service-feature-grid { grid-template-columns: 1fr; }
    .services-overview-grid .service-overview-card:last-child { grid-column: auto; }
    .estimate-banner, .service-crosslink { grid-template-columns: 1fr; gap: 25px; padding: 30px 27px; }
    .service-page-hero-grid { min-height: auto; padding: 62px 0 70px; }
    .service-page-copy h1 { font-size: 3rem; }
    .service-page-photo, .service-page-photo img { min-height: 410px; height: 410px; }
    .service-proof-grid > div { border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
    .estimate-card { padding: 30px 25px; }
    .service-contact-card { display: flex; align-items: start; flex-direction: column; gap: 23px; }
    .panel-collection-heading, .panel-detail-heading, .panel-guide-intro, .panel-faq-layout { grid-template-columns: 1fr; gap: 34px; }
    .panel-guide-grid { grid-template-columns: 1fr; }
    .panel-gallery-heading { grid-template-columns: 1fr; gap: 20px; }
    .panel-collection-hero { padding: 70px 0 55px; }
    .panel-detail-hero { padding: 42px 0 58px; }
    .panel-detail-heading > img { width: min(420px, 100%); transform: none; }
    .panel-photo-heading { align-items: start; flex-direction: column; gap: 14px; }
    .project-lightbox-shell { padding: 16px 12px 13px; }
    .project-lightbox-header { padding: 0 4px; }
    .project-lightbox-header > div:first-child > span { font-size: .52rem; }
    .project-lightbox-header h2 { max-width: 47vw; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
    .project-lightbox-tools { gap: 5px; }
    .project-lightbox-counter { min-width: 55px; font-size: .65rem; }
    .project-lightbox-close { width: 41px; height: 41px; }
    .project-lightbox-stage { position: relative; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 4px; }
    .project-lightbox-stage figure img { max-height: calc(100dvh - 150px); border-radius: 10px; }
    .project-lightbox-arrow { position: relative; z-index: 2; width: 43px; height: 43px; background: rgba(18,13,18,.58); }
    .project-lightbox-arrow svg { width: 21px; height: 21px; }
    .project-lightbox-footer { padding: 4px 4px 0; }
    .project-lightbox-footer small { display: none; }
    .service-area-copy h2 { font-size: 2.75rem; }
    .service-area-card { padding: 29px 25px; }
    .process-grid, .panel-grid, .project-grid { grid-template-columns: 1fr; }
    .process-card { min-height: 250px; }
    .process-icon { margin-bottom: 30px; }
    .section-heading.split { align-items: start; flex-direction: column; gap: 20px; }
    .empty-gallery { align-items: start; flex-direction: column; }
    .gallery-template-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 170px 170px auto; }
    .gallery-template-grid > div:last-of-type { grid-column: 1 / -1; }
    .gallery-template-grid article { flex-direction: column; align-items: start; gap: 8px; }
    .gallery-template-grid article p { margin: 0; }
    .closing-card { display: flex; align-items: start; flex-direction: column; gap: 23px; padding: 38px 28px; }
    .review-qr { width: 100%; max-width: none; padding: 22px; }
    .review-qr img { width: min(250px, 100%); height: auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
    .hero-copy h1 { font-size: 2.72rem; }
    .gallery-placeholder, .hero-photo, .hero-photo img { min-height: 365px; height: 365px; }
    .service-page-copy h1 { font-size: 2.58rem; }
    .service-page-actions { align-items: start; flex-direction: column; }
    .service-page-photo, .service-page-photo img { min-height: 350px; height: 350px; }
    .placeholder-card { margin: 20px; padding: 25px; }
    .hero-photo figcaption { right: 25px; bottom: 62px; left: 25px; }
    .hero-carousel-controls { right: 20px; bottom: 17px; left: 20px; }
    .carousel-dots { gap: 5px; }
    .carousel-dots button { width: 8px; height: 8px; }
    .service-area-card ul { grid-template-columns: 1fr; }
    .gallery-template-grid { display: block; }
    .gallery-template-grid > div { min-height: 145px; margin-bottom: 10px; }
    .gallery-template-grid article { padding: 24px; }
    .panel-photo-grid { grid-template-columns: 1fr; }
    .panel-photo-number { display: none; }
    .project-lightbox-stage { grid-template-columns: 40px minmax(0, 1fr) 40px; }
    .project-lightbox-arrow { width: 38px; height: 38px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div:first-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .project-lightbox[open] { animation: none; }
}