:root {
  --bg: #faf7f2;
  --bg-soft: #fffaf5;
  --surface: #ffffff;
  --surface-soft: #f7f1e8;
  --text: #181512;
  --muted: #57504a;
  --line: #dfd6cb;
  --dark: #111111;
  --dark-2: #1d1a17;
  --orange: #c96318;
  --orange-dark: #a44f11;
  --white: #ffffff;
  --shadow: 0 16px 40px rgba(16, 12, 9, 0.08);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
h1,h2,h3,h4 { margin: 0; line-height: 1.06; }
h1 { font-size: clamp(2.55rem, 6vw, 4.55rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; }
h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
p { margin: 0; color: var(--muted); }
.body-lg { font-size: 1.08rem; }
.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.section-label, .small-label { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.eyebrow-pill { display:inline-flex; padding: .65rem 1rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-size: .83rem; font-weight: 700; }
.topbar { background: #0d0d0d; color: #f5efe8; font-size: .84rem; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: .8rem 0; }
.service-note { opacity: .92; }
.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); background: rgba(250,247,242,.92); border-bottom: 1px solid var(--line); }
.navbar { display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: .95rem 0; }
.brand { display:flex; align-items:center; gap: 1rem; min-width: 0; }
.brand-logo-wrap { display:inline-flex; align-items:center; justify-content:center; padding: .38rem .65rem; background: #060606; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.brand img { height: 54px; width: auto; }
.brand-name { font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em; }
.brand-tag { color: var(--muted); font-size: .92rem; }
.nav-links { display:flex; align-items:center; gap: 1.5rem; font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--orange-dark); }
.nav-cta { display:flex; align-items:center; gap: .75rem; }
.icon-button { display:none; width: 44px; height:44px; border:1px solid var(--line); background: var(--surface); border-radius: 14px; font-size: 1.15rem; }
.mobile-panel { display:none; padding-bottom: 1rem; }
.mobile-panel a { display:block; padding: .7rem 0; border-top:1px solid var(--line); font-weight: 600; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:.5rem; padding: .95rem 1.35rem; border-radius: 18px; font-weight: 700; border: 1px solid transparent; transition: .2s ease; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 12px 28px rgba(124, 56, 8, .22); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,.14); }
.btn-light { background: #fff; color: #181512; }
.btn-light:hover { background: #fff4ec; }
.btn-outline { border-color: var(--line); background: #fff; }
.btn-outline:hover { background: #fff6ef; }
.btn-darkghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.btn-darkghost:hover { background: rgba(255,255,255,0.14); }
.hero { position: relative; overflow:hidden; color:#fff; background: radial-gradient(circle at top right, rgba(255,145,60,.18), transparent 35%), linear-gradient(135deg, #0a0a0a 0%, #14110f 45%, #22140c 100%); }
.hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at bottom left, rgba(255,255,255,.08), transparent 28%); pointer-events:none; }
.hero-inner { position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; padding: 96px 0 88px; }
.lead { color:#ece3da; font-size:1.08rem; max-width: 760px; }
.chips, .tag-list, .hero-metric-row { display:flex; flex-wrap:wrap; gap:.7rem; }
.chip, .tag, .metric-pill { display:inline-flex; padding:.6rem .9rem; border-radius:999px; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); font-size:.82rem; color:#f8f2ec; font-weight:600; }
.hero-actions, .button-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-panel { border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); border-radius: var(--radius-xl); padding: 2rem; box-shadow: 0 20px 44px rgba(0,0,0,.24); }
.panel-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.35rem; }
.panel-card { border-radius: 20px; background: rgba(255,255,255,.08); padding: 1.05rem; }
.panel-card.wide { grid-column: 1/-1; }
.panel-card-title { font-weight: 700; }
.panel-card-text { color: #e7dbcf; font-size: .95rem; margin-top: .45rem; }
.trust-grid, .category-grid, .service-grid, .project-grid, .review-grid, .area-grid, .faq-grid, .contact-grid { display:grid; gap:1.25rem; }
.trust-grid { grid-template-columns: repeat(4,1fr); }
.trust-card, .category-card, .service-card, .project-card, .review-card, .area-card, .faq-card, .contact-panel, .project-detail, .highlight-card { background: var(--surface); border:1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.trust-card, .category-card, .service-card, .review-card, .area-card, .faq-card, .contact-panel, .highlight-card { padding: 1.5rem; }
.category-grid { grid-template-columns: repeat(3,1fr); margin-top: 2rem; }
.category-card h3 { color: var(--orange-dark); font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; }
.category-card p { margin-top: .7rem; }
.service-grid { grid-template-columns: repeat(4,1fr); margin-top: 2rem; }
.service-card { padding: 1.5rem; }
.service-icon { width: 48px; height: 48px; display:grid; place-items:center; border-radius: 16px; background: #ffeddc; color: var(--orange-dark); font-size: .84rem; font-weight: 800; margin-bottom: 1rem; }
.cta-banner { background: var(--orange); color:#fff; border-radius: var(--radius-xl); padding: 2rem; box-shadow: 0 18px 38px rgba(125,59,12,.22); }
.story-section { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.story-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items:center; }
.expect-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; margin-top: 1rem; }
.expect-card { background: var(--bg); border-radius: 22px; padding: 1.1rem; border:1px solid var(--line); }
.steps-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-top: 2rem; }
.step-card { background:#fff; border:1px solid var(--line); border-radius: 26px; padding:1.5rem; box-shadow: var(--shadow); }
.step-number { width: 44px; height: 44px; display:grid; place-items:center; background: var(--orange); color:#fff; border-radius: 14px; font-weight:800; margin-bottom: .9rem; }
.project-grid { grid-template-columns: repeat(3,1fr); margin-top: 2rem; }
.project-card img { width:100%; height: 230px; object-fit:cover; border-top-left-radius: 28px; border-top-right-radius:28px; }
.project-card-content { padding: 1.4rem; }
.project-location { color: #93460e; font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.dark-section { background: #12100f; color: #fff; }
.dark-section p { color: #ddd2c6; }
.review-wrap { display:grid; grid-template-columns: .9fr 1.1fr; gap: 1.5rem; margin-top: 2rem; }
.dark-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; padding: 1.5rem; }
.review-grid { grid-template-columns: 1fr; }
.review-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color:#fff; }
.review-card p { color: #f0e6da; }
.review-author { margin-top: 1rem; font-size: .9rem; font-weight: 700; color:#fff; }
.area-grid { grid-template-columns: 1fr 1fr; }
.area-list { display:flex; flex-wrap:wrap; gap:.7rem; margin-top: 1rem; }
.area-pill { background: var(--bg); border:1px solid var(--line); border-radius: 999px; padding: .55rem .9rem; font-weight: 600; font-size: .88rem; }
.faq-grid { grid-template-columns: 1fr; margin-top: 1rem; }
.faq-card h3 { font-size: 1.05rem; }
.contact-section { background: linear-gradient(135deg, #0c0c0c 0%, #15110f 50%, #24140c 100%); color:#fff; }
.contact-section p { color:#ddd2c6; }
.contact-grid { grid-template-columns: .95fr 1.05fr; align-items: start; }
.contact-panel .socials { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.contact-panel .socials a { color: #f7e7d7; }
.form-card { background: rgba(255,255,255,.96); color: var(--text); border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.1); padding: 2rem; box-shadow: 0 20px 44px rgba(0,0,0,.22); }
.form-card p { color: var(--muted); }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 1.2rem; }
.form-group { display:grid; gap: .45rem; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: .92rem; font-weight: 600; color: #4d463f; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius: 18px; padding: .9rem 1rem; font: inherit; color: var(--text); background: #fff; }
textarea { min-height: 148px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(201, 99, 24, .15); }
.alert-success, .alert-error { display:none; padding:.85rem 1rem; border-radius: 14px; font-size:.92rem; margin-bottom: 1rem; }
.alert-success { background: #edf9ef; color: #1d6a2d; }
.alert-error { background: #fff0f0; color: #9a1b1b; }
.footer { background: #0f0f0f; color: #cfc1b3; padding: 2rem 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.footer-brand { display:flex; align-items:center; gap: 1rem; }
.footer-logo-wrap img { height: 40px; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem; font-size:.92rem; }
.floating-cta { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: block; background: rgba(17,17,17,.96); border:1px solid rgba(255,255,255,.08); color:#fff; border-radius: 28px; padding: .9rem; box-shadow: 0 22px 42px rgba(0,0,0,.35); }
.mobile-bottom-bar { display:none; }
.project-detail { padding: 1.15rem; display:grid; gap: 1.2rem; margin-bottom: 1.25rem; }
.before-after { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.before-after figure { margin: 0; }
.before-after img { width: 100%; height: 300px; object-fit: cover; border-radius: 18px; }
.before-after figcaption { margin-top: .55rem; font-weight: 700; color: var(--muted); font-size: .92rem; }
.project-detail-content { padding: .25rem .2rem .5rem; }
.highlight-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
.notice { color: var(--muted); font-size: .95rem; }

.hero-panel .tag { background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); color:#f8f2ec; }
.project-detail .tag, .highlight-card .tag, .project-card .tag, .area-card .tag { background:#fff1e4; border:1px solid #f1d4ba; color: var(--orange-dark); }
.contact-panel { background: rgba(17,17,17,.58); border:1px solid rgba(255,255,255,.10); }
.contact-panel p, .contact-panel .small { color:#fff4e9; }
.contact-panel .socials a { color:#fff7f0; font-weight:700; }
.contact-panel .socials a:hover { color:#ffd2b8; }
.contact-panel .btn-light { background:#fff; color:#171412; }
.contact-panel .btn-secondary { color:#fff; }
@media (max-width: 1080px) {
  .service-grid, .trust-grid, .project-grid, .highlight-grid { grid-template-columns: repeat(2,1fr); }
  .hero-inner, .story-grid, .review-wrap, .contact-grid, .area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .nav-links { display:none; }
  .icon-button { display:grid; place-items:center; }
  .nav-cta .btn-primary { display:none; }
  .mobile-panel.open { display:block; }
  .service-grid, .trust-grid, .category-grid, .project-grid, .steps-grid, .highlight-grid, .form-grid, .expect-grid { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  .before-after img { height: 250px; }
  .floating-cta { display:none; }
  .mobile-bottom-bar { display:block; position: fixed; inset-inline: 0; bottom:0; z-index:50; background: rgba(17,17,17,.96); border-top:1px solid rgba(255,255,255,.08); padding: .85rem; }
  .mobile-bottom-inner { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 560px; margin: 0 auto; }
  body { padding-bottom: 88px; }
  .brand img { height: 44px; }
  .brand-name { font-size: 1.02rem; }
}

.review-stars { margin-bottom: .75rem; color: #fbbf24; letter-spacing: .18em; font-size: 1.05rem; }