@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --brown: #4E2414;
  --gold: #B48669;
  --cream: #EBE7DC;
  --ink: #261712;
  --white: #fffdf9;
  --line: rgba(78,36,20,.16);
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Montserrat", Arial, sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.header { position: sticky; top: 0; z-index: 20; background: rgba(235,231,220,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { width: 150px; height: 66px; object-fit: contain; object-position: left center; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.nav-links a:not(.nav-cta) { opacity: .78; transition: opacity .2s; }
.nav-links a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { border: 1px solid var(--brown); padding: 11px 17px; border-radius: 999px; }
.menu-toggle { display:none; background:none; border:0; font-size:24px; color:var(--brown); }

.hero { min-height: calc(100vh - 88px); display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 6vw; padding: 70px max(24px, calc((100vw - 1160px)/2)); overflow:hidden; }
.hero-text { padding: 30px 0 60px; }
.eyebrow { display: inline-block; color: var(--brown); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -.025em; max-width: 720px; margin: 22px 0; }
.hero p { max-width: 600px; font-size: 16px; color: rgba(38,23,18,.72); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.button { display:inline-flex; align-items:center; gap:16px; padding:16px 23px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(38,23,18,.12); }
.button-primary { background:var(--brown); color:var(--white); }
.text-link { font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.hero-image { position:relative; height:min(720px, 72vh); min-height:560px; }
.hero-image img { position:absolute; right:0; top:0; width:88%; height:100%; object-fit:cover; object-position:center top; border-radius:2px; }
.hero-frame { position:absolute; right:7%; top:7%; width:88%; height:100%; border:1px solid var(--gold); transform:translate(28px,28px); }
.hero-badge { position:absolute; left:0; bottom:34px; background:var(--brown); color:var(--white); padding:18px 24px; min-width:190px; }
.hero-badge strong { display:block; font-size:12px; letter-spacing:.12em; }
.hero-badge span { font-size:10px; opacity:.72; }

.section { padding:120px 0; }
.section-heading { max-width:750px; margin-bottom:52px; }
.section h2 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.4vw,58px); line-height:1.08; margin:15px 0 0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { min-height:340px; padding:38px; border:1px solid var(--line); background:rgba(255,253,249,.32); display:flex; flex-direction:column; justify-content:flex-end; transition:transform .25s, background .25s; }
.card:hover { transform:translateY(-5px); background:var(--white); }
.card.featured { background:var(--brown); color:var(--white); border-color:var(--brown); }
.card-number { font-size:11px; letter-spacing:.16em; margin-bottom:auto; opacity:.65; }
.card h3 { font-family:var(--serif); font-size:30px; font-weight:400; margin:0 0 12px; }
.card p { margin:0; font-size:14px; opacity:.76; }

.quote-section { background:var(--white); padding:110px 0; }
.quote-wrap { max-width:850px; text-align:center; }
.quote-mark { font-family:var(--serif); color:var(--gold); font-size:90px; line-height:.5; }
blockquote { font-family:var(--serif); font-size:clamp(30px,4vw,50px); line-height:1.16; margin:30px 0 20px; }
.quote-wrap p { font-size:13px; text-transform:uppercase; letter-spacing:.12em; opacity:.58; }

.about { background:var(--brown); color:var(--white); }
.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; align-items:center; }
.about-image img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.about .eyebrow { color:var(--gold); }
.about h2 { margin-bottom:28px; }
.about-copy p { color:rgba(255,253,249,.72); max-width:650px; }
.signature { margin-top:35px; font-family:var(--serif); font-size:25px; }
.signature small { font-family:"Montserrat",Arial,sans-serif; font-size:10px; letter-spacing:.15em; text-transform:uppercase; opacity:.55; }

.photo-strip { min-height:420px; display:grid; grid-template-columns:1fr 1fr 1fr; background:#1f1410; }
.photo-strip > img { width:100%; height:100%; min-height:420px; object-fit:cover; object-position:center top; }
.photo-message { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px; color:var(--white); text-align:center; background:var(--gold); }
.mini-logo { width:70px; margin-bottom:30px; }
.photo-message p { font-family:var(--serif); font-size:30px; line-height:1.15; max-width:310px; }

.contact { padding:80px 0; background:var(--cream); }
.contact-box { background:var(--brown); color:var(--white); padding:62px 70px; display:flex; justify-content:space-between; align-items:center; gap:40px; }
.contact .eyebrow { color:var(--gold); }
.contact h2 { font-size:clamp(36px,4vw,52px); margin:10px 0 8px; }
.contact p { margin:0; color:rgba(255,255,255,.68); }
.button-light { background:var(--white); color:var(--brown); white-space:nowrap; }

.footer { background:#24130d; color:rgba(255,255,255,.7); padding:45px 0; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; }
.footer-logo { width:170px; height:75px; object-fit:contain; object-position:left center; }
.footer-info { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.footer-grid > p { text-align:right; font-size:10px; margin:0; opacity:.55; }

.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:30; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--brown); color:var(--white); box-shadow:0 10px 28px rgba(38,23,18,.22); font-size:27px; }

@media (max-width: 820px) {
  .container { width:min(100% - 34px, 620px); }
  .nav { height:72px; }
  .brand img { width:132px; height:55px; }
  .menu-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:72px; left:0; right:0; padding:22px 25px; background:var(--cream); flex-direction:column; align-items:stretch; border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }
  .nav-cta { text-align:center; }
  .hero { display:flex; flex-direction:column; padding:48px 17px 70px; min-height:auto; gap:42px; }
  .hero-text { padding:0; }
  .hero h1 { font-size:47px; }
  .hero-image { width:100%; height:620px; min-height:0; }
  .hero-image img { width:90%; }
  .hero-frame { width:90%; }
  .section { padding:82px 0; }
  .cards { grid-template-columns:1fr; }
  .card { min-height:270px; }
  .about-grid { grid-template-columns:1fr; gap:45px; }
  .about-image { max-width:470px; }
  .photo-strip { grid-template-columns:1fr 1fr; }
  .photo-message { grid-column:1 / -1; min-height:280px; }
  .contact-box { padding:42px 30px; flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > p { text-align:left; }
}