/* V2 Global Stylesheet — refactored + pruned (no visual changes intended)
   - Duplicate rules merged (pass 1)
   - Dead selectors pruned based on templates/scripts in this zip
   - Formatting normalized
*/

:root {
  --gutter: clamp(1.0rem, 4vw, 1.6rem);
    --accent-terracotta: #B4465E;
    --accent-terracotta-2: #E7A9B3;
    --accent-terracotta-hover: #A03B51;
    --accent-terracotta-deep: #6D1F2F;
    --bg-base: radial-gradient(1200px 900px at 22% 18%, rgba(231,169,179,0.28), rgba(231,169,179,0) 62%),
      radial-gradient(1200px 900px at 78% 20%, rgba(196,205,191,0.34), rgba(196,205,191,0) 64%),
      radial-gradient(900px 700px at 35% 92%, rgba(229,177,160,0.26), rgba(229,177,160,0) 58%),
      linear-gradient(180deg, #f7f0ea, #f2e6dd 45%, #f7f0ea 100%);
    --bg-soft: #f2e6dd;
    --bg-card: #ffffff;
    --bg-ink: #123637;
    --bg-ink-2: #0d2a2b;
    --accent-sage: #c4cdbf;
    --accent-sage-ink: #2f5b50;
    --accent-blush: #e5b1a0;
    --accent-mustard: #d9b36c;
    --text-main: #2f2722;
    --text-muted: #6f625a;
    --text-on-ink: rgba(255,255,255,0.92);
    --text-on-ink-muted: rgba(255,255,255,0.72);
    --divider: rgba(87, 70, 60, 0.18);
    --shadow-soft: 0 16px 40px rgba(60, 40, 30, 0.10);
    --shadow-soft-2: 0 10px 22px rgba(60, 40, 30, 0.08);
    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --content-maxw: min(90vw, 1100px);
    --text-base: clamp(1.05rem, 0.9rem + 0.35vw, 1.18rem);
    --text-sm: clamp(0.98rem, 0.88rem + 0.25vw, 1.06rem);
    --text-lg: clamp(1.15rem, 1.02rem + 0.55vw, 1.42rem);
    --h1: clamp(2.15rem, 1.55rem + 2.2vw, 3.6rem);
    --h2: clamp(1.65rem, 1.2rem + 1.4vw, 2.35rem);
    --h3: clamp(1.5rem, 1.05rem + 0.7vw, 1.55rem);
    --nav-blur: 18px;
    --nav-opacity: 0.70;
    --nav-contrast: 1.12;
    --transition: 180ms ease-out;
    --transition-fast: 180ms ease-out;
}

*, .wcdown, .wcdown *, .wcdown * {
  box-sizing: border-box;
}

html, body {
  margin: 0;
    padding: 0;
}

html, body, .page-after-hero, .page-after-hero .container, .page-after-hero__inner {
  overflow-x: hidden;
}

html {
  height: 100%;
    background: #f7f0ea;
}

body::before {
  content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-base);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

body {
  min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: "Nunito","DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text-main);
    background: transparent;
    position: relative;
    z-index: 0;
}

main,
.page-main,
.wrap,                  /* <-- critical for no-hero / wrap-based templates */
.section.page-after-hero{
  flex: 1 0 auto;
}


.site-footer {
  flex-shrink: 0;
}

a, .pay-detail a {
  color: inherit;
    text-decoration: none;
}

a:hover, .pay-detail a:hover, .pay-action:hover, a.link-out:hover, a.link-out:focus-visible {
  text-decoration: underline;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
    letter-spacing: -0.02em;
    margin: 0 0 0.45rem 0;
    font-weight: 400;
}

h1 {
  font-size: var(--h1);
    line-height: 1.05;
}

h2 {
  font-size: var(--h2);
    line-height: 1.25;
}

h3 {
  font-size: var(--h3);
    line-height: 1.18;
}

p {
  margin: 0 0 1.0rem 0;
    color: var(--text-main);
}

.lede {
  font-size: var(--text-lg);
    color: var(--text-muted);
}

.container {
  width: min(var(--content-maxw), calc(100% - (2 * var(--gutter))));
    margin: 0 auto;
}

@media (max-width: 740px) {
.container {
  width: calc(100% - 2.0rem);
}
}

.section {
  padding: 3.4rem 0;
}

.section--tight {
  padding: 2.2rem 0;
}

.hr {
  height: 1px;
    background: var(--divider);
    margin: 1.3rem 0;
}

.hr--soft {
  height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(87, 70, 60, 0.18),
      transparent
    );
    margin: 1.2rem 0;
}

.m0 {
  margin: 0;
    font-weight: 700;
}

.mt1, .carousel {
  margin-top: 1rem;
}

.mt2, .surface--flush + .surface {
  margin-top: 2rem;
}

