/* ═══════════════════════════════════════════════════════════════════════════
   INSTITUTIONAL ACCREDITATION — BRAND LAYER

   The shared identity of the portal. Every sample inherits this file
   unchanged; the five theme stylesheets carry LAYOUT PHILOSOPHY ONLY.

   That division is the rule:
     brand.css   colour · typography · shape language · depth · motifs
     themes/*    density · spacing · grid composition · rhythm · motion

   A theme must never redeclare a colour, a font family, or a corner radius.
   If two samples look like different institutions, this file has been
   overridden somewhere it should not have been.

   Load order is core.css → brand.css → themes/<slug>.css.

   Derived from the institutional seal (deep green, gold rope and flame) and
   the Institutional Accreditation narrative template.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────────
     Taken from the seal, static/images/logo.png, not chosen beside it. The
     green is the ring and the tamaraw, sampled; the gold is the flame; the
     deep gold is the bronze rope ring. Green dominates. Gold is an accent
     only — at 1.9:1 on white it can never carry text, so it is confined to
     rules, highlights, hover states, and marks on green. No third hue is
     introduced anywhere.

     Every tint below is a color-mix of these four, never a second copy of
     the hex — so the seal is the one place the colour is written down. */
  --c-brand:      #08614E;   /* the ring     — 7.4:1 on white, AAA     */
  --c-brand-dark: #064A3C;   /* ring, deeper — 10.2:1, inverted panels */
  --c-gold:       #F0B000;   /* the flame    — decoration and marks    */
  --c-gold-deep:  #7A5A18;   /* the bronze   — 6.4:1, gold as text     */

  --c-bg:         #FFFFFF;
  --c-surface:    #FFFFFF;
  /* Tinted surface. Deliberately green rather than neutral grey, and strong
     enough to actually read against white — the previous #F8FAFC was so close
     to the page that the alternating section rhythm, and the rounded panel
     curve that depends on it, were nearly invisible. Roughly the brand green
     at 10%; still light enough for body text at ~11:1. */
  --c-surface-2:  color-mix(in srgb, var(--c-brand) 9%, #FFFFFF);
  --c-surface-3:  color-mix(in srgb, var(--c-brand) 16%, #FFFFFF);   /* one step deeper, for nesting inside a panel */
  --c-border:     #E5E7EB;
  --c-ink:        #2B2B2B;
  --c-ink-strong: var(--c-brand);   /* display headings carry the seal green */
  --c-muted:      #6B7280;

  --c-brand-ink:  #FFFFFF;
  --c-accent:     var(--c-brand);
  --c-accent-ink: #FFFFFF;
  --c-hero-ink:   #FFFFFF;

  /* Scrims are green-tinted, never neutral black — photography stays
     inside the institutional palette. */
  --c-scrim: linear-gradient(
               180deg,
               color-mix(in srgb, var(--c-brand-dark) 45%, transparent) 0%,
               color-mix(in srgb, var(--c-brand-dark) 62%, transparent) 55%,
               color-mix(in srgb, var(--c-brand-dark) 90%, transparent) 100%);
  --c-scrim-side: linear-gradient(
               100deg,
               color-mix(in srgb, var(--c-brand-dark) 92%, transparent) 0%,
               color-mix(in srgb, var(--c-brand-dark) 70%, transparent) 48%,
               color-mix(in srgb, var(--c-brand-dark) 42%, transparent) 100%);

  /* ── Typography ─────────────────────────────────────────────────────── */
  /* Display face is Helvetica, not a serif. Kept as a system stack rather
     than a webfont: Helvetica ships on macOS/iOS, Arial substitutes on
     Windows and is metric-compatible, Liberation Sans covers Linux — so
     no network request and no layout shift on load.
     'Liberation Sans' precedes the generic so Linux does not fall through
     to an arbitrary default sans. */
  --f-display: Helvetica, 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-display: 600;
  --display-tracking: -0.015em;
  --eyebrow-transform: uppercase;
  --eyebrow-tracking:  0.16em;

  /* ── Shape ──────────────────────────────────────────────────────────────
     Rounded rectangles and soft curves are the primary motif. Nothing in
     the system is a sharp box. */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* Large radii used for section panels, hero ribbon, and the footer edge */
  --curve:    clamp(1.5rem, calc(4vw * var(--ui-scale)), 2.75rem);
  --curve-lg: clamp(2rem, calc(6vw * var(--ui-scale)), 4.5rem);

  --card-bg:     #FFFFFF;
  --card-border: 1px solid var(--c-border);
  --card-blur:   none;

  /* ── Depth — soft, never heavy ──────────────────────────────────────── */
  --sh-card:  0 12px 32px color-mix(in srgb, var(--c-brand-dark) 7%, transparent);
  --sh-hover: 0 22px 56px color-mix(in srgb, var(--c-brand-dark) 13%, transparent);
  --sh-nav:   0 4px 24px color-mix(in srgb, var(--c-brand-dark) 12%, transparent);

  /* ── Nav ────────────────────────────────────────────────────────────── */
  --nav-bg:   color-mix(in srgb, var(--c-brand) 95%, transparent);
  --nav-ink:  #FFFFFF;
  --nav-blur: saturate(160%) blur(16px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CURVED SECTION TRANSITIONS

   The template separates content with ribbons and curves, never with rules.
   Tinted and green sections therefore render as large rounded panels that
   overlap the white page, producing a soft transition automatically — no
   per-section markup and nothing for a theme to keep in sync.
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-section.alt,
.pub-section.invert {
  border-radius: var(--curve-lg);
  overflow: hidden;
}
.pub-section.alt    { background: var(--c-surface-2); }
.pub-section.invert { background: var(--c-brand-dark); }

/* Consecutive panels tuck into one another rather than stacking with a gap. */
.pub-section.alt + .pub-section.alt,
.pub-section.invert + .pub-section.invert { margin-top: calc(var(--curve-lg) * -1); }

/* A gold hairline rides the top edge of every green panel — the template's
   ribbon accent, reduced to its essential. */
.pub-section.invert { position: relative; }
.pub-section.invert::before {
  content: '';
  position: absolute; z-index: 2;
  inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
              transparent, var(--c-gold) 22%, var(--c-gold) 78%, transparent);
}



/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT-HEADER HERO

   One component: the photograph is the background, a green-tinted scrim
   darkens it, and the masthead and headline sit on top. The scrim is heaviest
   behind the navbar so chrome stays legible over any image, and lightest at
   the base where the campus is worth seeing.

   The green tint is what keeps this reading as the digital form of the
   narrative template's masthead now that the solid ribbon is gone.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-hero {
  position: relative;
  display: flex;
  /* The ribbon sits at the TOP. It used to be bottom-aligned, which was right
     when it carried the headline and the buttons; now that the banner holds a
     masthead and a motto pinned to the foot, bottom-aligning the ribbon drops
     the two on top of each other — worst on the shortest banner (govph, at
     58svh), but visible at every width. */
  align-items: flex-start;
  /* Under one screen, on purpose. At 88svh the banner plus the nav filled the
     viewport exactly, so the portal opened on a photograph with no sign that
     anything followed it. At 62 the section below breaks the fold.

     This is the value that actually governs. `.doc-hero` and `.pub-hero` have
     equal specificity and brand.css loads second, so this wins for prestige
     and bento; editorial, glass and govph override it in their own files. */
  min-height: 62svh;
  overflow: hidden;
  border-radius: 0 0 var(--curve-lg) var(--curve-lg);
  color: #fff;
}

.doc-hero-media { position: absolute; inset: 0; z-index: 0; }
.doc-hero-media img,
.doc-hero-media video { width: 100%; height: 100%; object-fit: cover; }

.doc-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(11,44,37,.88) 0%,
      rgba(20,74,63,.72) 32%,
      color-mix(in srgb, var(--c-brand-dark) 62%, transparent) 62%,
      color-mix(in srgb, var(--c-brand-dark) 55%, transparent) 100%);
}
/* A soft gold bloom in the lower corner — the template's accent, restated. */
.doc-hero-scrim::after {
  content: ''; position: absolute; pointer-events: none;
  width: 34rem; height: 34rem; right: -10rem; bottom: -14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 16%, transparent), transparent 70%);
}

