/* =========================================================================
   Your Ceremony by Catherine
   Concept: "the ribbon". Her mark is one continuous line looping into a
   heart; handfasting binds two hands with a ribbon. One blush hairline
   threads the page and binds the sections together.

   Newsreader carries her voice (headings, prose). Karla carries the
   machinery (nav, buttons, forms, the diary). The split is the point.
   ========================================================================= */

:root {
  --ink:        #2E2830;   /* warm plum-black, the ground her logo sits on */
  --ink-70:     #5A5158;
  --ink-45:     #8A8087;
  --paper:      #FFFDFC;
  --shell:      #F7F0EE;   /* soft warm band */
  --blush:      #F8C1D9;   /* her logo pink, exact */
  --blush-pale: #FDEFF5;
  --rose:       #A85B74;   /* deepened blush, safe for text */
  --sage:       #6E7D66;   /* eucalyptus from her ceremony flowers */
  --stone:      #E6DDD9;
  --gold:       #B08A5A;

  --measure: 34rem;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4rem, 9vw, 7.5rem);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--rose); text-underline-offset: .22em; text-decoration-thickness: .5px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 200;
  font-family: var(--sans);
}
.skip:focus { left: 0; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; letter-spacing: .005em; }

p { margin: 0 0 1.15em; }
.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.62;
  color: var(--ink-70);
}
.quiet { color: var(--ink-70); }
.small { font-size: .875rem; }

/* --- Layout -------------------------------------------------------------- */

