/* Service context follows each client's existing identity and type system. */
[data-brand-page] .portfolio-scope {
  --scope-accent: var(--accent, #b8e7c2);
  --scope-line: var(--line, #ffffff2b);
  --scope-display: var(--serif, 'Manrope', Arial, sans-serif);
  --scope-body: var(--sans, 'Manrope', Arial, sans-serif);
  margin: 0;
  padding: 44px 0 52px;
  border-block: 1px solid var(--scope-line);
  color: inherit;
  scroll-margin-top: 24px;
}
[data-brand-page="mousai"] .portfolio-scope { --scope-accent:#ff1a1a; --scope-line:var(--m-line); --scope-display:var(--m-serif); --scope-body:var(--m-sans); }
[data-brand-page="penny-z"] .portfolio-scope { --scope-accent:var(--penny-pink); --scope-line:#527967; --scope-display:'Manrope',Arial,sans-serif; }
[data-brand-page="sunday-blitz"] .portfolio-scope { --scope-accent:var(--red-text); --scope-display:'Blitz Display',Impact,sans-serif; }
[data-brand-page] .scope-inner { width:min(1280px,calc(100% - 96px)); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.47fr); gap:28px 64px; align-items:start; }
[data-brand-page] .scope-header { grid-column:1; min-width:0; }
[data-brand-page] .scope-kicker { margin:0 0 14px; color:var(--scope-accent); font:600 10px/1.6 var(--scope-body); letter-spacing:.13em; text-transform:uppercase; }
[data-brand-page] .portfolio-scope h2 { margin:0 0 21px; max-width:21ch; color:inherit; font:500 clamp(30px,3.3vw,47px)/1.12 var(--scope-display); letter-spacing:-.035em; text-wrap:balance; }
[data-brand-page] .scope-intro { margin:0; max-width:64ch; color:inherit; font:400 14px/1.85 var(--scope-body); }
[data-brand-page] .scope-perspective { margin:15px 0 0; max-width:65ch; color:inherit; opacity:.78; font:400 12px/1.85 var(--scope-body); }
[data-brand-page] .scope-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; margin-top:20px; min-height:44px; padding:6px 0; border-bottom:1px solid var(--scope-accent); color:inherit; font:600 11px/1.5 var(--scope-body); text-decoration:none; }
[data-brand-page] .scope-link:hover { color:var(--scope-accent); }
[data-brand-page] .scope-link>span { font-size:18px; }
[data-brand-page] .scope-visual { grid-column:2; grid-row:1 / span 2; justify-self:end; margin:0; width:100%; max-width:330px; min-width:0; }
[data-brand-page] .scope-film-button { display:block; padding:0; width:100%; border:1px solid var(--scope-line); background:transparent; color:inherit; cursor:pointer; text-align:left; border-radius:0; overflow:hidden; }
[data-brand-page] .scope-film-button>img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border:0; border-radius:0; }
[data-brand-page] .scope-watch-label { display:flex; justify-content:space-between; align-items:center; gap:15px; min-height:55px; padding:13px 15px; border-top:1px solid var(--scope-line); color:inherit; font:600 11px/1.5 var(--scope-body); }
[data-brand-page] .scope-watch-label>span { font-size:11px; color:var(--scope-accent); flex:none; }
[data-brand-page] .scope-film-button:hover { border-color:var(--scope-accent); }
[data-brand-page] .scope-visual>figcaption { position:static; margin:12px 0 0; padding:0; color:inherit; opacity:.7; font:400 10px/1.65 var(--scope-body); }
[data-brand-page] .scope-photo { max-width:400px; align-self:start; }
[data-brand-page] .scope-photo>img { display:block; width:100%; height:auto; border:1px solid var(--scope-line); }
[data-brand-page] .scope-services { grid-column:1; margin:0; display:grid; gap:0; min-width:0; }
[data-brand-page] .scope-services>div { display:grid; grid-template-columns:minmax(150px,.85fr) minmax(0,1.3fr); gap:24px; padding:18px 0; border-top:1px solid var(--scope-line); }
[data-brand-page] .scope-services dt { display:flex; align-items:baseline; gap:13px; margin:0; color:inherit; font:600 13px/1.6 var(--scope-body); }
[data-brand-page] .scope-services dt>span { color:var(--scope-accent); font-size:9px; flex:none; font-variant-numeric:tabular-nums; }
[data-brand-page] .scope-services dd { margin:0; color:inherit; opacity:.8; font:400 12px/1.8 var(--scope-body); }
[data-brand-page] .scope-compact .scope-inner { grid-template-columns:1fr 1fr; align-items:start; }
[data-brand-page] .scope-compact .scope-services { grid-column:2; }
[data-brand-page] .scope-compact .scope-services>div { grid-template-columns:1fr; gap:8px; }
[data-brand-page] .scope-compact h2 { font-size:clamp(28px,3vw,40px); }
[data-brand-page] .scope-nav-link { white-space:nowrap; }
/* Mousai's only featured story film uses its original, unobstructed footage. */
.m-world .scope-hero-film { margin:0; padding:0; overflow:visible; border:0; background:transparent; }
.m-world .scope-hero-film>button { display:block; width:100%; padding:0; border:0; border-radius:0; background:#090909; color:inherit; cursor:pointer; }
.m-world .scope-hero-film>button>img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:0; }
.m-world .scope-hero-film>figcaption { display:flex; justify-content:space-between; align-items:center; gap:15px; position:static; margin:0; padding:13px 0; background:transparent; color:var(--m-ink); font:500 10px/1.5 var(--m-sans); }
.m-world .scope-hero-film>figcaption span { color:#ff1a1a; }
@media(max-width:1050px) {
  [data-brand-page] .scope-inner { width:calc(100% - 56px); gap:28px 35px; grid-template-columns:minmax(0,1fr) minmax(210px,.48fr); }
  [data-brand-page] .scope-services>div { grid-template-columns:1fr; gap:8px; padding-block:16px; }
  [data-brand-page] .scope-visual { max-width:285px; }
}
@media(max-width:760px) {
  [data-brand-page] .portfolio-scope { padding-block:30px 35px; }
  [data-brand-page] .scope-inner,[data-brand-page] .scope-compact .scope-inner { width:calc(100% - 38px); grid-template-columns:1fr; gap:24px; }
  [data-brand-page] .scope-header,[data-brand-page] .scope-services,[data-brand-page] .scope-compact .scope-services { grid-column:1; }
  [data-brand-page] .portfolio-scope h2 { font-size:clamp(29px,7.7vw,40px); max-width:24ch; margin-bottom:17px; }
  [data-brand-page] .scope-intro { font-size:13px; line-height:1.8; }
  [data-brand-page] .scope-perspective { font-size:12px; }
  [data-brand-page] .scope-visual { grid-column:1; grid-row:auto; justify-self:start; width:min(100%,260px); }
  [data-brand-page] .scope-photo { width:min(100%,400px); }
  [data-brand-page] .scope-kicker { font-size:9px; letter-spacing:.1em; }
  [data-brand-page] .scope-services>div { padding-block:16px; }
  [data-brand-page] .scope-services dt { font-size:13px; }
  [data-brand-page] .scope-services dd { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { [data-brand-page] .portfolio-scope * { scroll-behavior:auto!important; transition:none!important; } }

/* Straight, independent 9:16 stories replace decorative hero collages. */
[data-brand-page] .portfolio-hero-stories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; width:100%; min-width:0; align-items:start; perspective:none; }
[data-brand-page] .portfolio-hero-story { display:block; position:static; min-width:0; width:100%; padding:0; margin:0; border:0; background:transparent; border-radius:0; transform:none!important; box-shadow:none; }
[data-brand-page] .portfolio-hero-story>img,[data-brand-page] .portfolio-story-film { display:block; position:static; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; object-position:center; padding:0; margin:0; border:0; border-radius:0; transform:none!important; background:#111; }
[data-brand-page] .portfolio-hero-story>figcaption { display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:static; padding:13px 0 0; margin:0; font:500 11px/1.5 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); color:inherit; background:none; }
[data-brand-page] .portfolio-hero-story>figcaption small { font:400 9px/1.5 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); opacity:.65; flex:none; }
[data-brand-page] .portfolio-hero-stories.is-single { grid-template-columns:1fr; width:min(100%,340px); justify-self:center; }
.m-world .m-hero { grid-template-columns:.9fr 1.1fr; gap:45px; padding-block:35px 42px; min-height:unset; }
.casa-expanded .casa-hero { min-height:unset; padding-block:35px 42px; gap:40px; }
.world-skybox .world-hero,.world-h-wellness .world-hero { min-height:unset; padding-block:35px 42px; }
.penny-world .penny-overview-grid { gap:45px; }
.penny-world .penny-index-strip { margin-top:26px; }
.blitz-world .blitz-hero { grid-template-columns:1fr 1fr; padding-block:35px 42px; }
/* Real website views support the scope without introducing invented results. */
[data-brand-page] .scope-priority .scope-inner { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:27px 60px; }
[data-brand-page] .scope-priority .scope-services { grid-column:2; grid-row:1 / span 2; }
[data-brand-page] .scope-priority .scope-services>div { grid-template-columns:1fr; gap:8px; }
[data-brand-page] .scope-website { grid-column:1; grid-row:2; max-width:440px; justify-self:start; width:100%; }
[data-brand-page] .scope-website>a { display:block; border:1px solid var(--scope-line); border-radius:5px; overflow:hidden; color:inherit; text-decoration:none; }
[data-brand-page] .scope-browser-label { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:9px 13px; border-bottom:1px solid var(--scope-line); font:500 9px/1.5 var(--scope-body); overflow-wrap:anywhere; }
[data-brand-page] .scope-website img { width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; object-position:top; display:block; }
[data-brand-page] .scope-website>a:hover { border-color:var(--scope-accent); }
@media(max-width:1050px) {
  .m-world .m-hero,.casa-expanded .casa-hero,.penny-world .penny-overview-grid { gap:28px; }
  [data-brand-page] .scope-priority .scope-inner { gap:26px 35px; }
  [data-brand-page] .portfolio-hero-story>figcaption { flex-direction:column; gap:3px; }
}
@media(max-width:760px) {
  .m-world .m-hero,.casa-expanded .casa-hero,.world-skybox .world-hero,.world-h-wellness .world-hero,.blitz-world .blitz-hero,.penny-world .penny-overview-grid { grid-template-columns:1fr; gap:27px; }
  [data-brand-page] .portfolio-hero-stories { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(70vw,270px); gap:14px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding-bottom:12px; scrollbar-width:thin; }
  [data-brand-page] .portfolio-hero-story { scroll-snap-align:start; }
  [data-brand-page] .portfolio-hero-stories.is-single { grid-auto-columns:100%; width:min(100%,285px); justify-self:start; overflow:visible; }
  [data-brand-page] .scope-priority .scope-inner { grid-template-columns:1fr; gap:24px; }
  [data-brand-page] .scope-priority .scope-services { grid-column:1; grid-row:auto; }
  [data-brand-page] .scope-website { grid-column:1; grid-row:auto; width:100%; max-width:440px; }
  [data-brand-page] .portfolio-hero-story>figcaption { flex-direction:row; gap:10px; }
}

/* Enhanced playback controls sit in their own row below the footage. */
[data-brand-page] .portfolio-story-controls { display:grid; grid-template-columns:auto 1fr auto; gap:10px 12px; align-items:center; padding:12px 0 0; color:inherit; }
[data-brand-page] .portfolio-story-toggle { grid-column:1; padding:8px 15px; min-height:44px; border:1px solid currentColor; border-radius:0; background:transparent; color:inherit; font:600 11px/1.4 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); cursor:pointer; }
[data-brand-page] .portfolio-story-toggle:hover { background:#ffffff0d; }
[data-brand-page] .portfolio-story-time { grid-column:2; font:400 9px/1.5 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); opacity:.7; font-variant-numeric:tabular-nums; }
[data-brand-page] .portfolio-story-open { grid-column:3; grid-row:1; font:500 9px/1.5 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); text-decoration:underline; text-underline-offset:3px; color:inherit; }
[data-brand-page] .portfolio-story-controls progress { grid-column:1/-1; grid-row:2; width:100%; height:2px; border:0; border-radius:0; appearance:none; background:#80808045; accent-color:currentColor; color:inherit; }
[data-brand-page] .portfolio-story-controls progress::-webkit-progress-bar { background:#80808045; }
[data-brand-page] .portfolio-story-controls progress::-webkit-progress-value { background:currentColor; }
[data-brand-page] .portfolio-story-controls progress::-moz-progress-bar { background:currentColor; }
[data-brand-page] .portfolio-story-status { grid-column:1/-1; margin:0; font:400 10px/1.6 var(--sans,var(--m-sans,'Manrope',Arial,sans-serif)); color:inherit; }
[data-brand-page] .portfolio-hero-story.has-story-controls>figcaption { padding-top:9px; }

/* Additional films keep the same quiet story format as each brand's opening. */
[data-brand-page] .portfolio-film-collection { display:grid; grid-template-columns:repeat(2,minmax(0,300px)); align-items:start; gap:28px; padding:0 0 20px; }
[data-brand-page] .portfolio-film-collection.is-single { grid-template-columns:minmax(0,300px); }
[data-brand-page] .portfolio-film-reference { display:block; }
[data-brand-page] .portfolio-film-reference>img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:0; }
[data-brand-page] .portfolio-photo-stories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
[data-brand-page] .portfolio-photo-stories>figure { margin:0; min-width:0; }
[data-brand-page] .portfolio-photo-stories>figure>img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:0; }
[data-brand-page] .portfolio-photo-stories figcaption { position:static; padding:14px 0 0; background:none; color:inherit; }
[data-brand-page] .portfolio-photo-stories h3 { margin:0 0 10px; font:500 24px/1.2 var(--serif,Georgia,serif); }
[data-brand-page] .portfolio-photo-stories p { margin:0; font:400 12px/1.8 var(--sans,Arial,sans-serif); opacity:.8; }
@media(max-width:760px) {
  [data-brand-page] .portfolio-film-collection,[data-brand-page] .portfolio-photo-stories { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(72vw,285px); gap:18px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; padding-bottom:18px; }
  [data-brand-page] .portfolio-film-collection.is-single { grid-template-columns:none; }
  [data-brand-page] .portfolio-photo-stories>figure { scroll-snap-align:start; }
}

