/* ─────────────────────────────────────────────────────────────
   The presentation — native web animation, full screen, click-through.
   A 1280×720 stage, scaled to fit. Left: who, when, what, and a
   first-person thought. Right: a screen cloned from the page's own
   mockups (or built in the same style), driven by an animated cursor.
   ───────────────────────────────────────────────────────────── */

/* Entry points on the page ------------------------------------ */
/* The entry module is further down ("Entry module under ..."). */

/* "In the story" link on each screen */
.figure__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.storylink {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; cursor: pointer;
    border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-canvas);
    font: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.storylink:hover { border-color: var(--color-primitives-green-500); color: var(--text-primary); }
.storylink:focus-visible { outline: 2px solid var(--action-primary-default); outline-offset: 2px; }
.storylink svg { width: 20px; height: 20px; border-radius: 50%; }
.storylink .material-icons { font-size: 16px; color: var(--status-success-icon); margin-left: -2px; }

/* Closing band */
.replay {
    display: flex; align-items: center; gap: var(--layout-space-m); flex-wrap: wrap;
    margin: 0 0 var(--layout-space-xxl); padding: var(--layout-space-l); border-radius: 20px; background: var(--bg-app-shell); color: #fff;
}
.replay__cast { display: flex; }
.replay__cast svg { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-app-shell); }
.replay__cast svg + svg { margin-left: -10px; }
.replay__t { flex: 1; min-width: 220px; }
.replay__t b { display: block; font-size: 20px; font-weight: 600; }
.replay__t span { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.replay .btn { height: 44px; padding: 0 20px; font-size: 14px; background: var(--color-primitives-green-500); }
.replay .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Full-screen presentation --------------------------------------
   Covers the whole window (and asks the browser for real full screen).
   The 1280×720 stage is scaled to fit above a slim control bar; the
   backdrop matches the slide, so letterboxing disappears. */
.story {
    position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 0 var(--phe-st-bar); background: var(--bg-app-shell);
    transition: opacity 0.4s ease, background-color 0.6s ease;
}
.story[hidden] { display: none; }
.story { opacity: 0; }
.story.is-open { opacity: 1; }
.story .st-frame { transform: scale(0.985); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.story.is-open .st-frame { transform: none; }
.st-close {
    position: absolute; top: 16px; right: 16px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.st-close:hover { background: rgba(255, 255, 255, 0.18); }
.st-close:focus-visible, .st-ctrl:focus-visible, .st-seg:focus-visible { outline: 2px solid var(--color-primitives-green-400); outline-offset: 2px; }
.st-frame { width: min(100vw, calc((100vh - var(--phe-st-bar)) * 16 / 9)); }
.st-stagewrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.st-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden;
    background: var(--bg-app-shell); color: #fff; }

/* A page = one full stage (caption + screen). Opaque, so a sliding page reads as one sheet.
   Flat dark blue: the brand guide rules out gradients on dark backgrounds. */
.st-page { position: absolute; inset: 0; will-change: transform;
    background: var(--bg-app-shell);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5); }

/* Left panel: who, when, what, thought */
.st-panel { position: absolute; left: 40px; top: 40px; bottom: 40px; width: 300px; display: flex; flex-direction: column; }
.st-who { display: flex; align-items: center; gap: 14px; }
.st-who svg { width: 64px; height: 64px; flex: none; border-radius: 50%; }
.st-who b { display: block; font-size: 20px; font-weight: 600; }
.st-who span.st-type { display: inline-flex; margin: 0 0 6px; font-size: 11px; line-height: 1; }
.st-who span.st-type--sub { color: var(--phe-navy); }
.st-who span.st-type--supplier, .st-who span.st-type--gc { color: var(--phe-mint-neutral); }

.st-who span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.62); }
.st-action { margin: 36px 0 0; font-size: 22px; font-weight: 600; line-height: 1.32; letter-spacing: -0.2px; }
.st-thought { position: relative; margin: 22px 0 0; padding-left: 16px; border-left: 3px solid var(--color-primitives-green-500); font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
/* Corner tag: the idea names this moment shows, at the foot of the caption */
.st-idea-why { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.st-ideatags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Same pill as the ideas on the opening slide (.st-idea), just smaller, so the two read as one set */
.st-ideatag { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    background: #2b3540; border: 1px solid rgba(245, 252, 251, 0.16);
    font-size: 14px; font-weight: 500; letter-spacing: -0.1px; color: var(--phe-mint-neutral); }
.st-idea-why__t { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
/* Leads back to the page (the written detail), so a page icon, not an arrow that could point at the mock-up */
.st-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--color-primitives-green-400); text-decoration: none; }
.st-more:hover .st-more__t { text-decoration: underline; text-underline-offset: 3px; }
.st-more .material-icons-outlined { font-size: 18px; }
.st-panel__foot { margin-top: auto; font-size: 12px; color: rgba(255, 255, 255, 0.4); }

/* Right: the screen */
.st-screen-host { position: absolute; left: 380px; top: 24px; right: 24px; bottom: 24px; }
.st-screen { position: absolute; left: 50%; top: 50%; width: 1000px; transform: translate(-50%, -50%) scale(0.86); color: var(--text-primary); }
.st-screen .win { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); border-color: transparent; }
.st-hover { background-color: var(--bg-surface-hover) !important; }
.st-press { opacity: 0.7; transition: opacity 0.12s; } /* dim, never scale: scaling text inside the scaled stage distorts it */
.st-pop { box-shadow: 0 0 0 3px var(--color-primitives-green-500) !important; border-radius: 10px; }
.st-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--text-primary); animation: st-blink 1s steps(1) infinite; }
@keyframes st-blink { 50% { opacity: 0; } }

