/* Studio Blocks base (CUSTOM-TEMPLATE.md D11). Loaded with any Studio Block, before the category files.
   Colors and fonts come from Branding; section padding and width from Site Options and the row's fields. */

/* Library tokens read Branding, so changing Branding restyles every Studio Block. Cards use --color-surface when
   header-styles.php finds Copy Color unreadable on Fourth (3.6.10), else Fourth. */
:root {
	--pb-bg: var(--color-third);
	--pb-surface: var(--color-surface, var(--color-fourth));
	--pb-text: var(--color-headings);
	--pb-muted: color-mix(in srgb, var(--pb-text) 72%, var(--pb-bg));
	--pb-primary: var(--color-main);
	--pb-border: color-mix(in srgb, var(--pb-text) 16%, transparent);
	--pb-on-dark: var(--color-fourth);
	--pb-heading-font: var(--font-titles);
	--pb-body-font: var(--font-body);
}

/* Every site runs through Branding fonts and colors (owner, 2026-10-21): a category's generated CSS defines the library
   demo's own tokens on body .sb-<cat>; this outranks it, so every look reads Branding. Never pin design hexes or fonts. */
body .sb-blk.sb-blk {
	--pb-bg: var(--color-content-bg, var(--color-third)); --pb-surface: var(--color-surface, var(--color-fourth)); --pb-text: var(--color-body, var(--color-headings));
	--pb-muted: var(--color-muted); --pb-primary: var(--color-main); --pb-secondary: var(--color-sec);
	--pb-border: var(--color-line); --pb-on-dark: var(--color-white);
	--pb-muted-on-dark: var(--color-muted-on-dark); --pb-rule-on-dark: var(--color-line-on-dark);
	--pb-heading-font: var(--font-titles); --pb-body-font: var(--font-body); --pb-display-font: var(--font-display); --pb-heading-weight: var(--weight-titles);
	--pb-tint: var(--color-fifth); --pb-ink: var(--color-dark); /* Branding Fifth (soft band/panel) and Dark (dark band) */
	/* One corner setting (Branding > Shape > Rounded Corners) for photos, cards, panels, tiles and fields; buttons use Button Style. */
	--st-radius: var(--radius-img); --st-photo-r: var(--st-radius);
	/* Roles from Branding (migration 051): colors, type details, shape, spacing, components, motion. */
	--pb-error: var(--color-error); --pb-star: var(--color-star); --pb-placeholder: var(--color-placeholder); --pb-eyebrow: var(--eyebrow-color);
	--pb-card-weight: var(--weight-card-titles); --pb-ui-weight: var(--weight-ui); --pb-num-weight: var(--weight-numerals);
	--st-quote-font: var(--quote-font); --st-quote-style: var(--quote-style); --st-numerals: var(--numerals);
	--st-lh-body: var(--lh-copy); --st-lh-head: var(--lh-heading); --st-lh-display: var(--lh-display); --st-lh-h3: var(--lh-h3);
	--st-track-head: var(--track-heading); --st-track-display: var(--track-display); --st-track-h3: var(--track-h3); --st-track-label: var(--eyebrow-tracking);
	--st-line-w: var(--line-width); --st-shadow-card: var(--shadow-card); --st-shadow-pop: var(--shadow-popover);
	--st-ratio-landscape: var(--pb-ar-landscape); --st-ratio-portrait: var(--pb-ar-portrait); /* Branding > Shape: Landscape / Portrait Images, as in Studio */ --st-img-zoom: var(--img-zoom); --st-icon: var(--icon-size);
	--st-gap-stack: var(--space-stack); --st-gap-grid: var(--space-grid); --st-card-pad: var(--space-card); --st-gutter: clamp(var(--space-gutter), 4vw, 48px);
	--st-narrow: var(--width-narrow); --st-measure: var(--measure);
	--st-btn-h: var(--btn-h); --st-btn-h-sm: var(--btn-h-sm); --st-btn-px: var(--btn-px); --st-btn-bw: var(--btn-bw); --st-input-h: var(--input-h);
	--st-focus-color: var(--focus-color); --st-focus-w: var(--focus-width); --st-focus-offset: var(--focus-offset);
	--st-dur: var(--dur); --st-dur-img: var(--dur-img); --st-ease: var(--ease);
	/* Type roles (Branding > Sizes). Only Hero, Huge, Titles and Medium scale on narrow screens.
	   The viewport steps reach the showcase Branding sizes at 1280px; all bounds read Branding. */
	--st-type-display: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge));
	--st-type-h1: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles));
	--st-type-h2: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles));
	--st-type-h3: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium));
	--st-type-lead: var(--fs-lead);
	--st-type-body: var(--fs-copy);
	--st-type-small: var(--fs-small);
	--st-type-quote: var(--fs-quotes);
	--st-type-label: var(--fs-small-titles-size);
}
/* Studio heroes use Hero Titles rather than the section title role. */
body .sb-blk.sb-blk.sb-heroes, body .sb-blk.sb-blk.sb-hero { --st-type-h1: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)); }
body .sb-blk.sb-blk.sb-dark { --pb-text: var(--pb-on-dark); --pb-muted: var(--color-muted-on-dark); --pb-border: var(--color-line-on-dark); }

