/* ============================================================
   Calyra House — Brand Design Tokens
   Palette A · Timeless Heritage
   ============================================================ */

:root {
  /* Color */
  --c-ink-navy: #1C2B3A;
  --c-ink-navy-soft: #24384b;
  --c-warm-ivory: #F6F0E7;
  --c-warm-ivory-dim: #efe7d9;
  --c-aged-brass: #B08D57;
  --c-aged-brass-light: #cba876;
  --c-terracotta: #C17B5D;
  --c-muted-taupe: #DCCFBC;
  --c-ink: #221f1c;
  --c-taupe-text: #93876f;
  --c-on-dark: #F6F0E7;
  --c-line: rgba(28, 43, 58, 0.14);
  --c-line-on-dark: rgba(246, 240, 231, 0.2);

  /* Type */
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  --fs-kicker: 0.8rem;
  --fs-small: 0.925rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.25rem;
  --fs-h3: clamp(1.4rem, 1.6vw, 1.75rem);
  --fs-h2: clamp(2rem, 3.4vw, 2.9rem);
  --fs-h1: clamp(2.6rem, 5vw, 4.2rem);
  --fs-hero: clamp(3.4rem, 9vw, 8rem);

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --space-8: 9.5rem;

  --content-max: 1280px;
  --content-pad: clamp(1.5rem, 5vw, 5rem);

  --ease-house: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@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;
  }
}

body {
  margin: 0;
  background: var(--c-warm-ivory);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, p, figure { margin: 0; }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  /* Every section-title kicker uses this class. Setting the size here
     directly (rather than letting it fall through from a parent wrapper
     like .section__head p) keeps all of them in sync by construction. */
  font-size: var(--fs-body-lg);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-aged-brass);
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
}

.kicker--dark { color: var(--c-terracotta); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-aged-brass);
  outline-offset: 3px;
}

/* ============================================================
   Seal motif — the recurring signature mark
   ============================================================ */

.seal {
  --seal-size: 44px;
  width: var(--seal-size);
  height: var(--seal-size);
  border-radius: 50%;
  border: 1px solid var(--c-aged-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.seal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--c-aged-brass);
  opacity: 0.55;
}
.seal span {
  font-family: var(--font-display);
  font-size: calc(var(--seal-size) * 0.42);
  font-weight: 600;
  color: var(--c-aged-brass);
  line-height: 1;
  transform: translateY(-1px);
}
.seal--on-dark { border-color: var(--c-aged-brass-light); }
.seal--on-dark::before { border-color: var(--c-aged-brass-light); }
.seal--on-dark span { color: var(--c-aged-brass-light); }

