/* ============================================================
   occasion.html (wedding base) — design-01 language, own grid.
   Like services.html and location.html, this page breaks from
   the fixed 1200px canvas: sections are responsive grids capped
   at 1200px. All classes are occ- prefixed to stay clear of
   canvas rules. Motion: load choreography on the hero (occ-rise),
   scroll reveals on the shared .fade-in observer (script.js),
   count-ups in the guest book section (occasion.js). Hero is
   deliberately NOT the services split (copy left / arch right /
   plate / stats / ticker) nor location's centered band: media
   sits LEFT with an overlapping detail shot, copy right, no
   ticker anywhere on the page. occasion.js drives the wedding
   timeline and the timeline -> inquiry form flow.
   ============================================================ */

.occ-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); }

.occ-eyebrow {
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--powder);
}
.occ-h2 {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08;
  text-transform: uppercase; letter-spacing: .02em;
}
.occ-h2 em { font-style: italic; text-transform: none; letter-spacing: 0; }
.occ-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 36px; background: var(--paleblue); text-decoration: none;
  border: 0; cursor: pointer;
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate);
  transition: background .45s, color .45s, transform .45s;
}
.occ-btn:hover { background: var(--powder); color: var(--cream); }
.occ-btn:focus-visible { outline: 2px solid var(--powder); outline-offset: 3px; }
.occ-ghost {
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
  border-bottom: 1px solid var(--powder); padding-bottom: 6px;
  transition: color .3s, border-color .3s;
}
.occ-ghost:hover { color: var(--powder); }

/* scroll reveal (rides the shared .fade-in observer in script.js) */
.occ-main .fade-in { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.occ-main .fade-in.is-visible { opacity: 1; transform: none; }

/* ---------- hero: media left, copy right, no ticker ---------- */
.occ-hero { background: var(--cream); overflow: hidden; }
.occ-hero-grid {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) clamp(22px, 4vw, 48px) clamp(64px, 8vw, 110px);
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(44px, 6vw, 96px); align-items: center;
}
@keyframes occ-rise { to { opacity: 1; transform: none; } }
.occ-rise { opacity: 0; transform: translateY(26px); animation: occ-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }

.occ-hero-media { position: relative; justify-self: start; width: min(430px, 100%); animation-delay: .3s; }
.occ-hero-arch { border-radius: 999px 999px 0 0; overflow: hidden; }
.occ-hero-arch img {
  width: 100%; aspect-ratio: 4 / 5.3; object-fit: cover; display: block;
  transform: scale(1.06);
  animation: eh-drift 14s ease-in-out infinite alternate;
}
.occ-hero-detail {
  position: absolute; right: -52px; bottom: 54px; width: min(210px, 46%);
  box-shadow: 0 18px 40px rgba(43, 58, 85, .2);
  animation-delay: .52s;
}
.occ-hero-detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.occ-hero-scribble {
  margin-top: 20px; font-family: var(--font-display); font-style: italic;
  font-weight: 200; font-size: 22px; color: var(--powder);
  animation-delay: .64s;
}

.occ-hero-copy .occ-eyebrow { display: block; margin-bottom: 26px; animation-delay: .05s; }
.occ-h1 {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(46px, 6.6vw, 96px); line-height: .98;
  text-transform: uppercase; letter-spacing: .02em;
}
.occ-h1 .occ-line { display: block; }
.occ-h1 em {
  font-style: italic; text-transform: none; letter-spacing: 0;
  color: var(--powder);
}
.occ-h1 .occ-line:nth-child(1) { animation-delay: .14s; }
.occ-h1 .occ-line:nth-child(2) { animation-delay: .26s; }
.occ-lede {
  max-width: 46ch; margin-top: 26px; font-size: 16px; line-height: 1.75;
  color: color-mix(in srgb, var(--slate) 78%, var(--cream));
  animation-delay: .4s;
}
.occ-hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; animation-delay: .52s; }
.occ-hero-note {
  margin-top: 44px; padding-top: 20px; max-width: 44ch;
  border-top: 1px solid rgba(43, 58, 85, .25);
  font-family: var(--font-display); font-style: italic; font-weight: 200;
  font-size: 19px; line-height: 1.5; animation-delay: .64s;
}

