:root{
  --bg:#f7f1e8;
  --surface:#ffffff;
  --ink:#2d2a26;
  --muted:#665f59;
  --accent:#9a6338;
  --accent2:#244c57;
  --fire:#a9352a;
  --gold:#d5b26f;
  --line:#e7ddd1;
  --shadow:0 20px 48px rgba(45,42,38,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1160px,calc(100% - 2rem));margin:0 auto}
.center{text-align:center}

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(247,241,232,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.logo{display:flex;align-items:center;gap:.75rem;color:var(--ink);font-weight:700}
.logo img{width:42px;height:42px}
.nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.nav a{color:var(--ink)}

.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),#7e4f2f);
  color:#fff;
  padding:.88rem 1.2rem;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--shadow);
}
.btn:hover{text-decoration:none;filter:brightness(.98)}
.btn-secondary{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:none;
}
.btn-sm{padding:.6rem 1rem}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;font-weight:700;color:var(--accent)}
.lead{font-size:1.12rem;color:var(--muted)}

.hero{
  position:relative;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(20,34,38,.88), rgba(34,43,48,.72)),
    url('lets-hero.webp');
  background-size:cover;
  background-position:center;
}
.hero{
  background-image:
    linear-gradient(135deg, rgba(20,34,38,.88), rgba(34,43,48,.72)),
    url('assets/lets-hero.webp');
}
.hero-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at right top, rgba(213,178,111,.22), transparent 24%);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .82fr;
  gap:2rem;
  align-items:center;
  padding:5rem 0;
}
.hero h1{
  font-size:clamp(2.3rem,4vw,4.6rem);
  line-height:1.03;
  margin:.2rem 0 1rem;
}
.hero-copy{max-width:740px}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}
.hero-card,
.quote-box,
.brand-card,
.content-panel,
.content-block,
.contact-card,
.mini-callout,
.showcase-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.hero-card{
  padding:1.5rem;
  color:var(--ink);
  background:rgba(255,255,255,.95);
}
.checklist{padding-left:1.2rem}
.checklist li{margin:.42rem 0}

.section{padding:4rem 0}
.intro-strip{padding-top:2.5rem}
.intro-grid{display:grid;grid-template-columns:1fr .82fr;gap:1.4rem;align-items:stretch}
.intro-copy{align-self:center}
.quote-box{padding:1.5rem;background:linear-gradient(135deg,#fff,#f4ece1)}

.section-heading{max-width:780px;margin:0 auto 1.6rem}
.brand-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.brand-card{overflow:hidden}
.brand-image{aspect-ratio:16/10;background:#fff}
.brand-image img{width:100%;height:100%;object-fit:cover}
.brand-image.logo-bg{
  display:grid;place-items:center;
  background:linear-gradient(135deg,#3a3a3a,#0b0b0b);
  padding:1.5rem;
}
.brand-image .contain{object-fit:contain;max-height:100%}
.brand-content{padding:1.45rem}
.card-badge{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:#f5ece3;
  padding:.35rem .65rem;
  border-radius:999px;
}

.visual-split .split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  align-items:center;
}
.visual-split .split-grid.reverse .image-panel{order:2}
.visual-split .split-grid.reverse .content-panel{order:1}
.image-panel img,.side-photo{
  width:100%;
  border-radius:26px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.content-panel{padding:1.7rem}
.alt-bg{background:#efe6da}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem;align-items:start}
.content-block{padding:1.4rem;margin-top:1rem}
.about-side{position:sticky;top:96px}
.mini-callout{padding:1.3rem;margin-top:1rem}

.showcase{display:grid;gap:1.5rem}
.showcase-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
  padding:1rem;
  overflow:hidden;
}
.showcase-panel.reverse .showcase-image{order:2}
.showcase-panel.reverse .showcase-copy{order:1}
.showcase-image img{
  width:100%;height:100%;object-fit:cover;border-radius:18px
}
.showcase-image.dark-frame{
  background:linear-gradient(135deg,#222,#000);
  border-radius:18px;
  display:grid;place-items:center
}
.showcase-image .contain{object-fit:contain}
.showcase-image .padded{padding:2rem}
.showcase-copy{display:flex;flex-direction:column;justify-content:center;padding:.5rem}
.panel-topics{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.panel-topics span{
  font-size:.8rem;background:#eef3f4;color:var(--accent2);padding:.35rem .6rem;border-radius:999px
}

.contact-layout{display:grid;grid-template-columns:1fr .9fr;gap:1.5rem;align-items:start}
.contact-card.large{padding:1.7rem}
.contact-email a{font-size:1.3rem;font-weight:700}
.contact-visuals{display:grid;gap:1rem}
.side-logo{
  background:#111;
  border-radius:24px;
  padding:1.5rem;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.site-footer{
  background:#2e2a28;
  color:#f5efe8;
  padding:2.3rem 0;
  margin-top:2rem;
}
.site-footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:1.2rem}
.site-footer h3,.site-footer h4{margin-top:0}
.site-footer ul{padding-left:1rem;margin:0}

@media (max-width: 920px){
  .hero-grid,.intro-grid,.brand-cards,.visual-split .split-grid,.about-grid,.showcase-panel,.contact-layout,.footer-grid{
    grid-template-columns:1fr
  }
  .visual-split .split-grid.reverse .image-panel,
  .visual-split .split-grid.reverse .content-panel,
  .showcase-panel.reverse .showcase-image,
  .showcase-panel.reverse .showcase-copy{
    order:initial
  }
  .nav-wrap{flex-direction:column;align-items:flex-start}
  .about-side{position:static}
  .hero-grid{padding:3.8rem 0}
}