:root{
  --brand: #615f52;
  --brand-2: #a19c8c;
  --ink: #0a0f1a;
  --muted: #465064;
  --bg: #ece8de;
  --surface: #ffffff;
  --ring: #615f5233;
  --shadow: 0 2px 8px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.04);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
}

img{max-width:100%;height:auto;display:block}

.container{width:min(1120px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border-radius:8px; box-shadow: var(--shadow); z-index:1000}

.brand-strip{
  height: 6px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.site-header{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.86); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .65rem 0}

.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit}
.brand-logo{width:72px; height:72px; border-radius:12px; object-fit:cover; box-shadow: 0 3px 10px rgba(0,0,0,.12)}
.brand-text{font-weight:900; letter-spacing:.02em; font-size: clamp(1rem, 1.8vw, 1.25rem)}

.site-nav{display:flex; align-items:center; gap:1rem}
.site-nav ul{list-style:none; display:flex; gap:.75rem; margin:0; padding:0}
.site-nav a{color:var(--ink); text-decoration:none; font-weight:700}
.site-nav a:hover{text-decoration:underline}

.nav-toggle{display:none; background:none; border:none; padding:.25rem; cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0; border-radius:2px}

.btn{
  display:inline-block; text-decoration:none; font-weight:800;
  padding:.9rem 1.1rem; border-radius:12px; border:1px solid transparent;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  transition: transform .05s ease, filter .2s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff}
.btn-primary:hover{filter: brightness(1.05)}
.btn-outline{background:#fff; border-color: rgba(0,0,0,.12); color: var(--ink)}
.btn-outline:hover{border-color: rgba(0,0,0,.2)}

.hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%);
  padding: clamp(2rem, 4vw, 4rem) 0;
}
.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.25rem, 3vw, 3rem); align-items:center}
.hero .eyebrow{text-transform:uppercase; letter-spacing:.08em; color: var(--brand-2); font-weight:800; margin:0 0 .35rem}
.hero h1{font-size: clamp(2rem, 3.4vw, 3.2rem); line-height:1.1; margin:0 0 .75rem}
.hero .sub{font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--muted); margin:0 0 1rem}
.hero .actions{display:flex; gap:.75rem; flex-wrap:wrap; margin:.5rem 0 1rem}
.trust{display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; color:#273247}
.trust li::before{content:"✓"; color:var(--brand); margin-right:.35rem}

.hero-logo-card{
  position:relative; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow);
  padding: 1rem; text-align:center;
}
.hero-logo-wrap{padding: .5rem; border-radius: 14px; background: radial-gradient(600px 300px at 50% 0, var(--brand-2) 0%, transparent 60%)}
.hero-logo-card img{width: min(360px, 92%); margin-inline:auto; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,.15)}
.hero-logo-card figcaption{font-size:.95rem; color: var(--muted); margin-top:.5rem}

