@charset "UTF-8";
/* ==========================================================================
   KAREEMIYA TECHNOLOGIES & BPO

   UI/UX modelled on hugoinc.com at the client's direction: warm cream ground,
   black text, light-weight airy headlines, black pill buttons, pastel
   outlined cards with a large radius, hand-drawn accents, curved section
   dividers, and a ring-grid motif.

   Two deliberate substitutions:
   · Type    — Hugo licenses PP Mori + Belle (commercial). Closest free
               equivalents used here: Plus Jakarta Sans + Caveat.
   · Imagery — Kareemiya's own photography, not Hugo's.

   Accent    — where Hugo uses yellow, this uses the royal blue sampled from
               the Kareemiya logo, so the palette stays on-brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground — warm cream, never pure white */
  --cream:    #FFFEF9;
  --cream-2:  #FFF9E6;
  --cream-3:  #F7EDCF;

  /* Ink */
  --ink:      #0A0A0A;
  --ink-2:    #3D3D3D;
  --ink-soft: #5E5E5E;

  /* Brand — royal blue sampled from the logo gradient */
  --brand-900: #212C3E;
  --brand-700: #2C3E63;
  --brand-500: #3A63A8;
  --brand-400: #4B7BD0;
  --brand-300: #9FBDEA;   /* accent on dark bands — 7.3:1 on navy */
  --brand-200: #C7DBFA;
  --brand-100: #E6EEFB;

  /* Pastel set, rotated across cards and sections */
  --p-blue:   #C7DBFA;
  --p-cyan:   #ABE9EF;
  --p-lav:    #CDA9F9;
  --p-coral:  #FEA898;
  --p-green:  #91E968;
  --p-yellow: #FFEA97;

  --p-cyan-ink:  #0BADBF;
  --p-lav-ink:   #9A4AFC;
  --p-coral-ink: #ED573B;
  --p-green-ink: #50B720;

  /* Semantic text */
  --on-cream:       var(--ink);
  --on-cream-muted: #4A4A4A;
  --on-cream-faint: #6B6B6B;
  --on-dark:        var(--cream);
  --on-dark-muted:  rgba(255,254,249,.78);
  --on-dark-faint:  rgba(255,254,249,.60);

  --line:      rgba(10,10,10,.12);
  --line-soft: rgba(10,10,10,.07);
  --line-firm: rgba(10,10,10,.24);

  --lift-1: 0 1px 2px rgba(10,10,10,.05);
  --lift-2: 0 12px 30px -12px rgba(10,10,10,.16);
  --lift-3: 0 30px 70px -26px rgba(10,10,10,.24);

  /* Type — light and airy, following the reference */
  --t-hero: clamp(2.35rem, 1.3rem + 3.1vw, 3.85rem);
  --t-1:    clamp(2.2rem, 1.2rem + 3.2vw, 3.9rem);
  --t-2:    clamp(1.85rem, 1.2rem + 2.1vw, 3rem);
  --t-3:    clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  --t-4:    clamp(1.06rem, 1rem + .35vw, 1.22rem);
  --t-lead: clamp(1.02rem, .98rem + .35vw, 1.2rem);
  --t-body: 1rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-lab:  .78rem;

  --shell:  1280px;
  --narrow: 760px;
  --gutter: clamp(1.15rem, 3.4vw, 3rem);
  --band:   clamp(4rem, 7.5vw, 8rem);

  /* Radius — generous, following the reference */
  --r:    14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pill: 999px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: .22s; --mid: .42s; --slow: .9s;

  --nav-h: 82px;
}

/* Dark bands invert the semantic tokens. Used sparingly. */
.band-ink, .cta-band, .error-page-dark {
  --on-cream:       var(--on-dark);
  --on-cream-muted: var(--on-dark-muted);
  --on-cream-faint: var(--on-dark-faint);
  --brand-500:      var(--brand-300);   /* the mid blue is too dark on navy */
  --line:      rgba(255,254,249,.16);
  --line-soft: rgba(255,254,249,.09);
  --line-firm: rgba(255,254,249,.30);
  color: var(--on-dark);
}

/* Any component that paints its own LIGHT background must restore the light
   tokens, otherwise it inherits cream-on-cream text inside a dark band. */
