@charset "UTF-8";
/* ==========================================================================
   CALLS HUB SOLUTIONS — chrome & page compositions
   UI/UX modelled on hugoinc.com. See app.css for the system and the two
   deliberate substitutions (type licensing, imagery ownership).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Announcement bar
   -------------------------------------------------------------------------- */
.topbar {
  position: relative; z-index: 902;
  background: var(--cream-2);
  color: var(--ink);
  font-size: var(--t-sm);
  text-align: center;
}
.topbar .shell { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 44px; padding-block: .5rem; }
.topbar-left { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.topbar-right { display: none; }
.topbar a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color var(--fast) var(--ease); }
.topbar a:hover { color: var(--brand-500); }
.topbar .icon { display: none; }
.topbar .sep, .topbar-tag { display: none; }
.clock { display: none; }

/* --------------------------------------------------------------------------
   2 · Header — centred nav, pill CTA
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 28px -20px rgba(10,10,10,.35); border-bottom-color: var(--line-soft); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: .65rem; flex: none; }
.brand img { height: 44px; width: auto; transition: transform var(--slow) var(--ease-out); }
.brand:hover img { transform: rotate(-14deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 1.18rem; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.brand-sub { font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-cream-faint); }
@media (max-width: 380px) { .brand-text { display: none; } }

.nav { display: flex; align-items: center; gap: .35rem; }
@media (max-width: 1160px) { .nav, .header-cta { display: none; } }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border-radius: var(--pill);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-link:hover, .nav-item:hover > .nav-link { background: var(--cream-2); }
.nav-link[aria-current] { color: var(--brand-500); font-weight: 700; }
.nav-link[aria-current]::after { display: none; }
.nav-link .chev { width: 9px; height: 9px; opacity: .6; transition: transform var(--fast) var(--ease); }
.nav-item:hover .chev { transform: rotate(180deg); }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 300px; padding: .6rem;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--fast) var(--ease), transform var(--mid) var(--ease-out), visibility var(--fast);
}
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-panel-wide { min-width: 620px; padding: .8rem; }
.nav-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .2rem; }
.nav-panel-link { display: block; padding: .7rem .85rem; border-radius: var(--r); transition: background var(--fast) var(--ease); }
.nav-panel-link:hover { background: var(--cream-2); }
.nav-panel-link .t { display: flex; align-items: center; gap: .4rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.nav-panel-link .t .icon { width: 13px; height: 13px; color: var(--brand-500); opacity: 0; transform: translateX(-4px); transition: all var(--fast) var(--ease-out); }
.nav-panel-link:hover .t .icon { opacity: 1; transform: none; }
.nav-panel-link .d { font-size: var(--t-xs); color: var(--on-cream-faint); margin-top: .1rem; }
.nav-panel-foot { grid-column: 1 / -1; margin-top: .4rem; padding: .8rem .85rem 0; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: var(--on-cream-faint); }
.header-cta { display: flex; align-items: center; gap: .5rem; flex: none; }
@media (max-width: 1160px) { .header-cta { display: none; } }

.burger { display: none; position: relative; flex: none; width: 46px; height: 46px; background: var(--cream-2); border: 0; border-radius: 50%; cursor: pointer; }
@media (max-width: 1160px) { .burger { display: block; } }
.burger span { position: absolute; left: 50%; width: 17px; height: 2px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); transition: transform var(--mid) var(--ease-out), opacity var(--fast) var(--ease); }
.burger span:nth-child(1){top:17px;} .burger span:nth-child(2){top:22px;} .burger span:nth-child(3){top:27px;}
body.nav-open .burger span:nth-child(1){transform:translateX(-50%) translateY(5px) rotate(45deg);}
body.nav-open .burger span:nth-child(2){opacity:0;}
body.nav-open .burger span:nth-child(3){transform:translateX(-50%) translateY(-5px) rotate(-45deg);}

.drawer {
  position: fixed; inset: 0; z-index: 899;
  background: var(--cream);
  --on-cream: var(--ink); --on-cream-muted: #4C5451; --on-cream-faint: #6C7471;
  --line: rgba(10,10,10,.12); --line-soft: rgba(10,10,10,.07); --line-firm: rgba(10,10,10,.24);
  color: var(--ink);
  padding: calc(var(--nav-h) + 1.25rem) var(--gutter) 3rem;
  overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility var(--mid);
}
body.nav-open .drawer { opacity: 1; visibility: visible; }
.drawer-group { border-bottom: 1px solid var(--line-soft); }
.drawer-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1rem 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 1.55rem; font-weight: 400; letter-spacing: -.03em; color: var(--ink);
}
.drawer-link .icon { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--cream-2); color: var(--ink); transition: transform var(--mid) var(--ease-out); }
.drawer-group.is-open .drawer-link .icon { transform: rotate(45deg); }
.drawer-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mid) var(--ease-out); }
.drawer-group.is-open .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub > div { overflow: hidden; }
.drawer-sub a { display: block; padding: .55rem 0 .55rem 1rem; border-left: 2px solid var(--line); font-size: var(--t-sm); color: var(--on-cream-muted); }
.drawer-sub a:hover { color: var(--brand-500); border-color: var(--brand-500); }
.drawer-sub a:last-child { margin-bottom: .9rem; }
.drawer-foot { margin-top: 1.75rem; display: flex; flex-direction: column; gap: .55rem; }
.drawer-contact { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: .6rem; font-size: var(--t-sm); color: var(--on-cream-muted); }
.drawer-contact a { display: flex; align-items: center; gap: .55rem; }
.drawer-contact .icon { width: 16px; height: 16px; color: var(--brand-500); }

.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--brand-500); z-index: 9999; }

/* --------------------------------------------------------------------------
   3 · Hero — copy right, blob image left, ring motif behind
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-canvas { display: none; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 960px) { .hero-inner { grid-template-columns: minmax(0,1fr); } .hero-art { order: 2; } }

.hero h1 { font-size: var(--t-hero); max-width: 22ch; }
.hero .lead { margin-top: clamp(1rem,2vw,1.4rem); max-width: 46ch; }
.hero-actions, .stage-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: clamp(1.6rem,3vw,2.2rem); }

/* The hero artwork: photo in a soft blob, ring grid behind it. */
.hero-art { position: relative; }
.hero-art .figure { aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%; box-shadow: var(--lift-3); }
.hero-art .rings { inset: auto -6% -8% auto; width: 46%; right: -6%; bottom: -8%; }
.hero-art .rings-2 { inset: -6% auto auto -8%; width: 34%; }

