/* ==========================================================================
   ICP PAGES - shared layer on top of swivul.css

   The three pages beneath the business executive umbrella:
     corporate-access.html      (reason 01/02, investment banks and brokerages)
     vip-client-services.html   (reason 02, VIP and client entertainment)
     community-revenue.html     (reason 04, distribution partners)

   They share the house system so the umbrella page can open into them without
   the floor changing. Everything genuinely specific to one page lives in that
   page's own <style> block, not here.

   Lessons carried in from the signed-off pages and from Shabbir's review of
   the business executive page, 10 Sep:
     - the hero holds one viewport, svh not vh, so mobile chrome cannot crop
       the CTA
     - photography carries the page. Flat glass boxes with all the imagery
       hidden behind them is what "presented worse" looked like
     - a photo band with a caption between sections is the house rhythm
     - a CTA strip is a turn in the page, not a floating button
     - one full-bleed red ground per page, maximum
   ========================================================================== */

/* ------------------------------------------------------------------- hero */
.hero { min-height: calc(100svh - 5.4rem); display: flex; align-items: center; padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.hero .h-hero { font-size: clamp(2.15rem, 5.1vw, 4.6rem); margin-bottom: clamp(1.1rem, 2.2vh, 1.75rem); }
.hero .h-hero .h-hero-l2 { font-size: 0.82em; }
.hero .h-hero-line { text-wrap: balance; }
.hero .eyebrow-pill { margin-bottom: clamp(1.1rem, 2.6vh, 2rem); }
.hero .lead { font-size: clamp(1rem, 1.5vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: clamp(1.5rem, 3.2vh, 2.25rem); }
.h-hero-red { color: var(--red); }
@media (max-width: 520px) { .hero { min-height: 0; padding-block: 3rem 3.5rem; } .eyebrow-pill { font-size: 0.58rem; } }

/* A single full-bleed photograph behind the hero, graded to the house
   monochrome. Used where a filmstrip would be too busy for the register. */
.hero-shot { position: absolute; inset: 0; overflow: hidden; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.42); }
.hero-shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.5) 32%, rgba(0,0,0,0.62) 68%, rgba(0,0,0,0.97) 100%);
}
/* The five-frame brand filmstrip, the house hero ground. */
.hero-film { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.hero-film img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.42) saturate(0.8) contrast(1.05); }
.hero-film-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.58) 35%, rgba(0,0,0,0.58) 65%, rgba(0,0,0,0.94) 100%); }
@media (max-width: 760px) { .hero-film { grid-template-columns: repeat(3, 1fr); } .hero-film img:nth-child(n+4) { display: none; } }
.hero-film-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .hero-film-3 { grid-template-columns: repeat(2, 1fr); } .hero-film-3 img:nth-child(n+3) { display: none; } }

.offer-line { font-family: var(--font-head); font-size: clamp(0.66rem, 1.05vw, 0.84rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-top: clamp(0.9rem, 2vh, 1.35rem); line-height: 1.8; }
.proof-line { font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-60); margin: clamp(1.1rem, 2.6vh, 1.85rem) 0 0; }
.proof-line b { color: var(--white); font-weight: 400; }
.hero-rule { display: block; width: 5rem; height: 1px; margin: clamp(1.1rem, 2.4vh, 1.6rem) auto clamp(0.9rem, 2vh, 1.2rem); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--red) 50%, rgba(255,255,255,0) 100%); }
.hero-story { max-width: 44rem; margin: 0 auto; font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.7; color: var(--white-60); }
.hero-story b { color: var(--white); font-weight: 600; }

/* ---------------------------------------------------------------- photos */
.photo-frame { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 60px rgba(0,0,0,0.65); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.72); display: block; }
.photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 48%); }
.photo-cap { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.1rem; z-index: 1; font-family: var(--font-head); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); line-height: 1.7; }
.photo-cap em { font-style: normal; color: var(--red); }
.band-photo { aspect-ratio: 21 / 9; }
.op-photo { margin-top: 2.5rem; aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .band-photo, .op-photo { aspect-ratio: 4 / 3; } }

/* ----------------------------------------------------------- text blocks */
.pain-tiles { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .pain-tiles { grid-template-columns: repeat(3, 1fr); } }
.pain-tile { padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.pain-tile h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: 0.85rem; letter-spacing: 0.12em; margin: 0 0 0.7em; line-height: 1.5; }
.pain-tile p { margin: 0; color: var(--white-60); }
.pull-quote { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(0.9rem, 1.5vw, 1.15rem); letter-spacing: 0.1em; line-height: 1.65; color: var(--white); border-left: 2px solid var(--red); padding-left: 1.4rem; margin: 2.5rem 0 0; }
.sponsor-grid { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; margin-top: 2.25rem; }
@media (min-width: 760px) { .sponsor-grid { grid-template-columns: 1fr 1fr; } }
.sponsor-item { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); line-height: 1.5; }
.sponsor-item::before { content: ""; flex: 0 0 auto; width: 0.5em; height: 0.5em; background: var(--red); transform: translateY(-0.05em) rotate(45deg); }

