/**
 * VERGO — Special Events theme layer.
 *
 * Loaded AFTER /vergo-site.css and scoped to `body.se-page`, so every token
 * override here dies at the edge of these pages. Nothing in this file may
 * change /hire, /work or the homepage.
 *
 * Seasonal themes are a second class on the same body element
 * (`se-page se-theme-halloween`). To add Christmas later, copy the
 * `.se-theme-halloween` token block and change the colour values — the
 * component layer below reads from tokens, never from hex.
 *
 * IMAGE SLOTS. Every photographic area is a CSS custom property with a
 * gradient fallback, so dropping in real photography is a one-line change:
 *   --se-hero-img      hero backdrop     (see .se-hero)
 *   --se-concept-img   per-concept card  (set on the .se-concept element)
 * Expected filenames live in /images/special-events/README.md.
 */

/* ------------------------------------------------------------------ *
 * Theme tokens
 * ------------------------------------------------------------------ */

/* Light-on-dark hairlines, for the one dark page (Halloween). */
body.se-theme-halloween {
  --hairline: rgba(242, 239, 232, 0.10);
  --hairline-soft: rgba(242, 239, 232, 0.07);
  --hairline-strong: rgba(242, 239, 232, 0.14);
  --panel-fill: rgba(242, 239, 232, 0.025);
  --card-fill: linear-gradient(180deg, rgba(242, 239, 232, 0.05), rgba(242, 239, 232, 0.008));
}

/* Black, gold and orange — and each one has exactly one job, which is the only
 * thing stopping a three-colour scheme turning to mud:
 *
 *   BLACK   the ground. Everything sits on it.
 *   GOLD    the frame. Type and rules only — eyebrows, section labels, the
 *           headline accent, index numerals, hairlines. This is the VERGO
 *           signature and it is what carries over to Christmas and NYE.
 *   ORANGE  the action. Every control, every state: buttons, hovers, checked
 *           boxes, selected pills — plus the ember glow in the backdrop.
 *
 * Gold never becomes a button and orange never becomes a heading. Keep it that
 * way and the page stays premium rather than seasonal-aisle.
 */
body.se-theme-halloween {
  --bg: #09080a;
  --footer-bg: #060507;
  --header-bg: #09080a;

  /* Light type. :root in vergo-site.css is the light theme, so every text,
     surface and state token it sets has to be turned back round here, or the
     page inherits near-black type on this black ground. */
  --ink: #f7f7f7;
  --muted: #9b9b9b;
  --line: rgba(242, 239, 232, 0.10);
  --text: var(--ink);
  --text-secondary: #d6d6d6;
  --text-muted: var(--muted);
  --surface: rgba(242, 239, 232, 0.03);
  --hover-fill: rgba(242, 239, 232, 0.08);
  --accent-soft: rgba(237, 122, 51, 0.12);
  --error: #ff8a80;
  --error-soft: rgba(255, 138, 128, 0.12);
  --success: #7fd1a8;
  --success-soft: rgba(127, 209, 168, 0.12);
  --focus: 3px solid #7fbfff;

  /* Halloween ember. 6.6:1 against --accent-ink, so .btn-primary stays AA. */
  --accent: #ed7a33;
  --accent-hover: #f79355;
  --accent-ink: #17110c;
  --accent-rgb: 237, 122, 51;

  /* VERGO gold — the same value as the brand mark in vergo-site.css.
     9.4:1 on this background, so it is safe for small type. */
  --se-gold: #c4a24e;
  --se-gold-hover: #e5c45f;
  --se-gold-rgb: 212, 175, 55;

}
/* The ember glow sits on a fixed layer behind the page. As a fixed body
   background it was repainted on every scroll frame. */
body.se-theme-halloween::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 50% at 78% -8%, rgba(var(--se-gold-rgb), 0.10), rgba(var(--se-gold-rgb), 0) 62%),
    radial-gradient(80% 45% at 8% 4%, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0) 60%);
}

/* Christmas and the special events hub run on the site's main (charcoal) theme: the
 * tokens come from :root in vergo-site.css. The "gold frame" role (eyebrows,
 * index numerals, rules) is taken by the green accent. Only Halloween keeps a
 * dark seasonal palette.
 */
