/* ==========================================================================
   ChannelCore — Design System
   Loaded last on all six pages. Replaces css/home-v2.css and
   css/updates-v3.css, and overrides the decorative defaults in styles.css.

   Direction: the proposition is consolidation — four pillars, one supplier.
   One accent (teal). Navy as structural ink. Purple reserved for the primary
   call to action only. No decorative gradients, no drop shadows on content,
   1px rules instead. Motion only where it answers an action, plus a single
   orchestrated moment in the hero.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* ink & surface */
  --navy:        #0E1A33;
  --navy-deep:   #08101F;
  --navy-soft:   #1B2A4A;
  --ink:         #14192A;
  --body:        #464C60;
  --muted:       #737A91;
  --rule:        #E2E6EE;
  --surface:     #FFFFFF;
  --surface-alt: #F3F5F9;

  /* single accent */
  --teal:        #1F8C7E;
  --teal-bright: #35B3A2;
  --teal-wash:   #E8F4F2;

  /* reserved: primary CTA only */
  --purple:      #6A2C85;
  --purple-deep: #55246C;

  --focus:       #35B3A2;

  /* type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* structure */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --maxw: 1180px;
  --measure: 68ch;

  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 40px; --s-5: 64px; --s-6: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* neutralise legacy variables still referenced in the markup */
  --gradient-brand: var(--navy);
  --grey-700: var(--body);
  --grey-400: var(--muted);
  --grey-200: var(--rule);
  --grey-100: var(--surface-alt);
  --shadow: none;
  --shadow-sm: none;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --teal-dark: var(--teal);
}

/* ------------------------------------------------------------ base type */
body{
  font-family: var(--font-body);
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0 0 var(--s-2);
}
h1{ font-size: clamp(38px, 5vw, 58px); letter-spacing: -0.028em; }
h2{ font-size: clamp(27px, 3.2vw, 37px); letter-spacing: -0.022em; }
h3{ font-size: 20px; }
h4{ font-size: 17px; }
p{ color: var(--body); margin: 0 0 var(--s-2); max-width: var(--measure); }
strong{ color: var(--ink); font-weight: 600; }

