/* ─────────────────────────────────────────
   CORPORATE EVENTS — page stylesheet
   Extracted from seven inline <style> blocks (GOAL-V3 §G1 / audit §5).
   Tokens from tokens.css; canonical headers/buttons/surfaces from
   components.css + layout.css. Off-token colours mapped to sanctioned
   accents (#FF4DB3 → --magenta-300, #00FF66 → --signal-green).
───────────────────────────────────────── */

/* Width Normalization — Match Header (1400px) — HOUSE-RULES §9 */
.ce-value .container.container--wide,
.ce-packages .container.container--wide,
.ce-process .container.container--wide,
.ce-gallery .container.container--wide,
.ce-cta .container.container--wide {
  padding-left: 32px;
  padding-right: 32px;
}

/* Shared vertical rhythm on section-pad tokens (was ad-hoc 6rem 2rem) */
.ce-value,
.ce-packages,
.ce-process,
.ce-gallery,
.ce-testimonials,
.ce-cta {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
  overflow: hidden;
}

/* Shared subtitle under canonical section headers */
.ce-section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-white-60);
  max-width: 620px;
  margin: 12px auto 0;
}

/* ═══════════════════════════════════
   SECTION 1 — CINEMATIC PARALLAX HERO
═══════════════════════════════════ */
.ce-hero {
  position: relative;
  min-height: max(600px, 80vh);   /* A14: was `height: 80vh` — hero must be able to grow */
  display: flex;
  align-items: safe center;   /* A14: `safe` — when the content is taller than the hero box, plain `center` overflows the PADDING edge in BOTH directions and puts the breadcrumb under the fixed header. `safe` falls back to start-alignment in exactly that case and never overflows the top. */
  justify-content: center;
  overflow: hidden;
  background: var(--racing-plum);
  margin-top: calc(var(--header-h, 80px) * -1);
  padding-top: var(--hero-pad-top);
  /* A14 — the arithmetic, because it is not obvious. The hero is pulled up by
     `margin-top: -var(--header-h)` so its artwork runs behind the fixed header, so
     content starts at (padding-top − header-h) from the VIEWPORT top, not from the
     section top. A `padding-top: var(--header-h)` therefore puts content at y=0 —
     directly under the header — which is why the breadcrumb was unclickable
     (`elementFromPoint` returned `.site-header__inner`). It has to be header-h TWICE
     plus the gap: once to cancel the negative margin, once to clear the header. */
}
.ce-hero__bg {
  position: absolute;
  inset: -10%;
  background-image: url('../assets/01-hero/HERO-003_rider-lineup-corporate-event.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.55;                 /* raised from 0.4; luminosity blend dropped (audit §5.1) */
  animation: ce-slowPan 30s infinite alternate linear;
  z-index: 0;
}
.ce-hero__overlay {
  position: absolute;
  inset: 0;
  /* Thinner top; a soft dark pool keeps centred white text AA over the bright sky */
  background:
    radial-gradient(75% 62% at 50% 52%, rgba(42,0,24,0.6) 0%, rgba(42,0,24,0.24) 55%, rgba(42,0,24,0.06) 100%),
    linear-gradient(180deg, rgba(42,0,24,0.3) 0%, rgba(42,0,24,0.12) 35%, rgba(42,0,24,0.85) 100%);
  z-index: 1;
}
.ce-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.ce-hero__glow--gold {
  width: 500px; height: 500px;
  background: rgba(255,215,0,0.08);
  filter: blur(150px);
  top: -15%; right: -5%;
  animation: ce-float 18s infinite alternate ease-in-out;
}
.ce-hero__glow--magenta {
  width: 600px; height: 600px;
  background: rgba(212,0,121,0.15);
  filter: blur(120px);
  bottom: -20%; left: -10%;
  animation: ce-float 22s infinite alternate-reverse ease-in-out;
}
.ce-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ce-hero__particle {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: ce-particle-rise linear infinite;
}
.ce-hero__particle:nth-child(1) { left: 10%; animation-delay: 0s;   animation-duration: 7s; }
.ce-hero__particle:nth-child(2) { left: 25%; animation-delay: 1.5s; animation-duration: 9s; }
.ce-hero__particle:nth-child(3) { left: 40%; animation-delay: 3s;   animation-duration: 6.5s; }
.ce-hero__particle:nth-child(4) { left: 58%; animation-delay: 0.7s; animation-duration: 8s; }
.ce-hero__particle:nth-child(5) { left: 75%; animation-delay: 2.2s; animation-duration: 10s; }
.ce-hero__particle:nth-child(6) { left: 90%; animation-delay: 3.8s; animation-duration: 7.5s; }
.ce-hero__kinetic {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18vw;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,215,0,0.05);
  background: linear-gradient(180deg, rgba(255,215,0,0.04) 0%, rgba(212,0,121,0.02) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation: ce-kinetic-breathe 20s infinite alternate ease-in-out;
}
.ce-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2rem;
  max-width: 880px;
}
.ce-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ce-hero__breadcrumb a {
  color: rgba(255,215,0,0.85);
  transition: color var(--transition);
}
.ce-hero__breadcrumb a:hover { color: var(--gold); }
.ce-hero__breadcrumb-sep { color: rgba(255,255,255,0.35); font-size: 0.75rem; }
.ce-hero__breadcrumb-current { color: rgba(255,255,255,0.75); }
.ce-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-xl);
  font-weight: 900;
  line-height: 1.2;      /* Thai wrapped-heading floor (LESSONS #2) */
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.55), 0 0 40px rgba(255,215,0,0.15);
}
.ce-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.92);
  font-weight: 400;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 2rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.ce-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