.marquee, .leader-chip, .leader-pillar, .pill, .facts, .media-chip,
.card, .campaign-card, .rule-item, .ac-item, .quote-card, .timeline-item, .timeline-dot,
.tab, .filter-btn, .radio-chip span, .footer-contact-item, .masonry figcaption,
.nav-panel, .drawer, .site-footer, .page-hero, .leader-numeral, .form-embed,
.band-ink-2, .band-paper-2, .band-light {
  --on-cream:       var(--ink);
  --on-cream-muted: #4A4A4A;
  --on-cream-faint: #6B6B6B;
  --brand-500:      #3A63A8;
  --line:      rgba(10,10,10,.12);
  --line-soft: rgba(10,10,10,.07);
  --line-firm: rgba(10,10,10,.24);
  color: var(--ink);
}
/* …except the ones that are genuinely dark-on-dark inside .band-ink. */
.band-ink .card, .band-ink .rule-item, .band-ink .ac-item, .band-ink .quote-card,
.band-ink .timeline-item, .band-ink .timeline-dot, .band-ink .pill {
  --on-cream:       var(--on-dark);
  --on-cream-muted: var(--on-dark-muted);
  --on-cream-faint: var(--on-dark-faint);
  --brand-500:      var(--brand-300);
  --line:      rgba(255,254,249,.16);
  --line-soft: rgba(255,254,249,.09);
  --line-firm: rgba(255,254,249,.30);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--on-cream);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand-400); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }

/* Headlines: light weight, tight leading, generous size — the reference's
   defining typographic move. */
h1, h2, h3, h4, h5, .t-hero, .t-1, .t-2, .t-3, .h1, .h2, .h3, .h4 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.035em; }
.t-1, .h1, h1 { font-size: var(--t-1); }
.t-2, .h2, h2 { font-size: var(--t-2); }
.t-3, .h3, h3 { font-size: var(--t-3); line-height: 1.16; }
/* Small headings go bold, as in the reference's card titles. */
h4, h5, .t-4, .h4 { font-size: var(--t-4); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }

/* Emphasis inside a headline is the brand blue. */
h1 em, h2 em, h3 em, .t-hero em, .h1 em, .h2 em, .h3 em { font-style: normal; color: var(--brand-500); }
.band-ink h1 em, .band-ink h2 em, .cta-band h2 em { color: var(--p-blue); }

/* --------------------------------------------------------------------------
   3 · Layout
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: var(--narrow); }

.section { padding-block: var(--band); position: relative; }
.section-sm { padding-block: clamp(2.75rem,4.5vw,4.5rem); position: relative; }

.band-ink   { background: var(--brand-900); }
.band-ink-2 { background: var(--cream-2); --on-cream: var(--ink); --on-cream-muted: #4A4A4A; --on-cream-faint: #6B6B6B; --line: rgba(10,10,10,.12); --line-soft: rgba(10,10,10,.07); --line-firm: rgba(10,10,10,.24); color: var(--ink); }
.band-paper-2, .band-light { background: var(--cream-2); color: var(--ink); }

/* Curved divider — the reference's organic band transition. */
.curve-top::before, .curve-bottom::after {
  content: "";
  position: absolute; left: -5%; right: -5%;
  height: clamp(40px, 5vw, 90px);
  background: inherit;
  border-radius: 50% / 100%;
}
.curve-top::before  { top: calc(clamp(40px,5vw,90px) * -.5); }
.curve-bottom::after { bottom: calc(clamp(40px,5vw,90px) * -.5); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(1rem,2.2vw,2rem); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols-2,.cols-3,.cols-4 { gap: clamp(1rem,2vw,1.5rem); }
@media (max-width:1040px){ .cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} .cols-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr);} }

.stack{display:flex;flex-direction:column;} .row{display:flex;align-items:center;} .wrap{flex-wrap:wrap;}
.gap-xs{gap:.45rem;} .gap-s{gap:.8rem;} .gap-m{gap:1.3rem;} .gap-l{gap:2.2rem;}
.mt-s{margin-top:.9rem;} .mt-m{margin-top:1.7rem;} .mt-l{margin-top:2.75rem;}

/* --------------------------------------------------------------------------
   4 · Labels & section heads
   -------------------------------------------------------------------------- */
