/* =====================================================================
   Trellis 925 | Creative Membership
   Styles for creative-memberships.html and creative-membership-terms.html.

   These pages use the same header, footer, container, buttons, section
   labels, heading scale and spacing tokens as the rest of the site
   (trellis.css + trellis-refinements.css). This file adds only what is
   unique to the membership experience. Every class here carries a cm-
   prefix so nothing can collide with the main stylesheet.
   ===================================================================== */

.cm {
  --cm-charcoal: #23201D;       /* membership section background */
  --cm-charcoal-2: #2E2A26;     /* raised surface / image frame on dark */
  --cm-muted-dark: #BEB4A5;     /* secondary text on dark */
  --cm-rule-dark: rgba(198, 161, 91, .32);
  --cm-rule-light: rgba(124, 92, 46, .28);
  container-type: inline-size;  /* lets full-bleed panels align to the page container */
}

/* The master sets section padding on the bare element. Membership sections
   declare their own, so the element rule is neutralised inside .cm. */
:where(.cm) > section { padding-block: 0; }
:where(.cm) figure { margin: 0; }

/* Text on the dark membership sections */
.cm-on-dark :is(h1, h2, h3, h4), .cm-hero :is(h1, h2, h3), .cm-final :is(h1, h2, h3), .cm-venue-handoff :is(h2, h3) { color: var(--linen); }
.cm-on-dark .eyebrow, .cm-hero .eyebrow, .cm-venue-handoff .eyebrow { color: var(--brass-light); }
.cm-on-dark .eyebrow::before, .cm-hero .eyebrow::before, .cm-venue-handoff .eyebrow::before { background: var(--brass-light); }
/* Section labels on the light membership sections keep the AA compliant bronze */
.cm .eyebrow { color: var(--bronze); margin-bottom: var(--s2); }
.cm .eyebrow::before { background: var(--bronze); }
.cm-on-dark .eyebrow, .cm-hero .eyebrow, .cm-venue-handoff .eyebrow { color: var(--brass-light); }
.cm-on-dark .eyebrow::before, .cm-hero .eyebrow::before, .cm-venue-handoff .eyebrow::before { background: var(--brass-light); }
.cm { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Image frames. If an image fails to load, the frame keeps its shape. */
.cm-frame { position: relative; overflow: hidden; background: var(--cm-charcoal-2); }
.cm-frame img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.cm-hero-media img { color: transparent; }
.cm-frame.is-missing img { visibility: hidden; }
.cm-frame.is-missing::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(198,161,91,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(198,161,91,.07) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, #2E2A26, #1C1A17);
}

/* ---------------------------------------------------------------------
   Hero: text on the left, vertical film panel on the right
   --------------------------------------------------------------------- */
.cm-hero {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  min-height: min(78vh, 760px); background: var(--ink); color: var(--linen);
}
.cm-hero-text {
  align-self: center;
  padding: clamp(3rem, 7vh, 5rem) clamp(2rem, 5vw, 5rem) clamp(2.5rem, 5vh, 3.5rem) max(var(--gutter), calc((100vw - var(--content)) / 2));
  padding-left: max(var(--gutter), calc((100cqw - var(--content)) / 2));
}
.cm-hero-logo { width: clamp(84px, 7.5vw, 104px); height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 1.4rem; color: transparent; }
.cm-hero h1 { max-width: 9ch; }
.cm-hero-tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; margin: 1.1rem 0 1rem; color: var(--linen); max-width: none; }
.cm-hero-copy { max-width: 31em; color: rgba(244,238,227,.88); font-size: 1.05rem; margin-bottom: 0; }
.cm-hero .btn-row { margin-top: 1.75rem; }
.cm-hero-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2rem, 4.5vh, 3rem); border-top: 1px solid rgba(244,238,227,.22); max-width: 46rem; }
.cm-hero-facts div { padding: 1.2rem 1rem 0 0; }
.cm-hero-facts strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.1; color: var(--linen); }
.cm-hero-facts span { display: block; font-size: .85rem; line-height: 1.4; color: var(--cm-muted-dark); letter-spacing: .04em; }
.cm-hero-media { position: relative; overflow: hidden; background: var(--cm-charcoal-2); min-height: 100%; }
.cm-hero-media img, .cm-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
.cm-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 1px 0 0 rgba(198,161,91,.35); }
@media (max-width: 1100px) { .cm-hero-facts { grid-template-columns: 1fr 1fr; row-gap: 1.1rem; } }
@media (max-width: 900px) {
  .cm-hero { grid-template-columns: 1fr; min-height: 0; }
  .cm-hero-text { padding: 3.5rem var(--gutter) 3rem; }
  .cm-hero-media { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) { .cm-hero .btn-row .btn { flex: 1 1 100%; } }

/* Inline gallery film */
.cm-inline-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------
   Introduction
   --------------------------------------------------------------------- */
.cm-intro { padding-block: var(--section-y); background: var(--linen); }
.cm-intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.cm-intro .h-xl { max-width: 14ch; }
.cm-intro p { color: var(--text-soft); max-width: 34em; }
.cm-intro-points { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--cm-rule-light); }
.cm-intro-points li { padding: .95rem 0; border-bottom: 1px solid var(--cm-rule-light); display: flex; justify-content: space-between; gap: 1rem; }
.cm-intro-points b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--ink); }
.cm-intro-points span { color: var(--text-soft); text-align: right; }
.cm-intro .cm-frame { aspect-ratio: 4 / 5; }
.cm-intro-figure figcaption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text-soft); padding-top: .6rem; }
@media (max-width: 900px) {
  .cm-intro-grid { grid-template-columns: 1fr; }
  .cm-intro .cm-frame { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  .cm-intro-points li { flex-direction: column; gap: .15rem; }
  .cm-intro-points span { text-align: left; }
}

/* ---------------------------------------------------------------------
   Who it is for: typographic index with a single image panel
   --------------------------------------------------------------------- */
.cm-uses { padding-block: var(--section-y); background: var(--cm-charcoal); color: var(--linen); }
.cm-uses-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: var(--head-gap); }
.cm-uses-head > div { max-width: 38rem; }
.cm-uses-head p { color: var(--cm-muted-dark); max-width: 30em; margin: 0 0 .35rem; }
.cm-uses-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cm-uses-list { list-style: none; margin: 0; padding: 0; counter-reset: use; columns: 2; column-gap: 2.5rem; }
.cm-uses-list li { break-inside: avoid; border-top: 1px solid var(--cm-rule-dark); }
.cm-uses-list button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: block; padding: 1.15rem 0 1.2rem;
}
.cm-uses-list .cm-use-name { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.15; color: var(--linen); transition: color .2s ease; }
.cm-uses-list .cm-use-note { display: block; font-size: .92rem; color: var(--cm-muted-dark); margin-top: .3rem; }
.cm-uses-list button:hover .cm-use-name,
.cm-uses-list button[aria-pressed="true"] .cm-use-name { color: var(--brass-light); }
.cm-uses-list button:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 4px; }
.cm-uses-panel { position: sticky; top: 110px; }
.cm-uses-panel .cm-frame { aspect-ratio: 4 / 5; }
.cm-uses-panel .cm-frame img { transition: opacity .35s ease; }
.cm-uses-caption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; font-size: .9rem; color: var(--cm-muted-dark); border-bottom: 1px solid var(--cm-rule-dark); padding-bottom: 1rem; }
.cm-uses-caption b { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--linen); }
@media (max-width: 980px) {
  .cm-uses-grid { grid-template-columns: 1fr; }
  .cm-uses-panel { position: relative; top: 0; order: -1; }
  .cm-uses-panel .cm-frame { aspect-ratio: 1 / 1; }
  .cm-uses-panel .cm-frame img { object-position: center 30%; }
}
@media (max-width: 600px) { .cm-uses-list { columns: 1; } }