.doc-ribbon {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--nav-h) + clamp(2.5rem, calc(5vw * var(--ui-scale)), 4rem)) clamp(3.5rem, calc(7vw * var(--ui-scale)), 6rem);
}

/* Masthead row — seal left, institution and portal titles right of it. */
/* STACKED ON A PHONE. The lockup is `flex: none`, so beside the college's full
   name it leaves roughly 120px for six words and the text wraps to five clipped
   lines. Stacking gives the name the whole width; the row returns at 481. */
.doc-masthead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
  margin-bottom: 1rem;
}

@media (min-width: 481px) {
  .doc-masthead {
    flex-direction: row;
    align-items: center;
    gap: .875rem;
    padding-bottom: 1.5rem;
    margin-bottom: clamp(2rem, calc(4vw * var(--ui-scale)), 3rem);
  }
}

@media (min-width: 769px) {
  .doc-masthead { gap: clamp(1rem, calc(2vw * var(--ui-scale)), 1.5rem); }
}
/* ── Logo lockup — institutional seal paired with the WURI mark ────────────
   The two marks have very different proportions: the seal is square (1:1),
   the WURI lockup is wide (~3.9:1) and carries its own tagline. So each is
   sized by HEIGHT and allowed its natural width — never forced to a shared
   box, which would crush the wide mark.
   ───────────────────────────────────────────────────────────────────────── */