.card {
  background: rgba(255,255,255,0.82);
    border: 1px solid rgba(87, 70, 60, 0.10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft-2);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card--solid {
  background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card-pad {
  padding: 1.55rem;
}

.btn-row {
  display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-row-left {
  display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: left;
}

.btn {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1rem;
    padding: 0.70rem 1.05rem;
    line-height: 1.1;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
    cursor: pointer;
    user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
    text-decoration: none;
}

.btn:active, .pill:active {
  transform: translateY(0px);
}

.btn--primary {
  background: var(--accent-terracotta);
    color: #fff;
    box-shadow: 0 16px 34px rgba(180, 70, 94, 0.30);
}

.btn--primary:hover, .login-page .btn--primary:hover {
  background: var(--accent-terracotta-hover);
}

.btn--ghost {
  background: rgba(255,255,255,0.62);
    border-color: rgba(87, 70, 60, 0.14);
    color: var(--text-main);
    box-shadow: var(--shadow-soft-2);
}

:root {
  --header-h: 86px;
}

@media (max-width: 720px) {
:root {
  --header-h: 78px;
}
}

.site-header {
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    pointer-events: none;
}

.site-header__bar {
  pointer-events: auto;
    margin: 0.9rem auto 0 auto;
    width: min(var(--content-maxw), calc(100% - (2 * var(--gutter))));
    background: rgba(255,255,255,var(--nav-opacity));
    border: 1px solid rgba(87, 70, 60, 0.16);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(var(--nav-blur)) saturate(1.25) contrast(var(--nav-contrast));
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.25) contrast(var(--nav-contrast));
}

@media (max-width: 740px) {
.site-header__bar {
  border-radius: 18px;
}
}

body {
  padding-top: var(--header-h);
}

.nav {
  display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
}

.brand {
  flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.0rem;
    padding-left: 0.0rem;
}

.brand img {
  width: 38px;
    height: 38px;
}

.wordmark {
  font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.96rem;
}

.nav__spacer {
  flex: 1 1 auto;
    min-width: 0;
}

.nav__right {
  flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.nav__list {
  display: flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.nav__link {
  display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: rgba(47,39,34,0.92);
    font-weight: 650;
    font-size: 1.02rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav__link:hover {
  background: rgba(255,255,255,0.62);
    text-decoration: none;
}

.nav-icon {
  display: inline-block;
    vertical-align: -0.12em;
}

.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;
}

.hamburger {
  display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.hamburger span {
  width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    display: block;
}

.nav__toggle, .nav--collapsed .nav__list, .faq__q::-webkit-details-marker {
  display: none;
}

.nav--collapsed .nav__toggle {
  display: inline-flex;
}

.drawer {
  position: fixed;
    inset: 0;
    background: rgba(18,54,55,0.30);
    display: none;
    z-index: 60;
}

.drawer[aria-hidden="false"], .modal[aria-hidden="false"], .modal.is-open {
  display: block;
}

.drawer__panel {
  position: absolute;
    top: 1.0rem;
    right: 1.0rem;
    width: min(420px, calc(100% - 2.0rem));
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(87, 70, 60, 0.16);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(22px) saturate(1.25) contrast(1.1);
    -webkit-backdrop-filter: blur(22px) saturate(1.25) contrast(1.1);
    padding: 1.0rem;
}

.drawer__head {
  display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.drawer__links {
  margin-top: 0.8rem;
    display: grid;
    gap: 0.35rem;
}

.drawer__links a {
  padding: 0.9rem 0.95rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(87, 70, 60, 0.12);
    font-weight: 700;
}

.hero-bleed {
  position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    --hero-h: 100vh;
    min-height: var(--hero-h);
    height: var(--hero-h);
    overflow: hidden;
    margin-top: calc(-1 * var(--header-h));
}

.hero-bleed--partial {
  --hero-h: 48vh;
}

@supports (height: 100dvh) {
.hero-bleed {
  --hero-h: 100dvh;
}

.hero-bleed--partial {
  --hero-h: 48dvh;
}
}

.hero-bleed__img {
  position: absolute;
    inset: 0;
    background: var(--hero-image, url("/assets/img/hero-placeholder.svg"))
                center / cover no-repeat;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.02);
}

.hero-bleed__shade {
  position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 30% 30%, rgba(255,255,255,0.88), rgba(255,255,255,0) 0%),
      linear-gradient(180deg, rgba(247,240,234,0.10), rgba(247,240,234,0.35));
}

.hero-bleed__shade::after {
  content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        700px 420px at 50% 50%,
        rgba(0,0,0,0.42),
        rgba(0,0,0,0.18) 55%,
        rgba(0,0,0,0.05) 75%,
        rgba(0,0,0,0.0) 100%
      );
    pointer-events: none;
}

.hero-bleed h1, .hero-bleed h2, .hero-bleed h3, .hero-bleed__sub, .hero-bleed__kicker {
  text-shadow: 0 1px 1px rgba(0,0,0,0.25),
      0 8px 24px rgba(0,0,0,0.18);
}

.hero-bleed__content {
  position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: var(--hero-h);
    padding-left: clamp(1.25rem, 1rem + 2.2vw, 3.5rem);
    padding-right: clamp(1.25rem, 1rem + 2.2vw, 3.5rem);
    transform: translateY(calc(var(--header-h) / 2));
}

.hero-bleed__content .container {
  width: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
}

.hero-bleed__stack {
  width: min(900px, 100%);
    margin: 0 auto;
}

.hero-bleed__kicker {
  font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.86rem;
    color: rgba(47,39,34,0.74);
    margin: 0 auto 0.65rem auto;
    text-align: center;
}

.hero-bleed__sub {
  color: rgba(47,39,34,0.78);
    font-size: var(--text-lg);
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-bleed__cta {
  margin-top: 1.2rem;
}

.hero-bleed__cta, .hero-bleed .btn-row {
  justify-content: center;
}

.page-after-hero {
  padding-top: 2.2rem;
}

.grid-2 {
  display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

@media (max-width: 900px) {
.grid-2 {
  grid-template-columns: 1fr;
}
}

.spotlight {
  display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 1.8rem;
    align-items: center;
}

.spotlight--right {
  grid-template-columns: 1.15fr 0.85fr;
}

@media (max-width: 900px) {
.spotlight, .spotlight--right {
  grid-template-columns: 1fr;
}
}

.spotlight__img {
  aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: var(--spotlight-image, url("/assets/img/card-placeholder.svg"))
      center / cover no-repeat;
    box-shadow: var(--shadow-soft-2);
    border: 1px solid rgba(87, 70, 60, 0.12);
}

.cards {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
}

@media (max-width: 980px) {
.cards {
  grid-template-columns: 1fr;
}
}

.card-media {
  aspect-ratio: 1 / 1;
    background: url("/assets/img/card-placeholder.svg") center/cover no-repeat;
    border-bottom: 1px solid rgba(87, 70, 60, 0.10);
}

.card-media {
  aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card-media img {
  width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.surface {
  background: rgba(255,255,255,0.72);
    border: 1px solid rgba(87, 70, 60, 0.12);
    border-radius: 28px;
    box-shadow: var(--shadow-soft-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: clamp(1.25rem, 0.9rem + 1.2vw, 2.0rem);
}

.surface--center, .center, .footer-content {
  text-align: center;
}

.text-block {
  max-width: 78ch;
}

.text-block--center {
  text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.highlight {
  border-radius: 28px;
    padding: 2.2rem;
    border: 1px solid rgba(87, 70, 60, 0.12);
    box-shadow: var(--shadow-soft-2);
}

.highlight--terracotta-light {
  background: rgba(231,169,179,0.18);
}

.highlight--sage-light {
  background: rgba(196,205,191,0.22);
}

.highlight--terracotta-dark {
  background: linear-gradient(180deg, rgba(180,70,94,0.96), rgba(109,31,47,0.96));
    color: #fff;
    border-color: rgba(255,255,255,0.10);
}

.highlight--sage-dark {
  background: linear-gradient(180deg, rgba(47, 91, 80, 0.96), rgba(22, 55, 48, 0.96));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.10);
}

.highlight--terracotta-dark p, .highlight--sage-dark p {
  color: rgba(255,255,255,0.86);
}

.gallery, .form-grid, .gift-confirm #cform .form-grid {
  display: grid;
    gap: 1rem;
}

.gallery__main {
  position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(87, 70, 60, 0.12);
    box-shadow: var(--shadow-soft-2);
    background: #fff;
}

.gallery__main img {
  width: 100%;
    height: min(520px, 55vh);
    object-fit: cover;
    display: block;
}

.gallery__controls {
  position: absolute;
    inset: 14px 14px auto auto;
    display: flex;
    gap: 0.6rem;
    z-index: 20;
}

.gallery__thumbs {
  display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.7rem;
}

@media (max-width: 900px) {
.gallery__thumbs {
  grid-template-columns: repeat(3, 1fr);
}
}

.thumb {
  border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(87, 70, 60, 0.12);
    cursor: pointer;
    background: #fff;
}

.thumb img {
  width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.modal {
  position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
    background: rgba(18,54,55,0.55);
}

.modal__panel {
  position: absolute;
    inset: 3.2rem 3.2rem;
    background: rgba(255,255,255,0.92);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

@media (max-width: 740px) {
.modal__panel {
  inset: 1.2rem;
}
}

.modal__img {
  width: 100%;
    height: 100%;
    object-fit: contain;
    background: #101314;
}

.modal__close {
  position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.82);
    display: grid;
    place-items: center;
    cursor: pointer;
}

html.modal-open, body.modal-lock {
  overflow: hidden;
}

html.modal-open .site-header {
  z-index: 10;
}

.footer-divider {
  width: 100%;
    height: 0px;
    background: url("/assets/img/footer-divider.svg") center/cover no-repeat;
    transform: translateY(1px);
}

.site-footer {
  background: var(--bg-ink);
    color: var(--text-on-ink);
    padding: 2.6rem 0 2.2rem 0;
}

.site-footer a {
  color: var(--text-on-ink);
}

.footer-title {
  font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    margin-bottom: 0.8rem;
}

.footer-links {
  display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
}

.footer-links a {
  padding: 0.35rem 0;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}

.hero-bleed h1, .hero-bleed h2, .hero-bleed h3, .hero-bleed p, .hero-bleed .lede {
  color: rgba(255,255,255,0.96);
}

.hero-bleed__kicker {
  color: rgba(255,255,255,0.82);
}

.hero-bleed__sub {
  color: rgba(255,255,255,0.88);
}

.hero-bleed .btn--ghost {
  background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}

.hero-bleed .btn--ghost:hover {
  background: rgba(255,255,255,0.28);
}

.carousel__viewport {
  overflow: hidden;
    border-radius: var(--radius-xl);
}

.carousel__track {
  display: flex;
    gap: 1.3rem;
    align-items: stretch;
    transition: transform var(--transition);
    will-change: transform;
}

.carousel__slide {
  flex: 0 0 calc((100% - (2 * 1.3rem)) / 3);
    min-width: 0;
}

@media (max-width: 980px) {
.carousel__slide {
  flex-basis: calc((100% - 1.0rem) / 2);
}

.carousel__track {
  gap: 1.0rem;
}
}

@media (max-width: 740px) {
.carousel__slide {
  flex-basis: 100%;
}
}

.carousel__slide > .card {
  width: 100%;
    height: 100%;
}

.carousel__controls {
  display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.pill {
  display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(87, 70, 60, 0.14);
    background: rgba(255,255,255,0.72);
    box-shadow: var(--shadow-soft-2);
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.pill:hover {
  transform: translateY(-1px);
}

.banner-text {
  padding: 2.2rem 0 0.6rem 0;
}

.banner-text .big {
  font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.0rem, 1.3rem + 2.3vw, 3.1rem);
    line-height: 1.05;
}

.small-box {
  width: min(560px, 100%);
    margin: 0 auto;
}

.couple-story {
  display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.4rem;
    align-items: stretch;
    margin-top: 1.2rem;
}

.couple-photo {
  display: flex;
    align-items: center;
    justify-content: center;
}

.couple-photo__mat {
  width: clamp(140px, 18vw, 190px);
    aspect-ratio: 1/1;
    border-radius: 999px;
    padding: 10px;
    background: rgba(255,255,255,0.78);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(227,211,200,0.9);
}

.couple-photo__mat img {
  width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
    display: block;
}

.social-row {
  display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.social-pill {
  width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(180,70,94,0.24);
    background: rgba(255,255,255,0.6);
    transition: transform var(--transition-fast), background var(--transition-fast);
    color: var(--accent-terracotta);
}

.social-pill:hover {
  transform: translateY(-1px);
    background: rgba(255,255,255,0.82);
}

@media (max-width: 900px) {
.couple-story {
  grid-template-columns: 1fr;
}

.couple-photo {
  order: -1;
}

.couple-photo__mat {
  width: clamp(160px, 46vw, 210px);
}
}

.code-sample {
  margin-top: 1rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(87,70,60,0.12);
    background: rgba(255,255,255,0.72);
}

.code-sample summary {
  cursor: pointer;
    padding: 0.95rem 1.1rem;
    font-weight: 800;
}

.code-sample pre {
  margin: 0;
    padding: 1rem 1.1rem 1.2rem;
    overflow: auto;
    font-size: 0.95rem;
    line-height: 1.55;
    border-top: 1px solid rgba(87,70,60,0.12);
    background: rgba(255,255,255,0.78);
}

.code-sample code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.footer-links {
  display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.85em;
}

.social-pill svg {
  display: block;
    width: 1em;
    height: 1em;
}

.hero-bleed__img::after {
  content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(170,140,115,0.18),
        rgba(120,95,80,0.12)
      );
    mix-blend-mode: soft-light;
    pointer-events: none;
}

:root {
  --hero-tone: saturate(0.62) sepia(0.24) hue-rotate(-26deg) contrast(1.10) brightness(0.90);
}

.hero-bleed__img, .hero-bleed__img::before, .hero-bleed__img::after, .hero-bleed--partial, .hero-bleed.hero-bleed--partial {
  filter: var(--hero-tone);
}

.modal {
  position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.modal__backdrop {
  position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(18, 16, 14, 0.72),
        rgba(18, 16, 14, 0.78)
      );
}

.modal__dialog {
  position: relative;
    width: min(960px, calc(100% - 3rem));
    height: calc(100dvh - 3rem);
    margin: 1.5rem auto;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.90);
    border-radius: 22px;
    border: 1px solid rgba(87,70,60,0.18);
    box-shadow: var(--shadow-soft-2);
    overflow: hidden;
}

@media (max-width: 740px) {
.modal__dialog {
  width: 100%;
      height: 100dvh;
      margin: 0;
      border-radius: 0;
}
}

.modal__close {
  position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(87, 70, 60, 0.16);
    cursor: pointer;
}

.modal__body {
  flex: 1;
    padding: clamp(2.2rem, 4vw, 3.4rem)
      clamp(1.6rem, 4vw, 3.4rem)
      calc(clamp(2.2rem, 4vw, 3.4rem) + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.rsvp-v2-form select + label, .rsvp-v2-form input + label, .rsvp-v2-form textarea + label {
  margin-top: 0;
}

.modal__intro {
  max-width: 52ch;
    margin-bottom: 2rem;
}

.modal.is-open .modal__dialog {
  animation: modalTakeoverIn 220ms ease-out both;
}

@keyframes modalTakeoverIn {
  from {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
}

.modal .label, .login-page .label {
  font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: rgba(47,39,34,0.72);
}

.login-page {
  font-family: "Nunito","DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.login-page .login-subtitle {
  margin-top: 0.15rem;
    font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.4rem);
    color: rgba(111,98,90,1);
}

.login-page.page-main {
  min-height: calc(100dvh - var(--header-h, 84px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.2rem, 2.2vw, 2rem) 0;
}

.login-page .page-box {
  width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 var(--gutter);
}

.login-page .login-card {
  width: min(90vw, 720px);
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(87,70,60,0.18);
    border-radius: 22px;
    box-shadow: 0 18px 35px rgba(90,63,46,0.12);
    padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    text-align: center;
    transform: translateY(3vh);
}

.login-page .form {
  margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.login-page .field {
  width: 100%;
    max-width: 420px;
    text-align: left;
    display: grid;
    gap: 0.35rem;
}

.login-page .input {
  width: 100%;
    appearance: none;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(87,70,60,0.22);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    font: inherit;
    outline: none;
}

.login-page .input:focus {
  border-color: rgba(180,70,94,0.55);
    box-shadow: 0 0 0 4px rgba(231,169,179,0.18);
}

.login-page .actions {
  margin-top: 1.4rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.login-page .btn {
  border-radius: 14px;
    padding: 0.68rem 1.10rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}

.login-page .btn--primary {
  background: var(--accent-terracotta);
    color: #fff;
    box-shadow: 0 14px 26px rgba(180,70,94,0.22);
}

.login-page .btn--ghost {
  background: rgba(255,255,255,0.75);
    border-color: rgba(87,70,60,0.22);
    color: rgba(47,39,34,1);
}

.login-page .btn--ghost:hover {
  background: rgba(255,255,255,0.90);
}

.login-page .help {
  margin-top: 1rem;
    font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.05rem);
    color: rgba(111,98,90,0.9);
}

.pay-list {
  list-style: none;
    padding: 0;
    margin: 0.85rem 0 0.85rem;
    display: grid;
    gap: 0;
}

.pay-item {
  display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid rgba(87,70,60,0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pay-list > .pay-item:last-child {
  border-bottom: 0;
}

.pay-item--primary {
  border-color: rgba(87,70,60,0.14);
    box-shadow: none;
}

.pay-item * {
  margin: 0;
}

.pay-icon {
  display: grid;
    place-items: center;
}

.pay-icon svg {
  width: 22px;
    height: 22px;
    display: block;
}

.pay-meta {
  display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.pay-meta strong {
  font-weight: 700;
    line-height: 1.15;
}

.pay-detail {
  font-size: 0.88rem;
    line-height: 1.15;
    opacity: 0.78;
}

.pay-detail code, .pay-detail a {
  font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.pay-detail code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: transparent;
}

.pay-action, .pay-action--hint {
  font-size: 0.88rem;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
    opacity: 0.85;
}

.pay-action--hint {
  opacity: 0.45;
    pointer-events: none;
}

.pay--zelle      .pay-icon {
  color: #6D1ED4;
}

.pay--venmo      .pay-icon {
  color: #3D95CE;
}

.pay--applecash  .pay-icon {
  color: #111827;
}

.pay--cashapp    .pay-icon {
  color: #00D632;
}

.form-v2 {
  font-family: "Nunito","DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text-main);
}

.form-row, .gift-confirm #cform .form-row {
  display: grid;
    gap: 0.45rem;
}

.form-row label {
  font-weight: 750;
    letter-spacing: 0.01em;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
  width: 100%;
    padding: 0.95rem 1.0rem;
    border-radius: 16px;
    border: 1px solid rgba(87, 70, 60, 0.18);
    background: rgba(255,255,255,0.86);
    box-shadow: 0 10px 18px rgba(60,40,30,0.06);
    font-size: 1.03rem;
    outline: none;
    transition: border-color var(--transition),
      box-shadow var(--transition),
      background var(--transition);
}

textarea {
  min-height: 140px;
    resize: vertical;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(199,108,71,0.55);
    box-shadow: 0 0 0 4px rgba(199,108,71,0.16);
    background: rgba(255,255,255,0.96);
}

.help-text, .general__hint {
  font-size: var(--text-sm);
    color: var(--text-muted);
}

.radio-row {
  display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(87, 70, 60, 0.12);
}

.radio-row input {
  margin-top: 0.25rem;
}

.radio-row input[type="radio"] {
  width: 22px;
    height: 22px;
    flex: 0 0 22px;
    accent-color: var(--accent-terracotta);
}

@media (max-width: 520px) {
.radio-row input[type="radio"] {
  width: 24px;
      height: 24px;
      flex-basis: 24px;
}
}

.is-error input, .is-error select, .is-error textarea {
  border-color: rgba(196, 48, 48, 0.55);
    box-shadow: 0 0 0 4px rgba(196,48,48,0.12);
}

.error-text {
  color: #a12a2a;
    font-weight: 700;
    font-size: var(--text-sm);
}

select {
  appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 3.0rem;
    background-image: linear-gradient(45deg, transparent 50%, rgba(58,47,40,0.85) 50%),
      linear-gradient(135deg, rgba(58,47,40,0.85) 50%, transparent 50%),
      linear-gradient(to right, rgba(87,70,60,0.12), rgba(87,70,60,0.12));
    background-position: calc(100% - 1.35rem) calc(50% - 2px),
      calc(100% - 1.05rem) calc(50% - 2px),
      calc(100% - 2.6rem) 50%;
    background-size: 7px 7px,
      7px 7px,
      1px 22px;
    background-repeat: no-repeat;
}

.gift-confirm #cform {
  font-family: "Nunito","DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: var(--text-base);
    line-height: 1.65;
}

.gift-confirm #cform label, .gift-confirm #cform .label {
  font: inherit !important;
    font-weight: 750 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: inherit !important;
}

.gift-confirm #cform input[type="text"], .gift-confirm #cform input[type="email"], .gift-confirm #cform input[type="password"], .gift-confirm #cform input[type="tel"], .gift-confirm #cform input[type="url"], .gift-confirm #cform input[type="number"], .gift-confirm #cform input[type="date"], .gift-confirm #cform input[type="time"], .gift-confirm #cform select, .gift-confirm #cform textarea {
  width: 100%;
    padding: 0.95rem 1.0rem;
    border-radius: 16px;
    border: 1px solid rgba(87, 70, 60, 0.18);
    background: rgba(255,255,255,0.86);
    box-shadow: 0 10px 18px rgba(60,40,30,0.06);
    font: inherit !important;
    line-height: 1.35;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    display: block;
    appearance: none;
}

.gift-confirm #cform input:focus, .gift-confirm #cform select:focus, .gift-confirm #cform textarea:focus {
  border-color: rgba(180,70,94,0.55);
    box-shadow: 0 0 0 4px rgba(231,169,179,0.18);
    background: rgba(255,255,255,0.96);
}

.gift-confirm #cform button, .gift-confirm #cform input[type="submit"] {
  font: inherit !important;
    border-radius: 14px;
    padding: 0.70rem 1.05rem;
    line-height: 1.1;
    font-weight: 650;
}

.gift-confirm #cform .btn, .gift-confirm #cform button, .gift-confirm #cform input[type="submit"], .gift-confirm #cform a.btn {
  font-size: 1rem !important;
    letter-spacing: 0.06em;
}

.gift-confirm #cform .btn, .gift-confirm #cform button.btn, .gift-confirm #cform a.btn {
  font-family: "Nunito","DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding: 0.70rem 1.05rem !important;
    line-height: 1.1 !important;
    min-height: 0 !important;
    height: auto !important;
}

#gift-modal .modal__dialog, #gift-modal .modal__panel {
  max-height: calc(100dvh - 3rem);
    overflow: hidden;
}

#gift-modal .modal__body {
  max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#gift-modal {
  overscroll-behavior: contain;
}

.surface--flush {
  padding: 0;
    overflow: hidden;
}

.surface__hero {
  display: block;
    position: relative;
    border-bottom: 1px solid rgba(87, 70, 60, 0.12);
    cursor: zoom-in;
}

.surface__hero img {
  width: 100%;
    height: min(420px, 52vh);
    object-fit: cover;
    display: block;
}

.surface__body {
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2.0rem);
}

.poi-grid {
  display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.0rem;
}

@media (max-width: 900px) {
.poi-grid {
  grid-template-columns: 1fr;
}
}

.poi-grid .card-pad p, .ttext p {
  margin: 0;
    line-height: 1.35;
}

.text-block--center + .surface {
  margin-top: 0.8rem;
}

.surface__body {
  padding-top: 0.85rem;
}

.surface__body .poi-grid {
  margin-top: 0.5rem;
}

@media (max-width: 820px) {
.tcontent {
  grid-template-columns: 28px 1fr;
      gap: 0.75rem;
}

.ticon {
  width: 40px;
      height: 40px;
}
}

.timeline {
  margin-top: 1.0rem;
    display: grid;
    gap: 1.0rem;
}

.titem {
  display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.0rem;
    align-items: start;
}

.tmeta {
  position: sticky;
    top: calc(var(--header-h) + 1.0rem);
    align-self: start;
    text-align: right;
}

.ttime {
  font-weight: 850;
    letter-spacing: 0.02em;
}

.tchip {
  margin-top: 0.35rem;
    display: inline-block;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.tcard {
  position: relative;
}

@media (max-width: 820px) {
.titem {
  grid-template-columns: 1fr;
}

.tmeta {
  position: relative;
      top: auto;
      text-align: left;
      display: flex;
      gap: 0.6rem;
      align-items: baseline;
}

.tchip {
  margin-top: 0;
}
}

.titem {
  display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.0rem;
    align-items: center;
}

.tmeta {
  text-align: right;
    align-self: center;
}

.ttime {
  font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0;
}

.tchip {
  margin-top: 0.25rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.15;
}

.tcontent {
  display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0.95rem;
    align-items: center;
}

.ticon {
  width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    border-radius: 0;
    color: var(--accent-terracotta);
}

.ticon svg {
  width: 40px;
    height: 40px;
    display: block;
}

.ttext h3 {
  line-height: 1.15;
}

.tcard {
  background: rgba(255,255,255,0.72);
    border: 1px solid rgba(87, 70, 60, 0.12);
    border-radius: 28px;
    box-shadow: var(--shadow-soft-2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tcard .card-pad {
  padding: 1.35rem;
}

@media (max-width: 820px) {
.titem {
  grid-template-columns: 1fr;
      align-items: stretch;
}

.tmeta {
  text-align: left;
      display: flex;
      gap: 0.6rem;
      align-items: baseline;
}

.tchip {
  margin-top: 0;
}

.tcontent {
  grid-template-columns: 38px 1fr;
      gap: 0.85rem;
}

.ticon, .ticon svg {
  width: 40px;
      height: 40px;
}
}

.faq {
  padding: 0.35rem 0;
}

.faq__q {
  list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 0.65rem 0;
}

.faq__q::marker {
  content: "";
}

.faq__q::after {
  content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

details[open] > .faq__q::after {
  transform: rotate(-135deg);
    opacity: 0.85;
}

.faq__a, .wcdown {
  padding: 0;
}

.surface--flush > .surface__hero {
  display: inline-block;
    max-width: 100%;
    width: fit-content;
    margin-inline: auto;
    line-height: 0;
}

.surface--flush > .surface__hero > img {
  display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.media-tiles {
  display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

@media (max-width: 760px) {
.media-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.media-tile {
  appearance: none;
    border: 1px solid var(--stroke, rgba(0,0,0,.10));
    background: var(--bg-card, #fff);
    border-radius: 16px;
    padding: .55rem;
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: .5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.media-tile:hover {
  transform: translateY(-1px);
    box-shadow: 0 14px 38px rgba(0,0,0,.07);
}

.media-tile img {
  width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

@media (max-width: 760px) {
.media-tile img {
  height: 96px;
}
}

.media-tile__label {
  font: inherit;
    font-size: .95rem;
    line-height: 1.2;
    color: var(--text, #1d1d1f);
    opacity: .95;
    text-align: center;
}

.media-tile[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-terracotta, #B4465E) 55%, rgba(0,0,0,0));
    box-shadow: 0 16px 44px rgba(180,70,94,.12);
}

.media-tile[aria-selected="true"] .media-tile__label {
  color: var(--accent-terracotta, #B4465E);
}

.media-tile:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-terracotta, #B4465E) 35%, white);
    outline-offset: 3px;
}

a.link-out {
  font: inherit;
    font-weight: 500;
    color: var(--accent-terracotta, #B4465E);
    text-decoration: none;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
    transition: text-decoration .15s ease;
}

a.link-out::before {
  content: "↗";
    display: inline-block;
    margin-right: .35em;
    font-size: .85em;
    opacity: .75;
    transform: translateY(-.05em);
}

a.link-out:focus-visible {
  outline: none;
    box-shadow: 0 0 0 3px rgba(180, 70, 94, .25);
}

a.link-out--inline {
  color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: .05em;
    text-underline-offset: .14em;
    opacity: .95;
}

a.link-out.link-out--inline {
  color: inherit !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-thickness: .05em !important;
    text-underline-offset: .14em !important;
    opacity: .95 !important;
}

a.link-out.link-out--inline::before, a.link-out.link-out--inline::after {
  content: none !important;
    display: none !important;
}

a.link-out.link-out--inline:hover, a.link-out.link-out--inline:focus-visible {
  color: inherit !important;
    text-decoration-thickness: .09em !important;
    opacity: 1 !important;
}

a.link-out.link-out--inline {
  color: inherit !important;
    font-weight: 600 !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 0.06em !important;
    text-underline-offset: 0.14em !important;
    text-decoration-color: rgba(47,39,34,0.20) !important;
    text-decoration-skip-ink: auto;
    opacity: .98 !important;
}

a.link-out.link-out--inline:hover, a.link-out.link-out--inline:focus-visible {
  text-decoration-color: rgba(47,39,34,0.45) !important;
    text-decoration-thickness: 0.09em !important;
}

.rsvp-v2-form {
  font-family: var(--font-body, inherit);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-main);
}

.rsvp-v2-form .form-grid {
  display: grid;
    gap: 1.05rem;
}

.rsvp-v2-form .form-row {
  display: grid;
    gap: 0.35rem;
    margin: 0;
}

.rsvp-v2-form label {
  font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

.rsvp-v2-form .help-text {
  margin: 0;
    font-size: var(--text-sm, 0.92rem);
    color: var(--text-muted);
}

.rsvp-v2-form input[type="text"], .rsvp-v2-form input[type="email"], .rsvp-v2-form textarea, .rsvp-v2-form select {
  width: 100%;
    margin: 0;
}

.rsvp-v2-form .radio-row {
  display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.2rem;
    align-items: center;
}

.rsvp-v2-form .radio-row label {
  font-weight: 650;
}

.rsvp-v2-form .meal-msg {
  display: none;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    font-size: var(--text-sm, 0.92rem);
    color: var(--text-main);
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.08);
}

.rsvp-v2-form .meal-msg--warn {
  border-color: rgba(217, 179, 108, 0.55);
    background: rgba(217, 179, 108, 0.12);
    text-align: center;
}

.rsvp-v2-form .meal-msg--ok {
  border-color: rgba(196, 205, 191, 0.75);
    background: rgba(196, 205, 191, 0.22);
    text-align: center;
}

.rsvp-v2-mealhead {
  display: grid;
    grid-template-columns: 351px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.9rem;
    max-width: 100%;
}

.rsvp-v2-mealhead__img {
  width: 351px;
    max-width: 42vw;
    height: auto;
    display: block;
    margin: 0;
}

.rsvp-v2-mealhead__text {
  text-align: left;
}

.rsvp-v2-mealhead__text h3 {
  margin: 0;
    text-align: left;
}

@media (max-width: 640px) {
.rsvp-v2-mealhead {
  grid-template-columns: 1fr;
      text-align: center;
      justify-items: center;
}

.rsvp-v2-mealhead__text, .rsvp-v2-mealhead__text h3 {
  text-align: center;
}
}

.rsvp-v2-mealhead {
  margin-left: auto;
    margin-right: auto;
}

.rsvp-v2-form .hr--soft {
  margin: 1.1rem 0;
}

#meal_block .rsvp-v2-mealhead {
  display: grid !important;
    grid-template-columns: 351px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    width: min(720px, 100%) !important;
    margin: 0 auto 0.9rem !important;
}

#meal_block .rsvp-v2-mealhead__text {
  text-align: left !important;
}

@media (max-width: 640px) {
#meal_block .rsvp-v2-mealhead {
  grid-template-columns: 1fr !important;
      justify-items: center !important;
      text-align: center !important;
}

#meal_block .rsvp-v2-mealhead__text {
  text-align: center !important;
}
}

#meal_block .form-grid, #meal_block .form-row {
  justify-items: stretch !important;
    text-align: left !important;
}

#meal_block .rsvp-v2-mealhead {
  display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 0.9rem !important;
}

#meal_block .rsvp-v2-mealhead__img {
  width: 351px !important;
    max-width: 42vw !important;
    height: auto !important;
}

#meal_block .rsvp-v2-mealhead__text {
  text-align: left !important;
    max-width: 34ch !important;
}

@media (max-width: 640px) {
#meal_block .rsvp-v2-mealhead {
  flex-direction: column !important;
      width: 100% !important;
}

#meal_block .rsvp-v2-mealhead__text {
  text-align: center !important;
      max-width: 52ch !important;
}
}

.rsvp-v2-form {
  accent-color: var(--accent-terracotta);
}

.rsvp-v2-form select, .rsvp-v2-form input[type="date"], .rsvp-v2-form input[type="time"], .rsvp-v2-form input[type="number"] {
  -webkit-appearance: none;
    appearance: none;
    color: var(--text-main);
}

.rsvp-v2-form select {
  background-color: rgba(255,255,255,0.86);
    background-clip: padding-box;
}

.wcdown {
  padding: clamp(1.2rem, 3vw, 2.2rem) 0;
    --card: #fff;
    --border: rgba(0,0,0,.14);
    --seam: rgba(0,0,0,.18);
    --ink: #2e3a47;
    --muted: rgba(46,58,71,.70);
    --radius: 0px;
    --days-w: 98px;
    --days-h: 118px;
    --small-w: 78px;
    --small-h: 96px;
    --gap: 10px;
    --row-gap: 12px;
    --board-pad: 14px;
    --persp: 1200px;
    --topms: 65ms;
    --gapms: 16ms;
    --botms: 70ms;
    --easetop: cubic-bezier(.10,.72,.18,1);
    --easebot: cubic-bezier(.16,.56,.14,1);
}

.wcdown .wrap {
  width: min(980px, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.wcdown .board {
  width: 100%;
    padding: var(--board-pad);
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    align-items: center;
}

.wcdown .row {
  display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--gap);
    flex-wrap: wrap;
}

.wcdown .subRow {
  display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.wcdown .groupWrap {
  display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}


.wcdown .digit{
  width: var(--w);
  height: var(--h);
  position: relative;
  perspective: var(--persp);
  transform: translateZ(0);
}

.wcdown .label {
  font-size: 12px;
    color: var(--muted);
    font-family: inherit;
}

.wcdown .label.days {
  font-size: 18px;
    color: rgba(46,58,71,.80);
    margin-top: 6px;
}

.wcdown .shell {
  position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 8px 14px rgba(0,0,0,.08);
    overflow: hidden;
    z-index: 1;
}

.wcdown .seamLine {
  position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    height: 2px;
    background: var(--seam);
    z-index: 50;
    pointer-events: none;
}

.wcdown .seamOcclude {
  position: absolute;
    left: -2px;
    right: -2px;
    top: calc(50% - 7px);
    height: 14px;
    background: linear-gradient(180deg,
      rgba(0,0,0,.14),
      rgba(255,255,255,.10),
      rgba(0,0,0,.10));
    opacity: 0;
    z-index: 45;
    pointer-events: none;
}

.wcdown .half {
  position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.wcdown .half.top {
  top: 0;
}

.wcdown .half.bot {
  bottom: 0;
}

.wcdown .tex {
  position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-image: var(--img);
    background-size: 100% 200%;
    will-change: background-image;
}

.wcdown .half.top .tex {
  background-position: 0% 0%;
}

.wcdown .half.bot .tex {
  background-position: 0% 100%;
}

.wcdown .staticTop, .wcdown .staticBot {
  z-index: 3;
}

.wcdown .flipTop {
  z-index: 20;
    transform-origin: bottom;
    transform: rotateX(0deg);
    opacity: 0;
    will-change: transform, opacity;
}

.wcdown .flipBot {
  z-index: 19;
    transform-origin: top;
    transform: rotateX(90deg);
    opacity: 0;
    will-change: transform, opacity;
}

/* =========================================================
   Countdown: flip state machine
   JS toggles: .isFlipping and data-phase="A"|"B"|"C"
   Required so the split-flap layers become visible and animate.
   ========================================================= */

.wcdown .digit.isFlipping .seamOcclude {
  opacity: 1;
}

.wcdown .digit.isFlipping .flipTop,
.wcdown .digit.isFlipping .flipBot {
  opacity: 1;
}

/* Phase A: top half flips down from OLD */
.wcdown .digit.isFlipping[data-phase="A"] .flipTop {
  animation: wcTopFlip var(--topms) var(--easetop) forwards;
}

/* Phase B: top is settled (staticTop already updated by JS) */
.wcdown .digit.isFlipping[data-phase="B"] .flipTop {
  transform: rotateX(-90deg);
  opacity: 0;
}

/* Phase C: bottom half flips up to NEW */
.wcdown .digit.isFlipping[data-phase="C"] .flipBot {
  animation: wcBotFlip var(--botms) var(--easebot) forwards;
}

.wcdown .shade {
  position: absolute;
    inset: -2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms linear;
}

.wcdown .flipTop .shade {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.34));
}

.wcdown .flipBot .shade {
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.20));
}

.wcdown .staticTop, .wcdown .staticBot {
  opacity: 1;
}

@keyframes wcTopFlip {
  0% {
      transform: rotateX(0deg);
    }

    78% {
      transform: rotateX(-84deg);
    }

    100% {
      transform: rotateX(-90deg);
    }
}

@keyframes wcBotFlip {
  0% {
      transform: rotateX(90deg);
    }

    22% {
      transform: rotateX(84deg);
    }

    100% {
      transform: rotateX(0deg);
    }
}

@media (max-width:560px) {
.wcdown {
  --days-w: 86px;
      --days-h: 108px;
      --small-w: 70px;
      --small-h: 90px;
      --gap: 10px;
      --board-pad: 14px;
}

.wcdown .subRow {
  gap: 14px;
}
}

.confirm-countdown {
  display: grid;
    grid-template-columns: auto auto;
    column-gap: clamp(16px, 2.2vw, 28px);
    align-items: start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.confirm-countdown__media {
  display: block;
    align-self: start;
}

.confirm-countdown__media img {
  display: block;
    width: clamp(160px, 16vw, 260px);
    height: auto;
    margin-top: 6px;
}

.confirm-countdown__content {
  text-align: left;
    width: max-content;
    max-width: 100%;
}

.confirm-countdown__content h2 {
  margin: 0 0 0.10rem 0;
}

.confirm-countdown__content .lede {
  margin: 0 0 0.55rem 0;
}

.confirm-countdown .wcdown {
  padding-top: 0;
    padding-bottom: 0;
}

.confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  align-items: flex-start;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  justify-content: flex-start;
}

@media (max-width: 899px) {
.confirm-countdown {
  grid-template-columns: 1fr;
      width: 100%;
      margin-inline: 0;
      justify-items: center;
      text-align: center;
      row-gap: 14px;
}

.confirm-countdown__media {
  justify-self: center;
}

.confirm-countdown__media img {
  width: clamp(170px, 42vw, 250px);
      margin-top: 0;
}

.confirm-countdown__content {
  width: 100%;
      max-width: 100%;
      text-align: center;
}

.confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  align-items: center;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  justify-content: center;
}
}

.wcdown {
  --card: #fff;
    --border: rgba(0,0,0,.14);
    --seam: rgba(0,0,0,.18);
    --ink: #2e3a47;
    --muted: rgba(46,58,71,.70);
    --radius: 0px;
    --days-w: 78px;
    --days-h: 92px;
    --small-w: 50px;
    --small-h: 64px;
    --gap: 10px;
    --row-gap: 12px;
    --board-pad: 12px;
    --persp: 1200px;
    --topms: 65ms;
    --gapms: 16ms;
    --botms: 70ms;
    --easetop: cubic-bezier(.10,.72,.18,1);
    --easebot: cubic-bezier(.16,.56,.14,1);
}

.wcdown .wrap {
  width: max-content;
    max-width: 100%;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.wcdown .board {
  width: max-content;
    max-width: 100%;
    padding: var(--board-pad);
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    align-items: flex-start;
}

.wcdown .row {
  display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--gap);
    flex-wrap: nowrap;
}

.wcdown .subRow {
  display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: nowrap;
}

.wcdown .groupWrap {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.wcdown .label {
  font-size: 12px;
    color: var(--muted);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.1;
}

.wcdown .label.days {
  font-size: 16px;
    color: rgba(46,58,71,.80);
    margin-top: 6px;
}

.wcdown .seamOcclude {
  position: absolute;
    left: -2px;
    right: -2px;
    top: calc(50% - 6px);
    height: 12px;
    background: linear-gradient(180deg,
      rgba(0,0,0,.14),
      rgba(255,255,255,.10),
      rgba(0,0,0,.10));
    opacity: 0;
    z-index: 45;
    pointer-events: none;
}

@keyframes topFlip {
  0% {
      transform: rotateX(0deg);
    }

    78% {
      transform: rotateX(-84deg);
    }

    100% {
      transform: rotateX(-90deg);
    }
}

@keyframes botFlip {
  0% {
      transform: rotateX(90deg);
    }

    22% {
      transform: rotateX(84deg);
    }

    100% {
      transform: rotateX(0deg);
    }
}

.confirm-countdown {
  display: grid;
    grid-template-columns: auto auto;
    column-gap: clamp(14px, 2vw, 22px);
    align-items: start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.confirm-countdown__media img {
  display: block;
    width: clamp(140px, 14vw, 210px);
    height: auto;
    margin-top: 4px;
}

.confirm-countdown__content .lede {
  margin: 0 0 0.45rem 0;
}

@media (max-width: 899px) {
.confirm-countdown {
  grid-template-columns: 1fr;
      width: 100%;
      margin-inline: 0;
      justify-items: center;
      row-gap: 12px;
      text-align: center;
}

.confirm-countdown__media img {
  width: clamp(150px, 40vw, 220px);
      margin-top: 0;
}

.confirm-countdown__content {
  width: 100%;
      max-width: 100%;
      text-align: center;
}

.confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  align-items: center;
      margin-inline: auto;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  justify-content: center;
}
}

@media (max-width: 420px) {
.wcdown .subRow {
  flex-wrap: wrap;
      justify-content: center;
      row-gap: 12px;
}

.wcdown .groupWrap {
  align-items: center;
}
}

.confirm-countdown, .confirm-countdown__content, .confirm-countdown .wcdown {
  max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 410px) {
.confirm-countdown .wcdown .board {
  padding: 10px;
}

.confirm-countdown .wcdown .subRow {
  flex-wrap: wrap !important;
      justify-content: center;
      gap: 12px 16px;
}

.confirm-countdown .wcdown .groupWrap {
  align-items: center;
}
}

@media (max-width: 899px) {
.confirm-countdown {
  grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      row-gap: 14px;
}

.confirm-countdown__content {
  width: 100%;
      max-width: 100%;
      text-align: center;
}

.confirm-countdown .wcdown, .confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  width: 100%;
      max-width: 100%;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  flex-wrap: nowrap;
      justify-content: center;
}

.confirm-countdown .wcdown .wrap {
  width: max-content;
      max-width: none;
      margin-inline: auto;
      align-items: center;
}

.confirm-countdown .wcdown {
  transform: scale(clamp(0.78, (100vw / 420), 0.92));
      transform-origin: top center;
      padding: 0;
}

.confirm-countdown .wcdown {
  margin-inline: auto;
}
}

@media (max-width: 390px) {
.confirm-countdown .wcdown {
  transform: scale(0.84);
}
}

@media (max-width: 360px) {
.confirm-countdown .wcdown {
  transform: scale(0.80);
}
}

@media (max-width: 899px) {
.confirm-countdown .wcdown {
  overflow: visible !important;
      width: 100%;
      padding: 0;
      display: flex;
      justify-content: center;
}

.confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  width: max-content;
      max-width: none;
      margin: 0 auto;
      align-items: center;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  flex-wrap: nowrap;
      justify-content: center;
}

.confirm-countdown .wcdown {
  transform: scale(0.84);
      transform-origin: top center;
}
}

@media (min-width: 900px) {
.confirm-countdown {
  align-items: stretch;
}

.confirm-countdown__media {
  align-self: stretch;
      display: flex;
      align-items: stretch;
      justify-content: center;
}

.confirm-countdown__media img {
  height: 100%;
      width: auto;
      max-height: none;
      object-fit: contain;
      display: block;
}

.confirm-countdown .wcdown .wrap, .confirm-countdown .wcdown .board {
  align-items: flex-start;
}

.confirm-countdown .wcdown .row, .confirm-countdown .wcdown .subRow {
  justify-content: flex-start;
}

.wcdown .groupWrap {
  align-items: center;
}

.wcdown .label {
  text-align: center;
      width: 100%;
}
}

@media (min-width: 900px) {
.confirm-countdown {
  align-items: center;
}

.confirm-countdown__media {
  display: flex;
      align-items: center;
      justify-content: center;
}

.confirm-countdown__media img {
  display: block;
      height: auto;
      width: auto;
      max-height: clamp(260px, 42vh, 420px);
      object-fit: contain;
}
}

@media (min-width: 900px) {
.confirm-countdown {
  align-items: center;
}

.confirm-countdown__media {
  display: flex;
      align-items: center;
      justify-content: center;
}

.confirm-countdown__media img {
  display: block;
      width: auto;
      height: auto;
      object-fit: contain;
      max-height: clamp(220px, 30vh, 300px);
}
}

@media (max-width: 899px) {
.wcdown .label, .wcdown .label.days {
  text-align: center;
      width: 100%;
}

.wcdown .groupWrap {
  align-items: center;
}
}

.rsvp-confirm {
  margin-top: var(--gutter);
    overflow: hidden;
}

.page-after-hero__inner .rsvp-confirm {
  width: min(1100px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.rsvp-confirm__band {
  display: grid;
    place-items: center;
    padding: .85rem 1.1rem;
    background: rgba(255,255,255,0.78);
    border-bottom: 1px solid rgba(46,58,71,0.10);
}

.rsvp-confirm__band span {
  font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(46,58,71,0.70);
    font-weight: 700;
}

.rsvp-confirm__pad {
  padding-top: .85rem;
    padding-bottom: .85rem;
}

.rsvp-confirm__row {
  display: flex;
    align-items: center;
    gap: .9rem;
}

.rsvp-confirm__who {
  flex: 1 1 auto;
    min-width: 220px;
}

.rsvp-confirm__title {
  margin: 0 !important;
    padding: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.2;
}

.rsvp-confirm__sub {
  margin: .15rem 0 0 !important;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
}

.rsvp-confirm__subLabel, .rsvp-confirm__subValue {
  font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(46,58,71,0.62);
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.35;
}

.rsvp-confirm__subValue {
  letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: rgba(46,58,71,0.72);
    white-space: pre-line;
}

.rsvp-confirm__subValue--empty {
  color: rgba(46,58,71,0.55);
}

.rsvp-confirm__meals {
  flex: 0 0 auto;
    margin-left: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 90px);
    gap: .55rem;
    align-items: stretch;
}

.rsvp-confirm__meal {
  padding: .55rem .6rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(46,58,71,0.10);
    text-align: center;
}

.rsvp-confirm__meal-label {
  margin: 0;
    font-size: 0.70rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(46,58,71,0.55);
}

.rsvp-confirm__meal-value {
  margin: .25rem 0 0;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

.rsvp-confirm__status {
  margin-left: auto;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(46,58,71,0.12);
    background: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    color: rgba(46,58,71,0.72);
    font-weight: 650;
}

@media (max-width: 680px) {
.rsvp-confirm__row {
  flex-direction: column;
      align-items: stretch;
      gap: .65rem;
}

.rsvp-confirm__who {
  text-align: center;
}

.rsvp-confirm__sub {
  justify-content: center;
}

.rsvp-confirm__meals {
  margin-left: 0;
      width: 100%;
      grid-auto-columns: 1fr;
}
}

.rsvp-confirm__actions {
  margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(46,58,71,0.10);
    display: flex;
    justify-content: center;
}

/* --- RESTORED COUNTDOWN (verbatim from pre-refactor) --- */
/* ---------- Base: countdown widget ---------- */
.wcdown{
  /* Page spacing */
  padding: clamp(1.2rem, 3vw, 2.2rem) 0;

  /* Visual vars */
  --card:#fff;
  --border: rgba(0,0,0,.14);
  --seam: rgba(0,0,0,.18);
  --ink:#2e3a47;
  --muted: rgba(46,58,71,.70);
  --radius: 0px;

  /* Sizes */
  --days-w: 98px; --days-h: 118px;
  --small-w: 78px; --small-h: 96px;

  /* Spacing */
  --gap: 10px;
  --row-gap: 12px;
  --board-pad: 14px;

  /* Motion */
  --persp: 1200px;
  --topMs: 65ms;
  --gapMs: 16ms;
  --botMs: 70ms;
  --easeTop: cubic-bezier(.10,.72,.18,1);
  --easeBot: cubic-bezier(.16,.56,.14,1);
}

.wcdown, .wcdown *{box-sizing:border-box;}

/* Layout */
.wcdown .wrap{
  width: min(980px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wcdown .board{
  width: 100%;
  padding: var(--board-pad);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  align-items: center;
}
.wcdown .row{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap);
  flex-wrap: wrap;
}
.wcdown .subRow{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.wcdown .groupWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wcdown .group{
  display: flex;
  gap: var(--gap);
  align-items: flex-end;
}

/* Labels */
.wcdown .label{
  font-size: 12px;
  color: var(--muted);
  font-family: inherit;
}
.wcdown .label.days{
  font-size: 18px;
  color: rgba(46,58,71,.80);
  margin-top: 6px;
}

/* Digit shell */
.wcdown .digit{
  width: var(--w);
  height: var(--h);
  position: relative;
  perspective: var(--persp);
  transform: translateZ(0);
}
.wcdown .shell{
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
  overflow: hidden;
  z-index: 1;
}

/* Seam */
.wcdown .seamLine{
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--seam);
  z-index: 50;
  pointer-events: none;
}
.wcdown .seamOcclude{
  position: absolute;
  left: -2px; right: -2px;
  top: calc(50% - 7px);
  height: 14px;
  background: linear-gradient(180deg,
    rgba(0,0,0,.14),
    rgba(255,255,255,.10),
    rgba(0,0,0,.10));
  opacity: 0;
  z-index: 45;
  pointer-events: none;
}

/* Halves + texture slicing (expects --img set by JS) */
.wcdown .half{
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.wcdown .half.top{ top: 0; }
.wcdown .half.bot{ bottom: 0; }

.wcdown .tex{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-image: var(--img);
  background-size: 100% 200%;
  will-change: background-image;
}
.wcdown .half.top .tex{ background-position: 0% 0%; }
.wcdown .half.bot .tex{ background-position: 0% 100%; }

/* Moving flaps */
.wcdown .staticTop{ z-index: 3; }
.wcdown .staticBot{ z-index: 3; }

.wcdown .flipTop{
  z-index: 20;
  transform-origin: bottom;
  transform: rotateX(0deg);
  opacity: 0;
  will-change: transform, opacity;
}
.wcdown .flipBot{
  z-index: 19;
  transform-origin: top;
  transform: rotateX(90deg);
  opacity: 0;
  will-change: transform, opacity;
}

/* Shading */
.wcdown .shade{
  position: absolute;
  inset: -2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms linear;
}
.wcdown .flipTop .shade{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.34));
}
.wcdown .flipBot .shade{
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.20));
}

/* Phase visibility */
.wcdown .staticTop, .wcdown .staticBot{ opacity: 1; }
.wcdown .digit.isFlipping .shade{ opacity: 1; }

/* Phase A */
.wcdown .digit.isFlipping[data-phase="A"] .staticTop{ opacity: 0; }
.wcdown .digit.isFlipping[data-phase="A"] .staticBot{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="A"] .flipTop{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="A"] .flipBot{ opacity: 0; }

/* Phase B */
.wcdown .digit.isFlipping[data-phase="B"] .staticTop{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="B"] .staticBot{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="B"] .flipTop{ opacity: 0; }
.wcdown .digit.isFlipping[data-phase="B"] .flipBot{ opacity: 0; }
.wcdown .digit.isFlipping[data-phase="B"] .seamOcclude{ opacity: .60; }

/* Phase C */
.wcdown .digit.isFlipping[data-phase="C"] .staticTop{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="C"] .staticBot{ opacity: 0; }
.wcdown .digit.isFlipping[data-phase="C"] .flipTop{ opacity: 0; }
.wcdown .digit.isFlipping[data-phase="C"] .flipBot{ opacity: 1; }
.wcdown .digit.isFlipping[data-phase="C"] .seamOcclude{ opacity: 0; }

/* Animations */
.wcdown .digit.isFlipping[data-phase="A"] .flipTop{
  animation: wcTopFlip var(--topMs) var(--easeTop) forwards;
}
.wcdown .digit.isFlipping[data-phase="C"] .flipBot{
  animation: wcBotFlip var(--botMs) var(--easeBot) forwards;
}

@keyframes wcTopFlip{
  0%   { transform: rotateX(0deg); }
  78%  { transform: rotateX(-84deg); }
  100% { transform: rotateX(-90deg); }
}
@keyframes wcBotFlip{
  0%   { transform: rotateX(90deg); }
  22%  { transform: rotateX(84deg); }
  100% { transform: rotateX(0deg); }
}

/* Small screens: keep everything proportionate */
@media (max-width:560px){
  .wcdown{
    --days-w: 86px; --days-h: 108px;
    --small-w: 70px; --small-h: 90px;
    --gap: 10px;
    --board-pad: 14px;
  }
  .wcdown .subRow{ gap: 14px; }
}

/* ---------- Page composition: bottle + text + countdown ---------- */
.confirm-countdown{
  display: grid;
  grid-template-columns: auto auto; /* bottle | content */
  column-gap: clamp(16px, 2.2vw, 28px);
  align-items: start;

  width: max-content;     /* shrink-wrap */
  max-width: 100%;
  margin-inline: auto;
}

.confirm-countdown__media{ display:block; align-self:start; }
.confirm-countdown__media img{
  display:block;
  width: clamp(160px, 16vw, 260px);
  height:auto;
  margin-top: 6px;
}

.confirm-countdown__content{
  text-align: left;
  width: max-content;
  max-width: 100%;
}

.confirm-countdown__content h2{ margin: 0 0 0.10rem 0; }
.confirm-countdown__content .lede{ margin: 0 0 0.55rem 0; }

.confirm-countdown .wcdown{
  padding-top: 0;
  padding-bottom: 0;
}

/* Left-align the clock under the text on desktop */
.confirm-countdown .wcdown .wrap,
.confirm-countdown .wcdown .board{
  align-items: flex-start;
}
.confirm-countdown .wcdown .row,
.confirm-countdown .wcdown .subRow{
  justify-content: flex-start;
}

/* Mobile: stack + center + keep clock tidy */
@media (max-width: 899px){
  .confirm-countdown{
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline: 0;
    justify-items: center;
    text-align: center;
    row-gap: 14px;
  }

  .confirm-countdown__media{justify-self:center;}
  .confirm-countdown__media img{
    width: clamp(170px, 42vw, 250px);
    margin-top: 0;
  }

  .confirm-countdown__content{
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* Center the clock */
  .confirm-countdown .wcdown .wrap,
  .confirm-countdown .wcdown .board{
    align-items: center;
  }
  .confirm-countdown .wcdown .row,
  .confirm-countdown .wcdown .subRow{
    justify-content: center;
  }
}

/* =========================================================
   COUNTDOWN — SMALL (matches JS: 78x92 + 50x64)
   Put this at the VERY END of the stylesheet
   ========================================================= */

/* Outer spacing */
.wcdown{
  padding: 0; /* we’ll control spacing via confirm-countdown */
}

/* Countdown variables (scoped) */
.wcdown{
  --card:#fff;
  --border: rgba(0,0,0,.14);
  --seam: rgba(0,0,0,.18);
  --ink:#2e3a47;
  --muted: rgba(46,58,71,.70);
  --radius: 0px;

  /* MUST match JS sizes */
  --days-w: 78px; --days-h: 92px;
  --small-w: 50px; --small-h: 64px;

  --gap: 10px;
  --row-gap: 12px;
  --board-pad: 12px;
  --persp: 1200px;

  /* flip timing */
  --topMs: 65ms;
  --gapMs: 16ms;
  --botMs: 70ms;

  --easeTop: cubic-bezier(.10,.72,.18,1);
  --easeBot: cubic-bezier(.16,.56,.14,1);
}

.wcdown *{ box-sizing: border-box; }

/* Layout */
.wcdown .wrap{
  width: max-content;
  max-width: 100%;
  margin-inline: 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 0;
}

.wcdown .board{
  width: max-content;
  max-width: 100%;
  padding: var(--board-pad);
  display:flex;
  flex-direction:column;
  gap: var(--row-gap);
  align-items:flex-start;
}

.wcdown .row{
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  gap: var(--gap);
  flex-wrap: nowrap;
}

.wcdown .subRow{
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  gap: 18px;        /* separation between groups (Hours/Mins/Secs) */
  flex-wrap: nowrap;
}

.wcdown .groupWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 6px;
}

.wcdown .group{
  display:flex;
  gap: var(--gap);
  align-items:flex-end;
}

/* Labels */
.wcdown .label{
  font-size: 12px;
  color: var(--muted);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.1;
}

.wcdown .label.days{
  font-size: 16px;
  color: rgba(46,58,71,.80);
  margin-top: 6px;
}

/* Digit shell */
.wcdown .digit{
  width: var(--w);
  height: var(--h);
  position: relative;
  perspective: var(--persp);
  transform: translateZ(0);
}

.wcdown .shell{
  position:absolute; inset:0;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
  overflow:hidden;
  z-index: 1;
}

/* Seam */
.wcdown .seamLine{
  position:absolute;
  left:0; right:0;
  top: calc(50% - 1px);
  height:2px;
  background: var(--seam);
  z-index: 50;
  pointer-events:none;
}

.wcdown .seamOcclude{
  position:absolute;
  left:-2px; right:-2px;
  top: calc(50% - 6px);
  height: 12px;
  background: linear-gradient(180deg,
    rgba(0,0,0,.14),
    rgba(255,255,255,.10),
    rgba(0,0,0,.10));
  opacity: 0;
  z-index: 45;
  pointer-events:none;
}

/* Halves */
.wcdown .half{
  position:absolute;
  left:0; right:0;
  height:50%;
  overflow:hidden;
  backface-visibility:hidden;
  transform-style: preserve-3d;
}
.wcdown .half.top{top:0;}
.wcdown .half.bot{bottom:0;}

.wcdown .tex{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-image: var(--img);
  background-size: 100% 200%;
  will-change: background-image;
}
.wcdown .half.top .tex{ background-position: 0% 0%; }
.wcdown .half.bot .tex{ background-position: 0% 100%; }

/* Moving flaps */
.wcdown .staticTop{ z-index: 3; }
.wcdown .staticBot{ z-index: 3; }

.wcdown .flipTop{
  z-index: 20;
  transform-origin: bottom;
  transform: rotateX(0deg);
  opacity: 0;
  will-change: transform, opacity;
}
.wcdown .flipBot{
  z-index: 19;
  transform-origin: top;
  transform: rotateX(90deg);
  opacity: 0;
  will-change: transform, opacity;
}

/* Shading */
.wcdown .shade{
  position:absolute; inset:-2px;
  opacity:0;
  pointer-events:none;
  transition: opacity 80ms linear;
}
.wcdown .flipTop .shade{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.34));
}
.wcdown .flipBot .shade{
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.20));
}