/* ---------------------------------------------------------------------
   Gallery: staggered editorial layout
   --------------------------------------------------------------------- */
.cm-gallery { padding-block: var(--section-y); background: var(--linen); }
.cm-gallery-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: var(--head-gap); }
.cm-gallery-head p { color: var(--text-soft); margin: 0 0 .35rem; max-width: 30em; }
.cm-stagger { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.75rem, 1.6vw, 1.4rem); }
.cm-stagger figure { margin: 0; }
.cm-stagger .cm-frame { width: 100%; }
.cm-stagger figcaption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text-soft); padding-top: .6rem; }
.cm-stagger { align-items: start; }
.cm-g1 { grid-column: 1 / 8; grid-row: 1; } .cm-g1 .cm-frame { aspect-ratio: 3 / 2; }
.cm-g2 { grid-column: 8 / 13; grid-row: 1 / span 2; margin-top: clamp(2rem, 7vw, 6rem) !important; } .cm-g2 .cm-frame { aspect-ratio: 4 / 5; }
.cm-g3 { grid-column: 2 / 8; grid-row: 2; } .cm-g3 .cm-frame { aspect-ratio: 16 / 9; }
.cm-g4 { grid-column: 1 / 5; grid-row: 3; } .cm-g4 .cm-frame { aspect-ratio: 4 / 5; }
.cm-g5 { grid-column: 5 / 9; grid-row: 3; margin-top: clamp(1.5rem, 5vw, 4rem) !important; } .cm-g5 .cm-frame { aspect-ratio: 4 / 5; }
.cm-g6 { grid-column: 9 / 13; grid-row: 3; } .cm-g6 .cm-frame { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
  .cm-gallery-head { grid-template-columns: 1fr; }
  .cm-stagger { grid-template-columns: 1fr 1fr; }
  .cm-g1, .cm-g2, .cm-g3, .cm-g4, .cm-g5, .cm-g6 { grid-row: auto; margin-top: 0 !important; }
  .cm-g1, .cm-g3 { grid-column: 1 / -1; }
  .cm-g2, .cm-g4, .cm-g5, .cm-g6 { grid-column: span 1; }
  .cm-g1, .cm-g3 { order: 1; }
  .cm-g2, .cm-g4, .cm-g5, .cm-g6 { order: 2; }
  .cm-g1 .cm-frame, .cm-g3 .cm-frame { aspect-ratio: 3 / 2; }
  .cm-g2 .cm-frame, .cm-g4 .cm-frame, .cm-g5 .cm-frame, .cm-g6 .cm-frame { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------------
   Membership levels
   --------------------------------------------------------------------- */
.cm-levels { padding-block: var(--section-y); background: var(--ink); color: var(--linen); }
.cm-levels-head { text-align: center; max-width: 44rem; margin: 0 auto var(--head-gap); }
.cm-levels-head .eyebrow { justify-content: center; }
.cm-levels-head p { color: var(--cm-muted-dark); margin: 1.4rem auto 0; max-width: 34em; }
.cm-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cm-rule-dark); border-bottom: 1px solid var(--cm-rule-dark); }
.cm-tier {
  display: grid; grid-template-rows: auto auto auto 1fr auto;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--cm-rule-dark);
}
.cm-tier:first-child { border-left: 0; }
@supports (grid-template-rows: subgrid) {
  .cm-tiers { grid-template-rows: auto auto auto 1fr auto; }
  .cm-tier { grid-row: span 5; grid-template-rows: subgrid; }
}
.cm-tier-name { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 2.6vw, 2.2rem); color: var(--linen); }
.cm-tier-price { margin: 1.1rem 0 .4rem; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.cm-tier-price .cm-amount { font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem, 4.4vw, 3.6rem); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; line-height: 1; color: var(--brass-light); }
.cm-tier-price .cm-per { font-size: .95rem; color: var(--cm-muted-dark); }
.cm-tier-for { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: rgba(244,238,227,.86); margin: .6rem 0 1.4rem; max-width: none; }
.cm-specs { margin: 0; padding: 0; }
.cm-spec { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(244,238,227,.12); align-items: baseline; }
.cm-spec dt { font-size: .9rem; color: var(--cm-muted-dark); }
.cm-spec dd { margin: 0; text-align: right; font-size: 1rem; font-weight: 400; color: var(--linen); }
.cm-tier-extra { grid-column: 1 / -1; display: block; max-width: none; margin: 0; padding: .95rem 0 0; border-top: 1px solid rgba(244,238,227,.12); font-size: .95rem; color: rgba(244,238,227,.86); }
.cm-tier-extra + .cm-tier-extra { padding-top: .75rem; border-top: 0; }
.cm-tier .btn { margin-top: 1.75rem; width: 100%; }
.cm-levels-note { text-align: center; color: var(--cm-muted-dark); font-size: .9rem; margin: 1.75rem auto 0; max-width: 52em; }
@media (max-width: 960px) {
  .cm-tiers, .cm-tier { grid-template-rows: none !important; }
  .cm-tiers { grid-template-columns: 1fr; border: 0; gap: 1.25rem; }
  .cm-tier { grid-row: auto !important; display: block; border: 1px solid var(--cm-rule-dark); background: var(--cm-charcoal); }
  .cm-tier:first-child { border-left: 1px solid var(--cm-rule-dark); }
}