/* ---------- why weddings book us ---------- */
.occ-why { background: var(--linen); padding: clamp(64px, 8vw, 110px) 0; }
.occ-why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.occ-why-copy .occ-eyebrow { display: block; margin-bottom: 20px; }
.occ-why-copy > p { margin-top: 22px; max-width: 50ch; font-size: 15px; line-height: 1.8; color: color-mix(in srgb, var(--slate) 80%, var(--linen)); }
.occ-why-points { margin-top: clamp(30px, 3.4vw, 44px); display: grid; gap: 22px; }
.occ-point { border-top: 1px solid rgba(43, 58, 85, .22); padding-top: 18px; transition: border-color .4s; }
.occ-point:hover { border-top-color: var(--powder); }
.occ-point h3 {
  font-family: var(--font-sub); font-weight: 400;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
.occ-point p { margin-top: 10px; max-width: 52ch; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 78%, var(--linen)); }

.occ-why-media { position: relative; justify-self: center; width: min(380px, 100%); margin: 0; }
.occ-why-media::before {
  content: ""; position: absolute; inset: 44px -34px -34px 44px;
  background: var(--butter);
}
.occ-why-frame { position: relative; border-radius: 999px 999px 0 0; overflow: hidden; }
.occ-why-frame video { width: 100%; aspect-ratio: 4 / 5.1; object-fit: cover; display: block; }
.occ-why-media figcaption {
  position: relative; margin-top: 16px; text-align: center;
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--powder);
}

/* ---------- the night, hour by hour ---------- */
.occ-night { background: var(--cream); padding: clamp(72px, 9vw, 120px) 0; scroll-margin-top: 84px; }
.occ-night-head { max-width: 640px; margin-bottom: clamp(44px, 5vw, 68px); }
.occ-night-head .occ-eyebrow { display: block; margin-bottom: 18px; }
.occ-night-head p { margin-top: 18px; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 78%, var(--cream)); }

.occ-rail {
  display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px solid rgba(43, 58, 85, .25);
}
.occ-stop {
  position: relative; padding: 22px 6px 0; background: none; border: 0;
  text-align: left; cursor: pointer; flex: 1 1 0;
}
.occ-stop::before {
  content: ""; position: absolute; top: -5px; left: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--powder);
  transition: background .35s, transform .35s;
}
.occ-stop b {
  display: block; font-family: var(--font-display); font-weight: 200;
  font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1;
  color: var(--slate); transition: color .35s;
}
.occ-stop span {
  display: block; margin-top: 8px; font-family: var(--font-sub);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--slate) 62%, var(--cream)); transition: color .35s;
}
.occ-stop:hover span { color: var(--slate); }
.occ-stop:focus-visible { outline: 2px solid var(--powder); outline-offset: 3px; }
.occ-stop.is-live::before { background: var(--powder); transform: scale(1.5); }
.occ-stop.is-live b { color: var(--powder); }
.occ-stop.is-live span { color: var(--slate); }

