/* ============================================================
   MAIN CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand palette */
  --c-peach:   #ffbe98;   /* logo bg / nav */
  --c-lavender:#d1c2d7;
--c-dustypink:#F4CFC7;
  --c-sage:   #C6C09C;
   --c-dsage:  #96927f;
  --c-honey:   #FFC98B;
  --c-slate:   #a4b8c1;
  --c-blush:   #F4CFC7;
  --c-rose:    #E79796; 
  --c-cream:   #fdf8f4;
  --c-ivory:   #f7f0ea;
  --c-dark:    #2e2420;
  --c-mid:     #6b5c56;
  --c-soft:    #b09e97;

  /* Typography */
  --f-cinzel:    'Cinzel', serif;
  --f-holiday:   'Cormorant Garamond', serif; /* closest web-safe to decorative Holiday style */
  --f-body:      'Jost', sans-serif;

  /* Layout */
  --nav-h:  75px;
  --max-w:  1180px;

  /* Rounding scale */
  --r-btn: 999px;      /* fully pill-shaped buttons */
  --r-photo: 26px;      /* standard rounded photo corners */
  --r-photo-sm: 18px;   /* smaller rounded elements */

  /* Grain overlay for vintage feel */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-cream);
  color: var(--c-slate);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.75;
  max-width: 100%;
  overflow-x: hidden;
    overscroll-behavior-x: none; /* kills the horizontal rubber-band itself */

}
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; object-fit: cover; }

/* ============================================================
   GRAIN TEXTURE HELPER
   ============================================================ */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  opacity: .4;
  z-index: 2;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--c-peach);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(210,140,110,.2);
}
.nav-links {
  display: flex;
  gap: 34px; 
  list-style: none;
}
.nav-links a {
  font-family: var(--f-cinzel);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .75;
  transition: opacity .2s;
}
.nav-links a:hover { opacity: 1; }

.nav-logo {
  /* Centre the logo absolutely over the nav — overflow left visible so the
     backgroundless artwork (name + sunrays) can spill below the bar into the hero */
  position: absolute;
  top: -20px;   /* Move up */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: var(--nav-h);
  overflow: visible;
  pointer-events: none;
  z-index: 7;
}
.nav-logo img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.nav-book {
  font-family: var(--f-cinzel);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 22px;
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
  border-radius: var(--r-btn);
  transition: all .22s;
}
.nav-book:hover {
  background: var(--c-dark);
  color: var(--c-cream);
}

/* ============================================================
   HERO — full-bleed editorial with text overlay
   ============================================================ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--c-dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: .55;
  filter: sepia(.18) contrast(.96);
}
/* Vintage vignette */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(46,36,32,.55) 100%),
    linear-gradient(to bottom, rgba(254,161,118,.12) 0%, transparent 40%, rgba(46,36,32,.4) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: calc(100% - var(--nav-h));
  padding: 0 clamp(24px,6vw,80px);
}
.hero-eyebrow {
  font-family: var(--f-cinzel);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-blush);
  margin-bottom: 18px;
  opacity: .9;
}
.hero-decorative {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(3.4rem, 8vw, 7rem);
  color: var(--c-cream);
  line-height: 1;
  letter-spacing: .02em;
  margin-bottom: -14px;
  opacity: .92;
  display: block;
  text-shadow: 0 2px 24px rgba(46,36,32,.3);
}
.hero-h1 {
  font-family: var(--f-cinzel);
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream);
  line-height: 1.12;
  text-shadow: 0 1px 20px rgba(46,36,32,.35);
  margin-bottom: 26px;
}
.hero-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hero-rule span { width: 48px; height: 1px; background: var(--c-blush); opacity: .6; display: block; }
.hero-rule i {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-blush);
  opacity: .8;
  user-select: none;
}
.hero-sub {
  font-family: var(--f-body);
  font-size: .8rem;
  letter-spacing: .14em;
  color: rgba(253,240,234,.72);
  margin-bottom: 40px;
  text-transform: uppercase;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Bottom caption bar */
.hero-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 clamp(20px,4vw,56px) 24px;
}
.hcap-item {
  display: flex;
  flex-direction: column;
}
.hcap-num {
  font-family: var(--f-cinzel);
  font-size: 1.5rem;
  color: var(--c-blush);
  line-height: 1;
}
.hcap-lbl {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(254,209,190,.55);
}
.hcap-location {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: .95rem;
  color: rgba(254,209,190,.65);
  letter-spacing: .04em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--f-cinzel);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 13px 30px;
  cursor: pointer;
  border: none;
  border-radius: var(--r-btn);
  transition: all .22s;
  display: inline-block;
}
.btn-fill {
  background: var(--c-peach);
  color: var(--c-dark);
}
.btn-fill:hover { background: var(--c-rose); color: var(--c-cream); }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(253,240,234,.5);
  color: var(--c-cream);
}
.btn-ghost:hover {
  border-color: var(--c-cream);
  background: rgba(253,240,234,.1);
}
.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
}
.btn-outline-dark:hover { background: var(--c-dark); color: var(--c-cream); }
.btn-outline-peach {
  background: transparent;
  border: 1px solid var(--c-peach);
  color: var(--c-mid);
}
.btn-outline-peach:hover { background: var(--c-peach); color: var(--c-dark); }


