/* ==========================================================================
   Amber & Oak Coffee Co. Design tokens (Nature Distilled style system)
   ========================================================================== */
:root {
  --color-terracotta: #C67B5C;
  --color-terracotta-dark: #A5603F;
  --color-clay: #8A4A24;
  --color-sand: #D4C4A8;
  --color-cream: #FBF6EC;
  --color-cream-2: #F3E9D6;
  --color-olive: #6B7B3C;
  --color-ink: #2B1B12;
  --color-ink-soft: #5A4636;
  --color-espresso: #241610;
  --color-espresso-2: #2F1C12;
  --color-white: #FFFFFF;

  --color-primary: var(--color-clay);
  --color-accent: var(--color-terracotta);
  --color-bg: var(--color-cream);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-cream-2);
  --color-border: #E7D9C2;
  --color-accent-text: var(--color-clay);
  --color-accent-text-2: var(--color-terracotta-dark);
  --color-danger: #B3261E;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(43, 27, 18, 0.08);
  --shadow-md: 0 12px 32px rgba(43, 27, 18, 0.12);
  --shadow-lg: 0 24px 60px rgba(43, 27, 18, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 300ms;

  --header-h: 84px;
  /* The Kirosconsult demo bar. 41px is one line of it; script.js measures the
     real height and overwrites this, because the text wraps on narrow screens. */
  --demo-bar-h: 41px;
}

/* ==========================================================================
   Dark theme. Derived from the site's own warm palette, not an inversion.
   Espresso is already this design's dark surface colour (footer, trust
   strip, testimonials), so dark mode reuses it for cards instead of
   introducing a new hue, and never reuses a light surface colour as text.
   Applied via [data-theme="dark"] on <html>, set by the inline head script
   in each page (system preference by default, localStorage override after
   the visitor picks one with the header toggle).
   ========================================================================== */
:root[data-theme="dark"] {
  --color-bg: #17100B;
  --color-surface: var(--color-espresso);
  --color-surface-alt: var(--color-espresso-2);
  --color-border: #7A5B42;
  --color-ink: #F3E8DA;
  --color-ink-soft: #C9AF95;
  --color-olive: #9CC26B;
  --color-danger: #FF8A75;
  --color-accent-text: #E0A57E;
  --color-accent-text-2: #E8B594;
}
:root[data-theme="dark"] .site-header.is-scrolled::before {
  background: rgba(23, 16, 11, 0.92);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--demo-bar-h) + var(--header-h)); }
body, h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

body {
  /* The demo bar is position:fixed, like the header, so it is out of flow and
     the page has to make its own room for it. */
  padding-top: var(--demo-bar-h);
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); line-height: 1.15; font-weight: 700; }

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-espresso);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 999;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2.5px solid var(--color-accent-text-2);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  /* White on --color-terracotta was 3.29:1, under WCAG AA for button text.
     These are the palette's own darker tones: 4.83:1 resting, 6.81:1 on hover.
     No new colour is introduced and the fill stays the same hue. */
  background: var(--color-terracotta-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-clay); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}
.btn-outline:hover { background: var(--color-clay); color: var(--color-white); }

.btn-outline-invert {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}
.btn-outline-invert:hover { background: rgba(255,255,255,0.18); border-color: var(--color-white); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn-ghost:hover { color: var(--color-accent-text-2); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }

/* ==========================================================================
   Kirosconsult demo bar
   ========================================================================== */
/* Sand and ink are base tokens, not theme-swapped ones, so this one pair stays
   legible in both light and dark. Fixed rather than sticky because the header
   below it is fixed; a sticky bar would scroll away and leave it floating. */
.demo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--color-sand);
  color: #2B1B12;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  padding: 10px 16px;
}
.demo-bar a { text-decoration: underline; font-weight: 700; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--demo-bar-h); left: 0; right: 0;
  z-index: 100;
  /* --header-h-current is the header's height RIGHT NOW: 84px at rest, 72px
     once scrolled. Anything that has to sit directly under the header reads
     this rather than --header-h, which only describes the at-rest state. */
  --header-h-current: var(--header-h);
  height: var(--header-h-current);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  --header-h-current: 72px;
  height: var(--header-h-current);
}
/* backdrop-filter must live on a pseudo-element, not .site-header itself.
   A filter on the header would make it the containing block for its
   position:fixed .main-nav descendant and break the mobile menu overlay. */