/* Collection labels belong below media, including the older published archive. */
.m-world .m-image-number,.m-world .m-duration,.casa-expanded .casa-duration { display:none; }
.m-world .m-highlight-photo,.m-world .m-photo button { border-radius:0; box-shadow:none; }
.m-world .m-highlight-photo:hover,.m-world .m-photo button:hover { translate:none; }
.casa-expanded .casa-photo-image,.casa-expanded .casa-welcome-scenes img { border-radius:0; box-shadow:none; }
.world-h-wellness .world-gallery img,.world-skybox .world-gallery img,
.world-h-wellness .world-gallery button:nth-child(even) img,.world-skybox .world-gallery button:nth-child(even) img { border-radius:0; transform:none; box-shadow:none; }
.world-h-wellness .world-film { border-radius:0; box-shadow:none; }
.world-h-wellness .world-film .film-play { position:static; display:block; width:auto; height:auto; margin:14px 21px 0; border:0; border-radius:0; background:none; color:inherit; }
.world-h-wellness .world-film .film-play::after { content:' Play film'; }
.blitz-world .blitz-clip-image { aspect-ratio:auto; border:0; background:none; box-shadow:none; text-align:left; padding-bottom:4px; }
.blitz-world .blitz-clip-image>img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; }
.blitz-world .blitz-clip-image::after,.blitz-world .clip-topline { display:none; }
.blitz-world .clip-play { position:static; display:inline-block; width:auto; height:auto; margin-top:12px; border:0; border-radius:0; background:none; color:inherit; font-size:10px; }
.blitz-world .clip-play::after { content:' Play'; }
.blitz-world .clip-duration { position:static; float:right; margin-top:12px; font-size:9px; }
.blitz-world .episode-image { aspect-ratio:auto; border:0; background:none; box-shadow:none; text-align:left; padding-bottom:4px; }
.blitz-world .episode-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.blitz-world .episode-play,.blitz-world .blitz-episodes article:not(:first-child) .episode-play { position:static; display:inline-block; width:auto; height:auto; margin-top:10px; background:none; font-size:9px; }
.blitz-world .episode-format,.blitz-world .blitz-episodes article:not(:first-child) .episode-format { position:static; float:right; display:block; margin-top:10px; padding:0; background:none; font-size:7px; }
.penny-world .penny-online-art { padding:0; max-width:300px; }
.penny-world .penny-online-art::before { display:none; }
.penny-world .penny-online-art img { border-radius:0; transform:none; box-shadow:none; }
.penny-world .penny-court-feature>.portfolio-hero-story { max-width:300px; justify-self:center; }

