/* ==========================================================================
   MAGIC BOX EVENT CAMPUS — Services Group (V1)
   Source: Figma file 1L78PvvlnqBfvCR1pQvS4e, page "Magic Box V1"
     services.html            <- frame 16:2  "Services"
     experiential.html        <- frame 25:2  "Experiential"
     exhibitor-services.html  <- frame 22:2  "Exhibitor Services"
   Shared by all three pages above ONLY. Loaded after css/site.css (frozen).
   Nav + footer visuals come from site.css sections 8/9 — nothing here
   touches them. See index.html header comment for the markup contract.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   PHOTO HERO (dark, photo background, content bottom-anchored, left aligned)
   --------------------------------------------------------------------------- */
.svc-hero{
  position:relative;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
}
/* Full-screen heroes (client call, Jul 17: "Full-screen hero" for Experiential
   and Exhibitor). Fixed pixel heights left a band of the next section showing
   on tall monitors — svh matches the venue hero and fills any viewport. */
.svc-hero--services,
.svc-hero--experiential,
.svc-hero--exhibitor{ height:100svh; min-height:600px; }
@media (max-width:900px){
  /* client, Aug 9: phone heroes fill the viewport like desktop */
  .svc-hero--services,
  .svc-hero--experiential,
  .svc-hero--exhibitor{ height:auto; min-height:100svh; }
}

.svc-hero .hero-media{position:absolute;inset:0;overflow:hidden}
.svc-hero .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-hero .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(24,8,18,.66) 0%, rgba(24,8,18,.22) 62%),
    linear-gradient(0deg, rgba(24,8,18,.78) 0%, rgba(0,0,0,0) 58%);
}
.svc-hero-inner{
  position:relative;z-index:2;height:100%;
  max-width:var(--container);margin:0 auto;
  /* vertically centred like the Spotlights hero (was bottom-anchored);
     extra bottom padding keeps the scroll cue clear on short screens */
  padding:90px var(--edge) 110px;
  display:flex;flex-direction:column;justify-content:center;
}
.svc-hero-inner .eyebrow{margin-bottom:22px}
/* T1 unification: the three hero variants used to cap at three different
   sizes (92.2/100.8/95px) with looser 1.03 leading -- now one shared size,
   matching the site's 95px hero family (Contact/News/About/Venue/Home). */
.svc-hero-inner h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,8vw,95px);
  line-height:1;letter-spacing:-.015em;
  max-width:850px;margin-bottom:26px;
}
.svc-hero-inner h1 em{font-style:italic;color:var(--yellow)}
.svc-hero-inner h1 em.accent-gold{color:var(--yellow)}
.svc-hero-sub{
  font-family:var(--serif);font-size:21px;line-height:1.5;
  color:rgba(255,255,255,.9);max-width:600px;margin-bottom:36px;
}
.svc-hero-cta{display:flex;gap:16px;flex-wrap:wrap}
/* client (rev 2, Aug 6): Wayne circled these hero buttons out on desktop —
   the nav carries the booking CTA and the decks are gated in the CTA panel.
   Phones keep them (the nav CTA is hidden below 900px). */
@media (min-width:901px){
  .svc-hero-cta--mobile-only{display:none}
}

/* ---------------------------------------------------------------------------
   SPLIT HEAD — heading left column / paragraph right column
   (used for the intro block directly under each hero)
   --------------------------------------------------------------------------- */
.split-head{
  padding:112px 0 0;
  max-width:var(--container);margin:0 auto;padding-left:var(--edge);padding-right:var(--edge);
  /* row-gap 0: the old 56px row gap stacked with the eyebrow's margin into
     an ~86px hole between the eyebrow and its own headline */
  display:grid;grid-template-columns:623fr 623fr;gap:0 clamp(48px,6vw,96px);align-items:end;
}
.split-head .eyebrow{grid-column:1/-1;margin-bottom:26px}
.split-head h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.4vw,58px);line-height:1.08;
  letter-spacing:-.01em;
}
.split-head h2 em{font-style:italic;color:var(--burgundy)}
/* the intro lede reads as body serif beside the headline, not as fine print */
.split-head p{
  font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.55;
  color:rgba(36,42,47,.72);
  align-self:end;padding-bottom:6px;
}
.split-head--single{grid-template-columns:1fr;margin-bottom:44px}
.split-head--single p{display:none}
/* a split-head nested inside a .wrap already has the container's edge
   padding — its own would double-indent the head off the grid the cards
   below it sit on */
