/* Heroes: framework-only fixes (heroes.css is generated, never edit it). */

/* Heights (owner, 2026-10-21): no fixed heights unless Full. Normal = content plus the section padding (--st-space, below);
   only data-height="full" gets min-height 100svh. The generated looks size from --hero-h, so it is 0 unless Full. */
body .sb-heroes.sb-hero .hero{--hero-h:0px}
body .sb-heroes.sb-hero .hero[data-height="full"]{--hero-h:var(--ct-hero-h, 100svh);min-height:var(--hero-h)}

/* Section padding (Site Options), same breakpoints as page titles and edge sections. The header's room (0 for a normal
   header, the header height when it floats over the hero) is added to the TOP of the content box only; the band's own
   background still runs up behind the header. The library's demo header height --hdr becomes that room. */
body .sb-heroes.sb-hero{--st-space:var(--section-padding, 120px);--hdr:var(--sb-hdr-room, 0px);--hp-top:calc(var(--sb-hdr-room, 0px) + var(--sb-hero-pad))}
@media only screen and (max-width:1200px){body .sb-heroes.sb-hero{--st-space:80px}}
@media only screen and (max-width:501px) and (orientation:portrait){body .sb-heroes.sb-hero{--st-space:40px}}

/* Content boxes: top = header room + section padding, bottom = section padding. */
body .sb-heroes :is(.h01,.h02,.h06,.h07,.h09,.h15,.h17,.h18,.h19,.h21,.h22) .body{padding-top:var(--hp-top);padding-bottom:var(--sb-hero-pad)}
body .sb-heroes .h06 .foot{padding-bottom:var(--sb-hero-pad)}
body .sb-heroes :is(.h03 .top,.h12 .top,.h04 .body,.h10 .grid,.h20 .g,.h14 .g){padding-top:var(--hp-top)}
body .sb-heroes :is(.h20 .g,.h14 .g){padding-bottom:var(--sb-hero-pad)}
body .sb-heroes :is(.h11 .copy,.h08 .copy,.h16 .copy,.h16 h1){padding-top:var(--hp-top);padding-bottom:var(--sb-hero-pad)}
@media (max-width:767px){
	body .sb-heroes .h08 .copy{padding-top:var(--sb-hero-pad)} /* the photo comes first on the phone */
	body .sb-heroes .h16 h1{padding-bottom:20px}
}
body .sb-heroes .h05 .stage{inset:0;padding-top:clamp(16px,2vw,40px)}

/* Full: the inner boxes that carried calc(--hero-h - header) fill the screen (the room is padding inside them). */
body .sb-heroes :is(.h08 .split,.h14 .g,.h16 .g){min-height:var(--hero-h)}
body .sb-heroes .h09{min-height:var(--hero-h)}
body .sb-heroes .h15:is([data-height="large"],[data-height="full"]){min-height:var(--hero-h)}

/* Photo boxes that were fixed px/vh heights keep the design's proportion (measured at 1440 and 390). */
body .sb-heroes .h03 .steps .photo{height:auto}
body .sb-heroes .h03 .steps .photo:nth-child(1){aspect-ratio:.96}
body .sb-heroes .h03 .steps .photo:nth-child(2){aspect-ratio:1.06}
body .sb-heroes .h03 .steps .photo:nth-child(3){aspect-ratio:1.22}
body .sb-heroes .h05:not([data-height="full"]){aspect-ratio:1.95}
body .sb-heroes .h08:not([data-height="full"]) .media{aspect-ratio:1.03}
body .sb-heroes .h10 .poster{min-height:0;aspect-ratio:.81}
body .sb-heroes .h11 .f1 .photo{height:auto;min-height:0;aspect-ratio:1.11}
body .sb-heroes .h11 .f2 .photo{height:auto;aspect-ratio:2.18}
body .sb-heroes .h11 .f3 .photo{height:auto;aspect-ratio:1.71}
body .sb-heroes .h13:not([data-height="full"]) .pic{height:auto;aspect-ratio:3.14}
body .sb-heroes .h16:not([data-height="full"]) .media{aspect-ratio:.95}
body .sb-heroes .h20 .mosaic{height:auto;aspect-ratio:1.03}
@media (max-width:900px){body .sb-heroes .h10 .poster{aspect-ratio:.92}}
@media (max-width:767px){
	body .sb-heroes .h03 .steps .photo:nth-child(1){aspect-ratio:1.35}
	body .sb-heroes .h03 .steps .photo:nth-child(n+2){aspect-ratio:.94}
	body .sb-heroes .h05:not([data-height="full"]){aspect-ratio:auto}
	body .sb-heroes .h05 .stage{inset:auto}
	body .sb-heroes .h05:not([data-height="full"]) .stage{height:auto;aspect-ratio:1.03}
	body .sb-heroes .h08:not([data-height="full"]) .media,body .sb-heroes .h16:not([data-height="full"]) .media{aspect-ratio:var(--pb-ar-landscape)}
	body .sb-heroes .h11 .f1 .photo{aspect-ratio:1.3}
	body .sb-heroes .h11 .f2 .photo{aspect-ratio:1.82}
	body .sb-heroes .h11 .f3 .photo{aspect-ratio:.85}
	body .sb-heroes .h13:not([data-height="full"]) .pic{aspect-ratio:1.15}
	body .sb-heroes .h20 .mosaic{aspect-ratio:.83}
}