.container{ max-width: var(--maxw); }
section{ padding: var(--s-6) 0; }
section.tight{ padding: var(--s-5) 0; }
section.alt{ background: var(--surface-alt); border-block: 1px solid var(--rule); }
section.dark{ background: var(--navy); }
section.dark h1, section.dark h2, section.dark h3{ color: #fff; }
section.dark p{ color: #B4BDD4; }

/* Section heads: no all-caps eyebrow stack. The label only survives where it
   carries information the heading does not. */
.section-head{ margin-bottom: var(--s-4); max-width: var(--measure); }
.section-head.centered{ margin-inline: auto; text-align: center; }
.section-head p{ font-size: 17px; }
.eyebrow{
  display: block;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
  color: var(--teal);
  margin-bottom: var(--s-1);
}
section.dark .eyebrow{ color: var(--teal-bright); }
.kicker-note{
  display: block; font-size: 13.5px; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: 12px; max-width: var(--measure);
}

/* -------------------------------------------------------------- buttons */
.btn{
  font-family: var(--font-body);
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 15px; letter-spacing: 0;
  padding: 13px 22px; border: 1px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn-sm{ padding: 9px 16px; font-size: 14px; }
.btn-primary{ background: var(--purple); border-color: var(--purple); color: #fff; }
.btn-primary:hover{ background: var(--purple-deep); border-color: var(--purple-deep); }
.btn-outline{ background: transparent; border-color: var(--rule); color: var(--navy); }
.btn-outline:hover{ border-color: var(--navy); background: transparent; }
.btn-ghost-light{ background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost-light:hover{ background: rgba(255,255,255,.1); border-color: #fff; }
.btn-block{ width: 100%; justify-content: center; }
.cta-row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs);
}
.skip-link{
  position:absolute; left:-9999px; top:0; background: var(--navy); color:#fff;
  padding: 10px 16px; z-index: 999;
}
.skip-link:focus{ left: 8px; top: 8px; }

/* --------------------------------------------------------- prototype bar */
.mock-banner{
  background: var(--navy-deep); color: #9AA5C0;
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0;
  text-transform: none; padding: 7px 12px;
}
.mock-banner strong{ color: #F2C744; font-weight: 600; }

/* --------------------------------------------------------------- header */
.site-header{
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .container{ padding-top: 14px; padding-bottom: 14px; gap: 20px; }
.logo img{ height: 56px; width: auto; }
@media (max-width: 1180px){ .logo img{ height: 46px; } }
@media (max-width: 640px){  .logo img{ height: 40px; } }

.nav-link{
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500; color: var(--navy);
  border-radius: var(--r-sm); padding: 10px 12px;
  position: relative;
}
.nav-link:hover, .nav-item.open > .nav-link{ background: transparent; color: var(--teal); }
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom: 2px; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .18s var(--ease);
}
.nav-item.open > .nav-link::after, .nav-link:hover::after{ transform: scaleX(1); }
.nav-caret{ font-size: 9px; opacity: .55; }
/* A nav entry that exists but is not ready (nav.php 'disabled'). Text, not a
   link, so there is nothing to hover or click; it just reads as greyed out. */
.nav-link.nav-disabled, .nav-link.nav-disabled:hover{ color: var(--muted); cursor: not-allowed; }
.nav-link.nav-disabled::after{ display: none; }
/* "Coming soon" stacked under the label rather than beside it, so the tab is
   no wider than its name. Centred under it on desktop; the mobile menu's own
   left alignment is kept below. Less vertical padding offsets the extra line. */
.nav-link.nav-disabled{ flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding-block: 4px; }
.nav-link.nav-disabled small{ display: block; margin: 3px 0 0; font-size: 9.5px; }
@media (max-width: 980px){
  .nav-link.nav-disabled{ align-items: flex-start; }
}
.nav-disabled small, .mega-disabled small{
  margin-left: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.mega-col ul li .mega-disabled{
  display: block; padding: 6px 8px; font-size: 14.5px; font-weight: 500; color: var(--muted); cursor: not-allowed;
}
.header-ctas{ display: flex; align-items: center; gap: 10px; }

.mega{
  border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(14,26,51,.10);
}
.mega-col h4{
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-transform: none; letter-spacing: 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.mega-col ul li a{ font-size: 14.5px; color: var(--navy); }
.mega-col ul li a:hover{ color: var(--teal); }

/* ------------------------------------------------------------- page hero */
.page-hero{
  position: relative; overflow: hidden;
  background: var(--navy); padding: var(--s-6) 0 var(--s-5);
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 70%);
          mask-image: linear-gradient(to bottom right, #000, transparent 70%);
}
.page-hero .container{ position: relative; z-index: 1; }
.page-hero h1{ max-width: 20ch; }
.page-hero p{ color: #B4BDD4; font-size: 18px; max-width: 58ch; }
.breadcrumb{ font-size: 13.5px; margin-bottom: var(--s-2); }

/* ------------------------------------------------------- home hero (v2) */
.hero-v2{
  position: relative; overflow: hidden;
  background: var(--navy); padding: var(--s-6) 0 calc(var(--s-6) + 8px);
}
.hero-v2 .mesh, .hero-v2 .grain{ display: none; }   /* decorative blobs cut */
.hero-v2::before{
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 75%);
}
.hero-v2 .container{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--s-5); align-items: stretch;
}
.hero-v2 .eyebrow{ color: var(--teal-bright); display:flex; align-items:center; gap:9px; }
.hero-v2 .eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background: var(--teal-bright); flex-shrink:0;
}
.hero-v2 h1{
  color:#fff; background: none; -webkit-text-fill-color: currentColor;
  max-width: 15ch; margin: 14px 0 18px;
}
.hero-v2 p.lead{ color:#B4BDD4; font-size: 18px; max-width: 52ch; }

/* The hero's right-hand box holds the statement slider (.hero-slider in
   production.css). It stretches to the full height of the text column, so
   the slides get that whole box. */
.hero-visual-v2{ position: relative; display: flex; flex-direction: column; }
.hero-visual-v2 > *{ flex: 1; }
.hero-pillars-chip{ display: none; }
.hero-float-badge{ display: none; }

@media (max-width: 980px){
  .hero-v2 .container{ grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-visual-v2{ min-height: 360px; }
}

/* ------------------------------------------------------------ stat band */
.stat-band{ padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.stat-band .grid-4{ gap: 0; }
.stat-tile{ padding: 4px 24px; border-left: 1px solid var(--rule); }
.stat-tile:first-child{ border-left: none; padding-left: 0; }
.stat-tile .num{ font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--navy); }
.stat-tile .lbl{ font-size: 13.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 780px){
  .stat-tile{ border-left: none; border-top: 1px solid var(--rule); padding: 14px 0; }
  .stat-tile:first-child{ border-top: none; }
}

/* ----------------------------------------------------------------- about */
/* No bottom padding: the testimonials section that follows brings its own
   96px top, and the two together left a gap marketing asked to halve. */
.about-v2{ padding-bottom: 0; }
.about-v2 .about-grid.full-width{ display: block; }
.about-v2 .about-grid.full-width > div{ max-width: none; }
/* Runs the full container width, level with the check-list below it, to keep
   the section short — marketing asked for this over the usual 68ch measure. */
.about-v2 .about-grid.full-width p{ max-width: none; font-size: 17px; }
.about-visual{ display: none; }
.check-list{ list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 0; }
.check-list.inline{ grid-template-columns: repeat(3, 1fr); gap: 0; }
.check-list li{
  display: block; font-size: 15px; font-weight: 500; color: var(--navy);
  padding: 18px 24px 18px 0; border-top: 2px solid var(--navy); margin-right: 24px;
}
.check-list .tick{ display: none; }
@media (max-width: 860px){ .check-list.inline{ grid-template-columns: 1fr; } }

/* ------------------------------------------------------- cards & pillars */
.teaser-card, .teaser-card-v2, .resource-card, .case-card, .case-card-v2,
.event-card, .blog-card, .avatar-card{
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: none;
}
.teaser-card, .teaser-card-v2{ padding: 26px; display: block; transition: border-color .18s var(--ease); }
.teaser-card:hover, .teaser-card-v2:hover{ transform: none; border-color: var(--navy); box-shadow: none; }
.teaser-card-v2::before{ display: none; }
.teaser-card-v2:hover .pillar-list li{ color: var(--body); }
.teaser-card-v2:hover .pillar-list li::before{ background: var(--teal); }
.teaser-card h3, .teaser-card-v2 h3{ font-size: 19px; margin-bottom: 4px; }
/* Icon beside the heading rather than above it, to take a row out of every
   card. A long name such as "Business Enablement" wraps to two lines here. */
.teaser-head{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; }
.teaser-head .icon-chip{ margin-bottom: 0; flex-shrink: 0; }
.teaser-head h3{ margin: 0; }
.go-arrow{ display: none; }      /* '→' on every card is a template tell */

.icon-chip{
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--teal-wash); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  margin-bottom: 18px;
}
.teaser-card .icon-chip, .teaser-card-v2 .icon-chip,
.resource-card .icon-chip{ background: var(--teal-wash); color: var(--teal); }
.icon-chip svg{ width: 22px; height: 22px; fill:none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Column layout with the button pushed to the foot, so buttons line up across
   the row however long each description runs. */
.resource-card{ padding: 24px; text-align: left; display: flex; flex-direction: column; }
.resource-card > .btn{ margin-top: auto; align-self: flex-start; }
.resource-card .icon-chip{ margin: 0 0 16px; width: 44px; height: 44px; }
.resource-card .icon-chip svg{ width: 24px; height: 24px; }
/* The five Resources cards. This was an inline repeat(5,1fr) on a .grid-3,
   which outranked every breakpoint and pushed five columns off the side of a
   phone. Grid rows stretch their cards, so the buttons still share a baseline
   within each row at every width. */
.grid-5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 1080px){ .grid-5{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){  .grid-5{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){  .grid-5{ grid-template-columns: 1fr; } }

/* Card lists marketing fills from the console (events, blog posts, case
   studies, downloads). Grid leaves a short row hard left, so unpublishing one
   card left a gap on the right; flex-wrap centres whatever is left instead.
   Card widths and breakpoints match .grid-4. */
.grid-4.cards-centred{ display: flex; flex-wrap: wrap; justify-content: center; }
.grid-4.cards-centred > *{ flex: 0 1 calc((100% - 3 * 22px) / 4); min-width: 0; }
@media (max-width: 980px){ .grid-4.cards-centred > *{ flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 640px){ .grid-4.cards-centred > *{ flex-basis: 100%; } }

.pillar-list{ list-style:none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.pillar-list li{
  position: relative; padding: 9px 0 9px 16px; font-size: 14.5px;
  font-weight: 400; color: var(--body); border-top: 1px solid var(--rule);
}
.pillar-list li:first-child{ border-top: none; padding-top: 4px; }
.pillar-list li::before{
  content:""; position:absolute; left: 0; top: 1.05em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}
.pillar-list li:first-child::before{ top: .75em; }

.pillar-card{
  border-radius: var(--r-md); background: var(--surface-alt);
  border: 1px solid var(--rule); box-shadow: none; overflow: hidden;
}
.pillar-card:hover{ transform: none; box-shadow: none; }

/* -------------------------------------------------------- case & content */
.case-card .case-thumb, .case-card-v2 .case-thumb-v2{
  background: var(--navy); height: 108px;
  display:flex; align-items:flex-end; padding: 14px 18px;
  color: rgba(255,255,255,.72); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.case-card-v2 .case-thumb-v2::before{ display:none; }
/* The title sits in the band under its "Case Study N" label, not in the body. */
.case-card-v2 .case-thumb-v2{ flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; }
.case-card-v2 .case-thumb-v2 h4{ color: #fff; margin: 0; }
.case-card-v2:hover{ transform: none; border-color: var(--navy); }
.case-body, .case-body-v2{ padding: 20px; }
.case-body a, .case-body-v2 a{ color: var(--teal); font-weight: 600; font-size: 14px; }
.case-body-v2 a .arr{ display: none; }

.event-card .thumb, .blog-card .thumb{ background: var(--navy); color: rgba(255,255,255,.7); }
.pill{ background: var(--teal-wash); color: var(--teal); border-radius: var(--r-xs); font-weight: 600; }

/* ------------------------------------------------------------- carousels */
.carousel, .carousel-v2{ border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
section.dark .carousel, .carousel-v2.dark-track{ border-color: rgba(255,255,255,.16); }
.carousel-arrow{
  border: 1px solid var(--rule); background: var(--surface); color: var(--navy);
  border-radius: var(--r-sm); width: 40px; height: 40px;
}
.carousel-arrow:hover{ border-color: var(--navy); }
.carousel-dot{ border-radius: 50%; background: var(--rule); }
.carousel-dot.active{ background: var(--teal); }
.carousel-progress-bar{ background: var(--teal); }
.media-slide, .media-slide-v2{
  background: var(--navy); border-radius: 0; min-height: 340px;
}
.media-slide .media-visual, .media-visual-v2{
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
/* Copy on the left, visual on the right. This layout lived in home-v2.css and
   was lost when that file was retired, which left the two stacked and the box
   twice the height it should be. */
.media-slide-v2{
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--s-4); padding: var(--s-4); min-height: 0;
}
.media-slide-v2 .eyebrow{ color: var(--teal-bright); }
.media-slide-v2 p{ margin-bottom: 18px; }
.media-visual-v2{
  position: relative; min-height: 220px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media-visual-v2 > .asset-ph, .media-visual-v2 > img{
  width: 100%; height: 100%; min-height: 220px; border: none;
}
.media-visual-v2 > img{ object-fit: cover; }
@media (max-width: 860px){
  .media-slide-v2{ grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-3); }
}
.media-slide.play .media-visual::before{ content: none; }
.quote-slide, .quote-slide-v2{
  border: none; border-radius: 0; background: var(--surface);
  padding: var(--s-5) var(--s-4); max-width: 780px; margin: 0 auto; text-align: left;
}
.quote-slide p, .quote-slide-v2 p{
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35;
  color: var(--navy); max-width: 34ch;
}
/* Testimonials run the full width of the card so a quote takes fewer lines,
   and the bottom padding is cut so the arrows sit closer under the name. */
.quote-slide-v2{ max-width: none; padding: var(--s-5) var(--s-5) var(--s-3); }
.quote-slide-v2 p{ max-width: none; }
@media (max-width: 640px){ .quote-slide-v2{ padding: var(--s-4) var(--s-3) var(--s-3); } }
.quote-mark{ display: none; }
.quote-slide-v2 .who{ display:flex; align-items:center; gap: 12px; margin-top: var(--s-3); }
.quote-slide-v2 .who .initial{
  width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff;
  display:flex; align-items:center; justify-content:center; font-weight: 600; font-size: 15px;
}
.quote-slide .who{ color: var(--navy); font-weight: 600; }

/* ------------------------------------------------------------------ FAQ */
.faq-group h3{ font-size: 17px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.faq-item{ border-bottom: 1px solid var(--rule); }
.faq-q{
  font-family: var(--font-body); font-size: 15.5px; font-weight: 500; color: var(--navy);
  padding: 18px 0; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
}
.faq-item.open .faq-q{ color: var(--teal); font-weight: 600; }
.faq-a{ color: var(--body); font-size: 15px; }

/* ------------------------------------------------ numbered benefit rows */
.benefit-row{
  display:flex; align-items: baseline; gap: 16px;
  background: transparent; border: none; border-top: 1px solid var(--rule);
  border-radius: 0; padding: 20px 0; box-shadow: none;
}
.benefit-row:hover{ transform: none; box-shadow: none; }
.benefit-row .num{
  width: auto; height: auto; background: none; border-radius: 0; flex-shrink: 0;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--teal); min-width: 24px;
}
.benefit-row p{ margin: 0; font-size: 15.5px; font-weight: 500; color: var(--navy); }

/* --------------------------------------------------------- accreditations */
/* Centred: each mark and its caption sit in the middle of their column, so
   the band reads as centred under the heading rather than hanging left. */
.accred-band{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--s-3); }
.accred-band .accred-tile{
  border: none; border-left: 1px solid var(--rule); border-radius: 0;
  padding: 4px 24px; text-align: center; box-shadow: none;
}
.accred-band .accred-tile:first-child{ border-left: none; }
/* The name leads in teal, with its description on the line below. */
.accred-band .accred-tile strong{
  display: block; margin-bottom: 4px;
  color: var(--teal); font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.accred-band .accred-tile span{ display: block; font-size: 14px; color: var(--ink); }
/* The issued mark, when supplied, sits above the name. alt="" because the
   name beside it already says what it is. */
.accred-band .accred-mark{ display: block; height: 110px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto 14px; }
@media (max-width: 860px){
  .accred-band{ grid-template-columns: repeat(2,1fr); gap: var(--s-3); }
  .accred-band .accred-tile{ border-left: none; }
}
/* Only the copyright is left in the footer's bottom row; keep it at the right. */
.footer-bottom{ justify-content: flex-end; }

/* ------------------------------------------------------ asset placeholders */
.asset-ph{
  border: 1px dashed var(--rule); border-radius: var(--r-sm); background: transparent;
  color: var(--muted); padding: 24px; text-align: left; align-items: flex-start;
  gap: 8px; min-height: 0;
}
.asset-ph .file{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 500; color: var(--navy);
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--r-xs); padding: 3px 8px;
}
.asset-ph .what{ font-size: 13.5px; max-width: 46ch; }
.asset-ph.on-dark{ border-color: rgba(255,255,255,.28); color: #98A2BE; background: transparent; }
.asset-ph.on-dark .file{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color:#fff; }

/* ----------------------------------------------------- misc components */
.label-chip{
  display:block; background: none; color: var(--navy); border-radius: 0;
  padding: 0 0 12px; margin-bottom: 14px; border-bottom: 2px solid var(--teal);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.feature-card .feature-head{ display:flex; align-items:center; gap: 14px; margin-bottom: 10px; }
.feature-card .feature-head .icon-chip{ margin-bottom: 0; }
.feature-card .feature-head h3{ margin: 0; }

.equation{ display:flex; align-items:center; justify-content:flex-start; gap: 14px; flex-wrap: wrap; padding: 30px; }
.equation .term{
  background: none; border: none; border-top: 2px solid rgba(255,255,255,.24);
  border-radius: 0; padding: 14px 0 0; min-width: 0; text-align: left;
}
.equation .term .ic{ display: none; }
.equation .term strong{ color:#fff; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.equation .op{ color: var(--teal-bright); font-size: 18px; font-weight: 600; align-self: flex-end; padding-bottom: 2px; }
.equation .term.result{ background: none; border-top-color: var(--teal-bright); }
.equation .term.result strong{ color: var(--teal-bright); }

.tier-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 24px; }
.tier-grid span{
  background: none; border: none; border-top: 1px solid rgba(255,255,255,.14);
  border-radius: 0; padding: 11px 12px 11px 0; font-size: 13.5px; font-weight: 400;
  color: #D3DAEA; text-align: left;
}

/* Snag list (2026-10-31): no box, and a larger logo centred against the copy
   beside it. Sized by width, capped at the PNG's own 454px so it stays sharp. */
.brand-lockup{
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--s-4) 0;
}
.brand-lockup img{ width: 100%; max-width: 340px; height: auto; }

/* Vendor marquee. site.js appends a copy of the logos to the track, so sliding
   it left by exactly half loops seamlessly. The flex layout and animation lived
   in home-v2.css and were lost when it was retired, which left the logos
   stacked in a column. Hovering pauses it so a logo can be read. */
.marquee-wrap{ border-block: 1px solid var(--rule); padding: var(--s-3) 0; overflow: hidden; }
.marquee-track{
  display: flex; gap: var(--s-3); width: max-content;
}
/* Only once the copy exists; without JS the strip simply sits still. */
/* 60s for ~19 logos: slow enough to read a name as it passes. */
.marquee-track[data-duplicated]{ animation: marquee 60s linear infinite; }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ to{ transform: translateX(calc(-50% - var(--s-3) / 2)); } }
.logo-chip-v2, .logo-strip .logo-chip{
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: transparent;
  color: var(--muted); font-weight: 500; font-size: 13.5px;
}
.logo-chip-v2{
  flex: 0 0 auto; width: 170px; height: 72px; padding: 12px 18px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.logo-chip-v2 img{ max-width: 100%; max-height: 44px; object-fit: contain; }
.cta-band{
  background: var(--navy); border-radius: var(--r-md); padding: var(--s-5) var(--s-4);
  display:flex; align-items:center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.cta-band h2{ color:#fff; margin-bottom: 6px; }
.cta-band p{ color:#B4BDD4; margin: 0; }
.tag-external{
  background: transparent; border: 1px solid currentColor; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 500; padding: 1px 5px; opacity: .7; margin-left: 6px;
}

/* ---------------------------------------------------------------- forms */
.form-card{ border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: none; }
.form-row label{ font-size: 14px; font-weight: 500; color: var(--navy); }
.form-row input, .form-row select, .form-row textarea{
  border: 1px solid var(--rule); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 15px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--teal); }

/* --------------------------------------------------------------- footer */
.site-footer{ background: var(--navy-deep); }
.site-footer h4{
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #fff;
  text-transform: none; letter-spacing: 0;
}
.site-footer a{ color: #98A2BE; font-size: 14px; }
.site-footer a:hover{ color: #fff; }
.footer-brand p{ color: #8C97B4; font-size: 14px; }
.logo-chip-white{ background: transparent; padding: 0; }
.logo-chip-white img{ height: 40px; }
.socials a{ border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); }
.footer-contact-row .item .ic{ background: transparent; border: 1px solid rgba(255,255,255,.2); }

/* ------------------------------------------------------- motion policy */
/* Section-by-section scroll reveal is a generated-page tell — everything is
   visible on load. Motion is reserved for the hero and for hover/active
   states that answer a user action. */
.reveal, .reveal-stagger{ opacity: 1 !important; transform: none !important; }
.back-to-top{ border-radius: var(--r-sm); background: var(--navy); border: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* A still marquee: show the logos as a wrapping row instead of a loop. */
  .marquee-track, .marquee-track[data-duplicated]{ animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-track [aria-hidden="true"]{ display: none; }
}