.divider-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--c-aged-brass);
}
.divider-seal .line {
  height: 1px;
  width: clamp(40px, 8vw, 120px);
  background: var(--c-line);
}
.divider-seal .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-aged-brass);
  transform: rotate(45deg);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 1rem 2.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: background-color 320ms var(--ease-house), color 320ms var(--ease-house), border-color 320ms var(--ease-house), transform 320ms var(--ease-house);
  text-decoration: none;
}
.btn-primary {
  background: var(--c-ink-navy);
  color: var(--c-warm-ivory);
  border-color: var(--c-ink-navy);
}
.btn-primary:hover { background: var(--c-ink-navy-soft); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--c-ink-navy);
  border-color: var(--c-ink-navy);
}
.btn-ghost:hover { background: var(--c-ink-navy); color: var(--c-warm-ivory); }
.btn-ghost--on-dark { color: var(--c-warm-ivory); border-color: var(--c-line-on-dark); }
.btn-ghost--on-dark:hover { background: var(--c-warm-ivory); color: var(--c-ink-navy); border-color: var(--c-warm-ivory); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ============================================================
   Nav
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-3) 0;
  transition: background-color 420ms var(--ease-house), padding 420ms var(--ease-house), border-color 420ms var(--ease-house), box-shadow 420ms var(--ease-house);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(246, 240, 231, 0.94);
  backdrop-filter: blur(10px);
  padding: var(--space-2) 0;
  border-bottom-color: var(--c-line);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--c-warm-ivory);
  transition: color 420ms var(--ease-house);
}
.site-nav.is-scrolled .brand-mark { color: var(--c-ink-navy); }
.brand-mark .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.brand-mark .seal { --seal-size: 34px; border-color: currentColor; }
.brand-mark .seal::before { border-color: currentColor; }
.brand-mark .seal span { color: currentColor; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-warm-ivory);
  opacity: 0.88;
  transition: opacity 300ms var(--ease-house), color 420ms var(--ease-house);
  position: relative;
}
.site-nav.is-scrolled .nav-links a { color: var(--c-ink-navy); }
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-house);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--c-warm-ivory);
  margin-right: -0.6rem;
}
.site-nav.is-scrolled .nav-toggle { color: var(--c-ink-navy); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--c-warm-ivory);
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 22, 30, 0.86) 0%, rgba(15, 22, 30, 0.34) 46%, rgba(15, 22, 30, 0.08) 68%),
    linear-gradient(100deg, rgba(15, 22, 30, 0.35) 0%, rgba(15, 22, 30, 0) 40%);
}
.hero__content {
  position: relative;
  width: 100%;
  padding: calc(var(--space-8) + 4rem) 0 var(--space-7);
}
.hero__seal {
  position: absolute;
  top: var(--space-7);
  right: var(--content-pad);
}
.hero__eyebrow {
  margin-bottom: var(--space-3);
  /* Back to the brand's Aged Brass Light kicker color. A flat shadow
     wasn't enough to keep it legible over the chandelier, so it uses the
     same letter-outline technique as the occasion card tags instead — a
     thin dark stroke traced around each character, which survives any
     part of the photo without needing to change the color. */
  color: var(--c-aged-brass-light);
  text-shadow:
    -1px -1px 0 rgba(8, 11, 16, 0.9),
    1px -1px 0 rgba(8, 11, 16, 0.9),
    -1px 1px 0 rgba(8, 11, 16, 0.9),
    1px 1px 0 rgba(8, 11, 16, 0.9),
    0 1px 6px rgba(8, 11, 16, 0.55);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  color: var(--c-muted-taupe);
  margin-top: var(--space-3);
}
.hero__lede {
  font-size: var(--fs-body-lg);
  max-width: 46ch;
  color: rgba(246, 240, 231, 0.86);
  margin-top: var(--space-4);
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  right: var(--content-pad);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 240, 231, 0.7);
}
.hero__scroll-cue .stem {
  width: 1px; height: 34px;
  background: rgba(246, 240, 231, 0.5);
}

/* ============================================================
   Positioning band (full navy)
   ============================================================ */

.band-navy {
  background: var(--c-ink-navy);
  color: var(--c-on-dark);
  padding: var(--space-8) 0;
}
.pitch__lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.28;
  max-width: 26ch;
  margin-top: var(--space-3);
}
.pitch__lede em {
  font-style: italic;
  color: var(--c-muted-taupe);
}
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.pitch-item {
  border-top: 1px solid var(--c-line-on-dark);
  padding-top: var(--space-3);
}
.pitch-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--c-aged-brass-light);
  margin-bottom: var(--space-2);
}
.pitch-item p { color: rgba(246, 240, 231, 0.86); }
.pitch__attribution {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-aged-brass-light);
  letter-spacing: 0.02em;
}

/* ============================================================
   Section scaffolding
   ============================================================ */

section[id] {
  scroll-margin-top: 104px;
}
@media (max-width: 780px) {
  section[id] { scroll-margin-top: 84px; }
}

.section-divider {
  /* 25% less vertical padding than --space-5 (48px -> 36px) so there's
     less scroll distance/dead space between sections. */
  padding: 2.25rem var(--content-pad);
}