/* ============================================================
   BORDER STRIP — decorative image divider (replaces text strip)
   ============================================================ 
.border-strip {
  width: 100%;
  line-height: 0;
  background: var(--c-peach);
}
.border-strip img {
  width: 100%;
  height: auto;
  display: block;
}
*/


/* ============================================================
   SECTION HELPERS
   ============================================================ */
.s-eyebrow {
  font-family: var(--f-cinzel);
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-rose);
  display: block;
  margin-bottom: 10px;
}
.s-title {
  font-family: var(--f-cinzel);
  font-size: clamp(1.7rem, 2.8vw, 2.65rem);
  font-weight: 400;
  color: var(--c-dark);
  letter-spacing: .06em;
  line-height: 1.2;
}
.s-decorative {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.6rem);
  color: var(--c-peach);
  line-height: 1;
  display: block;
  margin-top: 2px;
  opacity: .75;
}
.s-rule {
  width: 32px;
  height: 1px;
  background: var(--c-peach);
  margin: 18px 0;
}
.s-body {
  font-family: var(--f-body);
  font-size: .83rem;
  color: var(--c-mid);
  line-height: 1.9;
  font-weight: 300;
}


/* ============================================================
   ABOUT
   ============================================================ */
#about {
  padding: clamp(70px,9vw,110px) 0;
  position: relative;
  overflow: hidden;
}
/* Soft lavender smear */
#about::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
}
.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 72px;
  align-items: center;
}
.about-img-col { position: relative; }
.about-img-frame {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-blush);
  position: relative;
  border-radius: var(--r-photo) var(--r-photo) var(--r-photo-sm) var(--r-photo-sm);
}
.about-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(.9) contrast(1.05); /* change to adjust to writing and make it more visible */
}
/* Handwritten note — sticks out over the top-left corner of the photo */
.about-note {
  position: absolute;
  top: -34px;
  left: -88px;
  width: 300px;
  height: 300px;
  z-index: 3;
  transform: rotate(-6deg);
  pointer-events: none;
}
.about-note img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(46, 36, 32, 0.251));
}
/* Decorative corner stamp */
.about-stamp {
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 120px;
  height: 120px;
  background: var(--c-peach);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 2;
}
.about-stamp-num {
  font-family: var(--f-cinzel);
  font-size: 1.85rem;
  color: var(--c-dark);
  line-height: 1;
}
.about-stamp-lbl {
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .7;
  text-align: center;
  padding: 0 8px;
}
.about-corner-deco {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 50px;
  height: 50px;
  border-top: 2px solid var(--c-lavender);
  border-left: 2px solid var(--c-lavender);
  border-radius: 12px 0 0 0;
  opacity: .5;
  z-index: 1;
}

.about-text { position: relative; }
.about-text .s-body { max-width: 450px; }
.about-text .s-body + .s-body { margin-top: 14px; }
.about-features {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-blush);
}
.af {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-blush);
}
.af-dot {
  flex-shrink: 0;
  width: 16px;
  font-size: .8rem;
  line-height: 1;
  color: var(--c-dustypink);
  margin-top: 3px;
}
.af-dot::before {
  content: '✦';
}
.af-text {
  font-size: .8rem;
  color: var(--c-mid);
  line-height: 1.6;
}
.af-title {
  font-family: var(--f-cinzel);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--c-dark);
  display: block;
  margin-bottom: 2px;
}