/* Floating stat bubble over the artwork. */
.hero-bubble {
  position: absolute; z-index: 3; right: 2%; top: 6%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: clamp(96px, 12vw, 132px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  box-shadow: var(--lift-2);
  text-align: center; padding: .5rem;
}
.hero-bubble .v { font-size: clamp(1.3rem,2.2vw,1.8rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.hero-bubble .l { font-size: .62rem; font-weight: 700; line-height: 1.2; margin-top: .25rem; }
@media (max-width: 560px) { .hero-bubble { display: none; } }

/* Metric strip under the hero. */
.stage-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,2.5vw,2rem); margin-top: clamp(2.25rem,4vw,3.25rem); padding-top: clamp(1.5rem,2.5vw,2rem); border-top: 1.5px solid var(--line); }
@media (max-width: 760px) { .stage-rail { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 1.5rem; } }
.stage-rail .v { font-size: clamp(1.9rem,3.2vw,2.7rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.stage-rail .l { font-size: var(--t-sm); font-weight: 600; color: var(--on-cream-faint); margin-top: .35rem; }

.stage-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.scroll-cue { display: none; }
.front-dateline, .front-deck, .front-index, .front-plate, .front-plate-caption, .hero-rail, .front-head, .stage-media { display: none; }

/* --------------------------------------------------------------------------
   4 · Client logo strip
   -------------------------------------------------------------------------- */
.logo-strip { display: flex; align-items: center; justify-content: center; gap: clamp(1.75rem,4.5vw,4rem); flex-wrap: wrap; }
.logo-strip img { height: 26px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--fast) var(--ease); }
.logo-strip img:hover { opacity: 1; }
.band-ink .logo-strip img { filter: grayscale(1) invert(1); opacity: .6; }

.marquee {
  position: relative; display: flex; overflow: hidden; user-select: none;
  padding-block: 1rem;
  background: var(--cream-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 2.5rem; flex: none; min-width: 100%; padding-right: 2.5rem; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--t-sm); font-weight: 700; white-space: nowrap; color: var(--ink); }
.marquee-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); flex: none; }
.marquee-item.is-outline { color: var(--on-cream-faint); -webkit-text-stroke: 0; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   5 · Interior page opener
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--cream-2);
  padding-top: clamp(2rem,4vw,3.25rem);
  padding-bottom: clamp(2.75rem,5vw,4.25rem);
}
.page-hero-bg { display: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0,1fr); } }
.page-hero h1 { font-size: var(--t-1); max-width: 20ch; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--t-xs); font-weight: 600; color: var(--on-cream-faint); margin-bottom: 1.1rem; }
.breadcrumb a:hover { color: var(--brand-500); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb [aria-current] { color: var(--ink); }

/* Facts in a rounded cream panel. */
.facts { display: flex; flex-direction: column; padding: clamp(1.1rem,2vw,1.5rem); background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-lg); }
.facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--on-cream-muted); }
.facts li:first-child { padding-top: 0; }
.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts .v { font-size: 1.1rem; font-weight: 700; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.page-plate { display: none; }

/* --------------------------------------------------------------------------
   6 · Process — numbered rounded rows with dashed connectors
   -------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: .8rem; }
.timeline::before, .timeline::after { display: none; }
.timeline-item {
  position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr);
  gap: clamp(1rem,2vw,1.5rem); align-items: start;
  padding: clamp(1.2rem,2vw,1.6rem) clamp(1.2rem,2.2vw,1.8rem);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.timeline-item.is-in { border-color: var(--brand-200); box-shadow: var(--lift-1); }
@media (max-width: 700px) { .timeline-item { grid-template-columns: 40px minmax(0,1fr); } }
.timeline-dot {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cream-2); color: var(--ink);
  font-size: var(--t-sm); font-weight: 700;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
@media (max-width: 700px) { .timeline-dot { width: 40px; height: 40px; } }
.timeline-item.is-in .timeline-dot { background: #29BFEF; color: #fff; }   /* 5.9:1 — pinned so a dark band cannot lighten it */
.timeline-body h3 { font-size: var(--t-3); font-weight: 700; margin-bottom: .4rem; }
.timeline-body .detail { margin-top: .7rem; font-size: var(--t-sm); color: var(--on-cream-faint); }
.band-ink .timeline-item { background: rgba(255,254,249,.05); border-color: rgba(255,254,249,.2); }
.band-ink .timeline-dot { background: rgba(255,254,249,.12); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   7 · Testimony — ring-framed circular portrait, big quote
   -------------------------------------------------------------------------- */
.quote-card {
  display: flex; flex-direction: column; gap: 1.1rem; height: 100%;
  padding: clamp(1.6rem,2.4vw,2.1rem);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-lg);
}
.quote-card .icon-quote { width: 30px; height: 30px; color: var(--brand-500); }
.quote-card blockquote { margin: 0; font-size: var(--t-lead); line-height: 1.5; color: var(--on-cream); }
.quote-who { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: .4rem; }
/* The portrait ring — the reference's defining avatar treatment. */
.quote-who img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--p-cyan);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--brand-500);
}
.quote-who .n { font-size: var(--t-sm); font-weight: 700; }
.quote-who .r { font-size: var(--t-xs); color: var(--on-cream-faint); }
.band-ink .quote-card { background: rgba(255,254,249,.05); border-color: rgba(255,254,249,.2); }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(285px,360px); gap: clamp(1rem,2vw,1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.25rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-track { background: var(--cream-2); border-radius: 5px; }
.rail::-webkit-scrollbar-thumb { background: var(--brand-500); border-radius: 5px; }
.rail-nav { display: flex; gap: .45rem; }
.rail-btn { width: 46px; height: 46px; display: grid; place-items: center; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 50%; cursor: pointer; transition: all var(--fast) var(--ease); }
.rail-btn:hover { background: var(--ink); color: var(--cream); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn:disabled:hover { background: var(--cream); color: inherit; }
.rail-btn .icon { width: 16px; height: 16px; }
.rail-btn.is-prev .icon { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   8 · Editorial
   -------------------------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; gap: .9rem; }
.post-card .figure { border-radius: var(--r-lg); }
.post-meta { display: flex; align-items: center; gap: .55rem; font-size: var(--t-xs); font-weight: 700; color: var(--brand-500); }
.post-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.post-card h3 { font-size: var(--t-4); font-weight: 700; line-height: 1.28; transition: color var(--fast) var(--ease); }
.post-card:hover h3 { color: var(--brand-500); }
.post-card p { font-size: var(--t-sm); color: var(--on-cream-muted); }

.post-feature { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: clamp(1.5rem,4vw,3.25rem); align-items: center; padding-bottom: clamp(2rem,4vw,3rem); margin-bottom: clamp(2rem,4vw,3rem); border-bottom: 1.5px solid var(--line); }
@media (max-width: 860px) { .post-feature { grid-template-columns: minmax(0,1fr); } }
.post-feature h2 { font-size: var(--t-2); margin-block: .8rem; }

.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: clamp(1.5rem,2.3vw,2rem); font-weight: 700; margin-top: 2.2em; margin-bottom: .15em; scroll-margin-top: calc(var(--nav-h) + 2rem); }
.prose h3 { font-size: clamp(1.12rem,1.6vw,1.3rem); font-weight: 700; margin-top: 1.8em; }
.prose h2 .hn, .prose h3 .hn { color: var(--brand-500); margin-right: .4em; }
.prose p { color: var(--on-cream-muted); line-height: 1.75; }
.prose strong { font-weight: 700; color: var(--on-cream); }
.prose ul { display: flex; flex-direction: column; gap: .35rem; padding-left: 0; }
.prose ul li { position: relative; padding: .35rem 0 .35rem 1.6rem; color: var(--on-cream-muted); line-height: 1.7; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-200); border: 2px solid var(--brand-500); }
.prose a { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 1000px) { .article-layout { grid-template-columns: minmax(0,1fr); } }
.article-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 1000px) { .article-aside { position: static; } }
.toc { display: flex; flex-direction: column; gap: .1rem; }
.toc a { font-size: var(--t-sm); line-height: 1.4; color: var(--on-cream-faint); padding: .45rem .8rem; border-radius: var(--pill); transition: all var(--fast) var(--ease); }
.toc a:hover, .toc a.is-active { color: var(--brand-500); background: var(--brand-100); font-weight: 600; }