.section {
  padding: var(--space-6) 0;
}
.section--tight { padding: var(--space-5) 0; }

/* Taupe section band — marks a clear break from the ivory sections around
   it. Aged Brass and Terracotta both fail text-contrast against this warm
   tan (≈2:1), so type on this background uses Ink Navy / Ink instead. */
.section--taupe {
  background: var(--c-muted-taupe);
}
.section--taupe .kicker {
  color: var(--c-ink-navy);
}
.section--taupe .section__head p:not(.kicker) {
  color: var(--c-ink);
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.section__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--c-ink-navy);
  margin-top: var(--space-2);
  line-height: 1.12;
}
.section__head p {
  margin-top: var(--space-3);
  font-size: var(--fs-body-lg);
  color: var(--c-taupe-text);
  max-width: 62ch;
}

/* Personality */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pillar {
  border-top: 2px solid var(--c-aged-brass);
  padding-top: var(--space-3);
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--c-ink-navy);
  margin-bottom: var(--space-2);
}
.pillar p { color: var(--c-ink); }

/* Occasions grid */
.occasions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.occasion-card {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  color: var(--c-warm-ivory);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.occasion-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 700ms var(--ease-house);
}
.occasion-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 22, 30, 0.88) 0%, rgba(15, 22, 30, 0.24) 55%, rgba(15, 22, 30, 0.05) 75%);
  z-index: 1;
}
.occasion-card:hover img { transform: scale(1.06); }
.occasion-card__body {
  position: relative;
  z-index: 2;
  padding: var(--space-4);
  width: 100%;
  /* Bottom-align the text block as a unit so the tag/title/copy start at
     the same height on every card, regardless of how many lines any one
     card's title or description happens to wrap to. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.occasion-card__index {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-aged-brass-light);
  /* A boxed chip and a soft corner vignette were both tried and rejected —
     the chip read as an obtrusive sticker, and the vignette didn't reach
     the far edge of longer words like "Milestone" without covering an
     equally obtrusive amount of the photo. A thin outline traced around
     each letter (the same technique subtitles use to stay legible over
     any footage) survives every photo in the set without framing the
     text in anything at all. */
  text-shadow:
    -1px -1px 0 rgba(8, 11, 16, 0.9),
    1px -1px 0 rgba(8, 11, 16, 0.9),
    -1px 1px 0 rgba(8, 11, 16, 0.9),
    1px 1px 0 rgba(8, 11, 16, 0.9),
    0 1px 6px rgba(8, 11, 16, 0.55);
}
.occasion-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  margin-bottom: 0.6rem;
  /* Reserves space for 2 lines (the longest titles wrap once) so shorter,
     one-line titles don't pull the rest of the block upward. */
  min-height: 3.2em;
  display: flex;
  align-items: flex-end;
}
.occasion-card p {
  font-size: var(--fs-small);
  color: rgba(246, 240, 231, 0.82);
  max-width: 34ch;
  line-height: 1.5;
  /* Reserves space for 4 lines, the longest any description currently
     wraps to, for the same reason as the h3 min-height above. */
  min-height: 6em;
}
.occasion-card__line {
  height: 1px;
  width: 0;
  background: var(--c-aged-brass-light);
  margin-top: var(--space-2);
  transition: width 420ms var(--ease-house);
}
.occasion-card:hover .occasion-card__line { width: 46px; }