.wrap .split-head{padding-left:0;padding-right:0;max-width:none}

/* ---------------------------------------------------------------------------
   NUMBERED FEATURE ROWS — alternating media / text, 2-up
   --------------------------------------------------------------------------- */
.feat-rows{
  max-width:var(--container);margin:0 auto;padding:96px var(--edge) 0;
  display:flex;flex-direction:column;gap:88px;
}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start}
.feat-row.rev .feat-media{order:2}
.feat-row.rev .feat-text{order:1}

.feat-media{
  position:relative;height:300px;border-radius:20px;overflow:hidden;background:var(--ink);
}
.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.feat-text{padding-top:2px}
.feat-num{
  display:block;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--burgundy);margin-bottom:8px;
}
.feat-text h3{
  font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.06;
  color:var(--ink);margin-bottom:14px;
}
.feat-text h3 em{font-style:italic;color:var(--burgundy)}
.feat-tagline{
  font-family:var(--serif);font-style:italic;font-size:18px;color:var(--burgundy);
  margin-bottom:20px;display:block;
}
.feat-text p{
  font-family:var(--cond);font-size:14px;line-height:1.7;color:rgba(36,42,47,.68);
}
.feat-link{
  display:inline-block;margin-top:22px;
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.22em;
  color:var(--burgundy);
}
.badge-inline{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.19em;
  color:var(--ink);margin-left:14px;vertical-align:middle;
}
/* the deck button closes the list: a full-container hairline, then the
   button centred in its own breathing room instead of hugging the last row */
.feat-cta{
  max-width:var(--container);
  margin:clamp(56px,7vw,88px) auto 0;
  padding:clamp(40px,5vw,56px) var(--edge) 0;
  border-top:1px solid rgba(36,42,47,.12);
  text-align:center;
}

/* ---------------------------------------------------------------------------
   CREAM-SOFT SUB-SECTION (Experiential capabilities / Exhibitor "plays")
   --------------------------------------------------------------------------- */
/* formerly a tinted #F7F0E2 band — the tint edge cut through the page as a
   visible seam mid-content, so the sub-section now sits on the same cream
   and separates by rhythm alone */
.section-cream-soft{padding-bottom:96px}
.section-cream-soft .split-head,
.section-cream-soft .feat-rows{padding-top:108px}
.section-cream-soft .feat-rows{padding-top:64px}

/* ---------------------------------------------------------------------------
   STATS ROW (Exhibitor Services — 500+ / 300 / 140 / 80)
   --------------------------------------------------------------------------- */
.stats-row{
  max-width:var(--container);margin:0 auto;padding:112px var(--edge) 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);
}
.stat-item{border-top:1px solid rgba(36,42,47,.18);padding-top:22px}
.stat-item h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(48px,4.8vw,68px);
  line-height:1;color:var(--ink);margin-bottom:14px;
}
/* the count-up target lives INSIDE the h3 — without this it matched the
   label rule below and rendered the number at 10px next to a 68px "+" */
.stat-item h3 span{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.stat-item > span{
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--burgundy);
}

/* ---------------------------------------------------------------------------
   SHOSOFT SHOWCASE (Services — full dark section w/ screenshot + 3 dcards)
   --------------------------------------------------------------------------- */
.shosoft{
  background:var(--ink);color:#fff;
  /* cream breathing room between row 07/08 and the dark section */
  margin-top:clamp(96px,11vw,148px);
  padding:clamp(72px,7.5vw,104px) 0 clamp(80px,8vw,104px);
}

