:root { --yellow:#fff215; --ink:#1f1f1f; --muted:#696969; --paper:#f4f4f0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Archivo,Arial,sans-serif; }
a { color:inherit; }
.shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.notice { background:#202020; color:var(--yellow); text-align:center; font-size:.75rem; font-weight:700; padding:.42rem; }
.nav { position:sticky; top:0; z-index:10; background:var(--yellow); box-shadow:0 4px 18px rgba(0,0,0,.12); }
.nav-inner { min-height:64px; display:flex; align-items:center; gap:1.25rem; justify-content:space-between; }
.brand img { height:36px; display:block; }
.nav-contact { display:flex; gap:1rem; align-items:center; font-weight:800; font-size:.84rem; white-space:nowrap; }
.hero { background:#202020; color:white; padding:5rem 0 3rem; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.eyebrow { display:inline-block; background:var(--yellow); color:#202020; padding:.35rem .7rem; font-weight:900; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Archivo Black",Archivo,sans-serif; margin:0; line-height:1.05; }
h1 { font-size:clamp(2.5rem,5vw,5rem); text-transform:uppercase; margin:1.25rem 0; }
h1 mark { background:var(--yellow); color:#202020; padding:0 .15em; }
.hero p { max-width:58ch; color:#ededed; font-size:1.06rem; line-height:1.65; }
.hero .fineprint { color:#b4b4b4; font-size:.92rem; }
.hero-image { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
.buttons { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.7rem; }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; background:var(--yellow); color:#202020; padding:1rem 1.3rem; text-decoration:none; font-family:"Archivo Black",Arial,sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; clip-path:polygon(4% 0,100% 0,96% 100%,0 100%); }
.cta:hover { filter:brightness(.93); }
.phone { color:var(--yellow); font-weight:800; align-self:center; }
.proof { border-top:1px solid rgba(255,255,255,.13); margin-top:2.3rem; padding-top:1.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; color:#d7d7d7; font-size:.8rem; }
.proof span::before { content:"✓"; color:var(--yellow); margin-right:.55rem; font-weight:900; }
section { padding:5rem 0; }
.section-head { max-width:700px; margin-bottom:2.5rem; }
.section-head h2 { font-size:clamp(2rem,3vw,3.2rem); margin-top:.7rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#deded8; border:1px solid #deded8; }
.feature { background:white; padding:1.5rem; min-height:180px; }
.feature b { color:#202020; display:block; font-size:1.1rem; margin-bottom:.55rem; }
.feature p { margin:0; color:#5d5d5d; line-height:1.55; font-size:.94rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split.reverse > :first-child { order:2; }
.split img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.copy h2 { font-size:clamp(1.8rem,3vw,3rem); margin-bottom:1.1rem; }
.copy p { white-space:pre-line; color:#4e4e4e; line-height:1.7; }
.gallery { background:#202020; color:white; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-grid figure { margin:0; overflow:hidden; background:#323232; aspect-ratio:4/3; }
.gallery-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.gallery-grid img:hover { transform:scale(1.04); }
.contact { background:var(--yellow); }
.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:2rem; }
.contact h2 { font-size:clamp(2rem,4vw,3.7rem); }
.contact-info { display:grid; gap:.8rem; font-weight:800; }
.contact-info a { text-decoration:none; font-size:1.08rem; }
footer { background:#111; color:#b7b7b7; padding:3.5rem 0 2rem; }
.foot { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; flex-wrap:wrap; }
.foot h3 { color:var(--yellow); font-size:1.2rem; }
.foot p { max-width:45ch; line-height:1.6; font-size:.9rem; }
.foot a { font-size:.82rem; }
@media (max-width:900px) { .hero-grid,.split,.contact-grid { grid-template-columns:1fr; gap:2rem; } .nav-contact { font-size:.75rem; } .proof { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .shell { width:min(100% - 24px,1180px); } .hero { padding-top:3.25rem; } .feature-grid,.gallery-grid { grid-template-columns:1fr; } .proof { grid-template-columns:1fr; } .nav-inner { min-height:56px; } .nav-contact { gap:.5rem; } }
