@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/montserrat-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/montserrat-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat Fallback";src:local(Arial);size-adjust:113%;ascent-override:85%;descent-override:22%;line-gap-override:0%}

.icon{width:1em;height:1em;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}.logo .icon{fill:currentColor;stroke:none}.star-row .icon{fill:currentColor;stroke:none}


:root{--bg:#f8f8f8;--ink:#010101;--accent:#b72926;--font-display:Montserrat,"Montserrat Fallback",Arial,sans-serif;--font-body:Montserrat,"Montserrat Fallback",Arial,sans-serif;--font-serif:Montserrat,"Montserrat Fallback",Arial,sans-serif;--ease-out:cubic-bezier(.16,1,.3,1);--header-h:76px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:0;background:none;font:inherit}
.container{width:min(1240px,94%);margin:0 auto}
#header{position:fixed;inset:0 0 auto;z-index:1250}
#header nav{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(16px,4vw,40px)}
.logo{font-family:var(--font-display);font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:900;color:#f8f8f8;display:flex;align-items:center;gap:10px}
.logo .fire-icon{color:var(--accent);font-size:1.1em}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,32px);margin-left:auto}
.nav-links a{font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:rgba(248, 248, 248,.7)}
.nav-links .cta-pill{background:var(--accent);color:#f8f8f8;padding:8px 20px;border-radius:2px}
.menu-toggle{display:none}
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#010101}
.hero-slideshow,.hero-slide,.hero-overlay{position:absolute;inset:0}
.hero-slide{background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease,transform 8s linear;transform:scale(1.03)}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-overlay{z-index:1;background:linear-gradient(160deg,rgba(1, 1, 1,.72),rgba(1, 1, 1,.45) 50%,rgba(1, 1, 1,.82))}
.hero-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,100px);max-width:760px}
.hero-eyebrow{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:#f8f8f8;margin-bottom:20px}
.hero h1{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.02em;color:#f8f8f8;margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:clamp(.9rem,1.8vw,1.05rem);color:#f8f8f8;max-width:480px;margin-bottom:40px;line-height:1.8}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{background:var(--accent);color:#f8f8f8;padding:16px 36px;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;border-radius:2px}
.btn-secondary{background:transparent;color:#f8f8f8;padding:16px 36px;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;border:1px solid rgba(248, 248, 248,.35);border-radius:2px}
.hero-dots{position:absolute;bottom:32px;left:clamp(20px,6vw,100px);z-index:8;display:flex;gap:8px}
.hero-dot{width:10px;height:10px;padding:0;border-radius:50%;background:rgba(247,241,232,.35);border:2px solid rgba(247,241,232,.7)}
.hero-dot.active{width:28px;border-radius:999px;background:var(--accent);border-color:var(--accent)}
@media(max-width:960px){.nav-links{display:none}.menu-toggle{display:flex;flex-direction:column;gap:5px;width:28px}.menu-toggle span{display:block;height:1.5px;background:var(--bg)}}
@media(max-width:720px){.container{width:calc(100% - 28px)}#header nav{width:calc(100% - 28px);margin:auto;padding:0}.hero{min-height:540px}.hero-content{text-align:center;align-items:center;padding-inline:0}.hero-sub{margin-inline:auto}.hero-buttons{display:grid;grid-template-columns:1fr;width:min(100%,360px)}.hero-buttons a{width:100%}.hero-dots{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:max-content}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide{transition:none;transform:none}}


/* Requested brand palette + compact, image-led hero (desktop, tablet and mobile). */
:root {
  --bg: #f8f8f8;
  --ink: #010101;
  --accent: #b72926;
  --bg-page: var(--bg);
  --bg-surface: var(--bg);
  --bg-raised: var(--bg);
  --bg-elevated: var(--bg);
  --text-primary: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 64%, var(--bg));
  --text-faint: color-mix(in srgb, var(--ink) 48%, var(--bg));
  --border: color-mix(in srgb, var(--ink) 16%, transparent);
  --border-med: color-mix(in srgb, var(--ink) 28%, transparent);
  --header-bg: var(--bg);
  --mobile-nav-bg: var(--bg);
  --ember: var(--accent);
  --ember-lt: var(--accent);
  --ember-dk: var(--ink);
  --cream: var(--bg);
  --white: var(--bg);
  --coal: var(--ink);
  --ash: var(--bg);
  --smoke: var(--ink);
  --bark: var(--ink);
  --tan: var(--accent);
  color-scheme: light;
}

:focus-visible { outline-color: var(--accent) !important; }
::selection { background: var(--accent); color: var(--bg); }

/* Match the reference's clean light navigation above a shorter photo carousel. */
#header {
  background: var(--bg) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
#header.scrolled {
  background: color-mix(in srgb, var(--bg) 98%, transparent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent) !important;
}
#header nav { height: var(--header-h) !important; }
.logo, .nav-links a { color: var(--ink) !important; }
.nav-links .cta-pill { background: var(--accent) !important; color: var(--bg) !important; }

.hero {
  margin-top: var(--header-h) !important;
  height: clamp(420px, 58svh, 660px) !important;
  min-height: 420px !important;
  max-height: none !important;
  background: var(--ink) !important;
  isolation: isolate;
}
.hero-slideshow, .hero-slide { position: absolute; inset: 0; }
.hero-slide { background-color: var(--ink) !important; background-position: center 54%; }
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.hero-overlay {
  background: linear-gradient(90deg,
    rgba(1, 1, 1, .78) 0%,
    rgba(1, 1, 1, .62) 34%,
    rgba(1, 1, 1, .28) 70%,
    rgba(1, 1, 1, .12) 100%) !important;
}
.hero::after {
  height: 24% !important;
  background: linear-gradient(to top, rgba(1, 1, 1, .22), transparent) !important;
}
.hero-content {
  width: min(1240px, 94%) !important;
  max-width: 1240px !important;
  height: 100% !important;
  margin-inline: auto !important;
  padding: clamp(28px, 4.5vw, 58px) 0 clamp(56px, 6vh, 76px) !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0;
}
.hero-eyebrow {
  width: auto !important;
  display: inline-flex !important;
  padding: 0 0 0 11px !important;
  margin: 0 0 14px !important;
  border-left: 3px solid var(--accent);
  color: var(--bg) !important;
  font-size: clamp(.62rem, .8vw, .76rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .16em !important;
  opacity: 1 !important;
  animation: none !important;
  text-shadow: 0 2px 12px rgba(1, 1, 1, .45) !important;
}
.hero h1 {
  max-width: 720px !important;
  margin: 0 0 14px !important;
  color: var(--bg) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem) !important;
  font-weight: 900 !important;
  line-height: .99 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
  opacity: 1 !important;
  animation: none !important;
  text-shadow: 0 2px 4px rgba(1, 1, 1, .5), 0 8px 26px rgba(1, 1, 1, .3) !important;
}
.hero h1 em {
  color: var(--bg) !important;
  font-style: normal !important;
  text-shadow: 0 2px 4px rgba(1, 1, 1, .45) !important;
}
.hero-sub {
  max-width: 480px !important;
  margin: 0 0 24px !important;
  color: var(--bg) !important;
  font-size: clamp(.83rem, 1.15vw, .98rem) !important;
  line-height: 1.55 !important;
  opacity: .94 !important;
  animation: none !important;
  text-shadow: 0 1px 8px rgba(1, 1, 1, .6) !important;
}
.hero-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  opacity: 1 !important;
  animation: none !important;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 138px;
  min-height: 44px !important;
  padding: 11px 19px !important;
  border-radius: 3px !important;
  font-size: .73rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
  text-decoration: none;
}
.hero-buttons .btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: 0 6px 18px rgba(1, 1, 1, .18) !important;
}
.hero-buttons .btn-primary:hover { background: var(--ink) !important; border-color: var(--ink) !important; }
.hero-buttons .btn-secondary {
  background: rgba(248, 248, 248, .96) !important;
  border: 1px solid var(--bg) !important;
  color: var(--ink) !important;
}
.hero-buttons .btn-secondary:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
.hero-dots {
  left: max(3vw, 20px) !important;
  right: auto !important;
  bottom: 15px !important;
  transform: none !important;
  justify-content: flex-start !important;
  animation: none !important;
  opacity: 1 !important;
}
.hero-dots .hero-dot::before { border-color: rgba(248, 248, 248, .8) !important; }
.hero-dots .hero-dot.active::before { background: var(--accent) !important; border-color: var(--accent) !important; }