/* 01, 15: the generated CSS lost the "large/full only" condition on min-height; Auto height means content plus padding. */
body .sb-heroes .h01[data-height="auto"]{min-height:0}
body .sb-heroes .h15[data-height="auto"] .body{min-height:0}

body .sb-heroes .h05 h1{color:var(--pb-primary) !important}
/* The arrow glyph is not in the Branding font's latin subset; the library page falls back to the system UI font (the QA stack falls back to Arial), so match it. */
body .sb-heroes .tlink::after{font-family:system-ui, sans-serif}

/* Width rule (owner): every look has ONE content box, a .wrap whose width and sides come from base.css only (no width,
   max-width or padding-inline on it here). Backgrounds stay outside it. Split halves pad with --sb-side / --sb-split-pad. */
/* 06, 07, 17, 19: the box wraps what used to be sibling rows (title, rule, foot / caption / facts bar / tabs). */
body .sb-heroes :is(.h06,.h07,.h17,.h19) .in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
body .sb-heroes .h17 .bar{margin-inline:0}
body .sb-heroes .h19 .tabs button:first-child{padding-left:clamp(18px,2.4vw,36px)}
body .sb-heroes .h19 .tabs button:first-child[aria-selected="true"]::before{left:clamp(18px,2.4vw,36px)}
/* 05: the box covers the stage under the header; the corners pin to its two ends. */
body .sb-heroes .h05 .in{position:absolute;inset:var(--sb-hdr-room, 0px) 0 0}
body .sb-heroes .h05 h1{padding-inline:0}
body .sb-heroes .h05 .l{left:0}
body .sb-heroes .h05 .r{right:0}
@media (max-width:767px){
	body .sb-heroes .h05 .in{position:static}
	body .sb-heroes .h05[data-height="full"] .in{margin-block:auto}
	body .sb-heroes .h05 .corner{padding-inline:0}
}
/* 08, 16 (split): the text half is the box. 08 pads its screen side with --sb-side and the photo side with --sb-split-pad. */
body .sb-heroes .h08 .copy{padding-left:var(--sb-side);padding-right:var(--sb-split-pad)}
@media (max-width:767px){body .sb-heroes .h08 .copy{padding-inline:var(--sb-side)}}
/* 09: text and strip sit in the box inside the panel; the panel and photo run wider. */
/* the photo panel is a background (inset like the design); the box is a sibling over it. */
body .sb-heroes .h09{padding:0;display:flex;flex-direction:column}
body .sb-heroes .h09 .panel{position:absolute;inset:0 clamp(12px,1.6vw,24px) clamp(12px,1.6vw,24px);min-height:0}
body .sb-heroes .h09 .in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding-bottom:clamp(12px,1.6vw,24px)}
body .sb-heroes .h09 .in :is(.body,.meta){padding-inline:0}
/* 11: the ruled grid is the box; its first cell starts at the box edge (no outer left rule). */
body .sb-heroes .h11 .g{border-left:0}
body .sb-heroes .h11 .copy{padding-left:0}
/* 13: the caption card is the box's content, starting at its left edge. */
body .sb-heroes .h13 .card{margin-left:0;width:min(720px,100%)}
@media (max-width:767px){body .sb-heroes .h13 .card{margin-inline:0;width:auto}}
/* 16: rail, photo and words all sit inside the box. */
body .sb-heroes .h16 .g{grid-template-columns:auto minmax(0,1.35fr) minmax(0,1fr)}
body .sb-heroes .h16:not([data-height="full"]) .media{aspect-ratio:auto} /* the photo fills the row the rail title sets (a ratio only worked while the column was oversized) */
body .sb-heroes .h16 h1{padding-right:0}
body .sb-heroes .h16 .copy{padding-right:0}
@media (max-width:767px){body .sb-heroes .h16 .g{grid-template-columns:minmax(0,1fr)}body .sb-heroes .h16:not([data-height="full"]) .media{aspect-ratio:var(--pb-ar-landscape)}body .sb-heroes .h16 h1{padding-inline:0}body .sb-heroes .h16 .copy{padding-inline:0}}


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-heroes .h01 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h03 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h04 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h05 h1 { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-heroes .h06 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h07 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h08 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h09 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h10 .date { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-heroes .h10 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h11 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h11 .cell b { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-heroes .h12 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h13 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h14 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h15 h1 { font-size: var(--fs-quotes) !important; }
body .sb-heroes .h16 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h16 .copy .lead { font-size: var(--fs-lead) !important; }
body .sb-heroes .h17 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h18 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h18 .track span { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-heroes .h19 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h22 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h20 h1 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)) !important; }
body .sb-heroes .h15 .eyebrow { font-size: var(--fs-titles-small) !important; }
body .sb-heroes .h15 .who b { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-heroes .h02 h1 { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-heroes .h21 h1 { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }

/* The library look is the only height box. The framework wrapper must not flex
   it inside another padded screen. Above-header looks have no inner header room. */
body header.ct2-hero:has(> .sb-heroes) { height: auto; display: block; }
body header.ct2-hero.is-below-header > .sb-heroes { --sb-hdr-room: 0px; }
body .sb-heroes.sb-hh-full > .hero { min-height: var(--ct-hero-h, 100svh); }
/* Split copy distributes spare height instead of requiring two fixed padding
   floors as well as its title, buttons, and facts. Normal spacing is unchanged. */
body .sb-heroes.sb-hh-full .h08 .copy {
 padding-top: var(--sb-hdr-room, 0px); padding-bottom: 0;
}
/* The narrow tablet corners need 12px less button padding to keep their labels
   on one line. The pinned CTA also honors the desktop bottom clearance. */
body .sb-heroes :is(.h05,.h16) .btn { white-space: nowrap; }
body .sb-heroes .h05 .corner { bottom: max(60px, clamp(32px, 4vw, 64px)); }
@media (min-width: 768px) and (max-width: 1000px) {
 body .sb-heroes :is(.h05,.h16) .btn { padding-inline: 24px; }
}

/* 3.6.10 hero proof (HER-10/11/16). Gated: older looks keep their render. */
/* Dark panels (11, 16, 22): the accent word and text links were Secondary on the dark panel and vanished. */
body:not(.cc-look-pre-3-6-10) .sb-heroes :is(.h11, .h16, .h22) .acc { color: inherit; font-style: italic; }
body:not(.cc-look-pre-3-6-10) .sb-heroes :is(.h11, .h16) .tlink { color: var(--pb-on-dark); }
/* 10: built for a cut-out portrait; a normal photo showed as a strip under an empty brand box. The photo fills the poster. */
body:not(.cc-look-pre-3-6-10) .sb-heroes .h10 .poster { overflow: hidden; }
body:not(.cc-look-pre-3-6-10) .sb-heroes .h10 .poster img { inset: 0; left: 0; transform: none; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* 16: the side rail title carried the header room and section padding, so the hero ran past the first screen. */
@media (min-width: 768px) {
	body:not(.cc-look-pre-3-6-10) .sb-heroes .h16 h1 { padding-top: calc(var(--sb-hdr-room, 0px) + 24px); padding-bottom: 24px; font-size: min(clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)), 7.5vh) !important; text-align: start; }
}
/* 05 on phones: the title sat under the header logo; the stage starts below the header room. */
@media (max-width: 767px) {
	body:not(.cc-look-pre-3-6-10) .sb-heroes .h05 .stage { padding-top: calc(var(--sb-hdr-room, 0px) + 16px); }
	body:not(.cc-look-pre-3-6-10) .sb-heroes .h05 h1 { position: relative; z-index: 3; }
}