/* CIREBA · Confidence in Every Move: component styles. Values come from tokens.css (var(--…)). */
.cb, .cb * { box-sizing: border-box; }
.cb { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.cb-b { font-weight: 800; }
.cb-l { font-weight: 400; }

/* grounds */
.cb-g-orange { background: var(--orange); }
.cb-g-blue { background: var(--blue); }
.cb-g-green { background: var(--green); }
.cb-g-purple { background: var(--purple); }
.cb-g-navy { background: var(--navy); }
.cb-g-charcoal { background: var(--charcoal); }
.cb-g-white { background: var(--surface); }
.cb-t-orange { color: var(--orange); }
.cb-t-blue { color: var(--blue); }
.cb-t-green { color: var(--green); }
.cb-t-purple { color: var(--purple); }
.cb-t-navy { color: var(--navy); }
.cb-t-white { color: var(--on-colour); }
.cb-t-ink { color: var(--ink); }

/* Logo (inline brand SVG; .cb-lm = brand mark, .cb-lw = wordmark) */
.cb-logo { display: inline-block; line-height: 0; }
.cb-logo svg { height: 100%; width: auto; display: block; }
.cb-logo-colour .cb-lm, .cb-logo-reverse .cb-lm { fill: var(--orange-brand); }
.cb-logo-colour .cb-lw { fill: var(--gray); }
.cb-logo-reverse .cb-lw, .cb-logo-white .cb-lm, .cb-logo-white .cb-lw { fill: var(--white); }
.cb-logo-black .cb-lm, .cb-logo-black .cb-lw { fill: var(--logo-black); }
.cb-logo-orange .cb-lm { fill: var(--orange); }

/* Pills */
.cb-pill { display: inline-flex; align-items: center; white-space: nowrap; border-radius: var(--radius-pill); }
.cb-q { font-weight: 800; color: var(--on-colour); padding: .42em 1.05em .5em; font-size: 24px; line-height: 1.25; transform-origin: center; }
.cb-q.cb-on-white { background: var(--white); color: var(--ink); }
.cb-hl { background: var(--white); padding: .2em .55em .26em; font-size: 24px; line-height: 1.2; }
.cb-hl .cb-b { margin-right: .26em; }
.cb-stage { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--on-colour); padding: .18em 1em .22em; font-size: 15px; line-height: 1.6; }
.cb-size-canvas.cb-q { font-size: 48px; }
.cb-size-canvas.cb-hl { font-size: 96px; }
.cb-size-canvas.cb-stage { font-size: 36px; line-height: 1.66; }

/* You see / We see */
.cb-see { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 400; }
.cb-see.cb-size-canvas { font-size: 72px; line-height: 1.2; }
.cb-see span.cb-line { display: block; }
.cb-see .cb-b { margin-right: .22em; }

/* Signoff */
.cb-signoff { display: inline-flex; align-items: center; gap: .5em; font-size: 22px; line-height: 1; white-space: nowrap; }
.cb-signoff .cb-logo { height: 1.9em; }
.cb-signoff .cb-b { margin-right: .22em; }

/* Pin */
.cb-pin { display: block; overflow: visible; }
.cb-pin-stroke { fill: none; stroke: var(--white); stroke-linejoin: round; }

/* Pattern */
.cb-pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.cb-pattern .cb-pl { fill: none; stroke-width: var(--stroke-pattern); vector-effect: non-scaling-stroke; }
.cb-pattern-rings .cb-pl { stroke: var(--orange-line); }
.cb-pattern-rings-light .cb-pl { stroke: var(--orange-ring-light); }
.cb-pattern-hex .cb-pl { stroke: var(--blue-line); }
.cb-pattern-diagonal .cb-pl { stroke: var(--navy-line); }

/* Slide header */
.cb-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 13px; line-height: 1.4; font-weight: 400; }
.cb-header .cb-logo { height: 18px; }
.cb-header-r { justify-self: end; }
.cb-header-on-white { color: var(--ink-muted); }
.cb-header-on-white .cb-header-r .cb-b { color: var(--ink); }
.cb-header-on-colour { color: var(--on-colour); }

/* Scaled layouts: sizes in cqw so a panel reads the same at any width (canvas px / canvas width). */
.cb-frame { position: relative; overflow: hidden; container-type: inline-size; color: var(--on-colour); }

/* Section divider, 16:9 */
.cb-section { aspect-ratio: 16 / 9; }
.cb-section-num { position: absolute; left: 1.8cqw; top: -4cqw; font-size: 57cqw; line-height: .8; font-weight: 800; letter-spacing: -.02em; color: var(--orange); }
.cb-section.cb-g-orange .cb-section-num { color: var(--white); }
.cb-section-title { position: absolute; left: 42.5cqw; top: 11.5cqw; right: 6.25cqw; margin: 0; font-size: 7.3cqw; line-height: 1.2; font-weight: 400; }

/* Value pillar (one third of a 16:9 slide) */
.cb-pillar { aspect-ratio: 640 / 1080; }
.cb-fill { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cb-pillar .cb-fill { padding: 0 9cqw; justify-content: center; }
.cb-pillar-title { margin: 0 0 9cqw; font-size: 15cqw; line-height: 1.07; font-weight: 400; }
.cb-pillar-body { margin: 0; font-size: 4.7cqw; line-height: 1.2; font-weight: 400; max-width: 72cqw; }
.cb-pillar.cb-g-navy { color: var(--orange); }

/* Campaign panel: landscape 16:9 (slides, OOH, print, web hero) */
.cb-panel { aspect-ratio: 16 / 9; display: grid; grid-template-columns: 43.2% 1fr; }
.cb-panel-photo { position: relative; overflow: hidden; }
.cb-panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-panel-photo .cb-pin { position: absolute; left: 50%; top: 13%; height: 74%; width: auto; transform: translateX(-50%); }
.cb-panel-copy { position: relative; padding: 9.5cqw 3.6cqw 5.6cqw 4.6cqw; display: flex; flex-direction: column; }
.cb-panel-copy > :not(.cb-pattern) { position: relative; }
.cb-panel-copy > .cb-panel-logo { position: absolute; top: 3.4cqw; left: 3.7cqw; }
.cb-panel-logo .cb-logo { height: 1.5cqw; }
.cb-panel .cb-see { font-size: 3.45cqw; line-height: 1.2; }
.cb-panel .cb-signoff { margin-top: auto; font-size: 3.1cqw; }

/* Campaign panel: story 9:16 */
.cb-story { aspect-ratio: 9 / 16; }
.cb-story .cb-fill { padding: 9cqw 9cqw 12cqw; }
.cb-story-badge { width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.cb-story-badge .cb-logo { height: 8.4cqw; }
.cb-story .cb-pin { width: 74cqw; height: auto; margin: 6cqw auto 0; }
.cb-story .cb-see { margin-top: auto; font-size: 9.6cqw; line-height: 1.08; }
.cb-story-end { margin-top: 30cqw; font-size: 13cqw; line-height: 1.05; }
.cb-story-end .cb-b { display: block; }

/* Confidence bloom */
.cb-bloom { position: relative; display: inline-block; }
.cb-bloom-mark { position: absolute; }
.cb-bloom-mark .cb-logo { width: 100%; height: 100%; }
.cb-bloom-mark .cb-logo svg { width: 100%; height: 100%; }
.cb-bloom-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 800; color: var(--orange); white-space: nowrap; line-height: 1; }
.cb-bloom-stage { position: absolute; transform: translate(-50%, -50%); }