/* Shared typography and legibility system across every page. */
:root {
  --sans: 'Inter', Arial, sans-serif;
  --serif: 'Outfit', Arial, sans-serif;
  --text-caption: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-card: 1.75rem;
  --text-section: clamp(2.25rem, 3.6vw, 3.25rem);
  --text-display: clamp(2.5rem, 4.4vw, 4rem);
  --muted: #5c5952;
  --action: #8a5d2b;
  --action-hover: #704a21;
  --label-color: #805a2c;
  --gold: #a27439;
}
html { font-size: 100%; }
body { font: 400 var(--text-body)/1.7 var(--sans); }
button, input, select, textarea { font-family: var(--sans); }
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; }
h2, .section-heading h2, .contact-intro h2, .bartender-banner h2,
.bartender-grid h2, .results-grid h2, .process-section h2, .faq-section h2 {
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.hero h1, .inner-hero h1, .page-intro h1 {
  font: 500 var(--text-display)/1.15 var(--serif);
  letter-spacing: -.04em;
  overflow-wrap: normal;
}
.hero h1 { font-weight: 600; }
.service-card h3, .case-caption h3, .portfolio-grid .case-caption h3,
.detail-block h3, .process-section h3 {
  font: 500 var(--text-card)/1.25 var(--serif);
  letter-spacing: -.025em;
}
.hero-copy > p, .inner-hero p, .page-intro p {
  font-size: var(--text-lead);
  line-height: 1.75;
  max-width: 46ch;
}
.service-card p, .benefit p, .section-heading > p, .bartender-banner p,
.bartender-grid p, .contact-intro p, .three-grid p, .faq-section details p,
.service-dialog-info p, .gallery-info p {
  font-size: var(--text-body);
  line-height: 1.7;
}
.service-card p, .benefit p { max-width: none; }
.eyebrow, .brands-section .eyebrow, .case-caption .eyebrow,
.portfolio-grid .case-caption .eyebrow, .service-meta,
.hero-copy > .eyebrow, .service-dialog-info .eyebrow, .gallery-info .eyebrow {
  font: 600 var(--text-caption)/1.6 var(--sans);
  letter-spacing: .12em;
  color: var(--label-color);
}
.service-meta { min-height: 2.6em; display: block; margin-bottom: 10px; }
.eyebrow { overflow-wrap: anywhere; }
.header-inner { min-height: 100px; height: auto; padding-block: 18px; gap: 24px; }
.brand { min-width: 0; gap: 10px; }
.brand > span { font-size: 16px; letter-spacing: .025em; }
.brand small { font: 500 var(--text-caption)/1.5 var(--sans); letter-spacing: .08em; }
.header nav { gap: 22px; flex-shrink: 0; }
.header nav a { font-size: var(--text-small); min-height: 44px; display: inline-flex; align-items: center; }
.external { font-size: var(--text-caption); }
.button, .header-cta, .hero-actions .button, .submit,
.gallery-info .button, .bartender-grid > .button {
  font: 600 var(--text-small)/1.5 var(--sans);
  min-height: 52px;
  padding: 15px 20px;
  gap: 16px;
  white-space: normal;
  text-align: left;
  background: var(--action);
  border-color: var(--action);
}
.button:hover { background: var(--action-hover); border-color: var(--action-hover); transform: none; }
.button.outline { background: transparent; color: var(--dark); border-color: #8a8378; }
.button.outline:hover { background: #eee7dc; }
.button:active { filter: brightness(.9); }
.button .icon { width: 20px; height: 20px; }
.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-copy { padding-top: 52px; padding-bottom: 45px; }
.hero-proof strong { font-size: var(--text-small); }
.stars { font-size: var(--text-small); }
.stars small, .contact-note, .form-note, .form-topline small,
.footer-bottom, .filter-bar > span, #gallery-counter {
  font-size: var(--text-small);
  line-height: 1.6;
  letter-spacing: 0;
}
.stars small { color: var(--muted); }
.stars { color: var(--label-color); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
input, select, textarea, button, a { scroll-margin-block: 120px 80px; }
.hero-proof { margin-top: 28px; }
.hero-visual { height: 660px; }
.hero-caption span, .image-side-label, .inner-hero-photo span {
  font-size: var(--text-caption);
  letter-spacing: .08em;
  line-height: 1.6;
}
.hero-caption strong { font: 500 28px/1.3 var(--serif); }
.hero-visual:after { inset: 40% 0 0; background: linear-gradient(transparent, rgba(20,15,8,.84)); }
.image-side-label { background: #24231fce; padding: 10px 6px; }
.hero-bottom { font-size: var(--text-caption); letter-spacing: .04em; gap: 24px; }
.hero-bottom a { font-size: var(--text-small); min-height: 44px; display: inline-flex; align-items: center; }
.benefits { padding-block: 40px; align-items: start; }
.benefit { gap: 14px; }
.benefit > .icon { width: 30px; height: 30px; }
.benefit h3 { font: 600 var(--text-body)/1.4 var(--sans); letter-spacing: 0; margin-bottom: 10px; }
.text-link, .section-heading > .text-link { font-size: var(--text-small); min-height: 44px; }
.section-heading { align-items: end; }
.section-heading > p { max-width: 36ch; }
.case-overlay { font-size: var(--text-body); opacity: 1; }
.case-caption { gap: 16px; }
.case-caption > div { min-width: 0; }
.case-caption .eyebrow { letter-spacing: .08em; }
.bartender-banner .eyebrow, .cocktail-hero .eyebrow { color: #e2bd87; }
.stats { gap: 0; }
.stats strong { font-size: 36px; line-height: 1.25; letter-spacing: -.035em; }
.stats span { font-size: var(--text-caption); line-height: 1.65; letter-spacing: .05em; }
.results-grid blockquote p { font: 400 26px/1.55 var(--serif); }
.results-grid blockquote footer strong,
.results-grid blockquote footer span { font-size: var(--text-small); line-height: 1.7; }
.contact-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; }
.contact-intro, .quote-form { min-width: 0; }
.contact-phone { font-size: 26px; line-height: 1.4; letter-spacing: -.025em; min-height: 48px; }
.form-topline { gap: 16px; align-items: baseline; }
.form-topline > span { font: 500 28px/1.3 var(--serif); }
.form-topline small { flex-shrink: 0; }
.form-grid { gap: 20px 16px; }
.form-grid label { font: 500 var(--text-small)/1.5 var(--sans); }
.form-grid input, .form-grid select, .form-grid textarea {
  font: 400 var(--text-body)/1.5 var(--sans);
  padding: 13px 12px;
  min-height: 52px;
  border-color: #9b9385;
  background: #fffc;
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: #68635a; }
.form-grid textarea { min-height: 120px; }
.submit { justify-content: space-between; margin-top: 24px; }
.form-note { margin-top: 14px; max-width: 65ch; }
#form-status { font-size: var(--text-body); }
.footer-main > div { min-width: 0; }
.footer-main > div > a { font-size: var(--text-small); min-height: 44px; overflow-wrap: anywhere; }
.footer-bottom { flex-wrap: wrap; padding-bottom: 64px; }
.footer-bottom a { min-height: 44px; }
.floating-wa { min-height: 52px; min-width: 52px; padding: 13px 18px; }
.floating-wa span { font-size: var(--text-small); }
.mini-checks { font-size: var(--text-small); flex-wrap: wrap; gap: 14px 20px; }
.mini-checks .icon { width: 18px; height: 18px; }
.faq-section summary { font-size: var(--text-body); line-height: 1.6; }
.filter-bar { flex-wrap: wrap; gap: 12px; }
.filter-bar button { font-size: var(--text-small); min-height: 48px; padding: 12px 16px; }
.contact-links { font-size: var(--text-body); flex-wrap: wrap; gap: 20px 30px; }
.contact-links a { min-height: 44px; overflow-wrap: anywhere; }
.dialog-close, .gallery-prev, .gallery-next { min-width: 44px; min-height: 44px; }
.dialog-close { font-size: 28px; }
.gallery-prev, .gallery-next { font-size: 24px; }
.gallery-info h2, .service-dialog-info h2 { font-size: 40px; }
#gallery-thumbnails { gap: 10px; }
#gallery-thumbnails button { min-width: 48px; min-height: 64px; }
#gallery-thumbnails img { width: 48px; height: 64px; }
.service-dialog-layout { max-width: 980px; }
.service-dialog-layout > img { height: 560px; }
.gallery-layout { min-width: min(1060px, calc(100vw - 70px)); }
.gallery-info { padding: 65px 30px 35px; }
@media (max-width: 1250px) {
  .header-cta { display: none; }
  .header nav { gap: 24px; }
  .section-heading { flex-wrap: wrap; gap: 24px 32px; }
  .section-heading > p { max-width: 38ch; }
  .hero-actions { flex-direction: column; align-items: start; }
  .hero-actions .button { min-width: 230px; }
  .hero-proof .stars { flex-wrap: wrap; gap: 4px 10px; }
}
@media (max-width: 1000px) {
  .header-inner { min-height: 88px; padding-block: 14px; }
  .header nav { gap: 16px; }
  .brand > span { font-size: 14px; }
  .brand small { font-size: var(--text-caption); letter-spacing: .02em; }
  .brand img { width: 46px; height: 46px; }
  .hero-copy > p, .inner-hero p { font-size: var(--text-body); }
  .hero-visual { min-height: 700px; height: 100%; }
  .hero h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
  .benefits { gap: 32px; }
  .benefit p { font-size: var(--text-body); }
  .bartender-grid { grid-template-columns: 1fr; gap: 40px; }
  .bartender-images { max-width: 620px; }
  .bartender-grid > div:last-child { max-width: 620px; }
  .results-grid { gap: 32px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .stats > div:last-child { grid-column: 1/-1; padding-left: 0; }
  .stats strong { font-size: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro p { max-width: 55ch; }
  .contact-intro h2 br { display: none; }
  .three-grid { gap: 32px; }
  .inner-hero { gap: 32px; }
  .inner-hero-photo { height: 610px; }
  .service-dialog-layout { grid-template-columns: 1fr; max-width: 650px; }
  .service-dialog-layout > img { height: 300px; }
  .service-dialog-info { padding: 32px; }
  .gallery-layout { grid-template-columns: 1fr; min-width: 0; }
  .gallery-stage { height: 55dvh; }
  .gallery-info { padding: 32px; }
  .gallery-info .eyebrow { padding-right: 20px; }
}
@media (min-width: 651px) and (max-width: 820px) {
  .header nav { gap: 12px; }
  .header nav a { font-size: var(--text-small); }
  .header .brand img { display: none; }
  .header .brand small { max-width: 160px; }
  .hero-inner { gap: 8px; }
  .hero h1 { font-size: 34px; letter-spacing: -.04em; }
  .hero-copy > .eyebrow { letter-spacing: .05em; }
  .hero-caption strong { font-size: 24px; }
  .hero-caption { left: 20px; right: 20px; }
  .hero-bottom { flex-wrap: wrap; gap: 8px; }
  .results-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats > div:last-child { grid-column: auto; padding-left: 20px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 100px; }
  .header-inner { min-height: 88px; }
  .header nav { top: 88px; gap: 4px; max-height: calc(100dvh - 88px); overflow: auto; }
  .header nav a { font-size: var(--text-body); min-height: 48px; }
  .brand > span { font-size: 14px; }
  .brand small { font-size: var(--text-caption); letter-spacing: .025em; }
  .menu-toggle { width: 48px; height: 48px; flex-shrink: 0; }
  .hero-copy { padding: 36px 0 32px; }
  .hero h1, .inner-hero h1, .page-intro h1 { font-size: var(--text-display); line-height: 1.15; letter-spacing: -.035em; }
  .hero-copy > p, .inner-hero p, .page-intro p { font-size: var(--text-body); line-height: 1.75; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { min-width: 0; width: 100%; justify-content: space-between; flex: auto; }
  .hero-proof { align-items: center; gap: 12px; }
  .hero-proof strong { font-size: var(--text-small); }
  .hero-proof .stars { gap: 4px 10px; font-size: var(--text-small); flex-wrap: wrap; }
  .hero-proof .stars small { font-size: var(--text-small); display: block; }
  .proof-mark { width: 44px; height: 44px; flex-shrink: 0; }
  .hero-visual { height: 440px; min-height: 0; }
  .hero-caption { left: 22px; right: 22px; bottom: 24px; }
  .hero-caption strong { font-size: 26px; }
  .image-side-label { display: none; }
  .hero-bottom { flex-direction: column; align-items: start; gap: 8px; padding-block: 20px; }
  .hero-bottom > span { font-size: var(--text-caption); }
  .benefits { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .benefit { padding-right: 0; border: 0; gap: 12px; }
  .benefit h3 { font-size: var(--text-body); }
  .benefit p { font-size: var(--text-body); }
  .benefit > .icon { width: 28px; height: 28px; }
  .section-heading h2 { font-size: var(--text-section); }
  .section-heading > p { margin-top: 22px; font-size: var(--text-body); }
  .service-meta { font-size: var(--text-caption); letter-spacing: .07em; }
  .service-card h3, .case-caption h3 { font-size: var(--text-card); }
  .service-card p { font-size: var(--text-body); line-height: 1.7; }
  .round-arrow { width: 36px; height: 36px; }
  .brands-section .eyebrow { font-size: var(--text-caption); letter-spacing: .08em; }
  .case-caption .eyebrow { font-size: var(--text-caption); letter-spacing: .05em; }
  .case-caption h3 { font-size: 26px; }
  .case-caption > .icon { width: 22px; height: 22px; }
  .bartender-grid h2 { font-size: var(--text-section); }
  .bartender-grid p { font-size: var(--text-body); }
  .results-grid h2 { font-size: var(--text-section); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stats > div, .stats > div:last-child { grid-column: auto; padding-inline: 12px; }
  .stats > div:first-child { padding-left: 0; }
  .stats strong { font-size: 28px; white-space: normal; }
  .stats span { font-size: var(--text-caption); letter-spacing: 0; }
  .results-grid blockquote p { font-size: 24px; }
  .contact-intro h2 { font-size: var(--text-section); }
  .contact-intro p { font-size: var(--text-body); }
  .contact-phone { font-size: 26px; gap: 12px; }
  .contact-phone .icon:last-child { margin-left: 0; }
  .form-topline { flex-wrap: wrap; gap: 8px; }
  .form-topline > span { font-size: 26px; }
  .form-grid { gap: 20px 16px; }
  .form-grid label { font-size: var(--text-small); }
  .form-grid input, .form-grid select, .form-grid textarea { font-size: var(--text-body); min-height: 52px; }
  .form-note, .contact-note { font-size: var(--text-small); }
  .footer { padding-bottom: 16px; }
  .footer-main { gap: 24px; align-items: start; }
  .footer-main > div > a { font-size: var(--text-small); justify-content: start; }
  .footer-bottom { font-size: var(--text-small); display: flex; flex-direction: column; align-items: start; gap: 12px; }
  .footer-bottom > a { margin-left: 0; }
  .floating-wa { padding: 13px; }
  .mini-checks { font-size: var(--text-small); gap: 12px; }
  .inner-hero-photo span { font-size: var(--text-caption); letter-spacing: .06em; }
  .faq-section h2 { font-size: var(--text-section); }
  .faq-section summary { font-size: var(--text-body); }
  .filter-bar button { font-size: var(--text-small); min-height: 48px; }
  .filter-bar > span { font-size: var(--text-small); }
  .portfolio-grid .case-caption h3 { font-size: var(--text-card); }
  .portfolio-grid .case-caption .eyebrow { font-size: var(--text-caption); }
  .contact-links { font-size: var(--text-body); gap: 16px; }
  .contact-links a { max-width: 100%; }
  .service-dialog-info h2, .gallery-info h2 { font-size: 36px; }
  .service-dialog-info p, .gallery-info p { font-size: var(--text-body); }
  .service-dialog-info .eyebrow, .gallery-info .eyebrow { font-size: var(--text-caption); }
  .gallery-info .button { font-size: var(--text-small); min-height: 52px; }
  #gallery-thumbnails img { width: 48px; height: 64px; }
  .dialog-close { width: 44px; height: 44px; top: 10px; right: 10px; }
}
@media (max-width: 480px) {
  .benefits, .services-grid, .cases-grid { grid-template-columns: 1fr; }
  .benefit { display: flex; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .benefit:last-child { border: 0; padding-bottom: 0; }
  .service-photo { height: 350px; }
  .service-meta { min-height: 0; }
  .services-grid { gap: 36px; }
  .case-photo { height: 390px; }
  .case-overlay { display: flex; font-size: var(--text-body); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .brand img { width: 44px; height: 44px; }
  .brand > span { font-size: 14px; }
  .brand small { font-size: var(--text-caption); letter-spacing: 0; }
  .service-dialog-info, .gallery-info { padding: 28px 24px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 36px; }
  .brand { gap: 8px; }
  .header .brand img { width: 36px; height: 36px; }
  .brand > span { font-size: 13px; }
  .brand small { font-size: var(--text-caption); letter-spacing: -.02em; }
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stats > div, .stats > div:last-child { padding: 0; border: 0; }
}