/* Keep inherited legacy selectors in the new neutral/red palette. */
.form-group select option:checked { background-color: var(--accent) !important; color: var(--bg) !important; }
.newsletter-card .section-label, .newsletter-points li::before { color: var(--accent) !important; }
.about-text h2 em, .about-text .eyebrow, .section-label, .title-divider { color: var(--accent); }

@media (max-width: 960px) {
  .hero { height: clamp(420px, 58svh, 610px) !important; min-height: 420px !important; }
  .hero-content { width: calc(100% - 48px) !important; }
  .hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem) !important; max-width: 14ch !important; }
  .hero-sub { max-width: 430px !important; }
}
@media (max-width: 720px) {
  .hero { height: clamp(430px, 58svh, 590px) !important; min-height: 430px !important; }
  .hero-content {
    width: calc(100% - 36px) !important;
    padding: 32px 0 58px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
  }
  .hero-eyebrow { margin-inline: 0 !important; font-size: .62rem !important; letter-spacing: .12em !important; }
  .hero h1 { max-width: 12ch !important; font-size: clamp(2rem, 8.2vw, 3.05rem) !important; line-height: 1 !important; margin-bottom: 12px !important; }
  .hero-sub { max-width: 330px !important; margin: 0 0 20px !important; font-size: .85rem !important; line-height: 1.5 !important; }
  .hero-buttons { width: min(100%, 280px) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .hero-buttons .btn-primary, .hero-buttons .btn-secondary { width: 100% !important; min-height: 43px !important; }
  .hero-dots { left: 18px !important; bottom: 10px !important; transform: none !important; }
}
@media (max-width: 380px) {
  .hero { height: clamp(410px, 58svh, 480px) !important; min-height: 410px !important; }
  .hero-content { width: calc(100% - 30px) !important; padding-bottom: 52px !important; }
  .hero h1 { font-size: clamp(1.8rem, 8.5vw, 2.25rem) !important; }
  .hero-sub { font-size: .8rem !important; }
  .hero-buttons { max-width: 250px !important; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .hero { height: min(74svh, 520px) !important; min-height: 360px !important; }
  .hero-content { padding-top: 26px !important; padding-bottom: 54px !important; }
  .hero h1 { font-size: clamp(1.8rem, 5vw, 3rem) !important; }
  .hero-sub { margin-bottom: 14px !important; }
}


/* Site-wide type system: Montserrat is the sole typeface, matching the hero headline. */
:root { --font-body: Montserrat, "Montserrat Fallback", Arial, sans-serif; --font-display: var(--font-body); --font-serif: var(--font-body); }
html, body, body *, body *::before, body *::after { font-family: var(--font-body) !important; }

/* Filled inline icon system: consistent solid silhouettes, scalable sizing, and color inheritance. */
.icon { width: 1.12em !important; height: 1.12em !important; display: inline-block; flex: 0 0 auto; vertical-align: -0.16em; fill: none !important; stroke: currentColor !important; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.logo .icon, .fire-icon { fill: none !important; stroke: currentColor !important; }
.star-row .icon { fill: currentColor !important; stroke: currentColor !important; stroke-width: 1.5; }
.menu-toggle > .menu-toggle-icon { width: 22px !important; height: 22px !important; }
.menu-toggle.active > .menu-toggle-icon { color: var(--accent) !important; }
.back-to-top > .icon, .chat-close > .icon { width: 1.15em !important; height: 1.15em !important; vertical-align: middle; }

.newsletter-points li::before{content:""!important;display:inline-block;width:1em;height:1em;margin:0 10px 0 0;vertical-align:-.14em;flex:0 0 auto;background-color:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center/contain no-repeat}

/* Final refinement pass: shared brand mark, calmer headings, map outline and left-aligned newsletter. */
.chat-header .fire-icon { color: var(--accent) !important; }
.about-text .eyebrow {
  display: block !important;
  width: fit-content;
  margin-bottom: 14px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.about-text .eyebrow::before { content: none !important; display: none !important; }
.section-title h2, .about-text h2, .newsletter-card h2 { font-weight: 650 !important; }
.back-to-top > .icon { stroke-width: 3 !important; }
.map-wrap {
  border-color: #010101 !important;
  outline: 2px solid #010101 !important;
  outline-offset: 2px;
}
.newsletter { text-align: left !important; }
.newsletter-card { text-align: left !important; align-items: start !important; }
.newsletter-copy { width: 100%; min-width: 0; text-align: left !important; }
.newsletter-copy .section-label,
.newsletter-copy h2,
.newsletter-copy p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
.newsletter-copy .section-label { display: block !important; width: fit-content; }
.newsletter-copy h2 { margin-top: 0 !important; }
.newsletter-copy p { max-width: 52ch; }
.newsletter-points {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100%;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.newsletter-points li { list-style: none !important; text-align: left !important; }
.newsletter-form {
  justify-self: start !important;
  align-self: start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.newsletter-note, .newsletter-status { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Tablet: place the signup bar below the copy and align it to the same left edge. */
@media (max-width: 1024px) {
  .newsletter-card { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .newsletter-copy { text-align: left !important; }
  .newsletter-form {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 18px 0 0 !important;
  }
  .newsletter-input-wrap { width: 100%; }
}

/* Phone: keep the stacked controls full-width without centering the copy or signup bar. */
@media (max-width: 720px) {
  .newsletter-card { text-align: left !important; }
  .newsletter-form { width: 100% !important; max-width: none !important; margin: 18px 0 0 !important; }
  .newsletter-input-wrap { width: 100% !important; }
}

/* Smokehouse contrast + alignment refinement: left-aligned feature content and readable accent badges on dark sections. */
.features-grid,
.feature-card {
  text-align: left !important;
}

.feature-card .feature-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 20px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: #f8f8f8 !important;
  color: #b72926 !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  box-shadow: 0 8px 20px rgba(1, 1, 1, .16) !important;
}

.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon {
  background: #f8f8f8 !important;
  color: #b72926 !important;
  transform: translateY(-2px);
}

.feature-card .feature-icon .icon {
  color: #b72926 !important;
  stroke: currentColor !important;
}

.features .section-title .section-label,
.drinks-section .section-title .section-label,
.newsletter-card .newsletter-copy .section-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100%;
  padding: .46rem .76rem !important;
  margin: 0 0 14px !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  border-radius: 9px !important;
  background: #f8f8f8 !important;
  color: #b72926 !important;
  box-shadow: 0 5px 16px rgba(1, 1, 1, .14) !important;
  letter-spacing: .14em !important;
  line-height: 1.35 !important;
}

/* Keep newsletter benefits left-aligned with a high-contrast check inside each white rounded tile. */
.newsletter-points li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}

.newsletter-points li::before {
  content: "" !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  border-radius: 7px !important;
  background: #f8f8f8 !important;
  -webkit-mask: none !important;
  mask: none !important;
  vertical-align: middle !important;
}

.newsletter-points li::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  transform: translateY(-50%) !important;
  background: #b72926 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  pointer-events: none !important;
}

/* Center the footer column groups, while keeping each heading/link list left-aligned. */
footer .footer-col {
  width: fit-content !important;
  max-width: 100%;
  justify-self: center !important;
  text-align: left !important;
}

footer .footer-col h4,
footer .footer-col a,
footer .footer-col p {
  text-align: left !important;
}

footer .footer-col a {
  width: fit-content;
  max-width: 100%;
}

footer .footer-col p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The footer flame uses the same red mark on a light rounded tile for contrast. */
footer .footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

footer .footer-logo .fire-icon {
  box-sizing: content-box !important;
  width: 20px !important;
  height: 20px !important;
  padding: 8px !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  border-radius: 10px !important;
  background: #f8f8f8 !important;
  color: #b72926 !important;
  stroke: currentColor !important;
  box-shadow: 0 6px 18px rgba(1, 1, 1, .16) !important;
}

@media (max-width: 720px) {
  footer .footer-col:not(:last-of-type) {
    width: fit-content !important;
    justify-self: center !important;
    text-align: left !important;
  }

  footer .footer-col:last-of-type {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
    max-width: 100%;
    justify-self: center !important;
    text-align: left !important;
  }

  footer .footer-col:last-of-type p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Newsletter balance pass: the desktop form gets a deliberate panel rather than floating in open space. */
.newsletter-card {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
  align-items: stretch !important;
  gap: clamp(28px, 4vw, 64px) !important;
  min-height: 360px !important;
}
.newsletter-copy {
  align-self: center !important;
  max-width: 42rem !important;
}
.newsletter-copy h2 {
  max-width: 12ch;
  text-wrap: balance;
}
.newsletter-form {
  align-self: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(20px, 2.6vw, 30px) !important;
  border: 1px solid rgba(248, 248, 248, .16) !important;
  border-radius: 16px !important;
  background: #0c0c0c !important;
  box-sizing: border-box !important;
}
.newsletter-input-wrap { width: 100% !important; box-sizing: border-box !important; }
.newsletter-note, .newsletter-status { max-width: 50ch; }

/* Tablet: keep the input row below the copy, left-aligned and as wide as the content column. */
@media (min-width: 721px) and (max-width: 1024px) {
  .newsletter { padding-block: clamp(42px, 5.5vw, 68px) !important; }
  .newsletter-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 0 !important;
    padding: clamp(24px, 4vw, 36px) !important;
    align-items: start !important;
  }
  .newsletter-copy { max-width: none !important; }
  .newsletter-copy h2 { max-width: 14ch; }
  .newsletter-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .newsletter-input-wrap { width: 100% !important; flex-direction: row !important; }
  .newsletter-form button { width: auto !important; flex: 0 0 auto !important; }
}

/* Phone: preserve the established compact, stacked layout. */
@media (max-width: 720px) {
  .newsletter-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 0 !important;
  }
  .newsletter-copy { max-width: none !important; }
  .newsletter-copy h2 { max-width: 12ch; }
  .newsletter-form {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .newsletter-input-wrap { width: 100% !important; flex-direction: column !important; }
  .newsletter-form button { width: 100% !important; }
}

/* Typography refinement: use regular/medium weights for legibility while keeping hierarchy. */
html body * { font-weight: 400 !important; }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-weight: 600 !important; }
html body strong, html body b { font-weight: 500 !important; }
html body .logo { font-weight: 600 !important; }
html body .section-label,
html body .eyebrow,
html body .hero-eyebrow,
html body .about-text .eyebrow,
html body .newsletter-card .section-label { font-weight: 500 !important; }
html body .hero h1 { font-weight: 600 !important; }
html body .section-title h2,
html body .about-text h2,
html body .newsletter-card h2 { font-weight: 550 !important; }
html body .nav-links a,
html body .mobile-nav a,
html body .nav-links .cta-pill,
html body .btn-primary,
html body .btn-secondary,
html body .submit-btn,
html body .newsletter-form button,
html body .order-btn,
html body .hero-buttons .btn-primary,
html body .hero-buttons .btn-secondary,
html body .mobile-nav .mobile-cta { font-weight: 500 !important; }
html body .stat-number,
html body .price,
html body .reviewer-name,
html body .footer-col h3,
html body .footer-col h4,
html body .feature-card h3,
html body .menu-item h3,
html body .menu-item h4,
html body .contact-info-item h4 { font-weight: 550 !important; }
html body .demo-toast { font-weight: 500 !important; }

/* Tablet newsletter: compress vertical spacing and place its three benefits in a tidy row. */
@media (min-width: 721px) and (max-width: 1024px) {
  .newsletter { padding-block: clamp(28px, 3.4vw, 38px) !important; }
  .newsletter-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: clamp(22px, 3vw, 30px) !important;
    align-items: start !important;
  }
  .newsletter-copy { max-width: none !important; }
  .newsletter-copy h2 {
    max-width: 18ch !important;
    margin-bottom: 6px !important;
    font-size: clamp(1.8rem, 3.2vw, 2.25rem) !important;
    line-height: 1.08 !important;
  }
  .newsletter-copy p {
    max-width: 66ch !important;
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
  }
  .newsletter-points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  .newsletter-points li {
    min-width: 0 !important;
    align-items: flex-start !important;
    line-height: 1.4 !important;
    gap: 8px !important;
  }
  .newsletter-points li::before { margin-top: 1px !important; }
  .newsletter-points li::after { top: 12px !important; transform: translateY(-50%) !important; }
  .newsletter-form {
    width: 100% !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .newsletter-input-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 6px !important;
  }
  .newsletter-form input { min-height: 44px !important; }
  .newsletter-form button { width: auto !important; min-height: 44px !important; flex: 0 0 auto !important; }
  .newsletter-note, .newsletter-status { margin-top: 8px !important; line-height: 1.45 !important; }
}

/* Tablet footer: brand gets a calm full-width introduction, then three balanced columns. */
@media (min-width: 721px) and (max-width: 1024px) {
  footer { padding-top: 42px !important; }
  footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(16px, 2.8vw, 26px) !important;
    row-gap: 26px !important;
    margin-bottom: 30px !important;
  }
  footer .footer-brand {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 0 24px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 12%, transparent) !important;
    text-align: center !important;
  }
  footer .footer-brand p {
    width: min(100%, 440px) !important;
    margin: 12px auto 18px !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }
  footer .footer-brand .social-row { justify-content: center !important; }
  footer .footer-col {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: center !important;
    text-align: left !important;
  }
  footer .footer-col h3,
  footer .footer-col h4 { margin-bottom: 12px !important; letter-spacing: .13em !important; }
  footer .footer-col a,
  footer .footer-col p { line-height: 1.6 !important; overflow-wrap: anywhere; }
  footer .footer-bottom { padding: 16px 0 !important; }
  footer .footer-bottom p { max-width: 100% !important; line-height: 1.7 !important; }
}

