/* ============================================================
   OCCASION LANDING PAGES
   Shared by /bridal-yoga/, /birthday-yoga/ and /retreat-yoga/.
   Structurally identical to assets/corporate.css (same sections,
   same rhythm) with an oc- prefix instead of cy-, so the four
   private-event pages read as one family. Extends assets/site.css:
   tokens, buttons, .shell, .section, .reveal, .faq, .pgf, .occ
   and .cta all come from there.
   ============================================================ */

/* ---------- hero ---------- */
.oc-hero{padding-block-start:clamp(24px,4vw,48px);padding-block-end:0}
.oc-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.oc-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.oc-hero__copy h1{font-size:clamp(2.5rem,5.2vw,4.2rem);color:var(--green)}
.oc-hero__copy .lead{max-width:52ch}
.oc-hero__sub{font-size:.98rem;line-height:1.7;color:var(--ink-soft);max-width:52ch}
.oc-hero__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.oc-hero__meta{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:6px 0 0;padding:0}
.oc-hero__meta li{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  border:1px solid var(--green-soft);border-radius:99px;padding:8px 14px;line-height:1;
}
.oc-hero__media{position:relative;border-radius:var(--radius);overflow:hidden}
.oc-hero__media img{width:100%;height:clamp(320px,42vw,560px);object-fit:cover;display:block}
@media (max-width:899px){
  .oc-hero__grid{grid-template-columns:1fr}
  .oc-hero__media img{height:clamp(260px,54vw,380px)}
}
@media (max-width:520px){
  .oc-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .oc-hero__actions .btn{justify-content:center}
}

/* ---------- two-column prose bands ---------- */
.oc-prose__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px)}
@media (max-width:899px){ .oc-prose__grid{grid-template-columns:1fr} }
.oc-prose__head h2{color:var(--green)}
.oc-prose__head .eyebrow{margin-bottom:12px}
.oc-prose__body{display:flex;flex-direction:column;gap:18px}
.oc-prose__body p{color:var(--ink-soft);line-height:1.75;max-width:62ch}
/* site.css sets a{color:inherit;text-decoration:none}, so body-copy links
   need an explicit affordance. Scoped to this page's prose. */
.oc-prose__body a{
  color:var(--green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.oc-prose__body a:hover{color:var(--terracotta-deep)}
/* the one-line beat in "Built around the people in the room" */
.oc-prose__body .oc-beat{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--green);line-height:1.3}

/* ---------- offerings (uses .occ from site.css) ---------- */
.oc-offer{background:var(--sand);border-radius:var(--radius)}
.oc-offer__head{margin-bottom:clamp(28px,4vw,52px);max-width:62ch}
.oc-offer__head h2{color:var(--green)}
.oc-offer__head .eyebrow{margin-bottom:12px}
.oc-offer__head .lead{margin-top:16px}
.oc-offer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:1099px){ .oc-offer__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){ .oc-offer__grid{grid-template-columns:1fr} }
.oc-offer .occ{display:flex;flex-direction:column;gap:10px;height:100%}
.oc-offer .occ p{margin:0}

/* ---------- format: in person / online ---------- */
.oc-format__head{margin-bottom:clamp(28px,4vw,52px);max-width:64ch}
.oc-format__head h2{color:var(--green)}
.oc-format__head .eyebrow{margin-bottom:12px}
.oc-format__head .lead{margin-top:16px}
.oc-format__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
@media (max-width:809px){ .oc-format__grid{grid-template-columns:1fr} }

.oc-format__card{
  display:flex;flex-direction:column;
  border:1px solid var(--green-soft);border-radius:var(--radius);overflow:hidden;
  background:var(--cream);
}
.oc-format__card img{width:100%;height:clamp(200px,22vw,280px);object-fit:cover;display:block}
.oc-format__body{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px);flex:1}
.oc-format__body h3{
  font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:600;
  color:var(--green);line-height:1.2;
}
.oc-format__body p{font-size:.95rem;line-height:1.7;color:var(--ink-soft)}
.oc-format__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:auto 0 0;padding:0}
.oc-format__tags li{
  border:1px solid var(--green-soft);border-radius:99px;padding:7px 14px;
  font-size:.74rem;letter-spacing:.04em;color:var(--green);line-height:1;
}

/* ---------- class styles ---------- */
.oc-styles{background:var(--cream)}
.oc-styles__head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.oc-styles__head h2{color:var(--green)}
.oc-styles__head .eyebrow{margin-bottom:12px}
.oc-styles__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:999px){ .oc-styles__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){ .oc-styles__grid{grid-template-columns:1fr} }

.oc-style{border-radius:var(--radius);overflow:hidden;position:relative;isolation:isolate}
.oc-style img{
  width:100%;height:clamp(260px,26vw,340px);object-fit:cover;display:block;
  transition:transform 1s var(--ease);
}
.oc-style:hover img{transform:scale(1.04)}
.oc-style__scrim{
  position:absolute;inset:0;z-index:1;
  /* several of these source images are very light, so the scrim carries the
     text contrast rather than the photograph. */
  background:linear-gradient(to top,rgba(61,87,82,.92) 0%,rgba(61,87,82,.72) 34%,rgba(61,87,82,.24) 62%,rgba(61,87,82,0) 88%);
}
.oc-style__body{position:absolute;inset:auto 0 0;z-index:2;padding:clamp(18px,2vw,26px);color:var(--cream)}
.oc-style__title{font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.2;margin-bottom:6px}
.oc-style__body p{font-size:.85rem;line-height:1.55;opacity:.9;max-width:34ch}
.oc-styles__note{margin-top:clamp(24px,3vw,36px);color:var(--ink-soft);line-height:1.75;max-width:64ch}