.wrap { width: min(72rem, 100% - var(--gut) * 2); margin-inline: auto; }
.narrow { width: min(var(--measure), 100% - var(--gut) * 2); margin-inline: auto; }
.band { padding-block: var(--band); }
.band--shell { background: var(--shell); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink .quiet { color: #C9BFC5; }
.band--ink a:not(.btn) { color: var(--blush); }

.centre { text-align: center; }
.centre .narrow > p { margin-inline: auto; }

/* The ribbon: one hairline that threads between sections. Not a divider
   for its own sake, it carries the mark's single continuous line. */
.ribbon {
  display: block;
  width: 100%;
  height: 58px;
  color: var(--blush);
  margin: 0;
}
.ribbon path { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ribbon--tight { height: 40px; }

/* --- Header -------------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: .9rem;
}
.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(150px, 20vw, 208px); }

.nav {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem);
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .02em;
}
.nav a:not(.btn) { color: #EDE6EA; text-decoration: none; padding-block: .35rem; position: relative; }
.nav a:not(.btn):hover { color: #fff; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--blush);
}
.nav a.btn { margin-left: .4rem; }
.nav a.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav a.btn--light:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.btn--onink { background: transparent; color: #fff; border-color: #6B616C; }
.btn--onink:hover { background: #fff; color: var(--ink); border-color: #fff; }

.navtoggle {
  display: none; background: none; border: 1px solid #5A505A; color: #fff;
  font-family: var(--sans); font-size: .8125rem; padding: .5rem .8rem; border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 56rem) {
  .navtoggle { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink);
    flex-direction: column; align-items: stretch;
    padding: .5rem var(--gut) 1.5rem;
    border-top: 1px solid #453D46;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: .75rem; border-bottom: 1px solid #3D353E; }
  .nav a.btn { margin: .75rem 0 0; text-align: center; border-bottom: 0; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.btn--onink { background: transparent; color: #fff; border-color: #6B616C; }
.btn--onink:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--wide { width: 100%; text-align: center; }

/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 32%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30,25,30,.55) 0%, rgba(30,25,30,.12) 38%, rgba(30,25,30,.72) 100%),
    linear-gradient(95deg, rgba(30,25,30,.62) 0%, rgba(30,25,30,.05) 58%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(4.5rem, 15vw, 9rem);
  color: #fff;
  max-width: 40rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: 1.06;
  margin-bottom: .35em;
  text-shadow: 0 1px 24px rgba(20,16,20,.4);
}
.hero p {
  color: #F2EBEE;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  max-width: 30rem;
  text-shadow: 0 1px 16px rgba(20,16,20,.45);
}
.hero__credit {
  position: absolute; right: var(--gut); bottom: .6rem;
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
}

/* --- The date check: the first thing on the page ------------------------- */

.datecheck {
  margin-top: 2.25rem;
  background: rgba(255,253,252,.94);
  backdrop-filter: blur(6px);
  color: var(--ink);
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 3px;
  box-shadow: 0 18px 50px -18px rgba(25,18,24,.6);
  max-width: 30rem;
}
.datecheck__label {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  margin-bottom: .7rem;
}
.datecheck__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.datecheck__row input[type="date"] { flex: 1 1 12rem; }
.datecheck__row .btn { flex: 0 0 auto; }

.verdict {
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-left: 2px solid var(--stone);
  background: var(--shell);
  font-size: .96rem;
  line-height: 1.55;
}
.verdict[hidden] { display: none; }
.verdict strong { font-family: var(--sans); font-size: .9375rem; display: block; margin-bottom: .15rem; }
.verdict--free { border-left-color: var(--rose); background: var(--blush-pale); }
.verdict--free strong { color: var(--rose); }
.verdict--held { border-left-color: var(--gold); background: #FAF5EE; }
.verdict--held strong { color: #7A5A2E; }
.verdict--taken { border-left-color: var(--stone); background: #F5F1EF; }
.verdict--taken strong { color: var(--ink-70); }
.verdict a { font-family: var(--sans); font-size: .9375rem; }

/* one orchestrated moment: the answer arriving */
@keyframes verdict-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.verdict.is-new { animation: verdict-in .32s ease-out; }

/* --- Forms --------------------------------------------------------------- */

input, select, textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: .72rem .8rem;
  width: 100%;
  transition: border-color .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: #CDBFB9; }
input:focus, select:focus, textarea:focus { border-color: var(--rose); outline-offset: 1px; }
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-45) 50%), linear-gradient(135deg, var(--ink-45) 50%, transparent 50%); background-position: right 1rem top 55%, right .7rem top 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

.field { margin-bottom: 1.15rem; }
.field > label {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .015em;
  margin-bottom: .35rem;
  color: var(--ink-70);
}
.field .hint { font-family: var(--sans); font-size: .78rem; color: var(--ink-45); margin-top: .3rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 34rem) { .pair { grid-template-columns: 1fr; } }

.formcard {
  background: var(--paper);
  border: 1px solid var(--stone);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 3px;
}
.band--shell .formcard { box-shadow: 0 1px 0 rgba(46,40,48,.03); }

.errors {
  background: var(--blush-pale);
  border-left: 2px solid var(--rose);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--sans);
  font-size: .9375rem;
}
.errors ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* honeypot */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Calendar ------------------------------------------------------------ */

.cal { font-family: var(--sans); }
.cal__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.cal__month { font-family: var(--serif); font-size: 1.35rem; }
.cal__nav { display: flex; gap: .4rem; }
.cal__nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 1px solid var(--stone);
  color: var(--ink); text-decoration: none; border-radius: 2px;
}
.cal__nav a:hover { border-color: var(--rose); color: var(--rose); }
.cal__nav span { opacity: .3; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--stone); }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow {
  text-align: center; font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-45); padding-bottom: .35rem;
}
.cal__day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  border: 1px solid transparent;
  border-radius: 2px;
  position: relative;
}
.cal__day--pad { visibility: hidden; }
.cal__day--past { color: #CFC7CB; }
.cal__day--free { background: #E9F0E4; color: #4F6046; border-color: #C6D6BC; font-weight: 500; }
.cal__day--free a { color: inherit; text-decoration: none; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.cal__day--free:hover { background: var(--sage); border-color: var(--sage); }
.cal__day--free:hover a { color: #fff; }
.cal__day--booked { background: #FADDE8; color: #8E4460; border-color: #EFC2D4; text-decoration: line-through; text-decoration-thickness: .5px; }
.cal__day--held { background: #F8EDDC; color: #7A5A2E; border-color: #E5D2B4; }
.cal__day--off { color: #CFC7CB; }

.key { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.1rem; font-family: var(--sans); font-size: .8125rem; color: var(--ink-70); }
.key span { display: inline-flex; align-items: center; gap: .45rem; }
.key i { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.key .k-free { background: #E9F0E4; border: 1px solid #C6D6BC; }
.key .k-held { background: #F8EDDC; border: 1px solid #E5D2B4; }
.key .k-booked { background: #FADDE8; border: 1px solid #EFC2D4; }

/* --- Ceremony list ------------------------------------------------------- */

.ceremonies { display: grid; gap: 0; }
.ceremony {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
  padding-block: 2.1rem;
  border-top: 1px solid var(--stone);
}
.ceremony:last-child { border-bottom: 1px solid var(--stone); }
.ceremony h3 { margin-bottom: .35em; }
.ceremony p { margin-bottom: 0; color: var(--ink-70); max-width: 38rem; }
.ceremony__price {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
  padding-top: .35rem;
}
.ceremony__price b { font-weight: 600; }
.ceremony__price span { display: block; font-size: .75rem; color: var(--ink-45); }
@media (max-width: 40rem) {
  .ceremony { grid-template-columns: 1fr; }
  .ceremony__price { padding-top: 0; }
}

/* --- Reviews ------------------------------------------------------------- */

.review { max-width: 40rem; }
.review blockquote {
  margin: 0 0 .8rem;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.62;
}
.review cite {
  font-style: normal;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-45);
}
.review cite b { color: var(--ink-70); font-weight: 600; }

.reviews-list { display: grid; gap: 0; }
.reviews-list .review {
  max-width: none;
  padding-block: 2.4rem;
  border-top: 1px solid var(--stone);
}
.reviews-list .review:first-child { border-top: 0; padding-top: 0; }
.reviews-list blockquote { max-width: 42rem; }

.stars { color: var(--blush); letter-spacing: .12em; font-size: .9rem; }

.proof {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem);
  justify-content: center;
  font-family: var(--sans);
  padding-block: .5rem;
}
.proof div { text-align: center; }
.proof b { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.1; }
.proof span { font-size: .8125rem; color: var(--ink-45); letter-spacing: .02em; }

/* --- Gallery ------------------------------------------------------------- */

.gallery { columns: 3 16rem; column-gap: .8rem; }
.gallery figure { margin: 0 0 .8rem; break-inside: avoid; }
.gallery img { width: 100%; border-radius: 2px; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.strip img { aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }

/* --- Split section ------------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.split--narrow { grid-template-columns: 5fr 6fr; }
@media (max-width: 52rem) { .split, .split--narrow { grid-template-columns: 1fr; } }
.split img { border-radius: 2px; }

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--ink); color: #C9BFC5; padding-block: clamp(3rem, 7vw, 4.5rem) 2rem; font-family: var(--sans); font-size: .9rem; }
.foot a:not(.btn) { color: #EDE6EA; text-decoration: none; }
.foot a:not(.btn):hover { color: var(--blush); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 46rem) { .foot__grid { grid-template-columns: 1fr; gap: 2rem; } }
.foot h4 { color: var(--paper); font-size: .8125rem; letter-spacing: .04em; margin-bottom: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; }
.foot__logo { width: 190px; margin-bottom: 1.1rem; }
.foot__legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #443C45;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: #948A92;
}

/* --- Utility ------------------------------------------------------------- */
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }
.flow-cta { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.centre .flow-cta { justify-content: center; }

/* --- Social ------------------------------------------------------------- */

.social { display: inline-flex; align-items: center; gap: .55rem; }
.social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid #514855;
  color: #EDE6EA;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.social__link svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.social__link:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }

.foot .social__row { display: inline-flex; align-items: center; gap: .5rem; }
.foot .social__row svg { width: .95rem; height: .95rem; fill: currentColor; flex: 0 0 auto; }

@media (max-width: 56rem) {
  .nav .social { padding-block: .9rem; gap: .75rem; border-bottom: 1px solid #3D353E; }
}

/* --- Instagram ---------------------------------------------------------- */

.ig__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.ig__handle {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--sans); font-size: .9375rem;
  color: var(--ink); text-decoration: none;
}
.ig__handle svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.ig__handle:hover { color: var(--rose); }

.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.ig__grid a { display: block; overflow: hidden; border-radius: 2px; background: var(--stone); }
.ig__grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .4s ease, filter .3s ease;
}
.ig__grid a:hover img { transform: scale(1.04); filter: saturate(1.05); }

.ig behold-widget { display: block; }

/* --- Lightbox ----------------------------------------------------------- */

.lb[hidden] { display: none !important; }
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 23, 28, .96);
  /* flex column with min-height:0 on the stage is what actually stops a tall
     photograph running off the bottom of the screen. */
  display: flex; flex-direction: column;
  padding: clamp(.6rem, 1.6vw, 1rem);
  gap: .5rem;
}
.lb__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #C9BFC5; font-family: var(--sans); font-size: .8125rem; }
.lb__stage {
  flex: 1 1 auto;
  min-height: 0;                 /* without this the image ignores the bounds */
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.lb__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,.85);
}
.lb__cap { flex: 0 0 auto; color: #EDE6EA; font-family: var(--sans); font-size: .85rem; text-align: center; margin: 0; min-height: 1.2rem; }

.lb__btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  color: #fff; border-radius: 50%;
  width: 2.6rem; height: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; line-height: 1;
  backdrop-filter: blur(4px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.lb__btn:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }

.lb__prev, .lb__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb__prev { left: .25rem; }
.lb__next { right: .25rem; }
@media (min-width: 60rem) { .lb__prev { left: 1rem; } .lb__next { right: 1rem; } }

.gallery figure { position: relative; cursor: zoom-in; }
.gallery figure img { transition: filter .3s ease, transform .5s ease; }
.gallery a:hover img { filter: brightness(1.04); }

@media (prefers-reduced-motion: reduce) { .lb__stage img { transition: none; } }

/* --- Reviews page ------------------------------------------------------- */

.rhead {
  background: var(--shell);
  padding-block: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--stone);
}
.rhead__stars { color: var(--blush); letter-spacing: .3em; font-size: 1.15rem; margin: 0 0 .5rem; }
.rhead h1 { margin-bottom: .3em; }
.rhead .lede { max-width: 34rem; margin-inline: auto; }
.rhead__badge {
  display: inline-block;
  font-family: var(--sans); font-size: .78rem; letter-spacing: .04em;
  color: var(--rose);
  border: 1px solid var(--blush);
  background: var(--paper);
  border-radius: 100px;
  padding: .45rem 1.1rem;
  margin: .75rem 0 0;
}

.rfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .8125rem;
  margin-bottom: 2rem;
}
.rfilter a {
  padding: .38rem .85rem; border: 1px solid var(--stone); border-radius: 100px;
  color: var(--ink-70); text-decoration: none; background: var(--paper);
}
.rfilter a:hover { border-color: var(--rose); color: var(--rose); }
.rfilter a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rfilter__count { margin-left: auto; color: var(--ink-45); }

/* Masonry wall. 77 reviews in one column is a scroll nobody finishes. */
.wall { columns: 3 21rem; column-gap: 1.5rem; }
@media (max-width: 44rem) { .wall { columns: 1; } }

.rcard {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 3px;
}
.rcard__stars { color: var(--blush); letter-spacing: .14em; font-size: .78rem; margin: 0 0 .6rem; }
.rcard blockquote {
  margin: 0 0 .9rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.rcard__by { margin: 0; font-family: var(--sans); font-size: .78rem; line-height: 1.45; }
.rcard__by b { display: block; color: var(--ink); font-weight: 600; }
.rcard__by span { color: var(--ink-45); }

.pullquote {
  margin: 0 0 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--blush);
  border-bottom: 1px solid var(--blush);
  text-align: center;
}
.pullquote blockquote {
  margin: 0 auto 1rem;
  max-width: 46rem;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.48;
}
.pullquote figcaption { font-family: var(--sans); font-size: .8125rem; }
.pullquote figcaption b { color: var(--ink); font-weight: 600; }
.pullquote figcaption span { color: var(--ink-45); display: block; margin-top: .15rem; }

/* --- Motion -------------------------------------------------------------
   Two ideas only. The ribbon draws itself, because her mark is one
   continuous line and watching it complete is the point. Everything else
   gets a single quiet lift so the page settles rather than performs. */

.motion .ribbon path { transition: stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1); }

.motion .lift { opacity: 0; transform: translateY(14px); }
.motion .lift.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.motion .split img.lift { transform: translateY(20px) scale(.985); }
.motion .split img.lift.is-in { transform: none; }

/* the hero settles on load, in one sequence rather than four separate ones */
@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero h1        { animation: hero-in .85s cubic-bezier(.22,.61,.36,1) both; }
.hero__inner p  { animation: hero-in .85s cubic-bezier(.22,.61,.36,1) .12s both; }
.hero .datecheck{ animation: hero-in .85s cubic-bezier(.22,.61,.36,1) .24s both; }
.hero__media img{ animation: hero-in 1.2s ease both; }

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero__inner p, .hero .datecheck, .hero__media img { animation: none; }
  .motion .lift, .motion .lift.is-in { opacity: 1; transform: none; transition: none; }
  .motion .ribbon path { transition: none; stroke-dashoffset: 0 !important; }
}

/* A ceremony with no photograph (funerals) reads as one measured column
   rather than a two-column grid with a hole in it. */
.split--solo { grid-template-columns: 1fr; max-width: 42rem; }

/* A couple's own photograph beside their words is worth more than any
   stock image, so give it room rather than a thumbnail. */
.rcard__photo {
  /* full-bleed to the card edge. max-width:none is required or the base
     img{max-width:100%} clamps the negative-margin bleed back inside. */
  width: calc(100% + 3rem);
  max-width: none;
  margin: -1.4rem -1.5rem 1.1rem;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 3px 3px 0 0;
}
.pullquote__photo {
  width: min(15rem, 60%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
}
.review__photo {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 1rem;
}

/* --- Agreement ---------------------------------------------------------- */

.contract h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .5em;
  padding-top: 1.2rem;
  border-top: 1px solid var(--stone);
}
.contract h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.contract p  { margin-bottom: .8em; }
.contract ul { margin: 0 0 1em; padding-left: 1.15rem; }
.contract li { margin-bottom: .4em; }

.signbox {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--blush);
}
.signed {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--blush);
  background: var(--blush-pale);
  border-radius: 3px;
  text-align: center;
}
.signed__name {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: .25rem 0;
}

/* --- Home page reviews -------------------------------------------------- */

.stars--lg { font-size: 1.1rem; letter-spacing: .28em; margin-bottom: .5rem; }

.homereviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 62rem) { .homereviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 42rem) { .homereviews { grid-template-columns: 1fr; } }

