:root {
  --bg: #F5F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECE7DE;
  --text: #1E1E1E;
  --muted: #6F6F6F;
  --dark: #252525;
  --dark-2: #171717;
  --accent: #D98A24;
  --accent-dark: #B66F17;
  --line: #DDD6CB;
  --success: #2F6D4D;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 70px rgba(30, 30, 30, 0.12);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Manrope, Inter, "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
textarea { resize: vertical; }

.container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
.section-dark { background: var(--dark); color: #fff; }
.section-white { background: var(--surface); }
.section-light { background: var(--bg); }
.section-muted { background: var(--surface-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 243, 239, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(221, 214, 203, 0.8);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.03em; }
.logo-mark { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; color: #fff; background: var(--accent); }
.logo-text { font-size: 20px; }
.main-nav { display: flex; gap: 18px; margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.main-nav a:hover { color: var(--text); }
.header-phone { font-weight: 700; font-size: 14px; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-outline { border-color: rgba(255,255,255,0.32); color: #fff; background: transparent; }
.btn-outline:hover { border-color: #fff; }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.text-link { font-weight: 800; color: var(--accent-dark); }

.hero { padding: 92px 0 70px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: .09em; font-size: 12px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(42px, 6vw, 76px); line-height: .96; letter-spacing: -0.065em; margin-bottom: 24px; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.03; letter-spacing: -0.055em; margin-bottom: 18px; }
h3 { font-size: 20px; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 10px; }
.hero-lead, .section-lead { color: rgba(255,255,255,0.72); font-size: 18px; max-width: 650px; }
.section-light .section-lead, .section-white .section-lead, .section-muted .section-lead { color: var(--muted); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-facts span { padding: 9px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.82); font-weight: 700; font-size: 14px; }
.hero-visual { position: relative; min-height: 470px; }
.photo-card { border-radius: var(--radius-lg); background: linear-gradient(135deg, #63513F, #2E2E2E); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.photo-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(217,138,36,.44), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.12), transparent 40%); }
.photo-card-main { min-height: 470px; }
.photo-label { position: absolute; left: 24px; top: 24px; max-width: 310px; padding: 18px; border-radius: 18px; background: rgba(0,0,0,.42); color: rgba(255,255,255,.88); font-weight: 800; }
.hero-note { position: absolute; right: 24px; bottom: 24px; width: min(330px, calc(100% - 48px)); padding: 20px; border-radius: 22px; background: #fff; color: var(--text); box-shadow: var(--shadow); }
.hero-note strong, .hero-note span { display: block; }
.hero-note span { color: var(--muted); font-size: 14px; margin-top: 6px; }

.trust-strip { padding: 0 0 54px; margin-top: -1px; background: var(--dark); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radius-lg); overflow: hidden; }
.trust-grid article { padding: 26px; background: #2f2f2f; min-height: 190px; }
.trust-number { color: var(--accent); font-weight: 900; }
.trust-grid p { color: rgba(255,255,255,.68); margin-bottom: 0; }

.payment, .services, .portfolio, .reviews, .request { padding: 86px 0; }
.payment-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: start; }
.payment-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.payment-steps article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.payment-steps span { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 14px; background: var(--success); color: #fff; font-weight: 900; margin-bottom: 18px; }
.small-note { color: var(--muted); font-size: 14px; border-left: 4px solid var(--accent); padding-left: 16px; margin-top: 20px; }

.calculator-section { padding: 92px 0; }
.calculator-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 44px; align-items: start; }
.calc-warning { margin-top: 24px; padding: 18px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font-weight: 800; }
.calc-card, .request-card { background: var(--surface); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
label span { display: block; margin-bottom: 7px; font-weight: 800; font-size: 13px; color: var(--text); }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 15px; color: var(--text); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,138,36,.12); }
.honeypot { position: absolute; left: -9999px; opacity: 0; }
.calc-result { display: grid; gap: 4px; margin: 20px 0; padding: 20px; border-radius: var(--radius-md); background: var(--dark); color: #fff; }
.calc-result span { color: rgba(255,255,255,.72); }
.calc-result strong { font-size: 28px; line-height: 1.1; }
.calc-result small { color: rgba(255,255,255,.6); }
.contact-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.contact-row.three-fields { grid-template-columns: 1fr 1fr auto; }
.checkbox-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.checkbox-line input { width: auto; margin-top: 4px; }
.checkbox-line span { margin: 0; color: var(--muted); font-weight: 600; font-size: 13px; }

.section-head { margin-bottom: 34px; }
.section-head.split { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.card-grid { display: grid; gap: 18px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.service-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; min-height: 240px; }
.service-card p { color: var(--muted); margin-bottom: 0; }
.warning-card { background: #FFF7EC; border-color: rgba(217,138,36,.36); }
.icon-box { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 14px; background: var(--dark); color: #fff; font-weight: 900; margin-bottom: 22px; }
.warning-card .icon-box { background: var(--accent); }

.process { padding: 86px 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.steps span { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 900; margin-bottom: 16px; }
.steps p { color: var(--muted); margin-bottom: 0; }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.case-photo { min-height: 230px; background: linear-gradient(135deg, #C7B8A1, #5D5145); display: grid; place-items: end start; padding: 22px; color: #fff; font-weight: 900; background-position: center; background-repeat: no-repeat; background-size: cover;}
.case-body { padding: 24px; }
.case-body p, .case-body li { color: var(--muted); }
.case-body ul { padding-left: 18px; margin-bottom: 0; }

.proof { padding: 86px 0; }
.proof-grid, .benefits-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: start; }
.proof-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.proof-list article { padding: 24px; border-radius: var(--radius-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.proof-list p { color: rgba(255,255,255,.68); margin-bottom: 0; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card { padding: 26px; border-radius: var(--radius-md); background: var(--bg); border: 1px solid var(--line); }
.review-card p { color: var(--muted); }
.review-card span { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 800; font-size: 13px; color: var(--text); }

.faq { padding: 86px 0; }
.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; }
summary { cursor: pointer; font-weight: 900; }
details p { color: var(--muted); margin: 12px 0 0; }

.request-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: start; }
.request-card { display: grid; gap: 14px; }

.final-cta { padding: 70px 0; }
.cta-card { display: flex; justify-content: space-between; gap: 32px; align-items: center; background: var(--dark-2); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 34px; }
.cta-card p { color: rgba(255,255,255,.7); margin-bottom: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.site-footer { padding: 52px 0; background: #141414; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr 1fr; gap: 30px; }
.footer-grid p, .footer-grid a { color: rgba(255,255,255,.68); }
.footer-grid h3 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.footer-grid a:not(.logo) { display: block; margin: 8px 0; }
.footer-logo { color: #fff; margin-bottom: 14px; }
.footer-logo .logo-mark { color: #fff; display: inline-grid; }
.footer-logo .logo-text { color: #fff; display: inline; }

@media (max-width: 1040px) {
  .main-nav { display: none; }
  .hero-grid, .calculator-grid, .payment-grid, .proof-grid, .faq-grid, .request-grid { grid-template-columns: 1fr; }
  .trust-grid, .card-grid.four, .steps { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid, .review-grid, .payment-steps { grid-template-columns: 1fr; }
  .hero-visual { min-height: 360px; }
  .photo-card-main { min-height: 360px; }
  .hero-note { right: 18px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 28px, var(--container)); }
  .header-inner { min-height: 68px; gap: 12px; }
  .header-phone { display: none; }
  .btn-small { margin-left: auto; }
  .hero { padding: 62px 0 44px; }
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .hero-actions, .cta-actions { flex-direction: column; }
  .btn { width: 100%; }
  .trust-grid, .card-grid.three, .card-grid.four, .steps, .form-grid, .contact-row, .contact-row.three-fields, .proof-list, .footer-grid { grid-template-columns: 1fr; }
  .section-head.split, .cta-card { align-items: stretch; flex-direction: column; }
  .payment, .services, .portfolio, .reviews, .request, .calculator-section, .process, .proof, .faq { padding: 58px 0; }
  .calc-card, .request-card { padding: 20px; }
  .hero-note { position: static; margin-top: 16px; width: auto; }
}

/* Portfolio and project pages */
.main-nav .is-active { color: var(--text); font-weight: 900; }
.breadcrumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 42px; color: rgba(255,255,255,.58); font-size: 14px; }
.breadcrumbs a::after { content: "→"; margin-left: 10px; color: rgba(255,255,255,.35); }
.breadcrumbs span { color: rgba(255,255,255,.86); }
.portfolio-hero, .project-hero { padding: 68px 0 86px; position: relative; overflow: hidden; }
.portfolio-hero::before, .project-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 15%, rgba(217,138,36,.22), transparent 34%), linear-gradient(180deg, rgba(0,0,0,.18), transparent 45%); pointer-events: none; }
.portfolio-hero .container, .project-hero .container { position: relative; z-index: 1; }
.portfolio-hero-grid, .project-hero-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 52px; align-items: center; }
.portfolio-hero-card { display: grid; gap: 14px; }
.portfolio-hero-visual { min-height: 340px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(217,138,36,.36), rgba(30,30,30,.4)), repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 24px), linear-gradient(135deg, #6B5D4B, #202020); box-shadow: var(--shadow); display: flex; align-items: end; padding: 26px; }
.portfolio-hero-visual span { padding: 12px 16px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.42); font-weight: 900; }
.portfolio-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.portfolio-hero-stats article { padding: 16px; border-radius: var(--radius-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.portfolio-hero-stats strong, .portfolio-hero-stats span { display: block; }
.portfolio-hero-stats strong { font-size: 14px; line-height: 1.2; }
.portfolio-hero-stats span { margin-top: 7px; color: rgba(255,255,255,.62); font-size: 13px; }
.portfolio-controls { padding: 74px 0 34px; }
.controls-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: end; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.filter-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 900; cursor: pointer; }
.filter-btn.is-active, .filter-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.portfolio-list { padding: 40px 0 86px; }
.portfolio-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 50px rgba(30,30,30,.08); display: flex; flex-direction: column; }
.project-card.is-hidden { display: none; }
.project-photo { min-height: 250px; position: relative; display: flex; align-items: end; padding: 18px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #C7B8A1, #5D5145); background-position: center; background-repeat: no-repeat; background-size: cover;}
.project-photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.36), transparent 20%), linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62)); }
.project-photo::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 70px; height: 78px; }
.project-photo span { position: relative; z-index: 2; display: inline-flex; padding: 10px 13px; border-radius: 999px; background: rgba(0,0,0,.45); font-weight: 900; }

.project-foundation { background: linear-gradient(135deg, #CBBBA4, #6D624F); }
.project-foundation::after { clip-path: polygon(8% 30%, 92% 30%, 100% 70%, 0 70%); height: 90px; bottom: 74px; background: rgba(255,255,255,.24); }
.project-demolition { background: linear-gradient(135deg, #B68A58, #34302A); }
.project-demolition::after { clip-path: polygon(0 80%, 15% 35%, 40% 62%, 58% 15%, 72% 65%, 100% 42%, 100% 100%, 0 100%); background: rgba(0,0,0,.24); }
.project-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.project-tags span { padding: 7px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 900; }
.project-location { color: var(--muted); margin-bottom: 18px; }
.project-meta { display: grid; gap: 10px; margin: 0 0 18px; }
.project-meta div { display: grid; grid-template-columns: 88px 1fr; gap: 14px; }
.project-meta dt { color: var(--muted); font-size: 13px; }
.project-meta dd { margin: 0; font-weight: 800; }
.mini-stages { display: flex; gap: 8px; flex-wrap: wrap; margin: auto 0 18px; }
.mini-stages span { width: calc(33.333% - 6px); min-width: 82px; padding: 9px 8px; border-radius: 12px; background: #F4EFE8; color: var(--muted); text-align: center; font-size: 12px; font-weight: 800; }
.btn-card { width: 100%; border-color: var(--line); color: var(--text); background: transparent; min-height: 48px; }
.btn-card:hover { border-color: var(--accent); color: var(--accent-dark); }
.portfolio-proof { padding: 76px 0; }
.proof-inline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proof-inline-grid article { padding: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.proof-inline-grid p { color: var(--muted); margin-bottom: 0; }
.project-summary-card { padding: 28px; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); }
.project-summary-card h2 { font-size: 28px; margin-bottom: 22px; }
.summary-list { display: grid; gap: 1px; margin: 0; background: rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; }
.summary-list div { padding: 16px; display: flex; justify-content: space-between; gap: 18px; background: rgba(0,0,0,.18); }
.summary-list dt { color: rgba(255,255,255,.62); }
.summary-list dd { margin: 0; font-weight: 900; text-align: right; }
.project-overview { padding: 86px 0; }
.project-overview-grid { display: grid; gap: 34px; align-items: stretch; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);}
.project-slider, .project-description-card, .details-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.project-slider { padding: 18px; display: flex; flex-direction: column;}
.slider-stage { position: relative; background: var(--dark); flex: 1; min-height: 340px; border-radius: 24px; overflow: hidden;}
.slide-visual { position: absolute; inset: 0; opacity: 0; transition: opacity .22s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; color: #fff; }
.slide-visual.is-active { opacity: 1; }
.slide-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.66)); }
.slide-foundation { background: linear-gradient(135deg, #B9AA94, #4B4135); }
.slide-foundation::after { clip-path: polygon(8% 35%, 92% 35%, 100% 68%, 0 68%); }
.slide-box { background: linear-gradient(135deg, #CFC8B6, #3E3C38); background-position: center; background-repeat: no-repeat; background-size: cover; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.slide-box::after { clip-path: polygon(0 35%, 50% 0, 100% 35%, 100% 100%, 0 100%); }
.slide-roof { background: linear-gradient(135deg, #D8D5CB, #5E5348); }
.slide-roof::after { clip-path: polygon(0 52%, 50% 0, 100% 52%, 92% 100%, 8% 100%); }
.slide-finish { background: linear-gradient(135deg, #E0DED7, #2C2C2C); }
.slide-finish::after { clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); background: rgba(255,255,255,.28); }
.slide-badge, .slide-visual strong { position: relative; z-index: 1; }
.slide-badge { width: fit-content; padding: 9px 12px; border-radius: 999px; background: var(--accent); font-weight: 900; margin-bottom: 12px; }
.slide-visual strong { font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: -0.055em; }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.32); background: rgba(0,0,0,.36); color: #fff; cursor: pointer; font-size: 22px; }
.slider-prev { left: 20px; }
.slider-next { right: 20px; }
.slider-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.slider-thumbs button { min-height: 66px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); cursor: pointer; font-weight: 900; color: var(--muted); }
.slider-thumbs button.is-active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 4px rgba(217,138,36,.12); }
.project-description-card { padding: 30px; }
.check-list { padding: 0; margin: 22px 0; list-style: none; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--muted); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 7px; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.project-timeline, .related-projects { padding: 86px 0; }
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.timeline-grid article { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.timeline-grid span { display: inline-flex; color: var(--accent); font-weight: 900; margin-bottom: 14px; }
.timeline-grid p { color: var(--muted); margin-bottom: 0; }
.project-details { padding: 76px 0; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.details-card { padding: 28px; }
.details-card p { color: var(--muted); margin-bottom: 0; }
.accent-card { background: #FFF7EC; border-color: rgba(217,138,36,.36); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.related-card .project-photo { min-height: 180px; }
.related-card strong, .related-card em { display: block; padding: 0 22px; }
.related-card strong { margin-top: 20px; font-size: 20px; }
.related-card em { color: var(--muted); font-style: normal; padding-bottom: 22px; margin-top: 6px; }
@media (max-width: 1040px) {
  .portfolio-hero-grid, .project-hero-grid, .controls-grid, .project-overview-grid { grid-template-columns: 1fr; }
  .portfolio-page-grid, .proof-inline-grid, .details-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-grid, .portfolio-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .portfolio-hero, .project-hero { padding: 50px 0 60px; }
  .filter-row { justify-content: flex-start; }
  .portfolio-page-grid, .proof-inline-grid, .details-grid, .related-grid, .timeline-grid, .portfolio-hero-stats, .slider-thumbs { grid-template-columns: 1fr; }
  .portfolio-controls, .portfolio-list, .portfolio-proof, .project-overview, .project-timeline, .project-details, .related-projects { padding: 58px 0; }
  .slider-stage { min-height: 420px; }
  .project-meta div, .summary-list div { grid-template-columns: 1fr; display: grid; }
  .summary-list dd { text-align: left; }
}