/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/montserrat-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #f0f2f4;
  --white: #fff;
  --ink: #111;
  --body: #333;
  --muted: #686a6b;
  --primary: #4e9e32;
  --action: #3d7e28;
  --line: #dfe2e3;
  --radius: 28px;
  --header-height: 80px;
  --gutter: 20px;
  --section-space: 110px;
  --breadcrumbs-space-before: 28px;
  --breadcrumbs-space-after: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 10px); }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.5 Montserrat, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
h2 { font-size: 40px; line-height: 1.15; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--primary); color: white; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 5px; }
main:focus { outline: none; }
.container { width: 100%; max-width: 1440px; padding-inline: var(--gutter); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--white { background: var(--white); }
.icon { width: 24px; height: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 15px 32px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1.4; text-align: center; transition: background-color .2s, color .2s, border-color .2s; }
.button--green { background: var(--action); color: white; font-size: 16px; }
.button--outline { border-color: var(--ink); }
.button--dark { background: var(--ink); color: white; }
.circle-link { width: 52px; height: 52px; display: inline-flex; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; transition: color .2s, background-color .2s, border-color .2s; }
.text-link { display: inline-block; padding-block: 6px; border-bottom: 1px solid currentColor; font-weight: 600; font-size: 15px; }

/* Shared shell. The mobile navigation remains available without JavaScript. */
.site-header { position: sticky; top: 0; z-index: 50; background: white; box-shadow: 0 1px 2px #0000000d; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-height); }
.brand { flex: none; display: inline-flex; align-items: center; }
.brand img { width: 115.2px; height: auto; }
.desktop-nav { display: none; }
.header-actions { display: none; align-items: center; gap: 24px; }
.header-region { font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--body); }
.button--compact { min-height: 46px; padding: 12px 24px; font-size: 13px; white-space: nowrap; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 0; padding: 9px; background: transparent; }
.js .menu-toggle { display: inline-flex; }
.close-icon, .menu-toggle[aria-expanded="true"] .menu-icon { display: none; }
.menu-toggle[aria-expanded="true"] .close-icon { display: block; }
.mobile-nav { border-top: 1px solid var(--line); background: white; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
.js .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 12px 20px #00000008; }
.mobile-nav-inner { display: flex; flex-direction: column; padding-block: 16px 24px; gap: 4px; }
.mobile-nav a { padding-block: 12px; font-weight: 500; }

/* Desktop services disclosure: the top-level link stays available alongside its toggle. */
.nav-services { display: flex; align-items: center; gap: 5px; }
.nav-services-toggle { display: none; align-items: center; justify-content: center; width: 24px; height: 32px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.js .nav-services-toggle { display: inline-flex; }
.nav-services-toggle svg { transition: transform .18s; }
.nav-services-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-services:has([aria-expanded="true"]), .nav-services a[aria-current] { color: var(--primary); }
.desktop-menu-backdrop { position: fixed; inset: var(--header-height) 0 0; z-index: 1; background: #11111135; }
.desktop-services-panel { position: absolute; z-index: 2; top: 100%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; width: min(1200px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - var(--header-height) - 20px); overflow-y: auto; padding: 28px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 28px 28px; background: white; box-shadow: 0 16px 32px #00000012; }
.desktop-services-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 8px 4px; }
.desktop-services-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: 100%; }
.desktop-services-list li { min-width: 0; }
.desktop-services-list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; border-radius: 12px; }
.desktop-services-list span { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.desktop-services-list small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.desktop-services-all { display: inline-flex; align-items: center; gap: 12px; margin: auto 12px 0; padding-top: 24px; color: var(--primary); font-size: 14px; font-weight: 600; }
.desktop-services-visual { display: block; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--page); }
.desktop-services-visual img { width: 100%; height: 100%; min-height: 300px; max-height: 380px; object-fit: cover; }
@media (hover: hover) {
 .nav-services:hover { color: var(--primary); }
 .desktop-services-list a:hover { background: #f0f6ed; color: var(--action); }
 .desktop-services-all:hover { color: var(--action); }
}
@media (max-width: 1199px) { .desktop-services-panel, .desktop-menu-backdrop { display: none; } }

/* Daylight home hero: live editorial copy over one photographic background. */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: calc(100svh - var(--header-height)); padding-block: 40px 32px; overflow: hidden; color: white; background: #17251c; }
.hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#07110ac4,#07110a85 36%,#07110a26 66%,transparent); }
.hero-content { position: relative; }
.hero-copy { max-width: 650px; }
.hero-eyebrow { margin-bottom: 16px; font-size: 11px; line-height: 1.6; letter-spacing: .18em; font-weight: 500; }
.hero h1 { color: white; font-size: clamp(40px, 5.2vw, 88px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.hero-ending { display: inline-block; }
.hero-lead { margin-top: 20px; font-size: 17px; line-height: 1.6; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 24px; }
.hero-actions .button { background: var(--primary); font-size: 15px; }
.hero-services-link, .hero-materials a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.hero-services-link { font-size: 16px; font-weight: 500; }
.hero-materials { position: absolute; right: var(--gutter); bottom: 40px; display: grid; grid-template-columns: 46% minmax(0,1fr); align-items: center; gap: 16px; width: 440px; padding: 12px; border-radius: 28px; background: white; color: var(--ink); box-shadow: 0 8px 32px #00000012; }
.hero-materials > img { width: 100%; height: 140px; padding: 8px; border-radius: 18px; background: #f0f1f2; object-fit: contain; }
.hero-materials-copy { padding-right: 8px; }
.hero-materials h2 { margin-bottom: 20px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.hero-materials a { display: inline-block; font-size: 13px; line-height: 1.6; }
.hero-directions { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff40; font-size: 13px; line-height: 1.5; }
.hero-directions li { display: flex; }
.hero-directions li + li::before { content: '·'; margin-inline: 10px; color: #ffffffb3; }
.hero-eyebrow:empty, .hero-lead:empty, .hero-directions:empty { display: none; }
@media (max-width: 1199px) {
 .hero { flex-direction: column; justify-content: center; align-items: stretch; }
 .hero-materials { position: static; flex: 0 0 auto; width: min(440px, calc(100% - 2 * var(--gutter))); margin: 28px var(--gutter) 0; }
}
@media (max-width: 767px) {
 .hero::after { background: linear-gradient(90deg,#07110ac9,#07110a9c 65%,#07110a70); }
 .hero-copy { max-width: 560px; }
 .hero-lead { font-size: 15px; }
 .hero-lead br { display: none; }
 .hero-actions { gap: 16px 20px; }
 .hero-actions .button { padding-inline: 24px; font-size: 14px; }
 .hero-services-link { font-size: 14px; }
 .hero-directions { font-size: 12px; }
 .hero-materials { gap: 12px; padding: 10px; border-radius: 22px; }
 .hero-materials > img { height: 112px; border-radius: 14px; }
 .hero-materials h2 { margin-bottom: 14px; font-size: 16px; }
 .hero-materials a { font-size: 12px; }
}
@media (max-width: 374px) { .hero h1 { font-size: 36px; } }
@media (hover: hover) {
 .hero-actions .button:hover { background: var(--action); }
 .hero-services-link:hover, .hero-directions a:hover { color: #b8e2a7; }
 .hero-materials a:hover { color: var(--action); }
}

.intro-heading { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 80px; }
.intro-copy { max-width: 448px; }
.intro-copy p { margin-bottom: 32px; font-weight: 500; color: var(--body); line-height: 1.7; }
.intro-copy .button--green { background: var(--primary); }
.intro-grid { --intro-title-size: 27px; --intro-card-padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.intro-house { min-height: 400px; position: relative; overflow: hidden; border-radius: var(--radius); container-type: inline-size; }
.intro-house img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.intro-house::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #13202e75, #13202e15 42%, transparent 65%); pointer-events: none; }
.intro-house-title { position: relative; z-index: 1; padding: var(--intro-card-padding); color: white; font-size: 10.8cqw; font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.intro-house-title span { display: block; }
/* Outline the rendered silhouette so overlapping variable-font contours stay invisible. */
.intro-outline-filter { position: absolute; pointer-events: none; }
.intro-house-outline { margin-top: .04em; color: white; filter: url(#intro-letter-outline); font-size: 1.55em; font-weight: 600; letter-spacing: -.035em; }
.intro-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.intro-card-title { font-size: var(--intro-title-size); font-weight: 500; line-height: 1.22; letter-spacing: -.035em; }
.intro-card-description { font-size: 14px; font-weight: 400; line-height: 1.6; }
.intro-dark { flex: 1; padding: var(--intro-card-padding); background: var(--ink); color: white; border-radius: var(--radius); }
.intro-dark p { color: #bdbdbd; margin-top: 20px; }
.intro-dark p::before, .intro-green-description::before { content: ""; display: block; width: 42px; height: 1px; margin-bottom: 16px; background: currentColor; opacity: .65; }
.intro-green { display: flex; flex-direction: column; gap: 20px; padding: var(--intro-card-padding); border-radius: var(--radius); background: var(--primary); color: white; }
.intro-green-description { color: #ffffffd9; }
.intro-green-description::before { margin-bottom: 10px; }
.intro-materials { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: var(--intro-card-padding); overflow: hidden; border-radius: var(--radius); background: white; }
.intro-materials-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.intro-materials-heading p { color: var(--muted); }
.intro-materials-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.intro-materials-tags li { padding: 6px 10px; border-radius: 999px; background: var(--page); font-size: 10px; font-weight: 500; line-height: 1.4; }
.intro-materials img { width: calc(100% + 2 * var(--intro-card-padding)); max-width: none; height: auto; margin: auto calc(-1 * var(--intro-card-padding)); object-fit: contain; }
.intro-materials-link { align-self: flex-start; max-width: 100%; margin-top: auto; }

.about { position: relative; overflow: hidden; }
.about-content { position: relative; z-index: 1; max-width: 768px; }
.about h2 { margin-bottom: 40px; }
.about p { max-width: 576px; margin-bottom: 32px; font-weight: 500; line-height: 1.7; color: var(--body); }
.about-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 300px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--line); opacity: .5; pointer-events: none; user-select: none; }

.services-heading { margin-bottom: 32px; }
.services-image, .materials-banner { position: relative; height: 400px; border-radius: var(--radius); overflow: hidden; }
.services-image img, .materials-banner img { width: 100%; height: 100%; object-fit: cover; }
.services-image h2, .materials-banner h2 { position: absolute; z-index: 1; inset: 50% clamp(24px, 3vw, 40px) auto; transform: translateY(-50%); color: white; font-size: clamp(26px, 8.2vw, 64px); text-align: center; text-shadow: 0 2px 12px #0006; overflow-wrap: break-word; }
.service-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 20px; }
.service-cards > li { min-width: 0; }
.service-card { --service-surface: #e6e8e9; position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); background: var(--service-surface); }
.service-card-visual { aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: var(--radius) var(--radius) 20px 20px; }
.service-card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.service-card-copy { flex: 1; min-height: 116px; padding: 18px 22px 24px; }
.service-card h3 { font-size: 25px; font-weight: 600; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: break-word; }
.service-card p { margin-top: 8px; padding-right: 52px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.service-card-arrow { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: white; box-shadow: 0 0 0 12px var(--card-cutout, var(--page)); transition: background-color .2s, color .2s; }
.service-card:focus-visible .service-card-arrow { background: var(--primary); }
.service-card--catalog { --service-surface: var(--primary); color: white; }
.service-card--catalog .service-card-visual { padding: 16px; }
.service-card--catalog .service-card-visual img { object-fit: contain; }
.service-card--catalog p { color: #ffffffe6; }
.service-card--catalog .service-card-arrow { border: 1px solid var(--line); background: white; color: var(--ink); }
.service-card--catalog:focus-visible .service-card-arrow { background: var(--ink); color: white; }

/* Inner service pages retain their text-list layout. */
.service-list li { border-top: 1px solid var(--line); }
.service-list li:last-child { border-bottom: 1px solid var(--line); }
.service-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; padding-block: 32px; transition: background-color .2s; }
.service-row h3 { font-size: 28px; line-height: 1.5; margin-bottom: 8px; }
.service-row p { color: var(--muted); }

.materials-banner { background: white; }
.materials-cards { --card-cutout: var(--white); margin-top: 32px; }

.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 32px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 22px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { width: 30px; height: 30px; color: var(--action); transition: transform .2s; }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { margin-top: 16px; max-width: 672px; line-height: 1.7; color: var(--body); }

.contact { text-align: center; }
.contact h2 { max-width: 768px; margin: 0 auto 16px; }
.contact-intro { margin-bottom: 48px; font-weight: 500; line-height: 1.7; color: var(--body); }
.contact-form { max-width: 448px; margin-inline: auto; }
.contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-form input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; min-height: 56px; border: 1px solid transparent; border-radius: 12px; background: var(--page); padding: 16px 24px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.contact-form input::placeholder { color: #686a6b; opacity: 1; }
.contact-form input:focus-visible { outline-offset: 2px; }
.contact-form input[aria-invalid="true"] { border-color: #b13626; }
.contact-form .button { width: 100%; min-height: 60px; border-radius: 12px; margin-top: 8px; font-size: 16px; }
.contact-form fieldset:disabled .button { cursor: not-allowed; opacity: .6; }
.consent { display: flex; align-items: flex-start; gap: 12px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--muted); cursor: pointer; padding-block: 12px; }
.consent input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--action); }
.field-error { color: #b13626; font-size: 13px; text-align: left; margin-top: -12px; }
.form-status { font-size: 14px; line-height: 1.6; color: var(--body); }
.form-status:not(:empty) { margin-top: 16px; }
.inquiry-topic { color: var(--muted); font-size: 14px; text-align: left; }

.site-footer { background: var(--ink); color: white; padding-block: 64px; }
.footer-top { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.footer-brand { flex: none; }
.footer-brand img { width: 127.5px; height: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px 32px; color: #ffffffcc; font-size: 14px; font-weight: 500; }
.footer-nav a { padding-block: 6px; }
.footer-bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid #ffffff1a; font-size: 13px; color: #ffffff99; }
.site-footer :focus-visible { outline-color: white; }

@media (hover: hover) {
  .button--green:hover { background: #30661f; }
  .intro-copy .button--green:hover { background: #448b2c; }
  .button--outline:hover { background: var(--ink); color: white; }
  .button--dark:hover { background: var(--action); }
  .desktop-nav a:hover, .mobile-nav a:hover, .text-link:hover { color: var(--action); }
  .service-row:hover { background: #ffffff80; }
  .service-row:hover .circle-link { background: var(--action); border-color: var(--action); color: white; }
  .service-card:hover .service-card-arrow { background: var(--primary); }
  .service-card--catalog:hover .service-card-arrow { background: var(--ink); color: white; }
  .service-card:hover .service-card-visual img { transform: scale(1.025); }
  .footer-nav a:hover { color: white; }
}

@media (min-width: 640px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --header-height: 100px; --section-space: 150px; }
  h2 { font-size: 64px; }
  .brand img { width: 124.8px; height: auto; }
  .header-actions { display: flex; margin-left: auto; }
  .intro-heading { flex-direction: row; align-items: flex-end; gap: 40px; margin-bottom: 60px; }
  .intro-heading h2 { flex: none; }
  .intro-copy { max-width: 448px; }
  .intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-house { min-height: 500px; }
  .intro-materials { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px 40px; }
  .intro-materials-heading { grid-column: 1; }
  .intro-materials img { grid-column: 2; grid-row: 1 / 3; width: calc(100% + var(--intro-card-padding)); margin: 0; }
  .intro-materials-link { grid-column: 1; align-self: end; }
  .about, .materials { padding-block: 110px; }
  .services-heading { margin-bottom: 48px; }
  .services-image, .materials-banner { height: 600px; }
  .service-row { flex-direction: row; align-items: center; padding-block: 48px; }
  .service-row h3 { font-size: 34px; }
  .faq summary { font-size: 28px; }
  .footer-top, .footer-bottom { flex-direction: row; align-items: center; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}

@media (min-width: 1200px) {
  .header-inner { gap: 16px; }
  .desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); font-size: 13px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
  .header-actions { margin-left: 0; }
  .js .menu-toggle, .mobile-nav { display: none; }
  .intro-heading { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .intro-heading h2 { grid-column: span 2; }
  .intro-copy { grid-column: 3 / -1; max-width: 576px; }
  .intro-grid { --intro-title-size: clamp(23px, 1.9vw, 27px); --intro-card-padding: clamp(24px, 2vw, 28px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .intro-house { grid-column: span 2; min-height: 540px; }
  .intro-materials { grid-column: auto; display: flex; align-items: stretch; gap: 20px; }
  .intro-materials img { flex: 1 1 160px; min-height: 160px; height: 160px; width: calc(100% + 2 * var(--intro-card-padding)); margin: 0 calc(-1 * var(--intro-card-padding)); }
  .intro-materials-link { align-self: stretch; }
  .service-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-card h3 { font-size: clamp(21px, 1.8vw, 25px); }
  .materials-cards { margin-top: 48px; }
  .faq-layout { grid-template-columns: 5fr 7fr; gap: 20px; }
  .faq h2 { position: sticky; top: 120px; }
}

/* Keep Cyrillic headings and controls inside the viewport at narrow widths and zoom. */
@media (max-width: 1199px) and (min-width: 768px) {
  .intro-heading { flex-direction: column; align-items: flex-start; }
  .intro-copy { max-width: 576px; }
  .header-region { display: none; }
}
@media (max-width: 374px) {
  :root { --gutter: 16px; --section-space: 80px; }
  h2 { font-size: 34px; }
  .brand img { width: 96px; height: auto; }
  .intro-grid { --intro-title-size: 25px; --intro-card-padding: 24px; }
  .button { padding-inline: 20px; }
  .button--green { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .service-card:hover .service-card-visual img { transform: none; }
}
@media (forced-colors: active) {
  .hero-outline, .intro-house-outline { color: CanvasText; -webkit-text-stroke: 0; }
  .intro-house-outline { filter: none; }
  .button, .circle-link { border: 1px solid ButtonText; }
}

/* Inner pages share the home page's type, spacing and restrained material palette. */
.desktop-nav [aria-current="page"], .mobile-nav [aria-current="page"] { color: var(--action); }
.footer-nav [aria-current="page"] { color: white; text-decoration: underline; text-underline-offset: 5px; }
.page-heading { padding-top: 0; padding-bottom: 64px; }
/* Breadcrumbs own their vertical spacing across all page templates. */
.breadcrumbs { margin: 0 0 var(--breadcrumbs-space-after); padding-top: var(--breadcrumbs-space-before); font-size: 13px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: baseline; gap: 12px; }
.breadcrumbs li + li::before { content: "/"; color: #a1a5a7; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.page-heading-grid { display: grid; gap: 36px; align-items: center; }
.page-heading-copy { min-width: 0; }
.page-heading h1 { max-width: 1000px; font-size: clamp(38px, 6vw, 80px); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: break-word; }
.page-lead { max-width: 720px; margin-top: 28px; color: var(--body); font-size: 18px; line-height: 1.7; }
.page-heading .button { margin-top: 32px; }
.page-image { min-width: 0; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.page-image img { width: 100%; height: 320px; object-fit: cover; }
.page-content { padding-block: 64px; background: white; }
.content-section { display: grid; gap: 24px; padding-block: 40px; border-top: 1px solid var(--line); }
.content-section:first-child { padding-top: 0; border-top: 0; }
.content-section:last-child { padding-bottom: 0; }
.content-section h2 { font-size: clamp(28px, 3.3vw, 44px); overflow-wrap: break-word; }
.content-section-body { color: var(--body); line-height: 1.8; max-width: 760px; }
.content-section-body p + p { margin-top: 18px; }
.content-section-body ul { margin-top: 20px; padding-left: 20px; list-style: disc; }
.content-section-body li + li { margin-top: 10px; }
.page-services { padding-block: 0 72px; }
.page-services .service-row h3 { overflow-wrap: break-word; }
.contact-notice { max-width: 650px; margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (min-width: 768px) {
  :root { --breadcrumbs-space-before: 36px; }
  .page-heading { padding-bottom: 96px; }
  .page-lead { font-size: 20px; }
  .page-image img { height: 440px; }
  .page-content { padding-block: 96px; }
  .content-section { grid-template-columns: 5fr 7fr; gap: 48px; padding-block: 56px; }
  .page-services { padding-bottom: 110px; }
}
@media (min-width: 1200px) {
  .page-heading-grid:has(.page-image) { grid-template-columns: 7fr 5fr; gap: 56px; }
  .page-heading-grid:has(.page-image) h1 { font-size: clamp(48px, 4.5vw, 68px); }
}
@media (max-width: 374px) {
  .page-heading h1 { font-size: 34px; }
  .page-lead { font-size: 16px; }
  .page-image img { height: 260px; }
}

/* One news card component serves both the homepage and the complete news list. */
.news, .news-listing, .news-article { background: var(--white); }
.news-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.news-heading .button { flex: none; }
.news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
.news-grid-item { min-width: 0; }
.news-card { height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.news-card-link { display: flex; flex-direction: column; height: 100%; border-radius: inherit; }
.news-card-visual { position: relative; aspect-ratio: 1.4; border-radius: var(--radius); background: var(--page); }
.news-card-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.news-card-date { position: absolute; bottom: -1px; left: -1px; padding: 14px 22px 7px; border-radius: 24px 24px 0 0; background: white; color: var(--muted); font-size: 13px; font-weight: 500; }
.news-card-date::after { position: absolute; bottom: 0; right: -20px; width: 20px; height: 20px; content: ''; border-radius: 0 0 0 20px; box-shadow: -6px 6px 0 5px white; }
.news-card-copy { display: flex; flex-direction: column; flex: 1; padding: 28px 24px 24px; }
.news-card h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.38; letter-spacing: -.025em; overflow-wrap: anywhere; }
.news-card-link:focus-visible { outline-offset: 5px; }
.news-list-content { padding-bottom: 96px; }
.news-empty { grid-column: 1 / -1; padding-block: 36px; color: var(--muted); }
.news-article .page-heading h1 { max-width: 1100px; font-size: clamp(34px, 4.5vw, 64px); }
.article-date { display: block; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.article-visual img { width: 100%; max-height: 560px; aspect-ratio: 2.2; object-fit: cover; border-radius: var(--radius); }
.article-back { padding-bottom: 80px; }
@media (hover: hover) {
 .news-card-link:hover h3 { color: var(--action); }
}
@media (min-width: 640px) {
 .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
 .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .news-heading { margin-bottom: 48px; }
 .news-card-copy { padding: 32px; }
 .news-card-date { padding-inline: 28px; font-size: 14px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
 .header-region { display: none; }
}

/* Reviews use native scroll snapping: four previews on desktop, two on tablet, one on mobile. */
.reviews { --review-visible: 1; --review-gap: 20px; background: var(--page); }
.reviews-heading { display: grid; justify-items: center; gap: 24px; margin-bottom: 40px; text-align: center; }
.reviews-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fa5c49; color: white; font-size: 46px; font-weight: 500; line-height: 1; }
.reviews-empty { max-width: 500px; color: var(--muted); font-size: 15px; }
.reviews-track { display: flex; align-items: stretch; gap: var(--review-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.js .reviews-track { scrollbar-width: none; }
.js .reviews-track::-webkit-scrollbar { display: none; }
.review-card { display: flex; flex-direction: column; flex: 0 0 calc((100% - (var(--review-visible) - 1) * var(--review-gap)) / var(--review-visible)); min-width: 0; min-height: 340px; padding: 28px; gap: 24px; border-radius: var(--radius); background: white; scroll-snap-align: start; }
.review-author h3 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.review-rating { margin-top: 6px; color: #f5b323; font-size: 20px; letter-spacing: 1px; line-height: 1.3; }
.review-rating-empty { color: #dfe2e3; }
.review-text { color: var(--body); font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.js .review-text:not(.is-expanded) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.review-expand { margin-top: 12px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--action); font-size: 13px; font-weight: 500; line-height: 1.6; }
.review-date { margin-top: auto; color: var(--muted); font-size: 12px; }
.reviews-footer { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 32px; }
.reviews-controls { display: flex; align-items: center; gap: 16px; }
.reviews-arrow { background: transparent; border-color: var(--ink); font-size: 24px; }
.reviews-arrow:disabled { opacity: .3; cursor: default; }
.reviews-position { min-width: 76px; color: var(--muted); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.reviews-link { max-width: 100%; }
.reviews-link:disabled { border-color: #a4a7a8; color: var(--muted); background: transparent; cursor: default; }
.review-card--placeholder { min-height: 280px; gap: 16px; }
.review-quote { color: var(--primary); opacity: .45; font-family: Georgia, serif; font-size: 72px; line-height: .8; }
.review-placeholder-line { display: block; width: 100%; height: 8px; border-radius: 8px; background: #f0f2f4; }
.review-placeholder-line--name { width: 56%; height: 12px; margin-block: 16px 12px; }
.review-placeholder-line--short { width: 72%; }
@media (min-width: 640px) { .reviews { --review-visible: 2; } }
@media (min-width: 1200px) {
 .reviews { --review-visible: 4; }
 .reviews-heading { margin-bottom: 48px; }
 .reviews-footer { position: relative; justify-content: center; flex-direction: row; min-height: 56px; padding-inline: 200px; }
 .reviews-controls { position: absolute; right: 0; }
}
@media (hover: hover) {
 .reviews-arrow:not(:disabled):hover { color: white; background: var(--ink); }
 .review-expand:hover { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .reviews-track { scroll-behavior: auto; } }

/* Services directory: wide construction banner, solid lettering and shared home cards. */
.services-page-hero { padding-block: 0 24px; }
.services-page-banner { position: relative; display: flex; align-items: center; min-height: 430px; overflow: hidden; isolation: isolate; border-radius: var(--radius); background: #263226; }
.services-page-photo { position: absolute; inset: 0; z-index: -2; }
.services-page-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.services-page-banner::before { position: absolute; inset: 0; z-index: -1; content: ''; background: linear-gradient(90deg, #0009 0%, #0005 38%, #0000 76%); }
.services-page-copy { width: 100%; padding: 32px 24px; color: white; }
.services-page-copy h1 { max-width: 800px; color: white; -webkit-text-stroke: 0; -webkit-text-fill-color: currentColor; font-size: clamp(34px, 5.2vw, 76px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: break-word; }
.services-page-copy p { max-width: 620px; margin-top: 24px; font-size: 16px; line-height: 1.7; }
.services-page-copy .button { margin-top: 28px; background: var(--primary); }
.services-page-cards { padding-bottom: 80px; }
@media (hover: hover) { .services-page-copy .button:hover { background: var(--action); } }
@media (max-width: 639px) {
 .services-page-banner { min-height: 480px; align-items: flex-end; }
 .services-page-photo img { object-position: 64% center; }
 .services-page-banner::before { background: linear-gradient(0deg, #000c, #0007 65%, #0001); }
 .services-page-copy .button { padding-inline: 20px; gap: 8px; font-size: 14px; }
}
@media (min-width: 768px) {
 .services-page-copy { padding: 40px; }
 .services-page-copy p { font-size: 18px; }
 .services-page-cards { padding-bottom: 110px; }
}
@media (min-width: 1200px) {
 .services-page-copy { padding: 48px; }
 .services-page-banner { min-height: 450px; }
}

/* Work route: the architecture panorama is split into three scenes, copy stays editable. */
.services-page-cards { padding-bottom: 40px; }
.services-preparation { padding-block: 64px; background: white; }
.workflow-heading { display: grid; gap: 20px; margin-bottom: 36px; }
.workflow-heading h2 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: break-word; }
.workflow-heading > p { color: var(--body); font-size: 16px; line-height: 1.7; }
.workflow-panel { padding-bottom: 24px; border-radius: var(--radius); overflow: hidden; background: var(--page); }
.workflow-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.workflow-steps > li { min-width: 0; }
.workflow-visual { position: relative; aspect-ratio: 1; overflow: hidden; mask-image: linear-gradient(to bottom, #000 94%, transparent); }
.workflow-visual img { position: absolute; top: 0; left: calc(var(--workflow-scene) * -100%); width: 300%; max-width: none; height: 100%; object-fit: fill; }
.workflow-step-copy { position: relative; padding: 0 24px 28px; }
.workflow-number { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--primary); border-radius: 50%; background: white; color: var(--action); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.workflow-step-copy h3 { font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; overflow-wrap: break-word; }
.workflow-step-copy p { max-width: 34ch; margin-top: 10px; color: var(--body); font-size: 15px; line-height: 1.65; }
.workflow-cta { display: flex; justify-content: flex-end; padding: 0 24px; }
.workflow-cta:empty { display: none; }
.workflow-cta .button { max-width: 100%; padding-inline: 30px; background: var(--primary); font-size: 14px; }
@media (min-width: 768px) {
 .workflow-heading { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
 .workflow-heading > p { padding-top: 8px; font-size: 17px; }
 .workflow-panel { padding-bottom: 32px; }
 .workflow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .workflow-step-copy { padding: 0 24px 28px; }
 .workflow-steps > li:not(:last-child) .workflow-step-copy::before { content: ''; position: absolute; top: 22px; left: 46px; width: 100%; height: 1px; background: var(--primary); }
 .workflow-step-copy h3 { font-size: clamp(17px, 1.5vw, 21px); }
 .workflow-cta { padding-inline: 32px; }
}
@media (min-width: 1024px) {
 .services-preparation { padding-block: 80px; }
 .workflow-step-copy { padding-inline: 32px; }
 .workflow-steps > li:not(:last-child) .workflow-step-copy::before { left: 54px; }
 .workflow-step-copy p { font-size: 16px; }
 .workflow-cta .button { font-size: 15px; }
}
@media (max-width: 767px) {
 .workflow-steps > li + li { margin-top: 12px; }
 .workflow-steps > li:not(:last-child) .workflow-step-copy { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
 .workflow-cta .button { width: 100%; }
}
@media (hover: hover) { .workflow-cta .button:hover { background: var(--action); } }

/* About page: a pale-gray hero banner on a white page. */
.company-page { background: white; padding-bottom: 64px; }
.company-page h2 { font-size: clamp(29px, 3.2vw, 44px); line-height: 1.16; letter-spacing: -.035em; overflow-wrap: break-word; }
.company-hero { padding-top: 0; padding-bottom: 48px; }
.company-hero-grid { display: grid; align-items: center; gap: 24px; padding: 28px 24px; border-radius: var(--radius); background: #edf1f4; }
.company-hero-copy { position: relative; z-index: 1; min-width: 0; }
.company-eyebrow { margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.company-eyebrow:empty { display: none; }
.company-hero h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.1; letter-spacing: -.04em; overflow-wrap: break-word; }
.company-lead { margin-top: 24px; max-width: 560px; color: var(--body); font-size: 16px; line-height: 1.7; }
.company-hero .button { margin-top: 28px; background: var(--primary); }
.company-hero-visual { min-width: 0; }
.company-hero-visual img { width: 100%; height: auto; object-fit: contain; }
.company-editorial { display: grid; gap: 24px; margin-bottom: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.company-editorial > p { color: var(--body); font-size: 16px; line-height: 1.75; }
.company-directions { display: grid; gap: 24px; }
.company-direction { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border-radius: var(--radius); background: #f6f8fa; }
.company-direction--dark { color: white; background: #111; }
.company-direction > a, .company-direction > div { position: relative; display: block; height: 100%; min-height: 360px; }
.company-direction img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.company-direction-copy { position: relative; width: 72%; padding: 28px; }
.company-direction h3 { font-size: 28px; line-height: 1.16; letter-spacing: -.025em; }
.company-direction p { margin-top: 16px; max-width: 25ch; font-size: 14px; line-height: 1.65; }
.company-approach { padding-top: 56px; }
.company-approach-intro { margin-top: 20px; max-width: 720px; color: var(--body); line-height: 1.7; }
.company-steps { display: grid; gap: 28px; list-style: none; margin: 32px 0 0; padding: 0; }
.company-steps li { position: relative; min-width: 0; }
.company-step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--primary); border-radius: 50%; background: white; color: var(--action); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.company-steps h3 { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.company-steps p { max-width: 35ch; margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.company-audience { margin-top: 48px; }
.company-audience > .container { padding-top: 32px; }
.company-audience h2 { padding-top: 36px; border-top: 1px solid var(--line); }
.company-audiences { display: grid; gap: 32px; margin-top: 28px; }
.company-audiences li { min-width: 0; }
.company-audiences img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); }
.company-audiences h3 { margin-top: 18px; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.company-audiences p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.company-closing { margin-top: 48px; }
.company-closing-panel { display: grid; gap: 24px; align-items: center; padding: 28px; border-radius: var(--radius); background: var(--page); }
.company-closing-panel h2 { font-size: clamp(27px, 2.6vw, 36px); }
.company-closing-panel p { max-width: 820px; margin-top: 12px; color: var(--body); font-size: 15px; line-height: 1.7; }
.company-closing-panel .button { justify-self: start; background: var(--primary); }
@media (min-width: 768px) {
 .company-page { padding-bottom: 80px; }
 .company-hero { padding-bottom: 64px; }
 .company-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 32px; }
 .company-hero h1 { font-size: clamp(34px, 3.6vw, 52px); }
 .company-lead { font-size: 17px; }
 .company-editorial { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 40px; margin-bottom: 32px; }
 .company-directions, .company-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
 .company-direction > a, .company-direction > div { min-height: 360px; aspect-ratio: 3 / 2; }
 .company-direction-copy { width: 75%; }
 .company-approach { padding-top: 64px; }
 .company-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
 .company-steps li:not(:last-child)::before { content: ''; position: absolute; top: 22px; left: 22px; width: calc(100% + 32px); height: 1px; background: var(--primary); }
 .company-audience { margin-top: 40px; }
 .company-audiences p { font-size: 16px; }
 .company-closing-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 32px; }
 .company-closing-panel .button { font-size: 14px; }
}
@media (min-width: 1024px) {
 .company-hero-grid { gap: 0; }
 .company-hero-copy { padding-block: 32px; }
 .company-lead { font-size: 18px; }
 .company-direction-copy { width: 65%; padding: 36px; }
 .company-direction h3 { font-size: clamp(28px, 2.7vw, 38px); }
 .company-direction p { font-size: 16px; }
 .company-approach { padding-top: 80px; }
}
@media (max-width: 767px) {
 .company-direction > a, .company-direction > div { min-height: 350px; }
 .company-direction-copy { padding: 24px; }
 .company-direction-copy p { max-width: 22ch; }
 .company-steps li { padding-left: 64px; }
 .company-step-number { position: absolute; left: 0; top: 0; margin: 0; }
 .company-steps li:not(:last-child)::before { content: ''; position: absolute; left: 22px; top: 22px; height: calc(100% + 28px); width: 1px; background: var(--primary); }
 .company-closing-panel .button { justify-self: stretch; font-size: 14px; }
}
@media (hover: hover) {
 .company-hero .button:hover, .company-closing-panel .button:hover { background: var(--action); }
 .company-direction a:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .company-direction img { transition: none; } }
@media (max-width: 1023px) {
 .company-direction > a, .company-direction > div { min-height: 440px; }
 .company-direction img { top: auto; height: auto; aspect-ratio: 3 / 2; object-fit: contain; mask-image: linear-gradient(to bottom, transparent, #000 20%); }
 .company-direction:not(.company-direction--dark) { background: #f7fafc; }
}

/* Shared header for pages without a banner; breadcrumb spacing comes from the shell. */
.page-header { padding-bottom: 40px; }
.page-header h1 { max-width: 1000px; font-size: clamp(32px, 4vw, 48px); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: break-word; }
@media (min-width: 768px) { .page-header { padding-bottom: 48px; } }

/* News archive: up to 3 columns × 5 rows; the card is shared with the homepage. */
.news-list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.news-results-summary { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 12px; border-radius: 999px; font-size: 14px; line-height: 1.3; font-weight: 500; }
.pagination a { border: 1px solid var(--line); transition: background-color .2s, color .2s; }
.pagination .pagination-direction { padding-inline: 18px; }
.pagination [aria-current="page"] { background: var(--primary); color: white; }
.pagination [aria-disabled="true"] { color: #7b7f81; border: 1px solid var(--line); }
.pagination .pagination-gap { min-width: 20px; padding-inline: 0; color: var(--muted); }
@media (hover: hover) { .pagination a:hover { color: white; background: var(--action); border-color: var(--action); } }
@media (max-width: 639px) {
 .news-list-footer { justify-content: center; gap: 16px; }
 .news-results-summary { width: 100%; text-align: center; }
 .pagination ul { justify-content: center; gap: 6px; }
 .pagination .pagination-direction { padding-inline: 12px; }
}

/* Direct contacts: editorial rows without icons and a single dark inquiry form. */
.contact-page { padding-block: 0 56px; background: white; }
.contact-page-grid { display: grid; gap: 32px; align-items: start; }
.contact-page-details { min-width: 0; }
.contact-page-info { margin: 0 0 28px; }
.contact-page-info > div { padding-block: 22px; border-bottom: 1px solid var(--line); }
.contact-page-info > div:first-child { padding-top: 0; }
.contact-page-info > div:last-child { border-bottom: 0; }
.contact-page-info dt { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.contact-page-info dd { margin: 0; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact-page-info a { text-underline-offset: 6px; }
.contact-page-image { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--page); }
.contact-page-image img { width: 100%; aspect-ratio: 1.8; object-fit: cover; }
.contact-page-image:empty { display: none; }
.contact-page-preparation { margin-top: 20px; padding: 24px; border-radius: 20px; background: #edf1f4; }
.contact-page-preparation h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.02em; }
.contact-page-preparation p { margin-top: 10px; color: var(--body); font-size: 15px; line-height: 1.65; }
.contact-page-panel { min-width: 0; padding: 28px 24px; border-radius: var(--radius); color: white; background: var(--ink); }
.contact-page-panel h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.contact-page-form-intro { margin-top: 16px; color: #d4d4d4; font-size: 15px; line-height: 1.7; }
.contact-page-form { max-width: none; margin: 28px 0 0; }
.contact-page-form fieldset { gap: 24px; }
.contact-page-field { display: grid; gap: 10px; }
.contact-page-field > label { font-size: 14px; line-height: 1.5; }
.contact-page-form input:not([type="checkbox"]):not([type="hidden"]), .contact-page-form textarea { width: 100%; min-height: 56px; padding: 16px 18px; border: 1px solid #626262; border-radius: 12px; background: #191919; color: white; font: inherit; font-size: 16px; line-height: 1.5; }
.contact-page-form input::placeholder, .contact-page-form textarea::placeholder { color: #a6a6a6; opacity: 1; }
.contact-page-form textarea { min-height: 160px; max-width: 100%; resize: vertical; }
.contact-page-form :is(input,textarea):focus-visible { outline-color: #87c86a; outline-offset: 3px; }
.contact-page-form .button { margin-top: 0; border-radius: 999px; background: var(--primary); }
.contact-page-form .consent { padding-block: 0; color: #dedede; font-size: 12px; line-height: 1.6; }
.contact-page-form .consent input { margin-top: 3px; }
.contact-page-form .field-error { margin-top: 0; color: #ffb1a8; }
.contact-page-form .form-status { color: #e5e5e5; }
.contact-page-notice { margin-top: 22px; color: #b4b4b4; font-size: 12px; line-height: 1.6; }
.contact-page-notice:empty { display: none; }
.contact-page-city { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 180px; margin-top: 40px; padding: 24px; overflow: hidden; border-radius: var(--radius); background: #edf1f4; text-align: center; }
.contact-page-city > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-page-city-label { padding: 12px 24px; border-radius: 16px; background: #f6f9fbd9; }
.contact-page-city-label > span { display: block; color: var(--body); font-size: 12px; }
.contact-page-city-label > strong { display: block; margin-top: 5px; font-size: clamp(21px, 2.5vw, 30px); font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
@media (min-width: 768px) {
 .contact-page { padding-bottom: 64px; }
 .contact-page-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
 .contact-page-info > div { padding: 0; border: 0; }
 .contact-page-info dd { font-size: 22px; }
 .contact-page-panel { padding: 36px; }
 .contact-page-city { margin-top: 48px; min-height: 220px; }
}
@media (min-width: 1024px) {
 .contact-page-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
 .contact-page-info { display: block; margin-bottom: 20px; }
 .contact-page-info > div { padding-block: 24px; border-bottom: 1px solid var(--line); }
 .contact-page-info > div:first-child { padding-top: 8px; }
 .contact-page-info > div:last-child { border-bottom: 0; }
 .contact-page-info dd { font-size: clamp(25px, 2.5vw, 34px); }
 .contact-page-image img { aspect-ratio: 1.8; }
 .contact-page-preparation { padding: 24px 28px; }
 .contact-page-panel { padding: 40px; }
 .contact-page-form { margin-top: 32px; }
}
@media (hover: hover) {
 .contact-page-info a:hover { text-decoration: underline; }
 .contact-page-form .button:hover { background: var(--action); }
 a.contact-page-city:hover .contact-page-city-label { background: white; }
}

/* Reusable service detail: photographic hero, architectural body, shared homepage FAQ. */
.service-detail { padding-bottom: 64px; background: white; }
.detail-hero-banner { position: relative; isolation: isolate; min-height: 520px; display: flex; align-items: center; overflow: hidden; border-radius: var(--radius); background: #1d2b21; color: white; }
.detail-hero-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.detail-hero-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0009,#0004 60%,#0001); }
.detail-hero-copy { width: 100%; max-width: 680px; padding: 36px 24px; }
.detail-hero h1 { font-size: clamp(38px, 5.5vw, 76px); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: break-word; }
.detail-hero-lead { margin-top: 24px; font-size: 20px; line-height: 1.45; font-weight: 500; }
.detail-hero-text { margin-top: 14px; max-width: 40ch; color: #f0f0f0; font-size: 16px; line-height: 1.65; }
.detail-hero .button { margin-top: 28px; background: var(--primary); }
.detail-content > section { margin-top: 48px; }
.detail-content h2, .detail-closing h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -.035em; overflow-wrap: break-word; }
.detail-overview { display: grid; gap: 24px; }
.detail-overview > p { color: var(--body); font-size: 16px; line-height: 1.75; }
.detail-solution-grid { display: grid; gap: 24px; margin-top: 28px; }
.detail-solution-grid > li { min-width: 0; overflow: hidden; border-radius: var(--radius); background: #edf1f4; }
.detail-solution-grid img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.detail-solution-grid > li > div { padding: 20px 24px 28px; }
.detail-solution-grid h3 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.detail-solution-grid p { margin-top: 10px; color: var(--body); font-size: 15px; line-height: 1.65; }
.detail-solutions-note { margin-top: 24px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.7; }
.detail-steps { display: grid; gap: 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.detail-steps > li { position: relative; min-width: 0; padding-left: 64px; }
.detail-step-number { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: white; background: var(--primary); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-steps > li:not(:last-child)::before { position: absolute; content: ''; top: 22px; left: 22px; height: calc(100% + 28px); width: 1px; background: var(--primary); }
.detail-steps h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.detail-steps p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.detail-estimate { display: grid; gap: 28px; padding: 28px 24px; border-radius: var(--radius); color: white; background: var(--ink); }
.detail-estimate > div > p { max-width: 55ch; margin-top: 20px; color: #ddd; font-size: 16px; line-height: 1.7; }
.detail-estimate ul { display: grid; gap: 20px; margin-top: 28px; }
.detail-estimate li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; }
.detail-estimate li > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #ffffff13; color: #a3d88c; font-size: 12px; font-variant-numeric: tabular-nums; }
.detail-estimate-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-width: 0; }
.detail-estimate-visual img { width: 100%; aspect-ratio: 1.7; object-fit: cover; border-radius: 18px; }
.detail-estimate-visual .button { background: var(--primary); }
.detail-gallery > ul { display: grid; gap: 24px; margin-top: 28px; }
.detail-gallery figure { margin: 0; }
.detail-gallery img { width: 100%; aspect-ratio: 1.8; object-fit: cover; border-radius: 20px; }
.detail-gallery figcaption { margin-top: 12px; font-size: 16px; font-weight: 500; }
.detail-gallery-note { margin-top: 18px; color: var(--muted); font-size: 12px; text-align: right; }
.service-detail .faq { margin-top: 56px; background: var(--page); }
.detail-closing { display: grid; align-items: center; gap: 24px; margin-top: 48px; padding: 28px 24px; border-radius: var(--radius); background: var(--page); }
.detail-closing h2 { font-size: clamp(27px, 2.7vw, 36px); }
.detail-closing p { margin-top: 12px; color: var(--body); font-size: 15px; line-height: 1.7; }
.detail-closing .button { justify-self: start; background: var(--primary); }
@media (min-width: 768px) {
 .detail-hero-banner { min-height: 430px; }
 .detail-hero-copy { padding: 44px 40px; max-width: 660px; }
 .detail-hero-lead { max-width: 33ch; font-size: 22px; }
 .detail-hero-text { font-size: 17px; }
 .detail-overview { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: start; }
 .detail-solution-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .detail-solution-grid h3 { font-size: 22px; }
 .detail-estimate { padding: 36px; }
 .detail-estimate ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .detail-gallery > ul { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .detail-closing { grid-template-columns: minmax(0,1fr) auto; padding: 36px; gap: 40px; }
 .detail-closing .button { font-size: 14px; }
}
@media (min-width: 1024px) {
 .detail-content > section { margin-top: 64px; }
 .detail-hero-copy { padding: 48px; }
 .detail-hero-banner { min-height: 450px; }
 .detail-overview > p { font-size: 17px; }
 .detail-solution-grid > li > div { padding: 24px 28px 32px; }
 .detail-solution-grid h3 { font-size: 26px; }
 .detail-steps { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; margin-top: 36px; }
 .detail-steps > li { padding-left: 0; text-align: center; }
 .detail-step-number { position: relative; margin: 0 auto 22px; }
 .detail-steps > li:not(:last-child)::before { top: 22px; left: 50%; width: calc(100% + 24px); height: 1px; }
 .detail-estimate { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; padding: 40px; gap: 40px; }
 .detail-estimate li { font-size: 15px; }
 .detail-estimate-visual .button { margin-top: -44px; z-index: 1; }
}
@media (max-width: 374px) {
 .detail-hero h1 { font-size: clamp(30px, 9.5vw, 36px); }
 .detail-solution-grid h3 { font-size: 20px; }
}
@media (hover: hover) { .detail-hero .button:hover, .detail-estimate .button:hover, .detail-closing .button:hover { background: var(--action); } }