/* The stats HUD is pulled up 80px to overlap this hero, which swallowed the lower
   48px of the cue; the cue also sat 42px inside the CTA row. It now rides above
   the panel's top edge, and .ce-hero carries the extra bottom padding that opens
   the band for it (see the §G8 block). */
.ce-hero__scroll {
  position: absolute;
  bottom: 104px;   /* 24px clear of the HUD's 80px overlap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ce-hero__scroll-text {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ce-hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,215,0,0.6), transparent);
  animation: ce-scroll-pulse 2s ease-in-out infinite;
}
.ce-hero__accent-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--magenta) 70%, transparent);
  z-index: 10;
}
@keyframes ce-slowPan {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, 1%); }
}
@keyframes ce-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.1); }
}
@keyframes ce-particle-rise {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  10% { opacity: 0.8; transform: translateY(-10vh) scale(1); }
  90% { opacity: 0.3; }
  100% { transform: translateY(-85vh) scale(0.3); opacity: 0; }
}
@keyframes ce-kinetic-breathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes ce-scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }
}

/* ═══════════════════════════════════
   STATS HUD — verifiable stats (audit §5.2)
   Component surface = .njt-stats--glass-hud (components.css).
   Page override: text-value numbers sit smaller than the numeric clamp.
═══════════════════════════════════ */
.ce-stats .njt-stat__number {
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════
   SECTION 3 — VALUE PROPOSITION
═══════════════════════════════════ */
.ce-value { background: var(--bg-dark); }
.ce-value__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ce-value__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.05);
}
.ce-value__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ce-value__media:hover img { transform: scale(1.05); }
.ce-value__content {
  background: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(180%);
  backdrop-filter: blur(var(--blur-card)) saturate(180%);
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateX(-2rem);
  z-index: 10;
  position: relative;
}
.ce-value .njt-section__title { margin-bottom: 1.25rem; }
.ce-value__desc {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.ce-value__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ce-value__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.ce-value__feature-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius);
  color: var(--gold);
}
.ce-value__feature-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.ce-value__feature-text strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════
   SECTION 4 — EVENT PACKAGES
═══════════════════════════════════ */
.ce-packages { background: var(--section-gradient); }
.ce-packages__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,215,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}
/* Four packages across one row (was 2×2 per audit §5.4). The 1040px cap existed
   for the two-up layout and would have squeezed four cards to ~240px, so the grid
   now runs to the page rail.
   The seven rows — image · icon · name · desc · includes · rate · CTA — are shared,
   and each card subgrids onto them, so every row keeps a common baseline however
   the copy falls. Without it a single extra line anywhere cascades: in Thai the
   Custom Package description runs to three lines against the others' two, which
   pushed its checklist and its whole rate block 22px out of step. */
.ce-packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto auto auto auto auto;
  gap: 1.5rem;
  max-width: none;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* Below the rail four cards stop being legible — fall back to the old 2×2. */