/* The seal and the WURI mark are very different shapes; the tighter gap is
   what keeps the pair on one line on a narrow screen. */
.logo-lockup { display: inline-flex; align-items: center; gap: .625rem; flex: none; }
@media (min-width: 769px) { .logo-lockup { gap: 1rem; } }
.logo-lockup .ll-mark { display: block; flex: none; }
.logo-lockup .ll-mark img { height: 100%; width: auto; object-fit: contain; display: block; }

/* Both marks are full-alpha PNGs, so they sit directly on the hero with no
   plate behind them. Depth comes from drop-shadow rather than box-shadow:
   drop-shadow follows the alpha silhouette — the seal's circular edge, the
   WURI wordmark's letterforms — where box-shadow would draw a rectangle
   around the transparent bounding box. */
.logo-lockup .ll-primary {
  aspect-ratio: 1;
  filter: drop-shadow(0 3px 10px rgba(6,26,21,.45));
}
.logo-lockup .ll-primary img { width: 100%; height: 100%; }

/* The WURI mark is dark navy artwork. Against the dark green hero its own
   colours give little separation, so it carries a soft light halo as well as
   the shadow — a highlight, not a plate. The artwork is never recoloured;
   it is third-party property. */
.logo-lockup .ll-secondary {
  display: block;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.55))
    drop-shadow(0 2px 8px rgba(6,26,21,.4));
}

.logo-lockup .ll-divider {
  width: 1px; flex: none; align-self: center;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c-gold) 65%, transparent), transparent);
}

/* Hero */
.logo-lockup--hero .ll-primary   { height: clamp(3.5rem, calc(6vw * var(--ui-scale)), 5rem); }
.logo-lockup--hero .ll-secondary { height: clamp(2.5rem, calc(4.2vw * var(--ui-scale)), 3.5rem); }
.logo-lockup--hero .ll-divider   { height: clamp(2.5rem, calc(4vw * var(--ui-scale)), 3.5rem); }

/* Footer */
.logo-lockup--footer { gap: .875rem; }
.logo-lockup--footer .ll-primary   { height: 3.25rem; }
.logo-lockup--footer .ll-secondary { height: 2.25rem; padding: .35rem .5rem; }
.logo-lockup--footer .ll-divider   { height: 2.25rem; }

/* The wide mark is the first thing to give way on small screens. */

.doc-masthead-text { min-width: 0; }

/* Portal title leads — the larger, display-set line. */
.doc-portal {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.0625rem, calc(1.9vw * var(--ui-scale)), 1.5rem);
  line-height: 1.2; letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
}
/* Institution name supports it — small, tracked, gold. */
.doc-institution {
  display: block;
  font-family: var(--f-body); font-weight: 500;
  font-size: clamp(.6875rem, calc(1vw * var(--ui-scale)), .8125rem);
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.45;
  color: var(--c-gold);
  margin-top: .4rem;
}