/* The theme forces h1-h6 to the Branding heading color (!important); inside a block it follows the block's text. */
.sb-blk { --color-headings: currentColor; }

/* Dark section background (Main, Black, image, video): light text. */
.sb-blk.sb-dark {
	color: var(--pb-on-dark);
	--pb-text: var(--pb-on-dark);
	--pb-muted: var(--color-muted-on-dark);
	--pb-border: var(--color-line-on-dark);
}

/* Content looks sit inside the framework's section: no spacing, width or background of their own.
   Section Padding and Width (Site Options) frame them; the row's Background field paints them. */
.sb-blk:not(.sb-edge) { --st-space: 0px; }
body .sb-blk:not(.sb-edge),
body .sb-blk:not(.sb-edge) > :is(.sec, .section, .blk) { background: transparent !important; }
body .sb-blk:not(.sb-edge) > :is(.sec, .section, .blk) { padding-block: 0 !important; margin-block: 0 !important; }
body .sb-blk:not(.sb-edge) > :is(.sec, .section, .blk) > .wrap,
body .sb-blk:not(.sb-edge) > .wrap { max-width: none !important; padding-inline: 0 !important; }

/* Edge-to-edge looks (full-bleed photo or color bands) ignore the section frame, like Full Split:
   full width, no section padding; their inner spacing and content width follow Site Options. */
.ct-wrapper .section:has(> .div-within-section > .sb-edge),
.ct-wrapper .section:has(> .sb-edge) { max-width: none !important; width: 100% !important; padding: 0 !important; }
.sb-blk.sb-edge { --st-space: var(--section-padding); --wrap: var(--section-width); }
/* Content lines up with the framework's sections at every width (owner rule): the same box as .section in
   theme-screen.css, 82% up to the Site Options width, 80% on phones. Studio headers and footers stay full width. */
/* --sb-side is the gap left and right of that box, for looks without a .wrap (split bands: pad the text half with it). */
.sb-blk.sb-edge:not(.sb-chrome) { container-type: inline-size; --sb-frame: min(82%, var(--section-width)); --sb-side: calc((100cqw - min(82cqw, var(--section-width))) / 2); }
@media only screen and (max-width: 501px) and (orientation: portrait) { .sb-blk.sb-edge:not(.sb-chrome) { --sb-frame: 80%; --sb-side: 10cqw; } }
/* Studio heroes: Match Content Width off = the section width percentage (82%, phones 80%) without the Site Options px
   cap, so the content widens with the screen. Split heroes pad their text half with --sb-split-pad, the section padding. */
body .sb-blk.sb-hero.sb-hw-full { --sb-frame: 82%; --sb-side: 9cqw; }
@media only screen and (max-width: 501px) and (orientation: portrait) { body .sb-blk.sb-hero.sb-hw-full { --sb-frame: 80%; --sb-side: 10cqw; } }
.sb-blk.sb-hero { --sb-split-pad: var(--st-space); }
/* Hero Height (the framework's field): Smaller Spacing = the section padding, Normal Spacing = 220 / 160 / 80, Full =
   the screen. --sb-hero-pad is the top and bottom padding of the hero's content box; the header room is added on top. */
