@font-face{ font-family:'Hussar'; src:url('assets/fonts/HussarBold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'PublicSans'; src:url('assets/fonts/PublicSans-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root{ --river:#5C291F; --sage:#C6C2A2; --white:#FCFBF6; --sky:#C2D7EB; --beige:#927D41; --ink:#2a211c; --muted:#6c6459; --line:#e7e3d7; --sage-tint:#eceadd; --sky-tint:#e7f0f8; --beige-tint:#efe9db; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'PublicSans',system-ui,sans-serif; color:var(--ink); background:var(--white); line-height:1.6; font-size:17px; }
h1,h2,h3,.disp{ font-family:'Hussar','PublicSans',sans-serif; font-weight:700; letter-spacing:.5px; line-height:1.05; color:var(--river); text-transform:uppercase; }
a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 22px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:6px; cursor:pointer; border:2px solid var(--river); transition:all .18s; letter-spacing:.3px; }
.btn.primary{ background:var(--river); color:#fff; } .btn.primary:hover{ background:#471e16; }
.btn.ghost{ background:transparent; color:var(--river); } .btn.ghost:hover{ background:var(--river); color:#fff; }
.eyebrow{ font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--beige); }
header{ position:sticky; top:0; z-index:60; background:rgba(252,251,246,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; max-width:1200px; margin:0 auto; }
.brand img{ height:34px; }
.menu{ display:flex; gap:18px; align-items:center; }
.menu a{ font-weight:600; font-size:15px; color:var(--ink); padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.menu a:hover{ color:var(--river); } .menu a.active{ color:var(--river); border-color:var(--river); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .tel{ font-weight:700; color:var(--river); font-size:15px; white-space:nowrap; }
.burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.burger span{ width:24px; height:2.5px; background:var(--river); border-radius:2px; }
@media(max-width:1200px){
  .menu{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--white); border-bottom:1px solid var(--line); padding:8px 0; }
  .menu.open{ display:flex; } .menu a{ padding:12px 22px; border-bottom:1px solid var(--line); }
  .nav-cta .tel,.nav-cta .btn{ display:none; } .burger{ display:flex; }
}
section{ padding:66px 0; }
.sec-head{ max-width:680px; margin-bottom:32px; }
.sec-head h2{ font-size:34px; margin:8px 0; } .sec-head h2::after{ content:""; display:block; width:52px; height:3px; background:var(--beige); border-radius:2px; margin:14px 0 2px; } .sec-head p{ color:var(--muted); font-size:18px; }
.hero{ background:linear-gradient(180deg,var(--sage-tint),var(--white)); padding:64px 0 54px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; }
.hero h1{ font-size:52px; margin:14px 0 18px; } .hero h1 .h1-sub{ display:block; color:var(--beige); font-size:.58em; margin-top:.14em; letter-spacing:.6px; } .hero p.lead{ font-size:20px; color:var(--muted); margin-bottom:26px; max-width:32ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-photo{ position:relative; }
.hero-photo .frame{ border-radius:16px; overflow:hidden; background:var(--sage); box-shadow:0 24px 50px -24px rgba(92,41,31,.5); aspect-ratio:4/5; }
.hero-photo .frame img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-photo .tagcard{ position:absolute; left:-14px; bottom:22px; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 14px 30px -14px rgba(0,0,0,.35); }
.hero-photo .tagcard b{ color:var(--river); font-family:'Hussar'; font-size:15px; letter-spacing:.5px; } .hero-photo .tagcard span{ display:block; font-size:12px; color:var(--muted); }
.trust{ background:var(--river); color:#fff; } .trust .wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; padding:18px 22px; text-align:center; }
.trust span{ font-weight:600; font-size:14.5px; } .trust span b{ color:var(--sky); }
.intro p{ font-size:19px; color:var(--ink); max-width:780px; }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; }
.card .ic{ width:44px; height:44px; border-radius:11px; background:var(--sky); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--river); font-weight:800; }
.card h3{ font-size:16px; text-transform:none; letter-spacing:0; font-family:'PublicSans'; font-weight:800; color:var(--ink); margin-bottom:5px; } .card p{ font-size:14.5px; color:var(--muted); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px; transition:.2s; }
.svc:hover{ box-shadow:0 18px 36px -22px rgba(92,41,31,.4); transform:translateY(-3px); border-color:var(--sage); }
.svc .n{ font-family:'Hussar'; color:var(--beige); font-size:14px; } .svc h3{ font-size:19px; text-transform:none; letter-spacing:0; margin:8px 0 6px; } .svc p{ font-size:14.5px; color:var(--muted); }
.process{ background:var(--sky-tint); }
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.step .n{ width:42px; height:42px; border-radius:50%; background:#fff; border:2px solid var(--beige); color:var(--beige); font-family:'Hussar'; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; text-align:center; margin-bottom:12px; }
.step h3{ font-size:16px; text-transform:none; letter-spacing:0; font-family:'PublicSans'; font-weight:800; color:var(--ink); margin-bottom:4px; } .step p{ font-size:13.5px; color:var(--muted); }
.areas-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.areas-grid span{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:9px 16px; font-size:14.5px; color:var(--ink); transition:.18s; } .areas-grid span:hover{ border-color:var(--beige); color:var(--beige); background:var(--beige-tint); }
.faq-item{ border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:#fff; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:16px 20px; font-weight:800; font-size:16px; color:var(--river); display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; font-family:'Hussar'; font-size:20px; color:var(--beige); }
.faq-item[open] summary::after{ content:'–'; } .faq-item .a{ padding:0 20px 18px; color:var(--muted); font-size:15.5px; }
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gtile{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.gtile img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .gtile .cap{ padding:12px 14px; font-size:13.5px; color:var(--muted); }
.about-banner{ border-radius:18px; overflow:hidden; aspect-ratio:16/8; background:var(--sage); } .about-banner img{ width:100%; height:100%; object-fit:cover; }
.about-copy{ max-width:790px; margin-top:30px; }
.feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.feature.flip .fimg{ order:2; }
.feature .fimg{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:var(--sage); box-shadow:0 24px 50px -28px rgba(92,41,31,.45); }
.feature .fimg img{ width:100%; height:100%; object-fit:cover; }
.feature h2{ font-size:30px; margin:8px 0; } .feature h2::after{ content:""; display:block; width:52px; height:3px; background:var(--beige); border-radius:2px; margin:14px 0 2px; }
.brands{ text-align:center; } .brands .brands-label{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--beige); font-weight:800; margin-bottom:16px; } .brands ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 40px; padding:0; margin:0; } .brands li{ font-family:'Hussar','PublicSans',sans-serif; font-size:21px; letter-spacing:.5px; color:var(--river); text-transform:uppercase; opacity:.85; }
.feature p{ color:var(--muted); font-size:17px; margin-top:12px; }
.feature .ticks{ list-style:none; margin:18px 0 0; padding:0; } .feature .ticks li{ padding:7px 0 7px 28px; position:relative; font-size:15.5px; }
.feature .ticks li::before{ content:"\2713"; position:absolute; left:0; color:var(--beige); font-weight:800; }
.note{ background:var(--sage-tint); border-left:3px solid var(--beige); border-radius:0 8px 8px 0; padding:12px 16px; font-size:14px; color:var(--muted); }
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; }
.contact-banner{ border-radius:18px; overflow:hidden; aspect-ratio:16/7; background:var(--sage); margin-bottom:34px; } .contact-banner img{ width:100%; height:100%; object-fit:cover; }
.cinfo .row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.cinfo .row .k{ width:40px; height:40px; border-radius:10px; background:var(--sage-tint); display:flex; align-items:center; justify-content:center; color:var(--river); flex:0 0 auto; }
.cinfo .row b{ display:block; font-size:15px; } .cinfo .row span{ color:var(--muted); font-size:15px; }
form{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
form label{ display:block; font-size:13px; font-weight:700; margin:12px 0 5px; }
form input,form select,form textarea{ width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:15px; background:var(--white); }
form textarea{ min-height:96px; resize:vertical; } form .btn{ width:100%; justify-content:center; margin-top:18px; } form .hint{ font-size:12px; color:var(--muted); margin-top:10px; text-align:center; }
.cta{ background:var(--sky); border-radius:20px; padding:46px; text-align:center; } .cta h2{ font-size:30px; margin-bottom:8px; } .cta p{ color:#33414d; margin-bottom:20px; }
.val-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.val{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.val .k{ color:var(--beige); font-family:'Hussar'; font-size:18px; } .val b{ display:block; } .val p{ font-size:14.5px; color:var(--muted); }
footer{ background:var(--river); color:#e9e2d7; padding:54px 0 90px; margin-top:20px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; }
footer img.flogo{ height:30px; margin-bottom:14px; }
footer h4{ font-family:'Hussar'; color:#fff; font-size:15px; margin-bottom:12px; letter-spacing:.5px; }
footer p,footer a{ font-size:14.5px; color:#ddd3c6; margin-bottom:7px; } footer a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.16); margin-top:30px; padding-top:18px; font-size:12.5px; color:#c3b7a8; }
.mobile-bar{ display:none; }
@media(max-width:560px){ .cards,.svc-grid,.gal,.steps,.areas-grid,.val-grid{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; gap:28px; } footer{ padding:40px 0 96px; } .cta{ padding:34px 24px; } }
@media(max-width:860px){
  .hero-grid,.contact-grid,.feature{ grid-template-columns:1fr; } .hero h1{ font-size:38px; } .steps{ grid-template-columns:1fr 1fr; }
  .cards,.svc-grid,.gal,.val-grid{ grid-template-columns:1fr 1fr; } .about-banner,.contact-banner{ aspect-ratio:16/11; }
  .feature.flip .fimg{ order:0; } .feature .fimg{ aspect-ratio:16/10; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 28px; } .foot-grid > div:first-child{ grid-column:1 / -1; }
  .hero-photo .tagcard{ position:static; margin-top:12px; display:inline-block; }
  .mobile-bar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:70; gap:1px; box-shadow:0 -6px 20px -8px rgba(0,0,0,.28); }
  .mobile-bar a{ flex:1; text-align:center; padding:15px; font-weight:800; font-size:15px; }
  .mobile-bar .call{ background:#fff; color:var(--river); } .mobile-bar .quote{ background:var(--river); color:#fff; }
}