@media (max-width: 1180px) {
  .ce-packages__grid { grid-template-columns: repeat(2, 1fr); max-width: 1040px; }
}
.ce-pkg {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base), box-shadow var(--dur-base);
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  row-gap: 0;
}
.ce-pkg:hover {
  transform: translateY(-8px);
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 20px 40px rgba(212,0,121,0.2), 0 0 0 1px rgba(255,215,0,0.3);
}
.ce-pkg__img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.ce-pkg__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ce-pkg:hover .ce-pkg__img img { transform: scale(1.08); }
.ce-pkg__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.ce-pkg__badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  z-index: 2;
}
/* Opaque like --custom below, and for the same reason: these three were 10–15%
   tints, so their contrast rode on whatever the photo happened to put behind them.
   Four-across crops the images tighter and dropped the gold and magenta pills onto
   a white banner and a white barrier, where they nearly vanished. */
.ce-pkg__badge--popular {
  background: var(--gold);
  color: #000;                       /* ~15:1 */
  border: 1px solid var(--gold);
}
.ce-pkg__badge--family {
  background: var(--magenta);
  color: #fff;                       /* ~5.9:1 — AA for small bold text */
  border: 1px solid var(--magenta);
}
.ce-pkg__badge--pro {
  background: #141414;
  color: #fff;                       /* ~17:1 */
  border: 1px solid rgba(255,255,255,0.35);
}
/* GOAL-V4 §G8 — AA fix. 11.2px --signal-green on a green tint measured ~3:1:
   a fail as small text. CONVENTIONS #8's sanctioned pattern is the reverse —
   the green does the NON-TEXT work (tint + border, ≥3:1) and the label is white
   (≥12:1 on this surface). Same visual family, now compliant. */
.ce-pkg__badge--custom {
  background: var(--signal-green);   /* opaque, so the ratio cannot drift with the photo behind it */
  color: #fff;                       /* measured 5.08:1 on #2E7D46 — AA for small text */
  border: 1px solid var(--signal-green);
}
/* `display: contents` hoists the six copy rows into the card's subgrid. A plain
   <div> has no implicit role, so nothing leaves the accessibility tree; its former
   1.5rem padding now lives on the rows themselves. */
.ce-pkg__body { display: contents; }
.ce-pkg__icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(212,0,121,0.1));
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius-md);
  margin: 1.5rem 1.5rem 1rem;
  color: var(--gold);
}
.ce-pkg__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 0.5rem;
  padding: 0 1.5rem;
}
.ce-pkg__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  padding: 0 1.5rem;
}
.ce-pkg__includes {
  list-style: none;
  padding: 0;
  margin: 0 1.5rem 1.5rem;
}
.ce-pkg__includes li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ce-pkg__includes li:last-child { border-bottom: none; }
.ce-pkg__check {
  color: var(--gold);
  flex-shrink: 0;
}
/* Single clean price line (audit §5.4 — was "From สอบถาม บาท/คน" garble) */
.ce-pkg__price {
  margin-top: auto;
  margin-bottom: 1rem;
}
.ce-pkg__price span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
  color: var(--gold);
  line-height: 1.1;
}
.ce-pkg .btn-cta {
  display: flex;
  justify-content: center;
  /* No `width: 100%` — as a grid item it already stretches to the column, and
     100% plus these margins resolved 29px wider than the card, so the button's
     angled tail was being clipped by the card's `overflow: hidden`. */
  margin: 0 1.5rem 1.5rem;
}

/* ═══════════════════════════════════
   SECTION 5 — PROCESS (icon-in-ring, number chip — mirrors coffee-track)
═══════════════════════════════════ */
.ce-process { background: var(--bg-dark); }
.ce-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.ce-process__grid::before {
  content: '';
  position: absolute;
  top: 42px;                         /* ring centre (84px / 2) */
  left: calc(12.5% + 42px);
  right: calc(12.5% + 42px);
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--magenta), var(--gold));
  opacity: 0.5;
  z-index: 0;
}
.ce-process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.ce-process__ring {
  position: relative;
  width: 84px; height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Opaque base under the tint. The connector runs edge-to-edge behind the row,
     and a purely translucent disc let it read straight through every ring, so the
     line appeared to cut across each icon instead of joining the steps. */
  background-color: var(--bg-dark);
  background-image: linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(212,0,121,0.24) 100%);
  border: 2px solid rgba(255,215,0,0.45);
  color: var(--gold);
  margin-bottom: 1.5rem;
  box-shadow: 0 0 28px rgba(255,215,0,0.15), inset 0 0 16px rgba(255,215,0,0.06);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  z-index: 2;
}
.ce-process__ring svg { width: 34px; height: 34px; }
.ce-process__num {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a0510;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  border: 2px solid var(--racing-plum);
}
.ce-process__card {
  flex: 1;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  width: 100%;
}
/* Ring + card animate together on one step hover (audit §5.5) */
.ce-process__step:hover .ce-process__ring {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 0 36px rgba(255,215,0,0.35), inset 0 0 20px rgba(255,215,0,0.1);
}
.ce-process__step:hover .ce-process__card {
  border-color: rgba(255,215,0,0.25);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,215,0,0.08);
  transform: translateY(-4px);
}
.ce-process__card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.ce-process__card-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* ═══════════════════════════════════
   SECTION 6 — GALLERY (banner + tile row)