.sb-blk.sb-hero { --sb-hero-pad: var(--st-space); }
.sb-blk.sb-hero.sb-hh-normal { --sb-hero-pad: 220px; }
@media only screen and (max-width: 1200px) { .sb-blk.sb-hero.sb-hh-normal { --sb-hero-pad: 160px; } }
@media only screen and (max-width: 501px) and (orientation: portrait) { .sb-blk.sb-hero.sb-hh-normal { --sb-hero-pad: 80px; } }
body .sb-blk.sb-edge:not(.sb-chrome) .wrap { width: var(--sb-frame) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; box-sizing: border-box; }
@media only screen and (max-width: 1200px) { .sb-blk.sb-edge { --st-space: var(--section-padding-tablet, 80px); } }
@media only screen and (max-width: 501px) and (orientation: portrait) { .sb-blk.sb-edge { --st-space: var(--section-padding-phone, 40px); } }

/* Editors only: a look that isn't built yet. */
.sb-missing { padding: 24px; border: 1px dashed currentColor; font: 600 16px/1.4 system-ui, sans-serif; }

/* Studio heroes and page titles draw their own box: the framework hero wrapper adds no spacing or background. */
header.ct2-hero:has(> .sb-hero) { padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; }
header.ct2-hero:has(> .sb-hero) > .sb-hero { width: 100%; }
/* Header room (owner rule): a normal header sits above the hero, so nothing is added. A sticky, fixed or transparent
   header covers the hero's top: the hero's background runs up behind it and the look's content box adds this much top
   padding, so nothing sits behind the header. Measured by js/cc-header-offset.js (0 for a normal header). */
.sb-blk.sb-hero { --sb-hdr-room: var(--cc-hdr-overlap, 0px); }
/* Studio headers and footers: full width, no framework frame. */
.sb-chrome { width: 100%; }

/* The theme pads every <article> (26px 22px); inside a look an article has only the padding its own classes give it. */
body .sb-blk article { padding: 0; }

/* Heading accent (Branding > Heading Accent): an emphasized word inside a heading. */
body .sb-blk.sb-blk :is(h1, h2, h3, .t, .hd, .h) em { font-style: var(--accent-style); color: var(--accent-color); text-decoration: var(--accent-decoration); text-underline-offset: .12em; }
/* Small titles caps (Branding > Small Titles Caps): eyebrows and small labels. */
body .sb-blk.sb-blk :is(.eyebrow, .label) { text-transform: var(--small-titles-caps); letter-spacing: var(--small-titles-spacing); }

/* Buttons (Branding > Buttons): .btn is the fill button, .ghost the outline, .light / inside a dark band the button on dark.
   Corner shape, font, weight, size, caps and colors all come from Branding. */
body .sb-blk.sb-blk.sb-blk.sb-blk .btn { border-radius: var(--btn-radius); background: var(--btn-fill); color: var(--btn-color); border: var(--st-btn-bw) solid var(--btn-border); font-family: var(--font-buttons); font-weight: var(--weight-button); font-size: var(--fs-buttons) !important; text-transform: var(--btn-transform); letter-spacing: var(--btn-letter-spacing); min-height: var(--st-btn-h); padding-inline: var(--st-btn-px); filter: none; transition: background-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease), transform var(--st-dur) var(--st-ease), filter var(--st-dur) var(--st-ease); }
body .sb-blk.sb-blk.sb-blk.sb-blk .btn:hover { background: var(--btn-fill-hover); color: var(--btn-color-hover); border-color: var(--btn-border-hover); filter: var(--btn-hover-filter); transform: translateY(var(--btn-hover-lift)); }
body .sb-blk.sb-blk.sb-blk.sb-blk .btn.ghost { background: transparent; color: var(--btn-outline); border-color: var(--btn-outline); }
body .sb-blk.sb-blk.sb-blk.sb-blk .btn.ghost:hover { background: var(--btn-outline-hover); color: var(--btn-color); border-color: var(--btn-outline-hover); }
body .sb-blk.sb-blk.sb-blk.sb-blk :is(.btn.light, .btn.inv, :is(.sb-dark, .dark, .on-dark) .btn:not(.ghost)) { background: var(--btn-dark-bg); color: var(--btn-dark-text); border-color: var(--btn-dark-bg); }
body .sb-blk.sb-blk.sb-blk.sb-blk :is(.btn.light, .btn.inv, :is(.sb-dark, .dark, .on-dark) .btn:not(.ghost)):hover { background: var(--btn-dark-bg-hover); color: var(--btn-dark-text); border-color: var(--btn-dark-bg-hover); }
body .sb-blk.sb-blk.sb-blk.sb-blk :is(.sb-dark, .dark, .on-dark) .btn.ghost { background: transparent; color: var(--btn-dark-bg); border-color: var(--btn-dark-bg); }
body .sb-blk.sb-blk.sb-blk.sb-blk :is(.sb-dark, .dark, .on-dark) .btn.ghost:hover { background: var(--btn-dark-bg); color: var(--btn-dark-text); }

