/*
 * corporate-events.css — /corporate-events page composition only.
 * Story 29.1 CEO revision 2026-09-26 ("Dark Poster"), on standard v1.
 *
 * Loaded AFTER /public/tlt-site.css. Components (buttons, eyebrow, bullet
 * row, framed photo + banner, torn edge, form fields) come from the
 * standard; this file only places them. Rules it keeps:
 *   - tokens only: no hex, no font names, spacing from the --space-* scale;
 *   - no layout media query: the one 760px breakpoint lives in tlt-site.css,
 *     and the rows here wrap intrinsically (flex-wrap / .grid-3);
 *   - no restyling of standard components.
 */

/* Anchor jumps: smooth only when the visitor allows motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.cw-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Hero: logo + role + Book Now | event scene | script tagline ----------- */

.cw-hero {
  padding-top: var(--space-48);
  background: radial-gradient(ellipse at 50% 35%, var(--surface) 0%, var(--night) 70%);
}

.cw-hero__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
}

.cw-hero__brand {
  display: flex;
  flex: 0 1 300px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cw-hero__home {
  display: block;
  border-radius: var(--radius-sm);
}

.cw-hero__logo {
  width: 300px;
}

/* Copper role tag. Copper-deep fill: white small text needs it (5.17:1). */
.cw-role {
  margin: var(--space-16) 0 var(--space-32);
  padding: var(--space-8) var(--space-16);
  background: var(--copper-deep);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  clip-path: polygon(2% 0, 100% 6%, 97% 100%, 0 92%);
}

.cw-hero__scene {
  flex: 1 1 480px;
  max-width: 620px;
}

.cw-hero__tagline {
  flex: 0 1 300px;
}

.cw-tagline {
  font-size: var(--fs-h2);
  white-space: nowrap;
  color: var(--c-text);
  transform: rotate(-10deg);
}

.cw-swash {
  display: block;
  width: 70%;
  height: var(--space-4);
  margin: var(--space-8) 0 0 var(--space-48);
  border-radius: var(--space-4);
  background: var(--copper);
  transform: rotate(-10deg);
}

/* Title, subline, intro, highlights, photos ----------------------------- */

.cw-title {
  font-size: var(--fs-h1);
  text-align: center;
  text-wrap: balance;
  transform: skewX(-6deg);
}

.cw-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
}

.cw-sub::before,
.cw-sub::after {
  content: "";
  /* The rules give way first, so the words keep one line where they fit. */
  flex: 0 100 160px;
  min-width: var(--space-16);
  border-top: var(--divider);
}

.cw-sub__words {
  text-wrap: balance;
}

.cw-nowrap {
  white-space: nowrap;
}

.cw-lead {
  margin: var(--space-24) auto 0;
  text-align: center;
}

.cw-highlights {
  margin-top: var(--space-48);
}

.cw-photos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gutter);
  margin-top: var(--space-64);
}

.cw-photo--group {
  flex: 1 1 400px;
}

/* Source 278px wide: 340px is 1.22x, inside the 1.25x cap. */
.cw-photo--sandbag {
  flex: 0 1 340px;
  max-width: 340px;
}

/* Source 260px wide: shown at 1x at most. */
.cw-photo--mic {
  flex: 0 1 260px;
  max-width: 260px;
}

/* Benefits + close: one scene (CEO 2026-09-26, "merge") --------------- */

/* The benefits keep their full-bleed copper rules inside the scene. */
.cw-benefits {
  padding-block: var(--space-48);
  border-block: var(--divider);
}

/* Close, beneath the benefits: logo | promise + Book Now | "Let's Work Together!" */
.cw-close__in {
  align-items: center;
  margin-top: var(--space-64);
  text-align: center;
}

.cw-close__logo {
  width: 220px;
  margin-inline: auto;
}

.cw-close__cta {
  padding: var(--space-8) var(--space-24);
  border-inline: var(--divider);
}

.cw-close__cta p {
  margin-bottom: var(--space-16);
  color: var(--c-muted);
}

.cw-close__title {
  font-size: var(--fs-h2);
  color: var(--c-text);
  transform: rotate(-10deg);
}

/* Booking form (27.2 contract; standard fields) ------------------------- */

/* #book is a scene (standard v1.3.0): the scene owns its padding and its
   anchor landing (scroll-margin-top: 0), so the page sets neither. */

.cw-panel {
  max-width: 820px;
  margin-inline: auto;
  padding: calc(var(--gutter) + var(--space-8));
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}

.cw-book__lede {
  margin: var(--space-12) 0 var(--space-24);
  color: var(--c-muted);
}

.cw-form__status {
  margin: var(--space-16) 0;
}

.cw-form__status:empty {
  margin: 0;
}

.cw-form > button {
  margin-top: var(--space-24);
}

/* Honeypot: off-screen, never focusable (tabindex=-1 in the markup). */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cw-thanks > * + * {
  margin-top: var(--space-16);
}

.cw-accent {
  color: var(--c-accent);
}