/* Page-local NHL service showcase. The homepage supplies the type and palette. */
.solutions-showcase {
  --ss-ink:#0c2742; --ss-blue:#1668d6; --ss-line:#dbe2e8;
  padding:clamp(64px,7vw,104px) 0; scroll-margin-top:88px;
  background:#f6f3ec; color:var(--ss-ink);
  font-family:"Hanken Grotesk",sans-serif;
}
.solutions-showcase * {box-sizing:border-box;}
.solutions-showcase h2 {max-width:690px;margin:0 0 38px;font:500 clamp(38px,4.2vw,58px)/1.08 "Newsreader",Georgia,serif;letter-spacing:-.035em;}
.solutions-showcase h2 em {color:var(--ss-blue);font-weight:inherit;white-space:nowrap;}
.ss-showcase {display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:16px;padding:16px;border:1px solid #dedfdc;border-radius:20px;background:#fcfbf8;}
.ss-stage {position:relative;min-height:612px;overflow:hidden;border:1px solid var(--ss-line);border-radius:12px;background:radial-gradient(ellipse at 48% 48%,#fff 0%,#f5f9fc 62%,#edf3f7 100%);box-shadow:inset 0 1px 8px #fff;}
.ss-stage::before {position:absolute;inset:0;content:"";pointer-events:none;background-image:radial-gradient(#becddd 0.7px,transparent 0.7px);background-size:22px 22px;opacity:.3;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);}
.ss-corner {position:absolute;z-index:2;font-size:21px;font-weight:300;line-height:1;color:#a1b4c5;pointer-events:none;}
.ss-corner-tl {top:20px;left:22px;}.ss-corner-tr {top:20px;right:22px;}.ss-corner-bl {bottom:20px;left:22px;}.ss-corner-br {bottom:20px;right:22px;}
.ss-scene {container-type:size;position:absolute;inset:42px 14px 55px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.975);filter:blur(5px);transition:opacity 450ms ease,transform 600ms cubic-bezier(.2,.7,.25,1),filter 500ms ease,visibility 600ms;}
.ss-scene[data-active="true"] {opacity:1;visibility:visible;transform:translateY(0) scale(1);filter:blur(0);}
.ss-art {width:100%;max-width:640px;filter:drop-shadow(0 16px 20px #163b6510);}
.ss-art>svg {display:block;width:100%;height:auto;overflow:visible;font-family:"Hanken Grotesk",sans-serif;}
.ss-report-sheet {width:min(96%,calc((100cqh - 40px)*1.263));position:relative;isolation:isolate;}
.ss-report-sheet::before {content:"";position:absolute;inset:9px 10px;background:#eef3f8;border:1px solid #d6e2eb;border-radius:12px;transform:rotate(-2deg);z-index:-1;}
.ss-report-sheet>img {display:block;width:100%;height:auto;}
/* Photography and small editorial overlays give each service its own character. */
.ss-people {position:relative;width:min(90%,calc((100cqh - 68px)*1.23));max-width:580px;isolation:isolate;}
.ss-photo-frame {overflow:hidden;border:5px solid #fff;border-radius:15px;box-shadow:0 18px 40px -25px #0c27424a;}
.ss-photo-frame>img {display:block;width:100%;height:100%;object-fit:cover;}
.ss-people-search {padding-bottom:28px;}
.ss-people-search::before {content:"";position:absolute;inset:12px -8px 48px 10px;z-index:-1;border:1px solid #c6d8e8;border-radius:17px;background:#e1edf7;transform:rotate(3deg);}
.ss-people-search .ss-photo-frame {aspect-ratio:1.23;}
.ss-people-search .ss-photo-frame>img {object-position:73% center;}
.ss-search-note {position:absolute;left:-3%;right:7%;bottom:0;display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;border:1px solid #d6e3ed;border-radius:12px;box-shadow:0 12px 28px -18px #113b6752;}
.ss-search-note>img {flex:none;}
.ss-search-note strong {display:block;font:500 clamp(19px,2vw,26px)/1.15 "Newsreader",Georgia,serif;letter-spacing:-.02em;}
.ss-search-note span {display:block;margin-top:6px;font-size:12px;color:#607689;}
.ss-search-note strong .ss-caption-phrase {display:inline;margin:0;font:inherit;color:inherit;white-space:nowrap;}
.ss-people-succession {padding-bottom:28px;}
.ss-people-succession::before {content:"";position:absolute;inset:12px -8px 48px 10px;z-index:-1;border:1px solid #c6d8e8;border-radius:17px;background:#e1edf7;transform:rotate(-3deg);}
.ss-people-succession .ss-photo-frame {aspect-ratio:1.23;}
.ss-people-succession .ss-photo-frame>img {object-position:center;}
.ss-people-ai {width:min(90%,calc((100cqh - 194px)*1.43));}
.ss-advisory-composition {overflow:hidden;border:5px solid #fff;border-radius:15px;background:#fff;box-shadow:0 18px 40px -25px #0c27424a;}
.ss-advisory-photo {display:block;width:100%;height:auto;aspect-ratio:1.43;object-fit:cover;object-position:center;}
.ss-advisory-bridge {display:flex;align-items:center;justify-content:center;gap:18px;position:relative;min-height:94px;padding:20px 10px;background:#fff;font-size:15px;font-weight:500;}
.ss-advisory-bridge>img {box-sizing:content-box;padding:12px;border:1px solid #d5e3ef;border-radius:14px;background:#f5f9fd;}
.ss-advisory-bridge>span {flex:1;position:relative;text-align:center;}
.ss-advisory-bridge>span:first-child::after,.ss-advisory-bridge>span:last-child::before {content:"";position:absolute;top:50%;width:18px;height:1px;background:#9fbed8;}
.ss-advisory-bridge>span:first-child::after {right:-18px;}.ss-advisory-bridge>span:last-child::before {left:-18px;}
.ss-advisory-note {width:fit-content;margin:16px auto 0;padding:9px 16px;border:1px solid #c8dbed;border-radius:30px;background:#eaf3fc;color:#385c7d;font-size:12px;text-align:center;}
.ss-people-interim {padding-bottom:28px;width:min(90%,calc((100cqh - 68px)*1.3));}
.ss-people-intel {padding-bottom:28px;}
.ss-people-intel .ss-photo-frame {aspect-ratio:1.5;}
.ss-people-interim .ss-photo-frame {aspect-ratio:1.3;}
.ss-people-interim .ss-photo-frame>img {object-position:center;}
.ss-coverage {position:absolute;bottom:0;left:5%;right:5%;display:flex;justify-content:space-around;gap:5px;padding:19px 9px;border:1px solid #d6e3ed;border-radius:12px;background:#fff;box-shadow:0 12px 28px -18px #113b6752;}
.ss-coverage span {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;}
.ss-coverage span::before {content:"";width:6px;height:6px;border-radius:50%;background:#1668d6;}
.ss-coverage span:nth-child(2)::before {background:#32968b;}.ss-coverage span:nth-child(3)::before {background:#c2a43c;}
/* A native scroll track: no wheel interception, body locking or forced snapping. */
/* The pin is exactly the card's height, so nothing is centred inside it and the heading's own margin is the whole gap above the card. */
/* The card takes the viewport under the header, up to 800px: on a 900px laptop that is
   792px of card rather than the 720px cap it had, and the scenes scale with it (cqh). */
.ss-scroll-track.is-scroll-driven {--ss-pin-height:min(800px,calc(100svh - 108px));height:calc(var(--ss-pin-height) + var(--ss-travel));position:relative;}
.is-scroll-driven .ss-pin {position:sticky;top:88px;height:var(--ss-pin-height);}
.is-scroll-driven .ss-showcase {width:100%;height:var(--ss-pin-height);}
.is-scroll-driven .ss-stage {min-height:0;}
.is-scroll-driven .ss-art {max-height:100%;}
/* While pinned the card is height-capped, so the panel column must be allowed to shrink:
   a flex item's default min-height is its content, which is what pushed the last row
   through the card's border on 665px-tall cards. */
.is-scroll-driven .ss-panels {min-height:0;overflow:hidden;}
.is-scroll-driven .ss-item[data-active="true"] {min-height:0;}
.is-scroll-driven .ss-item[data-active="true"] .ss-panel {min-height:0;grid-template-rows:minmax(0,1fr);}
.ss-serif {font-family:"Newsreader",Georgia,serif;}
.ss-scene figcaption {font-size:14px;color:#53677b;text-align:center;}
.ss-reveal {opacity:1;transform:none;transform-box:fill-box;transform-origin:center;}
.is-ready .ss-scene[data-active="true"] .ss-reveal {animation:ss-enter 700ms both cubic-bezier(.2,.7,.25,1);animation-delay:calc(var(--order,0)*110ms + 120ms);}
.ss-draw {stroke-dasharray:1;stroke-dashoffset:0;}
.is-ready .ss-scene[data-active="true"] .ss-draw {animation:ss-draw 1500ms 180ms both ease;}
@keyframes ss-enter {from {opacity:0;transform:translateY(12px);}to {opacity:1;transform:translateY(0);}}
@keyframes ss-draw {from {stroke-dashoffset:1;}to {stroke-dashoffset:0;}}
.ss-intelligence-report {margin:auto;width:88%;padding:20px 16px 14px;border:1px solid #d7e0e9;border-radius:14px;background:#fff;box-shadow:0 12px 40px -24px #244c77;}
.ss-report-heading {display:flex;align-items:center;gap:12px;padding:0 3px 16px;border-bottom:1px solid #e3e9ef;font-size:16px;font-weight:600;}
.ss-report-heading img {flex:none;}
.ss-market-chart {display:block;width:100%;height:auto;margin:14px 0 7px;}
.ss-report-partner {display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;color:#647789;}
.ss-report-partner img {object-fit:contain;}
.ss-panels {display:flex;flex-direction:column;gap:10px;min-width:0;}
.ss-item {position:relative;padding:0 20px 0 29px;border:1px solid var(--ss-line);border-radius:10px;background:transparent;scroll-margin-top:120px;transition:background 350ms,border-color 350ms,box-shadow 350ms,flex-grow 500ms cubic-bezier(.2,.7,.25,1);}
.ss-item h3 {margin:0;font:inherit;}
.ss-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:18px 0;background:none;border:0;color:#516579;text-align:left;font-size:20px;line-height:1.25;font-weight:600;cursor:pointer;transition:color 250ms;}
.ss-trigger:hover {color:var(--ss-blue);}
.ss-toggle {flex:none;font-size:20px;font-weight:400;color:#6f8295;transition:transform 350ms;}
.ss-item[data-active="true"] {background:#fff;border-color:#cbdceb;box-shadow:0 4px 20px -12px #1668d620;}
.ss-item[data-active="true"] .ss-trigger {color:var(--ss-ink);}
.ss-item[data-active="true"] .ss-toggle {transform:rotate(45deg);color:var(--ss-blue);}
.ss-panel {display:grid;grid-template-rows:1fr;transition:grid-template-rows 500ms cubic-bezier(.2,.7,.25,1),opacity 300ms;}
.ss-panel-inner {min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;}
.ss-panel p {margin:0;color:#536578;font-size:17px;line-height:1.55;}
.ss-panel p a {color:inherit;text-decoration:underline;text-decoration-color:#9fb4c8;text-underline-offset:3px;}
.ss-panel p a:hover {color:var(--ss-blue);text-decoration-color:currentColor;}
.ss-panel strong {font-weight:500;color:var(--ss-ink);}
.ss-cta {display:flex;align-items:center;justify-content:space-between;gap:16px;width:fit-content;min-height:44px;margin:24px 0 15px;color:var(--ss-blue);font-size:14px;line-height:1.4;font-weight:600;text-decoration:none;}
.ss-cta span {font-size:21px;transition:transform 180ms;}
.ss-cta:hover span {transform:translate(2px,-2px);}
.ss-progress {position:absolute;top:23px;bottom:23px;left:13px;width:3px;border-radius:3px;overflow:hidden;background:#dfe7ee;transition:background 300ms;}
.ss-progress>span {display:block;width:100%;height:100%;transform:scaleY(0);transform-origin:top;background:var(--ss-blue);border-radius:3px;}
.ss-item[data-active="true"] .ss-progress>span {transform:scaleY(var(--ss-progress,0));}
.ss-showcase.is-ready .ss-item {display:flex;flex-direction:column;flex:0 0 auto;}
/* With five services, the closed rows give their height to the open one. */
.ss-showcase.is-ready .ss-item:not([data-active="true"]) .ss-trigger {min-height:62px;}
.ss-showcase.is-ready .ss-item[data-active="true"] {flex-grow:1;}
.ss-showcase.is-ready .ss-panel {grid-template-rows:0fr;opacity:0;}
.ss-showcase.is-ready .ss-item[data-active="true"] .ss-panel {grid-template-rows:1fr;opacity:1;flex:1;}
.ss-showcase.is-ready .ss-item:not([data-active="true"]) .ss-panel {visibility:hidden;}
.solutions-showcase button:focus-visible,.solutions-showcase a:focus-visible {outline:2px solid var(--ss-blue);outline-offset:5px;border-radius:3px;}
@media (min-width:801px) and (max-width:1050px) {
 .ss-showcase {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding:12px;}
 .ss-stage {min-height:620px;}.ss-trigger {font-size:18px;}.ss-panel p {font-size:16px;}
 .ss-item {padding-right:14px;}.ss-scene {left:4px;right:4px;}
}
@media (max-width:800px) {
 .solutions-showcase {padding:60px 0;}.solutions-showcase h2 {margin-bottom:28px;max-width:520px;}
 .ss-showcase {grid-template-columns:1fr;padding:12px;gap:14px;}
 .ss-stage {min-height:0;aspect-ratio:1.35;}
 .ss-scene {inset:24px 10px 30px;gap:4px;}.ss-art {max-width:560px;}
 .ss-people-ai {width:min(90%,calc((100cqh - 142px)*1.65));}
 .ss-advisory-photo {aspect-ratio:1.65;}.ss-advisory-bridge {min-height:70px;padding:10px;font-size:13px;}.ss-advisory-bridge>img {width:26px;height:29px;padding:8px;}
 .ss-advisory-note {font-size:11px;padding:8px 12px;margin-top:12px;}
 .ss-art>svg {max-height:390px;}.ss-scene figcaption {font-size:12px;}
 .ss-trigger {min-height:62px;font-size:19px;}.ss-panel p {max-width:100%;font-size:16px;}
 .ss-item {padding-left:29px;}.ss-panels {gap:8px;}
 .ss-intelligence-report {width:72%;padding:12px 10px 8px;}.ss-report-heading {padding-bottom:8px;font-size:12px;gap:8px;}.ss-report-heading img {width:18px;height:20px;}.ss-market-chart {margin:8px 0 3px;}.ss-report-partner {font-size:9px;}.ss-report-partner img {width:45px;height:15px;}
 .ss-corner {font-size:17px;}.ss-corner-tl,.ss-corner-tr {top:13px;}.ss-corner-tl,.ss-corner-bl {left:14px;}.ss-corner-tr,.ss-corner-br {right:14px;}.ss-corner-bl,.ss-corner-br {bottom:13px;}
}
@media (max-width:440px) {
 .solutions-showcase .shell {width:calc(100% - 28px);}.solutions-showcase h2 {font-size:36px;max-width:320px;}
 .ss-showcase {padding:8px;gap:10px;border-radius:16px;}.ss-stage {aspect-ratio:1.12;}
 .ss-scene {inset:15px 0 32px;gap:8px;}.ss-art {width:104%;}.ss-art.ss-report-sheet {width:min(97%,calc((100cqh - 30px)*1.263));}.ss-scene figcaption {font-size:11px;}
 .ss-trigger {font-size:17px;min-height:60px;}.ss-item {padding-right:13px;}.ss-panel p {font-size:15px;line-height:1.55;}.ss-cta {font-size:13px;margin-top:18px;}
 .ss-intelligence-report {width:84%;}
 .ss-art.ss-people {width:min(87%,calc((100cqh - 54px)*1.23));}
 .ss-art.ss-people-interim {width:min(87%,calc((100cqh - 54px)*1.3));}
 .ss-art.ss-people-ai {width:min(87%,calc((100cqh - 82px)*1.9));}
 .ss-people-ai .ss-advisory-photo {aspect-ratio:1.9;}
 .ss-photo-frame,.ss-advisory-composition {border-width:3px;border-radius:10px;}
 .ss-people-search,.ss-people-interim {padding-bottom:19px;}
 .ss-search-note {padding:12px 13px;gap:10px;border-radius:9px;}
 .ss-search-note>img {width:21px;height:24px;}.ss-search-note strong {font-size:19px;}.ss-search-note span {font-size:9px;margin-top:4px;}
 .ss-advisory-bridge {gap:10px;min-height:48px;padding:4px;font-size:9.5px;}
 .ss-advisory-bridge>img {width:20px;height:23px;padding:8px;border-radius:9px;}
 .ss-advisory-bridge>span:first-child::after {width:10px;right:-10px;}.ss-advisory-bridge>span:last-child::before {width:10px;left:-10px;}
 .ss-advisory-note {display:none;}
 .ss-coverage {padding:13px 7px;border-radius:9px;}.ss-coverage span {font-size:10px;gap:5px;}.ss-coverage span::before {width:5px;height:5px;}
}
@media (prefers-reduced-motion:reduce) {
 .solutions-showcase *, .solutions-showcase *::before {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
 .ss-scene {filter:none;transform:none;}.ss-item[data-active="true"] .ss-progress>span {transform:scaleY(1)!important;}
}

/* Three complementary layers: community, experience and partners. */
.nhl-foundation {padding:88px 0 94px;background:#fff;color:#0c2742;scroll-margin-top:100px;font-family:"Hanken Grotesk",sans-serif;}
.nhl-foundation h2 {max-width:720px;margin:0 auto 28px;text-align:center;font:500 clamp(38px,4vw,56px)/1.1 "Newsreader",Georgia,serif;letter-spacing:-.035em;}
.nhl-foundation h2 em {color:#1668d6;font-weight:inherit;white-space:nowrap;}
.nf-layout {display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(32px,6vw,88px);max-width:1100px;margin:auto;}
.nf-visual {position:relative;min-width:0;background:radial-gradient(ellipse at 48% 58%,#f0f6fb 0%,#fff0 66%);}
.nf-stack {display:block;width:100%;height:auto;overflow:visible;}
.nf-layer {animation:nf-float 7s ease-in-out infinite;animation-play-state:paused;}
.nf-layer-experience {animation-delay:-2.3s;}.nf-layer-partners {animation-delay:-4.6s;}
/* Actual brand assets follow the globe's curved latitudes, receding toward its base. */
.nf-partner-card rect {fill:#fff;stroke:#c3d9e9;stroke-width:.7;}
.nf-partner-card image {opacity:1;}
.nf-partner-core {isolation:isolate;}
.nhl-foundation[data-motion="running"] .nf-layer {animation-play-state:running;}
@keyframes nf-float {0%,100% {transform:translateY(0);}50% {transform:translateY(-8px);}}
.nf-copy {display:flex;flex-direction:column;gap:49px;padding:20px 0;}
.nf-copy-item {display:flex;align-items:flex-start;gap:20px;}
.nf-copy-mark {flex:none;margin-top:7px;color:#6289aa;font-size:11px;letter-spacing:.08em;line-height:1.5;}
.nf-copy h3 {margin:0 0 12px;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.025em;}
.nf-copy p {max-width:365px;margin:0;font-size:17px;line-height:1.65;color:#576b7c;}
@media(max-width:800px) {
 .nhl-foundation {padding:64px 0 70px;}.nhl-foundation h2 {max-width:480px;margin-bottom:12px;}
 .nf-layout {grid-template-columns:1fr;gap:16px;}.nf-visual {width:min(100%,440px);margin:auto;}.nf-copy {max-width:480px;margin:auto;gap:30px;}
 .nf-copy h3 {font-size:22px;margin-bottom:8px;}.nf-copy p {font-size:16px;max-width:none;}.nf-copy-item {gap:17px;}
}
@media(prefers-reduced-motion:reduce) {.nf-layer {animation:none;}}

/* Short viewports: the open panel is height-capped by the card, so tighten the
   text and the call to action rather than let either be clipped. */
@media (min-width:801px) and (max-height:880px) {
 .ss-panel p {font-size:16px;line-height:1.5;}
 .ss-cta {margin:16px 0 10px;}
}
/* Laptop viewports in the 680 to 800px band (a 13" Air in Chrome with a bookmarks bar,
   a 1280x800 display): the card is 570 to 690px tall, so the closed rows, the open row's
   text and the call to action all give up a little height. */
@media (min-width:801px) and (max-height:800px) {
 .ss-showcase.is-ready .ss-item:not([data-active="true"]) .ss-trigger {min-height:50px;padding:12px 0;}
 .ss-showcase.is-ready .ss-item[data-active="true"] .ss-trigger {min-height:60px;padding:12px 0;}
 .ss-panels {gap:8px;}
 .ss-trigger {font-size:18px;}
 .ss-panel p {max-width:none;font-size:15px;line-height:1.45;}
 .ss-cta {margin:12px 0 8px;}
 .ss-scene {inset:32px 14px 46px;gap:12px;}
}
@media (min-width:801px) and (max-height:720px) {
 .ss-showcase.is-ready .ss-item:not([data-active="true"]) .ss-trigger {padding:10px 0;}
 .ss-panels {gap:6px;}
 .ss-panel p {font-size:14px;line-height:1.42;}
 .ss-cta {margin:8px 0 6px;}
}
@media (max-width:800px) {
 .ss-cta {margin:16px 0 10px;}
 .ss-panel p {line-height:1.5;}
}

/* ---------------------------------------------------------------------------
   Photograph-led scenes fill the stage (Shawn, 2026-09-21: "make the images
   fill the left side again"). The framed-photo-on-a-plinth treatment gave the
   picture about half the stage's area; the photograph is now the stage itself
   and the editorial overlays sit on top of it. Last block in the file on
   purpose: it has to win over the width and height breakpoints above, which
   size the old framed art.

   Every scene is photograph-led since 2026-09-21: NHL Intelligence used to be
   the one document mock on the light stage, and now carries the same
   future-ready-leadership photograph the homepage tile uses.
   --------------------------------------------------------------------------- */
.ss-scene-photo {inset:0;gap:0;justify-content:flex-end;}
.ss-scene-photo .ss-art {position:absolute;inset:0;width:auto;max-width:none;padding:0;filter:none;}
.ss-scene-photo .ss-art::before {content:none;}
.ss-scene-photo .ss-photo-frame,
.ss-scene-photo .ss-advisory-composition {position:absolute;inset:0;border:0;border-radius:0;background:none;box-shadow:none;aspect-ratio:auto;}
.ss-scene-photo .ss-photo-frame>img,
.ss-scene-photo .ss-advisory-photo {width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
/* A crop this tall needs its own focal point per photograph. Only the X anchor
   does anything here: every source is wider than the widest stage shape, which
   is 1.35 at the widest breakpoint and 0.88 on a laptop, so `cover` always trims
   the sides and never the top. The Y value is left at 50% so it does not read as
   a setting that works; to change the vertical framing, crop the source file.
   Search sits at 78% to centre the three walkers, who sit right of the frame's
   middle in the source (Shawn, 09-21: "center this photo"). Advisory sits at 85%
   to keep the network-diagram screen in shot at every width (Shawn, 09-21:
   "ensure the whiteboard with all the techy stuff is always showing"); further
   right shows more screen but drops two of the four people. */
.ss-scene-photo .ss-people-search .ss-photo-frame>img {object-position:78% 50%;}
.ss-scene-photo .ss-people-succession .ss-photo-frame>img {object-position:50% 50%;}
.ss-scene-photo .ss-people-interim .ss-photo-frame>img {object-position:50% 50%;}
.ss-scene-photo .ss-people-intel .ss-photo-frame>img {object-position:50% 50%;}
.ss-scene-photo .ss-advisory-photo {object-position:85% 50%;}

/* The caption rides the photograph, so it needs a scrim to stay legible. The
   scrim belongs to the photo element itself, not to the scene or the art: the
   reveal animation leaves an identity transform on .ss-advisory-composition,
   which makes it a stacking context, so a scrim any higher up paints over the
   white cards instead of under them. */
.ss-scene-photo .ss-photo-frame::after,
.ss-scene-photo .ss-advisory-composition::after {content:"";position:absolute;inset:auto 0 0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(to top,#08203ac4 0%,#08203a7a 42%,#08203a00 100%);}
.ss-scene-photo figcaption {position:absolute;z-index:3;right:0;bottom:14px;left:0;color:#fff;text-shadow:0 1px 14px #08203a80;}

/* The white overlay cards keep their styling and lift clear of the caption. */
.ss-scene-photo .ss-search-note,
.ss-scene-photo .ss-coverage,
.ss-scene-photo .ss-advisory-bridge {position:absolute;z-index:2;right:20px;bottom:52px;left:20px;}
.ss-scene-photo .ss-advisory-bridge {min-height:0;padding:18px 14px;border:1px solid #d6e3ed;border-radius:12px;box-shadow:0 12px 28px -18px #113b6752;}
.ss-scene-photo .ss-advisory-note {position:absolute;z-index:2;top:18px;right:0;left:0;margin:0 auto;}

/* Corner marks belong to the light stage, not to a photograph. */
.ss-stage:has(.ss-scene-photo[data-active="true"]) .ss-corner {opacity:0;}
.ss-corner {transition:opacity 400ms ease;}

@media (max-width:800px) {
 .ss-scene-photo .ss-search-note,
 .ss-scene-photo .ss-coverage,
 .ss-scene-photo .ss-advisory-bridge {right:12px;bottom:44px;left:12px;}
 .ss-scene-photo figcaption {bottom:12px;}
}
@media (max-width:440px) {
 .ss-scene-photo .ss-search-note,
 .ss-scene-photo .ss-coverage,
 .ss-scene-photo .ss-advisory-bridge {right:9px;bottom:38px;left:9px;}
 .ss-scene-photo .ss-advisory-note {top:12px;}
}