/* Cursor */
/* macOS arrow, 1:1 above the scaled stage; its own compositor layer. Hotspot = arrow tip (8.2, 4.9 of 28). */
.st-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 0; height: 0; pointer-events: none; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.st-cursor svg { position: absolute; left: -10.5px; top: -6.3px; width: 36px; height: 36px; transition: transform 0.12s; transform-origin: 10.5px 6.3px; }
.st-cursor.is-down svg { transform: scale(0.9); }
/* Touch mode (targets on a phone): no arrow, a soft dark dot that shrinks on tap */
.st-touch { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.32); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    opacity: 0; transform: scale(1); transition: opacity 0.2s, transform 0.14s ease-out; }
.st-cursor svg { transition: transform 0.12s, opacity 0.2s; }
.st-cursor.is-touch svg { opacity: 0; }
.st-cursor.is-touch .st-touch { opacity: 1; }
.st-cursor.is-touch.is-away .st-touch { opacity: 0; }
.st-cursor.is-touch.is-down .st-touch { transform: scale(0.66); background: rgba(0, 0, 0, 0.42); }
.st-ripple { position: absolute; z-index: 29; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--color-primitives-green-400); animation: st-ripple 0.5s ease-out forwards; }
@keyframes st-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* Full-stage cards: cast intro and closing */
.st-card { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; justify-content: center; padding: 0 96px; }
.st-card__eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primitives-green-400); }
.st-card__t { margin: 0; max-width: 900px; font-size: 52px; font-weight: 600; line-height: 1.08; letter-spacing: -0.8px; }
.st-card__s { margin: 16px 0 0; max-width: 760px; font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.st-cast { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.st-cast .st-castcard { padding: 16px; }
.st-cast .st-castcard b { font-size: 16px; }
.st-cast .st-castcard span { font-size: 13px; }
.st-castcard { padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.st-castcard svg { width: 72px; height: 72px; border-radius: 50%; }
.st-castcard b { display: block; margin-top: 14px; font-size: 19px; font-weight: 600; }
.st-castcard span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); }
.st-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.st-refs span { padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.st-endbtns { display: flex; gap: 12px; margin-top: 40px; }
.st-endbtn { height: 48px; padding: 0 22px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.st-endbtn--primary { background: var(--color-primitives-green-500); color: #fff; }
.st-endbtn--ghost { background: rgba(255, 255, 255, 0.1); color: #fff; }
.st-endbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Site-walk scene */
.st-site { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; }
.st-phone {
    position: absolute; left: 50%; top: 50%; width: 330px; height: 680px; transform: translate(-50%, -50%);
    border-radius: 54px; padding: 11px; background: #0d1014;
    box-shadow: inset 0 0 0 2px #2a3038, 0 30px 60px rgba(0,0,0,0.45);
}
.st-phone::before, .st-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #22272e; }
.st-phone::before { left: -3px; top: 120px; height: 56px; box-shadow: 0 72px 0 #22272e; }
.st-phone::after { right: -3px; top: 150px; height: 84px; }
.st-phone__screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; background: var(--bg-app-shell); display: flex; flex-direction: column; }
/* iOS status bar */
.ios-status { position: relative; flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 34px;
    font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.ios-status--dark { background: var(--bg-app-shell); color: #fff; }
.ios-island { position: absolute; left: 50%; top: 11px; width: 98px; height: 29px; margin-left: -49px; border-radius: 20px; background: #000; }
.ios-icons { display: flex; align-items: center; gap: 4px; }
.ios-icons svg { display: block; fill: currentColor; }
/* iOS navigation bar */
.ios-nav { flex: none; margin-top: -1px; padding: 5px 18px 14px; background: var(--bg-app-shell); color: #fff; }
.ios-back { display: inline-flex; align-items: center; margin: 0 0 8px -6px; font-size: 15px; color: var(--color-primitives-green-300); }
.ios-back .material-icons { font-size: 22px; }
.ios-nav small { display: block; font-size: 12px; opacity: 0.6; }
.ios-nav b { display: block; margin-top: 1px; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }
.st-phone__body { flex: 1; min-height: 0; padding: 14px; overflow: hidden; background: #f2f4f7; }
.st-phone__body .card { border-radius: 14px; }
.ios-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
/* Walk photos: crops of the sewer-trench illustration */
.ios-photos i { display: block; aspect-ratio: 1; border-radius: 8px; background: url("assets/sewage-web.jpg") no-repeat; background-size: 420% auto; }
.ios-photos i:nth-child(1) { background-position: 40% 100%; }
.ios-photos i:nth-child(2) { background-position: 55% 72%; }
.ios-photos i:nth-child(3) { background-position: 72% 50%; }
/* iOS tab bar + home indicator */
.ios-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 26px; position: relative;
    background: rgba(255,255,255,0.92); border-top: 1px solid var(--border-subtle); }
.ios-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 500; color: var(--text-tertiary); }
.ios-tab .material-icons-outlined, .ios-tab .material-icons { font-size: 24px; }
.ios-tab--on { color: var(--status-success-text); }
.ios-home { position: absolute; left: 50%; bottom: 8px; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: #111; }

/* Controls: previous, next, one mark per slide, and where you are */
.st-controls {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--phe-st-bar);
    display: flex; align-items: center; gap: 24px; padding: 0 24px; color: #fff; transition: color 0.4s;
}
/* The buttons sit as far from the timeline as from the screen edge; Back and Next stay a pair. */
.st-controls [data-act="prev"] { margin-right: -12px; }
/* Centered on the screen at any width: Replay gets the same width as Back + Next (100px), so the
   timeline sits in the middle. With Pinpoint (review comments) on the page, its button sits bottom
   right, so both sides move in by the same amount to keep Replay clear of it. */
.st-controls [data-act="replay"] { margin-left: 56px; }
.story.has-review .st-controls { padding: 0 172px; }
.st-ctrl { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.1); color: inherit; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.st-ctrl:hover { background: rgba(255, 255, 255, 0.18); }
.st-ctrl:disabled { opacity: 0.35; cursor: default; }
.st-ctrl--next { background: var(--color-primitives-green-500); color: #fff; }
.st-ctrl--next:hover { background: var(--color-primitives-green-600); }
.st-ctrl .material-icons { font-size: 24px; }
.st-track { position: relative; flex: 1; min-width: 0; }
/* Timeline tooltip: instant, white on the dark player, arrow points at the hovered segment */
.st-tip {
    position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 5; pointer-events: none;
    display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px;
    background: #fff; color: var(--text-primary); white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.st-tip[hidden] { display: none; }
.st-tip::after { content: ""; position: absolute; top: 100%; left: var(--ax, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; }
.st-tip svg { width: 32px; height: 32px; flex: none; border-radius: 50%; }
.st-tip__t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.st-tip__t small { display: block; font-size: 12px; color: var(--text-tertiary); }
.st-tip:not(:has(svg)) { padding-left: 14px; }
.st-segs { display: flex; gap: 4px; }
.st-seg { flex: 1; height: 22px; padding: 0; border: 0; cursor: pointer; background: none; display: flex; align-items: center; }
.st-seg i { display: block; position: relative; width: 100%; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.18); transition: height 0.15s, background-color 0.4s; }
.st-seg:hover i { height: 8px; }
.st-seg i b { position: absolute; inset: 0; background: var(--color-primitives-green-400); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.st-seg.is-done i b { transform: scaleX(1); }
.st-label { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 12px; opacity: 0.65; white-space: nowrap; overflow: hidden; }
.st-label b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.st-open { overflow: hidden; }


/* Plans preview opened inside the story */
.peek__img.st-open::after { opacity: 0; }


.st-seg { flex-basis: 0; min-width: 6px; }

/* Moments added with the reworked story -------------------------------- */
/* Google results with planhub.com fading in on top */
.st-stack { position: relative; width: 1000px; height: 690px; }
.st-stack > .win { position: absolute; inset: 0; }
.st-stack > .win .main { height: calc(100% - 38px); box-sizing: border-box; }
.st-stack > .st-home { opacity: 0; overflow: hidden; }
.st-g { padding: 26px 40px !important; }
.st-gbar {
    display: flex; align-items: center; gap: 14px; max-width: 640px; height: 46px; padding: 0 18px;
    border: 1px solid var(--border-default); border-radius: 999px; box-shadow: var(--elevation-light-low);
    font-size: 15px; color: var(--text-primary);
}
.st-gbar .material-icons { margin-left: auto; color: var(--icon-subtle); }
.st-glogo { padding-right: 14px; border-right: 1px solid var(--border-subtle); font-weight: 700; color: var(--text-tertiary); }
.st-gq { min-width: 2px; }
.st-gres { max-width: 640px; margin-bottom: 22px; }
.st-gt { margin: 3px 0 4px; font-size: 19px; line-height: 1.3; color: #1a4fb4; }
.st-gph .st-gt { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
/* Real avatars inside screens (team list, supplier hand-off) */
.st-av { display: inline-flex; flex: none; }
.st-av svg { width: 34px; height: 34px; border-radius: 50%; }
.seller .st-av svg { width: 36px; height: 36px; }
/* The supplier quote landing in Maria's bid */
.st-landed { position: absolute; right: -10px; bottom: 10px; width: 380px; box-shadow: var(--elevation-light-high); border-color: var(--status-success-border); }

/* Opening slides ------------------------------------------------------
   The same dark PlanHub blue as the moments, so the story reads as one
   piece. Type in Neutral Mint, accents in Mint Green; the logo uses the
   brand's dark colorway. Colors the DS tokens don't carry yet are
   experimental (--phe-) tokens taken from the brand guidelines. */
:root {
    --phe-navy: #25313e;          /* Brand dark blue, the PlanHub "black" */
    --phe-mint-neutral: #f5fcfb;  /* Brand Neutral Mint, the PlanHub "white" */
    --phe-mint-light: #c1e6e1;    /* Brand Light Mint (subcontractor cohort) */
    --phe-grey-dark: #3b4651;     /* Brand Dark Grey (supplier cohort) */
    --phe-st-bar: 76px;           /* Height of the presentation control bar */
}
.st-slide { position: absolute; inset: 0; z-index: 25; overflow: hidden; color: var(--phe-mint-neutral);
    background: var(--bg-app-shell); }
/* The brand hexagon as a quiet outline behind the statement; it becomes the logomark.
   660px tall, so the whole shape sits inside the 720px stage. */
.st-hex { position: absolute; left: 50%; top: 50%; width: 584px; height: 660px; margin: -330px 0 0 -292px; pointer-events: none; transform-origin: 50% 50%; }
.st-hex path { fill: none; stroke: rgba(193, 230, 225, 0.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Slide 1: the ideas around one statement */
.st-ideas__center { position: absolute; left: 50%; top: 50%; width: 520px; transform: translate(-50%, -50%); text-align: center; }
.st-h4 { margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-primitives-green-400); }
.st-ideas__t { margin: 0; font-size: 38px; font-weight: 600; line-height: 1.22; letter-spacing: -0.6px; text-wrap: balance; }
.st-ideas__t em { font-style: normal; color: var(--color-primitives-green-400); }
.st-idea {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
    border-radius: 999px; background: #2b3540; border: 1px solid rgba(245, 252, 251, 0.16); white-space: nowrap; /* solid, so the hexagon line passes behind */
    font-size: 17px; font-weight: 500; letter-spacing: -0.1px; color: var(--phe-mint-neutral); will-change: transform, opacity;
}

/* Slide 0: today's pain points, in the customer's words. Same pill as the ideas, but quotes wrap to
   two lines so they stay clear of the statement, and they read a little quieter. */
.st-pain { height: auto; width: max-content; max-width: 300px; padding: 10px 20px; border-radius: 22px; white-space: normal; text-align: center;
    font-size: 16px; line-height: 1.35; color: rgba(245, 252, 251, 0.82); }

/* Slide 2: PlanHub 2028 */
.st-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.st-lockup { display: flex; align-items: center; gap: 30px; }
.st-lockup__logo { position: relative; display: flex; align-items: flex-start; height: 120px; }
/* Fixed sizes (from the image proportions), so the layout is known before the images load */
.st-lockup__word { height: 64px; width: 230px; margin-top: 27px; margin-right: 9px; }
.st-lockup__mark { height: 120px; width: 106px; }
/* Tapered with color: a hairline in Light Mint that fades out smoothly toward both ends */
.st-lockup__rule { width: 1.5px; height: 104px; border-radius: 1px;
    background: linear-gradient(to bottom, rgba(193, 230, 225, 0) 0%, rgba(193, 230, 225, 0.16) 18%, rgba(193, 230, 225, 0.55) 42%, rgba(193, 230, 225, 0.55) 58%, rgba(193, 230, 225, 0.16) 82%, rgba(193, 230, 225, 0) 100%); }
.st-lockup__year { font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -2px; color: var(--color-primitives-green-500); font-variant-numeric: tabular-nums; }
.st-brand__p { margin: 44px 0 0; font-size: 28px; font-weight: 500; line-height: 1.35; letter-spacing: -0.3px; text-align: center; color: var(--phe-mint-neutral); }
.st-brand__p em { font-style: normal; color: var(--color-primitives-green-400); }

/* Slide 3: the people, by company */
.st-castslide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 96px; }
.st-castslide__t { margin: 0; max-width: 900px; font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -0.7px; }
.st-castslide__s { margin: 14px 0 0; font-size: 20px; line-height: 1.5; color: rgba(245, 252, 251, 0.7); }
/* The owner: named once on the cast slide, so later awards read as the owner's choice */
.st-owner { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 15px; line-height: 1.45; color: rgba(245, 252, 251, 0.72); }
.st-owner b { color: var(--phe-mint-neutral); font-weight: 600; }
.st-owner .material-icons-outlined { font-size: 22px; color: var(--color-primitives-green-300); }
.st-cos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.st-co { padding: 22px; border-radius: 20px; background: rgba(245, 252, 251, 0.06); border: 1px solid rgba(245, 252, 251, 0.1); }
/* One line each, so the people start at the same height in every card */
.st-co__name { display: block; margin-top: 12px; font-size: 21px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; }
.st-co__people { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(245, 252, 251, 0.1); }
.st-co__p { display: flex; align-items: center; gap: 12px; }
.st-co__p svg { width: 52px; height: 52px; flex: none; border-radius: 50%; }
.st-co__p b { display: block; font-size: 17px; font-weight: 600; }
.st-co__p span { display: block; font-size: 14px; color: rgba(245, 252, 251, 0.62); }

/* Company type: one brand cohort color each, used wherever a person appears.
   On the dark stage the darker two get a light edge so they still read. */
.st-type { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; white-space: nowrap; }
.st-type--sub { background: var(--phe-mint-light); color: var(--phe-navy); }
.st-type--supplier { background: var(--phe-grey-dark); color: var(--phe-mint-neutral); box-shadow: inset 0 0 0 1px rgba(245, 252, 251, 0.35); }
.st-type--gc { background: var(--phe-navy); color: var(--phe-mint-neutral); box-shadow: inset 0 0 0 1px rgba(245, 252, 251, 0.35); }

/* The end: back to the logo and the first principle */
.st-endnav { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; justify-content: center; gap: 12px; }

/* Entry module under "What we do / don't do" --------------------------- */
.present {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--layout-space-l);
    width: 100%; margin-top: var(--layout-space-s); padding: var(--layout-space-xl); overflow: hidden; cursor: pointer; text-align: left;
    border: 0; border-radius: var(--layout-radius-l); background: var(--phe-mint-neutral); color: var(--phe-navy); font: inherit;
    container-type: inline-size; /* the honeycomb fade is measured against the banner width */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.present:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -20px rgba(0, 184, 148, 0.55); }
.present:focus-visible { outline: 3px solid var(--color-primitives-green-400); outline-offset: 3px; }
@media (max-width: 760px) { .present { grid-template-columns: 1fr; padding: var(--layout-space-l); } }
.present__eyebrow { display: block; margin: 0 0 10px; font-size: var(--typography-font-size-xs); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-primitives-green-600); }
.present__t { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.4px; }
.present__s { display: block; margin-top: 10px; font-size: var(--typography-font-size-s); line-height: 1.55; color: rgba(37, 49, 62, 0.72); }
.present__cta {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-top: 22px; padding: 0 20px 0 16px; border-radius: 999px;
    background: var(--phe-navy); color: var(--phe-mint-neutral); font-size: 15px; font-weight: 600;
}
.present__cta .material-icons { font-size: 22px; }
/* Right side: the brand's rounded hexagons as a honeycomb,
   bleeding off the right edge and fading out before the text. */
.present__art { position: relative; display: block; align-self: stretch; min-height: 240px;
    margin: calc(-1 * var(--layout-space-xl)) calc(-1 * var(--layout-space-xl)) calc(-1 * var(--layout-space-xl)) 0; }
/* The honeycomb is drawn wider than the art column so it can reach further left before it fades;
   the right edge stays pinned and the tiles keep their size at any banner width. */
.present__text { position: relative; z-index: 1; }
.present__pattern { position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 1560 / 200;
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 30cqw, transparent 58cqw);
            mask-image: linear-gradient(to left, #000 0, #000 30cqw, transparent 58cqw); }
/* Alive: the colored tiles breathe on their own rhythms, and tiles across the cluster light up
   and fade in turn, so the shape of the cluster keeps shifting. */
.present__pattern .hc { animation: hc-breathe 6s ease-in-out infinite; }
.present__pattern .hc-ping { opacity: 0; animation: hc-ping 11s ease-in-out infinite; }
@keyframes hc-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes hc-ping { 0%, 100% { opacity: 0; } 10%, 28% { opacity: 0.95; } 40% { opacity: 0; } }
@media (max-width: 760px) { .present__pattern { -webkit-mask-image: none; mask-image: none; }
    .present__art { min-height: 170px; margin: 0 calc(-1 * var(--layout-space-l)) calc(-1 * var(--layout-space-l)); } }