/* Phase visibility */
.wcdown .staticTop, .wcdown .staticBot{opacity:1;}
.wcdown .digit.isFlipping .shade{opacity:1;}

/* Phase A */
.wcdown .digit.isFlipping[data-phase="A"] .staticTop{opacity:0;}
.wcdown .digit.isFlipping[data-phase="A"] .staticBot{opacity:1;}
.wcdown .digit.isFlipping[data-phase="A"] .flipTop{opacity:1;}
.wcdown .digit.isFlipping[data-phase="A"] .flipBot{opacity:0;}

/* Phase B */
.wcdown .digit.isFlipping[data-phase="B"] .staticTop{opacity:1;}
.wcdown .digit.isFlipping[data-phase="B"] .staticBot{opacity:1;}
.wcdown .digit.isFlipping[data-phase="B"] .flipTop{opacity:0;}
.wcdown .digit.isFlipping[data-phase="B"] .flipBot{opacity:0;}
.wcdown .digit.isFlipping[data-phase="B"] .seamOcclude{opacity:.60;}

/* Phase C */
.wcdown .digit.isFlipping[data-phase="C"] .staticTop{opacity:1;}
.wcdown .digit.isFlipping[data-phase="C"] .staticBot{opacity:0;}
.wcdown .digit.isFlipping[data-phase="C"] .flipTop{opacity:0;}
.wcdown .digit.isFlipping[data-phase="C"] .flipBot{opacity:1;}
.wcdown .digit.isFlipping[data-phase="C"] .seamOcclude{opacity:0;}

