:root {
  --wine: #6e0f1a;
  --wine-dark: #32070d;
  --wine-light: #a51628;
  --cream: #f8f2ea;
  --paper: #fffaf3;
  --ink: #1d1a18;
  --muted: #706763;
  --line: rgba(110, 15, 26, .16);
  --shadow: 0 24px 70px rgba(41, 13, 12, .12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--wine-light); }
button, input, textarea { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 12px; z-index: 1000; padding: 10px 14px; background: #fff; color: var(--wine); border-radius: 10px; }
.skip-link:focus { left: 12px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 250, 243, .9); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.2); transition: box-shadow .2s ease, background .2s ease; }
.site-header.is-scrolled { box-shadow: 0 14px 40px rgba(42, 17, 13, .08); background: rgba(255, 250, 243, .96); }
.topbar { background: var(--wine-dark); color: rgba(255,255,255,.78); font-size: .83rem; }
.topbar__inner { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topbar__links { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }
.navbar__inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 145px; height: auto; }
.nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { display: block; padding: 10px 14px; border-radius: 999px; color: #34211f; font-weight: 650; font-size: .92rem; letter-spacing: .01em; }
.nav-menu a:hover, .nav-menu a.is-active { color: var(--wine); background: rgba(110, 15, 26, .08); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--wine); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.section { padding: 104px 0; }
.section--cream { background: var(--cream); }
.section-dark { color: #fff; background: var(--wine-dark); }
.eyebrow { margin: 0 0 12px; color: var(--wine-light); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 800; }
.section-dark .eyebrow { color: #f6c8b7; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.045em; }
h1 { font-size: clamp(3.1rem, 7vw, 6.7rem); max-width: 980px; }
h2 { font-size: clamp(2.1rem, 4vw, 4.2rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.section-heading { max-width: 780px; margin-bottom: 42px; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 22px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: #fff; background: linear-gradient(135deg, var(--wine), var(--wine-light)); box-shadow: 0 16px 32px rgba(110, 15, 26, .24); }
.btn--primary:hover { color: #fff; box-shadow: 0 20px 44px rgba(110, 15, 26, .32); }
.btn--ghost { color: #fff; border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.08); }
.btn--ghost:hover { color: #fff; background: rgba(255,255,255,.16); }

.hero { min-height: 760px; position: relative; display: grid; align-items: center; overflow: hidden; }
.hero__media, .hero__overlay { position: absolute; inset: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 1s ease, transform 6s ease; }
.hero__media img.is-active { opacity: 1; transform: scale(1); }
.hero__overlay { background: radial-gradient(circle at 75% 15%, rgba(164,22,40,.25), transparent 34%), linear-gradient(90deg, rgba(24, 4, 8, .88), rgba(24, 4, 8, .58) 44%, rgba(24,4,8,.3)); }
.hero__content { position: relative; z-index: 1; padding: 120px 0 90px; }
.hero__lead { max-width: 680px; margin: 22px 0 34px; color: rgba(255,255,255,.84); font-size: clamp(1.05rem, 2vw, 1.28rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.stats { position: relative; z-index: 2; margin-top: -68px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border-radius: var(--radius-lg); background: var(--line); box-shadow: var(--shadow); }
.stats__grid div { background: #fff; padding: 28px; }
.stats strong { display: block; color: var(--wine); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.055em; }
.stats span { display: block; margin-top: 8px; color: var(--muted); font-weight: 650; }

.card-grid { display: grid; gap: 22px; }
.card-grid--four { grid-template-columns: repeat(4, 1fr); }
.card-grid--three { grid-template-columns: repeat(3, 1fr); }
.service-card, .image-card, .brand-card, .split__side, .contact-panel, .contact-details, .callout { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(41, 13, 12, .07); }
.service-card { padding: 30px; min-height: 100%; }
.service-card img { width: 74px; height: 74px; object-fit: contain; margin-bottom: 22px; }
.service-card h3 { color: var(--wine-dark); }
.service-card p, .image-card p, .brand-card p { color: var(--muted); margin-top: 12px; }

.quote-band { background-image: linear-gradient(rgba(50,7,13,.78), rgba(50,7,13,.78)), url('../images/texture-bg.jpg'); background-size: cover; background-position: center; padding: 86px 0; }
.quote-band__inner { max-width: 940px; text-align: center; }
blockquote { margin: 0; font-size: clamp(1.35rem, 2.8vw, 2.45rem); line-height: 1.22; letter-spacing: -.035em; font-weight: 650; }
cite { display: block; margin-top: 22px; color: #f2c5b9; font-style: normal; font-weight: 800; }

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .65fr); gap: 34px; align-items: start; }
.split__main > p:not(.eyebrow), .story-band p { color: var(--muted); font-size: 1.06rem; }
.callout { padding: 28px; margin-top: 26px; background: linear-gradient(135deg, #fff, #fff8ef); }
.callout h3 { margin-bottom: 12px; color: var(--wine); }
.callout p { margin: 0; }
.split__side { padding: 26px; }
.split__side h3 { margin-bottom: 12px; color: var(--wine); }
details { border-top: 1px solid var(--line); padding: 16px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 800; color: var(--wine-dark); }
details p { color: var(--muted); margin: 10px 0 0; }

.image-card { overflow: hidden; }
.image-card img { width: 100%; aspect-ratio: 1.38 / 1; object-fit: cover; }
.image-card div { padding: 26px; }
.image-card .meta { margin: 8px 0 0; color: var(--wine); font-weight: 800; }

.story-band { background-image: linear-gradient(90deg, rgba(50,7,13,.9), rgba(50,7,13,.52)), url('../images/story-bg.jpg'); background-size: cover; background-position: center; padding: 104px 0; }
.story-band__inner { max-width: 760px; }
.story-band p { color: rgba(255,255,255,.82); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter-btn { border: 1px solid var(--line); background: #fff; color: var(--wine-dark); padding: 11px 16px; border-radius: 999px; cursor: pointer; font-weight: 800; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-btn:hover, .filter-btn.is-active { background: var(--wine); color: #fff; border-color: var(--wine); }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.brand-card { padding: 18px; transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.brand-card:hover { transform: translateY(-4px); border-color: rgba(110, 15, 26, .32); }
.brand-card.is-hidden { display: none; }
.brand-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,.05); padding: 10px; }
.brand-card h3 { margin-top: 16px; font-size: 1.08rem; }
.brand-card p { margin: 7px 0 0; font-size: .92rem; }

.cta { background-image: linear-gradient(rgba(50,7,13,.76), rgba(50,7,13,.76)), url('../images/cta-bg.jpg'); background-size: cover; background-position: center; padding: 96px 0; text-align: center; }
.cta__inner { max-width: 760px; }
.cta p { color: rgba(255,255,255,.78); font-size: 1.18rem; margin: 16px 0 28px; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .65fr); gap: 26px; align-items: start; }
.contact-panel, .contact-details { padding: 34px; }
.contact-panel h2 { margin-bottom: 12px; }
.contact-panel > p:not(.eyebrow), .contact-details p { color: var(--muted); }
.contact-form { display: grid; gap: 16px; margin-top: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 8px; font-weight: 800; color: var(--wine-dark); }
label span { color: var(--wine-light); }
input, textarea { width: 100%; border: 1px solid rgba(110, 15, 26, .22); border-radius: 14px; padding: 13px 14px; background: #fff; color: var(--ink); outline: none; }
input:focus, textarea:focus { border-color: var(--wine); box-shadow: 0 0 0 4px rgba(110, 15, 26, .1); }
textarea { resize: vertical; min-height: 130px; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-response { min-height: 1.5em; font-weight: 750; margin: 0; }
.form-response.success { color: #14723b; }
.form-response.error { color: #b21c2b; }
.detail-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 16px; }
.detail-list li { display: grid; gap: 5px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.detail-list strong { color: var(--wine-dark); }
.detail-list span, .detail-list a { color: var(--muted); }
.map-card { display: grid; place-items: center; min-height: 170px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(110,15,26,.92), rgba(50,7,13,.86)), url('../images/hero-2.jpg'); background-size: cover; background-position: center; color: #fff; padding: 24px; text-align: center; font-weight: 850; }
.map-card:hover { color: #fff; }

.site-footer { padding: 28px 0; background: var(--wine-dark); color: rgba(255,255,255,.72); }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .92rem; }
.site-footer p { margin: 0; }
.site-footer a:hover { color: #fff; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .topbar__inner { justify-content: center; text-align: center; flex-direction: column; padding: 8px 0; gap: 4px; }
  .nav-toggle { display: block; }
  .nav-menu { position: fixed; inset: 112px 20px auto 20px; display: grid; gap: 4px; padding: 14px; border-radius: 20px; background: rgba(255,250,243,.98); box-shadow: var(--shadow); border: 1px solid var(--line); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
  .nav-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-menu a { padding: 13px 14px; }
  .hero { min-height: 680px; }
  .stats { margin-top: 0; }
  .stats__grid, .card-grid--four, .card-grid--three, .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 72px 0; }
  .navbar__inner { min-height: 68px; }
  .brand img { width: 138px; }
  .nav-menu { inset: 104px 14px auto 14px; }
  .topbar__links { justify-content: center; gap: 8px 14px; }
  .hero { min-height: 650px; }
  .hero__content { padding-top: 96px; }
  h1 { font-size: clamp(2.65rem, 15vw, 4rem); }
  h2 { font-size: clamp(2rem, 11vw, 3rem); }
  .stats__grid, .card-grid--four, .card-grid--three, .brand-grid, .form-row { grid-template-columns: 1fr; }
  .stats__grid { border-radius: 22px; }
  .service-card, .contact-panel, .contact-details { padding: 24px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