.hrev {
  /* deliberately NOT stretched to a shared height: one card has a photograph
     and the others do not, and matching them leaves great voids of nothing. */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 3px;
  overflow: hidden;
}
.hrev__photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}
.hrev__body { padding: 1.35rem 1.4rem .25rem; }
.hrev .stars { font-size: .78rem; letter-spacing: .14em; margin: 0 0 .65rem; }
.hrev blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
}
.hrev__by {
  margin: 0;
  padding: .9rem 1.4rem 1.25rem;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.45;
}
.hrev__by b { display: block; color: var(--ink); font-weight: 600; }
.hrev__by span { color: var(--ink-45); }

/* the third card is the one that drops first on a narrow screen */
@media (max-width: 62rem) { .homereviews .hrev:nth-child(3) { display: none; } }
@media (max-width: 42rem) { .homereviews .hrev:nth-child(3) { display: flex; } }

/* --- Reviews carousel ---------------------------------------------------
   Three across on a desktop, one on a phone. A scroll-snap track rather than
   translate maths, so it swipes natively and still works with JS switched
   off, where it is simply a horizontally scrollable row. */

.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .25rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 3px; }

.cslide {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 3px;
  overflow: hidden;
}
@media (max-width: 68rem) { .cslide { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 46rem) { .cslide { flex-basis: 100%; } }

.cslide__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cslide__body { padding: 1.3rem 1.35rem .4rem; flex: 1 1 auto; }
.cslide .stars { font-size: .75rem; letter-spacing: .14em; margin: 0 0 .7rem; }
.cslide blockquote {
  margin: 0;
  font-size: .975rem;
  line-height: 1.6;
  /* keep three cards level without chopping mid-word */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cslide__by { margin: 0; padding: .9rem 1.35rem 1.25rem; font-family: var(--sans); font-size: .78rem; line-height: 1.45; }
.cslide__by b { display: block; color: var(--ink); font-weight: 600; }
.cslide__by span { color: var(--ink-45); }

.carousel__arrow {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 3;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--stone); background: var(--paper); color: var(--ink);
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: none;
  box-shadow: 0 6px 18px -10px rgba(46,40,48,.5);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.carousel.is-live .carousel__arrow { display: inline-flex; align-items: center; justify-content: center; }
.carousel__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.carousel__arrow--prev { left: -1.15rem; }
.carousel__arrow--next { right: -1.15rem; }
@media (max-width: 76rem) {
  .carousel__arrow--prev { left: .35rem; }
  .carousel__arrow--next { right: .35rem; }
}

.carousel__dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.4rem; }
.carousel__dots button {
  width: .5rem; height: .5rem; padding: 0; border-radius: 50%;
  border: 0; background: var(--stone); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel__dots button[aria-selected="true"] { background: var(--rose); transform: scale(1.35); }
.carousel__dots button:hover { background: var(--blush); }

/* --- Award certificate -------------------------------------------------- */

.rhead__grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  text-align: left;
}
.rhead__grid .lede { margin-inline: 0; }
@media (max-width: 54rem) {
  .rhead__grid { grid-template-columns: 1fr; text-align: center; }
  .rhead__grid .lede { margin-inline: auto; }
}

.cert { margin: 0; }
.cert img {
  width: min(15rem, 100%);
  margin-inline: auto;
  background: #fff;
  padding: .5rem;
  border: 1px solid var(--stone);
  border-radius: 2px;
  box-shadow: 0 14px 34px -20px rgba(46,40,48,.45);
}
.cert figcaption {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--ink-45);
  text-align: center;
  margin-top: .7rem;
  max-width: 15rem;
  margin-inline: auto;
  line-height: 1.45;
}