/* Eyebrow with the reference's hand-drawn underline. */
.eyebrow {
  position: relative; display: inline-block;
  font-size: var(--t-lead); font-weight: 500;
  letter-spacing: -.01em; text-transform: none;
  color: var(--on-cream);
  padding-bottom: .55rem; margin: 0 0 1.1rem;
}
.eyebrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C22 1.6 44 1.2 62 2.4c18 1.2 38 2 57 .6' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.eyebrow-azure { color: var(--brand-500); }
.eyebrow-azure::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C22 1.6 44 1.2 62 2.4c18 1.2 38 2 57 .6' fill='none' stroke='%233A63A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.band-ink .eyebrow { color: var(--on-dark); }
.band-ink .eyebrow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C22 1.6 44 1.2 62 2.4c18 1.2 38 2 57 .6' fill='none' stroke='%23FFFEF9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Section heads are centred, with a "+" prefix on the headline. */
.section-head {
  display: grid; grid-template-columns: minmax(0,1fr);
  justify-items: center; text-align: center;
  max-width: 62ch; margin: 0 auto clamp(2.25rem,4vw,3.5rem);
  gap: .9rem;
}
.section-head > :first-child { min-width: 0; }
.section-head h2::before { content: "+ "; color: var(--brand-500); }
.section-head .muted { font-size: var(--t-lead); }
.section-head .link { margin-top: .4rem; }

/* Left-aligned variant, where a section needs a two-column head. */
.section-head-split { grid-template-columns: minmax(0,7fr) minmax(0,4fr); justify-items: start; text-align: left; max-width: none; align-items: end; gap: clamp(1.25rem,3vw,3rem); }
.section-head-split h2::before { content: none; }
@media (max-width:860px){ .section-head-split { grid-template-columns: minmax(0,1fr); } }

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--on-cream-muted); max-width: 58ch; text-wrap: pretty; }
.muted { color: var(--on-cream-muted); }
.section-index { font-size: var(--t-sm); font-weight: 700; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.note { font-size: var(--t-sm); color: var(--on-cream-faint); }
.draw-line { height: 1px; background: var(--line); }
.js .draw-line { transform: scaleX(0); transform-origin: left; transition: transform var(--slow) var(--ease-out); }
.js .draw-line.is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   5 · Buttons — solid black pills, as in the reference
   -------------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: 1.05rem 1.85rem;
  background: var(--ink); color: var(--cream);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -.005em;
  border: 2px solid var(--ink); border-radius: var(--pill);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brand-500);
  transform: translateY(101%);
  transition: transform var(--mid) var(--ease-out);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--lift-2); border-color: var(--brand-500); }
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 15px; height: 15px; flex: none; transition: transform var(--mid) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn-lg { padding: 1.16rem 2.1rem; font-size: 1rem; }

