@font-face {
  font-family: "Federo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/federo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/raleway-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/bitter-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
/* Fluid values interpolate between a 320px and a 1440px viewport. */
:root {
  /* The Vault TM theme (Graphical): gold buttons, mint accent bands */
  --ink: #231e15;
  --gold: #b49d35;        /* button fill, rules, text only on --ink */
  --gold-ink: #756622;    /* gold for text on light grounds */
  --mint: #f0f6ea;        /* light bands and active states */
  --mint-line: #cfdcc4;   /* decorative borders on mint */
  --mint-line-2: #98ab8a; /* header rules on mint */
  --sand: #f2f0ec;
  --line: #e6e2db;
  --line-2: #d5cfc3;
  --line-3: #a6a195;
  --muted: #575247;
  --white: #fff;
  --focus: var(--ink);

  --f-head: "Federo", Georgia, serif;
  --f-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --f-btn: "Bitter", Georgia, serif;

  --fs-body: clamp(1.0625rem, 1.009rem + 0.268vw, 1.25rem);   /* 17 -> 20px */
  --fs-small: clamp(0.9375rem, 0.902rem + 0.179vw, 1.0625rem); /* 15 -> 17px */
  --fs-btn: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);         /* 16 -> 18px */
  --fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-tile: clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem);

  --space-2xs: clamp(4px, 0.214rem + 0.179vw, 6px);
  --space-xs: clamp(8px, 0.429rem + 0.357vw, 12px);
  --space-s: clamp(12px, 0.643rem + 0.536vw, 18px);
  --space-m: clamp(16px, 0.786rem + 1.071vw, 28px);
  --space-l: clamp(24px, 1.143rem + 1.786vw, 44px);
  --space-xl: clamp(32px, 1.286rem + 3.571vw, 72px);
  --section-pad: clamp(48px, 7vw, 112px);
  --pad: clamp(20px, 8.34vw, 120px);

  --header-h: clamp(110px, 6.5vw + 93px, 187px);
  --header-compact: 72px;
  --header-space: var(--header-h); /* room the fixed header takes over the first band */
  --logo-w: clamp(200px, 30vw - 36px, 396px);
  --logo-compact: 180px;
  --chips-h: 0px;                  /* sticky chip row under the header (FAQ, below 1024px) */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-compact) + 8px); /* keeps anchors and focus clear of the fixed header */
}
html:has(.faq-index) { scroll-padding-top: calc(var(--header-compact) + var(--chips-h) + 8px); }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.55;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--gold-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: underline;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-px: 2.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 3.25em;
  padding: 0.85em var(--btn-px);
  border: 3px solid transparent;
  border-radius: 45px 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-btn);
  font-weight: 400;
  font-size: var(--fs-btn);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--ink); color: var(--gold); border-color: var(--gold); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--wide { --btn-px: clamp(2.2em, 7vw, 3.6em); }
.btn--wider { --btn-px: clamp(1.6em, 7vw, 4.4em); }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
}

/* ---------- Header ---------- */
/* No JS: the header scrolls away with the page (static on phones, so its open nav pushes the
   content down). With JS it is fixed and compacts once the first band has scrolled past. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 0 var(--pad);
  background: rgba(255, 255, 255, 0.71);
}
.js .site-header { position: fixed; }
.site-logo { display: block; flex: none; }
.site-logo img { width: var(--logo-w); height: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  padding: 4px 0;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.social a {
  display: inline-flex;
  color: inherit;
  padding: 2px;
}
.social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.site-nav .social { color: var(--ink); }
.site-nav .btn { --btn-px: 1.6em; min-height: 3.4em; white-space: nowrap; }

.menu-toggle { display: none; }

/* Compact state, toggled by site.js */
.site-header.is-compact {
  height: var(--header-compact);
  background: var(--white);
  box-shadow: 0 1px 0 var(--line-2), 0 6px 18px rgba(35, 30, 21, 0.08);
}
.site-header.is-compact .site-logo img { width: var(--logo-compact); }
.site-header.is-compact .site-nav .btn { min-height: 2.75em; padding-block: 0.5em; }