/* copy left, calendar right (Wayne, Aug 5 second pass: the section shouldn't
   be a full-page block — the stacked head + full-width stage read as one).
   The roles ledger below is untouched. */
.sho-split{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(44px,5.5vw,88px);
  align-items:center;
  margin-bottom:clamp(56px,6.5vw,88px);
}
.sho-copy .eyebrow{margin-bottom:22px;display:block}
/* same role/scale family as .split-head h2, on ink */
.sho-copy h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.6vw,54px);
  line-height:1.08;letter-spacing:-.01em;color:var(--cream);
  margin-bottom:20px;
}
.sho-copy h2 em{font-style:italic;color:var(--yellow)}
.sho-copy p{
  font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.55;
  color:rgba(255,250,240,.75);margin-bottom:28px;max-width:46ch;
}

/* app stage: browser chrome bar over the live 1500x940 render, scaled by
   --uiScale so the demo always fills its column edge to edge */
.sho-stage{
  margin:0;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,250,240,.16);
  background:#20262b;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.75);
}
.sho-chrome{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:13px 20px;border-bottom:1px solid rgba(255,250,240,.12);
}
.sho-dots{display:flex;gap:7px}
.sho-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,250,240,.2)}
.sho-url{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.18em;
  color:rgba(255,250,240,.55);
  background:rgba(255,250,240,.06);border:1px solid rgba(255,250,240,.1);
  border-radius:100px;padding:6px 20px;
}
/* rev 2 (Aug 6): the stage now holds Wayne's static calendar screenshot —
   the aspect follows the image itself (1918x907 master) */
.sho-embed{position:relative;background:#fff;overflow:hidden}
.sho-embed img{display:block;width:100%;height:auto}
.sho-embed iframe{
  position:absolute;top:0;left:0;width:1500px;height:940px;border:0;
  transform-origin:top left;transform:scale(var(--uiScale,0.45));
  pointer-events:none;
}

/* role ledger: three ruled columns instead of floating boxes — uneven list
   lengths read as a spec sheet, not as half-empty cards */
.sho-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.5vw,56px)}
.sho-role{border-top:1px solid rgba(255,183,27,.5);padding-top:22px}
.sho-role-num{
  display:block;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--yellow);margin-bottom:10px;
}
.sho-role h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);
  color:var(--cream);margin-bottom:14px;
}
.sho-role ul{display:flex;flex-direction:column}
.sho-role li{
  font-family:var(--cond);font-size:13px;letter-spacing:.04em;
  color:rgba(255,250,240,.66);
  padding:9px 2px;border-bottom:1px solid rgba(255,250,240,.09);
}
.sho-role li:last-child{border-bottom:0}

.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dcard{
  background:#2c333a;border:1px solid rgba(255,250,240,.12);border-radius:20px;
  padding:27px 30px 30px;
}
.dcard h3,
.dcard h4{
  font-family:var(--serif);font-weight:400;font-size:23px;color:var(--cream);
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,250,240,.14);
  margin-bottom:22px;
}
.dcard ul{display:flex;flex-direction:column;gap:8px}
.dcard li{font-family:var(--cond);font-size:12px;color:rgba(255,250,240,.62)}

/* ---------------------------------------------------------------------------
   CASE-STUDY / SPOTLIGHT CARDS (reused from home's "The Brands" component)
   --------------------------------------------------------------------------- */
/* two-up cards: at four across the long case-study subs were cramped into
   ~310px columns — two wide cards per row give the copy real measure */
.spotlights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.spotlights-grid--3{grid-template-columns:repeat(3,1fr)}
/* height is a floor, not a ceiling — the experiential/exhibitor cards carry
   longer subs than home's, and a fixed height clipped their tag rows and
   "See the Spotlight" links at the card edge */
