:root {
  /* Brand palette and type families */
  --color-navy: #061e38;
  --color-navy-soft: #0a3156;
  --color-navy-bright: #144978;
  --color-ink: #0b2947;
  --color-cream: #fff8e9;
  --color-cream-deep: #f2e3ca;
  --color-gold: #f5bd47;
  --color-gold-light: #ffe7a9;
  --color-mist: #d8e8f2;
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Nunito Sans', Arial, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-logo: 'Merienda', cursive;

  /* Responsive typography for homepage and future pages */
  --font-display: clamp(3rem, 3.25rem + 1.55vw, 5.125rem);
  --font-h1: var(--font-display);
  --font-h2: clamp(1.875rem, 1.65rem + .55vw, 2.25rem);
  --font-h3: clamp(1rem, .93rem + .22vw, 1.125rem);
  --font-body-lg: clamp(1.0625rem, .98rem + .3vw, 1.25rem);
  --font-body: clamp(1rem, .94rem + .2vw, 1.125rem);
  --font-reading: clamp(1.125rem, 1.04rem + .27vw, 1.3rem);
  --font-small: clamp(1rem, .92rem + .18vw, 1.125rem);
  --font-caption: clamp(.875rem, .8rem + .15vw, 1rem);
  --font-nav: clamp(1rem, .92rem + .2vw, 1.125rem);
  --font-note: clamp(1.25rem, 1.08rem + .62vw, 1.75rem);

  /* Responsive layout primitives */
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --content-max-width: 100rem;
  --container-max: var(--content-max-width);
  --page-padding: var(--page-gutter);
  --section-space: clamp(1.75rem, 1.25rem + 1.45vw, 3rem);
  --card-gap: clamp(.75rem, .55rem + .55vw, 1.25rem);
  --content-width: 42rem;
  --radius-card: clamp(.875rem, .75rem + .28vw, 1.125rem);
  --radius-panel: clamp(1.25rem, 1.05rem + .48vw, 1.75rem);
  --button-height: clamp(3.25rem, 3.05rem + .45vw, 3.625rem);
  --button-padding-x: clamp(1.25rem, 1rem + .75vw, 1.875rem);
  --icon-sm: clamp(1.125rem, 1rem + .25vw, 1.375rem);
  --icon-md: clamp(2.75rem, 2.45rem + .65vw, 3.25rem);
  --shadow-card: 0 18px 32px rgba(0, 13, 31, .3), 0 0 0 1px rgba(255, 232, 185, .55);
  --shadow-panel: 0 24px 70px rgba(0, 13, 34, .35), 0 0 32px rgba(160, 211, 231, .18);

  /* Backward-compatible aliases used by the current homepage */
  --navy: var(--color-navy);
  --navy-soft: var(--color-navy-soft);
  --navy-bright: var(--color-navy-bright);
  --ink: var(--color-ink);
  --cream: var(--color-cream);
  --cream-deep: var(--color-cream-deep);
  --gold: var(--color-gold);
  --gold-light: var(--color-gold-light);
  --mist: var(--color-mist);
  --paper-shadow: var(--shadow-panel);
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --hand: var(--font-hand);
  --logo: var(--font-logo);
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 5.75rem; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-navy);
  color: #fff;
  font: 400 var(--font-body)/1.55 var(--font-sans);
}
button, input { font: inherit; }
button, a { color: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }
img { max-width: 100%; }

.shell,
.bembi-page-container {
  width: min(var(--content-max-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.brand {
  --brand-fawn-size: 4.5rem;
  --brand-wordmark-size: 2.45rem;
  --brand-tagline-size: var(--font-small);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: max-content;
}
.brand-fawn {
  width: var(--brand-fawn-size);
  height: var(--brand-fawn-size);
  display: grid;
  place-items: center;
  flex: none;
  filter: drop-shadow(0 .4rem .65rem rgba(0, 0, 0, .4));
}
.brand-fawn img { width: 100%; height: 100%; object-fit: contain; }
.brand-copy strong {
  display: block;
  color: #ffe2a0;
  font: 700 var(--brand-wordmark-size)/1 var(--font-logo);
  letter-spacing: -.045em;
  text-shadow: 0 .2rem 1.1rem rgba(255, 204, 106, .22);
}
.brand-copy small {
  display: block;
  margin-top: .3rem;
  color: #dce9f1;
  font-size: var(--brand-tagline-size);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  text-shadow: 0 .12rem .65rem rgba(0, 0, 0, .75);
}
.brand--header {
  --brand-fawn-size: clamp(4.25rem, 4rem + .65vw, 5rem);
  --brand-wordmark-size: clamp(2.25rem, 2.08rem + .55vw, 2.75rem);
}
.brand--footer {
  --brand-fawn-size: clamp(3.25rem, 3rem + .5vw, 3.75rem);
  --brand-wordmark-size: clamp(1.75rem, 1.6rem + .4vw, 2.125rem);
  --brand-tagline-size: var(--font-caption);
}
.brand--phone {
  --brand-fawn-size: 4rem;
  --brand-wordmark-size: 2rem;
  flex-direction: column;
  gap: 0;
}

.button {
  min-height: var(--button-height);
  padding-inline: var(--button-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  border-radius: 999px;
  font-size: var(--font-body);
  font-weight: 800;
  transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(255, 227, 160, .9);
  outline-offset: 3px;
}

/* Reusable content helpers for future Bembi pages */
.page-title { font: 700 var(--font-h1)/1 var(--font-serif); }
.section-title { font: 700 var(--font-h2)/1.1 var(--font-serif); }
.content-prose { width: min(100%, var(--content-width)); font-size: var(--font-body-lg); }
.card-surface { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.panel-surface { border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }

@media (max-width: 56.25rem) {
  .brand--header {
    --brand-fawn-size: 3.75rem;
    --brand-wordmark-size: 2rem;
    --brand-tagline-size: .75rem;
  }
}

@media (max-width: 35rem) {
  :root {
    --font-display: clamp(2.625rem, 2.15rem + 2vw, 3rem);
    --button-height: 3.25rem;
  }
  html { scroll-padding-top: 4.375rem; }
  .brand--header { --brand-fawn-size: 3.25rem; --brand-wordmark-size: 1.75rem; }
  .brand--header .brand-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}