@media (prefers-reduced-motion: no-preference) {
  .js .site-header { transition: height 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
  .js .site-logo img { transition: width 0.2s ease; }
}

/* ---------- Bands ---------- */
.band { position: relative; overflow: hidden; }
.band__bg,
.band__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band__overlay { position: absolute; inset: 0; }
.band__inner { position: relative; }

.hero {
  --focus: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(min(62vw, 100svh), 560px);
  padding: calc(var(--header-space) + var(--space-xl)) var(--pad) var(--section-pad);
  color: var(--white);
  text-align: center;
}
.hero .band__overlay { background: rgba(0, 0, 0, 0.48); }
.hero .band__inner { max-width: 860px; }
.hero h1 { margin-bottom: 0.45em; }
.hero p { margin-bottom: 1.4em; }

.page-hero {
  display: flex;
  align-items: center;
  color: var(--ink);
  padding: calc(var(--header-space) + var(--space-l)) var(--pad) var(--space-xl);
}
.page-hero .band__overlay { background: var(--mint); }
.page-hero--about { min-height: max(49.5vw, 340px); }
.page-hero--about .band__overlay { opacity: 0.54; }
.page-hero--faq { min-height: min(40svh, 420px); justify-content: center; text-align: center; }
.page-hero--faq .band__overlay { opacity: 0.69; }

/* ---------- Home: event types ---------- */
.strip {
  background: var(--ink);
  color: var(--white);
  padding: var(--section-pad) 4vw;
}
.strip__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip figure { margin: 0; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.strip h2 {
  margin-top: var(--space-s);
  font-size: var(--fs-tile);
  line-height: 1.1;
  text-align: center;
}

/* ---------- Home: introduction ---------- */
.intro-band {
  padding: var(--section-pad) var(--pad);
  background: var(--mint);
}
.intro-band__inner {
  max-width: 58ch; /* about 70 characters a line */
  margin: 0 auto;
  text-align: center;
}
.intro-band h2 {
  margin-bottom: var(--space-m);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
}
.intro-band p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .intro-band p { text-align: left; }
}

/* ---------- Home: plan your event ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--white);
}
.split__img { position: relative; min-height: clamp(300px, 37.5vw, 640px); }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--section-pad) var(--pad);
  text-align: center;
}
.split__text h2 { margin-bottom: 0.5em; }
.split__text p { margin-bottom: 1.6em; max-width: 30em; }

/* ---------- Home: collage ---------- */
/* In-flow grid: phones stack the heading and a 2x2 mosaic, tablets split a photo band above
   and below the text, desktops stagger the four photos around a centred text cell. */
.florals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  padding: var(--section-pad) var(--pad);
  background: var(--white);
}
.florals > img { width: 100%; height: auto; object-fit: cover; }
.florals__body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-l);
  text-align: center;
}
.florals__body h2 { max-width: 16em; margin-bottom: 0.7em; }
.florals__actions {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
}
.florals__actions .btn { --btn-px: 2.4em; }
.florals > .florals__a, .florals > .florals__b { aspect-ratio: 10 / 7; }
.florals > .florals__c { aspect-ratio: 7 / 10; }
.florals > .florals__d { aspect-ratio: 7 / 10; object-position: 82% 50%; }

@media (min-width: 768px) {
  .florals {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-m);
    row-gap: var(--space-l);
    align-items: start;
  }
  .florals__body { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .florals > .florals__a { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
  .florals > .florals__b { grid-column: 8 / span 5; grid-row: 1; margin-top: var(--space-xl); }
  .florals > .florals__c { grid-column: 2 / span 4; grid-row: 3; }
  .florals > .florals__d { grid-column: 7 / span 6; grid-row: 3; align-self: center; aspect-ratio: 10 / 7; object-position: 50% 50%; }
}

@media (min-width: 1024px) {
  .florals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-l);
    row-gap: var(--space-l);
    max-width: calc(1600px + 2 * var(--pad));
    margin-inline: auto;
  }
  .florals__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .florals__body h2 { font-size: clamp(1.9rem, 0.6rem + 2.8vw, 3.25rem); }
  /* Stagger: % translates follow each photo's own size, so the group scales as one unit. */
  .florals > .florals__a { grid-column: 1; grid-row: 1; width: 82%; justify-self: end; align-self: end; translate: 0 -12%; }
  .florals > .florals__c { grid-column: 1; grid-row: 2; width: 100%; justify-self: start; align-self: start; }
  .florals > .florals__b { grid-column: 3; grid-row: 1; width: 100%; justify-self: start; align-self: start; margin-top: 0; translate: 0 30%; }
  .florals > .florals__d { grid-column: 3; grid-row: 2; width: 80%; justify-self: end; align-self: start; translate: 0 40%; }
}