.site-header.is-scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  transition: color var(--dur-med) var(--ease-out), text-shadow var(--dur-med) var(--ease-out);
}
.is-scrolled .brand { color: var(--color-ink); text-shadow: none; }
.brand-mark { color: inherit; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); transition: filter var(--dur-med) var(--ease-out); }
.is-scrolled .brand-mark { filter: none; }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  padding: 0.4rem 0.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.is-scrolled .nav-link { color: var(--color-ink-soft); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-terracotta);
  transition: right var(--dur-med) var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--color-white); }
.is-scrolled .nav-link:hover, .is-scrolled .nav-link.is-active { color: var(--color-clay); }
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.header-cta-secondary { color: var(--color-white); }
.is-scrolled .header-cta-secondary { color: var(--color-ink); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.55);
  color: var(--color-white);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.is-scrolled .theme-toggle { color: var(--color-ink); border-color: var(--color-border); filter: none; }
.theme-toggle:hover { background: rgba(255,255,255,0.18); border-color: var(--color-white); }
.is-scrolled .theme-toggle:hover { background: var(--color-cream-2); border-color: var(--color-terracotta); }
.theme-toggle .theme-icon--sun { display: none; }
.theme-toggle .theme-icon--moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon--moon { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition: filter var(--dur-med) var(--ease-out);
}
.is-scrolled .nav-toggle { filter: none; }
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-white);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out);
  margin-inline: auto;
}
.is-scrolled .nav-toggle span { background: var(--color-ink); }
.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); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh - var(--demo-bar-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,0.68) 0%, rgba(20,12,8,0.6) 40%, rgba(20,12,8,0.88) 100%);
}

/* Steam rising from the coffee cup in the hero photo, pure CSS, no video
   weight. Positioned approximately over the cup; kept subtle/blurred so
   minor misalignment across responsive crops still reads as ambient steam. */
.hero-steam {
  position: absolute;
  left: 38%;
  bottom: 32%;
  width: 140px;
  height: 220px;
  pointer-events: none;
}
.steam-wisp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 16px;
  height: 90px;
  background: linear-gradient(to top, rgba(255,250,240,0) 0%, rgba(255,250,240,0.8) 35%, rgba(255,250,240,0.4) 65%, rgba(255,250,240,0) 100%);
  filter: blur(5px);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  transform-origin: bottom center;
  animation: steamRise 5s ease-in-out infinite;
  will-change: transform, opacity;
}
.steam-wisp--1 { left: 34%; animation-delay: 0s; }
.steam-wisp--2 { left: 50%; width: 12px; height: 75px; animation-delay: 1.3s; animation-duration: 4.4s; }
.steam-wisp--3 { left: 66%; animation-delay: 2.6s; animation-duration: 5.6s; }
.steam-wisp--4 { left: 46%; width: 10px; height: 60px; animation-delay: 0.7s; animation-duration: 4s; }

@keyframes steamRise {
  0%   { transform: translate(0, 0) scaleX(1); opacity: 0; }
  12%  { opacity: 0.8; }
  50%  { transform: translate(-8px, -55px) scaleX(1.4); opacity: 0.55; }
  80%  { opacity: 0.2; }
  100% { transform: translate(10px, -110px) scaleX(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-steam { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--header-h);
  max-width: 760px;
}
.eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}
.hero .eyebrow { color: #FFE6D2; /* was #F0C9A8: 4.00:1 at the photo's brightest patch, now 5.14:1 */ margin-bottom: var(--space-2); }
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: var(--space-3);
}
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; min-width: 0; }
.hero-stats strong { font-family: var(--font-display); font-size: 1.8rem; }
.hero-stats span { font-size: 0.85rem; color: rgba(255,255,255,0.75); }

.scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--color-white);
  opacity: 0.8;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip { background: var(--color-espresso); color: var(--color-cream); padding: var(--space-3) 0; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-sand);
  min-width: 0;
}
.trust-item svg { color: var(--color-terracotta); flex-shrink: 0; }
.trust-item span { min-width: 0; }

/* ==========================================================================
   Page header (compact hero banner used on non-home pages)
   ========================================================================== */
.page-header {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}
.page-header-media { position: absolute; inset: 0; z-index: 0; }
.page-header-media img { width: 100%; height: 100%; object-fit: cover; }
.page-header-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,0.55) 0%, rgba(20,12,8,0.5) 50%, rgba(20,12,8,0.88) 100%);
}
.page-header-inner {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-5);
}
.page-header-inner .eyebrow { color: #FFE6D2; /* was #F0C9A8: 4.00:1 at the photo's brightest patch, now 5.14:1 */ margin-bottom: var(--space-2); }
.page-header-inner h1 {
  color: var(--color-white);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

/* ==========================================================================
   Sections general
   ========================================================================== */
section { padding: var(--space-7) 0; }
.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-top: 0.4rem; }
.section-sub { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: 1.05rem; }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.about-media { position: relative; }
.about-media > img:first-child {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
}
.about-media-accent {
  position: absolute;
  bottom: -10%;
  right: -12%;
  width: 48%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}
.about-copy h2 { margin-top: 0.4rem; margin-bottom: var(--space-3); font-size: clamp(2rem, 3.6vw, 2.8rem); }
.about-copy p { color: var(--color-ink-soft); margin-bottom: var(--space-2); font-size: 1.05rem; }
.about-points { margin: var(--space-3) 0 var(--space-4); display: flex; flex-direction: column; gap: 0.7rem; }
.about-points li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.about-points svg { color: var(--color-olive); flex-shrink: 0; }

/* ==========================================================================
   Menu
   ========================================================================== */
.menu { background: var(--color-surface-alt); }
.menu-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.menu-tab {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-ink-soft);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
}
.menu-tab:hover { border-color: var(--color-terracotta); color: var(--color-accent-text); }
.menu-tab.is-active { background: var(--color-clay); border-color: var(--color-clay); color: var(--color-white); }

.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2.5rem; }
.menu-list.is-active { display: grid; }
.menu-list:not(.is-active) { display: none; }
.menu-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.menu-item-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
}
.menu-item-name span { font-family: var(--font-body); font-weight: 400; font-size: 0.88rem; color: var(--color-ink-soft); margin-top: 0.15rem; }
.menu-price { font-weight: 700; color: var(--color-accent-text); white-space: nowrap; }
.menu-footer { margin-top: var(--space-4); }

/* ==========================================================================
   Features
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-accent-text-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature-card p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  padding-inline: var(--space-3);
  max-width: 1240px;
  margin-inline: auto;
}
.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.gallery-grid img:hover { transform: scale(1.04); filter: brightness(1.05); }
.gallery-grid img:nth-child(1), .gallery-grid img:nth-child(4) { grid-column: span 3; height: 300px; }
.gallery-grid img:nth-child(2), .gallery-grid img:nth-child(3),
.gallery-grid img:nth-child(5), .gallery-grid img:nth-child(6) { grid-column: span 2; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { background: var(--color-espresso); color: var(--color-cream); }
.testimonials .eyebrow { color: #FFE6D2; /* was #F0C9A8: 4.00:1 at the photo's brightest patch, now 5.14:1 */ }
.testimonials h2 { color: var(--color-white); }
.testimonial-track { position: relative; min-height: 220px; max-width: 720px; margin: 0 auto; text-align: center; }
.testimonial-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.testimonial-card.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.stars { color: var(--color-terracotta); letter-spacing: 0.2em; margin-bottom: var(--space-2); font-size: 1.1rem; }
.testimonial-card blockquote { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 500; line-height: 1.5; }
.testimonial-card figcaption { margin-top: var(--space-3); color: var(--color-sand); font-weight: 600; font-size: 0.9rem; }
.testimonial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-5); }
.testimonial-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.testimonial-dots button.is-active { background: var(--color-terracotta); transform: scale(1.25); }

