/* ============================================================
   SANGAM CO-BUILDING
   Scoped to body.cb-page, loads after style.css + motion.css.

   Six sections. The work is the argument, so the page reaches
   Rangtaar fast and lets the builds do the explaining.

   Surfaces follow the brand's own grammar: rounded colour-block
   panels (16-22px) in navy, cream, sky and peach, not the
   hairline-editorial system of the first pass.
   ============================================================ */

body.cb-page {
  --cb-ink: #243C90;         /* Sangam Navy */
  --cb-ink-deep: #1B2E6E;
  --cb-paper: #FCFCE4;
  --cb-paper-2: #F5F5DC;
  --cb-sky: #D8F0FC;
  --cb-orange: #FC7848;      /* fills, strokes, dark grounds */
  --cb-orange-ink: #CF3A03;  /* the same accent as TEXT on light grounds (4.74:1) */
  --cb-orange-deep: #A82D02; /* on tinted panels (5.85:1) */
  --cb-yellow: #F2C230;
  --cb-rule: rgba(36, 60, 144, 0.18);
  --cb-rule-light: rgba(252, 252, 228, 0.24);

  --cb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cb-gut: clamp(20px, 5vw, 84px);
  --cb-max: 1440px;

  background: var(--cb-paper);
}

/* ---- shells --------------------------------------------------------- */
.cb-wrap { max-width: var(--cb-max); margin: 0 auto; padding-inline: var(--cb-gut); }
.cb-sec { position: relative; padding-block: clamp(64px, 9vw, 150px); border-top: 1px solid var(--cb-rule); }
.cb-sec.cb-dark { background: var(--cb-ink); color: var(--cb-paper); border-top-color: transparent; }
.cb-dark .cb-num, .cb-dark .cb-label { color: rgba(252, 252, 228, 0.66); }
.cb-dark .cb-eyebrow span { color: var(--cb-paper); }