/* Primary emphasis = brand blue fill. */
.btn-amber { background: #3A63A8; border-color: #3A63A8; color: #fff; }   /* pinned: 5.9:1 white-on-blue, band-proof */
.btn-amber::after { background: #0A0A0A; }
.btn-amber:hover { border-color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost::after { background: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--cream); }
.btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-ink::after { background: var(--ink); }
.btn-ghost-ink:hover, .btn-ghost-ink:focus-visible { color: var(--cream); }
/* Only invert inside a genuinely dark surface. */
.band-ink .btn-ghost, .band-ink .btn-ghost-ink,
.cta-band .btn-ghost, .cta-band .btn-ghost-ink { background: transparent; color: var(--cream); border-color: var(--cream); }
.band-ink .btn-ghost::after, .band-ink .btn-ghost-ink::after,
.cta-band .btn-ghost::after, .cta-band .btn-ghost-ink::after { background: var(--cream); }
.band-ink .btn-ghost:hover, .band-ink .btn-ghost-ink:hover,
.cta-band .btn-ghost:hover, .cta-band .btn-ghost-ink:hover { color: var(--ink); border-color: var(--cream); }

.btn-light { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn-light::after { background: var(--brand-500); }
.btn-light:hover { color: #fff; border-color: var(--brand-500); }

/* Doodle marks around a hero CTA — the reference's hand-drawn flourish. */
.btn-doodle { position: relative; display: inline-block; }
.btn-doodle::before {
  content: ""; position: absolute; inset: -34px -46px; pointer-events: none;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 44c8-6 15-7 22-4'/%3E%3Cpath d='M12 70c6 5 13 7 20 6'/%3E%3Cpath d='M60 22c2-7 6-12 11-14'/%3E%3Cpath d='M196 20c5 2 9 7 10 13'/%3E%3Cpath d='M238 52c-6 3-10 8-11 14'/%3E%3Cpath d='M214 96c-4 5-10 8-16 8'/%3E%3Cpath d='M74 106c6 4 13 5 20 3'/%3E%3Ccircle cx='166' cy='14' r='2.4' fill='%230A0A0A' stroke='none'/%3E%3Ccircle cx='38' cy='96' r='2.4' fill='%230A0A0A' stroke='none'/%3E%3C/svg%3E");
  opacity: .75;
}
.band-ink .btn-doodle::before { filter: invert(1); }

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), gap var(--fast) var(--ease);
}
.link:hover { color: var(--brand-500); border-color: var(--brand-500); gap: .7rem; }
.band-ink .link, .cta-band .link { color: var(--cream); border-color: var(--cream); }
.band-ink .card .link, .band-ink .campaign-card .link, .band-ink .quote-card .link,
.band-ink .rule-item .link { color: var(--ink); border-color: var(--ink); }
.band-ink .card .link:hover, .band-ink .campaign-card .link:hover { color: #3A63A8; border-color: #3A63A8; }
.band-ink .link:hover, .cta-band .link:hover { color: var(--p-blue); border-color: var(--p-blue); }
.link .icon { width: 14px; height: 14px; flex: none; }

/* --------------------------------------------------------------------------
   6 · Cards — pastel-outlined, large radius, centred
   -------------------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(1.6rem,2.4vw,2.1rem);
  background: var(--cream);
  border: 1.5px solid var(--p-blue);
  border-radius: var(--r-lg);
  transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
/* Rotate the pastel outline so a grid reads as a set, not a repetition. */
.cols-2 > .card:nth-child(4n+2), .cols-3 > .card:nth-child(4n+2), .cols-4 > .card:nth-child(4n+2) { border-color: var(--p-coral); }
.cols-2 > .card:nth-child(4n+3), .cols-3 > .card:nth-child(4n+3), .cols-4 > .card:nth-child(4n+3) { border-color: var(--p-lav); }
.cols-2 > .card:nth-child(4n+4), .cols-3 > .card:nth-child(4n+4), .cols-4 > .card:nth-child(4n+4) { border-color: var(--p-green); }
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); }
.card h3 { font-size: var(--t-4); font-weight: 700; margin-bottom: .5rem; }
.card p { font-size: var(--t-sm); color: var(--on-cream-muted); margin-bottom: 0; }
.card .link { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; border-bottom-width: 2px; }
.band-ink .card { background: rgba(255,254,249,.05); border-color: rgba(255,254,249,.22); }
.band-ink .card h3, .band-ink .card p { color: var(--on-dark); }
.band-ink .card p { color: var(--on-dark-muted); }

.card-num { font-size: var(--t-sm); font-weight: 700; color: var(--brand-500); margin-bottom: .7rem; font-variant-numeric: tabular-nums; }

/* Icon in a pastel disc. */
.card-icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-500);
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}
.card-icon .icon { width: 24px; height: 24px; }
.card:hover .card-icon { background: var(--brand-500); color: #fff; transform: rotate(-8deg) scale(1.06); }
.band-ink .card-icon { background: rgba(255,254,249,.12); color: var(--p-blue); }

/* --------------------------------------------------------------------------
   7 · Ruled index → rounded list rows (the reference's process list)
   -------------------------------------------------------------------------- */
.rule-list { display: flex; flex-direction: column; gap: .7rem; }
.rule-item {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: clamp(.9rem,2vw,1.6rem); align-items: center;
  padding: clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.8rem);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
.rule-item h3 { font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 700; line-height: 1.22; }
a.rule-item:hover { transform: translateY(-3px); box-shadow: var(--lift-2); border-color: var(--brand-500); }
a.rule-item:hover h3 { color: var(--brand-500); }
.band-ink .rule-item { background: rgba(255,254,249,.05); border-color: rgba(255,254,249,.20); }
@media (max-width:760px){ .rule-item{grid-template-columns:auto minmax(0,1fr);} .rule-item > :last-child{grid-column:1 / -1;} }

/* --------------------------------------------------------------------------
   8 · Figures — clean, rounded, full colour
   -------------------------------------------------------------------------- */
.figure { position: relative; overflow: hidden; background: var(--cream-2); border-radius: var(--r-lg); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.05s var(--ease-out); }
a:hover > .figure img, .figure:hover img { transform: scale(1.035); }
.figure-true img { filter: none; }

/* A photograph inside a pastel blob — the reference's signature image frame. */
.figure-blob { border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%; background: var(--p-cyan); }

.ratio { position: relative; overflow: hidden; }
.ratio > img, .ratio > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-1{aspect-ratio:1;} .ratio-43{aspect-ratio:4/3;} .ratio-32{aspect-ratio:3/2;}
.ratio-169{aspect-ratio:16/9;} .ratio-45{aspect-ratio:4/5;} .ratio-34{aspect-ratio:3/4;}

/* Ring-grid motif — a direct echo of the node pattern in the Kareemiya mark. */
.rings { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.rings svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   9 · Split block
   -------------------------------------------------------------------------- */
.split-block { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.75rem,5vw,4.5rem); align-items: center; }
.split-block.is-flipped > :first-child { order: 2; }
@media (max-width:900px){ .split-block{grid-template-columns:minmax(0,1fr);} .split-block.is-flipped > :first-child{order:0;} }
.split-media { position: relative; }

.media-chip {
  position: absolute; left: clamp(.8rem,2vw,1.4rem); bottom: clamp(.8rem,2vw,1.4rem); z-index: 4;
  display: flex; align-items: baseline; gap: .6rem;
  padding: .8rem 1.2rem;
  background: var(--cream); border-radius: var(--pill);
  box-shadow: var(--lift-2);
}
.media-chip .v { font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand-500); font-variant-numeric: tabular-nums; }
.media-chip .l { font-size: var(--t-xs); font-weight: 600; color: var(--on-cream-faint); }
@media (max-width:520px){ .media-chip{position:static;margin-top:.8rem;display:inline-flex;} }