/* ============================================================
   TESTIMONIAL
   ============================================================ */
#testimonial {
  background: var(--c-rose);
 padding: clamp(100px,13vw,140px) 0;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: visible;
}
#testimonial::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.01;
  pointer-events: none;
}
/* Full-bleed floral pattern overlay, tiled evenly edge to edge */
#testimonial::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/static/images/optimized/hol-deco-pattern2.webp');
  background-repeat: repeat;
  background-size: 2140px auto;
  background-position: center;
  opacity: .17;
  pointer-events: none;
  z-index: 0;
}
.t-inner {
  max-width: 1040px;
  min-height: 480px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(26px,3.2vw,34px) clamp(64px,8vw,100px);
  position: relative;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(253,248,244,.94);
  border-radius: var(--r-photo);
  box-shadow: 0 20px 46px rgba(46,36,32,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Inset frame accent, echoes the border treatment used on the lessons photo */
.t-inner::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(254,161,118,.3);
  border-radius: calc(var(--r-photo) - 10px);
  pointer-events: none;
}
.t-ornament {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(8rem, 8vw, 8rem);
  color: var(--c-dark);
  opacity: .09;
  display: block;
  user-select: none;
  line-height: .7;
  transform: translateY(50px);
  margin-bottom: 40px;
}
.t-quote {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  color: var(--c-dark);
  line-height: 1.72;
  margin-bottom: 20px;
  letter-spacing: .01em;
  max-width: 780px;
  text-align: center;
}
.t-name {
  font-family: var(--f-cinzel);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .7;
}
.t-dots {
   

  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.t-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-dark);
  opacity: .3;
  cursor: pointer;
  border: none;
  transition: opacity .2s, transform .2s;
}
.t-dot.on { opacity: .8; transform: scale(1.4); }



/* ============================================================
   SERVICES
   ============================================================ */
#services {
  padding: clamp(70px,9vw,110px) 0;
  background: var(--c-cream);
  position: relative;
  overflow: hidden;
}
/* Faded floral/makeup bg */
#services::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(255, 190, 152, 0.75) 0%,   /* --c-peach */
    rgba(255, 225, 210, 0.55) 50%,  /* lighter peach */
    rgba(231, 151, 150, 0.70) 100%  /* --c-rose */
    ),
    url('/static/images/ser-menu-n.jpg') center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
#services::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.services-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.services-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
  z-index: 1;
}
.svc {
  background: rgba(253,248,244,.92);
  border: 1px solid rgba(254,161,118,.18);
  border-radius: var(--r-photo);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: background .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}
.svc:hover {
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 32px rgba(46,36,32,.08);
}
/* Decorative corner — tidy, single hairline frame per card */
.svc::before {
  content: '';
  position: absolute;
  top: 10px; right: 10px; bottom: 10px; left: 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--r-photo) - 8px);
  opacity: 0;
  transition: opacity .25s, border-color .25s;
  pointer-events: none;
  z-index: 2;
}
.svc:hover::before { opacity: 1; border-color: rgba(254,161,118,.4); }
/* Thin decorative photo strip — roughly a third of the card */
.svc-img {
  width: 100%;
   height: clamp(140px, 20vw, 200px); /*height: clamp(110px, 15vw, 155px);*/
  overflow: hidden;
  position: relative;
}
.svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: sepia(.1) contrast(.97);
  transition: transform .55s ease;
}
.svc:hover .svc-img img { transform: scale(1.05); }
.svc-body {
  padding: 26px 28px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.svc-name {
  font-family: var(--f-cinzel);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--c-dark);
  margin-bottom: 12px;
}
.svc-desc {
  font-size: .79rem;
  color: var(--c-mid);
  line-height: 1.82;
  margin-bottom: 20px;
}
.svc-price {
  font-family: var(--f-cinzel);
  font-size: 1.3rem;
  color: var(--c-dark);
  letter-spacing: .04em;
}
.svc-price em {
  font-family: var(--f-body);
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-soft);
  margin-left: 6px;
}
/* Small, barely-there click cue */
.svc-arrow {
  display: block;
   margin-top: auto;
  font-family: var(--f-body);
  font-size: .9rem;
  color: var(--c-rose);
  opacity: .35;
  transform: translateX(0);
  transition: opacity .25s, transform .25s;
}
.svc:hover .svc-arrow {
  opacity: .85;
  transform: translateX(4px);
}
/* ============================================================
   SERVICE DETAILS — one beautiful section per offering
   ============================================================ */