.share { display: flex; gap: .45rem; }
.share a { width: 44px; height: 44px; display: grid; place-items: center; background: var(--cream-2); border-radius: 50%; transition: all var(--fast) var(--ease); }
.share a:hover { background: var(--ink); color: var(--cream); }
.share .icon { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   9 · Gallery
   -------------------------------------------------------------------------- */
.masonry { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 190px; gap: clamp(.6rem,1.2vw,1rem); }
@media (max-width: 1000px) { .masonry { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .masonry { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 150px; } }
.masonry figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--cream-2); cursor: pointer; }
.masonry figure.tall { grid-row: span 2; }
.masonry figure.wide { grid-column: span 2; }
.masonry img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease-out); }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption { position: absolute; inset: auto .6rem .6rem .6rem; z-index: 3; padding: .5rem .9rem; background: var(--cream); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 700; color: var(--ink); opacity: 0; transform: translateY(6px); transition: all var(--fast) var(--ease); }
.masonry figure:hover figcaption { opacity: 1; transform: none; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; justify-content: center; }
.filter-btn { padding: .65rem 1.3rem; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--pill); cursor: pointer; font-size: var(--t-sm); font-weight: 700; color: var(--on-cream-muted); transition: all var(--fast) var(--ease); }
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.lightbox { position: fixed; inset: 0; z-index: 9997; display: grid; place-items: center; padding: clamp(1rem,5vw,4rem); background: rgba(10,10,10,.9); opacity: 0; visibility: hidden; transition: opacity var(--fast) var(--ease), visibility var(--fast); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--r-lg); }
.lightbox-close { position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); width: 48px; height: 48px; display: grid; place-items: center; background: var(--cream); border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; }
.lightbox-close:hover { background: var(--brand-500); color: #fff; }
.lightbox-close .icon { width: 20px; height: 20px; transform: rotate(45deg); }

/* --------------------------------------------------------------------------
   10 · People — ring-framed portraits
   -------------------------------------------------------------------------- */
.team-card { position: relative; text-align: center; }
.team-card .figure, .team-card .ratio { border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 4px var(--cream), 0 0 0 8px var(--brand-500); margin-inline: auto; width: min(100%, 220px); }
.team-card:nth-child(4n+2) .figure, .team-card:nth-child(4n+2) .ratio { box-shadow: 0 0 0 4px var(--cream), 0 0 0 8px var(--p-coral-ink); }
.team-card:nth-child(4n+3) .figure, .team-card:nth-child(4n+3) .ratio { box-shadow: 0 0 0 4px var(--cream), 0 0 0 8px var(--p-lav-ink); }
.team-card:nth-child(4n+4) .figure, .team-card:nth-child(4n+4) .ratio { box-shadow: 0 0 0 4px var(--cream), 0 0 0 8px var(--p-green-ink); }
.team-card .who { margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.team-card .role { font-size: var(--t-4); font-weight: 700; letter-spacing: -.02em; }
.team-card .abbr { font-size: var(--t-xs); font-weight: 700; color: var(--brand-500); }
.team-card .bio { font-size: var(--t-sm); color: var(--on-cream-muted); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   11 · Campaigns
   -------------------------------------------------------------------------- */
.campaign-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 320px; padding: clamp(1.4rem,2.2vw,1.8rem);
  background: var(--cream); border: 1.5px solid var(--p-blue); border-radius: var(--r-lg);
  overflow: hidden; color: var(--on-cream);
  transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease);
}
.cols-2 > .campaign-card:nth-child(4n+2), .cols-3 > .campaign-card:nth-child(4n+2), .cols-4 > .campaign-card:nth-child(4n+2) { border-color: var(--p-coral); }
.cols-2 > .campaign-card:nth-child(4n+3), .cols-3 > .campaign-card:nth-child(4n+3), .cols-4 > .campaign-card:nth-child(4n+3) { border-color: var(--p-lav); }
.cols-2 > .campaign-card:nth-child(4n+4), .cols-3 > .campaign-card:nth-child(4n+4), .cols-4 > .campaign-card:nth-child(4n+4) { border-color: var(--p-green); }
.campaign-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); }
/* A real framed thumbnail, not a washed-out ghost behind the copy. */
.campaign-card-bg { position: relative; display: block; z-index: 1; margin-bottom: 1.1rem; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10; background: var(--cream-2); }
.campaign-card-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease-out); }
.campaign-card:hover .campaign-card-bg img { transform: scale(1.05); }
.campaign-card > * { position: relative; z-index: 1; }
.campaign-card .top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.campaign-card .bottom { margin-top: auto; }
.campaign-card h3 { font-size: var(--t-3); font-weight: 700; margin-bottom: .4rem; }
.campaign-card:hover h3 { color: var(--brand-500); }
.campaign-card .tagline { display: block; font-size: var(--t-sm); color: var(--on-cream-muted); }
.campaign-card .link { margin-top: 1rem; }
.campaign-icon { width: 52px; height: 52px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   12 · Closing call — cream band, doodled CTA
   -------------------------------------------------------------------------- */
.cta-band { position: relative; background: var(--brand-900); overflow: hidden; }
.cta-band::before, .cta-band::after { display: none; }
.cta-inner { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; gap: 1.5rem; max-width: 44ch; margin-inline: auto; }
.cta-inner h2 { font-size: clamp(2.1rem,4.4vw,3.5rem); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; }
.cta-ghost { display: none; }

/* --------------------------------------------------------------------------
   13 · Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; background: var(--cream-2); --on-cream: var(--ink); --on-cream-muted:#C2D9E4; --on-cream-faint:#9FBECC; --line: rgba(41,191,239,.22); --line-soft: rgba(41,191,239,.12); color: var(--ink); padding-top: clamp(3rem,5.5vw,4.5rem); font-size: var(--t-sm); }
.footer-top { display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2fr)); gap: clamp(1.75rem,4vw,3rem); padding-bottom: clamp(2rem,4vw,3rem); border-bottom: 1.5px solid var(--line); }
@media (max-width: 1000px) { .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .footer-top { grid-template-columns: minmax(0,1fr); } }
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { max-width: 34ch; color: var(--on-cream-muted); }
.footer-col h4 { font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.footer-col ul { display: flex; flex-direction: column; }
.footer-col a { display: block; padding: .32rem 0; color: var(--on-cream-muted); transition: color var(--fast) var(--ease); }
.footer-col a:hover { color: var(--brand-500); }

.footer-contact { padding-block: clamp(1.75rem,3vw,2.5rem); border-bottom: 1.5px solid var(--line); }
.footer-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2vw,1.5rem); }
@media (max-width: 800px) { .footer-contact-grid { grid-template-columns: minmax(0,1fr); } }
.footer-contact-item { display: flex; gap: .9rem; align-items: flex-start; padding: clamp(1rem,2vw,1.3rem); background: var(--cream); border-radius: var(--r-lg); }
.footer-contact-item .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--brand-100); color: var(--brand-500); flex: none; }
.footer-contact-item .l { font-size: var(--t-xs); font-weight: 700; color: var(--on-cream-faint); margin-bottom: .35rem; }
.footer-contact-item a, .footer-contact-item span { display: block; color: var(--ink); line-height: 1.55; }
.footer-contact-item a:hover { color: var(--brand-500); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; font-size: var(--t-xs); color: var(--on-cream-faint); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-legal a:hover { color: var(--brand-500); }
.social { display: flex; gap: .4rem; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; background: var(--cream); border-radius: 50%; transition: all var(--fast) var(--ease); }
.social a:hover { background: var(--ink); color: var(--cream); }
.social .icon { width: 16px; height: 16px; }
.footer-wordmark { display: none; }

/* The drawer sits on --cream, so the footer's cream circles would vanish.
   Step the chips one tone darker instead of inheriting. */
.drawer-social { margin-top: 1.25rem; }
.drawer-social a { background: var(--cream-2); }

/* --------------------------------------------------------------------------
   13b · Floating dock — WhatsApp + back to top
   The WhatsApp link is always present and anchors the dock; .to-top is parked
   permanently above it so nothing shifts when it fades in and out.
   -------------------------------------------------------------------------- */
:root { --dock-x: clamp(1rem,3vw,2rem); --dock-y: clamp(1rem,3vw,2rem); --wa-size: 56px; }

.wa-fab {
  position: fixed; right: var(--dock-x); bottom: var(--dock-y); z-index: 890;
  display: flex; align-items: center; gap: 0;
  height: var(--wa-size); padding: 0; border-radius: var(--pill);
  /* WhatsApp's darker brand teal, not the light #25D366 — a white glyph on
     that lighter green measures 1.9:1 and fails the 3:1 non-text minimum. */
  background: #128C7E; color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(6,68,60,.34);
  transition: background var(--fast) var(--ease), box-shadow var(--mid) var(--ease-out),
              transform var(--mid) var(--ease-out), opacity var(--mid) var(--ease);
}
/* Only gated when the scroll handler exists to bring it back — without JS it
   simply stays put. */
.js .wa-fab { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92); }
.js .wa-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover, .wa-fab:focus-visible { background: #0E7364; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(6,68,60,.4); }
.wa-fab-glyph { position: relative; flex: 0 0 var(--wa-size); width: var(--wa-size); height: var(--wa-size); display: grid; place-items: center; }
.wa-fab .icon { position: relative; z-index: 1; width: 26px; height: 26px; }

/* Slow halo so the button reads as live without ever demanding attention. */
.wa-fab-glyph::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  animation: wa-halo 3.2s var(--ease-out) infinite;
}
@keyframes wa-halo {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Once the label is open the halo would sweep across it, so retire it. */
.wa-fab:hover .wa-fab-glyph::before,
.wa-fab:focus-visible .wa-fab-glyph::before { animation: none; opacity: 0; }

/* Label unrolls on hover/focus — closed by default so the dock stays quiet. */
.wa-fab-label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: -.01em;
  opacity: 0; transition: max-width var(--mid) var(--ease-out), opacity var(--fast) var(--ease), padding-right var(--mid) var(--ease-out);
  padding-right: 0;
}
.wa-fab:hover .wa-fab-label, .wa-fab:focus-visible .wa-fab-label { max-width: 12rem; opacity: 1; padding-right: 1.35rem; }
@media (max-width: 700px) { .wa-fab:hover .wa-fab-label, .wa-fab:focus-visible .wa-fab-label { max-width: 0; opacity: 0; padding-right: 0; } }