/* Text links with an arrow (Branding > Link Color); white on dark bands. */
body .sb-blk.sb-blk.sb-blk .tlink { color: var(--color-link); min-height: var(--st-btn-h-sm); font-weight: var(--pb-ui-weight); text-decoration-line: var(--link-underline); text-decoration-thickness: var(--link-width); text-underline-offset: var(--link-offset); }
body .sb-blk.sb-blk.sb-blk .tlink:hover { text-decoration-line: var(--link-underline-hover); }
body .sb-blk.sb-blk.sb-blk .tlink::after { content: var(--link-arrow); }
/* The Branding Link Arrow is the only arrow on text links: hide the one the markup prints (sb_a), so links never show two. */
body .sb-blk.sb-blk.sb-blk .tlink > span[aria-hidden="true"]:last-child { display: none; }
body .sb-blk.sb-blk.sb-blk .tlink:hover { color: var(--color-link-hover); }
body .sb-blk.sb-blk.sb-blk :is(.sb-dark, .dark, .on-dark) .tlink, body .sb-blk.sb-blk.sb-blk.sb-dark .tlink { color: var(--color-white); }
/* 3.6.10: text links follow the library's own dark containers and photo captions too (block proof 2026-10-31: CTA-01..16,
   EVT-03/07/10/19, GAL-17, IMG-13/20, MEM-16, SLD-17/20, TEM-19, VOL-13/15 printed Branding's dark link color on a dark
   band or photo). Main-color fills use the text color chosen for Main. Older looks keep the Branding link color. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk :is(.ink, .photo, .is-dark, .ov, .sb-ctas .c5-door, .sb-galleries .g17-cap,
	.sb-imagery .i20-bar, .sb-sliders-carousels .s17-c, .sb-team .t19 .txt, .sb-events .v7-photo,
	.sb-events .v19, .sb-events .v3-txt, .sb-careers .c16, .sb-blog .b18-i.hl) .tlink { color: var(--color-white); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk :is(.pri, .on-primary, .sb-sliders-carousels .s20-card:nth-child(even)) .tlink { color: var(--color-on-main); }

/* Forms inside looks (Branding > Form Settings): fonts, sizes, corners, colors; selects get a right chevron. */
body .sb-blk.sb-blk.sb-blk :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=range], [type=file], [type=hidden], [type=color], [type=image]), select, textarea):not(:is(.sf, .s01-f, .h-search, .m-search, .msearch, .pm-search, .m20 .sb, .p4-amt, .f8, .w19) *) {
	font-family: var(--form-input-font); font-size: var(--fs-copy); min-height: var(--st-input-h); background-color: var(--form-bg); border: 1px solid var(--form-border); border-radius: var(--form-radius); box-shadow: var(--form-shadow); color: var(--color-body);
}
body .sb-blk.sb-blk.sb-blk select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); }
body .sb-blk.sb-blk.sb-blk label:not(:has(input[type=radio], input[type=checkbox])), body .sb-blk.sb-blk.sb-blk legend { font-family: var(--form-label-font); font-size: var(--fs-small-titles-size); color: var(--form-label-color); }

/* Placeholder text and keyboard focus (Branding > Form Settings): one ring for every look, white on dark bands. */
body .sb-blk.sb-blk.sb-blk ::placeholder { color: var(--pb-placeholder); opacity: 1; }
body .sb-blk.sb-blk.sb-blk :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--st-focus-w) solid var(--st-focus-color); outline-offset: var(--st-focus-offset); }
body .sb-blk.sb-blk.sb-blk :is(.sb-dark, .dark, .on-dark) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible, body .sb-blk.sb-blk.sb-blk.sb-dark :is(a, button, summary, [tabindex]):focus-visible { outline-color: var(--color-white); }

/* Search bars and field shells (owner: a search bar matches the site's other fields, so no pills when the site has square fields).
   The shell takes the Form Settings corner; the field inside it keeps no border of its own. Fields inside a shell (.sf, header and
   menu search boxes) are left to the shell. Underline-only designs (SRC-01, modal search, forms .f8, wizard .w19) stay underline. */