.doc-hero h1 { color: #fff; }
.doc-rule {
  width: 4.5rem; height: 3px; background: var(--c-gold);
  border-radius: 2px; margin: 1.75rem 0;
}
.doc-hero .lead,
.doc-hero .hero-subtitle { color: rgba(255,255,255,.86); }
.doc-hero .eyebrow { color: var(--c-gold); }
.doc-hero .eyebrow::before { background: var(--c-gold); }
.doc-hero .hero-meta { border-top-color: rgba(255,255,255,.22); color: rgba(255,255,255,.85); }

/* Text over photography needs a little weight behind it. */
.doc-hero h1,
.doc-hero .doc-institution { text-shadow: 0 2px 24px rgba(6,26,21,.45); }

/* The masthead separator lightens now that it sits on an image, not a block. */
.doc-hero .doc-masthead { border-bottom-color: rgba(255,255,255,.26); }



/* Masthead plus motto has to fit above the fold, or the banner is a photograph
   the visitor scrolls past to reach the page. */
.doc-ribbon { padding-block: calc(var(--nav-h) + 1.5rem) 2rem; }
.logo-lockup--hero .ll-primary   { height: 2.75rem; }
.logo-lockup--hero .ll-secondary { height: 1.75rem; }
.logo-lockup--hero .ll-divider   { height: 1.75rem; }
.doc-portal { font-size: 1rem; }
.doc-institution { font-size: .6875rem; letter-spacing: .06em; }

@media (min-width: 481px) {
  .doc-ribbon { padding-block: calc(var(--nav-h) + clamp(1.5rem, calc(3vw * var(--ui-scale)), 2.5rem)) clamp(2rem, calc(4vw * var(--ui-scale)), 3rem); }
  .doc-portal { font-size: clamp(1.125rem, calc(1.6vw * var(--ui-scale)), 1.5rem); }
  .doc-institution { font-size: .8125rem; letter-spacing: .08em; }
}

@media (min-width: 769px) {
  .logo-lockup--hero .ll-secondary { height: 2rem; }
}

@media (min-width: 993px) {
  .logo-lockup--hero .ll-primary   { height: clamp(3.5rem, calc(6vw * var(--ui-scale)), 5rem); }
  .logo-lockup--hero .ll-secondary { height: clamp(2.5rem, calc(4.2vw * var(--ui-scale)), 3.5rem); }
  .logo-lockup--hero .ll-divider   { height: clamp(2.5rem, calc(4vw * var(--ui-scale)), 3.5rem); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION — transparent over the ribbon, green once scrolled
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-nav.is-solid,
.pub-nav.scrolled {
  background: var(--nav-bg);
  border-bottom-color: rgba(255,255,255,.14);
}
/* On the landing page the brand stays hidden while the bar is transparent —
   the hero masthead directly below already carries the seal and the
   institution name, so repeating them is noise. It fades in with the solid
   bar on scroll.
   visibility and pointer-events matter here: opacity alone would leave an
   invisible link in the tab order. Area pages are excluded (no .is-landing)
   because there the brand is the only way back. */
.nav-brand {
  transition: opacity .35s ease, visibility .35s ease;
}
body.is-landing .pub-nav:not(.scrolled):not(.is-solid) .nav-brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-brand .brand-mark {
  background: #fff; padding: 3px; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.nav-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.nav-brand .brand-sub { color: var(--c-gold); opacity: 1; }

/* Staff sign-in is a quiet link, set apart by a hairline rather than by
   weight — it should be findable, not prominent. */
.nav-link--quiet {
  opacity: .7;
  margin-left: .5rem;
  padding-left: 1.125rem;
  border-left: 1px solid color-mix(in srgb, var(--nav-ink) 28%, transparent);
  border-radius: 0;
}
.nav-link--quiet:hover { opacity: 1; background: none; }
/* In the mobile panel the links are stacked rows, so the divider that sets
   Portal Login apart from the section links on a bar has nothing to divide. */
.nav-link--quiet { border-left: 0; margin-left: 0; padding-left: .25rem; opacity: .8; }

/* Rounded active indicator rather than an underline. */
.nav-link { border-radius: var(--r-pill); }
.nav-link::after { display: none; }
.nav-link:hover,
.nav-link.active { background: rgba(255,255,255,.14); opacity: 1; }
.nav-link.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 55%, transparent); }


/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — rounded, soft, green top border, gold on hover
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-card {
  border-radius: var(--r-lg);
  border-top: 3px solid var(--c-brand);
}
.pub-card.hoverable:hover { border-top-color: var(--c-gold); }

.card-icon {
  background: color-mix(in srgb, var(--c-brand) 9%, transparent);
  color: var(--c-brand);
  border-radius: var(--r-md);
}

/* Statistics: white cards, green figures, gold underscore. */
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, calc(3vw * var(--ui-scale)), 2rem) 1.25rem;
  box-shadow: var(--sh-card);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.stat .stat-value { color: var(--c-brand); }
.stat .stat-icon  { color: var(--c-gold); opacity: 1; }
.stat .stat-label { position: relative; padding-top: .875rem; }
.stat .stat-label::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2rem; height: 2px; background: var(--c-gold); border-radius: 2px;
}
/* On green panels the figures invert. */
.pub-section.invert .stat {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.pub-section.invert .stat .stat-value { color: var(--c-gold); }
.pub-section.invert .stat .stat-label { color: #fff; }
.pub-section.invert .stat .stat-note  { color: rgba(255,255,255,.62); }
.pub-section.invert .eyebrow          { color: var(--c-gold); }
.pub-section.invert .eyebrow::before  { background: var(--c-gold); }


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — filled green, gold reserved for emphasis
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-btn { border-radius: var(--r-pill); }
.pub-btn.primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.pub-btn.primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }
.pub-btn.gold { background: var(--c-gold); border-color: var(--c-gold); color: #3A2A05; }
.pub-btn.gold:hover { background: #E0A22C; border-color: #E0A22C; color: #3A2A05; }
.pub-btn.outline { color: var(--c-brand-dark); border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); }
.pub-btn.outline:hover { border-color: var(--c-brand); color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 5%, transparent); }


/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA — rounded frames, soft shadow, hover zoom
   ═══════════════════════════════════════════════════════════════════════════ */

.media-card .media-thumb,
.masonry .masonry-item,
.tile-grid .masonry-item,
.video-frame,
.pub-split .split-media img { border-radius: var(--r-lg); }
.masonry .masonry-item,
.video-frame { box-shadow: var(--sh-card); }
.masonry .masonry-item:hover { box-shadow: var(--sh-hover); }
.video-frame .play-btn { background: var(--c-gold); color: #3A2A05; }

.chip { border-radius: var(--r-pill); border-color: color-mix(in srgb, var(--c-brand) 22%, transparent); }
.chip i { color: var(--c-brand); }

.partner-card { border-radius: var(--r-lg); border-top: 3px solid var(--c-gold); }
.partner-card i { color: var(--c-brand); }

.param-card { border-radius: var(--r-lg); border-left: 3px solid var(--c-brand); }
.param-letter { background: color-mix(in srgb, var(--c-brand) 9%, transparent); color: var(--c-brand); border-radius: var(--r-sm); }

.doc-item { border-radius: var(--r-md); }
.doc-icon { color: var(--c-brand); }

.status-pill {
  background: color-mix(in srgb, var(--c-gold) 16%, transparent);
  color: var(--c-gold-deep);
  border-color: color-mix(in srgb, var(--c-gold) 45%, transparent);
}
.pub-section.invert .status-pill,
.doc-hero .status-pill { background: rgba(255,255,255,.14); color: var(--c-gold); border-color: color-mix(in srgb, var(--c-gold) 50%, transparent); }

.subnav { border-radius: 0 0 var(--curve) var(--curve); }
.subnav a.active, .subnav a:hover { color: var(--c-brand); border-bottom-color: var(--c-gold); }

.section-head.center > h2::after {
  content: ''; display: block; width: 3.5rem; height: 3px;
  background: var(--c-gold); border-radius: 2px; margin: 1.5rem auto 0;
}

.person-card img, .person-card .person-ph { border-radius: var(--r-lg); }
.person-card .person-ph { background: color-mix(in srgb, var(--c-brand) 9%, transparent); color: var(--c-brand); }

.pull-quote { color: var(--c-brand-dark); }
.quote-mark { color: var(--c-gold); opacity: .55; }
.timeline-year { color: var(--c-brand); }
.timeline-item::before { background: var(--c-gold); }
.arrow-link { color: var(--c-brand); }
.tag { color: var(--c-gold-deep); }


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — large green block with a curved top edge
   ═══════════════════════════════════════════════════════════════════════════ */

.pub-footer {
  background: var(--c-brand-dark);
  border-radius: var(--curve-lg) var(--curve-lg) 0 0;
  position: relative;
  overflow: hidden;
  margin-top: var(--curve);
}
.pub-footer::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
              transparent, var(--c-gold) 22%, var(--c-gold) 78%, transparent);
}
.pub-footer .footer-title { color: var(--c-gold); }
.pub-footer a:hover { color: var(--c-gold); }
.social-row a:hover { background: var(--c-gold); border-color: var(--c-gold); color: #3A2A05; }



/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY / MISC
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state i { color: color-mix(in srgb, var(--c-brand) 28%, transparent); }
.cta-band { border-radius: var(--curve-lg); overflow: hidden; }