/* Proposal B: client palette, accessible contrast and modern sans typography. */
:root {
  --white: #fff;
  --off-white: #f7f4ee;
  --sand: #d8c3a5;
  --gray: #8a8a8a;
  --taupe: #b89b7a;
  --cream: #fff;
  --paper: #f7f4ee;
  --ink: #171717;
  --dark: #171717;
  --gold: #b89b7a;
  --action: #171717;
  --action-hover: #343434;
  --label-color: #5c5145;
  --muted: #55514c;
  --line: #ded8ce;
  --on-dark: #171717;
  --on-dark-muted: #55514c;
}
body { background: var(--white); color: var(--ink); }
h1 em, h2 em { color: var(--ink); }
p { color: var(--muted); }
.eyebrow, .sensory-services .eyebrow, .projects-section .eyebrow,
.faq-section .eyebrow, .process-section .eyebrow,
.case-caption .eyebrow, .portfolio-grid .case-caption .eyebrow,
.sensory-services .service-meta { color: var(--label-color); }
.button, .header-cta, .submit, .gallery-info .button { background: var(--ink); color: white; }
.button > .icon { background: var(--sand); color: var(--ink); }
.button:hover, .header-cta:hover { background: #343434; color: white; }
.button.outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.button.outline > .icon { color: var(--ink); background: var(--sand); }
.button.outline:hover { background: var(--off-white); color: var(--ink); border-color: var(--ink); }
.text-link { border-color: var(--taupe); color: var(--ink); font-size: 14px; }
.text-link:hover { color: #5c5145; }
.header { background: #fffffff5; color: var(--ink); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 96px; padding-block: 12px; }
.header .brand img { width: 68px; height: 68px; }
.header nav a, .header nav a:hover, .header nav a[aria-current] { color: var(--ink); }
.header nav a[aria-current]:after { background: var(--ink); }
.menu-toggle span { background: var(--ink); }
.signature-hero { padding-top: 18px; }
.signature-frame { min-height: 700px; background: var(--ink); }
.signature-content { min-height: 700px; display: flex; flex-direction: column; }
.signature-shade { background: linear-gradient(90deg,#171717 3%,#171717ed 28%,#17171766 62%,#17171711),linear-gradient(180deg,#17171744,transparent 45%,#17171799); }
.signature-top { color: white; }
.location-pill i { background: var(--sand); }
.signature-bottom { margin-top: auto; padding-top: 110px; }
.signature-copy h1 { font-size: clamp(48px,5.5vw,80px); max-width: 13ch; color: white; }
.signature-copy h1 em { color: var(--sand); }
.signature-copy p { color: #f7f4ee; font-size: 18px; max-width: 43ch; }
.signature-actions .button { background: var(--sand); color: var(--ink); }
.signature-actions .button > .icon { background: var(--ink); color: white; }
.signature-actions .button.outline { background: transparent; color: white; border-color: #fff9; }
.signature-actions .button.outline > .icon { background: white; color: var(--ink); }
.signature-actions .button:hover { background: white; color: var(--ink); }
.signature-note { background: #171717c9; color: white; }
.signature-note div > span { color: var(--off-white); }
.signature-foot { color: var(--off-white); padding-top: 30px; }
.signature-foot .icon { color: var(--sand); }
.brands-section .eyebrow { color: var(--muted); }
.brand-row { color: var(--ink); }
.client-itau { background: var(--ink); color: white; }
.intro-panel { background: var(--off-white); }
.intro-panel h2 > span, .intro-stats strong { color: var(--ink); }
.intro-panel h2 > span { text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 6px; text-underline-offset: 7px; }
.intro-story p { color: var(--muted); }
.intro-stats { border-color: var(--sand); }
.services-section { background: var(--off-white); }
.services-section p { color: var(--muted); }
.sensory-services { color: var(--ink); background: white; }
.sensory-services .service-card { color: var(--ink); }
.sensory-services .round-arrow, .round-arrow { background: var(--sand); color: var(--ink); }
.sensory-services h2 em, .projects-section h2 em, .faq-section h2 em,
.process-section h2 em, .contact-intro h2 em, .inner-hero h1 em,
.page-intro h1 em, .bartender-banner h2 em { color: var(--ink); }
.section-bottom { border-color: var(--line); }
.projects-section { color: var(--ink); }
.case-caption { border-color: var(--line); }
.case-caption > .icon { color: var(--ink); }
.bartender-banner { background: var(--sand); }
.bartender-banner .eyebrow { color: #4f4436; }
.bartender-banner p { color: #39332d; }
.bartender-banner .button > .icon { background: white; }
.contact-section { background: var(--off-white); }
.contact-intro p, .form-note, .contact-note { color: var(--muted); }
.contact-phone .icon { color: var(--ink); }
.quote-form { background: white; }
.form-topline { border-color: var(--line); }
.form-grid input, .form-grid select, .form-grid textarea { border-color: #8a8a8a; background: white; color: var(--ink); }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: #68635d; opacity: 1; }
.footer { background: white; color: var(--ink); }
.footer-signoff > span { color: var(--ink); }
.footer-signoff > span { text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 8px; }
.footer-bottom { border-color: var(--line); }
.footer-main > div > a { overflow-wrap: anywhere; }
.floating-wa { color: var(--ink); background: white; border-color: var(--taupe); }
.floating-wa:hover { background: var(--off-white); color: var(--ink); }
.inner-hero, .page-intro { background: var(--off-white); }
.inner-hero p, .page-intro p { color: var(--muted); }
.mini-checks .icon { color: var(--ink); }
.inner-hero-photo span { background: #171717eb; color: white; }
.benefits { color: var(--ink); }
.benefit { border-color: var(--line); }
.benefit > .icon { color: #6a5946; }
.cocktail-hero .inner-hero { background: var(--off-white); color: var(--ink); }
.cocktail-hero .inner-hero p, .cocktail-hero .eyebrow { color: var(--muted); }
.cocktail-hero .inner-hero h1 em, .cocktail-hero .mini-checks .icon { color: var(--ink); }
.process-section .step-number { border-color: var(--sand); color: var(--ink); }
.faq-section details { border-color: var(--line); }
.faq-section summary span { color: #6a5946; }
.detail-block > .icon { color: #6a5946; }
.filter-bar { border-color: var(--line); }
.filter-bar button { color: var(--ink); border-color: var(--gray); }
.filter-bar button.active { background: var(--ink); color: white; border-color: var(--ink); }
dialog { background: white; }
.gallery-info p, .service-dialog-info p { color: var(--muted); }
.dialog-close { color: var(--ink); background: white; }
.coffee-story { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; padding-block: 90px; }
.coffee-story-photo { position: relative; }
.coffee-story-photo img { width: 100%; height: 690px; object-fit: cover; object-position: center; border-radius: 200px 200px 24px 24px; }
.coffee-story-photo > span { position: absolute; bottom: 22px; left: 20px; right: 20px; padding: 14px; border-radius: 100px; color: white; background: #171717e6; text-align: center; font-size: 12px; }
.coffee-story h2 { margin-block: 18px 25px; }
.coffee-story h2 em { color: var(--ink); }
.coffee-story p { font-size: 16px; line-height: 1.75; }
.coffee-story .story-lead { font-size: 18px; color: var(--ink); }
.coffee-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-block: 28px; border-top: 1px solid var(--sand); padding-top: 24px; }
.coffee-details h3 { font: 500 23px/1.25 var(--display); letter-spacing: -.02em; margin-bottom: 14px; }
.coffee-details h3 .icon { display: block; color: #6a5946; width: 30px; height: 30px; margin-bottom: 15px; }
.google-reviews { background: var(--off-white); border-radius: 30px; padding: 64px 60px; }
.google-reviews .section-heading { align-items: end; margin-bottom: 40px; }
.google-summary { flex-shrink: 0; }
.google-summary > span { display: block; font-size: 14px; color: var(--muted); }
.google-summary strong { display: block; font: 500 64px/1.1 var(--display); letter-spacing: -.05em; margin-block: 10px; }
.google-summary small { font: 400 20px/1 var(--sans); letter-spacing: 0; padding-left: 10px; }
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.review-card { margin: 0; background: white; border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; }
.review-mark { font: 500 65px/.8 var(--display); color: #6a5946; padding-top: 10px; }
.review-card blockquote { margin: 0 0 30px; flex: 1; }
.review-card blockquote p { color: var(--ink); font: 400 24px/1.4 var(--display); letter-spacing: -.02em; }
.review-card figcaption { border-top: 1px solid var(--line); padding-top: 20px; }
.review-card figcaption strong { display: block; font-size: 16px; font-weight: 600; }
.review-card figcaption span { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.review-source { font-size: 12px; margin: 22px 0 0; }
:focus-visible { outline: 3px solid #6a5946; outline-offset: 5px; }
.signature-hero :focus-visible { outline-color: var(--sand); }
@media (max-width: 1000px) {
  .signature-frame, .signature-content { min-height: 660px; }
  .signature-bottom { padding-top: 100px; }
  .signature-copy h1 { font-size: 60px; }
  .coffee-story { gap: 40px; grid-template-columns: .8fr 1.2fr; }
  .coffee-story-photo img { height: 740px; }
  .coffee-details { grid-template-columns: 1fr; gap: 12px; }
  .coffee-details h3 .icon { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }
  .google-reviews { padding: 44px 40px; }
  .review-grid { gap: 14px; }
  .review-card { padding: 24px 20px; }
  .review-card blockquote p { font-size: 22px; }
}
@media (max-width: 650px) {
  .header-inner { min-height: 82px; padding-block: 10px; }
  .header .brand img { width: 60px; height: 60px; }
  .header nav { background: white; border-color: var(--line); }
  .signature-frame, .signature-content { min-height: 720px; }
  .signature-shade { background: linear-gradient(0deg,#171717fc 12%,#171717c9 50%,#17171722 90%,#17171799); }
  .signature-bottom { padding-top: 125px; }
  .signature-copy h1 { font-size: clamp(42px,11vw,58px); max-width: 13ch; }
  .signature-copy p { font-size: 16px; }
  .signature-top > span:first-child { max-width: 25ch; font-size: 12px; }
  .signature-foot { padding-top: 22px; }
  .intro-panel h2 > span { text-decoration-thickness: 4px; }
  .coffee-story { grid-template-columns: 1fr; gap: 35px; padding-block: 55px; }
  .coffee-story-photo { width: 90%; margin-inline: auto; }
  .coffee-story-photo img { height: 470px; }
  .coffee-story h2 { font-size: 40px; }
  .coffee-details { grid-template-columns: 1fr; gap: 16px; }
  .coffee-story .button { width: 100%; justify-content: space-between; }
  .google-reviews { padding: 35px 25px; border-radius: 22px; }
  .google-reviews .section-heading { display: block; }
  .google-reviews h2 { font-size: 38px; }
  .google-summary { margin-top: 30px; }
  .google-summary strong { font-size: 52px; }
  .review-grid { grid-template-columns: 1fr; gap: 16px; }
  .review-card { padding: 26px; }
  .review-card blockquote p { font-size: 24px; }
  .footer-main > div > a { font-size: 14px; }
}