@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --font-content: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-system: "Inter", Arial, sans-serif;
  --font-sans: var(--font-content);
  --ink: #172b3a;
  --muted: #526674;
  --blue-900: #093a5b;
  --blue-800: #0d4d73;
  --blue-700: #116b94;
  --blue-100: #e8f2f7;
  --gold: #f4c344;
  --paper: #f7f8f6;
  --white: #fff;
  --line: #d7e0e4;
  --shadow: 0 18px 50px rgba(11, 49, 73, 0.12);
  --site-content: min(1120px, calc(100vw - 48px));
  --content: var(--site-content);
  --module-space: 56px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
/* Keep CMS chrome separate from the content's preview typeface. */
:is(.editor-bar, .section-builder-tools, .widget-builder-tools,
    .section-visibility-control, .section-insertion, .section-dialog,
    .story-format-toolbar, .story-link-panel, .focus-edit-caption,
    .visual-card-position-tools, .focus-card-editor,
    .hero-color-tools, .canvas-title-block-tools, .canvas-height-tools,
    .canvas-image-size-tools, .canvas-text-format-tools, .canvas-media-controls,
    .canvas-layer-handle, .canvas-layer-remove, .background-toggle,
    .media-animation-controls, .media-animation-toggle, .remove-media,
    .editing [data-media-key] figcaption, .editing .empty-media-label,
    .text-animation-controls, .text-animation-toggle,
    .focus-controls, .sample-section-actions, .sample-settings,
    .widget-link-controls, .widget-url, .add-widget-link,
    .slider-editor-settings, .slider-edit-controls,
    .private-access-bar, .login-shell, .create-shell, .page-manager,
    .nav-tools, .mobile-tertiary-links) {
  --font-sans: var(--font-system);
  font-family: var(--font-system);
}
/* Content remains in Roboto Condensed even when its editor is inside a settings panel. */
.focus-edit-dock .story-rich-body {
  --font-sans: var(--font-content);
  font-family: var(--font-content);
}
a { color: inherit; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.035em; }
h1 { margin-bottom: 30px; font-size: 56px; line-height: 1.08; max-width: 850px; }
h2 { margin-bottom: 28px; font-size: 36px; line-height: 1.1; max-width: none; }
h3 { margin-bottom: 14px; font-size: 24px; line-height: 1.2; }
.content-width { width: var(--content); margin-inline: auto; }
.eyebrow {
  margin-bottom: 20px;
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow-light { color: #8fd2ed; }
.section { padding: var(--module-space) 0 32px; }
.section-intro { max-width: none; color: var(--muted); font-size: clamp(20px, 2vw, 24px); }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 73px;
  padding: 0 32px 0 0;
  color: var(--white);
  background: rgba(6, 35, 54, 0.96);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  width: max-content;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.brand img {
  width: 73px;
  height: 73px;
  max-width: none;
  flex: 0 0 73px;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.site-header nav { display: flex; gap: 56px; align-items: center; }
.site-header nav a, .site-header nav button, .create-link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.site-header nav button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.nav-dropdown { position: relative; z-index: calc(1000 - var(--navigation-layer, 0)); box-sizing: border-box; height: 73px; padding: 0; display: flex; align-items: center; }
/* The supplied 20x8 indicator belongs below the label, not to its text glyph.
   Keep the existing navigation elements, accessible names and controller. */
.site-header nav[aria-label="Main navigation"] > * { position:relative; }
.site-header nav[aria-label="Main navigation"] > * + *::before { content:""; position:absolute; left:-28px; top:50%; height:20px; border-left:1px solid #ffffff30; transform:translateY(-50%); pointer-events:none; }
.nav-dropdown > :is(a,button) { position:static; display:flex; align-items:center; min-height:73px; line-height:1.2; white-space:nowrap; }
.nav-dropdown > :is(a,button) > span[aria-hidden="true"] { position:absolute; left:50%; bottom:10px; width:20px; height:8px; font-size:0; background:currentColor; clip-path:polygon(0 0,100% 0,50% 100%); transform:translateX(-50%); pointer-events:none; }
.dropdown-entry > a > span[aria-hidden="true"] { flex:none; width:8px; height:12px; font-size:0; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); }
@media (min-width:901px) and (max-width:1200px) { .site-header:not(.standalone-header) .brand span { display:none; } }
.dropdown-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: -18px;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
  min-width: 230px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #061f30;
  box-shadow: var(--shadow);
}
.site-header nav :is(.dropdown-menu,.dropdown-submenu) a { font-weight:400; }
.dropdown-menu a { display: block; padding: 10px 12px; border-radius: 6px; }
.dropdown-menu a:hover { background: rgba(255,255,255,.1); }
.dropdown-entry { position: relative; z-index: calc(1000 - var(--navigation-layer, 0)); }
.dropdown-entry > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dropdown-submenu {
  position: absolute;
  top: -10px;
  left: calc(100% - 2px);
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
  min-width: 230px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #061f30;
  box-shadow: var(--shadow);
}
.dropdown-entry:hover > .dropdown-submenu,
.dropdown-entry:focus-within > .dropdown-submenu,
.dropdown-submenu:hover { opacity: 1; visibility: visible; pointer-events: auto; }
.dropdown-menu a[aria-current="page"] { color: var(--gold); }
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.dropdown-menu:hover { opacity: 1; visibility: visible; pointer-events: auto; }
/* The existing header controller owns one active branch. Hidden menus cannot
   intercept clicks, even if a previous link/button still retains click focus. */
nav[data-instant-navigation] :is(.nav-dropdown > .dropdown-menu,.dropdown-entry > .dropdown-submenu) {
  opacity: 0; visibility: hidden; pointer-events: none;
}
nav[data-instant-navigation] :is(.nav-dropdown[data-nav-open] > .dropdown-menu,.dropdown-entry[data-nav-open] > .dropdown-submenu) {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-tools { display: flex; gap: 9px; justify-self: end; align-items: center; }
.nav-tools :is(.media-library-link,.page-edit-link) {--button-height:var(--button-large); width:var(--button-large);  flex-shrink:0; background:#fff; color:var(--ink); }
.nav-tools .create-link {--button-height:var(--button-large); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:var(--button-large);  margin-left:0; }
.editing .nav-tools .mobile-menu-toggle {--button-height:var(--button-large); width:var(--button-large);  }
.nav-tools :is(.page-edit-link,.create-link) img { width:24px; height:24px; object-fit:contain; }
@media (min-width:901px) and (max-width:1200px) {
  .editing .site-header { grid-template-columns:minmax(0,1fr) auto; row-gap:8px; }
  .editing .site-header > nav { grid-column:1/-1; grid-row:2; justify-content:center; flex-wrap:wrap; padding:0 16px 12px; }
  .editing .site-header .nav-tools { grid-column:2; grid-row:1; }
}
.icon-link {--button-height:var(--button-medium);
  display: grid;
  place-items: center;
  width:var(--button-medium);
  
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 7px;
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}
.mobile-menu-toggle {
  display: none;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .24s ease, opacity .18s ease;
}
.hamburger-icon { position: relative; display: block; }
.hamburger-icon::before,
.hamburger-icon::after { position: absolute; left: 0; content: ""; }
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after { top: 6px; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::after { top: 0; transform: rotate(-45deg); }
.icon-link:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.create-link { margin-left: 4px; padding: 9px 12px; border-radius: 6px; color: var(--ink); background: var(--gold); }
/* Supplied white/gold page artwork needs a dark surface at rest and on hover. */
.nav-tools :is(.page-edit-link,.create-link),.nav-tools :is(.page-edit-link,.create-link):hover { background:var(--ink); color:#fff; border:1px solid #ffffff60; }
.nav-tools :is(.page-edit-link,.create-link):hover { background:var(--blue-700); border-color:var(--gold); }
.mobile-navigation { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 72px;
  align-items: center;
  padding: var(--header-padding-y, 48px) max(48px, calc((100vw - 1240px) / 2)) calc(var(--header-padding-y, 48px) + 36px);
  color: var(--white);
  background:
    radial-gradient(circle at 82% 18%, rgba(54, 153, 195, 0.26), transparent 26%),
    linear-gradient(135deg, #07334f, #0b5278 60%, #0b405f);
}
.hero:not(:has(.hero-visual)) { grid-template-columns: minmax(0, 1fr); }
.hero .eyebrow { color: #9edaf0; }
.lede { max-width: 750px; color: #dbeaf1; font-size: clamp(1.18rem, 2vw, 1.55rem); }
.project-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 50px 0 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.project-meta div { display: grid; gap: 3px; }
.project-meta dt { color: #a7cadb; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.project-meta dd { margin: 0; font-weight: 700; }
/* Keep authored hero line breaks visible after Save/reload, including Client/Role.
   This also keeps contenteditable innerText from flattening them on the next Save. */
.hero-content > .editable-text,
.hero-content .project-meta .editable-text,
.builder-hero > .content-width > .editable-text { white-space: pre-wrap; }
.hero-visual { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:clamp(300px,28vw,400px); gap:16px; min-width:0; }
.editing :is(.hero,.case-study-hero-inner):has(.hero-holder-tools .is-open) { align-items:start; }
.hero-visual > figure.hero-media-holder,
.editing .hero-visual > figure.hero-media-holder.is-empty { display:contents; cursor:default; outline:0; }
.hero-image-mask {
  grid-area:1 / 1 / 2 / -1;
  align-self:start;
  justify-self:start;
  width: 68%;
  min-width:0;
  min-height:0;
  display:grid;
  padding:var(--hero-holder-padding,36px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--surface-corner, 28px);
  background:var(--hero-holder-background,transparent);
  box-shadow: var(--shadow);
}
.hero-media-holder:first-child > .hero-image-mask { transform:rotate(-3deg); }
.hero-media-holder:last-child > .hero-image-mask { align-self:end; justify-self:end; transform:rotate(3deg); }
.hero-visual:not([data-hero-image-count="2"]) .hero-image-mask { transform:none; }
.hero-visual[data-hero-image-count="1"] .hero-media-holder:not(.is-empty) > .hero-image-mask { align-self:center; justify-self:center; }
.editing .hero-visual[data-hero-image-count="1"] .is-empty > .hero-image-mask { width:0; height:0; padding:0; border:0; box-shadow:none; }
.hero-image-art { position:relative; display:grid; place-items:center; width:100%; min-width:0; min-height:0; }
.hero-image-art img { grid-area:1 / 1; width:auto; height:auto; min-width:0; min-height:0; max-width:100%; max-height:340px; object-fit:contain; scale:var(--hero-holder-scale,1); }
.hero-holder-tools { grid-row:2; position:relative; min-width:0; align-self:start; padding-top:32px; opacity:0; pointer-events:none; }
.hero-media-holder:first-child > .hero-holder-tools { grid-column:1; }
.hero-media-holder:last-child > .hero-holder-tools { grid-column:2; }
.hero-visual:hover .hero-holder-tools,
.hero-visual:focus-within .hero-holder-tools,
.hero-visual:has(.media-animation-controls.is-open) .hero-holder-tools { opacity:1; pointer-events:auto; }
.hero-holder-label { display:block; margin-bottom:8px; font-family:var(--font-system); font-size:12px; }
@media (hover:none) { .hero-holder-tools { opacity:1; pointer-events:auto; } }
@media (min-width:1800px) {
  .editing .hero-visual:not([data-hero-image-count="0"]) { margin-right:-216px; grid-template-columns:minmax(0,1fr) 200px; grid-template-rows:minmax(200px,auto) minmax(200px,auto); }
  .editing .hero-visual:not([data-hero-image-count="0"]) .hero-image-mask { grid-column:1; grid-row:1 / 3; }
  .editing .hero-visual:not([data-hero-image-count="0"]) .hero-media-holder:first-child > .hero-holder-tools { grid-area:1 / 2; }
  .editing .hero-visual:not([data-hero-image-count="0"]) .hero-media-holder:last-child > .hero-holder-tools { grid-area:2 / 2; }
}

.hero-petsmart {
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 157, 89, 0.3), transparent 27%),
    linear-gradient(135deg, #6f0015, #a30923 58%, #cf2542);
}
.hero-petsmart .hero-content { width: min(760px, 100%); }
@media (min-width: 901px) {
  .case-study-cdc .snapshot { --snapshot-overlap: 74px; }
  .case-study-petsmart .snapshot { --snapshot-overlap: 64px; }
}
@media (min-width: 1240px) {
  .hero-petsmart {
    grid-template-columns: minmax(0, 760px) minmax(360px, 1fr);
  }
}
.hero-petsmart .eyebrow { color: #ffd2db; }
.hero-petsmart .lede { color: #fff1f4; }
.hero-petsmart .project-meta { border-top-color: rgba(255, 255, 255, 0.34); }
.hero-petsmart .project-meta dt { color: #ffd0d9; }
.hero-petsmart .hero-image-mask {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 24px 64px rgba(69, 0, 14, 0.3);
}

.hero[data-hero-background-custom],
.builder-hero[data-hero-background-custom] { background: var(--hero-background); }
.hero[data-hero-text-custom],
.builder-hero[data-hero-text-custom] { color: var(--hero-text-color); }
.hero[data-hero-text-custom] .hero-content :is(h1, h2, h3, p, dt, dd, span, a),
.builder-hero[data-hero-text-custom] .content-width :is(h1, h2, h3, p, dt, dd, span, a) { color: var(--hero-text-color); }

.snapshot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--banner-margin-top, calc(-1 * min(var(--snapshot-overlap, 34px), max(0px, calc(var(--header-padding-y, 48px) - 16px)))));
  overflow: hidden;
  border-radius: var(--surface-corner, 14px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.snapshot > div { padding: 34px 34px 16px; }
.snapshot > div + div { border-left: 1px solid var(--line); }
.snapshot p { margin-bottom: 0; }
.case-study > .hero { z-index: 0; }
.case-study > .snapshot { position: relative; z-index: 1; }
.case-study > .section-record { z-index: 2; }
.snapshot-label { margin-bottom: 8px !important; color: var(--blue-700); font-size: 11.84px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.section-copy { margin-bottom: 56px; }
.wide-media { margin: 0 0 44px; padding: 42px; border-radius: var(--surface-corner, 26px); background: var(--white); box-shadow: var(--shadow); }
.wide-media img { width: 100%; max-height: 520px; object-fit: contain; }
.image-section-frame .wide-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--viewport-width, var(--image-size, 100%));
  max-width: calc(100vw - 32px);
  min-width: 20px;
  height: var(--viewport-height, auto);
  min-height: 20px;
  margin-left: 50%;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--image-background, var(--white));
}
.image-section-frame .wide-media img {
  position: relative;
  top: var(--image-offset-y, 0px);
  left: var(--image-offset-x, 0px);
  flex: none;
  width: var(--image-width, 100%);
  max-width: none;
  height: var(--image-height, auto);
  max-height: 520px;
  object-fit: contain;
}
.image-section-frame[data-image-size-custom="true"] .wide-media img { max-height: none; object-fit: fill; }
.editing .image-section-frame[data-image-move-mode="true"] .wide-media img { cursor: grab; touch-action: none; }
.editing .image-section-frame[data-image-move-mode="true"] .wide-media img:active { cursor: grabbing; }
.image-section-frame[data-image-background-empty="true"] .wide-media { box-shadow: none; }
.image-section-title[hidden], .image-background-color-field[hidden] { display: none; }
.widget-image[data-background-state="transparent"] .image-section-frame .wide-media,
.widget-canvas_slider[data-background-state="transparent"] .slider-viewport,
.widget-canvas_slider[data-background-state="transparent"] .slider-frame { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.canvas-media.wide-media {
  position: relative;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.canvas-media-stage {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: var(--canvas-stage-height, 75%);
  overflow: hidden;
  border-radius: var(--surface-corner, 26px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.canvas-layer {
  position: absolute;
  z-index: var(--canvas-z);
  top: var(--canvas-y);
  left: var(--canvas-x);
  width: var(--canvas-width);
  min-width: 72px;
}
.canvas-layer-image img,
.wide-media .canvas-layer-image img {
  display: block;
  width: 100%;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.canvas-text,
.canvas-text-input {
  width: 100%;
  margin: 0;
  color: var(--ink);
  background: transparent;
  font: 800 24px/1.15 var(--font-sans);
  text-align: center;
  white-space: pre-wrap;
}
.canvas-text-input {
  min-height: 2.5em;
  padding: 8px;
  border: 1px solid rgba(23,43,58,.35);
  border-radius: 6px;
  resize: both;
}
.canvas-layer-text { min-width: 0; }
/* Individual translate keeps anchors independent of entrance/hover transforms. */
.canvas-layer-image[data-canvas-float]:where(:not([data-canvas-float="free"])) {
  --canvas-float-shift-x: 0%; --canvas-float-shift-y: 0%;
  left: var(--canvas-float-x, 0px); top: var(--canvas-float-y, 0px);
  translate: var(--canvas-float-shift-x) var(--canvas-float-shift-y);
}
.canvas-layer-image:is([data-canvas-float$="-right"]) { left: auto; right: var(--canvas-float-x, 0px); }
.canvas-layer-image:is([data-canvas-float$="-center"], [data-canvas-float="center"]) { left: calc(50% + var(--canvas-float-x, 0px)); --canvas-float-shift-x: -50%; }
.canvas-layer-image:is([data-canvas-float^="middle-"], [data-canvas-float="center"]) { top: calc(50% + var(--canvas-float-y, 0px)); --canvas-float-shift-y: -50%; }
.canvas-layer-image[data-canvas-float^="bottom-"] { top: auto; bottom: var(--canvas-float-y, 0px); }
.canvas-float-controls { display: grid; gap: 10px; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #eef5f9; font: 12px/1.4 var(--font-system); }
.canvas-float-controls label { display: grid; gap: 4px; font-weight: 700; }
.canvas-float-controls > label { max-width: 360px; }
.canvas-float-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.canvas-float-settings[hidden] { display: none !important; }
.canvas-float-controls :is(select, input) { min-height: 36px; max-width: 100%; padding: 6px 8px; border: 1px solid #a5b9c8; border-radius: 5px; color: var(--ink); background: #fff; font: inherit; }
.canvas-float-settings input { width: 140px; }
.canvas-float-settings small { flex-basis: 100%; }
.canvas-float-controls select { width: 100%; }
.canvas-text-input { min-height: 16px; max-height: 2000px; }
.canvas-text-format-tools { position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: max-content; max-width: min(420px, 80vw); padding: 5px; border-radius: 6px; background: var(--white); color: var(--ink); font-size: 11px; box-shadow: var(--shadow); }
.canvas-text-format-tools button {--button-height:var(--button-small);   padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font-size: 11px; line-height: 16px; }
.canvas-text-format-tools button[aria-pressed="true"] { background: var(--gold); }
.canvas-layer-text .canvas-layer-handle { top: auto; bottom: -28px; }
.background-toggle { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.background-toggle[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.canvas-background-toggle { position: absolute; top: 12px; left: 12px; z-index: 100; }
.widget-background-toggle { justify-self: start; margin-bottom: 2px; }
[data-background-surface][data-background-state="transparent"],
.component-surface[data-background-state="transparent"] > section { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.component-surface[data-background-state="transparent"] > section .image-section-frame,
.component-surface[data-background-state="transparent"] > section .image-section-frame .wide-media,
.component-surface[data-background-state="transparent"] > section .builder-sample,
.component-surface[data-background-state="transparent"] > section .canvas-media-stage,
.component-surface[data-background-state="transparent"] > section .slider-viewport,
.component-surface[data-background-state="transparent"] > .builder-focus .focus-items > article,
.component-surface[data-background-state="transparent"] > .builder-focus .focus-card > article,
.component-surface[data-background-state="transparent"] > .builder-focus .visual-need-card,
.component-surface[data-background-state="transparent"] > .builder-focus .focus-items,
.component-surface[data-background-state="transparent"] > .builder-focus .focus-edit-unit > article,
[data-background-surface][data-background-state="transparent"]#challenge .visual-need-card,
[data-background-surface][data-background-state="transparent"] > .snapshot-grid { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Remove presentation dividers, not editor controls or independently styled widgets. */
[data-background-surface][data-background-state="transparent"].snapshot > div,
[data-background-surface][data-background-state="transparent"] > .snapshot-grid > div { border: 0 !important; }
.picker-widget-divider { margin: 24px 0 16px; border: 0; border-top: 1px solid var(--line); }
.standalone-widget-section { padding-top: 24px; padding-bottom: 24px; }
.canvas-title-block {
  width: 100%;
  max-width: none;
  margin-bottom: 56px;
}
.canvas-title-block h2,
.canvas-title-block .section-intro {
  width: 100%;
  max-width: none;
}
.canvas-title-block .section-intro { margin-bottom: 0; }
.canvas-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.canvas-editor-toolbar > .canvas-background-toggle { position: static; margin-right: auto; }
.canvas-editor-toolbar > .canvas-height-tools { position: static; flex: 0 0 auto; }
.canvas-editor-toolbar > .canvas-title-block-tools { margin: 0; z-index: auto; }
.canvas-title-block-tools {
  position: relative;
  z-index: 105;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.canvas-title-block-tools button {--button-height:var(--button-large);
  
  padding: 9px 14px;
  border: 1px solid rgba(23,43,58,.18);
  border-radius: 7px;
  color: var(--white);
  background: var(--blue-700);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font: 800 .76rem/1 var(--font-sans);
  cursor: pointer;
}
.canvas-title-block-tools button:hover,
.canvas-title-block-tools button:focus-visible { color: var(--ink); background: var(--gold); }
.canvas-title-block-tools .danger-control { color: var(--white); background: #b21231; }
.editing .canvas-layer { touch-action: none; }
.editing .canvas-layer:hover,
.editing .canvas-layer:focus-within { z-index: 1000; }
.editing .canvas-layer.is-dragging { cursor: grabbing; }
.canvas-layer-handle,
.canvas-layer-remove {--button-height:var(--button-small);
  position: absolute;
  z-index: 3;
  top: 6px;
  
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  color: var(--white);
  background: rgba(6,31,48,.94);
  font: 800 .7rem/1 var(--font-sans);
  opacity: 0;
  transition: opacity .15s ease;
}
.canvas-layer-handle { left: 6px; cursor: grab; }
.canvas-layer-remove { right: 6px; color: #fff; background: #a5261c; cursor: pointer; }
.canvas-layer:hover .canvas-layer-handle,
.canvas-layer:hover .canvas-layer-remove,
.canvas-layer:focus-within .canvas-layer-handle,
.canvas-layer:focus-within .canvas-layer-remove { opacity: 1; }
.canvas-image-size-tools,
.canvas-height-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 8px;
  color: var(--white);
  background: rgba(6,31,48,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  font: 800 .7rem/1 var(--font-sans);
}
.canvas-image-size-tools {
  position: absolute;
  z-index: 7;
  bottom: 6px;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}
.canvas-layer-image:hover .canvas-image-size-tools,
.canvas-layer-image:focus-within .canvas-image-size-tools,
.canvas-image-size-tools:hover { opacity: 1; visibility: visible; transition: opacity .12s ease, visibility 0s; }
.canvas-height-tools {
  position: absolute;
  z-index: 110;
  top: 14px;
  right: 14px;
}
.canvas-image-size-tools button,
.canvas-height-tools button {--button-height:var(--button-small);
  display: grid;
  place-items: center;
  width:var(--button-small);
  
  padding: 0;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 6px;
  color: var(--white);
  background: transparent;
  font: 900 1rem/1 var(--font-sans);
  cursor: pointer;
}
.canvas-image-size-tools button:hover,
.canvas-image-size-tools button:focus-visible,
.canvas-height-tools button:hover,
.canvas-height-tools button:focus-visible { color: var(--ink); background: var(--gold); }
.canvas-image-size-tools output,
.canvas-height-tools output { min-width: 38px; text-align: center; }
.editing .canvas-layer-image .media-animation-controls {
  top: 42px;
  left: 6px;
  width: min(320px, calc(100vw - 96px));
}
.editing .canvas-layer-image .media-animation-controls.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.canvas-media-controls {
  position: relative;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}
.canvas-text-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.canvas-media-controls button {--button-height:var(--button-large);
  
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: var(--white);
  background: rgba(6,31,48,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font: 800 .78rem/1 var(--font-sans);
  cursor: pointer;
  pointer-events: auto;
}
.canvas-media-controls button:hover,
.canvas-media-controls button:focus-visible { color: var(--ink); background: var(--gold); }
.card-grid, .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.need-card, .process-grid article {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--surface-corner, 18px);
  background: var(--white);
}
.need-card p:last-child, .process-grid p:last-child { margin-bottom: 0; color: var(--muted); }
.visual-need-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 7 / 9;
  min-height: 430px;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: var(--card-text-color, var(--ink));
  background: var(--card-background, transparent);
  box-shadow: none;
}
.need-card-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: inherit;
}
.need-card-background img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}
.editing .need-card-background.is-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: var(--ink);
  background: transparent;
}
.need-card-background .empty-media-label {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
}
.visual-need-card-copy {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 38px;
  pointer-events: none;
}
.visual-need-card-copy .editable-text { pointer-events: auto; }
.visual-need-card-copy h3,
.visual-need-card-copy .visual-need-card-body {
  position: relative;
  z-index: 11;
  display: block;
  opacity: 1;
  visibility: visible;
}
.visual-need-card-title { transform: translateY(var(--card-title-offset, 0)); }
.visual-need-card .card-number {
  margin-bottom: 18px;
  color: var(--card-text-color, var(--blue-700));
  opacity: .76;
}
.visual-need-card h3 {
  margin: 0;
  color: var(--card-text-color, var(--ink));
  /* Keep Highlights titles uniform despite legacy per-title inline sizes. */
  font-size: 24px !important;
  font-weight: 500;
  line-height: 1.04;
  text-align: center;
}
.need-card.visual-need-card .visual-need-card-body {
  margin: auto 0 0;
  color: var(--card-text-color, var(--ink));
  font-size: 1.12rem;
  line-height: 1.55;
  transform: translateY(var(--card-body-offset, 0));
}
.visual-card-position-tools {
  position: fixed;
  z-index: 9999;
  top: var(--card-editor-top, 90px);
  right: auto;
  left: var(--card-editor-left, 16px);
  display: grid;
  gap: 7px;
  width: 264px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  color: var(--white);
  background: rgba(6,31,48,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.editing .visual-need-card { overflow: visible; }
body.editing .visual-card-position-tools.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
body.editing .visual-card-position-tools.is-open.is-fading {
  opacity: 0;
  /* Keep the fading panel interactive so pointer re-entry cancels closing. */
  pointer-events: auto;
  transition: opacity 1.5s ease;
}
.visual-card-position-tools > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  gap: 5px;
  align-items: center;
}
.visual-card-position-tools .visual-card-copy-field > span,
.visual-card-position-tools .visual-card-color-field > span,
.visual-card-position-tools > div > span { font-size: .67rem; font-weight: 800; }
.visual-card-copy-field,
.visual-card-color-field {
  display: grid;
  gap: 4px;
  margin: 0;
}
.visual-card-color-field { grid-template-columns: minmax(0, 1fr) 86px; align-items: center; }
.visual-card-copy-field input,
.visual-card-copy-field textarea,
.visual-card-color-field input {
  min-width: 0;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: .72rem;
  line-height: 1.35;
}
.visual-card-copy-field textarea { resize: vertical; }
.visual-card-color-field input[aria-invalid="true"] { border-color: #ff8d85; box-shadow: 0 0 0 2px rgba(255,71,61,.28); }
.visual-card-position-tools button {--button-height:var(--button-medium);
  width:var(--button-medium);
  
  padding: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 6px;
  color: var(--white);
  background: rgba(255,255,255,.1);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.visual-card-position-tools button:hover,
.visual-card-position-tools button:focus-visible { color: var(--ink); background: var(--gold); }
.card-number, .process-number { display: inline-block; margin-bottom: 24px; color: var(--blue-700); font-size: 0.8rem; font-weight: 800; letter-spacing: .12em; }
.need-card-media,
.process-card-media {
  margin: 24px 0 0;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}
.need-card-media img,
.process-card-media img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.need-card-media.is-empty,
.process-card-media.is-empty {
  display: grid;
  min-height: 130px;
  place-items: center;
  border: 2px dashed var(--blue-700);
  color: var(--blue-700);
  background: rgba(232,242,247,.72);
}
.empty-media-label {
  font-size: .84rem;
  font-weight: 800;
}
.remove-media {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  padding: 7px 10px;
  border: 1px solid #9d1c12;
  border-radius: 6px;
  color: #9d1c12;
  background: rgba(255,255,255,.96);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.remove-media:hover { color: var(--white); background: #9d1c12; }
.need-card-media figcaption,
.process-card-media figcaption {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
}

.section-dark { color: var(--white); background: var(--blue-900); }
.section-dark .section-intro { color: #cde0e9; }
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: end; }
.split h2 { margin-bottom: 0; }
@media (min-width: 901px) {
  .case-study-petsmart #role .split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
.process-grid { margin-top: 52px; }
.process-grid article { border-top: 1px solid var(--line); }

.examples { background: var(--blue-100); }
.example {
  position: relative;
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  gap: 50px;
  align-items: center;
  margin-top: 50px;
  padding: 44px;
  border-radius: var(--surface-corner, 24px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.example-order-tools {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: -19px;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
}
.example-order-tools button {--button-height:var(--button-medium);
  display: grid;
  width:var(--button-medium);
  
  padding: 0;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  background: var(--blue-700);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.example-order-tools button:hover,
.example-order-tools button:focus-visible {
  color: var(--ink);
  background: var(--gold);
}
.example-order-tools button:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.example:nth-of-type(even) { grid-template-columns: 0.64fr 0.36fr; }
.example:nth-of-type(even) .example-copy { order: 2; }
.example-media { margin: 0; }
.example-media img { width: 100%; max-height: 520px; object-fit: contain; }
.example-copy p { color: var(--muted); }

.outcome { color: var(--white); background: linear-gradient(135deg, #0b4f75, #062f49); }
.outcome-grid { display: grid; grid-template-columns: 1fr 0.35fr; gap: 80px; align-items: center; }
.outcome .section-intro { color: #d9e9f0; }
blockquote {
  margin: 48px 0 0;
  padding: 4px 0 4px 28px;
  border-left: 5px solid var(--gold);
  color: #fff2c0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
}
.trophy { margin: 0; }

.case-study-petsmart .snapshot-label,
.case-study-petsmart .card-number,
.case-study-petsmart .process-number,
.case-study-petsmart .eyebrow {
  color: #a30923;
}
.case-study-petsmart .section-dark {
  background: #3d0712;
}
.case-study-petsmart .section-dark .eyebrow,
.case-study-petsmart .outcome .eyebrow {
  color: #ffb3c0;
}
.case-study-petsmart .examples {
  background: #f7e9ec;
}
.case-study-petsmart .outcome {
  background: linear-gradient(135deg, #6f0015, #a30923 64%, #c7213d);
}
.case-study-petsmart blockquote {
  border-left-color: #f47b20;
  color: #fff0d9;
}

/*
  Contrast contract: every component with a dark background receives
  .surface-dark in its template. Text then inherits a light foreground,
  while secondary copy and accents use accessible light tones.
*/
.surface-dark {
  color: #ffffff;
  color-scheme: dark;
}
.surface-dark :is(h1, h2, h3, p, li, dt, dd) {
  color: inherit;
}
.surface-dark :is(.lede, .section-intro, .widget-link-description, .widget-url) {
  color: #d9e7ed;
}
.surface-dark :is(.eyebrow, .snapshot-label, .card-number, .process-number) {
  color: #9edaf0;
}
.case-study-petsmart .surface-dark :is(.eyebrow, .snapshot-label, .card-number, .process-number) {
  color: #ffb3c0;
}
.surface-dark a:not(.button):not(.widget-action) {
  color: inherit;
}

footer {
  display: flex;
  gap: 28px;
  justify-content: center;
  padding: 36px;
  color: #c5d6df;
  background: #041f31;
  font-size: .82rem;
}

.builder-hero {
  position: relative;
  display: grid;
  align-items: center;
  padding: var(--header-padding-y, 48px) 0 calc(var(--header-padding-y, 48px) + 36px);
  color: var(--white);
  background:
    radial-gradient(circle at 80% 20%, rgba(76,171,210,.25), transparent 28%),
    linear-gradient(135deg, var(--blue-900), var(--blue-700));
}
.builder-hero h1 { max-width: 1000px; }
.builder-hero .lede { max-width: 820px; }
.case-study-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 72px;
  align-items: center;
}
.builder-case-study-hero h1 { max-width: 850px; }
.builder-case-study-hero .lede { max-width: 750px; }
.builder-case-study-hero .hero-visual { min-width: 0; }
.editing .hero-visual[data-hero-image-count="0"] { grid-template-rows:200px auto; }
.editing .hero-visual[data-hero-image-count="0"] .hero-image-mask { width:100%; height:100%; }
.editing .hero-visual[data-hero-image-count="0"] .hero-media-holder:first-child > .hero-image-mask { grid-column:1; }
.editing .hero-visual[data-hero-image-count="0"] .hero-media-holder:last-child > .hero-image-mask { grid-column:2; }
.builder-case-study-hero .project-meta-value { display: block; min-height: 1.4em; }
.editing .builder-case-study-hero .project-meta-value:empty::before {
  content: "Click to add";
  color: #a7cadb;
}
.title-section { padding-bottom: 16px; }
.title-section h2 { max-width: none; margin-bottom: 16px; }
.text-only-section { position: relative; }
.text-only-subtitle {
  margin-bottom: 18px;
  color: var(--blue-700);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-only-body {
  max-width: none;
  margin-bottom: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  white-space: pre-line;
}
.editing .text-only-subtitle:empty::before {
  content: "Optional subtitle — click to add";
  color: var(--blue-700);
  opacity: .7;
}
.builder-focus { position: relative; z-index: 2; }
.focus-edit-unit { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.focus-edit-dock { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); text-align: left; }
.focus-edit-dock[hidden] { display:none!important; }
body.editing .card-description-preview { pointer-events:auto; cursor:text; }
.focus-edit-caption { margin: 0 0 8px; color: var(--ink); font-size: .9rem; font-weight: 700; letter-spacing: normal; }
.focus-edit-dock .story-format-toolbar { margin-bottom: 0; padding: 0; gap: 4px; }
.focus-edit-dock .story-format-toolbar button {--button-height:var(--button-small); min-width:var(--button-small);   padding: 0 5px; border-radius: 4px; font-size: 12px; line-height: 16px; }
.focus-edit-dock .story-color-label { gap: 4px; font-size: 11px; }
.focus-edit-dock .story-color-label select { min-height: 20px; height: 20px; max-width: 124px; padding: 0 2px; font-size: 12px; line-height: 16px; }
.focus-edit-dock .story-link-panel { margin-top: 12px; margin-bottom: 0; }
body.editing .focus-edit-dock .visual-card-position-tools { position: static; width: 100%; max-height: none; margin-top: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; opacity: 1; pointer-events: auto; transform: none; transition: none; }
.focus-edit-dock .visual-card-position-tools button {--button-height:var(--button-medium); color: var(--ink); background: var(--white); border-color: var(--line); width:var(--button-medium);  }
.focus-edit-dock .visual-card-position-tools .card-copy-row { grid-template-columns: minmax(0, 1fr) 34px 34px; align-items: end; }
.focus-edit-dock .visual-card-copy-field input, .focus-edit-dock .visual-card-color-field input { border-color: var(--line); font-size: .8rem; }
.focus-edit-dock .story-rich-body { min-height: 84px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; color: var(--card-editor-text-color, var(--ink)); font-size: .85rem !important; line-height: 1.5; transform: none; transition: box-shadow .15s; }
.focus-edit-dock .story-rich-body.card-editor-dark-surface { background: #172b3a; }
.editing .focus-one { margin-top: var(--banner-margin-top,24px); }
.editing .focus-one .focus-items { overflow: visible; background: transparent; box-shadow: none; gap: 18px; }
.editing .focus-one .focus-edit-unit > article { flex: 1; background: var(--white); box-shadow: var(--shadow); }
.editing .focus-highlights-grid > .focus-edit-unit { width: 100%; max-width: 420px; justify-self: center; }
.focus-edit-unit > .focus-card { flex: 1; }
.focus-edit-dock .focus-card-editor { margin-top: 12px; }
.focus-highlights { padding: var(--module-space) 0 32px; }
.focus-highlights-grid { display: grid; grid-template-columns: repeat(var(--highlight-columns, 3), minmax(0, 1fr)); gap: 22px; }
.focus-highlights-grid .visual-need-card { width: 100%; max-width: 420px; min-width: 0; justify-self: center; }
.focus-highlights-grid .need-card-background { position: absolute; overflow: hidden; }
.focus-highlights-grid .need-card-background img { border-radius: inherit; }
.editing .focus-highlights-grid .need-card-background figcaption { top: calc(100% + 8px); bottom: auto; }
.focus-highlights .section-builder-tools { z-index: 20; }
.editing .focus-highlights-grid { row-gap: 64px; }
.editing .focus-highlights .focus-controls { margin-top: 60px; }
[data-highlight-set][data-highlight-height-set] .visual-need-card {
  height: var(--highlight-card-height);
  min-height: 0;
  aspect-ratio: auto;
}
/* Banner-only: empty copy must not reserve an overlay or a portrait frame. */
[data-banner-highlight] .visual-need-card-copy { padding: var(--highlight-card-padding, 38px); }
[data-banner-highlight] .visual-need-card-description { margin-top: auto; min-width: 0; }
[data-banner-highlight] .visual-need-card-description .visual-need-card-body { margin: 0; }
[data-banner-highlight][data-highlight-title-empty="true"] .visual-need-card-title,
[data-banner-highlight][data-highlight-body-empty="true"] .visual-need-card-description { display: none; }
[data-highlight-set] [data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"],
[data-highlight-set][data-banner-content="images"] [data-banner-highlight] {
  height: auto; min-height: 0; aspect-ratio: auto; align-self: start;
  padding: var(--highlight-card-padding, 0px);
}
[data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .visual-need-card-copy { display: none; }
[data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .need-card-background,
[data-highlight-set][data-banner-content="images"] [data-banner-highlight] .need-card-background {
  position: relative; inset: auto; min-height: 0;
}
[data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .need-card-background img,
[data-highlight-set][data-banner-content="images"] [data-banner-highlight] .need-card-background img {
  display: block; width: 100%; height: auto; object-fit: contain;
}
.editing [data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .need-card-background.is-empty,
.editing [data-highlight-set][data-banner-content="images"] [data-banner-highlight] .need-card-background.is-empty { min-height: 80px; }
.highlight-padding-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.highlight-padding-field input { flex: 1; min-width: 100px; min-height: 44px; }
.highlight-padding-field output { min-width: 44px; font-variant-numeric: tabular-nums; }
.highlight-height-controls {
  display: grid;
  gap: 8px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.highlight-height-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.highlight-height-actions output { min-width: 84px; font-variant-numeric: tabular-nums; }
.highlight-height-controls small { font-size: .6rem; font-weight: 500; }
.highlight-height-controls button {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: .65rem;
  cursor: pointer;
}
.highlight-height-controls button:disabled { opacity: .4; cursor: not-allowed; }
.section-visibility-control.has-highlight-height .builder-toolbar-panel { flex-direction: column; align-items: flex-end; }
.focus-controls button:disabled { opacity: .5; cursor: not-allowed; }
.focus-one { margin-top: var(--banner-margin-top,-36px); padding-bottom: 48px; }
/* Missing/auto preserves legacy desktop/edit/mobile spacing. Explicit choices
   match in Edit and View; new Banner: No Images records start with no overlap. */
.focus-one[data-banner-overlap="no"], .snapshot[data-banner-overlap="no"] { margin-top:var(--banner-margin-top,32px); }
.focus-one[data-banner-overlap="yes"] { margin-top:var(--banner-margin-top,-36px); }
.snapshot[data-banner-overlap="yes"] { margin-top:var(--banner-margin-top,-34px); }
.focus-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}
.focus-items article { padding: 32px; }
.focus-one .focus-items article { padding-bottom: 16px; }
.focus-items article + article { border-left: 1px solid var(--line); }
.focus-items p:last-child { margin-bottom: 0; }
.focus-two { padding: var(--module-space) 0; background:transparent; }
.focus-two .focus-items { gap: 18px; background: transparent; box-shadow: none; }
.focus-two .focus-card { display: flex; min-width: 0; flex-direction: column; --focus-card-default: var(transparent); }
.focus-two .focus-card:nth-child(2n) { --focus-card-default: transparent; }
.focus-two .focus-card:nth-child(3n) { --focus-card-default: transparent; }
.focus-two .focus-card article {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 0;
  color: var(--white);
  background: var(--focus-card-background, var(--focus-card-default));
}
.focus-two .focus-card article > p:nth-of-type(2) { margin-bottom: 0; }
.focus-two .focus-card[data-focus-background-mode="transparent"] article { color: var(--ink); }
.focus-two .focus-card[data-focus-background-mode="transparent"] .snapshot-label { color: var(--blue-700); }
.focus-two .snapshot-label { color: #bfe8f8; }
.focus-card-media { width: 100%; margin: 24px 0 0; }
.focus-card-media.is-empty { display: none; }
.focus-card-media img { width: 100%; max-height: 220px; object-fit: contain; }
.focus-card-editor { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.focus-card-editor.is-open .builder-toolbar-panel { display: grid; }
.focus-card-editor .builder-toolbar-panel { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); text-align: left; }
.focus-card-editor label { display: grid; gap: 4px; font-size: .75rem; font-weight: 800; }
.focus-card-editor label[hidden] { display: none; }
.focus-card-editor select,
.focus-card-editor input,
.focus-card-editor .builder-toolbar-panel button { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white); font: 700 .78rem var(--font-sans); }
.focus-card-editor .builder-toolbar-panel button { cursor: pointer; }
.focus-card-editor .builder-toolbar-panel button:disabled { opacity: .5; cursor: not-allowed; }
.focus-card-editor input[aria-invalid="true"] { border-color: #b42318; outline: 2px solid #b42318; }
.focus-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
  font-size: .75rem;
}
.focus-controls button, .sample-controls select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.builder-content h2, .image-section h2 { max-width: none; }
.builder-content .section-intro { max-width: none; margin-bottom: 0; }
.builder-content, .image-section, .contact-section, .title-section {
  position: relative;
}
/* Content-category components use the existing widget card, not a page-colored
   or permanently transparent surface. Keep media/layout components independent. */
.component-surface > :is(.title-section,.text-only-section,.builder-content,.contact-section):not(.outcome-light,.outcome-dark) {
  width: var(--content);
  max-width: 100%;
  margin: 32px auto;
  padding: 24px;
}
.component-surface > :is(.text-only-section,.builder-content,.contact-section):not(.outcome-light,.outcome-dark) > .content-width { width:100%; }
.component-surface > :is(.title-section,.text-only-section),
.content-light, .outcome-light { background: var(--white); }
.content-dark, .outcome-dark { color: var(--white); background: var(--blue-900); }
.content-dark .eyebrow, .outcome-dark .eyebrow { color: #93d8ef; }
.content-dark .section-intro, .outcome-dark .section-intro { color: #d6e6ed; }
/* Outcome is an edge-to-edge band, not an inset Content card. The inner rail
   retains the existing responsive text gutter; no saved content is rewritten. */
.outcome-light, .outcome-dark { width:100%; margin:0; padding-block:var(--module-space); }
.outcome-light > .content-width, .outcome-dark > .content-width { width:min(var(--content),calc(100% - 48px)); }
.content-grey { background: #eeeeee; color: #000000; }
.content-warning { background: #ff6600; color: #ffffff; }
.builder-content:is(.content-grey, .content-warning) > .content-width > :is(.eyebrow, h2, .canvas-title-editor, .section-intro, .story-flow),
.builder-content:is(.content-grey, .content-warning) > .content-width > .story-flow > [data-flow-chunk="text"] > .story-editor > .story-rich-body { color: inherit; }
.builder-sample {
  display: grid;
  grid-template-columns: .38fr .62fr;
  gap: 54px;
  align-items: center;
  padding: 44px;
  border-radius: var(--surface-corner, 24px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.builder-sample.sample-right { grid-template-columns: .62fr .38fr; }
.builder-sample.sample-right .example-copy { order: 2; }
.builder-sample.sample-position-left { grid-template-columns: .62fr .38fr; }
.builder-sample.sample-position-left > .example-copy { order: 2; }
.builder-sample.sample-position-right { grid-template-columns: .38fr .62fr; }
.builder-sample.sample-position-right > .example-copy { order: 0; }
.builder-sample:is(.sample-position-top,.sample-position-bottom) { grid-template-columns: 1fr; }
.builder-sample.sample-position-top > :is(.sample-widget-area,.sample-legacy-image) { order: -1; }
.builder-sample.sample-position-bottom > .example-copy { order: 0; }
.builder-sample.sample-position-bottom > :is(.sample-widget-area,.sample-legacy-image) { order: 1; }
.sample-widget-area,.sample-legacy-image { min-width: 0; }
.sample-widget-area > .widget-stack { margin: 0; }
.sample-widget-area:not(:has([data-widget-record],[data-add-widget])), .sample-legacy-image:not(:has(.editable-media)) { display: none; }
.builder-sample:has(> .sample-widget-area:not(:has([data-widget-record],[data-add-widget]))), .builder-sample:has(> .sample-legacy-image:not(:has(.editable-media))) { grid-template-columns: 1fr; }
.sample-widget-area :is(.canvas-animated,.canvas-slider,.pdf-viewer,.content-widget) { max-width: 100%; min-width: 0; }
.sample-widget-insert { display:grid; gap:8px; padding:16px; border:1px dashed var(--line); border-radius:8px; color:var(--ink); background:var(--white); }
.sample-widget-insert button,.sample-legacy-image > button { padding:0 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--white); font:600 13px/1.3 var(--font-system); cursor:pointer; }
.sample-widget-insert small { font:12px/1.4 var(--font-system); }
.editing .builder-sample :is(.sample-legacy-image > .editable-media,.sample-widget-area .widget-image .editable-media).is-empty { min-height:100px; height:auto; margin-block:0; padding:44px 12px 12px; display:grid; place-items:center; }
.editing .builder-sample .image-section-frame:has(.editable-media.is-empty) { min-height:0; }
.builder-sample .example-copy h2 { margin-bottom: 16px; }
.builder-sample .example-copy .section-intro { margin-bottom: 0; }
@media (min-width: 901px) {
  .builder-sample .example-copy .section-intro { font-size: 24px; }
}
.builder-sample .example-copy,
.builder-sample .example-media { min-width: 0; }
.builder-sample .example-media img { width: 100%; height: auto; max-height: none; }
.builder-sample.sample-compare-card { display: block; }
.sample-compare-card > .example-copy { margin-bottom: 32px; }
.comparison-sample-set + .comparison-sample-set { margin-top:48px; }
.comparison-pair-heading { display:flex; align-items:start; gap:12px; margin-bottom:24px; }
.comparison-pair-heading > .story-flow { flex:1; min-width:0; }
.comparison-pair-heading .section-intro { margin:0; }
.sample-compare-card .eyebrow { margin-bottom: 8px; }
.sample-compare-card .sample-number { margin-bottom: 12px; }
.sample-compare-grid { display: grid; gap: 24px; align-items: start; }
.sample-compare-horizontal { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.sample-compare-vertical { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
.sample-compare-item, .sample-compare-divider { min-width: 0; }
.sample-compare-divider { align-self: center; text-align: center; }
.sample-compare-label { margin: 0; font-size: 24px; line-height: 1.2; }
.sample-compare-media { margin: 0; }
.sample-compare-media img { display: block; object-fit: contain; }
.sample-compare-caption { margin: 20px 0 0; text-align: center; font-size: 18px; line-height: 1.6; color: inherit; }
.sample-compare-caption p { color: inherit; }
/* Keep separator formatting above the images, not in the narrow VS column. */
.editing .sample-compare-divider,
.editing .sample-compare-divider > .canvas-title-editor { display: contents; }
.editing .sample-compare-divider .canvas-title-toolbar { grid-column: 1 / -1; grid-row: 1; }
.editing .sample-compare-label { align-self: center; text-align: center; }
.editing .sample-compare-horizontal > .sample-compare-item:first-child { grid-column: 1; grid-row: 2; }
.editing .sample-compare-horizontal .sample-compare-label { grid-column: 2; grid-row: 2; }
.editing .sample-compare-horizontal > .sample-compare-item:last-child { grid-column: 3; grid-row: 2; }
.editing .sample-compare-vertical > .sample-compare-item:first-child { grid-row: 2; }
.editing .sample-compare-vertical .sample-compare-label { grid-row: 3; }
.editing .sample-compare-vertical > .sample-compare-item:last-child { grid-row: 4; }
@media (max-width: 760px) {
  .sample-compare-horizontal { grid-template-columns: minmax(0, 1fr); }
  .sample-compare-grid { gap: 20px; }
  .sample-compare-card > .example-copy { margin-bottom: 24px; }
  .editing .sample-compare-horizontal > .sample-compare-item:first-child { grid-column: 1; grid-row: 2; }
  .editing .sample-compare-horizontal .sample-compare-label { grid-column: 1; grid-row: 3; }
  .editing .sample-compare-horizontal > .sample-compare-item:last-child { grid-column: 1; grid-row: 4; }
}
.sample-bullets { margin: 8px 0 0; padding-left: 1.3em; color: var(--ink); font-size: 18px; line-height: 1.6; }
/* One populated slot is a centered image, not half of an empty comparison. */
.sample-compare-grid.sample-compare-single { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
.editing .sample-compare-grid.sample-compare-single > .sample-compare-item { grid-column: 1; grid-row: auto; }
.sample-compare-additions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; width:100%; }
.comparison-type-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:20px; width:100%; }
.comparison-type-controls label { display:grid; gap:6px; min-width:0; font:600 13px/1.4 var(--font-system); }
.comparison-type-controls select { width:100%; min-width:0; }
@media (max-width:760px) {
  .sample-compare-additions, .comparison-type-controls { grid-template-columns:minmax(0,1fr); }
}
.sample-compare-item .swf-player, .sample-compare-addition .swf-player { min-width:0; width:100%; }
.sample-compare-additions:has(>.sample-compare-addition:only-child) { grid-template-columns:minmax(0,1fr); }
.sample-compare-addition { display:grid; align-content:start; gap:8px; min-width:0; font-size:12px; color:var(--muted); }
.editing .sample-compare-addition .sample-compare-add-media { width:100%; min-height:100px; margin:0; padding:44px 12px 12px; border:1px solid var(--line); border-radius:6px; background:transparent; outline:none; }
.editing .sample-compare-add-media:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.editing .sample-compare-add-media.dragging { outline: 2px dashed var(--gold); }
.sample-bullets[hidden] { display: none; }
.sample-bullets li + li { margin-top: 8px; }
.sample-bullets-editor { display: grid; gap: 6px; margin-top: 16px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.sample-bullets-editor small { font-size: inherit; font-weight: 500; }
.sample-bullets-editor textarea { width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--white); font: 400 18px/1.5 var(--font-sans); resize: vertical; }
.sample-bullets-editor textarea:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.sample-number { display: block; margin-bottom: 24px; color: var(--blue-700); font-weight: 800; }
.sample-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
  padding: 10px;
  border-radius: 8px;
  background: var(--blue-100);
  font-size: .75rem;
  font-weight: 700;
}
.sample-controls label { display: flex; gap: 7px; align-items: center; }
.sample-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.sample-section-actions button {
  padding: 10px 14px;
  border: 1px solid var(--blue-700);
  border-radius: 7px;
  color: var(--blue-700);
  background: var(--white);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.sample-section-actions button:hover,
.sample-section-actions button:focus-visible {
  color: var(--white);
  background: var(--blue-700);
}
.sample-section-actions button:disabled {
  opacity: .5;
  cursor: wait;
}
.number-small { font-size: 1rem; }
.number-medium { font-size: 2rem; }
.number-large { font-size: 4rem; line-height: 1; }
.text-link { color: var(--blue-700); font-weight: 800; }
.image-caption { color: var(--muted); text-align: center; }
.contact-section { color: var(--white); background: var(--blue-800); }
.contact-grid { display: grid; grid-template-columns: 1fr .6fr; gap: 70px; align-items: start; }
.contact-section .section-intro { color: #d9eaf1; }
.contact-actions { display: grid; gap: 12px; }
.contact-actions a { padding: 15px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-weight: 800; text-decoration: none; }

.section-insertion {
  position: relative;
  z-index: 15;
  display: grid;
  height: 0;
  place-items: center;
}
.section-insertion button {--button-height:var(--button-medium);
  display: grid;
  width:var(--button-medium);
  
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  background: var(--blue-700);
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.section-insertion button:hover,
.section-insertion button:focus-visible {
  color: var(--ink);
  background: var(--gold);
  outline: 3px solid rgba(244,195,68,.35);
}

.section-builder-tools {
  position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  display: flex;
  max-width: calc(100% - 28px);
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.image-section .section-builder-tools {
  display: grid;
  grid-template-columns: 32px auto;
  justify-items: end;
  align-items: start;
}
.image-section .section-builder-tools > .builder-toolbar-panel { grid-column: 1 / -1; }
.image-section-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: .72rem;
  font-weight: 700;
}
.image-section-options label { display: inline-flex; align-items: center; gap: 5px; }
.image-section-options select, .image-section-options input[type="text"] {
  max-width: 150px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
}
.image-section-options input[aria-invalid="true"] { border-color: #aa2035; outline: 2px solid #aa2035; }
.image-dimension-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: .72rem;
}
.image-dimension-group { display: grid; gap: 5px; min-width: 128px; }
.image-dimension-group strong { display: flex; justify-content: space-between; gap: 8px; }
.image-dimension-group output { white-space: nowrap; }
.image-dimension-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.image-dimension-row button {--button-height:var(--button-small); min-width:var(--button-small);  padding: 0; font-size: 1rem; }
.image-move-toggle { align-self: end; }
.image-move-toggle[aria-pressed="true"] { color: var(--white); background: var(--blue-700); }
.builder-toolbar-toggle,
.media-animation-toggle,
.text-animation-toggle {--button-height:var(--button-medium);
  display: grid;
  place-items: center;
  width:var(--button-medium);
  
  padding: 0;
  border: 1px solid rgba(23,43,58,.25);
  border-radius: 7px;
  color: var(--ink);
  background: rgba(255,255,255,.97);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font: 800 1rem/1 var(--font-sans);
  cursor: pointer;
}
.builder-toolbar-toggle:hover,
.builder-toolbar-toggle:focus-visible,
.media-animation-toggle:hover,
.media-animation-toggle:focus-visible,
.text-animation-toggle:hover,
.text-animation-toggle:focus-visible { background: var(--gold); outline: 0; }
.builder-toolbar-panel { display: none; flex-direction: column; align-items: flex-end; gap: 5px; }
.section-builder-tools.is-open .builder-toolbar-panel,
.widget-builder-tools.is-open .builder-toolbar-panel,
.section-visibility-control.is-open .builder-toolbar-panel { display: flex; }
.builder-toolbar-title {
  overflow: hidden;
  max-width: min(100%, 420px);
  padding: 5px 9px;
  border: 1px solid rgba(23,43,58,.18);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}
.builder-access-controls { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.builder-toolbar-actions .section-eye-toggle {--button-height:var(--button-large); display: grid; place-items: center; min-width:var(--button-large);  padding: 8px; color: var(--ink); background: var(--white); }
.section-eye-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.builder-toolbar-actions .section-eye-toggle[aria-pressed="true"] { background: var(--gold); }
.section-eye-toggle:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; }
.site-header.standalone-header { grid-template-columns: auto 1fr; }
.standalone-header .brand { pointer-events: none; }
.site-header.standalone-header nav { display: flex; margin-left: auto; justify-self: end; }
.standalone-contact { padding-top: 72px; padding-bottom: 72px; }
.manager-share-panel { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.manager-share-panel input { width: 100%; font-size: .8rem; }
.manager-share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.manager-share-status { overflow-wrap: anywhere; font-size: .85rem; }
.builder-toolbar-type {
  padding: 7px 10px;
  border: 1px solid rgba(23,43,58,.18);
  border-radius: 6px;
  color: var(--white);
  background: rgba(9,58,91,.96);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}
.builder-visibility-control,
.section-visibility-control .builder-toolbar-panel {
  gap: 7px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(23,43,58,.18);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font-size: .68rem;
  font-weight: 800;
}
.builder-visibility-control,
.section-visibility-control.is-open .builder-toolbar-panel { display: inline-flex; }
.hero-color-tools { right: 14px; }
.builder-hero .hero-color-tools { right: auto; left: 14px; align-items: flex-start; }
.hero-color-tools .builder-toolbar-panel { align-items: stretch; }
.hero-color-fields {
  display: grid;
  gap: 8px;
  width: min(280px, calc(100vw - 48px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: left;
}
.hero-color-fields label { display: grid; gap: 4px; }
.hero-color-fields input { width: 100%; padding: 7px 8px; border: 1px solid #9babb4; border-radius: 4px; font: inherit; }
.hero-color-fields input[aria-invalid="true"] { border-color: #b42318; outline: 2px solid #b42318; }
.hero-color-fields small { color: var(--muted); font-weight: 500; }
.hero-spacing-controls { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.hero-spacing-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-spacing-stepper output { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-spacing-controls button {--button-height:var(--button-medium);  }
.builder-visibility-control select,
.section-visibility-control select {
  /* Editor controls remain light even inside a dark content surface. */
  color-scheme: light;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
}
.section-visibility-control {
  position: absolute;
  z-index: 10;
  top: 14px;
  left: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.section-visibility-control .builder-toolbar-panel { margin-top: 5px; }
.editing .is-private-section {
  outline: 3px dashed #8b4bb1;
  outline-offset: -3px;
}
.editing .is-private-section::after {
  position: absolute;
  z-index: 9;
  right: 16px;
  bottom: 16px;
  content: "Private section";
  padding: 6px 9px;
  border-radius: 5px;
  color: var(--white);
  background: #6f2c91;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.section-builder-tools button {
  padding: 7px 10px;
  border: 1px solid rgba(23,43,58,.18);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.section-builder-tools button:hover { background: var(--gold); }
.section-builder-tools > .builder-toolbar-toggle,
.widget-builder-tools > .builder-toolbar-toggle {--button-height:var(--button-medium);
  width:var(--button-medium);
  
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}
.section-builder-tools button[aria-label^="Move"],
.widget-builder-tools button[aria-label^="Move"] {
  min-width: 32px;
  font-size: .95rem;
  line-height: 1;
}
.section-builder-tools .drag-handle, .widget-builder-tools .drag-handle { cursor: grab; }
.section-builder-tools .drag-handle:active, .widget-builder-tools .drag-handle:active { cursor: grabbing; }
.section-builder-tools .danger-control, .widget-builder-tools .danger-control { color: #9d1c12; }
.section-record { position: relative; }
.section-record.is-hidden {
  opacity: .48;
  filter: grayscale(.7);
}
.section-record.is-hidden::before {
  position: absolute;
  z-index: 9;
  top: 16px;
  left: 16px;
  content: "Hidden from visitors";
  padding: 6px 9px;
  border-radius: 5px;
  color: var(--white);
  background: #7a271a;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.editing #outcome.is-hidden {
  opacity: .55;
  outline: 3px dashed var(--gold);
  outline-offset: -3px;
}
.section-record.is-dragging, .content-widget.is-dragging { opacity: .35; }
.section-record.drop-target { box-shadow: inset 0 8px 0 var(--gold); }
.content-widget.drop-target { outline: 4px solid var(--gold); }
.widget-stack { display: grid; gap: 14px; margin-top: 38px; }
.widget-stack:not(:has([data-widget-record])) { display:none; }
.image-section-title:not(:has(h1,h2,h3,h4,h5,h6)) { display:none; }
.editing .content-widget[data-unused-media-widget]:not(:has(img)) { padding-block:0; gap:0; border:0; box-shadow:none; background:transparent; }
.widget-edit-unit { min-width: 0; }
.widget-edit-dock { display: grid; gap: 6px; margin-bottom: 8px; }
.widget-edit-dock[hidden] { display: none; }
.widget-edit-dock .story-format-toolbar { margin-bottom: 0; }
.story-rich-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.story-rich-body strong { font-weight: 800; }
.story-rich-body em { font-style: italic; }
.story-rich-body p { margin: 0 0 1em; font: inherit; color: inherit; }
.story-rich-body p:last-child { margin-bottom: 0; }
.cms-colored-text :is(p, li) { color: inherit !important; }
.need-card.visual-need-card .story-rich-body p { color: inherit; }
.story-rich-body { min-width: 0; }
.story-editor { min-width: 0; }
.canvas-title-editor { min-width: 0; }
.editing .example-copy { position:relative; }
.editing :is(h1,h2,h3,h4,h5,h6).unused-title:not(:focus) { min-height:0; height:0; padding:0; margin:0!important; overflow:visible; position:absolute; inset:0 0 auto; font:12px/24px var(--font-system); }
.editing :is(h1,h2,h3,h4,h5,h6).unused-title:not(:focus)::after { content:'Add title'; position:absolute; right:0; top:-24px; color:var(--muted); font:12px/24px var(--font-system); cursor:text; }
.editing .unused-title-editor:not(:focus-within) { display:contents; }
.editing .unused-title-editor:not(:focus-within) > .canvas-title-toolbar { display:none; }
.editing .cms-contextual-ribbon:not(.is-active-ribbon) { display: none !important; }
.text-size-buttons { display: inline-flex; align-items: center; gap: 4px; font: 12px/16px var(--font-system); }
.text-size-buttons output { min-width: 32px; text-align: center; } .text-size-buttons select { min-height: 20px !important; height: 20px !important; padding: 0 4px !important; font: 12px/16px var(--font-system) !important; }
.text-size-buttons button{--button-height:var(--button-small);   padding: 0 4px !important; font: 12px/16px var(--font-system) !important; }
.cms-sized-text > p, .cms-sized-text > ul, .cms-sized-text > ol, .cms-sized-text li { font-size: inherit; }
@media (max-width: 760px) {
  .canvas-title-block h2 { font-size: 28px; }
  .canvas-title-block .section-intro { font-size: 16px; line-height: 1.5; }
}
.canvas-rich-title { font-weight: 400; font-style: normal; white-space: pre-wrap; overflow-wrap: anywhere; }
.canvas-rich-title strong { font-weight: 800; }
.canvas-rich-title em { font-style: italic; }
.canvas-title-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px; border-radius: 6px; background: white; color: var(--ink); font: 12px/1.4 var(--font-system); text-align: left; }
.canvas-title-toolbar button {--button-height:var(--button-small);   padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font: 12px/16px var(--font-system); cursor: pointer; }
.canvas-title-toolbar button[aria-pressed="true"] { background: var(--gold); }
.canvas-title-toolbar label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font: inherit; }
.canvas-title-toolbar select { min-height: 20px; height: 20px; padding: 0 3px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); font: 12px/16px var(--font-system); }
.canvas-title-toolbar small { font: inherit; }
.visual-need-card-copy .story-format-toolbar, .visual-need-card-copy .story-link-panel { pointer-events: auto; }
.visual-need-card-copy > .story-editor,
.visual-need-card-copy > .story-flow { margin-top: auto; }
.sample-surface { background: transparent; color: var(--ink); border-radius: var(--surface-corner, 12px); padding: 32px 0; }
.sample-surface.surface-dark { background: var(--blue-900); color: var(--white); }
.sample-surface.surface-dark .builder-sample { background: transparent; }
.sample-surface.surface-dark .sample-number { color: #9edaf0; }
.sample-surface .sample-controls { color: var(--ink); color-scheme: light; }
.sample-surface.surface-dark .story-rich-body, .sample-surface.surface-dark .story-rich-body p { color: #d9e7ed; }
.sample-surface:not(.surface-dark) .story-rich-body { color: var(--muted); }
.story-rich-body ul, .story-rich-body ol { margin: .65em 0 1em; padding-inline-start: 0; list-style: none; white-space: normal; }
.story-rich-body ol { counter-reset: cms-list-item; }
.story-rich-body li { position: relative; margin-bottom: .3em; white-space: pre-wrap; }
.story-rich-body ul > li { padding-inline-start: calc(.5em + 8px); }
.story-rich-body ol > li { counter-increment: cms-list-item; padding-inline-start: calc(3ch + 8px); }
.story-rich-body li::before { position: absolute; inset-inline-start: 0; top: 0; color: inherit; font: inherit; }
.story-rich-body ul > li::before { content: '•'; width: .5em; text-align: left; }
.story-rich-body ol > li::before { content: counter(cms-list-item) '.'; width: 3ch; text-align: right; }
.story-rich-body a, .story-rich-body a * { color: var(--blue-700) !important; }
.story-rich-body a { text-decoration: underline; text-underline-offset: .15em; }
.story-format-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--ink); background: var(--white); color-scheme: light; padding: 6px; border-radius: 6px; font: 12px/16px var(--font-system); }
.story-format-toolbar button {--button-height:var(--button-small);
  min-width:var(--button-small);
  
  
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  cursor: pointer;
}
.story-format-toolbar button[aria-pressed="true"] { background: var(--gold); }
.text-alignment-buttons { display: inline-flex; gap: 3px; margin-left: 4px; }
.text-aligned-block { display: block !important; width: 100%; }
.table-structure-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; padding: 12px; background: #eef5f9; color: var(--ink); border-radius: 8px; font: 12px/1.4 var(--font-system); }
.table-structure-controls label { display: inline-flex; gap: 5px; align-items: center; margin: 0; }
.table-structure-controls input[type="number"] { width: 70px; }
.table-structure-controls input[type="checkbox"] { width: auto; } .table-structure-controls select, .table-structure-controls input { min-height: 28px; padding: 2px 6px; font: inherit; }
.table-structure-controls button{--button-height:var(--button-small);  padding: 2px 6px; font: inherit; }
.widget-table-grid .table-width-control-row > td { padding: 8px 12px; background: #eef5f9; color: var(--ink); border: 0 !important; font: 12px/1.4 var(--font-system); }
.table-width-control-row label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.table-width-control-row label span { display: flex; align-items: center; gap: 4px; }
.table-width-control-row input { width: 70px; max-width: calc(100% - 14px); min-width: 28px; height: 28px; padding: 2px 6px; font: inherit; }
.widget-table-scroll { max-width: 100%; overflow-x: auto; }
.widget-table-edit-frame { position: relative; min-width: 480px; }
.widget-table-edit-frame.is-editable-table { min-width: 516px; padding-right: 36px; padding-bottom: 76px; }
.table-row-delete-rail, .table-column-delete-rail { position: absolute; inset: 0; pointer-events: none; }
.table-trash {--button-height:var(--button-small); position: absolute; display: grid; place-items: center; width:var(--button-small);  padding: 0; border: 0; border-radius: 0; color: #777; background: transparent; font: 500 22px/1 var(--font-system); opacity: 0; pointer-events: auto; cursor: pointer; }
.table-trash svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.table-trash.is-hovered, .table-trash:hover, .table-trash:focus-visible { opacity: 1; }
.table-trash:hover { color: #b42318; background: transparent; }
.table-trash:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.table-trash:disabled { opacity: 0 !important; pointer-events: none; }
.table-column-trash { bottom: 40px; }
.table-row-insert-rail, .table-column-insert-rail { position: absolute; inset: 0; pointer-events: none; }
.table-row-insert, .table-column-insert {--button-height:var(--button-small); position: absolute; display: grid; place-items: center; width:var(--button-small);  padding: 0; border: 0; border-radius: 0; color: #777; background: transparent; font: 500 22px/1 var(--font-system); opacity: 0; pointer-events: auto; cursor: pointer; box-shadow: none; transform: translateX(-50%); }
.table-row-insert:hover, .table-column-insert:hover { color: var(--blue-700); }
.table-row-insert.is-hovered, .table-row-insert:hover, .table-row-insert:focus-visible, .table-row-append, .table-column-insert { opacity: 1; }
.table-row-insert:focus-visible, .table-column-insert:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.table-row-insert:disabled, .table-column-insert:disabled { opacity: .4; cursor: not-allowed; }
.table-row-append { bottom: 4px; }
.table-column-insert { bottom: 40px; }
@media (hover: none) { .table-trash, .table-row-insert { opacity: 1; } }
.widget-table-grid caption.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.widget-table-grid { width: 100%; min-width: 480px; border-collapse: collapse; table-layout: fixed; color: inherit; }
.widget-table-grid th, .widget-table-grid td { padding: 16px 12px; vertical-align: top; text-align: left; border: 0; overflow-wrap: anywhere; }
.widget-table-grid th { font-weight: 500; }
.widget-table-grid[data-table-border-style="rows"] tr:not(:last-child) > * { border-bottom: 1px solid var(--line); }
.widget-table-grid[data-table-border-style="all"] th, .widget-table-grid[data-table-border-style="all"] td { border: 1px solid var(--line); }
.widget-table-grid .story-rich-body { margin: 0; max-width: none; font-size: inherit; line-height: 1.5; color: inherit; }
.widget-table-grid .story-rich-body p { margin: 0 0 8px; }
.widget-table-grid .story-rich-body p:last-child { margin-bottom: 0; }
.widget-table-grid .story-rich-body ul, .widget-table-grid .story-rich-body ol { text-align: inherit; }
.widget-table-grid .story-editor { margin: 0; }
.table-cell-format[hidden] { display: none; }
.table-cell-format > small { display: block; margin: 0 0 4px; font: 12px/1.4 var(--font-system); color: var(--ink); }
.editing .widget-table-grid [data-table-cell].is-active-cell { outline: 2px solid var(--gold); outline-offset: -2px; }
.content-widget.widget-table[data-widget-color-set][data-background-state="opaque"] { background: var(--widget-background); color: var(--widget-ink); }
.content-widget.widget-table .widget-rich-title, .content-widget.widget-table .story-rich-body { color: inherit; }
.story-format-toolbar button:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.story-format-toolbar small { color: var(--muted); font-size: .7rem; }
.surface-dark .story-format-toolbar small { color: inherit; }
.story-color-label { display: flex; align-items: center; gap: 6px; font-size: .75rem; }
.story-color-label select { color-scheme: light; color: var(--ink); background: var(--white); min-height: 20px; height: 20px; max-width: 150px; padding: 0 2px; font: 12px/16px var(--font-system); }
.story-link-panel { margin: 0 0 16px; padding: 16px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.story-link-panel[hidden] { display: none; }
.story-link-panel label { display: grid; gap: 4px; margin-bottom: 12px; font-size: .8rem; }
.story-link-panel input[type="text"], .story-link-panel select { width: 100%; min-height: 40px; padding: 8px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.story-link-panel .story-link-target { display: flex; align-items: center; gap: 8px; }
.story-link-panel button {--button-height:var(--button-small); padding: 0 6px; margin-right: 8px;   font: 12px/16px var(--font-system); cursor: pointer; }
.story-link-panel [data-story-link-error] { margin: 8px 0 0; font-size: .8rem; color: #b42318; }
.component-surface > :is(.title-section,.text-only-section,.builder-content,.contact-section):not(.outcome-light,.outcome-dark),
.content-widget {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--surface-corner, 14px);
  box-shadow: 0 8px 30px rgba(9,58,91,.08);
}
.content-widget {
  display: grid;
  gap: 18px;
  padding: calc(var(--widget-vertical-space, 48px) / 2) 24px;
  color: var(--ink);
  background: var(--white);
}
.widget-builder-tools {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  display: flex;
  max-width: calc(100% - 16px);
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.widget-builder-tools .builder-toolbar-panel { align-items: flex-end; }
.widget-builder-tools .builder-toolbar-actions { gap: 6px; }
.widget-builder-tools button {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  font: inherit;
  font-size: .65rem;
  font-weight: 800;
  cursor: pointer;
}
.widget-height-controls {
  display: grid;
  gap: 8px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.widget-height-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.widget-height-actions output { min-width: 60px; font-variant-numeric: tabular-nums; }
.widget-height-controls small { font-size: .6rem; font-weight: 500; }
.widget-height-controls button { color: var(--ink); }
.widget-height-controls button:disabled { opacity: .4; cursor: not-allowed; }
.widget-background-controls { display: grid; gap: 8px; width: 240px; max-width: 100%; padding: 10px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; font: 12px/1.4 var(--font-system); }
.widget-background-controls label { display: grid; gap: 4px; }
.widget-background-controls [hidden] { display: none; }
.widget-background-controls select, .widget-background-controls input { width: 100%; min-width: 0; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--white); font: inherit; }
.widget-background-controls small { color: #b42318; }
.widget-background-controls small:empty { display: none; }
.widget-policy-note { max-width: 260px; padding: 8px; border-radius: 6px; color: var(--ink); background: #fff4d9; font: 12px/1.4 var(--font-system); }
.content-widget.is-hidden-widget { outline: 2px dashed #d09100; outline-offset: 4px; }
.content-widget.widget-text[data-widget-color-set][data-background-state="opaque"],
.content-widget.widget-teaser[data-widget-color-set][data-background-state="opaque"] { background: var(--widget-background); color: var(--widget-ink); }
.content-widget.widget-text[data-widget-color-set][data-background-state="opaque"] .story-rich-body,
.content-widget.widget-teaser[data-widget-color-set][data-background-state="opaque"] .story-rich-body { color: inherit; }
.content-widget.widget-text[data-widget-color-set][data-background-state="opaque"] .widget-rich-title,
.content-widget.widget-teaser[data-widget-color-set][data-background-state="opaque"] .widget-rich-title { color: inherit; }
.content-widget h3, .content-widget p { margin-bottom: 0; }
.widget-contact { display: block; container-type: inline-size; }
.widget-action-row { display:flex; justify-content:flex-start; min-width:0; text-align:left; }
.widget-action-row[data-button-align="center"] { justify-content:center; }
.widget-action-row[data-button-align="right"] { justify-content:flex-end; }
.content-widget.widget-link.widget-link { padding-inline:0; border:0; background:transparent; box-shadow:none; }
.widget-action-row .widget-action { margin:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; flex:0 1 auto; }
.widget-action-row .editable { display:inline; }
.builder-toolbar-panel :is([data-family-setting],[data-button-alignment],[data-list-preset]) { max-width:100%; min-width:0; padding:4px 6px; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:#fff; font:12px/1.4 var(--font-system); }
.widget-action {
  display: inline-flex;
  width: max-content;
  padding: 11px 15px;
  border-radius: var(--surface-corner, 7px);
  color: var(--white);
  background: var(--blue-700);
  font-weight: 800;
  text-decoration: none;
}
.widget-links { display: grid; gap: 8px; }
.widget-links > div {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.widget-links a { width: max-content; color: var(--blue-700); font-weight: 800; text-decoration: none; }
.widget-links a:hover { text-decoration: underline; }
.widget-link-description { max-width: 680px; margin: 0; color: var(--muted); font-size: .88rem; }
.widget-link-record.is-hidden { opacity: .45; }
.widget-link-controls { position: absolute; top: 10px; right: 0; display: flex; gap: 5px; }
.widget-link-controls button, .add-widget-link {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  font: inherit;
  font-size: .65rem;
  font-weight: 800;
  cursor: pointer;
}
.add-widget-link { width: max-content; margin-top: 4px; padding: 8px 11px; color: var(--white); background: var(--blue-700); }
.widget-url { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }
.widget-url-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 12px; margin-top: 12px; padding: 12px; border: 1px solid #c9d5df; border-radius: 8px; background: #f1f6fa; color: #172b3a; text-align: left; }
.widget-url-editor label { display: grid; gap: 4px; min-width: 0; font: 600 12px/1.4 Arial, sans-serif; }
.widget-url-editor input, .widget-url-editor select { width: 100%; min-width: 0; min-height: 36px; padding: 8px; border: 1px solid #9eb2c5; border-radius: 4px; background: white; color: #172b3a; font: 400 14px/1.4 Arial, sans-serif; }
.widget-url-editor small { grid-column: 1 / -1; font: 400 12px/1.4 Arial, sans-serif; }
.widget-url-editor input[aria-invalid="true"] { border: 2px solid #b50909; }
@media (max-width: 600px) { .widget-url-editor { grid-template-columns: minmax(0, 1fr); } }
.content-dark .content-widget, .outcome-dark .content-widget, .builder-hero .content-widget, .contact-section .content-widget {
  border-color: rgba(255,255,255,.18);
  color: var(--white);
  background: rgba(255,255,255,.09);
}
.content-dark .widget-action, .outcome-dark .widget-action, .builder-hero .widget-action, .contact-section .widget-action {
  color: var(--ink);
  background: var(--gold);
}
.content-dark .widget-url, .outcome-dark .widget-url, .builder-hero .widget-url, .contact-section .widget-url { color: #c5dbe5; }
.content-dark .widget-link-description, .outcome-dark .widget-link-description, .builder-hero .widget-link-description, .contact-section .widget-link-description { color: #d5e4eb; }
.compact-dialog { width: min(640px, calc(100vw - 32px)); }

.section-dialog {
  width: min(820px, calc(100vw - 32px));
  padding: 28px;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.section-dialog::backdrop { background: rgba(4,31,49,.78); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-heading h2 { margin-bottom: 22px; font-size: 1.5rem; }
.dialog-heading button { border: 0; background: none; font-size: 1.5rem; cursor: pointer; }
.section-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.section-type-grid button {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.section-type-grid button:hover { border-color: var(--blue-700); background: var(--blue-100); }
.section-type-grid button.is-current-type { border: 4px solid var(--blue-700); }
.section-change-warning { color: #b42318; font-weight: 700; }
.section-change-warning strong { font-weight: 800; }
.new-section-visibility {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px;
  border-radius: 9px;
  background: var(--blue-100);
  font-size: .85rem;
  font-weight: 800;
}
.new-section-visibility select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
}

.private-access-bar {
  position: fixed;
  z-index: 25;
  right: 32px;
  bottom: 0;
  left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(460px, calc(100vw - 64px));
  min-height: 64px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px 14px 0 0;
  color: var(--white);
  background: rgba(178,18,49,.97);
  box-shadow: 0 12px 36px rgba(74,0,16,.34);
  font-size: .82rem;
  backdrop-filter: blur(12px);
  transition: padding-bottom .32s ease;
}
.private-access-bar.is-unlocked {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(4,82,65,.97);
}
.private-access-copy { display: grid; gap: 2px; line-height: 1.35; }
.private-access-bar:not(.is-unlocked) .private-access-copy { padding-right: 54px; }
.private-access-copy strong { font-size: 1rem; letter-spacing: -.01em; }
.private-access-copy > span { color: rgba(255,255,255,.88); }
.private-access-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
  transition: grid-template-rows .32s ease, opacity .22s ease, transform .32s ease;
}
.private-access-reveal > .private-access-actions { min-height: 0; overflow: hidden; }
.private-access-bar.is-expanded .private-access-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.private-access-bar.is-expanded {
  bottom: 0;
  padding-bottom: 68px;
}
.private-access-actions { display: grid; gap: 8px; }
.private-password-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch !important;
}
.private-password-form input:not([type="hidden"]) { width: 100%; }
.private-access-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.private-access-request-link {
  width: max-content;
  max-width: 100%;
  color: var(--white);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.private-access-request-link:hover,
.private-access-request-link:focus-visible { color: var(--gold); }
.private-access-bar details { width: 100%; }
.private-access-bar summary {
  width: max-content;
  color: var(--white);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.private-access-bar details[open] summary { margin-bottom: 9px; }
.private-access-bar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.private-access-bar label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.private-access-bar input:not([type="hidden"]):not(.access-request-honeypot) {
  flex: 1 1 180px;
  min-width: 0;
  height: 44px;
  padding: 9px 12px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
}
.private-access-bar button {--button-height:var(--button-large);
  
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px;
  color: #701024;
  background: var(--white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.private-access-bar button:hover { color: var(--ink); background: var(--gold); }
.private-access-bar .private-access-toggle {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  --button-height:var(--button-large);
  width: var(--button-large);
  padding: 0;
  border-color: rgba(255,255,255,.55);
  border-radius: 50%;
  color: var(--white);
  background: rgba(87,0,17,.25);
}
.private-access-bar .private-access-toggle:hover,
.private-access-bar .private-access-toggle:focus-visible {
  color: var(--white);
  background: rgba(87,0,17,.5);
  outline: 3px solid rgba(255,255,255,.32);
}
.private-access-toggle > span {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(2px) rotate(225deg);
  transition: transform .28s ease;
}
.private-access-bar.is-expanded .private-access-toggle > span {
  transform: translateY(-2px) rotate(45deg);
}
.private-access-bar.is-unlocked button { color: var(--white); background: transparent; }
.private-access-bar.is-unlocked button:hover { color: var(--ink); background: var(--gold); }
.private-access-copy strong span { color: #8df0b4; }
.private-access-error { flex-basis: 100%; margin: 0; color: #ffd4cd; }
.access-request-success { margin: 0; padding: 10px 12px; border-radius: 7px; background: rgba(0,0,0,.2); font-weight: 750; }
.access-request-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.create-shell { min-height: calc(100vh - 76px); padding: 100px 0; }
.create-shell h1 { margin-bottom: 18px; font-size: clamp(3rem, 6vw, 5.5rem); }
.lede-dark { max-width: 760px; color: var(--muted); font-size: 1.25rem; }
.create-form { display: grid; gap: 36px; margin-top: 50px; }
.create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.create-form label, .create-form legend { font-weight: 800; }
.create-form input[type="text"], .create-form input:not([type]) {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #9babb4;
  border-radius: 7px;
  font: inherit;
}
.create-form fieldset { padding: 0; border: 0; }
.template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
.template-card { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; }
.template-card:has(input:checked) { border-color: var(--blue-700); box-shadow: 0 0 0 3px rgba(17,107,148,.15); }
.template-card span { color: var(--muted); font-size: .82rem; font-weight: 400; }

.editor-bar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 10px 24px;
  color: var(--ink);
  background: var(--gold);
}
.editor-bar > div:first-child { display: grid; line-height: 1.3; }
.editor-bar span { font-size: .78rem; }
.editor-actions { display: flex; gap: 10px; align-items: center; }
.editor-actions form { margin: 0; }
.editing .site-header { top: 70px; }
.button {
  display: inline-flex;
  justify-content: center;
  padding: 12px 18px;
  border: 0;
  border-radius: 7px;
  color: var(--white);
  background: var(--blue-800);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.button-light { color: var(--blue-900); background: var(--white); }
.button-quiet { color: var(--ink); background: transparent; outline: 1px solid rgba(23,43,58,.4); }
.editable-text { border-radius: 4px; outline: 0; transition: box-shadow .15s, background .15s; }
.editing section { position: relative; }
.editable-text:hover { background: rgba(244,195,68,.18); box-shadow: 0 0 0 5px rgba(244,195,68,.18); }
.editable-text:focus { background: var(--white); color: var(--ink); box-shadow: 0 0 0 5px var(--gold); }
.editable-media { position: relative; }
.editable-media figcaption { display: none; }
.editing .editable-media.is-empty:not(.need-card-background) { box-sizing:border-box; width:100%; min-height:100px; height:auto; margin-block:0; padding:44px 12px 12px; display:grid; align-content:center; justify-items:stretch; }
.editing .editable-media.is-empty figcaption { display:none; }
.editing .editable-media { cursor: pointer; outline: 2px dashed rgba(244,195,68,.75); outline-offset: 5px; }
.media-animation-controls {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 12px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100% - 24px));
  padding: 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  color: var(--white);
  background: rgba(6,31,48,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.editing .media-animation-controls.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.editing .media-animation-controls:popover-open { position:fixed; inset:auto; box-sizing:border-box; margin:0; width:min(360px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; opacity:1; visibility:visible; transform:none; transition:none; }
.media-animation-toggle {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
}
.editing .canvas-layer-image .media-animation-toggle { top: 6px; left: 6px; }
.media-animation-controls label {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
}
.media-animation-controls select {
  min-width: 0;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: .7rem;
}
.editing .editable-media figcaption { display:none; }
.media-image-link { display:contents; }
.media-image-link:focus-visible img { outline:3px solid var(--blue-600); outline-offset:-3px; }
.editing .media-slot-actions { position:absolute; inset:auto 12px 12px; z-index:7; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; min-width:0; min-height:100px; padding:8px; border-radius:6px; background:#ffffffed; color:var(--ink); }
.editing .editable-media.is-empty .media-slot-actions { position:static; padding:0; background:transparent; }
.media-slot-actions button { --button-height:var(--button-large); box-sizing:border-box; min-width:0; white-space:normal; line-height:1.2; padding:0 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--white); font-family:var(--font-system); cursor:pointer; }
.editing .media-slot-actions .remove-media { position:static; }
.editing .editable-media.is-empty .media-slot-actions button { flex:1 1 130px; }
.editing .hero-holder-tools .media-animation-toggle { top:0; left:0; }
.editing .hero-holder-tools .media-slot-actions { position:static; inset:auto; min-height:0; padding:0; justify-content:start; background:transparent; }
.editing .hero-holder-tools .media-animation-controls { display:none; position:static; width:100%; margin:8px 0; transform:none; }
.editing .hero-holder-tools .media-animation-controls.is-open { display:grid; }
[data-hero-holder-settings] { display:grid; gap:8px; }
[data-hero-holder-settings] label { grid-template-columns:90px minmax(0,1fr); }
[data-hero-holder-settings] input { width:100%; min-width:0; font:inherit; }
[data-hero-holder-settings] p { margin:0; font-family:var(--font-system); font-size:12px; line-height:1.5; }
.editing .image-section-frame .wide-media.is-empty { overflow:visible; width:100%; max-width:100%; }
.image-link-options { display:grid; gap:8px; grid-column:1/-1; width:100%; min-width:0; }
[data-image-size-controls] { display:grid; gap:8px; min-width:0; }
[data-image-size-controls] input, [data-image-size-controls] select { width:100%; min-width:0; font:inherit; }
[data-image-size-controls] p { margin:0; font:12px/1.5 var(--font-system); }
.editable-media[data-image-size-custom] img[data-media-image] { width:min(var(--image-requested-width),100%); height:auto; max-width:100%; max-height:none; object-fit:contain; scale:1; }
.sample-compare-grid .editable-media[data-image-size-custom] img[data-media-image] { width:calc(var(--image-requested-width) * var(--comparison-image-fit,1)); margin-inline:auto; }
.hero-media-holder[data-image-size-custom] .hero-image-art { width:min(100%,var(--image-base-width)); aspect-ratio:var(--image-native-ratio); display:block; margin:auto; }
.hero-media-holder[data-image-size-custom] .hero-image-art img[data-media-image],
.need-card-background[data-image-size-custom] img[data-media-image] { position:absolute; top:50%; left:50%; translate:-50% -50%; width:var(--image-requested-width); height:var(--image-requested-height); max-width:none; max-height:none; object-fit:contain; scale:1; }
.swf-screen[data-image-size-custom] > .swf-poster { inset:auto; top:50%; left:50%; translate:-50% -50%; width:min(var(--image-requested-width),100%); height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.image-link-actions { display:flex; flex-wrap:wrap; gap:8px; }
.image-link-actions button { padding-inline:10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--white); font-family:var(--font-system); cursor:pointer; }
.image-link-actions button:disabled { cursor:default; opacity:.6; }
.image-link-panel { display:grid; gap:8px; min-width:0; }
.image-link-panel[hidden] { display:none; }
.media-animation-controls .image-link-panel label { grid-template-columns:minmax(0,1fr); }
.media-animation-controls .image-link-panel label:has(input[type=checkbox]) { display:flex; }
.image-link-panel input[type=text], .image-link-panel select { box-sizing:border-box; width:100%; min-width:0; }
.image-link-panel [data-image-link-error] { margin:0; color:inherit; }
.editing :is(.canvas-media-controls,.slider-edit-controls,.swf-poster-controls,[data-canvas-animated] .add-actions) { box-sizing:border-box; min-height:100px; width:100%; }
.editable-media.dragging { outline: 8px solid var(--gold); }
.editable-media.uploading { opacity: .55; }

html.media-animations-ready .editable-media[data-entry-animation="fade"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="fade"]:not(.is-in-view) { opacity: 0; }
html.media-animations-ready .editable-media[data-entry-animation="slide-right"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="slide-right"]:not(.is-in-view) { opacity: 0; transform: translateX(50px); }
html.media-animations-ready .editable-media[data-entry-animation="slide-left"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="slide-left"]:not(.is-in-view) { opacity: 0; transform: translateX(-50px); }
html.media-animations-ready .editable-media[data-entry-animation="slide-above"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="slide-above"]:not(.is-in-view) { opacity: 0; transform: translateY(-50px); }
html.media-animations-ready .editable-media[data-entry-animation="slide-below"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="slide-below"]:not(.is-in-view) { opacity: 0; transform: translateY(50px); }
html.media-animations-ready .editable-media[data-entry-animation="rotate-ccw"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="rotate-ccw"]:not(.is-in-view) { opacity: 0; transform: rotate(90deg); }
html.media-animations-ready .editable-media[data-entry-animation="rotate-cw"]:not(.is-in-view) img,
html.media-animations-ready .canvas-layer[data-entry-animation="rotate-cw"]:not(.is-in-view) { opacity: 0; transform: rotate(-90deg); }

.editable-media[data-entry-animation="fade"].is-in-view img,
.canvas-layer[data-entry-animation="fade"].is-in-view { animation: media-fade-in 2s ease both; }
.editable-media[data-entry-animation="slide-right"].is-in-view img,
.canvas-layer[data-entry-animation="slide-right"].is-in-view { animation: media-slide-right 2s ease both; }
.editable-media[data-entry-animation="slide-left"].is-in-view img,
.canvas-layer[data-entry-animation="slide-left"].is-in-view { animation: media-slide-left 2s ease both; }
.editable-media[data-entry-animation="slide-above"].is-in-view img,
.canvas-layer[data-entry-animation="slide-above"].is-in-view { animation: media-slide-above 2s ease both; }
.editable-media[data-entry-animation="slide-below"].is-in-view img,
.canvas-layer[data-entry-animation="slide-below"].is-in-view { animation: media-slide-below 2s ease both; }
.editable-media[data-entry-animation="rotate-ccw"].is-in-view img,
.canvas-layer[data-entry-animation="rotate-ccw"].is-in-view { animation: media-rotate-ccw 2s ease both; }
.editable-media[data-entry-animation="rotate-cw"].is-in-view img,
.canvas-layer[data-entry-animation="rotate-cw"].is-in-view { animation: media-rotate-cw 2s ease both; }

@keyframes media-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes media-slide-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes media-slide-left { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes media-slide-above { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
@keyframes media-slide-below { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes media-rotate-ccw { from { opacity: 0; transform: rotate(90deg); } to { opacity: 1; transform: none; } }
@keyframes media-rotate-cw { from { opacity: 0; transform: rotate(-90deg); } to { opacity: 1; transform: none; } }

@media (hover: hover) {
  [data-hover-animation="zoom"] img {
    transform-origin: center;
    transition: transform .5s ease;
  }
  [data-hover-animation="zoom"]:hover img { transform: scale(1.15); }
}
.editing .editable-media[data-entry-animation] img,
.editing .canvas-layer[data-entry-animation] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.text-animation-inline { display: inline-block; }
html.text-animations-ready body:not(.editing) [data-text-entry-animation="fade"]:not(.is-text-in-view) { opacity: 0; }
html.text-animations-ready body:not(.editing) [data-text-entry-animation="slide-right"]:not(.is-text-in-view) { opacity: 0; transform: translateX(20px); }
html.text-animations-ready body:not(.editing) [data-text-entry-animation="slide-left"]:not(.is-text-in-view) { opacity: 0; transform: translateX(-20px); }
html.text-animations-ready body:not(.editing) [data-text-entry-animation="slide-above"]:not(.is-text-in-view) { opacity: 0; transform: translateY(-20px); }
html.text-animations-ready body:not(.editing) [data-text-entry-animation="slide-below"]:not(.is-text-in-view) { opacity: 0; transform: translateY(20px); }

body:not(.editing) [data-text-entry-animation="fade"].is-text-in-view { animation: text-fade-in .8s ease both; }
body:not(.editing) [data-text-entry-animation="slide-right"].is-text-in-view { animation: text-slide-right .8s ease both; }
body:not(.editing) [data-text-entry-animation="slide-left"].is-text-in-view { animation: text-slide-left .8s ease both; }
body:not(.editing) [data-text-entry-animation="slide-above"].is-text-in-view { animation: text-slide-above .8s ease both; }
body:not(.editing) [data-text-entry-animation="slide-below"].is-text-in-view { animation: text-slide-below .8s ease both; }

@keyframes text-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes text-slide-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes text-slide-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes text-slide-above { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes text-slide-below { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (hover: hover) {
  body:not(.editing) [data-text-hover-animation="grow"] {
    transform-origin: center;
    transition: transform .5s ease;
  }
  body:not(.editing) [data-text-hover-animation="grow"]:hover { transform: scale(1.05); }
}

.text-animation-controls {
  position: absolute;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 20px));
  padding: 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  color: var(--white);
  background: rgba(6,31,48,.97);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.text-animation-toggle { position: absolute; z-index: 61; }
.editable-text.title-aligned-center { max-width: none; }
.text-animation-controls[hidden],
.text-animation-toggle[hidden] { display: none !important; }
.title-style-options {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.24);
}
.title-style-options[hidden] { display: none; }
.title-style-row { display: flex; align-items: center; gap: 6px; }
.title-style-row > span { flex: 0 0 62px; font-size: .68rem; font-weight: 800; }
.title-style-row button {--button-height:var(--button-small);
  min-width:var(--button-small);
  
  
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: .7rem;
  line-height: 16px;
  font-weight: 800;
  cursor: pointer;
}
.title-style-row button[aria-pressed="true"] { color: var(--white); background: #116b94; }
.title-style-row button:disabled { opacity: .45; cursor: not-allowed; }
.title-style-row output { min-width: 42px; text-align: center; font-size: .7rem; font-weight: 800; }
.text-animation-controls label {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
}
.text-animation-controls select {
  color-scheme: light;
  min-width: 0;
  width: 100%;
  min-height: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: .7rem;
  line-height: 16px;
}

.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
}
.login-card { width: min(520px, 100%); padding: 48px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow); }
.login-card h1 { margin-bottom: 20px; font-size: 2.5rem; }
.login-card label { display: block; margin: 24px 0 6px; font-weight: 800; }
.login-card input { width: 100%; margin-bottom: 16px; padding: 14px; border: 1px solid #9babb4; border-radius: 6px; font: inherit; }
.form-error { color: #b42318; font-weight: 700; }
.quiet-link { display: inline-block; margin-top: 22px; color: var(--muted); font-size: .85rem; }

@media (max-width: 900px) {
  /* Keep the locked mobile banner compact until its password form opens. */
  .private-access-bar:not(.is-unlocked):not(.is-expanded) { row-gap: 0; }
  .private-access-bar:not(.is-unlocked):not(.is-expanded) .private-access-copy > span { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .home-icon-link { display: none; }
  .mobile-menu-toggle { display: grid; }
  .mobile-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: grid-template-rows .28s ease, opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
  }
  .mobile-navigation.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .mobile-navigation-inner {
    min-height: 0;
    overflow: hidden;
    color: var(--white);
    background: #061f30;
    box-shadow: 0 18px 30px rgba(0,0,0,.26);
  }
  .mobile-navigation.is-open .mobile-navigation-inner {
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .mobile-navigation-inner > a,
  .mobile-navigation summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-navigation-inner > a:hover,
  .mobile-navigation-inner > a:focus-visible,
  .mobile-navigation summary:hover,
  .mobile-navigation summary:focus-visible { background: rgba(255,255,255,.09); }
  .mobile-navigation details > summary { cursor: pointer; list-style: none; }
  .mobile-navigation details > summary::-webkit-details-marker { display: none; }
  .mobile-navigation details[open] > summary span { transform: rotate(180deg); }
  .mobile-navigation summary span { transition: transform .2s ease; }
  .mobile-case-study-links { display: grid; padding: 4px 16px 12px 34px; background: rgba(0,0,0,.18); }
  .mobile-case-study-links a {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #d7eaf3;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-case-study-links a:last-child { border-bottom: 0; }
  .mobile-case-study-links .mobile-subnav > summary {
    min-height: 44px;
    padding: 10px 8px;
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #d7eaf3;
  }
  .mobile-tertiary-links { display: grid; padding: 0 0 6px 14px; }
  .mobile-tertiary-links a { font-weight: 600; }
  .mobile-case-study-links a[aria-current="page"] { color: var(--gold); }
  .mobile-case-study-links a:hover,
  .mobile-case-study-links a:focus-visible { color: var(--gold); }
  .create-link { display: none; }
  .nav-tools .create-link { display:inline-flex; padding:8px; }
  .nav-tools .create-link span { display:none; }
  .nav-tools { gap:6px; }
  .hero { grid-template-columns: 1fr; padding: var(--header-padding-y, 48px) 24px calc(var(--header-padding-y, 48px) + 36px); }
  .builder-hero { padding: var(--header-padding-y, 48px) 0 calc(var(--header-padding-y, 48px) + 36px); }
  .case-study-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    row-gap:32px;
  }
  .hero-media-holder:first-child > .hero-image-mask,
  .hero-media-holder:last-child > .hero-image-mask { grid-area:auto; width:100%; transform:none; align-self:start; justify-self:stretch; }
  .hero-media-holder:first-child > .hero-holder-tools,
  .hero-media-holder:last-child > .hero-holder-tools { grid-area:auto; padding-top:32px; }
  .editing .hero-visual { row-gap:0; }
  .editing .hero-media-holder:last-child > .hero-image-mask { margin-top:32px; }
  .editing .hero-visual[data-hero-image-count="0"] { grid-template-rows:auto; }
  .editing .hero-visual[data-hero-image-count="0"] .hero-media-holder:is(:first-child,:last-child) > .hero-image-mask { grid-column:1; height:200px; }
  .snapshot { grid-template-columns: 1fr; }
  .snapshot > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .split, .outcome-grid { grid-template-columns: 1fr; gap: 40px; }
  .card-grid, .process-grid { grid-template-columns: 1fr; }
  .visual-need-card { width: min(100%, 520px); min-height: 0; justify-self: center; }
  .focus-highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-highlights-grid:has(> .visual-need-card:only-child) { grid-template-columns: 1fr; }
  .example, .example:nth-of-type(even) { grid-template-columns: 1fr; padding: 28px; }
  .example:nth-of-type(even) .example-copy { order: initial; }
  .example-order-tools {
    top: 14px;
    right: 14px;
    grid-auto-flow: column;
    transform: none;
  }
  .trophy { max-width: 220px; }
  .builder-sample, .builder-sample.sample-right, .contact-grid { grid-template-columns: 1fr; }
  .builder-sample.sample-right .example-copy { order: initial; }
  .builder-sample[class*="sample-position-"] { grid-template-columns: 1fr; }
  .builder-sample:is(.sample-position-left,.sample-position-right) > .example-copy { order: 0; }
  .widget-contact { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr 1fr; }
  .section-type-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-header .brand span { display:none; }
  .focus-highlights-grid { grid-template-columns: 1fr; }
  :root { --site-content: calc(100vw - 32px); }
  .site-header { padding: 0 16px 0 0; }
  .project-meta { grid-template-columns: 1fr; }
  .wide-media { padding: 18px; }
  .editor-bar { align-items: flex-start; }
  .editor-bar > div:first-child span { display: none; }
  .editor-actions #undo-button, .editor-actions #redo-button { display: none; }
  .create-fields, .template-grid, .section-type-grid { grid-template-columns: 1fr; }
  .new-section-visibility { grid-template-columns: 1fr; }
  .media-animation-controls {
    top: 56px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  .private-access-bar { right: 12px; bottom: 0; left: auto; width: min(460px, calc(100vw - 24px)); padding: 15px; }
  .private-access-bar.is-unlocked { grid-template-columns: 1fr; align-items: stretch; }
  .private-access-bar .private-password-form { grid-template-columns: minmax(0, 1fr); }
  .private-access-bar .request-access-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .private-access-error,
  .access-request-success { grid-column: 1 / -1; }
  .focus-items { grid-template-columns: 1fr; }
  .focus-one { margin-top: var(--banner-margin-top,32px); }
  .focus-items article + article { border-top: 1px solid var(--line); border-left: 0; }
  footer { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card-position-tools { transition: none; }
  .canvas-image-size-tools {
    transition: opacity 0s linear 1.5s, visibility 0s linear 1.5s;
  }
  .canvas-layer-image:hover .canvas-image-size-tools,
  .canvas-layer-image:focus-within .canvas-image-size-tools,
  .canvas-image-size-tools:hover { transition: none; }
  body.editing .visual-card-position-tools.is-open.is-fading { transition: opacity 0s linear 1.5s; }
  html { scroll-behavior: auto; }
  .editable-media[data-entry-animation] img,
  .canvas-layer[data-entry-animation],
  [data-hover-animation] img,
  [data-text-entry-animation],
  [data-text-hover-animation] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .media-animation-controls { transition: none; }
  .private-access-reveal,
  .private-access-toggle > span,
  .mobile-navigation,
  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after,
  .mobile-navigation summary span { transition: none; }
}
.story-editor { position: relative; }
.story-flow { min-width: 0; }
.story-flow > .inline-widget-block { margin: 20px 0; }
.inline-widget-block > .widget-stack { margin: 0; }
.inline-widget-rail { position: absolute; inset: 0 0 auto auto; width: 24px; pointer-events: none; }
.inline-widget-insert {--button-height:var(--button-small); border: 0!important; background: transparent!important; color: #0866c6!important; box-shadow: none!important; padding: 0!important; width:var(--button-small);  min-height: 0!important; font: 600 18px/24px system-ui,sans-serif; cursor: pointer; pointer-events: auto; }
.inline-widget-rail > .inline-widget-insert { position: absolute; right: 0; }
.inline-widget-insert, .section-insertion button { opacity: .5; transition: opacity .15s ease; }
.inline-widget-insert:hover, .inline-widget-insert:focus-visible,
.section-insertion button:hover, .section-insertion button:focus-visible { opacity: 1; }
.inline-widget-insert:hover { color: #093a5b!important; }
.inline-widget-insert:focus-visible { outline: 2px solid #0866c6; outline-offset: 1px; border-radius: 3px; }
.inline-widget-slot { display: flex; justify-content: flex-end; min-height: 24px; margin: 4px 0; }
.component-widget-end { padding-inline: 24px; }
.inline-slot-copy:empty { display: none; }
body:not(.editing) .story-rich-body > p:empty { display: none; }
.editing .is-hidden-title { display:none!important; }
.has-collapsed-title { position:relative; height:0; min-height:0; margin:0!important; padding:0!important; }
.has-collapsed-title .canvas-title-toolbar { display:none!important; }
.restore-hidden-title {--button-height:var(--button-small); position:absolute; right:0; top:-20px; z-index:5;   padding:0 6px!important; font:11px/20px var(--font-system)!important; background:#eef5f9; color:#425b6a; border:1px dashed #84939b; }
.restore-hidden-title[hidden] { display:none!important; }
.content-widget:has(> .has-collapsed-title) > .inline-widget-slot { height:0; min-height:0; margin:0; position:relative; }
.widget-table > .story-flow:has(.story-rich-body > p:only-child:empty):not(:has(.inline-widget-block)) { min-height:0; height:0; margin:0; overflow:hidden; }

.content-popup { width:min(1000px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); padding:40px 24px 24px; border:0; border-radius:var(--surface-corner,16px); color:var(--ink); background:#fff; box-shadow:0 24px 70px #0004; overflow:auto; }
.content-popup::backdrop { background:rgba(0,0,0,.35); }
.content-popup > .widget-edit-unit > .content-widget, .content-popup > .content-widget { margin:0; border:0; box-shadow:none; min-height:280px; gap:0; align-content:start; }
:is(.content-popup > .widget-edit-unit > .content-widget, .content-popup > .content-widget) > .canvas-title-editor { margin-bottom:32px; }
:is(.content-popup > .widget-edit-unit > .content-widget, .content-popup > .content-widget) > .inline-widget-slot { height:0; min-height:0; margin:0; position:relative; }
.content-popup-close {--button-height:var(--button-small); position:absolute; top:10px; right:12px; width:var(--button-small);  padding:0; z-index:20; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:4px; font:24px/24px var(--font-system); cursor:pointer; }
.content-popup-save {--button-height:var(--button-small); position:absolute; top:10px; right:52px; width:var(--button-small);  padding:4px; z-index:20; border:1px solid var(--line); border-radius:4px; background:#eef5f9; color:var(--ink); font:12px/20px var(--font-system); }
.content-popup-save svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.content-popup-save.is-dirty { color:#b42318; }
.content-popup-save.is-dirty::after { content:''; position:absolute; top:2px; right:2px; width:6px; height:6px; border-radius:50%; background:#b42318; box-shadow:0 0 0 1px #fff; }
.content-popup-save [data-popup-save-status] { position:absolute; right:34px; top:3px; white-space:nowrap; }
[data-rich-align] { display:block; }
[data-rich-line="yes"] { display:block; min-height:1em; }
[data-rich-size] { font-size:var(--rich-size) !important; }
@media (max-width:760px) {
  [data-rich-size], [data-rich-size-mobile] { font-size:var(--rich-mobile-size,var(--rich-size,inherit)) !important; }
}
.popup-edit-launch { display:none!important; }
.cms-popup-picker { width:min(460px,calc(100vw - 32px)); padding:24px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fff; box-shadow:var(--shadow); }
.cms-popup-picker::backdrop { background:#0006; }
.cms-popup-picker h2 { margin:0 0 16px; font:700 22px/1.2 var(--font-system); }
.cms-popup-picker label { display:grid; gap:6px; font:13px/1.4 var(--font-system); }
.cms-popup-picker [hidden] { display:none!important; }
.cms-popup-picker input, .cms-popup-picker select { width:100%; min-height:36px; padding:6px 8px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); font:14px var(--font-system); }
.popup-picker-modes, .popup-picker-actions { display:flex; gap:8px; margin:16px 0; }
.popup-picker-actions { justify-content:flex-end; margin-bottom:0; }
.cms-popup-picker button { padding:6px 10px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); cursor:pointer; font:13px var(--font-system); }
.cms-popup-picker button[aria-pressed="true"] { background:var(--gold); }
.cms-popup-picker button:disabled { opacity:.5; cursor:default; }
.popup-picker-note { margin:12px 0 0; font:12px/1.5 var(--font-system); color:#536b79; }
.cms-popup-picker [data-popup-picker-error] { color:#b42318; font:12px/1.5 var(--font-system); }
a[data-popup-widget]:not(.popup-unavailable)::after { content:''; display:inline-block; width:14px; height:14px; margin-left:5px; vertical-align:baseline; background:var(--blue-700,#116b94); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h6v3H4v8h8V9h3v6H1zM9 1h6v6h-3V6L7 11 5 9l5-5H9z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h6v3H4v8h8V9h3v6H1zM9 1h6v6h-3V6L7 11 5 9l5-5H9z'/%3E%3C/svg%3E") center/contain no-repeat; }
a[data-popup-icon="yes"] { display:inline-block; font-size:0; min-width:20px; line-height:20px; vertical-align:middle; }
a[data-popup-icon="yes"]::after { margin-left:3px!important; vertical-align:middle!important; }
a[data-popup-icon="yes"].popup-unavailable { display:none; }
a.popup-unavailable { color:inherit; text-decoration:none; cursor:default; }
body:has(.content-popup[open]) { overflow:hidden; }
.ribbon-icon-button { width:24px!important; padding:2px 4px!important; display:inline-flex!important; align-items:center; justify-content:center; }
.ribbon-icon-button img, .ribbon-color-icon { display:inline-block; width:15px; height:15px; object-fit:contain; }
.ribbon-icon-active, .ribbon-icon-button[aria-pressed="true"]:has(.ribbon-icon-active) .ribbon-icon-normal { display:none!important; }
.ribbon-icon-button[aria-pressed="true"] .ribbon-icon-active { display:block!important; }
.ribbon-popup-button { width:auto!important; gap:3px; }
@media(max-width:760px) { .content-popup { padding:40px 12px 16px; } .content-popup .content-widget { padding:16px 12px; } }
.title-visibility-label{font-size:10px}
.text-animation-controls .title-visibility-switch{--button-height:var(--button-small);width:36px;padding:2px;border:0;border-radius:12px;background:#436e95;display:inline-flex;align-items:center;justify-content:flex-start}
.title-visibility-switch span{display:block;width:16px;height:16px;border-radius:50%;background:#fff}
.text-animation-controls .title-visibility-switch[aria-checked="false"]{background:#6c7881;justify-content:flex-end}
.cms-icon-tooltip { position:fixed; z-index:100000; box-sizing:border-box; width:max-content; max-width:min(240px,calc(100vw - 16px)); padding:4px 8px; border:1px solid #ffffff40; border-radius:4px; background:#172d3c; color:#fff; box-shadow:0 3px 10px #0003; font:12px/18px var(--font-system); text-align:center; white-space:normal; overflow-wrap:anywhere; pointer-events:none; }
.cms-icon-tooltip[hidden] { display:none!important; }

/* Management controls reserve space: expanded panels never cover content controls. */
.editing :is(.section-builder-tools, .widget-builder-tools, .section-visibility-control) {
  position: relative;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 16px;
  gap: 8px;
}
.editing :is(.section-builder-tools, .widget-builder-tools, .section-visibility-control) > .builder-toolbar-panel {
  max-width: 100%;
  min-width: 0;
}
.editing .builder-toolbar-actions { max-width: 100%; }
.editing .builder-access-controls { flex-wrap: wrap; }
.editing .builder-toolbar-actions > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.editing .canvas-media-stage { isolation: isolate; }

/* Per-component content width. Defaults preserve the site's existing layout. */
[data-component-width="constrained"] { --content: var(--site-content); }
[data-component-width="full"] { --component-gutter: 32px; --content: calc(100vw - 64px); }
[data-component-width="full"] :is(h1, .lede, .sample-compare-vertical, .sample-compare-single) { max-width: none; }
[data-component-width="full"] .hero-content { width: auto; max-width: none; }
.hero[data-component-width="full"] { padding-inline: var(--component-gutter); }
[data-component-width="full"] .focus-highlights-grid > .focus-edit-unit,
[data-component-width="full"] .focus-highlights-grid .visual-need-card { max-width: none; }

/* Repeatable banner walls. Empty spacing settings retain the previous theme. */
[data-component-edges="straight"] { --surface-corner: 0px; }
[data-component-edges="curved"] { --surface-corner: initial; }
[data-banner] > :is(.focus-items, .focus-highlights-grid),
.editing [data-banner] > :is(.focus-items, .focus-highlights-grid) {
  row-gap: var(--banner-row-gap, var(--banner-theme-row-gap, 0px));
  column-gap: var(--banner-column-gap, var(--banner-theme-column-gap, 0px));
}
[data-banner].focus-two { --banner-theme-row-gap: 18px; --banner-theme-column-gap: 18px; }
[data-banner].focus-highlights { --banner-theme-row-gap: 22px; --banner-theme-column-gap: 22px; }
/* Same Curved/Straight contract and curved fallback as .content-widget. */
[data-banner] :is(.focus-items,.focus-card > article,.focus-edit-unit > article,.visual-need-card) { border-radius:var(--surface-corner,14px); }
.banner-overlap-control { display:inline-flex!important; align-items:center; gap:8px!important; }
.banner-overlap-control input[type="checkbox"] { width:20px; height:20px; min-height:20px; margin:0; padding:0; flex:none; accent-color:var(--blue-700); }
/* Margin overrides reuse the existing content rail and never restyle cards. */
.builder-focus:not(.focus-one) { margin-top:var(--banner-margin-top,0px); }
.builder-focus, .snapshot { margin-bottom:var(--banner-margin-bottom,0px); }
.banner-margin-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; }
.banner-margin-controls input { width:80px; max-width:100%; }
[data-banner-margin-horizontal] > :is(.focus-items,.focus-highlights-grid),
.snapshot[data-banner-margin-horizontal] {
  --banner-rail:min(var(--content),100%);
  --banner-inset-left:min(var(--banner-margin-left,0px),max(0px,calc((var(--banner-rail) - min(240px,var(--banner-rail))) / 2)));
  --banner-inset-right:min(var(--banner-margin-right,0px),max(0px,calc((var(--banner-rail) - min(240px,var(--banner-rail))) / 2)));
  width:calc(var(--banner-rail) - var(--banner-inset-left) - var(--banner-inset-right));
  margin-left:calc((100% - var(--banner-rail)) / 2 + var(--banner-inset-left));
  margin-right:calc((100% - var(--banner-rail)) / 2 + var(--banner-inset-right));
}
.editing [data-banner].focus-one { --banner-theme-row-gap: 18px; --banner-theme-column-gap: 18px; }
.editing [data-banner].focus-highlights { --banner-theme-row-gap: 64px; }
[data-banner-grid] > :is(.focus-items, .focus-highlights-grid) {
  grid-template-columns: repeat(var(--banner-columns), minmax(0, 1fr));
}
[data-banner-grid] .focus-highlights-grid > :is(.visual-need-card, .focus-edit-unit),
[data-banner-content="images"] .focus-highlights-grid > :is(.visual-need-card, .focus-edit-unit) { max-width: none; }
[data-banner] .focus-controls { flex-wrap: wrap; }
[data-banner] .focus-controls label { display: grid; gap: 4px; font-weight: 700; }
[data-banner] .focus-controls :is(input, select) {
  width: auto; max-width: 150px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); background: var(--white); font: inherit;
}
[data-banner] .focus-controls input { width: 90px; }
[data-banner-content="images"] :is(.visual-need-card-copy, .focus-items article > .editable-text, .focus-items article > .story-flow),
[data-banner-content="quotes"] :is(.visual-need-card-title, .focus-items .snapshot-label, .focus-card-media, .need-card-background) { display: none; }
[data-banner-content="images"] .focus-card article { padding: 0; }
[data-banner-content="images"] .focus-card-media { margin: 0; }
[data-banner-content="images"] .focus-card-media img { max-height: none; display: block; }
[data-banner-content="quotes"] .visual-need-card-copy { justify-content: flex-end; }
[data-banner-content="quotes"] .focus-card[data-focus-background-mode="default"] article { color: var(--ink); }
/* Editor-only upload bars need their own space even when the public row gap is zero. */
.editing [data-banner]:not([data-banner-content="quotes"]) .focus-highlights-grid > .focus-edit-unit { padding-bottom: 0; }
.visual-need-card:is([data-highlight-image-mode="fit"],[data-highlight-image-mode="percent"]) .need-card-background img { object-fit: contain; object-position: center; }
.visual-need-card[data-highlight-image-mode="percent"] .need-card-background:not([data-image-size-custom]) img { scale: var(--highlight-image-scale,1); transform-origin: center; }
[data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .need-card-background[data-image-size-custom],
[data-highlight-set][data-banner-content="images"] [data-banner-highlight] .need-card-background[data-image-size-custom] { width:min(var(--image-requested-width),100%); aspect-ratio:var(--image-native-ratio); margin-inline:auto; }
[data-banner-highlight][data-highlight-title-empty="true"][data-highlight-body-empty="true"] .need-card-background[data-image-size-custom] img,
[data-highlight-set][data-banner-content="images"] [data-banner-highlight] .need-card-background[data-image-size-custom] img { position:relative; top:auto; left:auto; translate:none; width:100%; height:auto; }
.highlight-image-tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; min-width: 0; color: var(--ink); text-align: left; }
.highlight-image-tools > button,.highlight-image-tools > .media-animation-toggle {--button-height:var(--button-large); position: static;  padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer; font: 13px/1.3 var(--font-system,system-ui); }
.highlight-image-tools > label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 13px/1.4 var(--font-system,system-ui); }
.highlight-image-tools select { min-height: 36px; max-width: 100%; }
.highlight-image-tools input[type=range] { width: 140px; max-width: 100%; min-height: 36px; padding: 0; }
.highlight-image-tools output { min-width: 4ch; }
.highlight-image-tools small { flex-basis: 100%; font-size: 12px; }
.highlight-image-tools [hidden] { display: none!important; }
.highlight-image-tools .media-animation-controls { display: none; position: static; flex-basis: 100%; width: 100%; max-width: none; }
.highlight-image-tools .media-animation-controls.is-open { display: grid; }
@media (max-width: 900px) {
  [data-banner-grid] > :is(.focus-items, .focus-highlights-grid) { grid-template-columns: repeat(min(2, var(--banner-columns)), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-banner] > :is(.focus-items, .focus-highlights-grid) { grid-template-columns: minmax(0, 1fr); }
  [data-banner] .focus-controls { justify-content: flex-start; }
}
/* Selected Work can contain components inside its own constrained content rail. */
.examples > .content-width .component-surface[data-component-width="full"] {
  width: var(--content);
  margin-inline: calc(50% - 50vw + var(--component-gutter));
}
/* Nested Outcome bands fill their available content area without escaping
   their parent or introducing viewport-unit/scrollbar overflow. */
.examples > .content-width .component-surface:has(> .builder-content:is(.outcome-light,.outcome-dark)) {
  width:100%;
  margin-inline:0;
}
@media (max-width: 900px) {
  [data-component-width="full"] { --component-gutter: 16px; --content: calc(100vw - 32px); }
}