/* ---------- Home: gallery ---------- */
.gallery { padding: var(--section-pad) 4vw; background: var(--white); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__grid li { grid-column: span 3; }
.gallery__grid li:nth-child(-n+3) { grid-column: span 4; }
.gallery__grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- About ---------- */
.about { padding: var(--section-pad) var(--pad); }
.about h2 {
  max-width: 22em;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
.about__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 28vw, 420px));
  gap: clamp(30px, 9vw, 130px);
  align-items: start;
}
.about__lead { font-weight: 700; }
.about__cols > img { width: 100%; }
.about__small { font-size: var(--fs-small); }
.about__more {
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-l);
  background: var(--mint);
  border-radius: 24px 0;
}
.about__more h2 {
  max-width: none;
  margin: 0 0 0.6em;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.15;
  text-align: left;
}
.about__more p { margin: 0; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); }

.faq-index {
  position: sticky;
  top: var(--header-compact);
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
}
.faq-index__list {
  display: flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 10px var(--pad);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.faq-index__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-small);
  white-space: nowrap;
  text-decoration: none;
}
.faq-index__list a:hover { background: var(--mint); }
.faq-index__list a[aria-current="true"] {
  background: var(--mint);
  border-color: var(--mint-line-2);
  font-weight: 700;
}
.faq-index__cta { display: none; }

.faq-section {
  padding: var(--section-pad) var(--pad);
}
.faq-section:nth-of-type(odd) { background: var(--mint); }
.faq-section__inner { max-width: 820px; }
.faq-section h2 { margin-bottom: var(--space-m); }
.faq-list { border-bottom: 1px solid var(--ink); }
.faq-item { border-top: 1px solid var(--ink); scroll-margin-top: var(--space-s); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  text-transform: none;
  text-wrap: pretty;
}
.faq-item .icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.faq-item .icon::before,
.faq-item .icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.faq-item .icon::before { left: 0; right: 0; top: 9px; height: 2px; }
.faq-item .icon::after { top: 0; bottom: 0; left: 9px; width: 2px; }
.faq-item[open] .icon::after { display: none; }
.faq-item__answer { padding: 0 0 var(--space-l); max-width: 68ch; }
.faq-item__answer p { margin: 0; }
.faq-cta { margin: var(--space-l) 0 0; }

.faq-closing {
  display: flex;
  justify-content: center;
  padding: var(--section-pad) var(--pad);
  background: var(--mint);
}

@media (max-width: 1023px) {
  :root { --chips-h: 61px; }
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns:
      [full-start] var(--pad) [index-start] minmax(220px, 19vw) [index-end]
      var(--space-xl) [content-start] minmax(0, 1fr) [content-end] var(--pad) [full-end];
  }
  .faq-index {
    grid-column: index;
    grid-row: 1 / span 4;
    align-self: start;
    top: calc(var(--header-compact) + var(--space-l));
    margin-top: var(--section-pad);
    padding: var(--space-m);
    border: 1px solid var(--line-2);
    border-radius: 24px 0;
  }
  .faq-index__list { flex-direction: column; gap: 4px; padding: 0; overflow: visible; }
  .faq-index__list a {
    width: 100%;
    min-height: 44px;
    border-color: transparent;
    border-radius: 8px;
    font-family: var(--f-head);
    font-size: 1.15rem;
    text-transform: uppercase;
  }
  .faq-index__cta { display: flex; width: 100%; margin-top: var(--space-m); --btn-px: 1em; }
  .faq-section {
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
  }
  .faq-section:nth-of-type(1) { grid-row: 1; }
  .faq-section:nth-of-type(2) { grid-row: 2; }
  .faq-section:nth-of-type(3) { grid-row: 3; }
  .faq-section:nth-of-type(4) { grid-row: 4; }
  .faq-section__inner { grid-column: content; }
}

/* ---------- Pricing ---------- */
.pricing { background: var(--mint); padding: calc(var(--header-space) + var(--space-xl)) var(--pad) var(--section-pad); }
.pricing__wrap { max-width: 720px; margin: 0 auto; }
.pricing h1 { text-align: center; margin-bottom: 0.6em; }
.pricing__intro p { font-size: var(--fs-small); }
.pricing__cta { text-align: center; margin: var(--space-l) 0 0; }
.pricing__cta--top { margin: var(--space-m) 0 0; }