/* Phone footer: compact paired link groups and a full-width, consistently left-aligned contact block. */
@media (max-width: 720px) {
  footer { padding-top: 36px !important; }
  footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(16px, 5vw, 24px) !important;
    row-gap: 24px !important;
    margin-bottom: 28px !important;
  }
  footer .footer-brand {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 0 22px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 12%, transparent) !important;
    text-align: center !important;
  }
  footer .footer-brand p {
    width: min(100%, 320px) !important;
    margin: 12px auto 16px !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }
  footer .footer-brand .social-row { justify-content: center !important; }
  footer .footer-col:not(:last-of-type) {
    grid-column: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    justify-self: center !important;
    text-align: left !important;
  }
  footer .footer-col:last-of-type {
    grid-column: 1 / -1 !important;
    width: min(100%, 320px) !important;
    max-width: 100% !important;
    justify-self: center !important;
    padding-top: 18px !important;
    border-top: 1px solid color-mix(in srgb, var(--bg) 12%, transparent) !important;
    text-align: left !important;
  }
  footer .footer-col h3,
  footer .footer-col h4 { margin-bottom: 10px !important; letter-spacing: .12em !important; }
  footer .footer-col a,
  footer .footer-col p { line-height: 1.6 !important; overflow-wrap: anywhere; }
  footer .footer-col p { margin-left: 0 !important; margin-right: 0 !important; }
  footer .footer-bottom { padding: 14px 0 18px !important; }
  footer .footer-bottom p { max-width: 100% !important; line-height: 1.7 !important; }
}