#service-details {
  background: var(--c-ivory);
  padding: clamp(70px,9vw,110px) 0 clamp(20px,4vw,40px);
  position: relative;
  overflow: hidden;
}
#service-details::before {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254,161,118,.10) 0%, transparent 70%);
  pointer-events: none;
}
.details-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.details-list {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  position: relative;
  z-index: 1;
}
.detail-row {
 display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
 align-items: center;   /* was start */
   padding: 54px 0;
  border-top: 1px solid var(--c-blush);
}
.details-list .detail-row:first-child { border-top: none; }
.details-list .detail-row:last-child { border-bottom: none; }.detail-row.reverse .detail-media { order: 2; }
.detail-row.reverse .detail-copy { order: 1; }

.detail-row.reverse {
  grid-template-columns: 1fr 1.35fr; /* swap track sizes to match the swapped order */
}

.detail-row {
  position: relative; /* WITHOUT THIS THE DIMONDS DISAPPEAR */
}

.detail-row::before {
  content: '✦';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  color: var(--c-dustypink);
  background: var(--c-ivory);
  padding: 0 10px;
  font-size: 1rem;
  line-height: 1;
  z-index: 5;
}

.details-list .detail-row:first-child::before {
  display: none; /* SO THE DIMOND DOESNT DISPLAY IN FIRST TOP INSTANCE */
}
/* ---- Image side: window-shaped frame — fully rounded top ---- */
.detail-media { position: relative; }
.detail-caption {
  display: block;
  font-family: var(--f-cinzel);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-rose);
  min-height: 1.4em;   /* reserves 1 line's worth of height even if it never wraps */
  margin-bottom: 14px;
}
.detail-frame {
  border: 1px solid rgba(254,161,118,.3);
  padding: 15px;
  border-radius: 50% 50% 0 0 / 13% 13% 0 0;
  border-bottom-left-radius: calc(var(--r-photo-sm) + 6px);
  border-bottom-right-radius: calc(var(--r-photo-sm) + 6px);
  overflow: hidden;
   margin-bottom: 24px; /* was 16px — more room before the arrows */
}
.detail-carousel { position: relative; }
.detail-carousel .carousel-track-outer {
  overflow: hidden;
  border-radius: 50% 50% 10px 10px / 14% 14% 0 0;
  border-bottom-left-radius: var(--r-photo-sm);
  border-bottom-right-radius: var(--r-photo-sm);
}
.detail-slide {
  flex: 0 0 100%;
  width: 100%;
  height: clamp(320px, 40vw, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; /* this was changed from var cream to none and it caused the white border to disappear*/
  overflow: hidden;

}
.detail-slide img {

width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

 
}

  .detail-frame {
  padding: clamp(10px, 1.5vw, 15px);
}
.detail-slide {
  aspect-ratio: 4 / 5;
  height: auto;
}
.detail-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Delicate below-photo controls: plain arrow glyphs either side of the dots, no boxes */
.detail-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}
.detail-controls .car-dots { margin-top: 0; }
.detail-nav-btn {
  background: none;
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;  display: flex; align-items: center; justify-content: center;  /* <NEW  OLD> padding: 6px 8px;*/
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  color: var(--c-rose);
  opacity: .45;
  transition: opacity .2s, transform .2s, background .2s;
}
.detail-nav-btn:hover { opacity: 1; background: rgba(254,161,118,.12); }
.detail-nav-btn.prev:hover { transform: translateX(-2px); }
.detail-nav-btn.next:hover { transform: translateX(2px); }

.detail-copy { position: relative; }
.detail-num {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--c-lavender);
  opacity: .5;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.detail-name {
  font-family: var(--f-cinzel);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--c-dark);
  margin-bottom: 4px;
}
.detail-tagline {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-rose);
  margin-bottom: 18px;
  display: block;
}
.detail-copy .s-body { max-width: 460px; margin-bottom: 22px; }
.detail-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.detail-price {
  font-family: var(--f-cinzel);
  font-size: 1.25rem;
  color: var(--c-dark);
  letter-spacing: .04em;
  white-space: nowrap;
}
.detail-price em {
  font-family: var(--f-body);
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-soft);
  margin-left: 6px;
}


