/* ============================================================
   occasion.html (wedding base) — zephyr language, own grid.
   Like packages.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 nor location's centered
   band: "the still" (2026-07-24) — a quiet dark composition
   over a fixed black-and-white photo, keyword h1 as the small
   kicker line, emotional display lines, one outlined CTA,
   corner captions; no ticker anywhere on the page. occasion.js
   drives the wedding 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;
  /* AFTER DARK remap, identical to the .loc-btn call in css/location.css: the
     kit filled this with --paleblue, the light accent of the zephyr palette.
     Inverted here (#2c2622) it sits against dark walls and the now-dark stage
     card with no visible edge, so the primary CTA disappeared. Gold fill with
     the colorway's darkest text is its own active-state pair. */
  padding: 17px 36px; background: var(--powder); text-decoration: none;
  border: 0; cursor: pointer;
  font-family: var(--font-sub); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sage);
  transition: background .45s, color .45s, transform .45s;
}
.occ-btn:hover { background: var(--cream); color: var(--sage); }
.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: the still (quiet dark, fixed b/w photo; picked 2026-07-24) ----------
   The photo is position: fixed and the section clips it with clip-path:
   inset(0), so the image holds still while the page scrolls past (the
   clip-path is what keeps the fixed layer from painting outside the hero;
   it does NOT create a containing block, so the photo stays viewport-fixed). */
.occ-still {
  position: relative; clip-path: inset(0);
  min-height: calc(100vh - 84px); /* the sticky menu is 84px */
  display: grid; align-items: center; justify-items: center; text-align: center;
  padding: 110px 40px 120px;
  background: #10141d; color: var(--cream);
}
.occ-still-bg { position: fixed; inset: 0; z-index: 0; }
.occ-still-bg img,
.occ-still-bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: grayscale(1) brightness(.36) contrast(1.1);
}
@keyframes occ-rise { to { opacity: 1; transform: none; } }
.occ-rise { opacity: 0; transform: translateY(20px); animation: occ-rise 1.2s cubic-bezier(.2,.7,.2,1) forwards; }

.occ-still-copy { position: relative; z-index: 1; max-width: 900px; }
.occ-still-kicker {
  font-family: var(--font-sub); font-weight: 400; font-size: 12px;
  letter-spacing: .44em; text-transform: uppercase; line-height: 1.9;
  color: rgba(247, 248, 245, .8); animation-delay: .15s;
}
.occ-still-display {
  margin-top: 40px; font-family: var(--font-display); font-weight: 200;
  font-size: clamp(56px, 8.6vw, 134px); line-height: 1.02; letter-spacing: .01em;
}
.occ-still-display span { display: block; }
.occ-still-display span:nth-child(1) { animation-delay: .35s; }
.occ-still-display span:nth-child(2) { animation-delay: .55s; }
.occ-still-cta {
  display: inline-block; margin-top: 54px; font-size: 15px; color: var(--cream);
  text-decoration: none; border: 1px solid rgba(247, 248, 245, .85); padding: 18px 42px;
  transition: background .4s, color .4s; animation-delay: .8s;
}
.occ-still-cta:hover { background: var(--cream); color: var(--slate); }
.occ-still-corner {
  position: absolute; z-index: 1; bottom: 40px;
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(247, 248, 245, .72); text-decoration: none;
  animation-delay: 1s; transition: color .3s;
}
.occ-still-corner.is-left { left: 44px; }
.occ-still-corner.is-mid { left: 0; right: 0; text-align: center; pointer-events: none; }
.occ-still-corner.is-right { right: 44px; }
a.occ-still-corner:hover { color: var(--cream); }

/* ---------- 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; }
/* AFTER DARK: this hairline hardcoded the ORIGINAL kit navy as a literal
   (rgba(43,58,85,.22)), never a variable, so neither the colorway nor the
   completion layer's ground swap could reach it and the three rules read as
   invisible on --linen. Same fix the completion layer makes for .spin-num and
   the faq hairlines: same role, same alpha, the colorway's light slate. */