.to-top { position: fixed; right: var(--dock-x); bottom: calc(var(--dock-y) + var(--wa-size) + .7rem); z-index: 880; width: 50px; height: 50px; margin-right: 3px; display: grid; place-items: center; background: var(--ink); color: var(--cream); border: 0; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); box-shadow: var(--lift-2); transition: all var(--mid) var(--ease-out); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-500); transform: translateY(-3px); }
.to-top .icon { width: 18px; height: 18px; transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   14 · 404
   -------------------------------------------------------------------------- */
.error-page { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; background: var(--cream-2); --on-cream: var(--ink); --on-cream-muted:#4C5451; color: var(--ink); padding-block: clamp(4rem,8vw,6.5rem); }
.error-code { font-size: clamp(5rem,17vw,12rem); font-weight: 400; letter-spacing: -.05em; line-height: .9; color: var(--brand-500); }

/* --------------------------------------------------------------------------
   15 · Leadership
   -------------------------------------------------------------------------- */
.leader-block { position: relative; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.75rem,4.5vw,4rem); align-items: center; padding-block: clamp(2.5rem,4.5vw,3.75rem); }
.leader-block + .leader-block { border-top: 1.5px solid var(--line); }
.leader-block.is-flipped { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.leader-block.is-flipped > .leader-portrait { order: 2; }
@media (max-width: 900px) { .leader-block, .leader-block.is-flipped { grid-template-columns: minmax(0,1fr); } .leader-block.is-flipped > .leader-portrait { order: 0; } }

.leader-portrait { position: relative; }
.leader-portrait::before { display: none; }
/* Circular portrait in a thick brand ring — the reference's avatar treatment,
   scaled up. */
.leader-frame {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%;
  background: var(--p-cyan);
  width: min(100%, 400px); margin-inline: auto;
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 13px var(--brand-500);
}
.leader-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, center 20%); transition: transform 1.05s var(--ease-out); }
.leader-portrait:hover .leader-frame img { transform: scale(1.04); }
/* Small satellite circle, as in the reference. */
.leader-numeral {
  position: absolute; z-index: 3; right: 4%; bottom: 2%;
  width: clamp(54px,7vw,76px); height: clamp(54px,7vw,76px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 5px var(--brand-500);
  font-size: var(--t-4); font-weight: 700; color: var(--brand-500);
  -webkit-text-stroke: 0;
}
.leader-block.is-flipped .leader-numeral { right: auto; left: 4%; }

.leader-badge { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem; padding: .45rem 1rem; background: var(--cream-2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 700; color: var(--ink); position: static; }
.leader-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); flex: none; }
.leader-portrait { text-align: center; }

.leader-body { min-width: 0; }
.leader-quote { display: block; width: 34px; height: 34px; color: var(--brand-500); margin-bottom: 1rem; }
.leader-lead { font-size: clamp(1.35rem,2.4vw,1.95rem); font-weight: 400; line-height: 1.24; letter-spacing: -.026em; margin-bottom: 1.35rem; color: var(--on-cream); }
.leader-lead::before, .leader-lead::after { content: none; }
.leader-message p { font-size: var(--t-body); line-height: 1.7; color: var(--on-cream-muted); margin-bottom: .8em; }
.leader-pillars { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.leader-pillar { padding: .4rem .9rem; background: var(--cream-2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 700; color: var(--ink); }

.leader-sign { margin-top: clamp(1.6rem,2.5vw,2.1rem); }
.leader-sign-rule { height: 1.5px; background: var(--line); margin-bottom: 1rem; transform-origin: left; }
.js .leader-sign-rule { transform: scaleX(0); transition: transform var(--slow) var(--ease-out) .1s; }
.js .is-in .leader-sign-rule, .js .leader-sign-rule.is-in { transform: scaleX(1); }
.leader-name { font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 700; line-height: 1.15; letter-spacing: -.028em; margin: 0; }
.leader-role { font-size: var(--t-sm); font-weight: 600; color: var(--brand-500); margin: .3rem 0 0; }

.leader-contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.leader-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; background: var(--cream-2); border: 0; border-radius: var(--pill); font-size: var(--t-sm); font-weight: 600; transition: all var(--fast) var(--ease); }
.leader-chip::after { display: none; }
.leader-chip:hover { background: var(--ink); color: var(--cream); }
.leader-chip .icon { width: 15px; height: 15px; flex: none; }

.leader-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,2vw,1.5rem); }
@media (max-width: 720px) { .leader-strip { grid-template-columns: minmax(0,1fr); } }
.leader-mini { position: relative; display: grid; grid-template-columns: 104px minmax(0,1fr); gap: clamp(1rem,2vw,1.4rem); align-items: center; padding: clamp(1.1rem,2vw,1.5rem); background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-lg); transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease); }
.leader-mini::before { content: none; }
.leader-mini:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
/* Two columns with a vertically-centred portrait leaves an empty notch beside
   the name once the quote makes the text column tall. Below 560px the inner
   wrapper is dissolved with display:contents so the card's real parts can be
   placed directly: portrait beside the name and role, then the quote and the
   contact chips each spanning the full width. */
@media (max-width: 560px) {
  .leader-mini {
    grid-template-columns: 72px minmax(0,1fr);
    column-gap: .95rem; row-gap: 0; align-items: start;
  }
  .leader-mini > div { display: contents; }
  .leader-mini-photo { grid-column: 1; grid-row: 1 / span 2; }
  .leader-mini .n { grid-column: 2; grid-row: 1; align-self: end; }
  .leader-mini .r { grid-column: 2; grid-row: 2; align-self: start; }
  .leader-mini .q { grid-column: 1 / -1; grid-row: 3; margin-top: .9rem; }
  .leader-mini .leader-contact { grid-column: 1 / -1; grid-row: 4; flex-wrap: wrap; }
}
.leader-mini-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--p-cyan); box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--brand-500); }
.leader-mini-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, center 20%); transition: transform 1s var(--ease-out); }
.leader-mini:hover .leader-mini-photo img { transform: scale(1.06); }
.leader-mini .n { display: block; margin: 0; font-size: var(--t-4); font-weight: 700; letter-spacing: -.025em; }
.leader-mini-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.leader-mini:hover .n { color: var(--brand-500); }
.leader-mini .r { display: block; margin: .2rem 0 0; font-size: var(--t-xs); font-weight: 700; color: var(--brand-500); }
.leader-mini .q { display: block; margin: .6rem 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--on-cream-muted); }
.leader-mini .leader-contact { position: relative; z-index: 2; margin-top: .8rem; gap: .35rem; }
.leader-mini .leader-chip { padding: .5rem .85rem; font-size: var(--t-xs); }
@media (max-width: 1240px) and (min-width: 721px) { .leader-mini .chip-label { display: none; } }
@media (max-width: 430px) { .leader-mini .chip-label { display: none; } }

