:root {
  --black: #070707;
  --coal: #141312;
  --steel: #2c3030;
  --cream: #f2e4cf;
  --amber: #d79635;
  --red: #a83a2a;
  --muted: rgba(242, 228, 207, .72);
  --dark-muted: rgba(20, 19, 18, .72);
  --line: rgba(242, 228, 207, .16);
  --shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Archivo, system-ui, sans-serif; color: var(--coal); background: #f8f0e3; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.header { position: fixed; z-index: 30; inset: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 18px clamp(18px,4vw,58px); color: var(--cream); background: linear-gradient(180deg, rgba(7,7,7,.9), rgba(7,7,7,0)); }
.brand { font-family: "Roboto Slab", serif; font-size: 26px; font-weight: 900; text-transform: uppercase; }
.brand span { color: var(--amber); }
.nav { display: flex; justify-content: center; gap: 30px; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.lang { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(242,228,207,.28); background: rgba(242,228,207,.1); }
.lang button { width: 40px; height: 34px; border: 0; color: var(--cream); background: transparent; font-weight: 900; cursor: pointer; }
.lang button.active { color: var(--black); background: var(--cream); }
.hero { position: relative; min-height: 96vh; display: grid; align-items: end; padding: 140px clamp(18px,5vw,72px) 42px; color: var(--cream); background: var(--black); overflow: hidden; }
.hero > img, .overlay { position: absolute; inset: 0; }
.hero > img { opacity: .72; filter: saturate(1.1) contrast(1.08); }
.overlay { background: linear-gradient(90deg, rgba(7,7,7,.92), rgba(7,7,7,.62) 46%, rgba(7,7,7,.12)), linear-gradient(0deg, rgba(7,7,7,.86), rgba(7,7,7,0) 50%); }
.hero-copy { position: relative; z-index: 2; max-width: 900px; padding-bottom: 102px; }
.eyebrow { margin: 0 0 14px; color: var(--amber); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: "Roboto Slab", serif; font-weight: 900; letter-spacing: 0; }
h1 { max-width: 880px; margin-bottom: 22px; font-size: clamp(62px,10vw,140px); line-height: .86; text-transform: uppercase; }
h2 { margin-bottom: 22px; font-size: clamp(42px,6.8vw,88px); line-height: .92; }
h3 { margin: 18px 0 10px; font-size: 30px; }
.hero-copy p:not(.eyebrow), .story-copy p, .card-grid p, .dog p, .visit-card { font-size: 18px; line-height: 1.66; }
.hero-copy p:not(.eyebrow) { max-width: 650px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 22px; border: 1px solid currentColor; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.btn.primary { border-color: var(--amber); color: var(--black); background: var(--amber); }
.btn.ghost { color: var(--cream); background: rgba(242,228,207,.08); }
.btn.full { width: 100%; margin-top: 22px; }
.stats { position: absolute; z-index: 3; left: clamp(18px,5vw,72px); right: clamp(18px,5vw,72px); bottom: 28px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: rgba(7,7,7,.72); }
.stats div { padding: 18px 22px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats strong { display: block; font-size: 44px; line-height: .9; }
.stats span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.story,.cards,.dog,.gallery,.reviews,.visit { padding: clamp(76px,10vw,138px) clamp(18px,5vw,72px); }
.story { display: grid; grid-template-columns: .95fr .8fr; gap: clamp(34px,7vw,94px); }
.story-copy p { color: var(--dark-muted); }
.story-copy blockquote { margin: 30px 0 0; padding-left: 24px; border-left: 5px solid var(--red); font-family: "Roboto Slab", serif; font-size: clamp(32px,4vw,54px); font-weight: 900; line-height: 1; }
.feature-photo { height: clamp(360px,54vw,680px); background: var(--black); }
.cards { background: var(--coal); color: var(--cream); }
.section-title { max-width: 1040px; margin-bottom: 40px; }
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card-grid article { background: #211f1c; min-width: 0; }
.card-grid img { height: clamp(360px,42vw,560px); }
.card-grid h3,.card-grid p { padding-left: 24px; padding-right: 24px; }
.card-grid p { color: var(--muted); padding-bottom: 26px; }
.dog { display: grid; grid-template-columns: .9fr .8fr; gap: clamp(30px,6vw,84px); color: var(--cream); background: var(--red); }
.dog .eyebrow { color: #ffd38b; }
.dog p { color: rgba(242,228,207,.84); align-self: end; }
.gallery { display: grid; gap: 36px; }
.gallery h2 { max-width: 1040px; }
.gallery img { height: clamp(270px,42vw,520px); box-shadow: var(--shadow); }
.reviews { display: grid; grid-template-columns: .82fr 1fr; gap: clamp(30px,6vw,86px); background: var(--cream); }
.quotes { display: grid; gap: 14px; }
.quotes blockquote { margin: 0; padding: 26px; border-left: 5px solid var(--amber); background: rgba(255,255,255,.48); font-size: 20px; font-weight: 800; line-height: 1.4; }
.visit { display: grid; grid-template-columns: minmax(300px,.95fr) minmax(320px,.65fr); gap: clamp(24px,5vw,72px); align-items: stretch; }
.visit-img { min-height: 700px; box-shadow: var(--shadow); }
.visit-card { align-self: center; padding: clamp(30px,5vw,54px); color: var(--cream); background: var(--black); }
.visit-card h2 { font-size: clamp(36px,4.8vw,64px); overflow-wrap: anywhere; }
.info { display: grid; gap: 14px; margin: 30px 0; }
.info p { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-bottom: 14px; margin: 0; border-bottom: 1px solid var(--line); }
.info span,.hours span { color: rgba(242,228,207,.58); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.info a,.info strong { overflow-wrap: anywhere; font-weight: 900; }
.hours { padding: 22px; background: rgba(242,228,207,.08); }
.hours h3 { color: var(--amber); margin-top: 0; }
.hours p { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px clamp(18px,5vw,72px); color: var(--cream); background: var(--black); font-size: 12px; font-weight: 900; text-transform: uppercase; }
@media (max-width: 940px) {
  .header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .hero { min-height: 850px; }
  .hero-copy { padding-bottom: 180px; }
  .stats { grid-template-columns: 1fr; }
  .stats div { display: flex; justify-content: space-between; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--line); }
  .story,.card-grid,.dog,.reviews,.visit { grid-template-columns: 1fr; }
  .visit-img { min-height: 470px; }
}
@media (max-width: 540px) {
  .header { padding: 14px; gap: 12px; }
  .brand { font-size: 21px; }
  .lang button { width: 34px; height: 32px; }
  h1 { font-size: 55px; }
  h2 { font-size: 38px; }
  .hero,.story,.cards,.dog,.gallery,.reviews,.visit { padding-left: 16px; padding-right: 16px; }
  .stats { left: 16px; right: 16px; }
  .actions .btn { width: 100%; }
  .info p { grid-template-columns: 1fr; gap: 4px; }
  .footer { flex-direction: column; padding-left: 16px; padding-right: 16px; }
}