.cb-label {
  font-family: var(--cb-mono); font-size: clamp(11.5px, 0.78vw, 12px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(36, 60, 144, 0.78); display: block;
}
.cb-num {
  font-family: var(--cb-mono); font-size: clamp(11.5px, 0.85vw, 13px);
  letter-spacing: 0.2em; color: rgba(36, 60, 144, 0.78);
}
.cb-head {
  display: flex; align-items: baseline; gap: clamp(14px, 3vw, 40px);
  padding-bottom: 14px; margin-bottom: clamp(26px, 4vw, 54px);
  border-bottom: 1px solid var(--cb-rule);
}
.cb-dark .cb-head { border-bottom-color: var(--cb-rule-light); }

/* ---- type ----------------------------------------------------------- */
.cb-display {
  font-family: var(--font-display); font-weight: 900;
  line-height: 0.96; letter-spacing: -0.03em;
  font-size: clamp(38px, 7vw, 104px); margin: 0; text-wrap: balance;
}
.cb-h2 {
  font-family: var(--font-display); font-weight: 900;
  line-height: 1.02; letter-spacing: -0.025em;
  font-size: clamp(30px, 4.4vw, 62px); margin: 0; text-wrap: balance;
}
.cb-display .cb-quiet, .cb-h2 .cb-quiet { color: rgba(36, 60, 144, 0.62); }
.cb-dark .cb-display .cb-quiet, .cb-dark .cb-h2 .cb-quiet { color: rgba(252, 252, 228, 0.52); }
.cb-lede { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: rgba(36, 60, 144, 0.82); }
.cb-dark .cb-lede { color: rgba(252, 252, 228, 0.82); }
.cb-body { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; margin-top: 14px; }
.cb-dark .cb-body { color: rgba(252, 252, 228, 0.84); }
.cb-fineline { font-size: 15px; color: rgba(36, 60, 144, 0.74); }
.cb-dark .cb-fineline { color: rgba(252, 252, 228, 0.74); }
.cb-hero-caps strong { font-weight: 800; font-size: clamp(15px, 1.2vw, 18px); }

/* ---- confluence: two paths meeting ---------------------------------- */
.cb-conf { display: block; width: 100%; height: auto; overflow: visible; }
.cb-conf path {
  fill: none; stroke-width: 1.4;
  /* No vector-effect here: it makes the dash pattern use screen units while
     getTotalLength() reports viewBox units, so a scaled SVG only ever draws
     part of its stroke and the two curves never reach the join. */
  stroke-linecap: round;
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1400ms var(--m-soft, ease-out);
}
.cb-conf { max-width: 420px; }
.is-in .cb-conf path { stroke-dashoffset: 0; }
.cb-conf .cf-a { stroke: var(--cb-orange); }
.cb-conf .cf-b { stroke: var(--blue-chip, #6084C0); }
.cb-conf .cf-join { stroke: var(--cb-ink); transition-delay: 700ms; }
.cb-dark .cb-conf .cf-join { stroke: var(--cb-paper); }
.cb-conf circle { fill: var(--cb-orange); opacity: 0; transition: opacity 400ms ease 1500ms; }
.is-in .cb-conf circle { opacity: 1; }

/* ---- handwritten asides ---------------------------------------------
   The guidelines reserve true hand-lettering for the expressive/social
   layer, so this uses Baloo 2, the brand's own named digital stand-in,
   and only for short asides. Two on the whole page, by design.        */
.cb-annot {
  font-family: "Baloo 2", var(--font-display), cursive; font-weight: 600;
  font-size: clamp(15px, 1.5vw, 21px); line-height: 1.25;
  color: var(--cb-orange-ink); transform: rotate(-1.6deg);
  display: inline-block; margin: 0;
}
.cb-dark .cb-annot { color: var(--cb-yellow); }
.cb-annot-hero { margin-top: 18px; }
.cb-annot-over {
  position: absolute; left: clamp(16px, 4vw, 54px); bottom: clamp(16px, 3vw, 38px);
  background: var(--cb-paper); color: var(--cb-ink);
  padding: 12px 18px; border-radius: 6px; max-width: 78%;
  box-shadow: 0 6px 22px rgba(22, 34, 74, 0.26); transform: rotate(-1.2deg);
  font-size: clamp(14px, 1.6vw, 22px);
}

/* ---- hero ------------------------------------------------------------ */
.cb-hero {
  min-height: 84vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(86px, 12vh, 140px) clamp(40px, 6vh, 70px);
  position: relative; overflow: hidden;
}
.cb-eyebrow {
  font-family: var(--cb-mono); font-size: clamp(11.5px, 0.8vw, 12.5px);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(36, 60, 144, 0.78);
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: clamp(24px, 4vw, 44px);
}
.cb-eyebrow span { color: var(--cb-ink); }
.cb-hero-sub {
  margin-top: clamp(26px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(20px, 4vw, 64px); align-items: end;
}
.cb-hero-sub p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(36,60,144,0.84); }
.cb-hero-sub p + p { margin-top: 13px; }
@media (max-width: 900px) { .cb-hero-sub { grid-template-columns: 1fr; align-items: start; } }

/* ---- buttons: pills, matching the rest of the site ------------------- */
.cb-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 4vw, 42px); }
.cb-btn {
  font-family: var(--cb-mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 17px 30px; border-radius: 999px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; box-sizing: border-box;
  border: 1.5px solid var(--cb-ink); background: var(--cb-ink); color: var(--cb-paper);
  transition: background 200ms, color 200ms, transform 200ms;
}
.cb-btn:hover { background: var(--cb-orange); border-color: var(--cb-orange); color: var(--cb-ink); }
.cb-btn .ar { transition: transform 220ms var(--m-settle, ease-out); display: inline-block; }
.cb-btn:hover .ar { transform: translateX(6px); }
.cb-dark .cb-btn { background: var(--cb-paper); color: var(--cb-ink); border-color: var(--cb-paper); }
.cb-dark .cb-btn:hover { background: var(--cb-orange); border-color: var(--cb-orange); }
.cb-btn:focus-visible { outline: 3px solid var(--cb-orange); outline-offset: 3px; }

/* ---- 02: the "sometimes" lines + capability row ----------------------- */
.cb-sometimes { margin-top: clamp(22px, 3vw, 34px); max-width: 64ch; }
.cb-sometimes p {
  font-size: clamp(16px, 1.5vw, 23px); line-height: 1.42;
  padding: 13px 0; border-bottom: 1px solid var(--cb-rule); margin: 0;
  color: rgba(36, 60, 144, 0.9);
}
.cb-sometimes strong { font-weight: 800; color: var(--cb-ink); }

.cb-caps { display: flex; flex-wrap: wrap; gap: 10px; }
.cb-cap {
  font-family: var(--cb-mono); font-size: clamp(12px, 1vw, 13.5px);
  letter-spacing: 0.06em; padding: 13px 20px; min-height: 44px;
  border-radius: 999px; border: 1.5px solid var(--cb-rule);
  background: var(--cb-sky); color: var(--cb-ink); cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.cb-cap:hover, .cb-cap.is-on { background: var(--cb-ink); color: var(--cb-paper); border-color: var(--cb-ink); }
.cb-cap:focus-visible { outline: 3px solid var(--cb-orange); outline-offset: 2px; }
.cb-cap-say {
  margin-top: 22px; min-height: 3.4em; max-width: 56ch;
  font-size: clamp(15px, 1.25vw, 19px); line-height: 1.5;
  color: rgba(36, 60, 144, 0.88);
}
.cb-cap-say b { color: var(--cb-orange-ink); font-weight: 800; display: block; margin-bottom: 4px; }

/* ---- 03: builds ------------------------------------------------------ */
.cb-build { padding-block: clamp(40px, 6vw, 92px); }
.cb-build-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 5.4vw, 82px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 8px 0 12px;
}
.cb-build-line { font-size: clamp(17px, 1.7vw, 26px); line-height: 1.3; max-width: 32ch; font-weight: 500; }
.cb-tags {
  font-family: var(--cb-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(36, 60, 144, 0.78); margin-top: 22px;
}
.cb-build-structured .cb-tags { color: rgba(252, 252, 228, 0.74); }

/* Rangtaar: the photograph carries it */
.cb-build-media { position: relative; margin: clamp(24px, 3.5vw, 44px) 0; }
.cb-build-media img { width: 100%; height: auto; display: block; }

/* the business / the build */
.cb-pa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.cb-pa > div {
  background: var(--cb-paper-2); border: 2px solid var(--cb-rule);
  border-radius: 18px; padding: clamp(18px, 2.2vw, 30px);
}
.cb-pa .cb-pa-build { background: var(--cb-sky); }
.cb-pa h4 {
  font-family: var(--cb-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cb-orange-deep); margin: 0 0 10px;
}
.cb-pa p { margin: 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.48; font-weight: 600; }
@media (max-width: 680px) { .cb-pa { grid-template-columns: 1fr; } }

/* Hear & How: the model is the visual */
.cb-build-structured { background: var(--cb-ink); color: var(--cb-paper); }
.cb-build-structured .cb-label { color: rgba(252, 252, 228, 0.72); }
.cb-build-structured .cb-build-line { color: rgba(252, 252, 228, 0.92); }
.cb-build-structured .cb-body { color: rgba(252, 252, 228, 0.84); }

.cb-flow {
  list-style: none; padding: 0; margin: clamp(26px, 4vw, 46px) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.cb-flow li {
  position: relative; border: 2px solid rgba(252, 252, 228, 0.3); border-radius: 18px;
  padding: clamp(16px, 2vw, 26px); background: rgba(252, 252, 228, 0.06);
}
.cb-flow li:not(:last-child)::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--cb-orange); font-weight: 800; z-index: 2;
}
.cb-flow li:last-child { background: rgba(242, 194, 48, 0.15); border-color: rgba(242, 194, 48, 0.52); }
.cb-flow-n {
  font-family: var(--cb-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cb-yellow); display: block;
}
.cb-flow-t {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(15px, 1.5vw, 22px); line-height: 1.1;
  display: block; margin-top: 10px; letter-spacing: -0.01em;
}
@media (max-width: 760px) {
  .cb-flow { grid-template-columns: 1fr; }
  .cb-flow li:not(:last-child)::after { right: 50%; top: auto; bottom: -15px; transform: translateX(50%) rotate(90deg); }
}

/* Kissa: archive, an editorial collage */
.cb-build-archive { background: var(--cb-paper-2); border-block: 1px solid var(--cb-rule); }
.cb-build-archive .cb-build-name { font-size: clamp(28px, 4vw, 58px); }
.cb-collage {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px;
  margin: clamp(24px, 3.5vw, 40px) 0;
}
.cb-collage figure { margin: 0; border-radius: 18px; overflow: hidden; border: 2px solid var(--cb-rule); }
.cb-collage img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.88); aspect-ratio: 4/5; }
.cb-collage figure:first-child img { aspect-ratio: 4/4.2; }
@media (max-width: 700px) { .cb-collage { grid-template-columns: 1fr 1fr; } .cb-collage figure:first-child { grid-column: 1 / -1; } }
.cb-archive-link {
  font-family: var(--cb-mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cb-ink); text-decoration: none;
  border-bottom: 1.5px solid var(--cb-orange);
  display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 4px;
}
.cb-archive-link:hover { color: var(--cb-orange-ink); }