body.se-theme-light {
  --se-gold: var(--accent);
  --se-gold-hover: var(--accent-hover);
  --se-gold-rgb: var(--accent-rgb);
  --se-pumpkin: none;
}
body.se-theme-light .se-hero {
  --se-hero-img: none;
  background: radial-gradient(110% 90% at 20% 0%, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0) 70%);
}
body.se-theme-light .se-form-section {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* A VERGO Christmas: evergreen ground, VERGO gold for the frame
 * and Christmas red for the action. The same roles as Halloween's black, gold
 * and orange, so the component layer below needs nothing of its own. The
 * VERGO tree (the brand V strung in lights) stands in for the pumpkin.
 */
body.se-theme-christmas {
  --hairline: rgba(242, 239, 232, 0.12);
  --hairline-soft: rgba(242, 239, 232, 0.08);
  --hairline-strong: rgba(242, 239, 232, 0.16);
  --panel-fill: rgba(242, 239, 232, 0.03);
  --card-fill: linear-gradient(180deg, rgba(242, 239, 232, 0.06), rgba(242, 239, 232, 0.01));

  --bg: #0c1f17;
  --footer-bg: #08160f;
  --header-bg: #0c1f17;

  --ink: #f7f5ef;
  --muted: #a9b8af;
  --line: rgba(242, 239, 232, 0.12);
  --text: var(--ink);
  --text-secondary: #dde5df;
  --text-muted: var(--muted);
  --surface: rgba(242, 239, 232, 0.04);
  --hover-fill: rgba(242, 239, 232, 0.09);
  --accent-soft: rgba(200, 50, 63, 0.16);
  --error: #ff9a90;
  --error-soft: rgba(255, 154, 144, 0.12);
  --success: #8fe0b6;
  --success-soft: rgba(143, 224, 182, 0.12);
  --focus: 3px solid #7fbfff;

  /* Christmas red. White ink on it is 5.6:1, so .btn-primary stays AA. */
  --accent: #c8323f;
  --accent-hover: #dc4451;
  --accent-ink: #ffffff;
  --accent-rgb: 200, 50, 63;

  --se-gold: #d9b85c;
  --se-gold-hover: #ecd08a;
  --se-gold-rgb: 212, 175, 55;
  --se-pumpkin: url('/images/special-events/vergo-christmas-tree.svg');

  background-image: none;
}
/* The glow is a fixed layer behind the page rather than the body's own
   background, so scrolling never repaints it. */
body.se-theme-christmas::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 50% at 80% -8%, rgba(var(--se-gold-rgb), 0.12), rgba(var(--se-gold-rgb), 0) 62%),
    radial-gradient(80% 45% at 6% 4%, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 60%);
}
body.se-theme-christmas .se-hero { --se-hero-img: linear-gradient(transparent, transparent); }
body.se-theme-christmas .se-concept-grid + .check-list { margin-top: 32px; }
/* The tree is taller than the pumpkin, so on a phone it sits lower and smaller
   to stay inside the band under the buttons. */
@media (max-width: 640px) {
  body.se-theme-christmas .se-hero {
    background-size: cover, cover, 110px auto, cover, cover;
    background-position: center, center, right 7% bottom 36px, center, center bottom;
  }
}
body.se-theme-christmas .brand-mark {
  background: transparent url('/images/special-events/vergo-christmas-tree.svg') center / contain no-repeat;
  border: none;
  border-radius: 0;
  width: 30px;
  height: 30px;
  color: transparent;
  font-size: 0;
}
body.se-theme-christmas .se-ornament span { background-image: url('/images/special-events/vergo-christmas-tree.svg'); }

/* The Hire staff dropdown sits over the page, and these themes' --surface is
   all but transparent: it takes the header's solid colour instead. */
@media (min-width: 981px) {
  body.se-theme-halloween .nav-sub,
  body.se-theme-christmas .nav-sub { background: var(--header-bg); }
}

/* New Year's Eve: the one line under the heading, set large. */
.se-nye-line {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--text);
}
.se-nye-line strong { color: var(--se-gold); }