/* Gallery mosaic — explicit named areas, not auto-placed spans, so every
   tile has a deliberate, deterministic position at every breakpoint. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 200px;
  grid-template-areas:
    "big  big  tr1 tr2"
    "big  big  mr1 mr2"
    "banner banner banner banner";
  gap: var(--space-3);
}
.gallery figure { overflow: hidden; border-radius: 2px; margin: 0; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-house);
}
.gallery figure:hover img { transform: scale(1.045); }
.gallery .g-big { grid-area: big; }
.gallery .g-tr1 { grid-area: tr1; }
.gallery .g-tr2 { grid-area: tr2; }
.gallery .g-mr1 { grid-area: mr1; }
.gallery .g-mr2 { grid-area: mr2; }
.gallery .g-banner { grid-area: banner; }

/* About / The House */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.about__portrait {
  position: relative;
}
.about__portrait img { border-radius: 2px; }
.about__portrait .seal {
  position: absolute;
  bottom: -22px; left: -22px;
  --seal-size: 76px;
  background: var(--c-warm-ivory);
  box-shadow: 0 8px 30px rgba(28, 43, 58, 0.18);
}
.about__portrait .seal span { font-size: 32px; }
.about__eyebrow {
  margin-bottom: var(--space-3);
}

/* Brass section band — same "you've moved on" break as .section--taupe.
   Aged Brass sits at a medium luminance, so light text (ivory) fails here
   just as badly as the brass/terracotta accents do; only the dark ink/navy
   tones read clearly against it. */
.section--brass {
  background: var(--c-aged-brass);
}
#about.section--brass .kicker {
  color: var(--c-ink);
}
#about.section--brass p.lede {
  color: var(--c-ink-navy);
}
#about.section--brass .about__signoff span {
  color: var(--c-ink);
}
.about h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--c-ink-navy);
  line-height: 1.12;
}
.about p.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--c-terracotta);
  margin-top: var(--space-3);
  line-height: 1.4;
}
.about .body-copy { margin-top: var(--space-4); color: var(--c-ink); }
.about .body-copy p + p { margin-top: var(--space-3); }
.about__signoff {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--c-ink-navy);
}
.about__signoff span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-taupe-text);
  margin-top: 0.35rem;
}

/* ============================================================
   Inquiry form
   ============================================================ */

.inquire { background: var(--c-warm-ivory-dim); }
.inquire__wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7);
}
.inquire__intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--c-ink-navy);
  line-height: 1.14;
  margin-top: var(--space-2);
}
.inquire__intro p {
  margin-top: var(--space-3);
  color: var(--c-taupe-text);
  font-size: var(--fs-body-lg);
  max-width: 40ch;
}
.inquire__meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-ink);
}
.inquire__meta a { color: var(--c-ink-navy); text-decoration: underline; text-underline-offset: 3px; }
.inquire__meta div + div { margin-top: 0.5rem; }

.form-card {
  background: var(--c-warm-ivory);
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: var(--space-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.field { margin-bottom: var(--space-3); }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-navy);
  margin-bottom: 0.5rem;
}
.field .hint {
  font-weight: 400;
  color: var(--c-taupe-text);
  font-size: 0.85rem;
  margin-left: 0.35rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-muted-taupe);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 220ms var(--ease-house);
}
.field input,
.field select {
  height: 52px;
  line-height: 1.2;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-aged-brass); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-ink-navy);
  outline: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--c-terracotta);
}
.field-error {
  color: var(--c-terracotta);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  display: none;
}
.field.has-error .field-error { display: block; }
.field-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.form-foot p {
  font-size: 0.85rem;
  color: var(--c-taupe-text);
  max-width: 32ch;
}
.form-status {
  font-size: var(--fs-small);
  color: var(--c-terracotta);
  margin-top: var(--space-2);
}

.confirmation {
  display: none;
  text-align: center;
  padding: var(--space-6) var(--space-3);
}
.confirmation.is-visible { display: block; }
.form-card.is-confirmed .form-body { display: none; }
.confirmation .seal {
  --seal-size: 64px;
  margin: 0 auto var(--space-4);
  animation: seal-press 620ms var(--ease-house);
}
@keyframes seal-press {
  0% { transform: scale(2.4); opacity: 0; }
  55% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); }
}
.confirmation h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--c-ink-navy);
}
.confirmation p {
  margin-top: var(--space-2);
  color: var(--c-taupe-text);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--c-ink-navy);
  color: rgba(246, 240, 231, 0.72);
  padding: var(--space-6) 0 var(--space-4);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-brand { color: var(--c-warm-ivory); }