@media(max-width:900px){
  .detail-row { grid-template-columns: 1fr; gap: 28px; }
  .detail-row.reverse .detail-media { order: 1; }
  .detail-row.reverse .detail-copy { order: 2; }
  .detail-slide { height: clamp(280px, 62vw, 480px); }
}

/* ============================================================
   GALLERY — editorial mosaic + two big feature photos
   ============================================================ */
#gallery {
  padding: clamp(70px,9vw,110px) 0;
  background: var(--c-ivory);
}
.gallery-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 18px;
}
.gallery-decorative {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 4rem);
  color: var(--c-sage);
  opacity: .5;
  line-height: 1;
  display: block;
  margin-top: 4px;
}
/* Two big feature photos */
.gallery-features {
  max-width: var(--max-w);
  margin: 0 auto 40px;
  padding: 0 clamp(20px,4vw,56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gallery-feature-photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--c-blush);
}
.gallery-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(.08) contrast(.96);
}
.gallery-feature-label {
  position: absolute;
  bottom: 18px; left: 22px;
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(253,240,234,.9);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
/* Carousel */
.carousel-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  position: relative;
}
.carousel-track-outer { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 8px;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.detail-carousel .carousel-track {
  gap: 0;
}
.carousel-slide {
  flex: 0 0 calc(25% - 6px);
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-blush);
  position: relative;
  border-radius: var(--r-photo);
}
.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .65s ease;
  filter: sepia(.08) contrast(.96);
}
.carousel-slide:hover img { transform: scale(1.04); }
/* Editorial caption on hover */
.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(to top, rgba(46,36,32,.55) 0%, transparent 100%);
  z-index: 2;
  opacity: 0;
  transition: opacity .3s;
}
.carousel-slide:hover .slide-caption { opacity: 1; }
.slide-caption span {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: .9rem;
  color: rgba(253,240,234,.85);
  letter-spacing: .03em;
}
.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: var(--c-cream);
  border: 1px solid var(--c-blush);
  border-radius: 50%;
  color: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: all .2s;
  font-size: 1rem;
  user-select: none;
}
.car-arrow:hover { background: var(--c-dark); color: var(--c-cream); border-color: var(--c-dark); }
.car-prev { left: -4px; }
.car-next { right: -4px; }
.car-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
}
.car-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blush);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background .25s, transform .25s;
}
.car-dot.on { background: var(--c-peach); transform: scale(1.5); }

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

/* ============================================================
   LESSONS — extra section unique to Hollie
   ============================================================ */
#lessons {
  background: var(--c-sage);
  padding: clamp(70px,9vw,110px) 0;
  position: relative;
  overflow: hidden;
}
#lessons::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .5;
  pointer-events: none;
}
.lessons-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lessons-img {
  position: relative;
  aspect-ratio: 4/4;
  overflow: hidden;
  background: rgba(164,184,193,.15);
    border-radius: var(--r-photo);   /* add this */
}
.lessons-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: .65;
  filter: sepia(.15) contrast(.95);
}
/* changed to match the light col */
.lessons-img-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: clamp(2rem,4vw,3.5rem);
  color: rgba(255, 230, 221, 0.521);   /* was rgba(253,240,234,.55) — cream on sage is invisible */
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
/* Border accent */
.lessons-img::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(254,161,118,.25);
  z-index: 2;
    border-radius: calc(var(--r-photo) - 10px);   /* add this */
  pointer-events: none;
}

/* STRAT this is where changed to sage light colours */
.lessons-text .s-title { color: var(--c-dark); }
.lessons-text .s-eyebrow { color: var(--c-rose); opacity: .9; }
.lessons-text .s-body { color: rgba(46,36,32,.65); }

.lessons-types {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(46,36,32,.14);
}
.lt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(46,36,32,.14);
}
.lt-name {
  font-family: var(--f-cinzel);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--c-dark);
  opacity: .85;
}
.lt-detail {
  font-size: .74rem;
  color: rgba(46,36,32,.5);
  letter-spacing: .06em;
}

/* END this is where changed to sage light colours */

.lessons-text .btn { margin-top: 36px; }
/* ============================================================
   CONTACT
   ============================================================ */