/* The "Other" role reveals a box to say what. */
.se-other-field[hidden] { display: none; }

/* The header mark becomes the pumpkin for the length of these pages. The V is
   still the V — it is just carved now. Scoped to Halloween, so the logo is
   untouched on the other seasonal pages and everywhere else on the site. */
.se-theme-halloween .brand-mark {
  background: transparent url('/images/special-events/vergo-pumpkin.svg') center / contain no-repeat;
  border: none;
  border-radius: 0;
  width: 30px;
  height: 30px;
  color: transparent;
  font-size: 0;
}

/* Divider ornament — the same motif, small, between two bands. */
.se-ornament {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 40px 0;
}
.se-ornament::before,
.se-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--se-gold-rgb), 0.34), transparent);
}
.se-ornament span {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  background: url('/images/special-events/vergo-pumpkin.svg') center / contain no-repeat;
}
@media (max-width: 640px) {
  .se-ornament { padding: 4px 20px 0; gap: 14px; }
  .se-ornament span { width: 42px; height: 42px; }
}

/* Gold owns the eyebrow and the section labels — the two bits of type that
   appear on every section and say "VERGO" before the heading does. */
.se-page .eyebrow { color: var(--se-gold); }
.se-page .section-label { color: var(--se-gold); opacity: 0.8; }

/* The site's secondary button picks up gold on hover, so the hero shows both
   colours side by side without either one shouting. */
.se-page .btn-secondary:hover,
.se-page .btn-secondary:focus-visible {
  border-color: var(--se-gold);
  color: var(--se-gold-hover);
}

/* Smooth in-page jumps for the hero's "Explore what we can do" link, without
   touching scroll behaviour anywhere else on the site. */
html:has(body.se-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.se-page) { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ *
 * Shared bits
 * ------------------------------------------------------------------ */

/* Section headings carry the page now that the standfirst paragraphs are gone,
   so they run bigger than the site default. */
.se-h2 {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 0 4px;
  text-wrap: balance;
}

.se-intro { max-width: 46ch; }
.se-intro h2 { margin: 0 0 16px; }
.se-intro p { color: var(--text-secondary); margin: 0; font-size: 18px; }

.se-band { border-top: 1px solid var(--hairline-soft); }
.se-band--deep { background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)); }


/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.se-hero {
  position: relative;
  /* Point this at a real photograph to replace the stand-in backdrop.
     Nothing else in the hero needs to change. */
  --se-hero-img: url('/images/special-events/halloween-hero-cast.svg');
  /* Layers paint top-down, so the pumpkin sits ABOVE the scrim and keeps its
     glow, while the cast artwork underneath stays knocked back.
     Keep the scrim light: the artwork carries its own left-side and vertical
     scrims for headline legibility, so a heavy layer here double-darkens and
     the cast disappears. */
  background-image:
    radial-gradient(70% 55% at 20% 20%, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0) 62%),
    radial-gradient(55% 45% at 85% 6%, rgba(var(--se-gold-rgb), 0.09), rgba(var(--se-gold-rgb), 0) 60%),
    var(--se-pumpkin),
    linear-gradient(to top, var(--bg) 0%, rgba(9, 8, 10, 0.34) 30%, rgba(9, 8, 10, 0.1) 100%),
    var(--se-hero-img);
  background-size: cover, cover, 360px auto, cover, cover;
  /* Bottom-anchored so the cast stands on the hero's edge instead of being
     cropped through the middle. */
  /* Bottom offset clears the noun strip, which is inside the hero — at a
     smaller offset the pumpkin gets its base clipped off. */
  background-position: center, center, right 7% bottom 92px, center, center bottom;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--hairline-soft);
}

/* The VERGO pumpkin: a jack-o'-lantern carved with the brand V rather than a
   face. One motif, used at size, instead of Halloween clip art everywhere. */
body.se-theme-halloween { --se-pumpkin: url('/images/special-events/vergo-pumpkin.svg'); }

