/* ================================================================
   DIVISION PAGE TEMPLATE (Pharma, Sports, Beauty)
   Shared layout for the division pages, built from the Figma
   "Pharma" / "Sports" / "Beauty" frames. Each page sets its accent on
   <body> (e.g. .theme-pharma { --accent: #00e6ff; }) in its own CSS file
   and only adds one-off sections there.
   The FSE Media page predates this file and keeps its own .media-* rules
   in style.css.
   ================================================================ */

/* Nav logo + "See what we do" arrow use the page's colored logo mark
   (--logo is set per theme). Same technique as .theme-media in style.css. */
.division .nav__logo{ width: 36px; height: 45px; background: transparent; }
.division .nav__logo img{ object-fit: contain; }
.division .nav__logo::after{ content: none; }
.division .play__shape{
  left: 20%; top: 0; width: 60%; height: 100%;
  background: var(--logo) center/contain no-repeat;
  mask: none; -webkit-mask: none;
  transform: rotate(-90deg);
}
.division .eco-mark{ width: 16px; height: 20px; }

/* ---------- Hero ---------- */
.div-hero{
  position: relative; overflow: hidden;
  margin-top: -86px; padding-top: 86px;
  border-bottom: 5px solid var(--accent);
}
.div-hero__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.div-hero__scrim{ position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.6); }
.div-hero__poly{
  position: absolute; z-index: 1; pointer-events: none; overflow: visible;
  left: calc(var(--u) * -1435); top: calc(var(--u) * -1516);
  width: calc(var(--u) * 3197.54); height: calc(var(--u) * 3197.54);
}
.div-hero__poly path{ stroke: #fff; stroke-width: 1px; }
.div-hero__poly-a{ stroke-opacity: .35; }
.div-hero__poly-b{ stroke-opacity: .15; }
.div-hero__inner{
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 87px var(--gap) 56px;
}
.div-hero__eyebrow{
  font-size: 15px; font-weight: 500; text-transform: uppercase; color: #fff;
  max-width: 669px; line-height: 23.61px;
}
.div-hero__title{
  font-size: clamp(32px, calc(var(--u) * 70), 70px);
  font-weight: 600; letter-spacing: -.043em; line-height: 1;
  text-transform: uppercase; color: #fff;
}
.div-hero__title--accent{ display: block; color: var(--accent); line-height: 1.03; }
.div-hero__row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-top: 16px; padding-top: 33px;
}
.div-hero__row p{ max-width: 439px; font-size: 15px; font-weight: 700; line-height: 23.61px; color: #fff; }

/* ---------- Intro (copy + art) ---------- */
.div-intro{
  background: #fff; color: #000;
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
  max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap);
  /* Content stays in the 1440 column, but the white background runs full
     width on wide screens (paints outside the box without adding scroll) */
  box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax);
}
.div-intro__copy{ display: flex; flex-direction: column; gap: 10px; max-width: 450px; }
.div-intro__copy h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.div-intro__copy p{ font-size: 15px; line-height: 23.61px; color: #000; }

/* ---------- How we help: images come pre-tinted from Figma ---------- */
.division .helps__card h3{ font-weight: 700; white-space: nowrap; }
.div-help-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Strategy (black band, art on the right) ---------- */
.div-strategy{ position: relative; overflow: hidden; background: #000; color: #fff; }
.div-strategy__inner{ position: relative; max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap); }
.div-strategy__copy{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: 568px; }
.div-strategy__kicker{ font-size: 14px; font-weight: 300; text-transform: uppercase; line-height: 14px; margin-bottom: 0; }
.div-strategy__copy h2{ font-size: clamp(30px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; }
.div-strategy__copy p{ max-width: 487px; font-size: 15px; line-height: 23.61px; color: #fff; }
.div-strategy__art{ position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 64.8%; }
.div-strategy__art img{ width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* Alternative strategy art: the FSE triangle outline in the page accent
   (same geometry/position as the homepage "Attention" section's .edge__tri) */
.div-strategy__tri{
  position: absolute; z-index: 1; pointer-events: none; overflow: visible;
  left: calc(var(--u) * 820); top: calc(var(--u) * -102.35);
  width: calc(var(--u) * 581.23); height: calc(var(--u) * 604.44);
}
.div-strategy__tri path{ stroke: var(--accent); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-opacity: .7; }

/* ---------- Work samples (four cards) ---------- */
.div-work{ background: #fff; padding: 100px var(--gap); }
.div-work__grid{ max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; }
.div-work .ind-card{ width: var(--cw); border-top-color: var(--accent); background-color: #1b1d21; }
.div-work .ind-card__bg{ object-position: top center; }

/* ---------- CTA band ---------- */
.div-cta{ position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 90px var(--gap); }
.div-cta__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.div-cta__scrim{ position: absolute; inset: 0; background: var(--cta-tint, rgba(0,0,0,.55)); mix-blend-mode: multiply; }
.div-cta__copy{ position: relative; z-index: 2; text-align: center; color: #fff; max-width: 616px; }
.div-cta__copy h2{ font-size: clamp(30px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; margin-bottom: 10px; }
.div-cta__copy p{ font-size: 15px; line-height: 23.61px; max-width: 446px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .div-hero__inner{ padding-top: calc(var(--gap) + 20px); padding-bottom: calc(var(--gap) + 12px); }
  .div-hero__title{ font-size: clamp(38px, 11vw, 70px); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
  .div-hero__eyebrow{ margin-bottom: 14px; }
  .div-hero__row{ flex-direction: column-reverse; gap: 26px; margin-top: clamp(32px, 9vw, 56px); padding: 0; }
  .division .helps__card h3{ white-space: normal; }
  .div-hero__row p{ max-width: none; font-size: clamp(18px, 4.9vw, 24px); line-height: 1.55; font-weight: 500; letter-spacing: -.01em; }
  .div-hero .link-arrow{ font-size: clamp(19px, 5.2vw, 24px); gap: 12px; font-weight: 800; min-height: 48px; }
  .div-hero .play{ width: clamp(24px, 6.4vw, 30px); height: clamp(24px, 6.4vw, 30px); }

  .div-intro{ flex-direction: column; align-items: stretch; padding: 60px var(--gap); }
  .div-intro__copy{ max-width: none; }

  .div-strategy__inner{ padding: 60px var(--gap) 0; }
  .div-strategy__art{ position: relative; width: auto; margin: 40px calc(-1 * var(--gap)) 0; aspect-ratio: 933 / 415; }
  .div-strategy__tri{ left: 50%; top: 50%; width: max(135vw, 560px); max-width: 1000px; height: auto; transform: translate(-47%, -50%); opacity: .6; }
  .div-strategy:has(.div-strategy__tri) .div-strategy__inner{ padding-bottom: 60px; }

  .div-work{ padding: 60px var(--gap); }
  .div-work__grid{ flex-wrap: wrap; gap: 16px; }
  .div-work .ind-card{ width: calc(50% - 8px); }
  .div-cta{ padding: 70px var(--gap); }
}
@media (max-width: 640px){
  .div-work .ind-card{ width: 100%; }
}

/* ----------------------------------------------------------------
   GHAPP session card — used by the Pharma recent-work row and by the
   Pharma row on the New at FSE page, so it lives here rather than in
   pharma.css.
   ---------------------------------------------------------------- */
/* Recent work, card 3 — the GHAPP session mockup.
   In Figma the session thumbnail (rectangle 6996, node 78:3375) is a VIDEO
   fill, not a still. pharma-work-3.jpg stays as the flattened plate and a real
   <video> sits in the thumbnail's slot, with the title, speaker and progress
   bar redrawn as HTML on top of it (same approach as .pharma-art above).
   Offsets are percentages of the plate, which is the Figma art at 2x
   (552 x 1010); the thumbnail is x68 y199 w331 h541 inside it.
   The stage reproduces object-fit:cover so the overlay tracks the plate
   exactly as the card is resized. */
.pharma-session{ position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; }
.pharma-session__stage{
  /* --stage-y works like object-position's vertical value: the point at that
     percentage of the plate is pinned to the same percentage of the card. */
  --stage-y: 50%;
  position: absolute; left: 50%; top: var(--stage-y);
  transform: translate(-50%, calc(-1 * var(--stage-y)));
  width: auto; height: auto; min-width: 100%; min-height: 100%;
  aspect-ratio: 552 / 1010;
  container-type: inline-size;
}
.pharma-session__plate{ position: absolute; inset: 0; width: 100%; height: 100%; }
.pharma-session__clip{
  position: absolute; left: 12.319%; top: 19.703%; width: 59.964%; height: 53.564%;
  object-fit: cover; border-radius: 2.667cqw;
}
.pharma-session__meta{
  position: absolute; left: 16.152%; top: 61.117%; width: 52.331%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.333cqw;
  font-family: var(--font-alt); color: #fff;
}
.pharma-session__title{ font-size: 4cqw; font-weight: 700; line-height: 1.2; letter-spacing: -.16cqw; }
.pharma-session__by{
  display: flex; align-items: center; gap: 1.333cqw;
  font-size: 2.667cqw; font-weight: 700; line-height: 1.2; letter-spacing: -.107cqw;
}
.pharma-session__by img{ width: 3.446cqw; height: 3.446cqw; flex-shrink: 0; }
.pharma-session__bar{ width: 100%; height: 2.167cqw; border-radius: 4cqw; background: #626262; overflow: hidden; }
.pharma-session__bar i{ display: block; width: 31%; height: 100%; border-radius: inherit; background: #fd4200; }

@media (max-width: 640px){
  /* Full-width and short, cover crops the plate hard; centred it lands
     below the speaker's face. Pull the plate down to keep the face in frame. */
  .pharma-session__stage{ --stage-y: 70%; }
  /* A 340px card can't fit the face, the clip's own caption and the card's
     text without them colliding, so any card carrying this component gets
     the extra height (the Pharma work row already sets this for all four). */
  .ind-card:has(.pharma-session){ min-height: 420px; }
}