/* ==========================================================================
   Visit
   ========================================================================== */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.visit-block {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.visit-block svg { color: var(--color-accent-text-2); flex-shrink: 0; margin-top: 0.2rem; }
.visit-block strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.15rem; }
.visit-block span, .visit-block a { color: var(--color-ink-soft); overflow-wrap: anywhere; }
.visit-block a:hover { color: var(--color-accent-text-2); }
.visit-copy > .btn { margin-top: var(--space-2); }
.visit-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}
.visit-map iframe { width: 100%; height: 100%; border: 0; filter: sepia(12%) saturate(85%); }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--color-clay), var(--color-terracotta-dark));
  color: var(--color-white);
  padding: var(--space-6) 0;
}
.cta-banner-inner { text-align: center; max-width: 640px; margin-inline: auto; }
.cta-banner h2 { color: var(--color-white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: var(--space-2); }
.cta-banner p { color: rgba(255,255,255,0.9); margin-bottom: var(--space-4); font-size: 1.05rem; }
.cta-banner-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
}
.contact-copy h2 { margin-top: 0.4rem; margin-bottom: var(--space-2); font-size: clamp(2rem, 3.6vw, 2.8rem); }
.contact-copy p { color: var(--color-ink-soft); margin-bottom: var(--space-4); font-size: 1.05rem; }
.contact-info { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: var(--space-4); }
.contact-info a { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-info a:hover { color: var(--color-accent-text-2); }
.social-links { display: flex; gap: 0.6rem; }
.social-links a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease-out);
}
.social-links a:hover { background: var(--color-clay); border-color: var(--color-clay); color: var(--color-white); }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-field { margin-bottom: var(--space-2); display: flex; flex-direction: column; }
.form-field label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  background: var(--color-bg);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(198,123,92,0.2);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-error { color: var(--color-danger); font-size: 0.82rem; min-height: 1.1em; margin-top: 0.25rem; }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--color-danger); }
.form-submit { width: 100%; margin-top: 0.5rem; }
.form-status { margin-top: var(--space-2); font-weight: 600; text-align: center; min-height: 1.2em; }
.form-status.is-success { color: var(--color-olive); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-espresso); color: var(--color-sand); padding-top: var(--space-6); }
.site-footer .brand { color: var(--color-white); margin-bottom: var(--space-2); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 1.2fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p { color: rgba(212,196,168,0.85); margin: var(--space-2) 0 var(--space-3); max-width: 280px; font-size: 0.92rem; }
.footer-brand .social-links a { border-color: rgba(255,255,255,0.2); color: var(--color-sand); }
.footer-brand .social-links a:hover { background: var(--color-terracotta); border-color: var(--color-terracotta); color: var(--color-white); }
.footer-col h3 { font-family: var(--font-display); color: var(--color-white); font-size: 1.05rem; margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: rgba(212,196,168,0.85); font-size: 0.93rem; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-terracotta); }
.footer-newsletter p { color: rgba(212,196,168,0.85); font-size: 0.92rem; margin-bottom: var(--space-2); }
.newsletter-form { display: flex; gap: 0.4rem; }
.newsletter-form input {
  flex: 1;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--color-white);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-pill);
}
.newsletter-form input::placeholder { color: rgba(212,196,168,0.6); }
.newsletter-form input:focus { outline: none; border-color: var(--color-terracotta); }
.newsletter-form button {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.newsletter-form button:hover { background: var(--color-terracotta-dark); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  padding-block: var(--space-3);
  font-size: 0.85rem;
  color: rgba(212,196,168,0.65);
}
.footer-bottom a { color: var(--color-terracotta); font-weight: 700; transition: color var(--dur-fast) var(--ease-out); }
.footer-bottom a:hover { color: var(--color-sand); }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-clay);
  color: var(--color-white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med), background var(--dur-fast) var(--ease-out);
  z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.back-to-top:hover { background: var(--color-terracotta-dark); }