/* --------------------------------------------------------------------------
   10 · Metrics
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat-value { font-size: clamp(2.4rem,5vw,4rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; color: var(--brand-500); }
.stat-label { font-size: var(--t-sm); font-weight: 600; color: var(--on-cream-faint); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.25rem,2.5vw,2.5rem); }
.band-ink .stat-value { color: var(--p-blue); }
@media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* --------------------------------------------------------------------------
   11 · Ticked list
   -------------------------------------------------------------------------- */
.tick-list { display: flex; flex-direction: column; gap: .7rem; }
.tick-list li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: .7rem; align-items: start; font-size: var(--t-sm); color: var(--on-cream-muted); }
.tick-list .icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--brand-100); color: var(--brand-500); }
.band-ink .tick-list .icon { background: rgba(255,254,249,.14); color: var(--p-blue); }
.tick-list strong { color: var(--on-cream); font-weight: 700; }

/* --------------------------------------------------------------------------
   12 · Accordion — rounded white rows with a black + disc
   -------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: .7rem; }
.ac-item { background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease); }
.ac-item.is-open { border-color: var(--brand-500); box-shadow: var(--lift-2); }
.band-ink .ac-item { background: rgba(255,254,249,.05); border-color: rgba(255,254,249,.20); }
.ac-trigger {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.25rem; align-items: center;
  padding: clamp(1.05rem,1.8vw,1.35rem) clamp(1.15rem,2vw,1.6rem);
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: var(--t-4); font-weight: 700; line-height: 1.32; letter-spacing: -.012em;
  transition: color var(--fast) var(--ease);
}
.ac-trigger:hover { color: var(--brand-500); }
.ac-sign { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); transition: background var(--fast) var(--ease), transform var(--mid) var(--ease-out); }
.ac-sign::before, .ac-sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cream); transition: transform var(--mid) var(--ease-out), opacity var(--fast) var(--ease); }
.ac-sign::before { width: 13px; height: 2px; transform: translate(-50%,-50%); }
.ac-sign::after  { width: 2px; height: 13px; transform: translate(-50%,-50%); }
.ac-item.is-open .ac-sign { background: var(--brand-500); transform: rotate(180deg); }
.ac-item.is-open .ac-sign::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.ac-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mid) var(--ease-out); }
.ac-item.is-open .ac-panel { grid-template-rows: 1fr; }
.ac-panel > div { overflow: hidden; }
.ac-panel p { padding: 0 clamp(1.15rem,2vw,1.6rem) clamp(1.15rem,2vw,1.4rem); max-width: 68ch; color: var(--on-cream-muted); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   13 · Tabs — pill chips
   -------------------------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; justify-content: center; }
.tab {
  padding: .68rem 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);
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   14 · Forms — rounded, cream-filled
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.35rem; }
.field label { font-size: var(--t-sm); font-weight: 700; color: var(--on-cream); }
.field .req { color: var(--brand-500); }
.field input, .field select, .field textarea {
  width: 100%; padding: .92rem 1.15rem;
  background: var(--cream);
  border: 1.5px solid var(--line-firm); border-radius: var(--r);
  font-size: var(--t-sm);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.field select { cursor: pointer; }
.band-ink .field input, .band-ink .field select, .band-ink .field textarea { background: rgba(255,254,249,.07); border-color: rgba(255,254,249,.28); }
.band-ink .field select option { background: var(--brand-900); color: var(--on-dark); }
.field input[type="file"] { padding: .7rem 1rem; cursor: pointer; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #D8452B; }
.field-error { font-size: var(--t-xs); font-weight: 600; color: #C13A22; }
.band-ink .field-error { color: #FEA898; }

.field-checkbox { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .75rem; align-items: start; }
.field-checkbox input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--brand-500); }
.field-checkbox label { font-size: var(--t-sm); font-weight: 400; color: var(--on-cream-muted); line-height: 1.5; }

.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-chip { position: relative; display: inline-flex; }
.radio-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.radio-chip span { padding: .62rem 1.2rem; background: var(--cream); border: 1.5px solid var(--line-firm); border-radius: var(--pill); font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: all var(--fast) var(--ease); }
.radio-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.radio-chip input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 1.05rem 1.3rem; background: var(--brand-100); border: 1.5px solid var(--brand-200); border-radius: var(--r); font-size: var(--t-sm); margin-bottom: 1.75rem; }
.alert-ok  { background: #E9F8EE; border-color: #A8DEBB; }
.alert-bad { background: #FDECE8; border-color: #F6BBAC; }

/* --------------------------------------------------------------------------
   15 · Small parts
   -------------------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; background: var(--cream-2); border-radius: var(--pill); font-size: var(--t-xs); font-weight: 700; color: var(--on-cream); }
.pill-live, .band-ink .pill-live, .campaign-card .pill-live { background: #E9F8EE; color: #256B3D; }   /* 5.6:1, pinned */
.pill-live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 2.4s var(--ease) infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.band-ink .pill:not(.pill-live) { background: rgba(255,254,249,.12); color: var(--on-dark); }