.footer-brand .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
}
.footer-brand p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-muted-taupe);
  margin-top: 0.5rem;
}
.footer-cols { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.footer-col h4 {
  font-size: var(--fs-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-aged-brass-light);
  margin-bottom: var(--space-2);
}
.footer-col a, .footer-col span {
  display: block;
  font-size: var(--fs-small);
  color: rgba(246, 240, 231, 0.78);
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.footer-col a:hover { color: var(--c-warm-ivory); }
.site-footer .legal {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line-on-dark);
  font-size: 0.8rem;
  color: rgba(246, 240, 231, 0.5);
}

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-house), transform 800ms var(--ease-house);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Admin
   ============================================================ */

.admin-shell { min-height: 100vh; background: var(--c-warm-ivory); }
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-login form {
  width: 100%;
  max-width: 360px;
  padding: var(--space-5);
  border: 1px solid var(--c-line);
  background: #fff;
}
.admin-login h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--c-ink-navy);
  margin-bottom: var(--space-3);
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--content-pad);
  border-bottom: 1px solid var(--c-line);
}
.admin-header .wordmark { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-ink-navy); }
.admin-table-wrap { padding: var(--space-4) var(--content-pad) var(--space-7); overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 900px; }
table.admin-table th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-taupe-text);
  border-bottom: 1px solid var(--c-line);
  padding: 0.75rem 0.9rem;
}
table.admin-table td {
  border-bottom: 1px solid var(--c-line);
  padding: 0.85rem 0.9rem;
  vertical-align: top;
  color: var(--c-ink);
}
table.admin-table td.event-type { color: var(--c-ink-navy); font-weight: 600; }
.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--c-muted-taupe);
  color: var(--c-ink-navy);
}
.badge.sent { background: #d9e7dd; color: #2f5c3f; }
.empty-state { padding: var(--space-7) var(--content-pad); text-align: center; color: var(--c-taupe-text); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .pitch-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pillars { grid-template-columns: 1fr; gap: var(--space-4); }
  .occasions { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .about__portrait { max-width: 420px; }
  .inquire__wrap { grid-template-columns: 1fr; }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 240px 220px 220px 200px;
    grid-template-areas:
      "big big"
      "tr1 tr2"
      "mr1 mr2"
      "banner banner";
  }
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-ink-navy);
  color: var(--c-warm-ivory);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--content-pad);
  transform: translateY(-100%);
  transition: transform 420ms var(--ease-house);
}
.mobile-menu.is-open { display: flex; transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2.1rem;
  text-decoration: none;
  color: var(--c-warm-ivory);
}
.mobile-menu .btn { margin-top: var(--space-2); }
.mobile-menu-close {
  position: absolute;
  top: var(--space-3);
  right: calc(var(--content-pad) - 0.6rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-warm-ivory);
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { min-height: 92vh; }
  .hero__seal { top: var(--space-4); right: var(--space-3); }
  .hero__content { padding-top: var(--space-6); }
  .hero__scroll-cue { display: none; }
  .occasions { grid-template-columns: 1fr; }
  /* Single-column cards are narrower here than the desktop 3-up grid, so
     titles/descriptions wrap to more lines — reserve accordingly to keep
     every card's text block starting at the same height. */
  .occasion-card h3 { min-height: 4.8em; }
  .occasion-card p { min-height: 7.5em; }
  .form-row { grid-template-columns: 1fr; }
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "big"
      "tr1"
      "tr2"
      "mr1"
      "mr2"
      "banner";
  }
  .gallery figure { aspect-ratio: 4 / 3; }
  .site-footer .container { flex-direction: column; }
  .footer-cols { gap: var(--space-5); }
}