.pricing-jump { margin-top: var(--space-l); }
.pricing-jump ul {
  display: flex;
  gap: var(--space-xs);
  margin: 0 calc(-1 * var(--pad));
  padding: 2px var(--pad) 8px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pricing-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--mint-line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-small);
  white-space: nowrap;
  text-decoration: none;
}
.pricing-jump a:hover,
.pricing-jump a[aria-current="true"] { background: var(--mint); border-color: var(--ink); }
.pricing-jump a[aria-current="true"] { font-weight: 700; }

@media (min-width: 1100px) {
  .pricing__wrap {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 720px) minmax(0, 1fr);
    column-gap: var(--space-l);
  }
  .pricing__wrap > * { grid-column: 2; }
  .pricing-jump {
    grid-column: 1;
    grid-row: 4 / span 2;
    align-self: start;
    justify-self: end;
    position: sticky;
    top: calc(var(--header-compact) + var(--space-l));
    width: min(100%, 280px);
    margin-top: 2.5rem;
    padding: var(--space-s);
    border: 1px solid var(--mint-line);
    border-radius: 24px 0;
    background: var(--white);
  }
  .pricing-jump ul { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .pricing-jump a {
    width: 100%;
    min-height: 40px;
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
    white-space: normal;
    line-height: 1.3;
    padding: 6px 12px;
  }
}

.pricing-sheet { margin-top: 2.5rem; font-size: 16px; }
.pricing-sheet h2 {
  font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.7rem);
  line-height: 1.2;
  margin: 2.2rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--gold);
  color: var(--ink);
  scroll-margin-top: var(--space-s);
}
.pricing-sheet h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: none;
  margin: 1.4rem 0 0.3rem;
}
.pricing-sheet .rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.pricing-sheet .rate-card {
  background: var(--white);
  border: 1px solid var(--mint-line);
  border-radius: 8px;
  padding: 14px 16px;
}
.pricing-sheet .rate-card .day { font-weight: 700; }
.pricing-sheet .rate-card .price { font-size: 1.3rem; font-weight: 700; color: var(--gold-ink); margin: 4px 0; }
.pricing-sheet .rate-card .note { font-size: 0.85rem; color: var(--muted); }
.pricing-sheet .inclusions {
  background: var(--white);
  border: 1px solid var(--mint-line);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0;
}
.pricing-sheet .inclusions strong { color: var(--gold-ink); }
.pricing-sheet .addon-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.pricing-sheet .addon-table th {
  text-align: left;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--mint-line-2);
}
.pricing-sheet .addon-table th:last-child { text-align: right; }
.pricing-sheet .addon-table td { padding: 10px 12px; border-bottom: 1px solid var(--mint-line); vertical-align: top; }
.pricing-sheet .addon-table td:last-child { text-align: right; font-weight: 700; color: var(--gold-ink); }
.pricing-sheet .addon-table td.amount { white-space: nowrap; }
.pricing-sheet .addon-table .desc { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.pricing-sheet .tax-note { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer {
  --focus: #fff;
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: var(--section-pad) var(--pad) var(--space-xl);
}
.site-footer a:not(.btn) { color: var(--white); }
.footer-seal { width: clamp(180px, 12vw + 120px, 247px); height: auto; margin: 0 auto var(--space-s); }
.site-footer .btn { --btn-px: 3.4em; }
.site-footer address { font-style: normal; margin: var(--space-l) 0 var(--space-xl); }
.footer-contact h2 { font-size: var(--fs-h2); margin-bottom: 0.5em; color: var(--gold); }
.footer-contact p { margin-bottom: 1.2em; }
.footer-legal { font-size: var(--fs-small); max-width: 36em; margin: 0 auto 1em; }
.site-footer .social { justify-content: center; }

/* ---------- 404 ---------- */
.notfound-page { background: var(--mint); }
.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  padding: var(--section-pad) var(--pad);
  text-align: center;
}
.notfound__logo img { width: clamp(200px, 22vw + 120px, 320px); }
.notfound h1 { margin-top: var(--space-l); }
.notfound p { margin: 0; }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-l);
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
}
.notfound__links a {
  display: inline-block;
  padding: 8px 4px;
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 5px;
}

/* ---------- Mobile contact bar ---------- */
.contact-bar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .site-header { padding: 0 24px; }
}