/* A single film and its context form one compact composition. */
[data-brand-page] .portfolio-single-film:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,320px); align-items:center; gap:64px; max-width:940px; margin-inline:auto; }
[data-brand-page] .portfolio-single-film>.casa-panel-heading,
[data-brand-page] .portfolio-single-film>.world-panel-heading,
[data-brand-page] .portfolio-single-film>.penny-panel-heading { display:block; margin:0; }
[data-brand-page] .portfolio-single-film h2 { max-width:16ch; margin:0 0 20px; }
[data-brand-page] .portfolio-single-film>.casa-panel-heading>p,
[data-brand-page] .portfolio-single-film>.world-panel-heading>p,
[data-brand-page] .portfolio-single-film>.penny-panel-heading>p:not(.penny-kicker) { max-width:42ch; margin:18px 0 0; font-size:12px; line-height:1.85; }
[data-brand-page] .portfolio-single-film>.penny-panel-heading>.penny-kicker { margin:0 0 18px; }
[data-brand-page] .portfolio-single-film>.portfolio-film-collection { grid-template-columns:minmax(0,1fr); width:100%; max-width:320px; padding:0; justify-self:end; }
@media(max-width:760px) {
  [data-brand-page] .portfolio-single-film:not([hidden]) { grid-template-columns:1fr; gap:25px; }
  [data-brand-page] .portfolio-single-film>.portfolio-film-collection { display:block; width:min(100%,285px); max-width:285px; justify-self:start; overflow:visible; }
}