.ceremony__cert { display: block; max-width: 12rem; }
.ceremony__cert img { width: 100%; border: 1px solid var(--stone); border-radius: 2px; background: #fff; }
.ceremony__cert:hover img { border-color: var(--rose); }
@media (max-width: 40rem) { .ceremony__cert { max-width: 10rem; } }

/* The Behold widget upgrades from an unknown element to a defined custom
   element once its script runs. Until then, or if it never runs, the static
   grid stays visible rather than leaving a hole in the page. */
.ig behold-widget { display: block; min-height: 1px; }
.ig behold-widget:not(:defined) { display: none; }
.ig behold-widget:defined ~ .ig__grid--fallback { display: none; }

/* --- Couple portal ------------------------------------------------------ */

.pcard {
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: 3px;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  margin-bottom: 1.25rem;
}
.pcard h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .5em; }
.pcard h3 { font-size: 1.05rem; margin: 1.2rem 0 .4em; }

.portal-ok {
  background: #EEF3EA; border-left: 2px solid var(--sage);
  padding: .85rem 1rem; margin-bottom: 1.25rem; border-radius: 2px;
  font-family: var(--sans); font-size: .9375rem; color: #46543E;
}

.slots__day + .slots__day { margin-top: 1.1rem; }
.slots__day h3 { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: var(--ink-45); margin: 0 0 .5rem; }
.slots__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot {
  font-family: var(--sans); cursor: pointer;
  border: 1px solid var(--stone); background: var(--paper); color: var(--ink);
  border-radius: 3px; padding: .5rem .8rem; text-align: left; line-height: 1.25;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.slot:hover { border-color: var(--rose); }
.slot.is-picked { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slot.is-picked .slot__kind { color: #C9BFC5; }
.slot__time { display: block; font-size: .95rem; font-weight: 600; }
.slot__kind { display: block; font-size: .7rem; color: var(--ink-45); }

.slotpick { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--blush); }
.slotpick__what { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 .15rem; }
.slotpick__local { margin: 0 0 1rem; }

.ptot { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; font-family: var(--sans); font-size: .95rem; margin: 0 0 1rem; }
.ptot--clear { color: var(--sage); }
.plist { list-style: none; margin: 0 0 1rem; padding: 0; font-family: var(--sans); font-size: .875rem; }
.plist li { padding: .4rem 0; border-bottom: 1px solid var(--stone); }
.paybox { background: var(--shell); border-radius: 3px; padding: 1.1rem 1.25rem; margin-top: 1rem; }
.paybox h3 { margin-top: 0; }
.paybox p { font-size: .95rem; }

.tick { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--sans); font-size: .9375rem; }
.tick input { width: auto; margin-top: .25rem; }

.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { padding: .7rem 0; border-bottom: 1px solid var(--stone); font-family: var(--sans); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.doclist li:last-child { border-bottom: 0; }

.venuelist { list-style: none; margin: 0 0 1.5rem; padding: 0; columns: 2 16rem; column-gap: 2rem; }
.venuelist li { padding: .45rem 0; border-bottom: 1px solid var(--stone); break-inside: avoid; font-size: .98rem; }

/* --- Cookie notice ------------------------------------------------------ */

.cookiebar[hidden] { display: none !important; }
.cookiebar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 90;
  width: min(38rem, calc(100% - 2rem));
  background: var(--ink); color: #EDE6EA;
  border-radius: 3px;
  padding: 1rem 1.15rem;
  box-shadow: 0 18px 50px -20px rgba(20,16,20,.75);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .8125rem; line-height: 1.5;
}
.cookiebar p { margin: 0; flex: 1 1 18rem; }
.cookiebar__act { display: flex; gap: .5rem; flex: 0 0 auto; }
.cookiebar .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cookiebar .btn:hover { background: var(--blush); border-color: var(--blush); }
.cookiebar .btn--ghost { background: transparent; color: #EDE6EA; border-color: #6B616C; }
.cookiebar .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 34rem) { .cookiebar__act { width: 100%; } .cookiebar .btn { flex: 1; text-align: center; } }

.verdict__act { margin: .75rem 0 0; }
.verdict__act .btn { font-size: .85rem; padding: .5rem 1rem; }