@media (max-width: 900px) {
  .se-hero { background-size: cover, cover, 190px auto, cover, cover; }
}
/* On a phone there is no side room, so the pumpkin gets a band of its own
   under the buttons rather than sitting on top of them. The space comes from
   .se-hero-inner's own padding rule below — setting padding-bottom here would
   be wiped by that later `padding:` shorthand. */
@media (max-width: 640px) {
  .se-hero { background-size: cover, cover, 150px auto, cover, cover; }
  .se-hero { background-position: center, center, right 7% bottom 132px, center, center bottom; }
}

.se-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 96px 40px 80px;
}
@media (min-width: 900px) { .se-hero-inner { padding: 150px 40px 120px; } }
/* The deep bottom padding is deliberate: it is the band the pumpkin sits in,
   clear of the buttons above and the noun strip below. */
@media (max-width: 640px) { .se-hero-inner { padding: 64px 20px 200px; } }

/* Three stacked words, set as large as the viewport will take. The headline is
   the whole message now, so it gets the room the copy used to take. */
.se-hero h1 {
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.se-hero h1 .se-hero-line2 { color: var(--se-gold); }

/* The offer in one sentence, set large enough to be read before the paragraph
   under it. The headline says which night; this says what you get. Bone, not
   gold and not orange — gold is already carrying the headline accent and
   orange is reserved for controls. */
.se-hero-claim {
  max-width: 18ch;
  margin: 0 0 20px;
  /* Sans at 600 against the serif headline. Three families doing three jobs:
     serif names the night, sans-bold makes the claim, sans-regular carries the
     detail. Matching the headline's serif here would read as a second
     headline and the hierarchy would flatten. */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.se-hero .lede { max-width: 50ch; font-size: clamp(16px, 1.9vw, 19px); margin-top: 0; opacity: 0.86; }
.se-hero .btn-row { margin-top: 34px; }

/* Gold rule of plain nouns under the hero — says what the page sells without
   another sentence, and gives the fold an edge to sit on. */
.se-hero-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  border-top: 1px solid rgba(var(--se-gold-rgb), 0.22);
}
.se-hero-strip li {
  flex: 1 1 auto;
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--se-gold);
  white-space: nowrap;
  border-right: 1px solid rgba(var(--se-gold-rgb), 0.14);
  text-align: center;
}
.se-hero-strip li:last-child { border-right: none; }
@media (max-width: 760px) {
  .se-hero-strip li { flex: 1 0 50%; border-right: none; font-size: 11px; padding: 14px 16px; text-align: left; }
}

/* ------------------------------------------------------------------ *
 * How involved do you want us to be? — three prominent tiers
 * ------------------------------------------------------------------ */

.se-involve-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 900px) { .se-involve-grid { grid-template-columns: repeat(3, 1fr); } }

.se-involve {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card-fill);
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}
.se-involve::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--se-gold), rgba(var(--accent-rgb), 0.55));
  opacity: 0.55;
}
.se-involve:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-3px); }

.se-involve-num {
  font-family: var(--font-serif);
  font-size: 76px;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--se-gold-rgb), 0.55);
  display: block;
  margin-bottom: 6px;
}
.se-involve h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 14px 0 10px;
  color: var(--text);
}
/* One short line under the heading, in gold, then straight into the list. */
.se-involve-sub {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--se-gold);
  font-size: 15px;
}

.se-involve-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 15px;
  color: var(--text-secondary);
}
.se-involve-list li { padding-left: 18px; position: relative; }
.se-involve-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--se-gold);
}


/* ------------------------------------------------------------------ *
 * What can VERGO provide? — service grid
 * ------------------------------------------------------------------ */

.se-service-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: 44px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 620px) { .se-service-grid { grid-template-columns: 1fr 1fr; } }
/* Nine services, so three columns above 1000px fills every row exactly. In the
   two-column band the ninth would sit alone against an empty cell, which shows
   as a block of hairline colour, so it takes the whole row instead. */
@media (min-width: 620px) and (max-width: 999px) {
  .se-service-grid > .se-service:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .se-service-grid { grid-template-columns: repeat(3, 1fr); } }

.se-service {
  background: var(--bg);
  padding: 30px 26px 32px;
  transition: background-color 180ms ease;
}
.se-service:hover { background: rgba(242, 239, 232, 0.035); }