/* Final interaction and contrast refinements */
html body svg.icon.solid-icon {
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}
html body .star-row svg.icon.solid-icon { fill: var(--accent) !important; }
html body .feature-icon svg.icon.solid-icon { color: #b72926 !important; }
html body .c-icon svg.icon.solid-icon,
html body .l-icon svg.icon.solid-icon { color: #b72926 !important; }
html body .logo svg.solid-icon,
html body .footer-logo svg.solid-icon,
html body .chat-header svg.solid-icon { color: #b72926 !important; }
html body .back-to-top svg.solid-icon,
html body .live-chat-btn svg.solid-icon,
html body .chat-send svg.solid-icon,
html body .chat-close svg.solid-icon { color: #f8f8f8 !important; }

/* Form labels match the weight of Call Us, Email Us, and Business Hours. */
html body .form-group label { font-weight: 600 !important; }

/* The desktop and tablet contact intro is intentionally two lines. */
.contact-intro-desktop { display: inline !important; }
.contact-intro-mobile { display: none !important; }
.contact-intro-break { display: block !important; }

/* Footer labels and contents must remain legible against the black footer. */
html body footer .footer-col h3,
html body footer .footer-col h4 { color: #f8f8f8 !important; opacity: 1 !important; }
html body footer .footer-col a,
html body footer .footer-col p,
html body footer .footer-col p a { color: #f8f8f8 !important; opacity: .78 !important; }
html body footer .footer-col a:hover { color: #b72926 !important; opacity: 1 !important; }

@media (max-width: 720px) {
  .contact-intro-desktop { display: none !important; }
  .contact-intro-mobile { display: inline !important; }
  .contact .contact-info-items {
    width: 100% !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    align-items: center !important;
  }
  .contact .contact-info-item {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .contact .contact-info-item > div:last-child {
    width: min(100%, 280px) !important;
    margin-inline: auto !important;
  }
  .contact .contact-info-item h3,
  .contact .contact-info-item h4 {
    width: 100% !important;
    text-align: center !important;
  }
  .contact .contact-info-item p {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  /* Keep the footer grid untouched; only center the three contact detail lines. */
  footer .footer-col:last-of-type p,
  footer .footer-col:last-of-type p a { text-align: center !important; }
}

/* Latest responsive polish: tablet testimonials, unified contact/location cards, and compact newsletter heading. */
html body .contact .c-icon,
html body .location .l-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  border: 1px solid rgba(1, 1, 1, .14) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #b72926 !important;
  box-shadow: 0 5px 14px rgba(1, 1, 1, .08) !important;
}
html body .contact .c-icon svg,
html body .location .l-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #b72926 !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Tablet testimonials: two roomy columns and reviewer metadata that stays together. */
@media (min-width: 769px) and (max-width: 1024px) {
  html body .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
  }
  html body .review-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: clamp(22px, 3vw, 30px) !important;
  }
  html body .review-text {
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }
  html body .reviewer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin-top: auto !important;
  }
  html body .reviewer > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .reviewer-name {
    display: block !important;
    font-size: clamp(.82rem, 1.15vw, .94rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  html body .reviewer-role {
    display: block !important;
    margin-top: 4px !important;
    font-size: clamp(.61rem, .82vw, .69rem) !important;
    line-height: 1.45 !important;
    letter-spacing: .075em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Phone contact and location rows share the same icon, heading, and copy alignment. */
@media (max-width: 720px) {
  html body .contact .contact-info-items,
  html body .location .location-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    gap: 24px !important;
  }
  html body .contact .contact-info-item,
  html body .location .location-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 14px !important;
    text-align: left !important;
  }
  html body .contact .contact-info-item > div:last-child,
  html body .location .location-item > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
  html body .contact .contact-info-item h3,
  html body .contact .contact-info-item h4,
  html body .location .location-item h3,
  html body .location .location-item h4 {
    width: 100% !important;
    margin: 0 0 6px !important;
    text-align: left !important;
  }
  html body .contact .contact-info-item p,
  html body .location .location-item p {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.7 !important;
    overflow-wrap: anywhere !important;
  }
}

/* On tablet and phone, keep the full newsletter headline on one line and center its eyebrow badge. */
@media (max-width: 1024px) {
  html body .newsletter-copy .section-label {
    display: table !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body .newsletter-copy h2 {
    max-width: none !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    font-size: clamp(1.05rem, 4.5vw, 1.55rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -.04em !important;
  }
  html body .newsletter-copy h2 br {
    display: none !important;
  }
}
/* Final content rail and mobile Contact Info heading alignment. */
:root{--site-content-max:1180px;--site-content-gutter:40px}main>section:not(.hero)>.container,footer>.container{width:min(var(--site-content-max),calc(100% - var(--site-content-gutter)))!important;max-width:var(--site-content-max)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}@media(max-width:720px){:root{--site-content-gutter:28px}html body footer .footer-col:last-of-type h3,html body footer .footer-col:last-of-type h4{width:100%!important;text-align:center!important}}@media(max-width:360px){:root{--site-content-gutter:22px}}@media(max-width:340px){:root{--site-content-gutter:24px}}

/* Newsletter-edge alignment correction:
   The newsletter card sits inside a section with a 20px outer margin plus
   the normal container gutter. Match that final visible card edge for every
   other section and the footer, rather than reusing only the inner gutter. */
main > section:not(.hero):not(.features):not(.menu-section):not(.drinks-section):not(.newsletter) > .container,
footer > .container {
  width: min(var(--site-content-max), calc(100% - var(--site-content-gutter) - 40px)) !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* These sections already carry the same 20px outer margin as the newsletter,
   so their inner container uses the newsletter's existing gutter unchanged. */
main > section.features > .container,
main > section.menu-section > .container,
main > section.drinks-section > .container,
main > section.newsletter > .container {
  width: min(var(--site-content-max), calc(100% - var(--site-content-gutter))) !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* In landscape, the newsletter outer margin is 14px rather than 20px.
   Compensate for that six-pixel change so every visible container edge still
   lands on the exact same rail. */
@media (max-width: 960px) and (orientation: landscape) {
  main > section:not(.hero):not(.features):not(.menu-section):not(.drinks-section):not(.newsletter) > .container,
  footer > .container {
    width: min(var(--site-content-max), calc(100% - var(--site-content-gutter) - 28px)) !important;
  }

  main > section.features > .container,
  main > section.menu-section > .container,
  main > section.drinks-section > .container {
    width: min(var(--site-content-max), calc(100% - var(--site-content-gutter) + 12px)) !important;
  }
}


/* Finishing touches: neutral map rendering, tighter section rhythm, and a clean newsletter surround. */
html body .map-wrap iframe {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Keep horizontal section rails intact while closing the oversized vertical gaps. */
html body main > section:not(.hero) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(44px, 5.3vw, 72px) !important;
  padding-bottom: clamp(44px, 5.3vw, 72px) !important;
}

/* The newsletter's black card is the only distinct surface in this section. */
html body main > section.newsletter {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 721px) and (max-width: 1024px) {
  html body main > section:not(.hero) {
    padding-top: clamp(38px, 4.8vw, 56px) !important;
    padding-bottom: clamp(38px, 4.8vw, 56px) !important;
  }
}

@media (max-width: 720px) {
  html body main > section:not(.hero) {
    padding-top: clamp(34px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 8vw, 48px) !important;
  }

  html body footer .footer-col:last-of-type p:last-child {
    width: 100% !important;
    text-align: center !important;
  }

  html body footer .footer-col:last-of-type p:last-child a {
    display: inline-block !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
}

/* Heritage watermark: anchor it to the two-paragraph story so it stays at the left-middle between them at every breakpoint. */
.about::before { content: none !important; display: none !important; }
.about-story { position: relative !important; display: flow-root; isolation: isolate; }
.about-story::before {
  content: "BBQ";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: clamp(-54px, -3.6vw, -24px);
  transform: translateY(-50%);
  font-family: var(--font-display) !important;
  font-size: clamp(112px, 14vw, 190px);
  font-weight: 900 !important;
  line-height: .82;
  letter-spacing: -.08em;
  white-space: nowrap;
  color: var(--accent) !important;
  opacity: .085;
  pointer-events: none;
  user-select: none;
}
.about-story > p { position: relative; z-index: 1; }
.about-story > p:last-child { margin-bottom: 0 !important; }
@media (min-width: 721px) and (max-width: 1024px) {
  .about-story::before { left: -34px; font-size: clamp(116px, 15vw, 154px); opacity: .08; }
}
@media (max-width: 720px) {
  .about-story::before { left: -22px; font-size: clamp(96px, 25vw, 132px); opacity: .075; }
}

/* Brand mark asset: use the supplied transparent Smokehouse flame in navigation and footer. */
html body a.logo .brand-mark {
  display: inline-block !important;
  width: 16px !important;
  height: 23px !important;
  flex: 0 0 16px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}
html body footer a.footer-logo .brand-mark {
  display: inline-block !important;
  box-sizing: content-box !important;
  width: 20px !important;
  height: 28px !important;
  flex: 0 0 20px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  border-radius: 10px !important;
  background: #f8f8f8 !important;
  box-shadow: 0 6px 18px rgba(1, 1, 1, .16) !important;
}

/* Portrait phones: center the footer navigation groups for a more balanced, deliberate layout.
   Landscape remains left-aligned, as there is enough horizontal space for scan-friendly lists. */
@media (max-width: 720px) and (orientation: portrait) {
  html body footer .footer-col:not(:last-of-type) {
    width: 100% !important;
    justify-self: stretch !important;
    text-align: center !important;
  }
  html body footer .footer-col:not(:last-of-type) h3,
  html body footer .footer-col:not(:last-of-type) h4,
  html body footer .footer-col:not(:last-of-type) a {
    width: 100% !important;
    text-align: center !important;
  }
  html body footer .footer-col:not(:last-of-type) a {
    display: block !important;
    margin-inline: auto !important;
  }
  html body footer .footer-col:last-of-type {
    width: min(100%, 320px) !important;
    justify-self: center !important;
    text-align: center !important;
  }
  html body footer .footer-col:last-of-type h3,
  html body footer .footer-col:last-of-type h4,
  html body footer .footer-col:last-of-type p,
  html body footer .footer-col:last-of-type p a {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Final refinements: mobile hero headline, brand-mark reuse, and chat input alignment. */
.hero-mobile-break { display: none !important; }

/* Use the exact Smokehouse flame asset in the feature and support UI. */
.feature-card .feature-icon .feature-brand-mark {
  display: block !important;
  width: 24px !important;
  height: 30px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.chat-header h3 { display: flex !important; align-items: center !important; gap: 8px !important; }
.chat-header .chat-header-brand-mark {
  display: inline-block !important;
  width: 14px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.live-chat-btn .chat-brand-mark {
  display: block !important;
  width: 22px !important;
  height: 30px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep keyboard focus visible inside the input, not between input and send button. */
.chat-input-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 0 0 8px 8px !important;
}
.chat-input-row .chat-input {
  min-width: 0 !important;
  width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline-offset: -3px !important;
}
.chat-input-row .chat-input:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}
.chat-input-row:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
.chat-input-row .chat-send {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  border-radius: 0 !important;
  margin: 0 !important;
  outline-offset: -3px !important;
}

@media (max-width: 720px) {
  .hero-content { text-align: left !important; align-items: flex-start !important; }
  .hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1.7rem, 7.6vw, 2.35rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
@media (max-width: 480px) { .hero-mobile-break { display: block !important; } }
@media (max-width: 360px) {
  .hero h1 { font-size: clamp(1.55rem, 7.5vw, 1.85rem) !important; }
}

/* Mobile layout fix: let single-column grid tracks shrink so content never overflows the viewport. */
@media (max-width: 768px) {
  .about-grid, .contact-grid, .location-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .about-grid > *, .contact-grid > *, .location-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .about-text, .about-story, .stats-row, .about-image-wrap { min-width: 0; max-width: 100%; }
  .about-text p, .about-text h2 { overflow-wrap: break-word; }
  .about-image-wrap img { display: block; width: 100%; max-width: 100%; height: auto; }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .stat-label { overflow-wrap: break-word; letter-spacing: .08em !important; }
}

/* Grid items must be allowed to shrink below their content size at every width. */
.about-grid > *, .contact-grid > *, .location-grid > * { min-width: 0; }
.about-image-wrap img { max-width: 100%; }

/* Newsletter check tiles: exactly the same solid color as the "Stay Connected" badge (no list-level fade). */
.newsletter-card .newsletter-points { opacity: 1 !important; color: rgba(248, 248, 248, .8) !important; }
.newsletter-card .newsletter-points li::before {
  background: #f8f8f8 !important;
  border: 1px solid rgba(1, 1, 1, .08) !important;
  box-shadow: 0 5px 16px rgba(1, 1, 1, .14) !important;
}

/* Floating buttons are pinned to the bottom of the screen. They never dock above the footer,
   even if an older cached script still sets --utility-bottom. */
html body .back-to-top,
html body .live-chat-btn { bottom: 24px !important; }
html body .chat-modal { bottom: 84px !important; }