/* ---------------------------------------------------------------------
   The Founding 15
   --------------------------------------------------------------------- */
.cm-founding { padding-block: var(--section-y); background: var(--bg-alt); position: relative; overflow: hidden; }
.cm-founding-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cm-founding-numeral {
  font-family: var(--serif); font-weight: 500; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(9rem, 22vw, 17rem); text-align: center;
  color: transparent; -webkit-text-stroke: 1.5px var(--bronze);
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) { .cm-founding-numeral { color: var(--bronze); opacity: .35; } }
.cm-founding p { color: var(--text-soft); max-width: 34em; }
.cm-founding-list { list-style: none; padding: 0; margin: 1.75rem 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.cm-founding-list li { padding: 1rem 0; border-top: 1px solid var(--cm-rule-light); }
.cm-founding-list b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink); line-height: 1.2; }
.cm-founding-list span { font-size: .95rem; color: var(--text-soft); }
@media (max-width: 860px) {
  .cm-founding-grid { grid-template-columns: 1fr; }
  .cm-founding-numeral { font-size: clamp(6.5rem, 30vw, 9rem); }
}
@media (max-width: 560px) { .cm-founding-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   How membership works
   --------------------------------------------------------------------- */
.cm-steps { padding-block: var(--section-y); background: var(--linen); }
.cm-steps-head { max-width: 40rem; margin-bottom: var(--head-gap); }
.cm-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); counter-reset: step; }
.cm-step-list li { border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.cm-step-num { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--bronze); margin-bottom: .8rem; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.cm-step-list h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0; }
.cm-step-list p { color: var(--text-soft); font-size: .96rem; margin: .6rem 0 0; }
.cm-steps-note { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cm-rule-light); color: var(--text-soft); font-size: .95rem; max-width: 52em; }
@media (max-width: 900px) { .cm-step-list { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } }
@media (max-width: 520px) { .cm-step-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Podcast and production
   --------------------------------------------------------------------- */
.cm-production { background: var(--cm-charcoal); color: var(--linen); }
.cm-production-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cm-production .cm-frame { min-height: 420px; height: 100%; }
.cm-production-copy { align-self: center; padding: var(--section-y) max(var(--gutter), calc((100vw - var(--content)) / 2)) var(--section-y) clamp(2rem, 5vw, 4.5rem);
  padding-right: max(var(--gutter), calc((100cqw - var(--content)) / 2)); }
.cm-production-copy p { color: rgba(244,238,227,.86); max-width: 34em; }
.cm-production-list { list-style: none; padding: 0; margin: 1.5rem 0 1.75rem; max-width: 34rem; border-bottom: 1px solid var(--cm-rule-dark); }
.cm-production-list li { padding: .85rem 0 .85rem 1.6rem; border-top: 1px solid var(--cm-rule-dark); position: relative; color: rgba(244,238,227,.9); }
.cm-production-list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .7rem; height: 1px; background: var(--brass-light); }
.cm-production-copy .cm-production-fine { font-size: .92rem; color: var(--cm-muted-dark); margin-bottom: 0; }
@media (max-width: 900px) {
  .cm-production-grid { grid-template-columns: 1fr; }
  .cm-production .cm-frame { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------
   Membership policies (native details/summary accordion)
   --------------------------------------------------------------------- */
.cm-policies { padding-block: var(--section-y); background: var(--bg-alt); }
.cm-policies-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cm-policies-intro { position: sticky; top: 110px; }
.cm-policies-intro p { color: var(--text-soft); margin-top: 1.4rem; max-width: 26em; }
.cm-faq { border-top: 1px solid var(--ink); }
.cm-faq details { border-bottom: 1px solid var(--cm-rule-light); }
.cm-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.25; color: var(--ink);
}
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after {
  content: ""; flex: 0 0 14px; height: 14px;
  background:
    linear-gradient(var(--bronze), var(--bronze)) center / 14px 1px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) center / 1px 14px no-repeat;
  transition: transform .25s ease;
}
.cm-faq details[open] summary::after { transform: rotate(45deg); }
.cm-faq summary:hover { color: var(--bronze); }
.cm-faq .cm-answer { padding: 0 2.5rem 1.5rem 0; color: var(--text-soft); }
.cm-faq .cm-answer p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .cm-policies-grid { grid-template-columns: 1fr; }
  .cm-policies-intro { position: static; }
  .cm-faq .cm-answer { padding-right: 0; }
}