/* Gold line glyph per service. Reads faster than a number and does the job the
   deleted sentences used to. currentColor keeps the SVGs themeable. */
.se-service-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--se-gold-rgb), 0.3);
  border-radius: 50%;
  color: var(--se-gold);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.se-service-ico svg { width: 23px; height: 23px; stroke-linecap: round; stroke-linejoin: round; }
.se-service:hover .se-service-ico {
  border-color: var(--se-gold);
  background: rgba(var(--se-gold-rgb), 0.1);
}

.se-service-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--se-gold);
}
.se-service h3 { margin: 20px 0 8px; font-size: 17px; color: var(--text); }
.se-service p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }

/* ------------------------------------------------------------------ *
 * Concepts — "Choose a world"
 * ------------------------------------------------------------------ */

.se-concept-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 700px) { .se-concept-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .se-concept-grid { grid-template-columns: repeat(3, 1fr); } }

.se-concept {
  --se-c1: #2b2015;
  --se-c2: #0a0908;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-fill);
  transition: border-color 180ms ease, transform 180ms ease;
}
.se-concept:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-3px); }
.se-concept-inner { height: 100%; display: flex; flex-direction: column; }

/* The first concept is the flagship — full row, art running the whole width
   with the title over it. */
@media (min-width: 1000px) {
  .se-concept--feature { grid-column: span 3; }
  .se-concept--feature .se-concept-media { aspect-ratio: 32 / 9; }
  .se-concept--feature .se-concept-title { font-size: clamp(34px, 4vw, 58px); }
  .se-concept--feature .se-concept-body { padding: 24px 30px 28px; }
}

/* Image slot. Set --se-concept-img on the .se-concept element to swap the
   artwork for real photography; the tint is the fallback if a file goes
   missing. The title sits on the image, so the scrim below is load-bearing. */
.se-concept-media {
  aspect-ratio: 4 / 3;
  background-image: var(--se-concept-img, linear-gradient(145deg, var(--se-c1), var(--se-c2)));
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--hairline-soft);
}
.se-concept-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 5, 8, 0.92) 2%, rgba(6, 5, 8, 0.45) 34%, rgba(6, 5, 8, 0) 62%);
}

.se-concept-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 24px 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.se-concept-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }

.se-chip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.se-chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.se-chip {
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  background: rgba(242, 239, 232, 0.03);
}

/* Tighter than the site default — these are four short lines, not prose. */
.se-fact-list { margin-top: 26px; gap: 12px; font-size: 16px; }
.se-fact-list li { padding-bottom: 12px; border-bottom: 1px solid var(--hairline-soft); }
.se-fact-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* Full-width caveats under a section. Same job as .form-hint, but these sit in
   a 1180px shell rather than a form column, so they need a measure of their
   own — otherwise they run to 180+ characters a line. */
.se-page .se-caveat {
  max-width: 76ch;
  margin-top: 26px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Decor themes. Same hairline grid as the service grid. Ten themes plus
 * the "and many more" cell, which spans the spare space so every row
 * fills: the full row at two columns, two cells at three.
 * ------------------------------------------------------------------ */

.se-decor-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: 36px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 620px) {
  .se-decor-grid { grid-template-columns: 1fr 1fr; }
  .se-decor--more { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .se-decor-grid { grid-template-columns: repeat(3, 1fr); }
  .se-decor--more { grid-column: 1 / -1; }
}

.se-decor {
  background: var(--bg);
  padding: 26px 26px 28px;
  transition: background-color 180ms ease;
}
.se-decor:hover { background: rgba(242, 239, 232, 0.035); }
.se-decor h3 { margin: 12px 0 6px; font-size: 18px; color: var(--text); }
.se-decor p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }

.se-decor--more { display: block; text-decoration: none; }
.se-decor--more h3 { color: var(--accent); }
.se-decor--more:hover h3,
.se-decor--more:focus-visible h3 { color: var(--accent-hover); }

/* ------------------------------------------------------------------ *
 * Makeup
 * ------------------------------------------------------------------ */