.occ-point { border-top: 1px solid rgba(239, 233, 221, .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;
  /* AFTER DARK: this caption is NOT on the section ground, it sits on the
     --butter slab that ::before pushes 34px past the frame. Under the light
     palette that was blue ink on pale yellow; After Dark makes --butter a mid
     gold (#b98a34) and --powder gold too, so the caption measured 1.33:1 and
     read as an empty band. Takes the #17130f the colorway already uses for
     anything sitting on gold (.ei-row:hover, and the completion layer's
     on-gold button rule). Measured after: 5.71:1. */
  text-transform: uppercase; color: #17130f;
}

/* ---------- the night, hour by hour ---------- */
/* GROUND: not set here. style.css's AFTER DARK INTERIOR + CHROME COMPLETION
   LAYER (bottom of that file) paints .occ-night --linen with !important, and
   the rail #201a15, as part of the cross-page sweep. This file deliberately
   states no background for the section so there is no dead rule contradicting
   the live one. Measured on that ground: head 7.36 to 14.76:1, rail 7.18 to
   14.53:1, card 6.23 to 12.78:1, button 7.71:1. */
.occ-night { 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;
  /* AFTER DARK remap: hairline was the kit's dark --slate at 25%, invisible on
     the dark wall. Same role, the colorway's light --slate at the same alpha. */
  border-top: 1px solid rgba(239, 233, 221, .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%;
  /* AFTER DARK remap: the empty dot is the ground showing through, so it takes
     the #201a15 the completion layer paints on .occ-rail (was --cream, which
     inverted to light and made every dot read as filled). The live state keeps
     the powder fill, so filled vs empty still reads. */
  background: #201a15; 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,
.occ-stage-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.occ-stage-media img.is-live,
.occ-stage-media video.is-live { opacity: 1; animation: eh-drift 14s ease-in-out infinite alternate; }
/* the card is a grid with every note stacked in the same cell, so its height
   is set by the LONGEST note and never jumps as the timeline advances */
.occ-stage-card {
  position: relative; z-index: 1; margin-left: -64px;
  /* AFTER DARK remap: the card was #fff, a panel LIGHTER than its wall. Kept
     that relationship by taking the colorway's lightest dark, so it still
     reads raised against --sage instead of cutting a white hole in the page.
     Its note colour is a color-mix toward #fff and needs no change. */
  background: var(--paleblue); padding: clamp(26px, 2.8vw, 38px);
  box-shadow: 0 18px 40px rgba(43, 58, 85, .14);
  display: grid; grid-template-columns: 1fr;
}
.occ-stage-label {
  grid-row: 1; grid-column: 1;
  font-family: var(--font-sub); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--powder); margin-bottom: 12px;
}
.occ-stage-note {
  grid-row: 2; grid-column: 1; visibility: hidden; opacity: 0;
  font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--slate) 82%, #fff);
  transition: opacity .35s ease;
}
.occ-stage-note.is-live { visibility: visible; opacity: 1; }
.occ-stage-card .occ-btn { grid-row: 3; grid-column: 1; margin-top: 22px; width: 100%; }
.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,
.occ-book-main video { 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,
.occ-book-detail video { 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; }
/* AFTER DARK: hardcoded literal again, the kit's light rule for what used to be
   a DARK band. The completion layer keeps .occ-book light and flips its ink, so
   this separator went to 1.13:1 and the three stats ran together. Same role and
   alpha, the colorway's darkest, matching the ink the band already carries. */
.occ-book-stat { border-left: 1px solid rgba(23, 19, 15, .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 (flat review cards, matched to the 360 page) ---------- */
.occ-quotes { background: var(--butter); padding: clamp(64px, 8vw, 104px) 0; }
.occ-quotes-head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px, 4vw, 54px); }
.occ-quotes-head .occ-eyebrow { display: block; margin-bottom: 18px; }
/* AFTER DARK: this head sits DIRECTLY on the --butter band, which the colorway
   turns into a mid gold (#b98a34). Both lines inherited the inverted (light)
   --slate and measured 1.30:1 (eyebrow) and 2.57:1 (h2) on it. The note cards
   below are fine because the completion layer's light-band rule reaches them;
   nothing reaches the head. Same fix and same ink as the .occ-why figcaption on
   its gold slab: #17130f, the colorway's own on-gold choice. Measured after:
   5.71:1 and 5.71:1. */
.occ-quotes-head .occ-eyebrow,
.occ-quotes-head .occ-h2 { color: #17130f; }
.occ-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.occ-note {
  margin: 0; background: var(--cream); border: 1px solid rgba(43, 58, 85, .12);
  padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column;
}
.occ-note blockquote {
  margin: 18px 0 24px; font-family: var(--font-display); font-style: italic;
  font-weight: 200; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45;
}
.occ-note figcaption {
  margin-top: auto; font-family: var(--font-sub); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- 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; }


/* ---------- 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,
.occ-booth-video { margin: 0 auto 22px; width: min(220px, 100%); border-radius: 999px 999px 0 0; overflow: hidden; }
.occ-booth-img img,
.occ-booth-video video { 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,
.occ-booth-card:hover .occ-booth-video video { 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 { color: var(--powder); font-size: 12px; letter-spacing: .34em; }
.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-why-grid, .occ-book-grid, .occ-notes, .occ-stage { grid-template-columns: 1fr; }
  /* the still hero: let the photo scroll with the section on small screens
     (fixed backgrounds jank on mobile Safari) and tuck the corner captions */
  .occ-still { padding: 90px 24px 110px; }
  .occ-still-bg { position: absolute; }
  .occ-still-kicker { letter-spacing: .3em; }
  .occ-still-corner.is-mid { display: none; }
  .occ-still-corner.is-left { left: 24px; }
  .occ-still-corner.is-right { right: 24px; }
  .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(239, 233, 221, .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; }
}
/* The two still-hero corner labels share one row. Below ~380px this client's
   labels ("Pricing by request" + "Hour by hour") are together wider than the
   row, so the last word of one ran into the first word of the other
   ("REQUESTHOUR"). Same type, same alignment, stacked instead of collided. */
@media (max-width: 380px) {
  .occ-still-corner.is-left { bottom: 40px; }
  .occ-still-corner.is-right { bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .occ-rise { animation: none; opacity: 1; transform: none; }
  .occ-stage-media img.is-live,
  .occ-stage-media video.is-live { animation: none; transform: none; }
  .occ-main .fade-in { transition: none; opacity: 1; transform: none; }
  .occ-stage-media img,
  .occ-stage-note,
  .occ-btn,
  .occ-stage-media video { transition: none; }
}