.section{padding: clamp(2rem, 5vw, 4rem) 0}
.section.alt{background:#fff}
.section-header h2{font-size: clamp(1.5rem, 2.4vw, 2rem); margin:.25rem 0}
.section-header p{color: var(--muted); margin:.25rem 0}

.card-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:1rem}
.card{background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding:1rem}
.card .icon{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background: color-mix(in srgb, var(--brand) 10%, #ecfdf5); margin-bottom:.5rem}
.card .icon svg{width:26px; height:26px; fill: var(--brand)}

.services-grid .card{grid-column: span 2}

.process{margin-top: 1.5rem; background: #f9fafb; border:1px solid rgba(0,0,0,.05); border-radius: var(--radius); padding:1rem}
.process ol{margin:0; padding-left:1.25rem}
.process li{margin:.35rem 0}

.two-col{display:grid; grid-template-columns: 1.2fr .8fr; gap: 1.25rem; align-items:start}
.callout{background: linear-gradient(135deg,#fff, color-mix(in srgb, var(--brand) 4%, #f7fbfa)); border:1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow)}
.callout .eyebrow{font-weight:800; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; margin:0}
.callout .big{font-size:1.35rem; margin:.25rem 0 .5rem}
.callout a{display:inline-block; margin-top:.35rem}

.gallery-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap: .75rem}
.gallery-grid img{border-radius: 12px; box-shadow: var(--shadow)}

details{background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding:.75rem 1rem; margin:.5rem 0}
details summary{cursor:pointer; font-weight:800}

.contact .contact-card{background: var(--surface); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow);}
.contact-list{list-style:none; padding:0; margin:0 0 .75rem}
.contact-list li{margin:.25rem 0}
.cta-stack{display:flex; gap:.5rem; flex-wrap:wrap}

.form-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:.75rem}
.form-grid label{display:flex; flex-direction:column; font-weight:700; font-size:.95rem}
.form-grid input, .form-grid select, .form-grid textarea{
  margin-top:.35rem; padding:.7rem .8rem; border:1px solid #d7dee3; border-radius: 10px; background:#fff;
  font: inherit; color: inherit; outline: none;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring);
}
.form-grid label:nth-child(1),
.form-grid label:nth-child(2),
.form-grid label:nth-child(3),
.form-grid label:nth-child(4),
.form-grid label:nth-child(5),
.form-grid label:nth-child(6){grid-column: span 3}
.form-grid label.span-2{grid-column: 1 / -1}

.form-actions{display:flex; gap:.75rem; align-items:center; margin-top:.75rem}

.site-footer{margin-top:2rem; background: #0b1320; color:#e7edf5}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:1rem; align-items:center; padding:1.25rem 0}
.brand-foot{display:flex; align-items:center; gap:.75rem}
.brand-foot img{width:54px; height:54px; border-radius:12px; object-fit:cover}
.foot-links{display:flex; gap:.75rem; flex-wrap:wrap}
.foot-links a{color:#c8d3df; text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-cta .btn{padding:.6rem .8rem}
.legal{border-top:1px solid rgba(255,255,255,.08); font-size:.9rem}
.legal .container{padding:.6rem 0}
.muted{color:#6b7788}

.small{font-size:.9rem; color: var(--muted)}

/* Before/After component */
.ba-case{display:grid; grid-template-columns: 1fr .9fr; gap: 1rem; align-items:center}
.ba-wrap{position:relative; aspect-ratio: 16/10; border-radius: 14px; overflow:hidden; box-shadow: var(--shadow); background:#111}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba-after{clip-path: inset(0 0 0 46%)}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize}
.ba-handle{position:absolute; top:0; bottom:0; left:54%; width:2px; background:#fff8; box-shadow: inset 0 0 0 1px #0002}
.ba-handle span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); display:grid; place-items:center}
.ba-handle span::before{content:"↔"; font-weight:900}
.ba-label{position:absolute; top:10px; padding:.25rem .5rem; background:#0009; color:#fff; border-radius:8px; font-weight:800; font-size:.85rem}
.ba-label-before{left:10px}
.ba-label-after{right:10px}
.ba-copy h3{margin:.5rem 0}
@media (max-width: 980px){ .ba-case{grid-template-columns:1fr} }

/* Responsive */
@media (max-width: 980px){
  .hero-grid, .two-col{grid-template-columns: 1fr}
  .hero-logo-card{order:-1}
  .services-grid .card{grid-column: span 3}
  .gallery-grid{grid-template-columns: repeat(3, 1fr)}
  .footer-grid{grid-template-columns: 1fr; text-align:center}
  .brand-foot{justify-content:center}
}
@media (max-width: 680px){
  .site-nav{position:fixed; inset:66px 0 auto 0; background:#fff; border-bottom:1px solid rgba(0,0,0,.08); padding: .75rem 1rem; display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; gap:.5rem; margin-bottom:.5rem}
  .nav-toggle{display:block}
  .services-grid .card{grid-column: span 6}
  .gallery-grid{grid-template-columns: repeat(2, 1fr)}
  .form-grid label:nth-child(1),
  .form-grid label:nth-child(2),
  .form-grid label:nth-child(3),
  .form-grid label:nth-child(4),
  .form-grid label:nth-child(5),
  .form-grid label:nth-child(6){grid-column: span 6}
}