.spotlight-card{
  position:relative;min-height:430px;border-radius:28px;overflow:hidden;
  background:var(--ink);color:#fff;display:flex;flex-direction:column;
}
.spotlight-card img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.spotlight-card .scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(18,12,16,.94) 0%, rgba(18,12,16,.34) 52%, rgba(18,12,16,.44) 100%);
}
.spotlight-card .frame-line{
  position:absolute;inset:22px;z-index:2;border:1px solid rgba(255,255,255,.38);border-radius:16px;pointer-events:none;
}
.spotlight-card .sc-body{position:relative;z-index:3;flex:1;padding:38px 40px;display:flex;flex-direction:column}
.spotlight-card .eyebrow{color:var(--yellow);font-size:10.5px;margin-bottom:14px}
/* T1 unification: matches spotlights-group.css's flat 48px/1.05 card title
   (index.html's inline copy still runs its own 52px/1.02 -- out of this
   agent's edit scope, flagged in the report). */
.spotlight-card h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.2vw,48px);line-height:1.05;margin-bottom:auto;
}
.spotlight-card .sc-sub{
  font-family:var(--serif);font-size:16.5px;line-height:1.5;
  color:rgba(255,255,255,.92);margin-top:24px;max-width:48ch;
}
.spotlight-card .sc-stat{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.18em;color:rgba(255,255,255,.85);margin-top:20px;
}
.spotlight-card .sc-link{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--yellow);
  margin-top:14px;display:inline-block;transition:transform .2s ease;
}
.spotlight-card:hover .sc-link{transform:translateX(4px)}
.spotlight-card:hover .frame-line{border-color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------------------
   CTA PANEL — "Let's Make Magic" (reused from home for experiential.html)
   --------------------------------------------------------------------------- */
.cta-outer{max-width:var(--container);margin:0 auto;border-radius:38px;padding:15px;overflow:hidden;background-image:linear-gradient(95deg,#8F6686 0%,#9A1E1B 32%,#C4571F 66%,#FFB71B 100%)}  /* matched to index.html's CTA frame */
.cta-inner{
  background:var(--cream);border-radius:27px;padding:56px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;
}
.cta-headline{
  font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,96px);line-height:.92;
  color:var(--burgundy);align-self:center;
}
.cta-right .site-logo{margin-bottom:26px}
.cta-right .cta-line{
  font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink);
  padding-bottom:24px;border-bottom:0;max-width:440px;
}
.cta-right .cta-decks-label{font-family:var(--serif);font-size:24px;color:var(--ink);margin-top:24px;display:block}
.deck-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.deck-btn{
  position:relative;height:80px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.deck-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.deck-btn::after{
  content:"";position:absolute;inset:0;background:var(--gradient-warm);opacity:.55;mix-blend-mode:multiply;z-index:1;
}
.deck-btn span{position:relative;z-index:2;font-family:var(--serif);font-size:20px;color:#fbfdff}
.cta-buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .svc-hero--services,.svc-hero--experiential,.svc-hero--exhibitor{height:auto;min-height:100svh;padding-top:120px}
  .split-head{grid-template-columns:1fr;gap:24px}
  .split-head p{padding-top:0}
  .feat-rows{gap:56px}
  .feat-row{grid-template-columns:1fr}
  .feat-row.rev .feat-media,.feat-row.rev .feat-text{order:initial}
  .stats-row{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .shosoft{margin-top:64px;padding:64px 0 56px}
  .sho-split{grid-template-columns:1fr;gap:36px;margin-bottom:52px}
  .sho-stage{border-radius:14px}
  .sho-roles{grid-template-columns:1fr;gap:36px}
  .dcards{grid-template-columns:1fr}
  .spotlights-grid,.spotlights-grid--3{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;padding:40px}
  .cta-headline{font-size:64px}
}
@media (max-width:480px){
  .split-head h2,.sho-copy h2{font-size:38px}
  .feat-text h3{font-size:32px}
  .stats-row{grid-template-columns:1fr 1fr;gap:28px}
  .stat-item h3{font-size:48px}
  .deck-row{grid-template-columns:repeat(2,1fr)}
  .cta-inner{padding:28px}
  .cta-headline{font-size:48px}
  .spotlights-grid,.spotlights-grid--3{grid-template-columns:1fr}
  /* the ShoSoft CTA button's uppercase, tracked-out label is nowrap
     (site.css .btn) and its unbroken min-content width forces the whole
     .sho-copy column past the 320-430px viewport edge -- letting it wrap
     removes the forced min-content floor without touching the shared .btn
     rule other pages rely on */
  .sho-copy .btn{white-space:normal;text-align:center}
}

/* ==========================================================================
   REFINEMENT ADDITIONS (real-website pass on services.html / experiential.html /
   exhibitor-services.html). Appended only, nothing above this line was touched.
   ========================================================================== */

/* ---- "Coming soon" deck chip: same disabled state as index.html's CTA deck
   row, reused here so experiential.html's Experiential/Exhibitor deck slots
   (no PDF exists yet) don't link out to a placeholder "#" ---- */
.deck-btn.is-soon{cursor:default;opacity:.55;flex-direction:column;gap:3px}
/* stacked, matching site.css: the badge is a flex item, not an overlay, so it
   can never sit on top of the label at any button height */
.deck-btn.is-soon::before{
  content:"Coming soon";
  position:relative;top:auto;right:auto;z-index:2;order:-1;
  font-family:var(--label);font-weight:700;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:#fffaf0;
  background:rgba(24,8,18,.55);border-radius:100px;padding:3px 7px;line-height:1;
}

/* ---- ShoSoft showcase image (services.html): restrained hover/reveal so the
   dashboard screenshot reads as an actual link out to the product, not a
   static photo. Comment #41: no heavy animation, a soft lift + tag reveal. ---- */
.shosoft-media--link{display:block;cursor:pointer}
.shosoft-media--link img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.shosoft-media--link:hover img,
.shosoft-media--link:focus-visible img{transform:scale(1.035)}
.shosoft-media-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  background:var(--yellow);border-radius:100px;padding:8px 14px;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.shosoft-media--link:hover .shosoft-media-tag,
.shosoft-media--link:focus-visible .shosoft-media-tag{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .shosoft-media--link img{transition:none}
  .shosoft-media-tag{transition:none}
}


/* ---------------------------------------------------------------------------
   GOLD-STANDARD HAND-OFF — hero pins; the content rides over it as one
   rounded cream sheet (same grammar as venue.html / index.html)
   --------------------------------------------------------------------------- */
@media (min-width:901px){
  .js .svc-hero{position:sticky;top:0}
}
.svc-sheet{
  position:relative;z-index:2;
  background:var(--cream);
  /* client (Aug 6, the rev-2 doc's red-arrow screenshot): section dividers are
     STRAIGHT site-wide — no rounded corners, no lifted shadow, matching the
     homepage sheet */
  border-radius:0;
}
@media (max-width:900px){
  .js .svc-hero{position:static}
  .svc-sheet{border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .js .svc-hero{position:static}
  .svc-sheet{border-radius:0;box-shadow:none}
}

/* feature rows, upgraded: ghost serif numerals, hairline separations, and a
   slow media zoom on hover — venue's editorial rhythm */
.feat-num{
  display:block;
  font-family:var(--serif);font-style:normal;
  font-size:clamp(54px,6vw,88px);line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px rgba(154,30,27,.42);
  margin-bottom:16px;
}
.feat-row + .feat-row{
  border-top:1px solid rgba(36,42,47,.12);
  padding-top:56px;
}
.feat-media{height:340px;border-radius:18px}
.feat-media img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.feat-row:hover .feat-media img{transform:scale(1.045)}

/* on a single-column mobile layout a fixed 340px photo still eats ~40% of
   a phone's viewport height per row -- five stacked feat-rows (Exhibitor)
   ran 5.5 screens tall before any copy was legible */
@media (max-width:900px){
  .feat-media{height:220px}
}


/* phone legibility floor (site.css section 19) */
@media (max-width:900px){
  .stat-item span{ font-size:11px; }
}