/* Animations */
.wcdown .digit.isFlipping[data-phase="A"] .flipTop{
  animation: topFlip var(--topMs) var(--easeTop) forwards;
}
.wcdown .digit.isFlipping[data-phase="C"] .flipBot{
  animation: botFlip var(--botMs) var(--easeBot) forwards;
}

@keyframes topFlip{
  0%   { transform: rotateX(0deg); }
  78%  { transform: rotateX(-84deg); }
  100% { transform: rotateX(-90deg); }
}
@keyframes botFlip{
  0%   { transform: rotateX(90deg); }
  22%  { transform: rotateX(84deg); }
  100% { transform: rotateX(0deg); }
}

/* =========================================================
   CONFIRM + COUNTDOWN — SMALL, CLEAN LAYOUT
   ========================================================= */

.confirm-countdown{
  display: grid;
  grid-template-columns: auto auto; /* bottle | content */
  column-gap: clamp(14px, 2vw, 22px);
  align-items: start;

  width: max-content;   /* shrink-wrap the whole composition */
  max-width: 100%;
  margin-inline: auto;  /* center it */
}

/* Bottle sizing (smaller, proportional to smaller clock) */
.confirm-countdown__media img{
  display:block;
  width: clamp(140px, 14vw, 210px);
  height: auto;
  margin-top: 4px;
}