/* ---------- use cases ---------- */
.oc-uses__head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.oc-uses__head h2{color:var(--green)}
.oc-uses__head .eyebrow{margin-bottom:12px}
.oc-uses__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;border-top:1px solid var(--sand-deep);
}
.oc-use{padding:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--sand-deep);border-right:1px solid var(--sand-deep)}
.oc-use:nth-child(4n){border-right:0}
.oc-use h3{
  font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:600;
  color:var(--green);line-height:1.25;margin-bottom:8px;
}
.oc-use p{font-size:.87rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:999px){
  .oc-uses__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oc-use:nth-child(4n){border-right:1px solid var(--sand-deep)}
  .oc-use:nth-child(2n){border-right:0}
}
@media (max-width:559px){
  .oc-uses__grid{grid-template-columns:1fr}
  .oc-use,.oc-use:nth-child(4n){border-right:0}
}

/* ---------- how it works ---------- */
.oc-steps{background:var(--sand);border-radius:var(--radius)}
.oc-steps__head{margin-bottom:clamp(28px,4vw,52px)}
.oc-steps__head h2{color:var(--green)}
.oc-steps__head .eyebrow{margin-bottom:12px}
.oc-steps__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
@media (max-width:899px){ .oc-steps__list{grid-template-columns:1fr} }
.oc-step{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--green-soft)}
.oc-step__num{
  font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;
  color:var(--green-soft);font-weight:300;
}
.oc-step__title{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:500;color:var(--green);line-height:1.2}
.oc-step p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}

/* ---------- why julia ---------- */
.oc-why{background:var(--green-deep);color:var(--cream);border-radius:var(--radius)}
.oc-why__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:899px){ .oc-why__grid{grid-template-columns:1fr} }
.oc-why__media{border-radius:var(--radius);overflow:hidden}
.oc-why__media img{width:100%;height:clamp(300px,34vw,460px);object-fit:cover;display:block}
.oc-why__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.oc-why__copy .eyebrow{color:var(--green-mist)}
.oc-why__copy h2{color:var(--cream)}
.oc-why__copy > p{color:var(--cream);opacity:.86;font-size:1rem;line-height:1.75;max-width:52ch}
.oc-why__copy > p a{color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.oc-why__copy > p a:hover{color:var(--green-mist)}
.oc-why__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;width:100%}
.oc-why__list li{
  display:flex;gap:14px;align-items:flex-start;
  padding-bottom:16px;border-bottom:1px solid rgba(165,184,180,.28);
}
.oc-why__list li:last-child{border-bottom:0;padding-bottom:0}
.oc-why__list svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--green-soft)}
.oc-why__list strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:4px}
.oc-why__list span.oc-why__d{font-size:.88rem;line-height:1.6;opacity:.82}

/* ---------- pricing ---------- */
.oc-pricing__panel{
  max-width:760px;margin-inline:auto;text-align:center;
  background:var(--cream);border:1px solid var(--green-soft);border-radius:var(--radius);
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.oc-pricing__panel h2{color:var(--green)}
.oc-pricing__panel p{color:var(--ink-soft);line-height:1.75;max-width:58ch}
.oc-pricing__panel .btn{margin-top:8px}
/* centred body copy stops being readable once it wraps this often */
@media (max-width:639px){ .oc-pricing__panel p{text-align:left} }

/* ---------- closing CTA ---------- */
/* .cta and .cta__inner come from site.css; this only adds the copy width
   and the second button row. */
.oc-cta__copy{color:var(--ink-soft);line-height:1.75;max-width:62ch;text-align:center}
.oc-cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- enquiry head ---------- */
.oc-form__shell{max-width:900px}
.oc-form__head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin-bottom:clamp(28px,4vw,48px)}
.oc-form__head h2{color:var(--green)}

/* ---------- planning guides ---------- */
/* Supporting Journal articles for this service page. Reuses .post from
   site.css so a card here is the same object as a card on the Journal index.

   Laid out with flex rather than a fixed grid because the corporate cluster
   fills up over time: one card sits at a third width and left-aligns, two sit
   side by side, three fill the row. A fixed 3-column grid would leave an
   obviously empty two thirds while the cluster is still being written. */
.oc-guides{background:var(--cream)}
.oc-guides__head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
.oc-guides__head h2{color:var(--green)}
.oc-guides__head .eyebrow{margin-bottom:12px}
.oc-guides__head .lead{margin-top:16px}
.oc-guides__list{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px)}
.oc-guides__list > *{flex:0 1 calc(33.333% - (2 * clamp(24px,3vw,44px) / 3))}
@media (max-width:899px){ .oc-guides__list > *{flex:0 1 calc(50% - (clamp(24px,3vw,44px) / 2))} }
@media (max-width:599px){ .oc-guides__list > *{flex:1 1 100%} }
.oc-guides .post__img{aspect-ratio:1.4}
.oc-guides .post__body{padding-right:0}
.oc-guides .post__title{font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.28}

/* Same treatment as .jr-card--soon on the Journal, repeated here because
   this page does not load journal.css. Use it on a card whose article is
   still a draft, so the section never links to unfinished copy. */
.oc-guide--soon{pointer-events:none}
.oc-guide--soon .post__img{background:var(--sand)}
.oc-guide--soon .post__img img{opacity:.45}
.oc-guide--soon .post__title{color:var(--green-soft)}