/* Five step sequence and three item founding list */
.cm-step-list-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cm-step-list-5 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } }
@media (max-width: 640px) { .cm-step-list-5 { grid-template-columns: 1fr; row-gap: 1.25rem; } }
.cm-founding-list-3 { grid-template-columns: 1fr; }
.cm-founding-list-3 li { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; }
@media (max-width: 560px) { .cm-founding-list-3 li { grid-template-columns: 1fr; gap: .2rem; } }

/* Request membership with embedded Tripleseat inquiry */
.cm-request { padding-block: var(--section-y); background: var(--linen); }
.cm-request-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cm-request-intro p { color: var(--text-soft); max-width: 32em; }
.cm-request-intro .cm-request-fine { font-size: .95rem; border-top: 1px solid var(--cm-rule-light); padding-top: 1rem; margin-top: 1.5rem; }
.cm-ts-card { background: #fff; border: 1px solid var(--cm-rule-light); border-top: 2px solid var(--brass-light); padding: clamp(1.25rem, 3vw, 2.25rem); min-width: 0; }
.cm-ts-card > .ts-form-mount:first-child, .cm-ts-card > .ts-mobile-cta:first-child { margin-top: 0; }
@media (max-width: 900px) { .cm-request-grid { grid-template-columns: 1fr; } }

/* Venue booking handoff */
.cm-venue-handoff { background: var(--ink); color: var(--linen); padding: clamp(1.5rem, 3.5vw, 2.5rem); border-top: 2px solid var(--brass-light); }
.cm-venue-handoff .eyebrow { color: var(--brass-light); }
.cm-venue-handoff p { color: rgba(244,238,227,.86); }
.cm-venue-handoff .cm-handoff-note { font-size: .82rem; color: var(--cm-muted-dark); margin: .8rem 0 0; }
@media (max-width: 600px) { .cm-venue-handoff .btn { width: 100%; } }

/* Important membership information */
.cm-terms-band { padding-block: var(--section-y); background: var(--linen); }
.cm-terms-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
@media (max-width: 900px) { .cm-terms-band-inner { grid-template-columns: 1fr; } .cm-terms-band .btn { width: 100%; } }
.cm-policies-intro a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------
   Final call to action
   --------------------------------------------------------------------- */
.cm-final { position: relative; color: var(--linen); background: var(--ink); isolation: isolate; text-align: center; }
.cm-final .cm-frame { position: absolute; inset: 0; z-index: -2; }
.cm-final .cm-frame img { object-position: center 45%; }
.cm-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20,17,14,.74); }
.cm-final-inner { padding-block: clamp(72px, 9vw, 128px); }
.cm-final-logo { width: 80px; height: 80px; object-fit: contain; margin: 0 auto 1.4rem; color: transparent; }
.cm-final h2 { max-width: 20ch; margin-inline: auto; }
.cm-final p { color: rgba(244,238,227,.9); max-width: 34em; margin-inline: auto; margin-bottom: var(--s4); }
.cm-final .btn-row { justify-content: center; }