#contact {
  padding: clamp(70px,9vw,110px) 0;
  background: var(--c-cream);
  position: relative;
  overflow: hidden;
}


/* Faint floral pattern growing up from the footer boundary */
#contact::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 22vw, 240px);
  background-image: url('/static/images/hol-deco-pattern.png');
  background-repeat: repeat-x;
  background-size: 950px auto;
  background-position: bottom center;
  opacity: .1;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,56px);
  text-align: center;
  position: relative;
  z-index: 1;
}
.contact-inner .s-decorative,
.contact-inner .s-rule { margin-left: auto; margin-right: auto; }
.contact-info .s-body {
  max-width: 420px;
  margin: 0 auto 40px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  max-width: 380px;
  margin: 0 auto;
}
.cd {
  border-top: 1px solid var(--c-blush);
  padding: 18px 0;
}
.cd-label {
  font-family: var(--f-cinzel);
  font-size: .54rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-peach);
  margin-bottom: 5px;
  display: block;
}
.cd-val {
  font-family: var(--f-cinzel);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--c-dark);
}
.contact-inner-v4{
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:1;
}
.contact-inner-v4 .contact-info{ text-align:left; }
.contact-inner-v4 .s-decorative,
.contact-inner-v4 .s-rule{ margin-left:0; margin-right:0; }
.contact-inner-v4 .contact-details{ margin:0; }

.contact-inner-v4.centered .contact-info {
  text-align: center;
}
.contact-inner-v4.centered .s-decorative,
.contact-inner-v4.centered .s-rule {
  margin-left: auto;
  margin-right: auto;
}
.contact-inner-v4.centered .contact-info .s-body {
  margin: 0 auto 40px;
}
.contact-inner-v4.centered .contact-details {
  margin: 0 auto;
}


.calendly-card{
  position:relative;
  text-align:center;
  background:rgba(198, 192, 156, 0.221);/* was rgba(198, 192, 156, 0.221);SAGErgba(253,248,244,.94)CREAM rgba(255,190,152,.14)PEACH*/
  border-radius:var(--r-photo);
  box-shadow:0 20px 46px rgba(46,36,32,.10);
  padding:clamp(26px,3vw,34px) clamp(20px,3vw,32px) 28px;
  overflow:hidden;
}
.calendly-card::before{
  content:'';
  position:absolute; inset:0;
 
  background-repeat:repeat;
  background-size:900px auto;
  background-position:center;
  opacity:.1;
  pointer-events:none;
}
.calendly-card::after{
  content:'';
  position:absolute; inset:12px;
  border:1px solid rgba(254,161,118,.3);
  border-radius:calc(var(--r-photo) - 8px);
  pointer-events:none;
}
.calendly-card > *{ position:relative; z-index:1; }
.calendly-card-eyebrow{
  font-family:var(--f-cinzel);
  font-size:.54rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-rose);
  display:block;
  margin-bottom:6px;
}
.calendly-card-title{
  font-family:var(--f-cinzel);
  font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:400;
  letter-spacing:.05em;
  color:var(--c-dark);
}
.calendly-card-decorative{
  font-family:var(--f-holiday);
  font-style:italic;
  font-size:1.02rem;
  color:var(--c-rose);
  opacity:.85;
  display:block;
  margin-top:2px;
}
.calendly-card .rad-diamond span{ color:var(--c-cream); }
.calendly-frame{
  border:1px solid rgba(254,161,118,.3);
  border-radius:var(--r-photo-sm);
  padding:8px;
  background:var(--c-cream);
  overflow:hidden;
  max-width:100%;
}
.calendly-frame .calendly-inline-widget{ border-radius:calc(var(--r-photo-sm) - 6px); overflow:hidden; }