body .sb-blk.sb-blk.sb-blk.sb-blk :is(.sf, .h-search, .m-search, .msearch, .pm-search) { border-radius: var(--form-radius); }
body .sb-blk.sb-blk.sb-blk.sb-blk .sf:not(.s14-bar .sf, .s18 .sf) { border-color: var(--form-border); background-color: var(--form-bg); box-shadow: var(--form-shadow); min-height: var(--st-input-h); }
body .sb-blk.sb-blk.sb-blk.sb-blk .s14-bar :is(.sf, .sel select) { border-radius: 0; }
body .sb-blk.sb-blk.sb-blk.sb-blk .s16-bar .sel select { border-radius: var(--form-radius) 0 0 var(--form-radius); }
body .sb-blk.sb-blk.sb-blk.sb-blk .s16-bar .sf { border-radius: 0 var(--form-radius) var(--form-radius) 0; }
/* A submit button inside the field shares the field's corner; a button beside it follows Button Style (.btn above). */
body .sb-blk.sb-blk.sb-blk.sb-blk .sf :is(button, .s01-b) { border-radius: var(--form-radius); }
body .sb-blk.sb-blk.sb-blk.sb-blk .s01-b { border-radius: var(--form-radius); }

/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-dividers-utility.sb-blk .dv-lk { font-size: var(--fs-buttons) !important; }
body .sb-dividers-utility.sb-blk .dv-btn { font-size: var(--fs-buttons) !important; }
body .sb-dividers-utility.sb-blk .d01-w { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-dividers-utility.sb-blk .d04-h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-dividers-utility.sb-blk .d06-w { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-dividers-utility.sb-blk .d07-t { font-size: var(--fs-small) !important; }
body .sb-dividers-utility.sb-blk .d09-k { font-size: var(--fs-small-titles-size) !important; }
body .sb-dividers-utility.sb-blk .d11-k { font-size: var(--fs-small-titles-size) !important; }
body .sb-dividers-utility.sb-blk .d12-h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-dividers-utility.sb-blk .d16-k { font-size: var(--fs-small-titles-size) !important; }
body .sb-dividers-utility.sb-blk .d16-d { font-size: var(--fs-copy) !important; }
body .sb-dividers-utility.sb-blk .d19-k { font-size: var(--fs-small-titles-size) !important; }
body .sb-dividers-utility.sb-blk .d19-h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }

/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-email-rows.sb-blk .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .lead { font-size: var(--fs-lead) !important; }
body .sb-email-rows.sb-blk .ef-btn { font-size: var(--fs-buttons); }
body .sb-email-rows.sb-blk .e01 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e04 .lead { font-size: var(--fs-lead) !important; }
body .sb-email-rows.sb-blk .e06 .mark { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-email-rows.sb-blk .e06 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e06 .sub { font-size: var(--fs-copy) !important; }
body .sb-email-rows.sb-blk .e07 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e10 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e11 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e13 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e13 .lead { font-size: var(--fs-lead) !important; }
body .sb-email-rows.sb-blk .e15 .eyebrow { font-size: var(--fs-small-titles-size) !important; }
body .sb-email-rows.sb-blk .e15 .title { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-email-rows.sb-blk .e16 .salute { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-email-rows.sb-blk .e16 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e17 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e17 .ct { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-email-rows.sb-blk .e17 .cn { font-size: var(--fs-small) !important; }
body .sb-email-rows.sb-blk .e20 .h { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-email-rows.sb-blk .e01 .sub { font-size: var(--fs-small) !important; }

/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-grids.sb-blk { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g-eyebrow { font-size: var(--fs-small-titles-size); }
body .sb-grids.sb-blk .g-meta { font-size: var(--fs-small); }
body .sb-grids.sb-blk .g-btn { font-size: var(--fs-buttons); }
body .sb-grids.sb-blk .g02-n { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)); }
body .sb-grids.sb-blk .g02-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g04-b .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g04-b .g-txt { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g05-n { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)); }
body .sb-grids.sb-blk .g06-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g06-c .g-txt { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g08-b .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g09-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g10-t { font-size: var(--fs-titles-small) !important; }
body .sb-grids.sb-blk .g11-b .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g12-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g13-s .g-h2 { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-grids.sb-blk .g13-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g14-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g15-b .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g15-b .g-txt { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g16-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g16-c .g-txt { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g17-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g17-c .g-txt { font-size: var(--fs-copy) !important; }
body .sb-grids.sb-blk .g18-t { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g19-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g20-rail { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-grids.sb-blk .g20-c .g-h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-grids.sb-blk .g02-head .g-btn,body .sb-grids.sb-blk .g19-head .g-btn { font-size: var(--fs-buttons); }
body .sb-grids.sb-blk .g07-c h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }

/* 3.6.10: headings follow Branding > Font Titles Caps like the framework layouts (owner, 2026-10-30: an all-caps site
   showed Studio Block headings in sentence case). Sites built before 3.6.10 keep their look (inc/look-baseline.php). */
body:not(.cc-look-pre-3-6-10) .sb-blk :is(h1, h2, h3) { text-transform: var(--title-transform, none); }

/* 3.6.10: grid and flex children may shrink below their content (min-width: auto made a price line, a long word or a
   wide card push whole blocks 150-300px past a phone screen: block proof 2026-10-31, memberships 07-17, testimonials 11/12,
   team 16/20, sponsorships 09/12). Text wraps instead; long unbroken words break. Phones only: on wider screens it let auto-sized label columns shrink
   below their words (VOL-02 titles split every few letters). Older looks keep the old sizing. */
@media (max-width: 767px) {
	body:not(.cc-look-pre-3-6-10) .sb-blk :is(.wrap, [class*="grid"], [class*="list"], [class*="row"], [class*="stack"], [class*="cols"], [class*="card"], .strip, .stub, .meter) > * { min-width: 0; }
	body:not(.cc-look-pre-3-6-10) .sb-blk :is(p, h1, h2, h3, h4, li, dd, dt, span, a) { overflow-wrap: break-word; }
}

/* 3.6.10: on a dark band, cards and panels drawn on the surface color turn into a faint light tint over the band, so
   the white text the band gives them stays readable (GRP-10, ICN-15 printed white text on light cards). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-dark { --pb-surface: color-mix(in srgb, var(--color-white) 8%, transparent); }
/* 3.6.10: looks that paint their own dark panel in the text color (.dark, .ink, wizards 12/19 ...) turned white on a
   dark band, where the text color flips to white (WIZ-12, WIZ-19, TML-12: white panels with white text). On a dark
   band they paint Branding Dark instead. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-dark :is(.dark, .ink, .tn-dark, .w12, .w19, .h11, .h16, .h22, .b07, .b19, .p17,
	.t9 .panels, .s12 .panel, .s13 .top, .t18 li, .sbi6, .p02 .card.feat, .i16-s, .m04, .m10, .ov-giant, .pm-giant, .m-panel, .util),
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-dark:is(.sb-wizards, .sb-timelines) > :is(.dark, .w12, .w19) { background: var(--pb-ink); }
/* 3.6.10: form labels and legends on a dark band use the light text color, not Branding's (dark) form label color
   (WIZ-12, WIZ-19, FRM-13: black labels on a black band). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-dark { --form-label-color: var(--pb-on-dark); }
/* Same inside a look's own dark panel on any band, where cards also take the faint light tint (GRP-10's match card and
   the wizard tiles printed white text on light cards). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk :is(.dark, .ink, .is-dark, .tn-dark, .w12, .w19) { --form-label-color: var(--pb-on-dark); }
/* A light panel or card inside such a section (FRM-03, FRM-07 forms) keeps dark labels. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk :is(.dark, .ink, .tn-dark) :is(.panel, [class*="card"]) { --form-label-color: var(--pb-text); }
/* .is-dark pads and the wizards 12/19 draw their cards and tiles as a faint light tint over the dark. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk :is(.is-dark, .w12, .w19) { --pb-surface: color-mix(in srgb, var(--color-white) 8%, transparent); --pb-muted: var(--color-muted-on-dark); }
/* .is-dark pads color their text with the text color, so it turns light inside them. (.dark and .ink keep it: the library
   uses it there as dark ink on light accents, such as LST-19's inverted button.) */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk .is-dark { --pb-text: var(--pb-on-dark); --pb-border: var(--color-line-on-dark); }

/* 3.6.10: a dark framework row adds .white, whose ".white h1-h6 { color: white !important }" outranked the looks' own
   heading color. Looks that keep a light panel on a dark row (ICN-06/19, IMG-12, SRM-06/09/12/15/18/20, VID-03, VOL-04,
   WIZ-01/03/18) printed white headings on it. Inside a look, headings follow the look's color, as on a light row. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk :is(h1, h2, h3, h4, h5, h6) { color: var(--color-headings) !important; }