.table-scroll { overflow-x: auto; margin-block: 1.75rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 540px; }
.table-scroll th, .table-scroll td { padding: 1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll th { font-weight: 700; background: var(--cream-2); }
.band-ink .table-scroll th { background: rgba(255,254,249,.08); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; left: var(--gutter); z-index: 10000; padding: .8rem 1.3rem; background: var(--ink); color: var(--cream); border-radius: var(--pill); font-size: var(--t-sm); font-weight: 700; transition: top var(--fast) var(--ease); }
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   16 · Reveals
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--delay,0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"]{transform:none;}
.js [data-reveal="left"]{transform:translateX(-26px);}
.js [data-reveal="right"]{transform:translateX(26px);}
.js [data-reveal="scale"]{transform:scale(.96);}

/* Clip the CHILD, never the observed element — clipping the observed node
   collapses its painted area, so IntersectionObserver reports a ratio of 0
   and the reveal can never fire. */
.js [data-reveal="clip"]{ opacity:1; transform:none; }
.js [data-reveal="clip"] > .figure,
.js [data-reveal="clip"] > .ratio,
.js [data-reveal="clip"] > img { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-out); }
.js [data-reveal="clip"].is-in > .figure,
.js [data-reveal="clip"].is-in > .ratio,
.js [data-reveal="clip"].is-in > img { clip-path: inset(0 0 0 0); }

.js .line-mask { display: block; overflow: hidden; }
.js .line-mask > span { display: block; transform: translateY(108%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i,0) * 80ms); }
.js .is-in .line-mask > span, .js .line-mask.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal], .js .line-mask > span, .js .draw-line,
  .js [data-reveal="clip"] > * { opacity:1 !important; transform:none !important; clip-path:none !important; }
}