.occ-stage { margin-top: clamp(36px, 4.4vw, 56px); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; }
.occ-stage-media { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.occ-stage-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.occ-stage-media img.is-live { opacity: 1; animation: eh-drift 14s ease-in-out infinite alternate; }
.occ-stage-card {
  position: relative; z-index: 1; margin-left: -64px;
  background: #fff; padding: clamp(26px, 2.8vw, 38px);
  box-shadow: 0 18px 40px rgba(43, 58, 85, .14);
}
.occ-stage-label {
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--powder); margin-bottom: 12px;
}
.occ-stage-note { display: none; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 82%, #fff); }
.occ-stage-note.is-live { display: block; }
.occ-stage-card .occ-btn { margin-top: 22px; width: 100%; }

/* ---------- the guest book (the page's dark chapter) ---------- */
.occ-book { background: var(--slate); color: var(--cream); padding: clamp(72px, 9vw, 120px) 0; }
.occ-book .occ-eyebrow { color: var(--paleblue); }
.occ-book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 6vw, 100px); align-items: center; }
.occ-book-media { position: relative; justify-self: start; width: min(380px, 100%); }
.occ-book-main { border-radius: 999px 999px 0 0; overflow: hidden; }
.occ-book-main img { width: 100%; aspect-ratio: 4 / 4.9; object-fit: cover; display: block; }
.occ-book-detail {
  position: absolute; right: -48px; bottom: -34px; width: min(190px, 46%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.occ-book-detail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.occ-book-copy .occ-eyebrow { display: block; margin-bottom: 20px; }
.occ-book-copy > p { margin-top: 22px; max-width: 50ch; font-size: 15px; line-height: 1.8; color: rgba(247, 248, 245, .75); }
.occ-book-stats { margin-top: clamp(34px, 4vw, 50px); display: flex; gap: clamp(26px, 3.4vw, 56px); flex-wrap: wrap; }
.occ-book-stat { border-left: 1px solid rgba(247, 248, 245, .3); padding-left: 16px; }
.occ-book-stat b {
  display: block; font-family: var(--font-display); font-weight: 200;
  font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--paleblue);
  font-variant-numeric: tabular-nums;
}
/* direct child only: the count-up span nested in <b> must keep the display size */
.occ-book-stat > span {
  display: block; margin-top: 8px; font-family: var(--font-sub); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 248, 245, .65);
}
.occ-book-copy .occ-ghost { display: inline-block; margin-top: clamp(30px, 3.4vw, 44px); color: var(--cream); border-bottom-color: var(--paleblue); }
.occ-book-copy .occ-ghost:hover { color: var(--paleblue); }

/* ---------- pages from the book (static tilted notes, no rotator) ---------- */
.occ-quotes { background: var(--butter); padding: clamp(64px, 8vw, 110px) 0; }
.occ-quotes-head { text-align: center; max-width: 620px; margin: 0 auto clamp(44px, 5.4vw, 68px); }
.occ-quotes-head .occ-eyebrow { display: block; margin-bottom: 18px; }
.occ-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.occ-note {
  margin: 0; background: #fff; padding: clamp(26px, 2.8vw, 36px);
  box-shadow: 0 14px 34px rgba(43, 58, 85, .14);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.occ-note:nth-child(1) { transform: rotate(-1.6deg); }
.occ-note:nth-child(2) { transform: rotate(1.1deg) translateY(14px); }
.occ-note:nth-child(3) { transform: rotate(-.8deg); }
.occ-note:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 26px 54px rgba(43, 58, 85, .2); }
.occ-note blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-weight: 200; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45;
}
.occ-note figcaption {
  margin-top: 18px; font-family: var(--font-sub); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--powder);
}
/* staggered reveal: the trio rises as one, each note a beat behind */
.occ-notes.fade-in .occ-note { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.occ-notes.fade-in.is-visible .occ-note { opacity: 1; }
.occ-notes.fade-in.is-visible .occ-note:nth-child(2) { transition-delay: .12s; }
.occ-notes.fade-in.is-visible .occ-note:nth-child(3) { transition-delay: .24s; }

/* ---------- faq: one centered column ---------- */
.occ-faq { background: var(--linen); padding: clamp(64px, 8vw, 110px) 0; }
.occ-faq-head { text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 5vw, 60px); }
.occ-faq-head .occ-eyebrow { display: block; margin-bottom: 18px; }
.occ-faq-head p { margin-top: 18px; font-size: 15px; line-height: 1.8; color: color-mix(in srgb, var(--slate) 78%, var(--linen)); }
.occ-faqs { max-width: 760px; margin: 0 auto; }
.occ-faqs .faq-q { font-size: 15px; }
/* animated open: grid-rows collapse, overriding the global display toggle */
.occ-faqs .faq-a {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.occ-faqs .faq-item.open .faq-a { grid-template-rows: 1fr; }
.occ-faqs .faq-a p {
  min-height: 0; padding: 0; font-size: 14.5px; line-height: 1.75;
  color: color-mix(in srgb, var(--slate) 80%, var(--linen));
}
.occ-faqs .faq-item.open .faq-a p { padding-bottom: 18px; }


/* ---------- hero note packages link ---------- */
.occ-hero-note a { color: var(--powder); }

/* ---------- value section hub CTA ---------- */
.occ-why-cta { margin-top: 30px; }

/* ---------- booths that fit (slot 4) ---------- */
.occ-booths { background: var(--linen); padding: clamp(64px, 8vw, 104px) 0; }
.occ-booths-head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px, 4vw, 54px); }
.occ-booths-head .occ-eyebrow { display: block; margin-bottom: 18px; }
.occ-booths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); max-width: 900px; margin: 0 auto; }
.occ-booth-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--slate);
  background: #fff; border: 1px solid rgba(43, 58, 85, .14);
  padding: clamp(24px, 2.4vw, 34px);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.occ-booth-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(43, 58, 85, .13); }