.se-makeup-figure {
  margin: 0 0 40px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d0b09;
}
.se-makeup-figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
/* A 21:9 band is ~165px tall on a phone, which reads as an empty box rather
   than an image. Give it more height where the page is narrow. */
@media (max-width: 640px) {
  .se-makeup-figure img { aspect-ratio: 3 / 2; }
}

.se-makeup-split {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .se-makeup-split { grid-template-columns: 1fr 1fr; } }

.se-makeup-panel {
  padding: 32px 30px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card-fill);
}
.se-makeup-panel h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--text);
}
/* :not() for the same reason as .se-involve above — a bare `> p` is (0,1,1)
   and would quietly win over .se-chip-label's own colour and margin. */
.se-makeup-panel > p:not(.se-chip-label) { color: var(--text-secondary); margin: 0 0 20px; }
.se-makeup-panel .se-chip-label { margin: 0 0 12px; }

.se-makeup-cta { margin-top: 32px; }

/* ------------------------------------------------------------------ *
 * Build your Halloween team — the enquiry
 * ------------------------------------------------------------------ */

.se-form-section {
  border-top: 1px solid var(--hairline-soft);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0) 70%),
    rgba(0, 0, 0, 0.28);
}
.se-form-shell { max-width: 860px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .se-form-shell { padding: 0 20px; } }

.se-form-head { text-align: center; max-width: 40ch; margin: 0 auto 44px; }
.se-form-head h2 { margin: 0 0 14px; }
.se-form-head p { color: var(--text-secondary); margin: 0; }

.se-fieldset { border: none; padding: 0; margin: 0 0 34px; }
.se-fieldset > legend {
  display: block;
  padding: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 6px;
}
.se-fieldset .form-hint { margin: 0 0 16px; font-size: 0.88rem; }

/* Multi-select needs. Built on the site's .checkbox-item so the control, its
   hit area and its focus ring stay identical to the other forms. */
.se-need-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .se-need-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .se-need-grid { grid-template-columns: repeat(3, 1fr); } }
.se-need-grid .checkbox-item { transition: border-color 140ms ease, background-color 140ms ease; }
.se-need-grid .checkbox-item:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.se-need-grid .checkbox-item input { accent-color: var(--accent); }
.se-need-grid .checkbox-item:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
}
.se-need-grid .checkbox-item:has(input:checked) label { color: var(--text); }

/* Atmosphere / interaction pickers — radios drawn as pills.
 *
 * The baseline keeps the native radio visible inside the pill, so the control
 * is readable and its state obvious with no :has() support at all. Only where
 * :has() works do we hide the dot and let the whole pill carry the state —
 * otherwise a browser without :has() would show an invisible radio and no
 * selected styling, which is worse than a plain radio group. */
.se-pillset { display: flex; flex-wrap: wrap; gap: 10px; }
.se-theme-idea { margin-top: 18px; }
.se-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--panel-fill);
  min-height: 46px;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.se-pill input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.se-pill:hover { border-color: rgba(var(--accent-rgb), 0.45); color: var(--text); }

@supports selector(:has(*)) {
  .se-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  .se-pill { gap: 0; }
  /* No weight change on select — these pills sit in a wrapping row, and a
     bolder label would reflow the ones after it. */
  .se-pill:has(input:checked) {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .se-pill:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }
}

.se-form-actions { margin-top: 34px; }
.se-form-actions .btn { font-size: 17px; padding: 17px 30px; }
.se-form-reassure {
  margin: 14px 0 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Who this is for
 * ------------------------------------------------------------------ */

.se-audience { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 32px 0 0; padding: 0; }
.se-audience li {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--panel-fill);
}

/* ------------------------------------------------------------------ *
 * Casting / trust + the safety line
 * ------------------------------------------------------------------ */

.se-split {
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) { .se-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* The distinction that has to survive a skim: themed hospitality staff are
   not being sold as actors. */
.se-distinction {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 560px) { .se-distinction { grid-template-columns: 1fr 1fr; } }
.se-distinction div {
  padding: 22px 22px 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--panel-fill);
}
.se-distinction h3 { margin: 0 0 10px; font-size: 17px; color: var(--text); }
.se-distinction p { margin: 0; font-size: 15px; color: var(--text-secondary); }