/* ---- 04: sectors + three criteria ------------------------------------ */
.cb-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cb-sectors span {
  font-family: var(--cb-mono); font-size: 12.5px; letter-spacing: 0.06em;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--cb-rule); background: var(--cb-sky);
}
.cb-crit3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cb-crit3 > div {
  background: var(--cb-paper); border: 2px solid var(--cb-rule);
  border-radius: 18px; padding: clamp(20px, 2.4vw, 32px);
}
.cb-crit3 h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(19px, 2vw, 28px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 10px;
}
.cb-crit3 p { margin: 0; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.5; color: rgba(36,60,144,0.84); }
@media (max-width: 860px) { .cb-crit3 { grid-template-columns: 1fr; } }

/* ---- 05: talk / diagnose / build -------------------------------------- */
.cb-steps { list-style: none; padding: 0; margin: clamp(26px,4vw,44px) 0 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.cb-steps li {
  background: var(--cb-sky); border: 2px solid var(--cb-rule);
  border-radius: 18px; padding: clamp(20px, 2.4vw, 32px);
}
.cb-steps li:nth-child(2) { background: #FCE9DE; }
.cb-steps li:nth-child(3) { background: var(--cb-ink); color: var(--cb-paper); border-color: var(--cb-ink); }
.cb-step-n { font-family: var(--cb-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--cb-orange-deep); }
.cb-steps li:nth-child(3) .cb-step-n { color: var(--cb-yellow); }
.cb-steps h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.02em; margin: 10px 0 10px;
}
.cb-steps p { margin: 0; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.5; }
.cb-steps li:nth-child(3) p { color: rgba(252,252,228,0.86); }
@media (max-width: 820px) { .cb-steps { grid-template-columns: 1fr; } }

/* ---- 06: where it sits ------------------------------------------------ */
.cb-ladder { list-style: none; padding: 0; margin: clamp(26px,4vw,46px) 0 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.cb-ladder li {
  position: relative; border: 2px solid rgba(252,252,228,0.3); border-radius: 18px;
  background: rgba(252,252,228,0.06);
}
.cb-ladder li a { text-decoration: none; color: inherit; display: block; padding: clamp(16px,2vw,26px); min-height: 44px; transition: background 220ms; border-radius: 16px; }
.cb-ladder li a:hover { background: rgba(252,252,228,0.1); }
.cb-ladder li.is-here { background: rgba(242,194,48,0.15); border-color: rgba(242,194,48,0.55); padding: clamp(16px,2vw,26px); }
.cb-ladder li:not(:last-child)::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--cb-orange); font-weight: 800; z-index: 2;
}
@media (max-width: 860px) {
  .cb-ladder { grid-template-columns: 1fr; }
  .cb-ladder li:not(:last-child)::after { right: 50%; top: auto; bottom: -15px; transform: translateX(50%) rotate(90deg); }
}