@media(max-width:900px){
  .contact-inner-v4{ grid-template-columns:1fr; gap:36px; }
  .contact-inner-v4 .contact-info{ text-align:center; }
  .contact-inner-v4 .s-decorative,
  .contact-inner-v4 .s-rule{ margin-left:auto; margin-right:auto; }
}
/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--c-peach);
  padding: 40px clamp(20px,4vw,56px) 26px;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .4;
  pointer-events: none;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.footer-radiance {
  font-family: var(--f-cinzel);
  font-size: 1.5rem;
  letter-spacing: .005em;
  color: var(--c-dark);
  opacity: .85;
}
.footer-byhollie {
  font-family: var(--f-holiday);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--c-dark);
  opacity: .55;
  line-height: .9;
  margin-top: -2px;
}
.footer-links {
  display: flex;
  gap: 26px;
  list-style: none;
}
.footer-links-left { justify-content: flex-start; }
.footer-links-right { justify-content: flex-end; }
.footer-links a {
  font-family: var(--f-cinzel);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .55;
  transition: opacity .2s;
  white-space: nowrap;
}
.footer-links a:hover { opacity: .9; }
.footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(46,36,32,.35);
  border-radius: 50%;
  color: var(--c-dark);
  opacity: .65;
  transition: opacity .22s, background .22s, border-color .22s, transform .22s;
  flex-shrink: 0;
}
.footer-social-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.footer-social-icon:hover {
  opacity: 1;
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-cream);
  transform: translateY(-2px);
}
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(46,36,32,.14);
}
.footer-copy {
  font-family: var(--f-cinzel);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .4;
}
.footer-credit {
  font-family: var(--f-cinzel);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-dark);
  opacity: .45;
  transition: opacity .2s;
}
.footer-credit:hover { opacity: .85; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .lessons-inner { grid-template-columns: 1fr; gap: 36px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .carousel-slide { flex: 0 0 calc(50% - 4px); }
  .detail-row, .detail-row.reverse { grid-template-columns: 1fr; gap: 28px; }
  .detail-row.reverse .detail-img { order: 1; }
  .detail-row.reverse .detail-copy { order: 2; }
}
@media(max-width:580px){
  .nav-links { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-links-left, .footer-links-right { justify-content: center; flex-wrap: wrap; }
  .footer-right { flex-direction: column; justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .carousel-slide { flex: 0 0 100%; }
  .hero-caption { display: none; }
  .nav-logo img { width: 90px; height: 90px; }
}

/* ============================================================
   FADE IN ON SCROLL (CSS only via animation-timeline when supported,
   fallback via JS IntersectionObserver)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   MODULE: rad-widget
   Everything below is self-contained and reskinnable via these variables.
   Drop the whole <div class="rad-widget">...</div> block anywhere; only
   the two image paths (media + pattern) and the copy need to change.
   ========================================================================== */
/* ==========================================================================
   MODULE: rad-widget
   Everything below is self-contained and reskinnable via these variables.
   Drop the whole <div class="rad-widget">...</div> block anywhere; only
   the two image paths (media + pattern) and the copy need to change.
   ========================================================================== */
.rad-widget{
  --rad-accent:        var(--c-sage);   /* the "stays" launcher button        */
  --rad-accent-hover:  var(--c-dsage);
  --rad-card-bg:       var(--c-cream);   /* popup surface — light, not dark    */
  --rad-card-border:   var(--c-peach);
  --rad-diamond:       var(--c-dustypink);
  position:fixed; right:26px; bottom:26px; z-index:60;
}

/* ---- sub-module: launcher bubble (calendar icon, honey, persistent) ---- */
.rad-bubble{
  width:60px; height:60px; border-radius:50%;
  background:var(--rad-accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(46,36,32,.22);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.rad-bubble:hover{ background:var(--rad-accent-hover); transform:translateY(-3px); box-shadow:0 16px 34px rgba(46,36,32,.28); }
.rad-bubble.is-open{ transform:scale(.9); opacity:0; pointer-events:none; }
.rad-bubble svg{ width:27px; height:27px; }

.rad-badge{
  position:absolute; top:-3px; right:-3px;
  width:15px; height:15px; border-radius:50%;
  background:var(--c-rose); border:2px solid var(--c-cream);
  animation:rad-pulse 2.2s ease-in-out infinite;
}
@keyframes rad-pulse{
  0%,70%,100%{ transform:scale(1); opacity:1; }
  35%{ transform:scale(1.35); opacity:.7; }
}

/* ---- sub-module: animated calendar mark inside the bubble ---- */
.rad-cal-ring{ transform-origin:center; animation:rad-ring-pulse 2.4s ease-in-out infinite; }
.rad-cal-check{ stroke-dasharray:14; stroke-dashoffset:14; animation:rad-draw 2.4s ease-in-out infinite; }
@keyframes rad-ring-pulse{
  0%,60%,100%{ opacity:.4; transform:scale(1); }
  30%{ opacity:1; transform:scale(1.12); }
}
@keyframes rad-draw{
  0%,25%{ stroke-dashoffset:14; opacity:0; }
  45%,75%{ stroke-dashoffset:0; opacity:1; }
  95%,100%{ stroke-dashoffset:0; opacity:0; }
}

/* ---- sub-module: card shell (light bg + faded testimonial-style pattern) ---- */
.rad-card{
  position:absolute; right:0; bottom:0;
  width:340px; max-width:calc(100vw - 40px);
  background:var(--rad-card-bg);
  border-radius:var(--r-photo);
  box-shadow:0 24px 56px rgba(46,36,32,.18);
  overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.96);
  pointer-events:none;
  transition:opacity .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1);
}
.rad-card.is-open{ opacity:1; transform:none; pointer-events:auto; }

/* faded floral pattern, same treatment as #testimonial::after — sits behind the media/body via z-index:0 */
.rad-card::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('/static/images/hol-deco-pattern.png');
  background-repeat:repeat;
  background-size:480px auto;
  background-position:center;
  opacity:.12;
  pointer-events:none;
  z-index:0;
}
/* inset hairline frame, echoes .t-inner accent — sits above everything */
.rad-card::after{
  content:'';
  position:absolute; inset:10px;
  border:1px solid rgba(254,161,118,.3);
  border-radius:calc(var(--r-photo) - 6px);
  pointer-events:none;
  z-index:2;
}

.rad-card-close{
  position:absolute; top:14px; right:14px; z-index:4;
  width:28px; height:28px; border-radius:50%;
  background:rgba(253,248,244,.7); border:none; color:var(--c-rose);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; line-height:1;
  transition:background .2s, transform .2s;
}
.rad-card-close:hover{ background:var(--c-cream); transform:rotate(90deg); }

/* ---- sub-module: media, borrowed from .detail-frame / .detail-carousel ----
   position:relative is required here so z-index:1 actually applies, putting
   the photo above .rad-card::before (the pattern) in the stacking order —
   without it this layer is non-positioned and the pattern paints over the photo. */
.rad-card-media-wrap{ position:relative; z-index:1; padding:20px 20px 0; }
.rad-card-frame{
  border:1px solid rgba(254,161,118,.35);
  padding:12px;
  border-radius:50% 50% 0 0 / 15% 15% 0 0;
  border-bottom-left-radius:var(--r-photo-sm);
  border-bottom-right-radius:var(--r-photo-sm);
  overflow:hidden;
  background:var(--c-cream);
}
.rad-card-media{
  aspect-ratio:4/3;
  border-radius:50% 50% 0 0 / 15% 15% 0 0;
  border-bottom-left-radius:var(--r-photo-sm);
  border-bottom-right-radius:var(--r-photo-sm);
  overflow:hidden;
  background:linear-gradient(135deg,var(--c-blush) 0%,var(--c-lavender) 100%);
}
.rad-card-media img{ width:100%; height:100%;  }

/* ---- sub-module: diamond divider, matches .detail-row::before ---- */
.rad-diamond{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  margin-top:-1px;
}
.rad-diamond span{
  color:var(--rad-diamond);
  background:var(--c-cream);
  padding:0 10px;
  font-size:.9rem;
  line-height:1;
}

/* ---- sub-module: copy body ---- */
.rad-card-body{ position:relative; z-index:1; padding:14px 26px 26px; text-align:center; }
.rad-card-eyebrow{
  font-family:var(--f-cinzel); font-size:.54rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-rose); display:block; margin-bottom:8px;
}
.rad-card-title{
  font-family:var(--f-cinzel); font-size:1.15rem; font-weight:500; letter-spacing:.03em;
  color:var(--c-dark); margin-bottom:2px;
}
.rad-card-decorative{
  font-family:var(--f-holiday); font-style:italic; font-size:1.3rem; color:var(--c-rose);
  opacity:.8; display:block; margin-bottom:10px;
}
.rad-card-copy{ font-size:.78rem; line-height:1.75; color:var(--c-mid); margin-bottom:18px; }
.rad-card-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-cinzel); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  padding:12px 24px; background:var(--rad-accent); color:var(--c-dark); border-radius:var(--r-btn);
  transition:background .22s; text-decoration:none;
}
.rad-card-cta:hover{ background:var(--rad-accent-hover); }