/* ===========================================================================
   SmartLab Signals — page components
   ---------------------------------------------------------------------------
   Loaded only by the Signals family (the product page and the three
   use-case pages), on top of smartlab-v2.css + smartlab-v2-product.css.
   Those two carry the chrome, the type scale and every shared component;
   this sheet adds the five sections the Signals design introduces and
   nothing else.

   Colour comes from the --signals-* tokens in smartlab-v2.css, which also
   document the contrast of each. The rule here is the same one the rest of
   the site follows: --signals-teal for display type and graphics,
   --signals-teal-ink (via --accent-ink / --accent-fill) wherever a colour
   carries body-size text or a button label.
   =========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Dark navy, everything centred, the wordmark above the headline, and the
   product shot crossing onto the white below. */
/* Measured off the comp (Signals page - Final.pdf) at its 1920 artboard:
   band y125..1180, gradient #0C1235 -> #0F2784, product shot full-bleed at 1:1
   and CLIPPED by the band's bottom edge — 608 of its 874 rows are visible. */
.sighero {
  position: relative; overflow: hidden;
  background-color: var(--signals-navy);   /* resolvable backdrop — see .signalband */
  background-image: linear-gradient(to bottom, #0C1235 0%, #0F2784 100%);
  color: #fff; padding: 78px 0 0; text-align: center;
}
/* The comp's headline is 1236px wide on a 1200 shell — the designer let it
   run past the shell rather than wrap. Give the hero its own, wider measure
   so the line holds at one line, as drawn. */
.sighero .shell { max-width: 1340px; }
.sighero__inner { position: relative; z-index: 2; }
.sighero__logo { display: block; margin: 0 auto 26px; width: 276px; height: auto; }
.sighero h1 {
  margin: 0; color: #fff; font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 5.25rem); line-height: 1.1; letter-spacing: -.015em;
}
/* The two accented words in the headline. Mint on navy is 9.88:1. */
.sighero h1 strong { font-weight: 900; color: var(--signals-mint); }
.sighero__lede {
  max-width: 880px; margin: 22px auto 0;
  color: var(--ink-onDark); font-size: var(--fs-lg); line-height: 1.6;
}
.sighero__actions { margin-top: 30px; }
.sighero__note { margin: 22px 0 0; font-size: var(--fs-sm); color: #9fb4e8; }
/* The shot is full-bleed, not shell-width, and the band cuts it off. The
   aspect-ratio box plus object-position:top reproduces that crop at any
   width: the box is 1920x608 of the artwork's 1920x874, so the bottom 30%
   stays hidden exactly as the comp has it. No radius, no shadow — the
   artwork is a transparent cut-out and a box-shadow would paint a rectangle
   behind the floating dashboards. */
.sighero__shot {
  position: relative; z-index: 1;
  width: 100%; max-width: 1920px;        /* the artboard is 1920; never upscale */
  /* The hero cuts the artwork off rather than ending below it: the dashboards
     run past the navy's bottom edge and the mint section starts straight after.
     Measured off the reference, the cut lands at 69.5% of the artwork's height
     (the dashboards themselves end at 82%), and 1920/608 is 69.6% — the same
     fraction the previous artwork was cropped at, which is why that ratio
     survives a change of artwork. */
  margin: -2.5vw auto 0;
  aspect-ratio: 1920 / 608; overflow: hidden;
}
.sighero__shot img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
}
.sighero__shot .placeholder { height: 100%; border-radius: var(--r-lg); }
/* A white button on navy reads as the primary action here; the outline
   sibling is the secondary. Both clear AA against the navy. */
.btn--onNavy { background: #fff; color: var(--signals-navy); border: 1px solid #fff; }
.btn--onNavy:hover { background: #e9edf7; border-color: #e9edf7; color: var(--signals-navy); }
.btn--onNavyGhost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn--onNavyGhost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* --- Decorative brand marks ---------------------------------------------
   Inlined as SVG rather than loaded as files so each one can be coloured and
   placed from CSS. Geometry is the brand double-arc from the kit; the ring is
   the same motif closed.

   COLOUR: on the navy grounds the comp uses the Signals tertiary purple
   #654CCB at ~9.5% opacity. That is not a guess — solving
   arc = ground + a(#654CCB - ground) for every sampled pair on both the
   Signals hero and the homepage band gives a = 0.09..0.10 on all three
   channels, which no other candidate colour does. Positions are percentages
   of the band, taken from the comp at its 1920 artboard, so they hold at any
   width. */
.sigdecor { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.sigdecor svg { width: 100%; height: auto; display: block; fill: currentColor; }
.sigdecor--onNavy { color: #654CCB; opacity: .095; }

/* The Signals hero carries NO decorative marks in CSS: the hero artwork is
   the composition, and adding marks behind it doubles them up. The .sigdecor
   machinery stays for the other sections and for the homepage band. */

/* --- Mint section, with the curved foot the design uses ------------------ */
.section--sigTint { position: relative; background: var(--signals-tint); }
/* The curve is the designer's own shape, not an approximated ellipse: the
   earlier pseudo-element was a 160%-wide radius trick that read as the wrong
   arc and needed overflow:hidden to stop it adding horizontal scroll. This is
   their cubic, inverted to fill downwards, pinned inside the section — so it
   never overflows and never overlaps the section below. preserveAspectRatio
   is none in the file, so it stretches to any width. */
.section--sigTint::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  /* Height, not aspect-ratio. On an absolutely positioned box with both
     insets at 0 and height auto, aspect-ratio sizes the box FROM the ratio
     rather than filling the insets — it resolved to 835px wide at a 390px
     viewport and put horizontal scroll on the page. 8.4vw is 161/1920. */
  height: clamp(34px, 8.4vw, 161px); pointer-events: none;
  background: url("../Assets/icons/signals-tint-curve.svg") bottom center / 100% 100% no-repeat;
}
.section--sigTint > .shell { position: relative; z-index: 1; }

/* Question-mark bullets. The design uses "?" where the rest of the site uses
   a tick, because this list is the questions nobody can answer. */
.checks--query > li::before { content: "?"; font-weight: 900; }

/* SS4: the comp runs this one section's eyebrow and accent word in the
   Signals secondary blue rather than the theme teal. #123BD2 is 8.13:1 on
   white, so it carries both the small-caps eyebrow and the display word. */
.section--sigBlueHead .eyebrow { color: var(--signals-blue); }
.section--sigBlueHead .accent-display,
.section--sigBlueHead .accent-display strong { color: var(--signals-blue); }

/* SS7: icons supplied at 48px with their own mint rounded square. The badge
   variant removes the themed box; this pins the size so the square is drawn
   1:1 rather than scaled up to the 72px badge default. */
.valuecards--signalsIcons .valuecard__icon { width: 48px; height: 48px; margin-bottom: 18px; }
.valuecards--signalsIcons .valuecard__icon img { width: 48px; height: 48px; max-height: none; }

/* --- The three pillars --------------------------------------------------- */
.sigpillars { margin-top: 56px; display: grid; gap: 72px; position: relative; }
.sigpillar { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sigpillar--flip .sigpillar__media { order: 2; }
/* No mat here any more. The second export bakes each pillar's tinted
   background, its rounded corner and the screenshot's bleed into one 1152x640
   image, so the CSS mat that used to sit behind the artwork would now double
   it. The artwork is the whole composition; the column just holds it. */
.sigpillar__media { position: relative; }
.sigpillar__media img {
  /* No radius: the artwork carries its own rounded corner and runs off its
     other edges, so rounding the element box would clip the bleed. */
  width: 100%; height: auto; display: block;
}
.sigpillar__media .placeholder { border-radius: var(--r-lg); }
.sigpillar__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 12px;
}
.sigpillar__eyebrow img { width: 22px; height: auto; flex: none; }
.sigpillar--engagement .sigpillar__eyebrow { color: var(--signals-teal-ink); }
.sigpillar--insight    .sigpillar__eyebrow { color: var(--signals-blue); }
.sigpillar--impact     .sigpillar__eyebrow { color: var(--signals-purple); }
.sigpillar h3 { margin: 0 0 14px; font-size: clamp(1.5rem, 2.3vw, 1.95rem); font-weight: 900; }
.sigpillar p { margin: 0; color: var(--ink-2); line-height: 1.65; }
.sigpillar .checks { margin-top: 20px; }

/* --- "Meaning from metrics" — deep teal band ----------------------------- */
.sigmeaning { background: var(--signals-deep); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
/* A closed double ring centred behind the display heading — the comp uses the
   closed mark here, not the open arc. */
/* Width scales so the ring cannot reach past a narrow viewport — at a fixed
   680px it was 290px wider than a 390px screen and added horizontal scroll. */
/* The comp's mark here is the closed double ring, not the quarter arc, and it
   sits behind the display head rather than off the left edge. Fitted off the
   comp: centre (590, 390), outer radius 345 in comp px. Anchored by its offset
   from the display head rather than from the section's left edge, because the
   comp's columns are ~12% narrower than the built ones and anchoring to the
   edge drifts the mark off the words it sits behind. */
.sigmeaning__decor { position: absolute; left: 22%; top: 34px;
  width: 40.8%;
  color: var(--signals-mint); opacity: .045; pointer-events: none; }
.sigmeaning__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.sigmeaning__display {
  margin: 0; line-height: 1.02; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); color: var(--signals-mint-2);
}
.sigmeaning__display strong { display: block; font-weight: 700; }
/* Second line is white in the comp, not a lighter weight of the mint. */
.sigmeaning__display span   { display: block; font-weight: 300; color: #ffffff; }
.sigmeaning__eyebrow {
  font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signals-mint); margin: 0 0 16px;
}
.sigmeaning__lede { margin: 0; font-size: var(--fs-lg); line-height: 1.65; color: #cfe6e1; }
.sigmeaning__cards { margin-top: 44px; display: grid; gap: 14px; }
.sigmeaning__card {
  border: 1px solid rgba(141, 227, 207, .28); border-radius: var(--r-md);
  padding: 18px 22px; background: rgba(255, 255, 255, .03);
}
.sigmeaning__card h3 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 900; color: var(--signals-mint-2); }
.sigmeaning__card p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: #b9d6d1; }
.sigmeaning__shot { margin-top: 44px; }
.sigmeaning__shot img, .sigmeaning__shot .placeholder {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
}

/* --- Integrations — navy band -------------------------------------------- */
/* SS10: the band is not flat navy — it holds #0A0F31 for its top ~40% then
   opens into a brighter blue, sampled down the reference's left edge.
   background-color is declared too, for the same reason .signalband does it:
   so the white text has a resolvable backdrop. */
.sigconnect {
  background-color: #0A0F31;
  background-image: linear-gradient(180deg, #0A0F31 0%, #0A0F31 40%, #122569 100%);
  color: #fff; padding: 92px 0; position: relative; overflow: hidden;
}
.sigconnect__grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 48px; align-items: center; }
.sigconnect h2 { margin: 0 0 26px; color: #fff; font-weight: 300; font-size: clamp(1.9rem, 3.3vw, 2.8rem); line-height: 1.12; }
.sigconnect h3 { margin: 0 0 10px; font-size: var(--fs-base); font-weight: 900; color: var(--signals-mint); }
.sigconnect__group + .sigconnect__group { margin-top: 26px; }
.sigconnect .checks > li { color: #d6def3; }
.sigconnect .checks > li::before { color: var(--signals-mint); }
.sigconnect__actions { margin-top: 32px; }
.sigconnect__media img {
  /* Transparent cut-out — no radius, and no box-shadow, which would paint a
     rectangle behind the floating dashboard. */
  width: 100%; height: auto; display: block;
}
.sigconnect__media .placeholder {
  border-radius: var(--r-lg); box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
}

/* The diagram above the screenshot: source cards, connector lines, the
   aggregator strip. Markup rather than artwork — see sigconnect() in
   progpage.py — so the source names stay editable. Colours sampled from the
   comp: panel #101C58, cards #1F2A62, connectors #32427D. */
.sigdiagram {
  background: #101C58; border: 1px solid rgba(120, 140, 200, .22);
  border-radius: var(--r-lg); padding: 22px 22px 0;
}
.sigsources {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.sigsource {
  position: relative;
  background: #1F2A62; border: 1px solid rgba(140, 160, 215, .26);
  border-radius: var(--r-md); padding: 10px 11px;
  display: flex; gap: 7px; align-items: flex-start;
}
/* The drop from each card into the aggregator strip. */
.sigsource::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 16px; background: #32427D;
}
.sigsource__icon { flex: none; width: 14px; color: #9FB4E8; margin-top: 1px; }
.sigsource__icon svg { width: 14px; height: 14px; display: block; }
.sigsource__text { min-width: 0; }
.sigsource__text strong {
  display: block; font-size: 13px; font-weight: 900; color: #fff; line-height: 1.25;
}
.sigsource__text > span {
  display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: #9FB4E8;
}
.sigaggregator {
  position: relative; margin: 16px 0 0; padding: 11px 16px;
  background: #1E2862; border: 1px dashed rgba(141, 227, 207, .5);
  border-radius: var(--r-md);
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
/* And the drop from the strip into the screenshot. */
.sigaggregator::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 18px; background: #32427D;
}
.sigaggregator__tag {
  font-size: var(--fs-sm); font-weight: 900; color: var(--signals-mint); white-space: nowrap;
}
.sigaggregator__tag em { font-style: normal; }
.sigaggregator__body { font-size: 12px; line-height: 1.5; color: #C3D2EE; }
.sigconnect__shot { margin-top: 18px; }
@media (max-width: 767px) {
  .sigsources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sigsource::after { display: none; }
  .sigdiagram { padding: 16px 16px 0; }
}
/* On the navy band the teal fill is the accent action. White on #027F7D is
   4.84:1, so the label clears AA. */
.sigconnect .placeholder {
  background: rgba(255, 255, 255, .04); border-color: rgba(141, 227, 207, .4); color: #b9d6d1;
}
.sigconnect .placeholder strong { color: var(--signals-mint); }
.sigconnect .placeholder em { color: #8fa6c4; }

.btn--signals { background: var(--signals-teal-ink); color: #fff; border: 1px solid var(--signals-teal-ink); }
.btn--signals:hover { background: var(--signals-teal); border-color: var(--signals-teal); color: #fff; }

/* --- "Built for programme people" ---------------------------------------- */
.sigwho { position: relative; overflow: hidden; }
/* Both marks are flat tints in the comp, not the brand colours at an opacity:
   sampled straight off it they are #BAE0E0 and #B6C1EC, uniform across the
   shape. Neither bleeds off the page — they sit inside it, which is why the
   old corner-anchored versions read as a different composition. Positions are
   from the 1920 artboard: mint at x 1528 (79.6%), 241 wide, 65px down; the C
   at x 188 (9.8%), 216 wide, 70px up from the section's bottom edge. */
.sigwho__decor { position: absolute; left: 79.6%; right: auto; top: 6.2%;
  width: 12.6%; color: #BAE0E0; pointer-events: none; }
.sigwho__decor--b { left: 9.8%; right: auto; top: auto; bottom: 6.7%;
  width: 11.3%; color: #B6C1EC; }
.sigwho__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; margin-top: 48px; }
.sigwho__cards { display: grid; gap: 24px; }
.sigwho__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 30px 30px; box-shadow: var(--shadow-sm);
}
.sigwho__card h3 { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); font-weight: 900; }
.sigwho__card--managers h3 { color: var(--signals-teal-ink); }
.sigwho__card--stakeholders h3 { color: var(--signals-blue); }
.sigwho__card > p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; }
.sigwho__photo img {
  /* The photograph is supplied already cropped with its rounded corners in
     the alpha, so it is placed at its own aspect rather than cover-cropped
     into a box — object-fit would re-crop art that is already final. */
  width: 100%; height: auto; display: block;
}
.sigwho__photo .placeholder {
  width: 100%; height: 100%; min-height: 320px; border-radius: var(--r-lg);
}

/* --- Closing band -------------------------------------------------------- */
.sigclosing { background: var(--signals-deep); color: #fff; padding: 88px 0; text-align: center; }
.sigclosing__logo { display: block; margin: 0 auto 20px; width: 280px; height: auto; }
.sigclosing h2 { margin: 0; color: #fff; font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; }
.sigclosing h2 strong { font-weight: 900; color: var(--signals-mint); }
.sigclosing__lede { max-width: 56ch; margin: 18px auto 0; color: #bcd6d1; font-size: var(--fs-lg); line-height: 1.6; }
.sigclosing__actions { margin-top: 30px; }
.btn--onDeep { background: #fff; color: var(--signals-deep); border: 1px solid #fff; }
.btn--onDeep:hover { background: #e4f3f0; border-color: #e4f3f0; color: var(--signals-deep); }
.btn--onDeepGhost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn--onDeepGhost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* --- Responsive ----------------------------------------------------------
   The site's ladder is 1200 / 1080 / 991 / 767; these use the same stops. */
@media (max-width: 991px) {
  .sigpillar, .sigmeaning__grid, .sigconnect__grid, .sigwho__grid { grid-template-columns: 1fr; gap: 32px; }
  .sigpillar--flip .sigpillar__media { order: 0; }
  .sigwho__photo .placeholder { min-height: 260px; }
  .sigwho__decor { display: none; }
}
@media (max-width: 767px) {
  .sighero { padding: 60px 0 44px; }
  .sighero__logo { width: 220px; }
  .sigmeaning, .sigconnect, .sigclosing { padding: 64px 0; }
  .sigclosing__logo { width: 210px; }
  .section--sigTint::after { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .sigpillar__media img, .sigwho__photo img { transition: none; }
}