/* --------------------------------------------------------------------------
   16 · Misc
   -------------------------------------------------------------------------- */
.form-embed { border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.form-embed iframe { display: block; width: 100%; border: 0; }
.map-wrap { position: relative; aspect-ratio: 21/8; border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1); transition: filter var(--mid) var(--ease); }
.map-wrap:hover iframe { filter: grayscale(0); }
@media (max-width: 700px) { .map-wrap { aspect-ratio: 4/3; } }
.job-row { grid-template-columns: auto minmax(0,1fr) auto; }
@media (max-width: 860px) { .job-row { grid-template-columns: minmax(0,1fr); gap: .9rem; } .job-row > :last-child { justify-self: start; } }

.card-media { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--cream-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease-out); }
.card-media::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(10,10,10,.92) 4%, rgba(10,10,10,.62) 34%, rgba(10,10,10,.12) 68%, transparent); pointer-events: none; }
.card-media:hover img { transform: scale(1.04); }
.card-media-body { position: absolute; inset: auto 0 0 0; z-index: 4; display: block; padding: clamp(1.1rem,2vw,1.5rem); color: #FFFFFF; }
.card-media-body h3 { color: #fff; font-weight: 700; }
.card-media-body .link, .card-media .card-media-body .link { color: #fff; border-color: #fff; }
.card-media-body .section-index, .card-media-body span { color: #FFFFFF; }
.card-media:hover .card-media-body h3 { color: var(--p-blue); }
.split-media::before { display: none; }

/* ==========================================================================
   17 · Bloom field — the hero motion graphic.
   Soft expanding rings, drawn clean. See motion.js for why the metaball
   blur+contrast approach was rejected here.
   ========================================================================== */
.hero-art { position: relative; isolation: isolate; }

.goo-field {
  position: absolute;
  /* Explicit offsets + size: `inset` alone leaves a replaced element at its
     intrinsic pixel size, and width:100% would cancel the expansion. */
  inset: auto; left: -26%; top: -26%;
  width: 152%; height: 152%;
  /* The global `canvas { max-width:100% }` reset clamps that 152% back to the
     parent's width — which left the field offset without being widened, so it
     drifted a whole 26% to the left of the portrait. Opt out here. */
  max-width: none; max-height: none;
  z-index: 0;
  opacity: 1;
  /* Drawn clean. A contrast pass would neon-shift these colours. */
  filter: blur(.3px);
  pointer-events: none;
  /* The art column is wider than the photograph, so at 152% the field reached
     into the copy and drew arcs behind the headline. Dissolve it before it
     gets there — left and top stay open, where it only meets page margin. */
  -webkit-mask-image: linear-gradient(to right, #000 0 54%, transparent 88%);
          mask-image: linear-gradient(to right, #000 0 54%, transparent 88%);
}
/* Stacked layout puts the copy below, not beside — nothing to protect. */
@media (max-width: 960px) {
  .goo-field { -webkit-mask-image: none; mask-image: none; }
}

/* The photograph is inset so the field reads as a halo around it. */
.hero-art .figure { position: relative; z-index: 2; width: 84%; margin-inline: auto; }
.hero-art .hero-bubble { z-index: 3; }

/* Static single frame when motion is reduced. */
@media (prefers-reduced-motion: reduce) { .goo-field { opacity: .75; } }

/* --------------------------------------------------------------------------
   18 · Orbit — the circular process diagram
   -------------------------------------------------------------------------- */
/* The nodes are pushed outside the circle by translate(0,-168%), so the element
   paints roughly 9% wider than its own box on each side. Sizing it to 100% of
   the column therefore pushed the whole page into horizontal scroll; 84% leaves
   exactly the room that protrusion needs. */
.orbit { position: relative; width: min(84%, 420px); aspect-ratio: 1; margin-inline: auto; }
.orbit-ring { position: absolute; inset: 0; }
.orbit-ring circle {
  fill: none; stroke: var(--brand-200); stroke-width: 2; stroke-dasharray: 7 9;
  stroke-dashoffset: 0;
}
.js .orbit-ring circle { stroke-dasharray: 4 600; transition: stroke-dasharray 1.4s var(--ease-out); }
.js .orbit.is-drawn .orbit-ring circle { stroke-dasharray: 7 9; }
.js .orbit.is-drawn .orbit-ring circle { animation: orbitSpin 34s linear infinite; }
@keyframes orbitSpin { to { stroke-dashoffset: -320; } }

.orbit-node {
  position: absolute; left: 50%; top: 50%;
  width: 27%; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  background: var(--cream); color: var(--on-cream-faint);
  border: 2px solid var(--line);
  font-size: var(--t-xs); font-weight: 700; line-height: 1.25;
  padding: .5rem;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(0, -168%) rotate(calc(var(--a) * -1));
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease),
              border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.orbit-node.is-lit {
  background: #29BFEF; color: #fff; border-color: #29BFEF;
  box-shadow: 0 12px 28px -10px rgba(58,99,168,.7);
}
.orbit-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 34%; aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  border-radius: 50%; background: var(--cream-2);
  font-size: var(--t-sm); font-weight: 700; line-height: 1.2; padding: .6rem;
}
/* Below 640px a ring of six labels is unreadable — the circle collapses to
   about 300px and each node has room for one cramped word. Same markup, same
   sequencing animation, re-laid out as a numbered list, which is what the
   diagram is actually communicating. */
@media (max-width: 640px) {
  .orbit {
    width: 100%; aspect-ratio: auto; display: grid; gap: .5rem;
    counter-reset: orbit-step;
  }
  .orbit-ring { display: none; }
  .orbit-node {
    position: static; transform: none;
    width: 100%; aspect-ratio: auto;
    display: grid; grid-template-columns: auto minmax(0,1fr);
    /* The circular layout centres its labels via place-items; in a list the
       label has to sit against its number, so the inline axis is reset. */
    align-items: center; justify-items: start;
    gap: .85rem; text-align: left;
    padding: .9rem 1.1rem; border-radius: var(--r);
    font-size: var(--t-sm); font-weight: 700; color: var(--on-cream);
    counter-increment: orbit-step;
  }
  .orbit-node::before {
    content: counter(orbit-step, decimal-leading-zero);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
    color: var(--brand-500); font-variant-numeric: tabular-nums;
  }
  /* On the ring a solid fill lighting up in sequence reads well. Stacked, six
     saturated bars just look like a solid block, so the lit state becomes a
     tint plus a brand edge — the sequence still reads, the panel stays calm. */
  .orbit-node.is-lit {
    background: var(--brand-100); color: var(--ink);
    border-color: var(--brand-500); box-shadow: none;
  }
  .orbit-node.is-lit::before { color: var(--brand-500); }
  /* The centre label is the outcome, so as a list it belongs at the end. Its
     cream-2 fill is invisible on this band, which is the same tone — as the
     closing statement it takes the brand fill instead. */
  .orbit-centre {
    position: static; transform: none;
    width: 100%; aspect-ratio: auto; padding: .9rem 1.1rem;
    border-radius: var(--pill); margin-top: .35rem;
    background: var(--brand-900); color: var(--cream);
  }
}

/* --------------------------------------------------------------------------
   19 · Doodle underline — hand-drawn emphasis on a word inside a headline
   -------------------------------------------------------------------------- */
.u-draw { position: relative; display: inline-block; }
.u-draw::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .22em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C26 3.5 52 2.4 72 4.2c20 1.8 44 3.4 66 1.1' fill='none' stroke='%231A1A1A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transform-origin: left;
}
.js .u-draw::after { transform: scaleX(0); transition: transform .8s var(--ease-out) .25s; }
.js .is-in .u-draw::after, .js .u-draw.is-in::after { transform: scaleX(1); }
.u-draw-blue::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C26 3.5 52 2.4 72 4.2c20 1.8 44 3.4 66 1.1' fill='none' stroke='%230F6E62' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.band-ink .u-draw::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C26 3.5 52 2.4 72 4.2c20 1.8 44 3.4 66 1.1' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* A small hand-drawn arrow used beside headings. */
.doodle-arrow {
  display: inline-block; width: 42px; height: 30px; vertical-align: middle; margin-left: .3rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42' fill='none' stroke='%230F6E62' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 6c14 22 32 30 52 30'/%3E%3Cpath d='M44 28l12 8-14 4'/%3E%3C/svg%3E");
}

/* Sweep highlight behind an inline word. */
.u-mark { position: relative; display: inline-block; isolation: isolate; }
.u-mark::before {
  content: ""; position: absolute; inset: .06em -.18em .04em -.18em; z-index: -1;
  background: var(--p-yellow); border-radius: 3px;
  transform-origin: left; transform: scaleX(0);
}
.js .u-mark::before { transition: transform .7s var(--ease-out) .3s; }
.js .is-in .u-mark::before, .js .u-mark.is-in::before { transform: scaleX(1); }

/* Reduced motion: stop the decorative loops outright rather than relying on
   the global duration override. */
@media (prefers-reduced-motion: reduce) {
  .ring-hero-photo, .float-av,
  .js .orbit.is-drawn .orbit-ring circle,
  .marquee-track, .pill-live .dot, .wa-fab-glyph::before { animation: none !important; }
  .wa-fab-glyph::before { opacity: 0; }
  .js .orbit-ring circle { stroke-dasharray: 7 9 !important; }
  .js .u-draw::after, .js .u-mark::before { transform: scaleX(1) !important; }
}

/* --------------------------------------------------------------------------
   22 · Touch targets
   Controls that are comfortable with a cursor are not with a thumb. Everything
   below measured under 44px tall on a phone. Where a control's design depends
   on its box (the .link underline is a border-bottom, so padding would detach
   the rule from the text) the hit area is extended with a pseudo-element and
   the visual is left exactly as it was.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .link, .topbar a { position: relative; }
  .link::before, .topbar a::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* These own their box, so they can simply grow. */
  .drawer-sub a { display: flex; align-items: center; min-height: 44px; }
  .leader-chip { min-height: 44px; }
  .radio-chip span { padding-block: .8rem; }

  /* The label is the real target here, but the box itself should still be
     tappable rather than a pinpoint. */
  .field-checkbox input { width: 22px; height: 22px; margin-top: .05rem; }
}



/* ==========================================================================
   23 · Reference layout — dark navy, sky-blue accent, isometric plates
   Measured from the live reference: grounds #0F2D3C and #013D51, accent
   #29BFEF, tiles 3px solid accent at 11.25px radius, headings Arial 700
   centred, motion on cubic-bezier(.445,.05,.55,.95) over 1.2s.
   ========================================================================== */

body { background: #0F2D3C; }

/* Everything centres in this layout, unlike the left-aligned original. */
.ib-hero, .ib-pillars, .ib-verticals-band, .ib-portfolio-band, .ib-join-band { text-align: center; }




/* Dotted connector run — the site's recurring network motif. */
.ib-dots { height: 8px; margin: 1.1rem auto 0; max-width: 900px;
  background-image: radial-gradient(#29BFEF 2.6px, transparent 2.7px);
  background-size: 32px 8px; background-position: center; background-repeat: repeat-x; }
.ib-dots-top { margin-bottom: 2.5rem; }

.ib-cta { margin-top: clamp(1.8rem,4vw,3rem); }
.ib-btn { display: inline-block; padding: 1rem 2rem; border-radius: 6px; background: #29BFEF; color: #06212E; font-weight: 700; font-size: 1.02rem; transition: background .4s, color .4s; }
.ib-btn:hover, .ib-btn:focus-visible { background: #7FDCFA; color: #06212E; }

/* Isometric plate with the glyph resting on its top face. */
.iso { position: relative; display: inline-grid; place-items: center; width: 118px; height: 118px;
  background: url('../img/iso-plate.png') center/contain no-repeat; }
.iso-glyph { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); }
.iso-glyph .icon { width: 34px; height: 34px; color: #fff; }


.ib-verticals-band { background: #013D51; padding-block: clamp(3.5rem,7vw,6rem); }
.ib-h2 { font-size: clamp(1.9rem,1.2rem+2.4vw,2.7rem); font-weight: 700; color: #fff; letter-spacing: normal; }
.ib-sub { margin-top: .8rem; font-size: 1.05rem; color: #C2D9E4; max-width: 60ch; margin-inline: auto; }

/* Outlined tiles that expand a detail panel on hover, as on the reference. */
.ib-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: clamp(.8rem,1.6vw,1.4rem); margin-top: clamp(2rem,4vw,3rem); align-items: start; }
.ib-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: .8rem;
  padding: 1.4rem 1rem 1.6rem; height: 200px;
  background: #013D51; border: 3px solid #29BFEF; border-radius: 11.25px;
  transition: border-color .4s, background-color .4s, transform .4s; }
.ib-tile-name { font-size: 1rem; font-weight: 700; color: #fff; }
@keyframes ibFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* The lockup arrives with weight: it scales up out of a blur and settles. */
@keyframes ibWelcomeIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.94); letter-spacing: .22em; filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; letter-spacing: normal; filter: blur(0); }
}
/* The lockup falls in from above and settles — the hero's headline move. */
@keyframes ibLogoDrop {
  0%   { opacity: 0; transform: translateY(-120px) scale(.86); filter: blur(12px); }
  55%  { opacity: 1; filter: blur(0); }
  78%  { transform: translateY(9px) scale(1.012); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.ib-hero.is-live .ib-welcome {
  animation-name: ibWelcomeIn; animation-duration: 1.15s; animation-delay: .12s;
  animation-timing-function: cubic-bezier(.16,.84,.36,1); }
.ib-hero.is-live .ib-wordmark-text {
  animation-name: ibLogoDrop; animation-duration: 1.5s; animation-delay: .95s;
  animation-timing-function: cubic-bezier(.19,1,.22,1); }



.ib-welcome { font-size: clamp(1.5rem,1rem+1.5vw,2.05rem); font-weight: 700; color: #fff; }

.ib-wordmark { display: flex; align-items: center; justify-content: center; gap: clamp(1rem,3vw,2.5rem); margin-top: 1.2rem; }
.ib-wordmark-text { display: inline-flex; align-items: center; }
.ib-wordmark-text img { width: clamp(280px, 34vw, 520px); height: auto; }

.js /* Both nodes travel to their own resting point, so they finish side by side
   rather than stacked on top of each other. */
@keyframes railL { 0% { left: 2%; } 55%,100% { left: var(--end); } }
@keyframes railR { 0% { left: calc(98% - 28px); } 55%,100% { left: var(--end); } }

.ib-tagline { margin-top: clamp(1.4rem,3vw,2.2rem); font-size: clamp(1rem,.85rem+.7vw,1.45rem);
  font-weight: 700; color: #fff; letter-spacing: normal; max-width: 40ch; margin-inline: auto; }

.ib-dots { position: relative; height: 14px; margin: 1.3rem auto 0; max-width: 940px;
  background-image: radial-gradient(circle at center, #29BFEF 3.1px, transparent 3.6px);
  background-size: 30px 14px; background-position: center; background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* The run draws itself outward from the centre. */
.js .ib-hero.is-live .ib-dots { animation: ibDotsDraw 1.1s cubic-bezier(.445,.05,.55,.95) 1.35s both; }
@keyframes ibDotsDraw { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

/* Pillars hang off the dotted run on a stem with a node at each end. */
.ib-pillar-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: clamp(1rem,3vw,2.4rem); max-width: 1040px; margin: 0 auto; }
.ib-pillar { position: relative; padding-top: 2.1rem; }
.ib-stem { position: absolute; top: -10px; left: 50%; width: 2px; height: 2rem; background: #29BFEF; transform: translateX(-50%); }
.ib-stem::before, .ib-stem::after { content: ''; position: absolute; left: 50%; width: 11px; height: 11px;
  border-radius: 50%; background: #29BFEF; transform: translateX(-50%); }
.ib-stem::before { top: -5px; }
.ib-stem::after  { bottom: -5px; }
.ib-pillar h3 { margin-top: 1rem; font-size: 1.12rem; font-weight: 700; color: #fff; }
.ib-pillar p  { margin-top: .4rem; font-size: .9rem; line-height: 1.45; color: #C2D9E4; }

.ib-cta { margin-top: clamp(2rem,4vw,3.2rem); }

@media (prefers-reduced-motion: reduce) {
  .js   .js .ib-hero .ib-welcome, .js .ib-hero .ib-wordmark-text, .js .ib-hero .ib-tagline,
  .js .ib-hero .ib-dots, .js .ib-hero .ib-pillar, .js .ib-hero .ib-cta { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   25 · Brand lockup placements
   -------------------------------------------------------------------------- */
.brand { display: block; flex: none; }
.brand img { height: clamp(36px, 3.4vw, 50px); width: auto; max-width: none; }
.brand:hover img { transform: none; }
.footer-brand { margin-bottom: 1.4rem; }
.footer-brand img { width: clamp(170px, 18vw, 230px); height: auto; }
.drawer .brand img { width: 170px; }

/* Pillars enter from alternating sides, settling on the dotted run. */
.js .ib-hero.is-live .ib-pillar {
  animation: ibPillarL 1.25s cubic-bezier(.19,1,.22,1) both;
  animation-delay: calc(2.35s + var(--i) * .18s);
}
.js .ib-hero.is-live .ib-pillar:nth-child(2),
.js .ib-hero.is-live .ib-pillar:nth-child(4) { animation-name: ibPillarR; }
@keyframes ibPillarL {
  0%   { opacity: 0; transform: translateX(-90px) translateY(14px); filter: blur(7px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ibPillarR {
  0%   { opacity: 0; transform: translateX(90px) translateY(14px); filter: blur(7px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   26 · Vertical tile hover
   The box never changes size. Inside it the plate slides down and the
   description is uncovered above — the grid stays completely still.
   -------------------------------------------------------------------------- */
.ib-tile { overflow: hidden; }
.ib-tile-name, .ib-tile .iso, .ib-tile-reveal {
  transition: transform .55s cubic-bezier(.19,1,.22,1),
              opacity .38s cubic-bezier(.445,.05,.55,.95);
}
.ib-tile .iso { transform: translateY(0); }
.ib-tile-reveal {
  position: absolute; left: .9rem; right: .9rem; top: 1.5rem;
  display: grid; gap: .28rem; text-align: center;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
}
.ib-tile-reveal strong { color: #29BFEF; font-size: .93rem; font-weight: 700; }
.ib-tile-reveal span   { font-size: .82rem; line-height: 1.45; color: #C2D9E4; }

/* On hover the plate drops to the foot of the tile and the copy takes its place. */
.ib-tile:hover .iso, .ib-tile:focus-visible .iso { transform: translateY(30px) scale(.58); }
.ib-tile:hover .ib-tile-name, .ib-tile:focus-visible .ib-tile-name { opacity: 0; transform: translateY(-8px); }
.ib-tile:hover .ib-tile-reveal, .ib-tile:focus-visible .ib-tile-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ib-tile-name, .ib-tile .iso, .ib-tile-reveal { transition: opacity .2s linear; }
  .ib-tile:hover .iso, .ib-tile:focus-visible .iso { transform: translateY(30px) scale(.58); }
}

/* ==========================================================================
   27 · Hero sequence, matched to the reference recording
   Read off the capture at 8fps: nodes are born clustered at the centre, the
   rail draws outward from the middle, the nodes fly to the far ends, then
   travel back inward and settle either side of the lockup.
   ========================================================================== */
.ib-rail { position: relative; flex: 1 1 0; max-width: 340px; height: 2px; background: #29BFEF; }
.ib-rail i { position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: #0F2D3C; border: 2px solid #29BFEF; }

/* Resting positions (also the no-JS state): inner end, side by side. */
.ib-rail-l i:nth-child(1) { left: calc(100% - 62px); }
.ib-rail-l i:nth-child(2) { left: calc(100% - 30px); }
.ib-rail-r i:nth-child(1) { left: 36px; }
.ib-rail-r i:nth-child(2) { left: 4px; }

.js .ib-hero .ib-rail { transform: scaleX(0); }
.js .ib-hero .ib-rail-l { transform-origin: 100% 50%; }   /* draws leftward from centre */
.js .ib-hero .ib-rail-r { transform-origin: 0 50%; }      /* draws rightward from centre */
.js .ib-hero .ib-rail i { opacity: 0; }

.js .ib-hero.is-live .ib-rail {
  animation: ibRailDraw .62s cubic-bezier(.19,1,.22,1) 1.05s both;
}
@keyframes ibRailDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Each node: appear at the centre-side end, fly out to the far end, come back. */
.js .ib-hero.is-live .ib-rail-l i { animation: ibNodeL 2.05s cubic-bezier(.33,.9,.28,1) both; }
.js .ib-hero.is-live .ib-rail-r i { animation: ibNodeR 2.05s cubic-bezier(.33,.9,.28,1) both; }
.js .ib-hero.is-live .ib-rail-l i:nth-child(1),
.js .ib-hero.is-live .ib-rail-r i:nth-child(1) { animation-delay: .95s; }
.js .ib-hero.is-live .ib-rail-l i:nth-child(2),
.js .ib-hero.is-live .ib-rail-r i:nth-child(2) { animation-delay: 1.02s; }

@keyframes ibNodeL {
  0%   { opacity: 0; left: calc(100% - 26px); transform: scale(.4); }
  12%  { opacity: 1; transform: scale(1); }
  38%  { left: 0; }                       /* out to the far end */
  100% { opacity: 1; left: var(--rest); } /* then back inward to rest */
}
@keyframes ibNodeR {
  0%   { opacity: 0; left: 0; transform: scale(.4); }
  12%  { opacity: 1; transform: scale(1); }
  38%  { left: calc(100% - 26px); }
  100% { opacity: 1; left: var(--rest); }
}
.ib-rail-l i:nth-child(1) { --rest: calc(100% - 62px); }
.ib-rail-l i:nth-child(2) { --rest: calc(100% - 30px); }
.ib-rail-r i:nth-child(1) { --rest: 36px; }
.ib-rail-r i:nth-child(2) { --rest: 4px; }
@media (max-width: 860px) { .ib-rail { display: none; } }

/* Content follows the rails, in the recording's order. */
.ib-hero.is-live .ib-welcome {
  animation-name: ibWelcomeIn; animation-duration: 1s; animation-delay: 2.25s;
  animation-timing-function: cubic-bezier(.16,.84,.36,1);
}
.ib-hero.is-live .ib-wordmark-text {
  animation-name: ibLogoDrop; animation-duration: 1.25s; animation-delay: 2.75s;
  animation-timing-function: cubic-bezier(.19,1,.22,1);
}
.js .ib-hero.is-live .ib-dots { animation: ibDotsDraw .95s cubic-bezier(.19,1,.22,1) 3.5s both; }
.ib-hero.is-live .ib-tagline { animation-delay: 3.95s; }
.js .ib-hero.is-live .ib-pillar { animation-delay: calc(4.35s + var(--i) * .17s); }
.ib-hero.is-live .ib-cta { animation-delay: 5.3s; }

@media (prefers-reduced-motion: reduce) {
  .js .ib-hero .ib-rail { transform: none; }
  .js .ib-hero .ib-rail i { opacity: 1; }
  .js .ib-hero.is-live .ib-rail, .js .ib-hero.is-live .ib-rail i { animation: none; }
}

/* The staged elements must hold their 0% state through their delay; without
   an explicit fill-mode they resolve to `none` and appear immediately. */
.js .ib-hero.is-live .ib-welcome,
.js .ib-hero.is-live .ib-wordmark-text,
.js .ib-hero.is-live .ib-tagline,
.js .ib-hero.is-live .ib-dots,
.js .ib-hero.is-live .ib-pillar,
.js .ib-hero.is-live .ib-cta { animation-fill-mode: both; }

/* The tagline and button had no animation-name of their own once the original
   grouped rule was replaced, so fill-mode had nothing to hold and they painted
   immediately. Give each an explicit animation. */
.js .ib-hero.is-live .ib-tagline {
  animation: ibFadeUp 1.1s cubic-bezier(.445,.05,.55,.95) 3.95s both;
}
.js .ib-hero.is-live .ib-cta {
  animation: ibFadeUp 1.1s cubic-bezier(.445,.05,.55,.95) 5.3s both;
}

/* --------------------------------------------------------------------------
   28 · Brand lockup (inline SVG, animated cord)
   -------------------------------------------------------------------------- */
.chs-logo { display: inline-block; line-height: 0; }
.chs-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.chs-logo-hero { width: clamp(300px, 38vw, 560px); }
.chs-logo-sm   { width: clamp(132px, 13vw, 176px); }
.footer-brand .chs-logo-sm { width: clamp(150px, 16vw, 200px); }
.chs-cord { transition: stroke-width .3s var(--ease); }
.chs-logo:hover .chs-cord { stroke-width: 6.5; }

/* --------------------------------------------------------------------------
   29 · Contrast repair after the palette inversion
   --cream is now the navy ground and --ink is white, so every rule that used
   --cream to mean "light text" produced navy on navy. These pin real values.
   -------------------------------------------------------------------------- */
.cta-band, .cta-band h2, .cta-band .lead, .cta-band p { color: #FFFFFF; }
.cta-band .eyebrow, .cta-band .eyebrow-azure { color: #29BFEF; }
.cta-band .link { color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.cta-band .link:hover { color: #29BFEF; border-color: #29BFEF; }

.band-ink, .band-ink h2, .band-ink h3, .band-ink p, .band-ink li { color: #FFFFFF; }
.band-ink .muted, .band-ink-2 .muted { color: #C2D9E4; }
.eyebrow { color: #29BFEF; }

.site-footer, .site-footer p, .site-footer .l { color: #FFFFFF; }
.footer-col a, .footer-legal a, .footer-contact-item a { color: #C2D9E4; }
.footer-col a:hover, .footer-legal a:hover, .footer-contact-item a:hover { color: #29BFEF; }
.footer-col h3, .footer-col .h { color: #FFFFFF; }
.footer-bottom { color: #9FBECC; }

/* Accent buttons: the accent is a light blue, so its label must be dark. */
.btn-amber, .ib-btn { background: #29BFEF; color: #06212E; border-color: #29BFEF; }
.btn-amber:hover, .ib-btn:hover { background: #7FDCFA; color: #06212E; border-color: #7FDCFA; }
.btn-ghost, .btn-ghost-ink { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover, .btn-ghost-ink:hover { background: #FFFFFF; color: #0F2D3C; border-color: #FFFFFF; }

/* Page hero sits on the mid navy. */
.page-hero, .page-hero h1, .page-hero .lead { color: #FFFFFF; }
.page-hero .eyebrow { color: #29BFEF; }

/* Remaining inverted spots: .link inside light-surface resets, and the
   timeline dot which kept its old light-on-light pairing. */
.link { color: #FFFFFF; border-color: #FFFFFF; }
.link:hover { color: #29BFEF; border-color: #29BFEF; }
.band-ink .link, .cta-band .link { color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.timeline-dot { background: #29BFEF; color: #06212E; border-color: #29BFEF; }

/* --------------------------------------------------------------------------
   30 · Portfolio section — it had lost its card treatment and collapsed into
   a centre-aligned run of text. Restore it as a proper grid of ruled cards.
   -------------------------------------------------------------------------- */
.ib-portfolio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem; margin-top: clamp(2rem,4vw,3rem); text-align: left;
}
.ib-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: clamp(1.5rem,2.4vw,2rem);
  background: #013D51; border: 2px solid rgba(41,191,239,.38); border-radius: 11.25px;
  transition: border-color .4s, background-color .4s, transform .4s;
}
.ib-card:hover { border-color: #29BFEF; background: #06334A; transform: translateY(-3px); }
.ib-card-num { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: #29BFEF; }
.ib-card h3 { font-size: 1.24rem; font-weight: 700; color: #FFFFFF; letter-spacing: -.02em; }
.ib-card p { font-size: .93rem; line-height: 1.55; color: #C2D9E4; }
.ib-card .link { margin-top: auto; padding-top: .9rem; font-size: .9rem; }

/* The timeline dot label sits on the accent chip, so it needs the dark ink. */
.timeline-dot, .timeline-dot span, .timeline .timeline-dot {
  background: #29BFEF !important; color: #06212E !important;
  border-color: #29BFEF !important; font-weight: 700;
}

/* --------------------------------------------------------------------------
   31 · Header brand lockup — mark plus wordmark
   The mark carries the cord, so the wordmark sits beside it on a divider
   rather than beneath, keeping the header bar at its existing height.
   -------------------------------------------------------------------------- */
.site-header .brand { display: flex; align-items: center; gap: .8rem; }
.site-header .brand .chs-logo-sm { width: clamp(86px, 8.5vw, 112px); flex: none; }
.site-header .brand-text {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.1;
  padding-left: .85rem; border-left: 1.5px solid rgba(41,191,239,.4);
}
.site-header .brand-name { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; white-space: nowrap; }
.site-header .brand-sub  { font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #29BFEF; white-space: nowrap; }
@media (max-width: 1240px) { .site-header .brand-text { display: none; } }

/* Footer keeps the stacked treatment it already had. */
.footer-brand .brand { display: flex; align-items: center; gap: .85rem; }
.footer-brand .brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.footer-brand .brand-name { font-size: 1.02rem; font-weight: 700; color: #FFFFFF; }
.footer-brand .brand-sub  { font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #29BFEF; }

/* --------------------------------------------------------------------------
   32 · Numbers band
   -------------------------------------------------------------------------- */
.ib-stats-band { background: #013D51; padding-block: clamp(2.5rem,5vw,4rem); text-align: center; }
.ib-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: clamp(1.5rem,3vw,3rem); }
.ib-stat .v { font-size: clamp(2.3rem,1.4rem+2.6vw,3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #29BFEF; }
.ib-stat .l { margin-top: .55rem; font-size: var(--t-sm); color: #FFFFFF; }

/* The 404 page kept the old light-surface pairing. */
.error-page { background: #013D51; --on-cream: #FFFFFF; --on-cream-muted: #C2D9E4; color: #FFFFFF; }
.error-page .lead, .error-page p { color: #C2D9E4; }
.error-code { color: #29BFEF; }

/* --------------------------------------------------------------------------
   33 · Header CTA — sized to the bar, not to a page-level button
   -------------------------------------------------------------------------- */
.header-cta .btn {
  padding: .62rem 1.2rem;
  font-size: .88rem;
  border-radius: 6px;
  line-height: 1.2;
}
.header-cta .btn .icon { width: 13px; height: 13px; }