.se-safety {
  border-top: 1px solid var(--hairline-soft);
  background: rgba(var(--se-gold-rgb), 0.05);
}
.se-safety-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: baseline;
}
@media (max-width: 640px) { .se-safety-inner { padding: 32px 20px; } }
.se-safety-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--se-gold);
  flex: 0 0 auto;
}
.se-safety p { margin: 0; color: var(--text-secondary); max-width: 70ch; font-size: 16px; }

/* ------------------------------------------------------------------ *
 * Special Events hub (/special-events)
 * ------------------------------------------------------------------ */

.se-hub-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 700px) { .se-hub-grid { grid-template-columns: 1fr 1fr; } }

.se-hub-card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card-fill);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}
a.se-hub-card:hover, a.se-hub-card:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-3px);
}
.se-hub-card--live { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .se-hub-card--live { padding: 46px 44px 44px; }
}
.se-hub-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--se-gold);
}
.se-hub-card--soon .se-hub-status { color: var(--text-muted); }
.se-hub-card h2, .se-hub-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 16px 0 12px;
}
.se-hub-card--live h2 { font-size: clamp(34px, 5vw, 48px); line-height: 1.05; }
.se-hub-card h3 { font-size: 24px; line-height: 1.1; }
.se-hub-card p { color: var(--text-secondary); margin: 0 0 24px; max-width: 46ch; }
.se-hub-cta { font-size: 15px; font-weight: 600; color: var(--text); margin-top: auto; }
.se-hub-card--soon p:last-child { margin-bottom: 0; }

/* ============================================================================
   RATES  (/special-events/halloween #rates)

   Three priced cards, then three quoted ones. The figure is the loudest thing
   in each card and it is gold, which keeps the block premium rather than
   reading as a SaaS plan chooser: no feature checklists, no "most popular"
   card, no column of ticks. Orange stays on the one button, per the rule at
   the top of this file.
   ============================================================================ */
.se-rates-lede {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.6;
}

.se-rate-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 900px) { .se-rate-grid { grid-template-columns: repeat(3, 1fr); } }

.se-rate {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--card-fill);
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}
/* Same gold-to-ember hairline the "three levels" cards carry, so the two
   sections read as the same family. */
.se-rate::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--se-gold), rgba(var(--accent-rgb), 0.55));
  opacity: 0.55;
}
.se-rate:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-3px); }

/* The category label: Hospitality / Performers / Makeup / Bespoke. Mono caps,
   matching .section-label, so it reads as a tag and not as a heading. */
.se-rate-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.se-rate h3,
.se-bespoke-item h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}

/* The figure and its unit sit on one baseline. clamp() keeps £40 from
   overflowing a narrow card while still dominating the card on desktop. */
.se-rate-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline-soft);
}
.se-rate-figure {
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 62px);
  line-height: 0.9;
  color: var(--se-gold);
}
.se-rate-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.se-rate-copy { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.se-rate-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
/* The label and its chips travel together to the foot of the card, so the three
   cards line up along the bottom however much copy each one carries. Pushing
   only .se-chips down would strand "Examples" halfway up the card. */
.se-rate .se-chip-label { margin-top: auto; padding-top: 26px; margin-bottom: 10px; }
.se-rate .se-chips { margin-top: 0; }

/* Two of the three headings run to one line and one runs to two. Reserving the
   second line on desktop lands all three price rows on the same baseline. */
@media (min-width: 900px) {
  .se-rate h3 { min-height: 2.3em; }
}

/* ---- Bespoke tiers. Quieter than the priced cards: no top hairline, no
   hover lift, no big figure. They are the same offer without a number. ---- */
.se-bespoke { margin-top: 26px; }
.se-bespoke-label { margin: 0 0 16px; }

.se-bespoke-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .se-bespoke-grid { grid-template-columns: repeat(3, 1fr); } }

.se-bespoke-item {
  padding: 26px 26px 24px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: rgba(242, 239, 232, 0.02);
}
.se-bespoke-item h3 { font-size: 23px; }
.se-bespoke-item .se-rate-tag { margin-bottom: 12px; }
.se-bespoke-price {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--se-gold);
  margin: 12px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline-soft);
}