/* ==========================================================================
   Kirosconsult demo badge (fixed, every page)
   ========================================================================== */
.kiros-badge {
  position: fixed;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  max-width: calc(100vw - (2 * var(--space-3)));
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.kiros-badge:hover { color: var(--color-accent-text-2); border-color: var(--color-terracotta); }
@media (max-width: 480px) {
  .kiros-badge { font-size: 0.7rem; padding: 0.4rem 0.75rem; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, minmax(min(140px, 100%), 1fr)); }
}

@media (max-width: 1080px) {
  .main-nav {
    position: fixed;
    /* Not --header-h: the header shrinks to 72px once scrolled, and a fixed
       84px left a 12px strip of the page showing between the two. */
    top: calc(var(--demo-bar-h) + var(--header-h-current));
    left: 0; right: 0;
    bottom: 0;
    background: var(--color-bg);
    padding: var(--space-4) var(--space-3);
    /* top is transitioned alongside the header's own height transition so the
       panel stays flush while the header resizes. */
    transition: transform var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .nav-link { color: var(--color-ink); font-size: 1.2rem; }
  .nav-link:hover, .nav-link.is-active { color: var(--color-accent-text-2); }
  .nav-link::after { display: none; }
  .header-cta-secondary { display: none; }
  .nav-toggle { display: flex; }

  .about-grid, .visit-grid { grid-template-columns: 1fr; }
  .about-media { margin-bottom: var(--space-3); }
  .about-media-accent { width: 40%; right: 0; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(min(120px, 100%), 1fr)); }
  .gallery-grid img:nth-child(1), .gallery-grid img:nth-child(4) { grid-column: span 2; }
  .gallery-grid img:nth-child(2), .gallery-grid img:nth-child(3),
  .gallery-grid img:nth-child(5), .gallery-grid img:nth-child(6) { grid-column: span 1; }

  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  section { padding: var(--space-6) 0; }
  .features-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: var(--space-3); }
  .header-cta { padding: 0.7rem 1.1rem; font-size: 0.85rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(min(130px, 100%), 1fr)); }
  .footer-brand, .footer-newsletter { grid-column: span 2; min-width: 0; }
  .footer-col { min-width: 0; }
  .newsletter-form input { min-width: 0; }

  .menu-list { grid-template-columns: 1fr; gap: 0; }
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .menu-tab { flex-shrink: 0; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(min(100px, 100%), 1fr)); }
  .gallery-grid img:nth-child(1), .gallery-grid img:nth-child(4) { grid-column: span 2; height: 220px; }
  .gallery-grid img { height: 160px; }
}

@media (max-width: 420px) {
  /* logo + CTA + hamburger no longer fit one row at this width;
     drop the header CTA since "Order Online" is still reachable via the Menu link */
  .header-cta { display: none; }
  .brand-text { font-size: 1.05rem; }
}


/* ── Kirosconsult shared compliance fixes, 21 Sep 2026 ───────────────────────
   The slide-out nav is moved with transform only, so its links stayed in the
   keyboard tab order while off screen. visibility:hidden takes them out; the
   delay lets the slide finish first. Scoped to the same breakpoint the
   off-canvas nav itself uses. (This demo's nav opens below the header rather
   than over it, so the burger stays tappable and needs no z-index change.)   */
@media (max-width: 1080px){
  .main-nav{visibility:hidden;transition:transform var(--dur-med) var(--ease-out),visibility 0s linear var(--dur-med)}
  .main-nav.is-open{visibility:visible;transition:transform var(--dur-med) var(--ease-out),visibility 0s linear 0s}
}
@media (prefers-reduced-motion:reduce){
  .main-nav,.main-nav.is-open{transition:none}
}


