/* Halvo — concept brand used as demo content (see demo-brand.js). Its own fixed colours and type:
   the work stays the same whichever site palette is active. */
:root {
  --h-ink: #1C2340; --h-coral: #FF6A4D; --h-sun: #FFC64A; --h-sky: #9BD6F5; --h-sand: #F7E9D3;
  --h-font: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

/* ---------- Ad (one component, every format) ----------
   .ad is a size container; cq units on its children resolve against it. */
.ad {
  position: relative; width: 100%; container-type: size; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 6px;
  background: var(--h-sand); color: var(--h-ink); font-family: var(--h-font);
}
.ad__scene { position: relative; flex: 1 1 auto; min-height: 0; }
.ad__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ad__body { flex: none; display: grid; justify-items: start; align-content: start; }
.ad__logo { font-family: var(--h-font); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--h-ink); white-space: nowrap; }
.ad__logo i { display: inline-block; width: .26em; height: .26em; margin-left: .06em; border-radius: 50%; background: var(--h-coral); vertical-align: .12em; }
.ad__h { font-weight: 800; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.ad__p { font-weight: 500; line-height: 1.2; opacity: .82; }
.ad__cta { font-weight: 700; line-height: 1; border-radius: 999px; background: var(--h-ink); color: var(--h-sand); white-space: nowrap; }
.ad__scene svg, .ad__body > * { transition: opacity .3s ease; }
.ad.is-out .ad__scene svg, .ad.is-out .ad__body > * { opacity: 0; }

/* tall: 4:5, 9:16 */
.ad--tall .ad__body { padding: 5.5cqw 7cqw 8cqw; gap: 2.6cqw; }
.ad--tall .ad__logo { position: absolute; top: 6cqw; left: 7cqw; font-size: 7cqw; }
.ad--tall .ad__h { font-size: 10cqw; max-width: 15ch; }
.ad--tall .ad__p { font-size: 4.8cqw; }
.ad--tall .ad__cta { margin-top: 2.4cqw; font-size: 4.4cqw; padding: 2.8cqw 5.4cqw; }
/* square: 1:1 */
.ad--square .ad__body { padding: 4cqw 6cqw 6cqw; gap: 1.8cqw; }
.ad--square .ad__logo { position: absolute; top: 5cqw; left: 6cqw; font-size: 6cqw; }
.ad--square .ad__h { font-size: 7.6cqw; }
.ad--square .ad__p { font-size: 3.8cqw; }
.ad--square .ad__cta { margin-top: 1.4cqw; font-size: 3.6cqw; padding: 2.2cqw 4.4cqw; }
/* wide: 16:9 */
.ad--wide { flex-direction: row-reverse; }
.ad--wide .ad__body { width: 46%; padding: 5cqw 4cqw 5cqw 5cqw; gap: 1.6cqw; align-content: center; }
.ad--wide .ad__logo { font-size: 3.6cqw; margin-bottom: 1.6cqw; }
.ad--wide .ad__h { font-size: 5.2cqw; }
.ad--wide .ad__p { font-size: 2.5cqw; }
.ad--wide .ad__cta { margin-top: 1.2cqw; font-size: 2.3cqw; padding: 1.5cqw 3cqw; }
/* strip: 728×90 */
.ad--strip { flex-direction: row-reverse; }
.ad--strip .ad__scene { flex: 0 0 20%; }
.ad--strip .ad__body { flex: 1; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2.6cqw; min-width: 0; }
.ad--strip .ad__logo { font-size: min(3.2cqw, 40cqh); }
.ad--strip .ad__h { font-size: min(2.7cqw, 34cqh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ad--strip .ad__p { display: none; }
.ad--strip .ad__cta { margin-left: auto; }
.ad--strip .ad__cta { font-size: min(1.6cqw, 20cqh); padding: min(1.1cqw, 14cqh) min(2cqw, 26cqh); }

/* ---------- Selected work covers ---------- */
/* campaign mosaic: widths in % of the mosaic, heights follow the formats */
.mos { width: 90%; display: grid; gap: 14px; }
.mos__row { display: flex; align-items: flex-end; justify-content: center; gap: 3%; }
.mos__cell { display: grid; gap: 7px; }
.mos__cell .ad { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.mos__cell--strip { width: 89%; justify-self: center; }
.mos__lbl { font: 500 10.5px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }

/* identity sheet */
.idc {
  width: 86%; max-width: 100%; aspect-ratio: 4 / 3; container-type: inline-size; box-sizing: border-box;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 4cqw; padding: 6cqw; overflow: hidden;
  background: var(--h-sand); color: var(--h-ink); border-radius: 10px; font-family: var(--h-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.idc__top { display: grid; align-content: center; gap: 1.6cqw; }
.idc__mark { font-weight: 800; font-size: 13cqw; letter-spacing: -.055em; line-height: .9; }
.idc__mark i { display: inline-block; width: .24em; height: .24em; margin-left: .05em; border-radius: 50%; background: var(--h-coral); vertical-align: .1em; }
.idc__tag { font-size: 4cqw; font-weight: 500; opacity: .8; }
.idc__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2cqw; }
.idc__chip { display: grid; gap: 1cqw; min-width: 0; }
.idc__chip i { display: block; aspect-ratio: 1.4; border-radius: 1.4cqw; box-shadow: inset 0 0 0 1px rgba(28, 35, 64, .14); }
.idc__chip b { font-size: 2.8cqw; font-weight: 700; }
.idc__chip em { font: 2.3cqw/1 var(--mono); font-style: normal; opacity: .7; }
.idc__foot { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 2cqw; align-items: center; }
.idc__aa { font-size: 11cqw; font-weight: 800; letter-spacing: -.04em; line-height: 1; padding-right: 2cqw; }
.idc__scene { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 1.4cqw; overflow: hidden; }
.idc__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* infographic */
.igc {
  width: 90%; max-width: 100%; aspect-ratio: 4 / 3; container-type: inline-size; box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 3.4cqw; padding: 6cqw 6.5cqw;
  background: #FFFFFF; color: var(--h-ink); border-radius: 10px; font-family: var(--h-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.igc__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; }
.igc__hd .ad__logo { font-size: 5.6cqw; }
.igc__tag { font: 2.8cqw/1 var(--mono); opacity: .6; }
.igc__t { font-size: 7.4cqw; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 16ch; }
.igc__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 5cqw; align-items: center; }
.igc__bars { display: grid; gap: 2.1cqw; }
.igc__row { display: grid; grid-template-columns: 15cqw 1fr 8cqw; align-items: center; gap: 2cqw; font-size: 3.5cqw; font-weight: 500; }
.igc__row i { display: block; height: 4.4cqw; width: var(--v); border-radius: 0 1cqw 1cqw 0; background: var(--c); }
.igc__row em { font: 3.2cqw/1 var(--mono); font-style: normal; text-align: right; }
.igc__kpi { display: grid; gap: 1.4cqw; padding: 4cqw; border-radius: 2cqw; background: var(--h-coral); color: var(--h-ink); }
.igc__kpi b { font-size: 14cqw; line-height: .9; letter-spacing: -.05em; font-weight: 800; }
.igc__kpi span { font-size: 3.4cqw; font-weight: 600; line-height: 1.2; }

/* website */
.web {
  width: 90%; max-width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; box-sizing: border-box;
  display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden;
  background: var(--h-sand); color: var(--h-ink); border-radius: 10px; font-family: var(--h-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.web__bar { display: flex; align-items: center; gap: .8cqw; padding: 1.2cqw 1.8cqw; background: #FFFFFF; border-bottom: 1px solid rgba(28, 35, 64, .1); }
.web__bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: rgba(28, 35, 64, .18); }
.web__bar span { margin-left: 2cqw; padding: .4cqw 2cqw; border-radius: 99px; background: rgba(28, 35, 64, .06); font: 1.3cqw/1.2 var(--mono); opacity: .7; }
.web__nav { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4cqw 1cqw; }
.web__nav .ad__logo { font-size: 3cqw; }
.web__links { display: flex; gap: 2.6cqw; margin-left: auto; font-size: 1.6cqw; font-weight: 500; }
.web__btn { font-size: 1.5cqw; font-weight: 700; padding: 1cqw 2.2cqw; border-radius: 99px; background: var(--h-ink); color: var(--h-sand); }
.web__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 2cqw 4cqw; min-height: 0; }
.web__copy { display: grid; align-content: center; gap: 1.6cqw; }
.web__copy b { font-size: 5.6cqw; line-height: .96; letter-spacing: -.04em; font-weight: 800; }
.web__copy > span { font-size: 1.7cqw; opacity: .8; }
.web__search { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1cqw; padding: .8cqw .8cqw .8cqw 2cqw; border-radius: 99px; background: #FFFFFF; font-size: 1.5cqw; }
.web__search em { font-style: normal; opacity: .6; padding-right: 1.2cqw; border-right: 1px solid rgba(28, 35, 64, .15); }
.web__search i { font-style: normal; margin-left: auto; font-weight: 700; padding: .9cqw 2cqw; border-radius: 99px; background: var(--h-coral); }
.web__art { position: relative; border-radius: 1.6cqw; overflow: hidden; min-height: 0; }
.web__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.web__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 2cqw 4cqw 3cqw; }
.web__card { display: grid; grid-template-columns: 7cqw 1fr; grid-template-rows: auto auto; column-gap: 1.4cqw; align-items: center; padding: 1cqw; border-radius: 1.4cqw; background: #FFFFFF; }
.web__thumb { position: relative; grid-row: span 2; aspect-ratio: 1; border-radius: 1cqw; overflow: hidden; }
.web__thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.web__card b { font-size: 1.8cqw; font-weight: 700; align-self: end; }
.web__card span:last-child { font-size: 1.4cqw; opacity: .7; align-self: start; }

@media (prefers-reduced-motion: reduce) { .ad__scene svg, .ad__body > * { transition: none; } }