/* The invitation reads as copy, not small print, so it sits above the caveat
   and carries the gold the sub-lines elsewhere on the page use. */
.se-rates-invite {
  max-width: 52ch;
  margin: 40px 0 0;
  color: var(--se-gold);
  font-size: 18px;
  line-height: 1.55;
}
.se-rates-cta { margin-top: 32px; }

@media (max-width: 560px) {
  .se-rate { padding: 28px 22px 26px; }
  .se-bespoke-item { padding: 24px 22px 22px; }
  .se-rate-price { margin: 14px 0 18px; padding-bottom: 18px; }
}

/* Halloween photo pair: two landscape shots side by side, stacked on phones. */
.se-photo-pair {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 700px) { .se-photo-pair { grid-template-columns: 1fr 1fr; } }
.se-photo-pair figure { margin: 0; }
/* Halloween: the two photos at half size, side by side at every width. */
.se-photo-pair--half { max-width: 600px; margin-inline: auto; grid-template-columns: 1fr 1fr; gap: 12px; }
.se-photo-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
}
.se-photo-pair figcaption {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Concept characters on one line, and the two makeup lists. */
.se-concept-chars { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.se-makeup-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 72ch; }
.se-makeup-lines li { color: var(--text-secondary); }
.se-makeup-lines strong { color: var(--text); }

/* ------------------------------------------------------------------ *
 * Halloween: compact pass. Offers lead the page, so the hero headline,
 * pumpkin, tier numbers and concept cards give up their room to them.
 * ------------------------------------------------------------------ */
body.se-theme-halloween .se-hero h1 {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
body.se-theme-halloween .se-hero-inner { padding: 64px 40px 56px; }
@media (min-width: 900px) { body.se-theme-halloween .se-hero-inner { padding: 88px 40px 72px; } }
@media (max-width: 640px) { body.se-theme-halloween .se-hero-inner { padding: 48px 20px 128px; } }
body.se-theme-halloween .se-hero { background-size: cover, cover, 200px auto, cover, cover; background-position: center, center, right 7% bottom 36px, center, center bottom; }
@media (max-width: 900px) { body.se-theme-halloween .se-hero { background-size: cover, cover, 130px auto, cover, cover; } }
@media (max-width: 640px) { body.se-theme-halloween .se-hero { background-size: cover, cover, 96px auto, cover, cover; background-position: center, center, right 7% bottom 20px, center, center bottom; } }
body.se-theme-halloween .se-hero .btn-row { margin-top: 24px; }

body.se-theme-halloween .se-involve-grid { margin-top: 28px; gap: 14px; }
body.se-theme-halloween .se-involve { padding: 22px 22px 18px; }
body.se-theme-halloween .se-involve-num { font-size: 36px; margin-bottom: 0; }
body.se-theme-halloween .se-involve h3 { font-size: 22px; margin: 8px 0 6px; }
body.se-theme-halloween .se-involve-sub { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Concepts: five small tiles in one row on desktop, no flagship banner. */
body.se-theme-halloween .se-concept-grid { margin-top: 28px; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { body.se-theme-halloween .se-concept-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { body.se-theme-halloween .se-concept-grid { grid-template-columns: repeat(5, 1fr); } }
body.se-theme-halloween .se-concept--feature { grid-column: auto; }
body.se-theme-halloween .se-concept-media,
body.se-theme-halloween .se-concept--feature .se-concept-media { aspect-ratio: 16 / 10; }
body.se-theme-halloween .se-concept-title,
body.se-theme-halloween .se-concept--feature .se-concept-title { font-size: 18px; line-height: 1.1; padding: 0 12px 10px; }
body.se-theme-halloween .se-concept-body,
body.se-theme-halloween .se-concept--feature .se-concept-body { padding: 10px 12px 12px; }
body.se-theme-halloween .se-concept-chars { font-size: 13px; line-height: 1.4; }

/* Christmas: three photos in a row from tablet up, one under another on a phone. */
@media (min-width: 700px) { .se-photo-trio { grid-template-columns: repeat(3, 1fr); } }