/* ---- final ------------------------------------------------------------ */
.cb-final { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }

/* ---- touch + reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cb-conf path { stroke-dashoffset: 0 !important; transition: none !important; }
  .cb-conf circle { opacity: 1 !important; transition: none !important; }
  .cb-annot, .cb-annot-over { transform: none !important; }
}

/* ---- Rangtaar: an image cluster, not one rectangle ------------------
   One dominant frame carries the gesture (hands, thread, stitch) and two
   supporting frames give it context. The question sits on the cluster. */
.cb-cluster {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.cb-cluster figure { margin: 0; border-radius: 18px; overflow: hidden; border: 2px solid var(--cb-rule); }
.cb-cluster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-cluster .cb-cl-lead { grid-row: 1 / 3; }
.cb-cluster .cb-cl-lead img { aspect-ratio: 4/5; }
.cb-cluster figure:not(.cb-cl-lead) img { aspect-ratio: 16/11; }
.cb-cluster .cb-annot-over { left: clamp(14px, 2.5vw, 30px); bottom: clamp(14px, 2.5vw, 30px); max-width: 52%; z-index: 3; }

@media (max-width: 760px) {
  .cb-cluster { grid-template-columns: 1fr 1fr; }
  .cb-cluster .cb-cl-lead { grid-row: auto; grid-column: 1 / -1; }
  .cb-cluster .cb-cl-lead img { aspect-ratio: 16/12; }
  .cb-cluster .cb-annot-over { max-width: 84%; }
}

/* ---- Hear & How in their own brand ---------------------------------
   Their logo green #19916E only reaches 3.31:1 with cream, which is fine
   for a logo lockup and not for body copy. The section ground is the same
   hue darkened to #0F5A44 (cream 7.87:1, their yellow 4.89:1), with the
   true brand green kept for borders and accents so it still reads as H&H. */
.cb-build-structured {
  --hh-green: #19916E;
  --hh-ground: #0F5A44;
  --hh-yellow: #E6C14C;
  background: var(--hh-ground);
}
.cb-build-structured .cb-flow li {
  border-color: rgba(25, 145, 110, 0.75);
  background: rgba(25, 145, 110, 0.26);
}
.cb-build-structured .cb-flow li:last-child {
  background: rgba(230, 193, 76, 0.18);
  border-color: rgba(230, 193, 76, 0.65);
}
.cb-build-structured .cb-flow-n { color: var(--hh-yellow); }
.cb-build-structured .cb-flow li:not(:last-child)::after { color: var(--hh-yellow); }