.occ-booth-img { margin: 0 auto 22px; width: min(220px, 100%); border-radius: 999px 999px 0 0; overflow: hidden; }
.occ-booth-img img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.occ-booth-card:hover .occ-booth-img img { transform: scale(1.05); }
.occ-booth-card h3 {
  text-align: center; font-family: var(--font-display); font-weight: 200;
  font-size: clamp(24px, 2.2vw, 30px);
}
.occ-booth-card p { margin-top: 12px; text-align: center; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--slate) 76%, #fff); }
.occ-booth-link {
  margin: 22px auto 0; font-family: var(--font-sub); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--powder);
  border-bottom: 1px solid var(--powder); padding-bottom: 5px;
}

/* ---------- review stars + context ---------- */
.occ-stars { display: block; color: var(--powder); font-size: 12px; letter-spacing: .34em; margin-bottom: 14px; }
.occ-note figcaption span { display: block; margin-top: 6px; color: var(--powder); }

/* ---------- mobile + motion safety ---------- */
@media (max-width: 900px) {
  .occ-booths-grid { grid-template-columns: 1fr; }
  .occ-hero-grid, .occ-why-grid, .occ-book-grid, .occ-notes, .occ-stage { grid-template-columns: 1fr; }
  .occ-hero-media { order: 2; justify-self: center; width: min(320px, 84vw); }
  .occ-hero-copy { order: 1; }
  .occ-hero-detail { right: -14px; bottom: 40px; }
  .occ-why-media { width: min(300px, 78vw); }
  .occ-why-media::before { inset: 34px -18px -22px 34px; }
  /* the dotted rail wraps awkwardly; stops become a grid with a left accent */
  .occ-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; border-top: 0; }
  .occ-stop { padding: 0 0 0 14px; border-left: 1px solid rgba(43, 58, 85, .25); transition: border-color .35s; }
  .occ-stop::before { display: none; }
  .occ-stop.is-live { border-left-color: var(--powder); }
  .occ-stage-card { margin: -48px 16px 0; }
  .occ-book-media { justify-self: center; width: min(300px, 78vw); }
  .occ-book-detail { right: -16px; bottom: -26px; }
  .occ-notes { gap: 30px; }
  .occ-note:nth-child(2) { transform: rotate(1.1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .occ-rise { animation: none; opacity: 1; transform: none; }
  .occ-hero-arch img, .occ-stage-media img.is-live { animation: none; transform: none; }
  .occ-main .fade-in,
  .occ-notes.fade-in .occ-note { transition: none; opacity: 1; }
  .occ-main .fade-in { transform: none; }
  .occ-note, .occ-stage-media img, .occ-btn { transition: none; }
}