/* Creative Membership Terms page */
.cm-terms-body { max-width: 820px; margin-inline: auto; }
.cm-terms-lede { font-size: 1.12rem; color: var(--text-soft); margin: 0 0 var(--s4); max-width: none; }
.cm-terms-list { list-style: none; counter-reset: term; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cm-terms-list li { counter-increment: term; position: relative; padding: 1.5rem 0 1.2rem 3rem; border-bottom: 1px solid var(--cm-rule-light); }
.cm-terms-list li::before { content: counter(term, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem; font-family: var(--serif); font-size: 1.2rem; color: var(--bronze); }
.cm-terms-list h2 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0; }
.cm-terms-list p { color: var(--text-soft); margin: .5rem 0 .6rem; max-width: none; font-size: .98rem; }
.cm-terms-table { width: 100%; border-collapse: collapse; margin: .4rem 0 .9rem; font-size: .95rem; }
.cm-terms-table th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .12em; color: var(--ink); padding: .6rem .5rem; border-bottom: 1px solid var(--ink); }
.cm-terms-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--cm-rule-light); color: var(--text-soft); }
.cm-terms-updated { font-size: .92rem; color: var(--text-soft); margin: 2rem 0 1.5rem; }
.cm-terms-updated a { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .cm-terms-list li { padding-left: 2.4rem; } .cm-terms-table { font-size: .85rem; } .cm-terms-table th, .cm-terms-table td { padding: .5rem .3rem; } }

/* ---------------------------------------------------------------------
   Layout refinements made when the page joined the main site
   --------------------------------------------------------------------- */
.cm { --head-gap: clamp(28px, 3.4vw, 48px); }

/* Terms band: two equal cards, equal height, buttons on one baseline */
.cm-terms-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px); background: var(--bg-alt); border-top: 2px solid var(--brass); }
.cm-terms-card .h-lg { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.cm-terms-card p:not(.eyebrow) { color: var(--text-soft); margin: var(--s2) 0 var(--s3); max-width: 46ch; font-size: .98rem; }
.cm-terms-card .btn { margin-top: auto; }
@media (max-width: 900px) { .cm-terms-band-inner { grid-template-columns: 1fr; } }

/* Both cards share one set of rows, so the two buttons sit on the same line */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .cm-terms-band-inner { grid-template-rows: auto auto 1fr auto auto; row-gap: 0; }
    .cm-terms-band-inner > .cm-terms-card, .cm-terms-band-inner > .book-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: start; align-content: start; }
    .cm-terms-band-inner .btn { margin-top: 0; align-self: end; }
  }
}

/* Five steps: one row on laptops, then three over two centred, then a single column */
@media (max-width: 1100px) { .cm-step-list-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 899px) {
  .cm-step-list-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.75rem; }
  .cm-step-list-5 > li { grid-column: span 2; }
  .cm-step-list-5 > li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  .cm-step-list-5 { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .cm-step-list-5 > li, .cm-step-list-5 > li:nth-child(4) { grid-column: auto; }
}

/* Production: the photograph fills the height of the copy instead of setting it.
   (A 2:3 portrait at half the page width made this band 1,080px tall with the copy floating in it.) */
.cm-production .cm-frame { min-height: 0; }
.cm-production .cm-frame img { position: absolute; inset: 0; object-position: center 62%; }
@media (max-width: 900px) { .cm-production .cm-frame img { position: static; } }