═══════════════════════════════════ */
.ce-gallery { background: var(--section-gradient); }
.ce-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.ce-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  height: 240px;
}
/* Full-width banner for the ultra-wide group lineup (audit §5.6) */
.ce-gallery__item--banner {
  grid-column: 1 / -1;
  height: 380px;
}
.ce-gallery__item--banner img { object-position: center 62%; }
.ce-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ce-gallery__item:hover img { transform: scale(1.05); }
.ce-gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.ce-gallery__item:hover .ce-gallery__item-overlay { opacity: 1; }
.ce-gallery__item-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}
/* Touch-persistent labels (audit §5.6) */
@media (hover: none) {
  .ce-gallery__item-overlay { opacity: 1; }
}

/* ═══════════════════════════════════
   SECTION 7 — TESTIMONIALS (removed this cycle — see HTML flag)
   No verifiable corporate testimonial exists in the FB export; the
   fabricated grid was struck under HOUSE-RULES §2 / CONVENTIONS #1.
═══════════════════════════════════ */

/* ═══════════════════════════════════
   SECTION 8 — QUOTE CTA + FORM (demo interception, audit §5.8)
═══════════════════════════════════ */
.ce-cta { background: var(--section-gradient); }
.ce-cta__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ce-cta__glow--gold {
  width: 400px; height: 400px;
  background: rgba(255,215,0,0.06);
  filter: blur(150px);
  top: -10%; right: 10%;
}
.ce-cta__glow--magenta {
  width: 500px; height: 500px;
  background: rgba(212,0,121,0.08);
  filter: blur(120px);
  bottom: -20%; left: 5%;
}
.ce-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.ce-cta .njt-section__title { margin-bottom: 1.25rem; }
.ce-cta__desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.ce-cta__contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ce-cta__method {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--transition);
}
.ce-cta__method:hover { color: var(--gold); }
.ce-cta__method-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius-md);
  color: var(--gold);
  flex-shrink: 0;
}
.ce-cta__form-card {
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
.ce-cta__form-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1.5rem;
  text-align: center;
}
.ce-cta__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ce-cta__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ce-cta__input,
.ce-cta__select,
.ce-cta__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--transition);
  outline: none;
}
.ce-cta__input::placeholder,
.ce-cta__textarea::placeholder { color: rgba(255,255,255,0.35); }
.ce-cta__input:focus,
.ce-cta__select:focus,
.ce-cta__textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,215,0,0.1); }
.ce-cta__select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ce-cta__select option { background: #1a0510; color: #fff; }
.ce-cta__textarea {
  resize: vertical;
  min-height: 100px;
}
/* Theme the native date control on the dark card (audit §5.8) */
.ce-cta__input[type="date"] { color-scheme: dark; }
.ce-cta__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}
.ce-cta__input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.ce-cta__submit {
  display: flex;
  width: 100%;
  justify-content: center;
}
.ce-cta__free-badge {
  text-align: center;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.ce-cta__free-badge strong { color: var(--gold); }

/* Demo/Phase-2 confirmation panel (shown on submit) */
.ce-cta__confirm {
  text-align: center;
  padding: 1rem 0;
}
.ce-cta__confirm-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(46,125,70,0.15);
  border: 1px solid rgba(46,125,70,0.5);
  color: var(--signal-green);
}
/* Kicker consolidated onto the canonical .njt-kicker (R2 §Consolidation) —
   the page dialect matched it bar the font-family token. */