/* ------------------------------------------------------------- menu grid */
.menu { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .menu { grid-template-columns: repeat(4, 1fr); } }
.menu-item { padding: 0 0 1.4rem; overflow: hidden; }
.menu-item img { display: block; width: 100%; aspect-ratio: 720 / 250; object-fit: cover; mix-blend-mode: screen; }
.menu-item .h-card { margin: 0.9rem 1.25rem 0.4rem; font-size: 0.76rem; }
.menu-item p { margin: 0 1.25rem; color: var(--white-60); font-size: 0.88rem; line-height: 1.6; }

/* ------------------------------------------------------------ logo walls */
.logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem 2.2rem; margin: 1.5rem auto 0; max-width: 70rem; }
.logo-wall img { width: 150px; height: 52px; object-fit: contain; display: block; mix-blend-mode: screen; opacity: 0.92; }
.logo-wall.logo-wall-quiet img { width: 140px; height: 46px; opacity: 0.7; }
@media (max-width: 600px) { .logo-wall { gap: 1rem 1.2rem; } .logo-wall img { width: 120px; height: 42px; } .logo-wall.logo-wall-quiet img { width: 108px; height: 36px; } }
.trusted-head { margin-bottom: 0.5em; }

/* ----------------------------------------------------------------- video */
.video-card { margin-top: 2rem; padding: 0; overflow: hidden; }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-lead { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: clamp(0.85rem, 1.4vw, 1.05rem); letter-spacing: 0.12em; line-height: 1.6; margin: 2.5rem 0 1.25rem; }

/* -------------------------------------------------------------- red band */
.red-band-copy { max-width: 44rem; margin: 0 auto 2.25rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; color: var(--white); }
.btn-white { background: var(--white); color: var(--red); }
.btn-white:hover { background: rgba(255,255,255,0.9); color: var(--red); }

/* ----------------------------------------------------------------- close */
.cta-close-x { position: relative; overflow: hidden; padding-block: clamp(5rem, 12vw, 8.5rem); }
.cta-close-x .hero-photo img { object-position: 50% 40%; filter: grayscale(1) contrast(1.05) brightness(0.55); }
.cta-close-x .hero-photo::after { background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.9) 100%); }
.cta-close-x .container { position: relative; z-index: 1; }
.cta-close-x .hero-actions { justify-content: center; }