/* Request: the introduction stays beside the form while the form scrolls */
@media (min-width: 901px) { .cm-request-intro { position: sticky; top: 104px; } }

/* ---------------------------------------------------------------------
   Creative Membership Inquiry (Tripleseat form 6188): presentation only.

   The form is written into the page by Tripleseat's official script. Nothing
   here changes a field name, a value, validation or submission. No field is
   hidden or shown, no width is forced on text fields, and nothing is clipped,
   so Tripleseat's own layout, error messages and security check keep working.
   The selectors do not depend on Tripleseat class names. They key off the
   element types Tripleseat writes (label, input, select, textarea, checkbox).
   Tripleseat styles its form with ID selectors, so each rule carries
   :not(#_):not(#_). That raises its priority without touching the markup,
   which is the method Tripleseat's own guide describes for overriding its
   default styles from the website stylesheet.
   --------------------------------------------------------------------- */
.cm-ts-card { padding: clamp(22px, 2.6vw, 34px); }
.cm-ts-form { --f-line: rgba(20, 17, 14, .16); font-family: var(--sans); color: var(--espresso); line-height: 1.5; }
.cm-ts-form:not(#_):not(#_) img { max-height: 56px; width: auto; }
.cm-ts-form:not(#_):not(#_) :is(form, div, p, li, td, th, label, input, select, textarea, button) { font-family: var(--sans); }

/* A field wrapper is any element that directly holds a label and its field. Its own
   vertical spacing is removed so every field follows one rhythm, set on the field below. */
.cm-ts-form:not(#_):not(#_) :is(div, li, p, td):has(> label):has(> input, > select, > textarea) { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

/* Headings and intro text that Tripleseat places above the fields */
.cm-ts-form:not(#_):not(#_) :is(h1, h2) { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; margin: 0 0 .5rem; color: var(--espresso); }
.cm-ts-form:not(#_):not(#_) :is(h3, h4, legend) { font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
  margin: 1.1rem 0 .9rem; padding: 0 0 .55rem; border-bottom: 1px solid var(--cm-rule-light); width: 100%; }
.cm-ts-form:not(#_):not(#_) p { font-size: .92rem; color: var(--text-soft); margin: 0 0 .9rem; max-width: none; }

/* Field labels: small, spaced capitals, as on the 925 Catering form */
.cm-ts-form:not(#_):not(#_) label { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 .4rem; line-height: 1.4; }

/* Text fields, selects and the message box. Appearance and height only. */
.cm-ts-form:not(#_):not(#_) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
.cm-ts-form:not(#_):not(#_) select,
.cm-ts-form:not(#_):not(#_) textarea {
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--espresso);
  background-color: var(--linen); border: 1px solid var(--f-line); border-radius: 0;
  padding: .7em .9em; min-height: 46px; max-width: 100%; box-sizing: border-box; line-height: 1.4;
  margin-bottom: .95rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.cm-ts-form:not(#_):not(#_) textarea { height: 112px; min-height: 112px; resize: vertical; }
.cm-ts-form:not(#_):not(#_) select { cursor: pointer; }
.cm-ts-form:not(#_):not(#_) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.cm-ts-form:not(#_):not(#_) select:focus,
.cm-ts-form:not(#_):not(#_) textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(166, 124, 61, .16); background-color: #fff; }
.cm-ts-form:not(#_):not(#_) ::placeholder { color: var(--stone); }
/* Tripleseat's validation state stays visible */
.cm-ts-form:not(#_):not(#_) :is(input, select, textarea):is([class*="error"], [class*="invalid"], [aria-invalid="true"]) { border-color: #9B2C2C; }

/* Checkboxes and radio buttons: the box sits beside its label, centred on it.
   Covers both ways Tripleseat can write an option:
   box followed by its label, or box inside its label. */
.cm-ts-form:not(#_):not(#_) input[type="checkbox"], .cm-ts-form:not(#_):not(#_) input[type="radio"] {
  display: inline-block !important; float: none !important; position: static; width: 18px !important; height: 18px !important; min-height: 0;
  flex: 0 0 18px; margin: 0 .7em 0 0 !important; padding: 0; vertical-align: middle; accent-color: var(--brass-btn, #8D6934); cursor: pointer;
}
.cm-ts-form:not(#_):not(#_) input[type="checkbox"] + label, .cm-ts-form:not(#_):not(#_) input[type="radio"] + label,
.cm-ts-form:not(#_):not(#_) label:has(> input[type="checkbox"]), .cm-ts-form:not(#_):not(#_) label:has(> input[type="radio"]) {
  display: inline-flex !important; align-items: center; width: auto; margin: 0 !important; padding: 0;
  font-size: .95rem; font-weight: 300; letter-spacing: .01em; text-transform: none; color: var(--espresso); line-height: 1.35; vertical-align: middle; cursor: pointer;
}
/* One option per row: any element that holds exactly one box as its direct child */
.cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> input[type="checkbox"]):not(:has(> input[type="checkbox"] ~ input[type="checkbox"])),
.cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> input[type="radio"]):not(:has(> input[type="radio"] ~ input[type="radio"])),
.cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> label > input[type="checkbox"]):not(:has(> label ~ label)),
.cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> label > input[type="radio"]):not(:has(> label ~ label)) {
  display: flex; align-items: center; min-height: 36px; margin: 0; padding: 0; list-style: none;
}
/* A checkbox group: two balanced columns on laptops and desktops, one column on narrow screens.
   Applies only where two or more options sit side by side as siblings. Anything else in the
   group, such as its title, spans the full width. */
.cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > input[type="checkbox"]):has(> * ~ * > input[type="checkbox"]),
.cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > label > input[type="checkbox"]):has(> * ~ * > label > input[type="checkbox"]) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: 2px; align-items: center;
  margin: 0 0 .95rem; padding: 0; border: 0; list-style: none;
}
.cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > input[type="checkbox"]):has(> * ~ * > input[type="checkbox"]) > :not(:has(input[type="checkbox"])),
.cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > label > input[type="checkbox"]):has(> * ~ * > label > input[type="checkbox"]) > :not(:has(input[type="checkbox"])) { grid-column: 1 / -1; }
/* The group title Tripleseat writes in bold */
.cm-ts-form:not(#_):not(#_) :is(strong, b):only-child, .cm-ts-form:not(#_):not(#_) :is(div, p) > :is(strong, b):first-child:last-child {
  display: block; font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); margin: .2rem 0 .35rem;
}
@media (max-width: 640px) {
  .cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > input[type="checkbox"]):has(> * ~ * > input[type="checkbox"]),
  .cm-ts-form:not(#_):not(#_) :is(div, ul, fieldset, td):has(> * > label > input[type="checkbox"]):has(> * ~ * > label > input[type="checkbox"]) { grid-template-columns: 1fr; }
  .cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> input[type="checkbox"]), .cm-ts-form:not(#_):not(#_) :is(div, li, p, span):has(> label > input[type="checkbox"]) { min-height: 44px !important; }
}

/* Submit: the site's brass button */
.cm-ts-form:not(#_):not(#_) input[type="submit"], .cm-ts-form:not(#_):not(#_) button[type="submit"], .cm-ts-form:not(#_):not(#_) #lead_form_submit a {
  display: inline-block; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--linen); background: var(--brass-btn, #8D6934); border: 1px solid var(--brass-btn, #8D6934); border-radius: 0;
  padding: 1.05em 2.4em; min-height: 46px; margin-top: .6rem; cursor: pointer; text-decoration: none; transition: background-color .25s ease, border-color .25s ease;
}
.cm-ts-form:not(#_):not(#_) input[type="submit"]:hover, .cm-ts-form:not(#_):not(#_) button[type="submit"]:hover, .cm-ts-form:not(#_):not(#_) #lead_form_submit a:hover { background: var(--brass-btn-hover, #75572B); border-color: var(--brass-btn-hover, #75572B); }
.cm-ts-card #tripleseat_link { margin-top: .9rem; }

/* ---------------------------------------------------------------------
   Creative Membership Inquiry (6188): embedded on every device.

   The site-wide stylesheet hides embedded Tripleseat forms on phones and
   tablets and shows a button to the hosted form instead. That rule still
   serves form 5405 on the other pages. On this page it is switched off,
   so the membership form stays on the page and is completed here.
   Everything below sits inside phone and tablet conditions. The laptop
   and desktop presentation is not touched.
   --------------------------------------------------------------------- */
/* With the phone button gone the form is the first item in the card. Its top spacing is kept
   exactly as approved on desktop. */
.cm-ts-card > .ts-form-mount.cm-ts-form:first-child { margin-top: 1.6rem; }
@media (max-width: 760px), (pointer: coarse) {
  .cm-ts-card .ts-form-mount.cm-ts-form { display: block !important; }
  .cm-ts-card .ts-fallback:not([hidden]) { display: block !important; }
}

/* Phones and tablets: nothing may be wider than the card, and field text is 16px
   so the phone browser does not zoom in when a field is tapped. */
@media (max-width: 900px), (pointer: coarse) {
  .cm-ts-form:not(#_):not(#_) :is(input, select, img):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .cm-ts-form:not(#_):not(#_) textarea:not([name="g-recaptcha-response"]) { max-width: 100%; box-sizing: border-box; }

  /* Security check (reCAPTCHA). Nothing the website sets may shrink, clip or hide it.
     It keeps its native 304 by 78 size, and every container around it is left open. */
  .cm-ts-form:not(#_):not(#_) iframe[src*="recaptcha"],
  .cm-ts-form:not(#_):not(#_) iframe[title*="recaptcha" i] {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 304px !important; min-width: 304px !important; max-width: none !important;
    height: 78px !important; min-height: 78px !important; transform: none !important;
  }
  .cm-ts-form:not(#_):not(#_) :is(div, span, p, li, td):has(> iframe[src*="recaptcha"]),
  .cm-ts-form:not(#_):not(#_) :is(div, span, p, li, td):has(> div > iframe[src*="recaptcha"]) {
    display: block !important; visibility: visible !important; opacity: 1 !important; float: none !important;
    width: 304px !important; min-width: 304px !important; max-width: none !important;
    height: auto !important; min-height: 78px !important; overflow: visible !important; flex: 0 0 auto !important;
  }
  .cm-ts-form:not(#_):not(#_) :has(iframe[src*="recaptcha"]) { max-width: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; }
  .cm-ts-form:not(#_):not(#_) .g-recaptcha { display: block !important; min-height: 78px; margin: 4px 0 14px; }
  /* If Tripleseat places the security check in a table row, that row stacks so it cannot push past the screen */
  .cm-ts-form:not(#_):not(#_) :is(table, tbody, tr, td, th):has(iframe[src*="recaptcha"]),
  .cm-ts-form:not(#_):not(#_) tr:has(iframe[src*="recaptcha"]) > :is(td, th) { display: block !important; width: auto !important; }
  .cm-ts-form:not(#_):not(#_) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
  .cm-ts-form:not(#_):not(#_) select,
  .cm-ts-form:not(#_):not(#_) textarea { font-size: 16px; }
}

/* Phones: one column. Every field takes the full width of the card, paired fields
   (First Name and Last Name, Phone and Extension) stack, the checkbox group is one
   column with each box beside its label, and the submit button spans the card.
   Only widths, wrapping and float are set. No display value is changed, so nothing
   Tripleseat keeps hidden is revealed, and no height is fixed on any container. */
@media (max-width: 600px) {
  .cm-ts-card { padding: 18px 14px 20px; }
  .cm-ts-form:not(#_):not(#_) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
  .cm-ts-form:not(#_):not(#_) select,
  .cm-ts-form:not(#_):not(#_) textarea:not([name="g-recaptcha-response"]) { width: 100% !important; min-width: 0 !important; }
  /* a field wrapper: any element that directly holds a label and its field */
  .cm-ts-form:not(#_):not(#_) :is(div, li, p, td):has(> label):has(> input, > select, > textarea) { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; flex: 0 0 100% !important; }
  /* rows that place fields side by side */
  .cm-ts-form:not(#_):not(#_) :is(form, div, fieldset, li) { flex-wrap: wrap !important; }
  .cm-ts-form:not(#_):not(#_) :is(form, div, fieldset, ul) { grid-template-columns: minmax(0, 1fr) !important; }
  .cm-ts-form:not(#_):not(#_) [class*="col-"] { width: 100% !important; float: none !important; flex: 0 0 100% !important; }
  .cm-ts-form:not(#_):not(#_) input[type="submit"], .cm-ts-form:not(#_):not(#_) button[type="submit"], .cm-ts-form:not(#_):not(#_) #lead_form_submit a { width: 100% !important; text-align: center; }
  .cm-ts-form:not(#_):not(#_) :is(h1, h2) { font-size: 1.35rem; }
}
/* Very small phones: the card runs to the screen edges so the 304px security check fits */
@media (max-width: 374px) {
  .cm-ts-card { margin-inline: calc(-1 * var(--gutter)); border-left: 0; border-right: 0; padding-inline: 16px; }
}
@media (max-width: 335px) {
  .cm-ts-card { padding-inline: 8px; }
}

/* Terms and Policies page */
.cm-terms-page { padding-block: var(--section-y); }

/* Request: intro and form card */
.cm-request-intro .cm-request-fine { max-width: 32em; }

/* Who it is for: head stacks on small screens */
@media (max-width: 980px) { .cm-uses-head, .cm-gallery-head { grid-template-columns: 1fr; gap: var(--s2); } }

/* FAQ answers follow the master measure */
.cm-faq .cm-answer p { max-width: none; }

/* Phones */
@media (max-width: 600px) {
  .cm-hero-text { padding: 2.75rem var(--gutter) 2.5rem; }
  .cm-hero-media { aspect-ratio: 1 / 1; }
  .cm-tier { padding: 1.5rem 1.25rem; }
  .cm-founding-numeral { line-height: .7; text-align: left; }
  .cm-production-copy { padding: var(--section-y) var(--gutter); }
}
@media (max-width: 900px) {
  .cm-production-copy { padding: var(--section-y) var(--gutter); }
}