/* ── Drawn map on the Visit page (replaces the OpenStreetMap iframe) ─────────
   The page previously loaded a third-party OpenStreetMap iframe on every view,
   pointed at real San Francisco coordinates for a shop that does not exist.
   This uses only SEMANTIC tokens (surface / bg / ink / border), all of which are
   redefined for dark mode. The raw cream and sand tokens are NOT redefined, so
   using them here would have put light text on a light map in dark mode.        */
.visit-map .map{ width:100%; height:100%; display:block; }
.map-ground{ fill: var(--color-surface-alt); }
.map-blocks rect{ fill: var(--color-border); opacity:.45; }
.map-park{ fill: var(--color-olive); opacity:.30; }
.map-river{ fill: var(--color-olive); opacity:.18; }
.map-roads path{ stroke: var(--color-bg); stroke-width:13; stroke-linecap:round; fill:none; }
.map-labels text{
  fill: var(--color-ink-soft); font-family: var(--font-body);
  font-size:9px; letter-spacing:.12em; font-weight:600;
}
.map-labels .map-vert{ writing-mode: vertical-rl; letter-spacing:.14em; }
.map-park-label{ text-anchor:middle; }
.map-pin-halo{ fill: var(--color-accent-text-2); opacity:.20; }
.map-pin-body{ fill: var(--color-accent-text-2); }
.map-pin-dot{ fill: var(--color-surface-alt); }
.map-here{
  text-anchor:middle; fill: var(--color-ink); font-family: var(--font-display);
  font-size:13px; font-weight:700; paint-order: stroke;
  stroke: var(--color-surface-alt); stroke-width:4px; stroke-linejoin:round;
}
@media (prefers-reduced-motion: no-preference){
  /* transform-box:fill-box is required here. Without it the browser resolves
     transform-origin against the SVG viewport rather than the circle's own box,
     and the pulse renders offset from the pin instead of concentric with it. */
  .map-pin-halo{ transform-box: fill-box; transform-origin:center; animation: mapPulse 2.8s ease-out infinite; }
  @keyframes mapPulse{ 0%,100%{ transform:scale(1); opacity:.20 } 50%{ transform:scale(1.18); opacity:.10 } }
}

/* ── Close button inside the mobile nav panel ────────────────────────────────
   Unlike the other demos the panel opens BELOW the header, so the burger is
   never covered. It still gets its own close control, for consistency with
   them; in exchange the burger stops morphing into an X, so there is exactly
   one X on screen and it lives in the menu it closes.                        */
/* Hidden at every width by default; the panel only reveals it below the
   mobile breakpoint, where the panel itself exists. Without this base rule
   the button renders inline among the desktop nav links. */
.nav-close{ display:none; }

@media (max-width: 1080px) {
  .nav-close{
    /* Fixed, so it holds position if the panel has to scroll; the open
       panel's transform makes it the containing block, so these offsets are
       relative to the panel, not the viewport. */
    position:fixed; top:16px; right:16px;
    right: calc(16px + env(safe-area-inset-right, 0px));
    width:44px; height:44px; display:none;
    align-items:center; justify-content:center;
    color:var(--color-ink); background:transparent; border:0; padding:0; cursor:pointer;
  }
  .main-nav.is-open .nav-close{ display:flex; }
  .nav-close svg{ width:24px; height:24px; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:none; }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:1; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:none; }
}


/* ── No-JS fallback, 21 Sep 2026 ─────────────────────────────────────────────
   --demo-bar-h is declared as 41px above, which is right for a single-line bar
   but ~21px short once it wraps below ~500px, so a visitor with JS disabled
   would see the header overlap the bar on a phone. This makes the fallback
   width-aware. JS still overrides it with the real measured height. */
@media (max-width: 500px){ :root{ --demo-bar-h: 62px; } }