.ce-cta__confirm-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.ce-cta__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1024px) {
  .ce-process__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .ce-process__grid::before { display: none; }
}
@media (max-width: 992px) {
  .ce-value__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ce-value__content { transform: translateY(-2rem); margin: 0 0.5rem; }
  .ce-value__features { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ce-cta__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ce-cta__form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ce-value,
  .ce-packages,
  .ce-process,
  .ce-gallery,
  .ce-cta { padding-top: var(--section-pad-mob); padding-bottom: var(--section-pad-mob); }
  .ce-hero { height: 70vh; min-height: 480px; }
  .ce-hero__kinetic { font-size: 24vw; }
  .ce-hero__glow--gold { width: 300px; height: 300px; }
  .ce-hero__glow--magenta { width: 350px; height: 350px; }
  .ce-hero__scroll { display: none; }
  .ce-hero__cta { flex-direction: column; align-items: stretch; }
  .ce-gallery__item--banner { height: 260px; }
}
@media (max-width: 640px) {
  .ce-packages__grid { grid-template-columns: 1fr; max-width: 420px; }
  .ce-process__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ce-process__step { flex-direction: row; text-align: left; gap: 1.25rem; }
  .ce-process__ring { width: 60px; height: 60px; margin-bottom: 0; flex-shrink: 0; }
  .ce-process__ring svg { width: 26px; height: 26px; }
  .ce-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ce-gallery__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════
   REDUCED MOTION — decorative loops off
═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ce-hero__bg,
  .ce-hero__glow,
  .ce-hero__particle,
  .ce-hero__kinetic,
  .ce-hero__scroll-line { animation: none !important; }
  .ce-hero__particle { opacity: 0; }
}

/* .njt-rate + .njt-nw PROMOTED to css/components.css (A1, round 2).
   This file carried a byte-identical 5,173-byte copy (md5 c5ef26b146e36b4321571576459e478b),
   as did the other three page files named in the old header — 20,692 bytes of
   the same component shipped four times. components.css loads on all 18 routes,
   so the copy here was never doing anything the shared file would not. */

/* ═══════════════════════════════════════════════════════════════════════════
   GOAL-V4 §G8 — CORPORATE ELEVATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero / stats seam ──
   The shared HUD ships `padding: 0 20px` and `margin-top: -80px`, so on this page
   the panel's lower edge landed exactly on the venue-facts band with no gap at
   all, while its upper edge covered the scroll cue. This padding restores the gap
   underneath. */
.ce-stats { padding-bottom: 72px; }

/* The hero was sized entirely by its own content (padding + copy), which left
   `align-items: center` with no slack to centre against — the copy simply sat
   wherever the padding put it. The min-height gives centring room to work, and
   the bottom padding reserves the strip the HUD overlaps plus the cue's slot, so
   the copy lands on the middle of the band between the header and the panel.
   Gated to ≥769px: below that the cue is hidden and the mobile rule above sets
   its own 70vh/480px hero, which an unscoped min-height here would override. */
@media (min-width: 769px) {
  .ce-hero {
    min-height: max(800px, 88vh);
    padding-bottom: 112px;
  }
}

/* ── Venue facts band ── */
.ce-facts {
  background: var(--black-card);
  border-block: 1px solid rgba(255, 215, 0, 0.16);
  padding: 44px 0;
}
.ce-facts .container.container--wide { padding-left: 32px; padding-right: 32px; }
.ce-facts__title {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.85);
  margin-bottom: 24px;
}
.ce-facts__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ce-facts__item {
  background: var(--black-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ce-facts__label {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.8);
}
.ce-facts__val {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-white);
}
.ce-facts__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--text-white-60);
}

/* ── Package rate device (replaces the dead "สอบถามราคา" line) ── */
/* The rate row is sized to the tallest block in the set and every block stretches
   to fill it, so the "per group" labels share a baseline. Pushing the enquiry link
   to the block's foot lines up the links and reply promises too — the difference
   between a two- and three-line inclusion note is absorbed as slack in the middle
   rather than stepping the rows. */
.ce-pkg__rate { margin: 0 1.5rem 1rem; }
.ce-pkg__rate .njt-rate__link { margin-top: auto; }

/* ── B2B FAQ ── */
.ce-faq {
  padding: var(--section-pad) 0;
  background: var(--bg-gradient-v);
}
.ce-faq .container.container--wide { padding-left: 32px; padding-right: 32px; }

@media (max-width: 1024px) {
  .ce-facts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ce-facts__grid { grid-template-columns: 1fr; }
  .ce-facts { padding: 32px 0; }
}