@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .about__cols { grid-template-columns: minmax(0, 1fr); }
  .about__cols img { width: 100%; max-width: 420px; margin: 0 auto; }
  .strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root {
    --header-h: clamp(84px, 10vw + 60px, 119px);
    --header-compact: 64px;
    --logo-w: clamp(176px, 40vw + 36px, 260px);
    --logo-compact: 150px;
  }
  html { scroll-padding-bottom: 72px; } /* contact bar (64px) + 8px */
  body { padding-bottom: 64px; }
  body.notfound-page { padding-bottom: 0; }

  .site-header { z-index: 100; padding: 0 20px; gap: 12px; }

  /* No JS: the header sits in the flow and its nav shows below the logo. */
  html:not(.js) { --header-space: 0px; }
  html:not(.js) .site-header {
    position: relative;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    background: var(--white);
  }
  html:not(.js) .site-header .site-nav { order: 3; width: 100%; padding: 0 0 24px; }

  .js .menu-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-toggle svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .menu-toggle .icon-close { display: none; }
  .menu-open .menu-toggle .icon-open { display: none; }
  .menu-open .menu-toggle .icon-close { display: block; }

  .site-nav { flex-direction: column; gap: 36px; }
  .nav-links { flex-direction: column; gap: 6px; }
  .nav-links a { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.1rem); line-height: 1.5; }
  .site-nav .social { gap: 20px; }
  .site-nav .btn { --btn-px: 2.4em; min-height: 3.6em; }

  .js .site-nav { display: none; }
  html.menu-open .site-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 90;
    justify-content: center;
    align-items: center;
    gap: 44px;
    background: var(--white);
    padding: var(--header-h) 20px 40px;
    overflow-y: auto;
  }
  .menu-open .site-header { background: var(--white); height: var(--header-h); box-shadow: none; }
  .menu-open .site-header .site-logo img { width: var(--logo-w); }
  .menu-open .site-logo,
  .menu-open .menu-toggle { position: relative; z-index: 100; }

  .hero { min-height: clamp(540px, 78svh, 650px); }
  .strip { padding: var(--section-pad) 20px; }
  .strip__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .split__img { min-height: 0; aspect-ratio: 3 / 2; }
  .split__text { padding-inline: 20px; }

  .gallery { padding: var(--section-pad) 20px; }
  .gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery__grid li, .gallery__grid li:nth-child(-n+3) { grid-column: auto; }

  .page-hero--about { min-height: 340px; }
  .about { padding-inline: 20px; }
  .faq-section { padding-inline: 20px; }
  .faq-index__list { padding-inline: 20px; }
  .pricing { padding-inline: 20px; }
  .pricing-jump ul { margin-inline: -20px; padding-inline: 20px; }
  .pricing-sheet .rate-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-sheet .addon-table th, .pricing-sheet .addon-table td { padding: 8px 6px; }

  .contact-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--ink);
    border-top: 1px solid #5b4d2c;
  }
  .contact-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    color: var(--white);
    font-size: 16px;
    text-decoration: none;
  }
  .contact-bar a + a { border-left: 1px solid #5b4d2c; }
  .contact-bar a:focus-visible { outline-color: #fff; outline-offset: -4px; }
  .contact-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
}

/* Phones: descriptions run the full row width under the label instead of a narrow first
   column. The table stays a table (no display changes); on price rows the description
   extends under the one-line price cell. */
@media (max-width: 479px) {
  .pricing-sheet .addon-table { table-layout: fixed; }
  .pricing-sheet .addon-table th:last-child { width: 8.25rem; }
  .pricing-sheet .addon-table td:first-child:has(+ td.amount) .desc { margin-right: -8.25rem; }
}

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

/* ---------- Print ---------- */
@media print {
  .site-header, .contact-bar, .skip-link, .faq-index, .pricing-jump, .faq-closing,
  .site-footer .social, .footer-seal, .site-footer .btn { display: none !important; }
  body { padding-bottom: 0; font-size: 11pt; }
  :root { --header-space: 0px; }
  .page-hero, .hero { min-height: 0; padding: 0 0 12pt; color: #000; }
  .band__bg, .band__overlay { display: none; }
  .faq-section, .pricing, .faq-closing { background: none; padding: 12pt 0; }
  .faq-item::details-content { content-visibility: visible; display: block; }
  .faq-item .icon { display: none; }
  .faq-item__answer { padding-bottom: 12pt; }
  .site-footer { background: none; color: #000; padding: 12pt 0; }
  .site-footer a:not(.btn) { color: #000; }
  .footer-contact h2 { color: #000; }
}