/* Content block */
.confirm-countdown__content{
  text-align: left;
  width: max-content;
  max-width: 100%;
}

.confirm-countdown__content h2{
  margin: 0 0 0.10rem 0;
}

.confirm-countdown__content .lede{
  margin: 0 0 0.45rem 0;
}

/* Keep countdown aligned left inside the content */
.confirm-countdown .wcdown .wrap,
.confirm-countdown .wcdown .board{
  align-items: flex-start;
}

/* MOBILE: stack + center */
@media (max-width: 899px){
  .confirm-countdown{
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline: 0;
    justify-items: center;
    row-gap: 12px;
    text-align: center;
  }

  .confirm-countdown__media img{
    width: clamp(150px, 40vw, 220px);
    margin-top: 0;
  }

  .confirm-countdown__content{
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* Center the countdown block on mobile */
  .confirm-countdown .wcdown .wrap,
  .confirm-countdown .wcdown .board{
    align-items: center;
    margin-inline: auto;
  }

  .confirm-countdown .wcdown .row,
  .confirm-countdown .wcdown .subRow{
    justify-content: center;
  }
}

/* EXTRA SMALL: allow wrap if the screen is truly tiny */
@media (max-width: 420px){
  .wcdown .subRow{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
  .wcdown .groupWrap{
    align-items: center;
  }
}
/* =========================================================
   COUNTDOWN — MOBILE OVERFLOW FIX (must be LAST)
   ========================================================= */

/* Always: never allow a horizontal scroll bar from the countdown */
.confirm-countdown,
.confirm-countdown__content,
.confirm-countdown .wcdown{
  max-width: 100%;
  overflow-x: hidden;
}

/* iPhone-width and down: wrap the 3 groups (Hours/Mins/Secs) */
@media (max-width: 410px){
  .confirm-countdown .wcdown .board{
    padding: 10px;                 /* shave a few px */
  }

  .confirm-countdown .wcdown .subRow{
    flex-wrap: wrap !important;    /* override any nowrap */
    justify-content: center;
    gap: 12px 16px;                /* row-gap / col-gap */
  }

  .confirm-countdown .wcdown .groupWrap{
    align-items: center;
  }
}

/* =========================================================
   COUNTDOWN — OPTION 1 (SCALE TO FIT, SINGLE ROW)
   Put this at the VERY END of the stylesheet
   ========================================================= */

/* Safety: countdown should never create horizontal scroll */
.confirm-countdown,
.confirm-countdown__content,
.confirm-countdown .wcdown{
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile/tablet: center everything */
@media (max-width: 899px){
  .confirm-countdown{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 14px;
  }

  .confirm-countdown__content{
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* IMPORTANT: stop max-content from forcing overflow */
  .confirm-countdown .wcdown,
  .confirm-countdown .wcdown .wrap,
  .confirm-countdown .wcdown .board{
    width: 100%;
    max-width: 100%;
  }

  /* Keep the actual digits on one line */
  .confirm-countdown .wcdown .row,
  .confirm-countdown .wcdown .subRow{
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* Shrink-wrap the board to its natural size so scaling is accurate */
  .confirm-countdown .wcdown .wrap{
    width: max-content;
    max-width: none;
    margin-inline: auto;
    align-items: center;
  }

  /* Scale the entire countdown to fit typical phones.
     390px iPhone: ~0.88–0.92 is the sweet spot. */
  .confirm-countdown .wcdown{
    transform: scale(clamp(0.78, (100vw / 420), 0.92));
    transform-origin: top center;
    padding: 0;
  }

  /* Prevent the scaled element from “hanging” off-screen */
  .confirm-countdown .wcdown{
    margin-inline: auto;
  }
}

/* Extra-tight phones (<= 390): force slightly smaller */
@media (max-width: 390px){
  .confirm-countdown .wcdown{
    transform: scale(0.84);
  }
}

/* Super-tight phones (<= 360): smaller still */
@media (max-width: 360px){
  .confirm-countdown .wcdown{
    transform: scale(0.80);
  }
}

/* =========================================================
   COUNTDOWN — Mobile centering + NO CLIP (Option 1 fix)
   Put this at the VERY END of the stylesheet
   ========================================================= */

@media (max-width: 899px){

  /* 1) Never clip the scaled countdown itself */
  .confirm-countdown .wcdown{
    overflow: visible !important;      /* <- critical: stop self-clipping */
    width: 100%;
    padding: 0;
    display: flex;                     /* <- gives us reliable centering */
    justify-content: center;
  }

  /* 2) Center the max-content "wrap" reliably */
  .confirm-countdown .wcdown .wrap{
    width: max-content;
    max-width: none;
    margin: 0 auto;
    align-items: center;
  }

  .confirm-countdown .wcdown .board{
    width: max-content;
    max-width: none;
    margin: 0 auto;
    align-items: center;
  }

  /* 3) Keep all digits on one line */
  .confirm-countdown .wcdown .row,
  .confirm-countdown .wcdown .subRow{
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* 4) Scale (a touch smaller than before so it fits iPhone widths) */
  .confirm-countdown .wcdown{
    transform: scale(0.84);            /* was ~0.88 — this prevents right cutoff */
    transform-origin: top center;
  }
}

/* 5) ONLY the page wrappers may hide x overflow (not the countdown) */
.page-after-hero,
.page-after-hero .container,
.page-after-hero__inner{
  overflow-x: hidden;
}

/* =========================================================
   COUNTDOWN — Desktop: bottle matches right content height
   + only labels centered (digits stay left-aligned)
   ========================================================= */

@media (min-width: 900px){

  /* Make both columns equal height: left matches right content height */
  .confirm-countdown{
    align-items: stretch;        /* key */
  }

  /* Left column becomes a stretchable box */
  .confirm-countdown__media{
    align-self: stretch;         /* key */
    display: flex;
    align-items: stretch;        /* let img use full height */
    justify-content: center;
  }

  /* Bottle fills the left column height (which matches right content) */
  .confirm-countdown__media img{
    height: 100%;                /* key */
    width: auto;
    max-height: none;            /* IMPORTANT: remove old caps */
    object-fit: contain;
    display: block;
  }

  /* Keep countdown left-aligned (do NOT center it) */
  .confirm-countdown .wcdown .wrap,
  .confirm-countdown .wcdown .board{
    align-items: flex-start;
  }
  .confirm-countdown .wcdown .row,
  .confirm-countdown .wcdown .subRow{
    justify-content: flex-start;
  }

  /* Labels centered ONLY under their own groups */
  .wcdown .groupWrap{
    align-items: center;         /* centers the label block under the group */
  }
  .wcdown .label{
    text-align: center;
    width: 100%;
  }
}

@media (min-width: 900px){

  /* Keep layout stable */
  .confirm-countdown{
    align-items: center; /* NOT stretch */
  }

  /* Bottle column */
  .confirm-countdown__media{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Bottle sizing — THIS is the fix */
  .confirm-countdown__media img{
    display: block;

    /* Visually tied to countdown, not section height */
    height: auto;
    width: auto;

    /* The magic line */
    max-height: clamp(260px, 42vh, 420px);

    /* Prevent distortion */
    object-fit: contain;
  }
}

@media (min-width: 900px){

  .confirm-countdown{
    align-items: center;
  }

  .confirm-countdown__media{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .confirm-countdown__media img{
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;

    /* HARDER CLAMP (smaller) */
    max-height: clamp(220px, 30vh, 300px);
  }
}

/* =========================================
   MOBILE — center countdown labels only
   ========================================= */
@media (max-width: 899px){

  /* Center the label text under each group */
  .wcdown .label,
  .wcdown .label.days{
    text-align: center;
    width: 100%;
  }

  /* Ensure each group wraps label + digits cleanly */
  .wcdown .groupWrap{
    align-items: center;
  }
}


.catpic-hero{
  display:block;
  width:100%;
  max-width: 420px;
  margin: 0 auto 0.75rem auto;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(60,40,30,0.10);
}

/* =========================================
   No-Hero Page Mode
   ========================================= */

.eh--no-hero .hero-bleed{
  display: none;
}

/* Pull content up tight under the nav */
.eh--no-hero .page-after-hero,
.eh--no-hero .wrap > .section:first-of-type{
  padding-top: 2rem;
}

/* If you have any global "after hero" offsets */
.eh--no-hero .page-after-hero{
  margin-top: 0;
}



/* 1) Ensure the root can fill the viewport */
html { height: 100%; }

/* 2) Apply the flex-column layout to whichever “page root” exists */
:where(body, bodyclass, .eh){
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0; /* safe */
}

/* 3) Push footer block to the bottom when content is short */
:where(body, bodyclass, .eh) .footer-divider{
  margin-top: auto;
}

/* 4) Footer should never shrink */
:where(body, bodyclass, .eh) .site-footer{
  flex-shrink: 0;
}