/* ------------------------------------------------- cross-links to sisters */
.sisters { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 760px) { .sisters { grid-template-columns: 1fr 1fr; } }
.sister {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.35rem 1.5rem; text-decoration: none; border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.025);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.sister:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); transform: translateY(-3px); }
.sister span { display: block; }
.sister .k { font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.sister .t { font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-top: 0.5rem; line-height: 1.5; }
.sister svg { flex: 0 0 auto; width: 1.3rem; height: 0.7rem; stroke: var(--red); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.sister:hover svg { transform: translateX(5px); }

/* ------------------------------------------------------------------- faq
   The questions a buyer has to have answered before they can say yes, in
   their own words, at the bottom of the page where the last objection dies
   just before the final ask.

   Accordion, one open at a time, and every open fires `faq_open` with the
   question text. Which objection a lane opens most is the cheapest read we
   get on what is actually blocking that buyer.

   House register: same glass panel and red accent as the rest of the page,
   never a light card. The open state borrows the .swap-next treatment so an
   opened question reads as the live one. */
.faq { display: grid; gap: 0.85rem; margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.faq details {
  border: 1px solid rgba(255,255,255,0.14); border-radius: 16px;
  background: rgba(255,255,255,0.025); overflow: hidden;
}
.faq details[open] { border-color: rgba(209,0,31,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 60px rgba(209,0,31,0.07); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.3rem 3.4rem 1.3rem 1.6rem;
  font-family: var(--font-head); font-weight: 400; text-transform: uppercase;
  font-size: 0.76rem; letter-spacing: 0.12em; line-height: 1.7; color: var(--white);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.6rem; top: 1.15rem;
  font-family: var(--font-head); font-size: 1rem; line-height: 1; color: var(--red);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--white-60); outline-offset: -4px; }
.faq .a { padding: 0 1.6rem 1.6rem; color: var(--white-60); font-size: 0.95rem; line-height: 1.8; }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: 0.85rem; }
@media (min-width: 860px) { .faq .a { padding-right: 3.4rem; } }

/* ------------------------------------------------- capability cover grid
   Promoted out of corporate-access.html on 2026-09-11 when the VIP page's
   new entertainment section needed the same component. Four surfaces on
   corporate access, three production capabilities on VIP. */
.cover { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.75rem; }
@media (min-width: 700px)  { .cover { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cover { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .cover-3 { grid-template-columns: repeat(3, 1fr); } }
.cov { padding: 1.75rem 1.5rem 1.6rem; }
.cov-k { font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 0.22em; color: var(--red); display: block; margin-bottom: 1rem; }
.cov h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: 0.82rem; letter-spacing: 0.1em; line-height: 1.5; margin: 0 0 0.8em; }
.cov p { margin: 0; color: var(--white-60); font-size: 0.88rem; line-height: 1.7; }

/* ------------------------------------------------------------ work grid
   Named work, not representative examples. Six real engagements out of the
   Kraken VIP deck. Deliberately typographic rather than another glass card
   wall: this reads as a credit list, which is what it is. */
.work { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 2.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 720px)  { .work { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .work { grid-template-columns: repeat(3, 1fr); } }
.wk { background: #0a0a0a; padding: 1.6rem 1.5rem 1.5rem; transition: background .3s ease; }
.wk:hover { background: rgba(255,255,255,0.035); }
.wk-k { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); }
.wk-k::before { content: ""; width: 0.42em; height: 0.42em; background: var(--red); transform: rotate(45deg); }
.wk-t { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: 0.8rem; letter-spacing: 0.09em; line-height: 1.55; margin: 0.85rem 0 0.4rem; }
.wk-v { display: block; font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white-60); }
.wk p { margin: 0.9rem 0 0; color: var(--white-60); font-size: 0.85rem; line-height: 1.7; }
.work-note { font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white-40, rgba(255,255,255,0.4)); margin: 1rem 0 0; line-height: 1.8; }

/* --------------------------------------------------------- setup modes
   How a team actually plugs us in. Two rows, red index, no glass, so it
   does not read as a repeat of the ownership cards above it. */
.setup { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.25rem; }
@media (min-width: 860px) { .setup { grid-template-columns: 1fr 1fr; } }
.set { border-left: 2px solid var(--red); padding: 0.35rem 0 0.35rem 1.4rem; }
.set-k { font-family: var(--font-head); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); display: block; }
.set h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: 0.8rem; letter-spacing: 0.12em; line-height: 1.55; margin: 0.8rem 0 0.7em; }
.set p { margin: 0; color: var(--white-60); line-height: 1.8; font-size: 0.92rem; }
.set p + p { margin-top: 0.8em; }
.set b { color: var(--white); font-weight: 600; }

/* ---------------------------------------------------------- channel row
   The deck's "every channel" claim, which is a real capability none of
   these pages carried. */
.chans { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }
.chan { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); padding: 0.68rem 1.05rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(255,255,255,0.025); }
.chan-note { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-60); margin: 1.1rem 0 0; line-height: 1.8; }
.chan-note em { font-style: normal; color: var(--red); }

/* --------------------------------------------------- brand photo strip
   Three frames from the Swivul brand guidelines' own imagery library
   (section 4.3), banded together with one caption. Added 2026-09-11 when
   the brand doc's photography replaced the stock on these pages.

   Kept IN COLOUR. Josh's standing rule, logged in assets/photos/CREDITS.md
   on 31 Aug: "the brand book presents this imagery in colour and the client
   book outranks the house monochrome rule." So the split on these pages is
   deliberate and consistent: anything from the brand book runs in colour,
   the Pexels people shots stay graded to monochrome. */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 2.5rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 60px rgba(0,0,0,0.65); background: rgba(255,255,255,0.1); }
.strip figure { margin: 0; position: relative; overflow: hidden; }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: saturate(1.02) contrast(1.05) brightness(0.82); transition: filter .6s ease, transform .6s ease; }
.strip figure:hover img { filter: saturate(1.08) contrast(1.05) brightness(1); transform: scale(1.03); }
.strip figcaption { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem; font-family: var(--font-head); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); line-height: 1.7; z-index: 1; }
.strip figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 52%); }
.strip-cap { font-family: var(--font-head); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); margin: 1.1rem 0 0; line-height: 1.8; }
.strip-cap em { font-style: normal; color: var(--red); }
@media (max-width: 560px) { .strip img { aspect-ratio: 2 / 3; } .strip figcaption { font-size: 0.5rem; letter-spacing: 0.12em; left: 0.55rem; right: 0.55rem; } }

/* A brand ground that keeps its red. The house .hero-shot greyscales
   everything, which is right for stock and wrong for the brand library's
   red-dominant frames, where the red IS the brand asset. */
.hero-shot-brand img { filter: saturate(1.06) contrast(1.05) brightness(0.46); }
.cta-close-x .hero-photo-brand img { filter: saturate(1.06) contrast(1.02) brightness(0.5); }
/* And the same for a photo band. .photo-frame greyscales by default, which
   is right for the Pexels people shots still on these pages and wrong for
   anything out of the brand book. */
.photo-frame-brand img { filter: saturate(1.04) contrast(1.05) brightness(0.78); }