/* ============ Shared by the homepage and the works page: page links, page header, featured work ============ */

/* Page links in the middle of the header */
.bar-nav { justify-self: center; display: flex; gap: clamp(14px, 2.4vw, 32px); direction: rtl; font-size: .95rem; }
:root[lang="en"] .bar-nav { direction: ltr; }
.bar-nav a { text-decoration: none; opacity: .55; padding: 10px 2px; transition: opacity .2s ease; }
.bar-nav a:hover { opacity: .9; }
.bar-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 2px; text-decoration-color: var(--acc); }

/* Works page header */
.pg-head { padding-block: clamp(72px, 10vw, 140px) 0; }
.pg-crumb { font-size: .95rem; opacity: .6; margin-bottom: clamp(20px, 3vw, 32px); }
.pg-crumb a { text-decoration: none; }
.pg-crumb a:hover { text-decoration: underline; text-underline-offset: .3em; }
.pg-title { font-size: clamp(3.5rem, 12vw, 10rem); line-height: .95; font-weight: 700; }

/* Homepage: four doors into the works page */
.feat { padding-block: clamp(120px, 14vw, 200px) clamp(40px, 6vw, 80px); }
.feat .sec-row .btn { margin-bottom: .6em; }
.feat-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.feat-in { display: grid; gap: 16px; text-decoration: none; color: inherit; }
.feat-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tone); }
.feat-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.feat-logo { background: var(--paper); display: grid; place-items: center; }
.feat-logo img { width: 70%; height: 60%; object-fit: contain; }
.feat-in:hover .feat-pic img, .feat-in:focus-visible .feat-pic img { transform: scale(1.045); }
.feat-txt { display: grid; gap: 2px; }
.feat-n { font-size: .9rem; opacity: .55; font-variant-numeric: tabular-nums; }
.feat-txt h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; }
.feat-txt p { font-size: 1rem; opacity: .72; }

@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bar-nav { gap: 12px; font-size: .88rem; }
  .bar .lang a { padding-inline: 4px; }
  .feat-txt h3 { font-size: 1.3rem; }
  .feat-txt p { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .feat-pic img { transition: none; } }

/* Works hub: five doors, the first two large */
.feat-hub { padding-top: clamp(40px, 5vw, 64px); }
.feat-grid.hub { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
.feat-grid.hub > li { grid-column: span 2; }
.feat-grid.hub > li:nth-child(-n+2) { grid-column: span 3; }
.feat-grid.hub > li:nth-child(-n+2) .feat-pic { aspect-ratio: 4 / 3; }
.feat-list { display: grid; align-content: center; gap: 10px; padding: 12%; background: var(--tone); }
.feat-list b { font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.15; }
.feat-list b::before { content: "— "; opacity: .45; }
.go { flex: none; transition: transform .25s ease; }
:root[dir="ltr"] .go { transform: scaleX(-1); }

/* Section pages: a breadcrumb under the header, and a way on to the next section */
.pg-crumb-bar { padding-top: clamp(24px, 3vw, 36px); margin-bottom: 0; }
.pg-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: clamp(64px, 8vw, 120px); border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.pg-next a:first-child { display: inline-flex; align-items: baseline; gap: .6em; text-decoration: none; flex-wrap: wrap; }
.pg-next a:first-child span { font-size: 1rem; opacity: .6; flex-basis: 100%; }
.pg-next a:first-child b { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; }
.pg-next a:first-child:hover .go { transform: translateX(-8px); }
:root[dir="ltr"] .pg-next a:first-child:hover .go { transform: scaleX(-1) translateX(-8px); }
.pg-next .go { width: 44px; height: 22px; align-self: center; }
.pg-all { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; text-decoration-color: var(--acc); }

@media (max-width: 900px) {
  .feat-grid.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid.hub > li, .feat-grid.hub > li:nth-child(-n+2) { grid-column: auto; }
  .feat-grid.hub > li:nth-child(-n+2) .feat-pic { aspect-ratio: 4 / 5; }
  .feat-grid.hub > li:last-child { grid-column: 1 / -1; }
  .feat-grid.hub > li:last-child .feat-pic { aspect-ratio: 16 / 9; }
}
:root[dir="rtl"] .feat-n { text-align: right; }
:root[dir="ltr"] .feat-n { text-align: left; }
@media (max-width: 640px) { .feat-list { padding: 10%; gap: 6px; } .feat-list b { font-size: 1.05rem; } }

/* ============ Homepage: the three Brandify divisions, each in its own colours; the one under the pointer opens up ============ */
.units { padding-block: clamp(110px, 13vw, 190px) clamp(40px, 6vw, 80px); }
.units-eyebrow { font-size: .95rem; opacity: .6; display: flex; align-items: center; gap: 14px; }
.units-eyebrow::after { content: ""; width: 48px; height: 1px; background: currentColor; }
.units-title { font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: 1.08; margin-top: 18px; max-width: 14ch; }
.units-title span:last-child { display: block; opacity: .55; }
.unit-row { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: flex; gap: clamp(12px, 1.4vw, 20px); height: clamp(460px, 64vh, 600px); }

.unit { --u-bg: #222; --u-card: #fff; --u-ink: #111; --u-edge: rgba(0,0,0,.18); --u-text: #fff;
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; border-radius: 22px;
  background: var(--u-bg); color: var(--u-text);
  transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1); }
.u-media  { --u-bg: linear-gradient(160deg, #FF9A3D 0%, #F26A0F 55%, #B8470A 100%); --u-card: #FBFAF7; --u-ink: #FF6A00; --u-edge: rgba(255,106,0,.45); }
.u-fontix { --u-bg: linear-gradient(160deg, #1F4FC4 0%, #12307F 55%, #0A1A4A 100%); --u-card: #0F2C78; --u-ink: #3DFF41; --u-edge: rgba(61,255,65,.7); }
.u-events { --u-bg: linear-gradient(160deg, #F39AC4 0%, #D978C8 45%, #6E3BB8 100%); --u-card: #FBFAF7; --u-ink: #C447C9; --u-edge: rgba(196,71,201,.45); }
/* a dark fall at the bottom so the words stay readable on every colour */
.unit::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(8,8,14,.82)); pointer-events: none; transition: inset .6s ease; }

.unit-in { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: clamp(18px, 2vw, 28px); text-decoration: none; color: inherit; z-index: 1; }
.unit-in:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 22px; }

/* the logo card, like the division cards in your deck */
/* Work behind each division: muted in the division colour at rest, full colour when opened */
.unit-media { position: absolute; inset: 0; z-index: 0; }
.unit-media img, .unit-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.04); transition: filter .7s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
.unit-media video { opacity: 0; }
.unit-media::after { content: ""; position: absolute; inset: 0; background: var(--u-bg); mix-blend-mode: multiply; opacity: .9; transition: opacity .7s ease; }
.unit-slides img + img { opacity: 0; }
.unit-slides img.on { opacity: 1; }
.unit-empty { background: var(--u-bg); }
.unit-empty::after { display: none; }
.unit-empty svg { position: absolute; width: 120%; inset-inline-end: -38%; bottom: -22%; color: rgba(255,255,255,.14); transform: rotate(-12deg); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), color .6s ease; }
.unit-badge { align-self: start; justify-self: start; width: clamp(44px, 4vw, 58px); color: var(--u-ink); filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.u-media .unit-badge, .u-events .unit-badge { color: #fff; }
.unit-badge svg { width: 100%; height: auto; display: block; }
.unit-body { display: grid; gap: 8px; justify-items: start; }
.unit-tag { font-size: .85rem; padding: .35em .9em; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.08); }
.unit-name { font-family: "IBM Plex Sans", var(--text); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.1; }
:root[dir="rtl"] .unit-name { text-align: right; }
.unit-more { display: grid; gap: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; }
.unit-text { font-size: 1rem; line-height: 1.7; max-width: 46ch; opacity: .9; }
.unit-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit-chips li { font-size: .88rem; padding: .4em .95em; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.u-fontix .unit-chips li, .u-fontix .unit-tag { border-color: rgba(61,255,65,.55); }
.unit-go { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; }
:root[dir="ltr"] .unit-go svg { transform: scaleX(-1); }

/* open: on pointer hover, on keyboard focus */
@media (hover: hover) and (min-width: 901px) {
  .unit-row:hover .unit, .unit-row:focus-within .unit { flex-grow: .75; }
  .unit-row .unit:hover, .unit-row .unit:focus-within { flex-grow: 2.1; }
  .unit:hover .unit-more, .unit:focus-within .unit-more { max-height: 320px; opacity: 1; transition-delay: .12s; }
  .unit:hover .unit-media img, .unit:focus-within .unit-media img, .unit:hover .unit-media video, .unit:focus-within .unit-media video { filter: none; transform: scale(1); }
  .unit:hover .unit-media::after, .unit:focus-within .unit-media::after { opacity: .18; }
  .unit.playing .unit-media video { opacity: 1; }
  .unit:hover .unit-empty svg, .unit:focus-within .unit-empty svg { transform: rotate(0deg) scale(1.06); color: rgba(255,255,255,.24); }
  .unit:hover::after, .unit:focus-within::after { inset: 20% 0 0; }
}
/* touch screens and narrow screens: everything shown, one tile under another */
@media (hover: none), (max-width: 900px) {
  .unit-row { flex-direction: column; height: auto; }
  .unit { flex: none; }
  .unit-in { position: relative; inset: auto; grid-template-rows: auto auto; gap: 24px; min-height: 0; }
  .unit-in { min-height: 380px; }
  .unit-media img { filter: none; transform: none; }
  .unit-media::after { opacity: .45; }
  .unit::after { inset: 0; background: linear-gradient(to bottom, rgba(8,8,14,.1) 0%, rgba(8,8,14,.78) 38%, rgba(8,8,14,.9) 100%); }
  .unit-more { max-height: none; opacity: 1; }

}
@media (prefers-reduced-motion: reduce) { .unit, .unit-more, .unit::after, .unit-media img, .unit-media video, .unit-media::after, .unit-empty svg { transition: none; } }
.feat-grid.hub.two > li, .feat-grid.hub.two > li:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 900px) { .feat-grid.hub.two > li:last-child { grid-column: auto; } .feat-grid.hub.two > li:last-child .feat-pic { aspect-ratio: 4 / 5; } }

/* Division nav on small screens: logo already links home, footer holds contact */
@media (max-width: 600px) {
  .bar-nav { gap: 10px; font-size: .84rem; }
  .bar-nav a[data-i18n="nav.home"], .bar-nav a[data-i18n="nav.contact"] { display: none; }
}
@media (max-width: 380px) {
  .bar { gap: .4rem; }
  .bar .logo { height: 34px; }
  .bar-nav { gap: 8px; font-size: .78rem; }
  .bar .lang a { padding-inline: 3px; }
}

/* About: centered */
.firm { justify-items: center; text-align: center; }
.firm .sec-row { justify-content: center; }
.firm-lead { margin-inline: auto; }
/* Services: strategy & campaigns */
#services { display: block; text-align: center; padding-block: clamp(100px, 12vw, 170px) clamp(40px, 6vw, 80px); }
.svc-eyebrow { justify-content: center; }
.svc-eyebrow::before { content: ""; width: 48px; height: 1px; background: currentColor; }
#services .statement { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.2; max-width: 20ch; margin: 22px auto 0; }
.svc-lede { max-width: 58ch; margin: clamp(20px, 2.4vw, 32px) auto 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.8; opacity: .72; }
.pillars { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); text-align: start; counter-reset: none; }
.pillar { position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); overflow: hidden; transition: border-color .4s ease, background .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.pillar::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: var(--from, right); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
:root[dir="ltr"] .pillar { --from: left; }
.pillar:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.pillar:hover::before { transform: scaleX(1); }
.pillar-n { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: var(--acc); }
:root[dir="rtl"] .pillar-n { text-align: right; }
.pillar h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; margin-top: 22px; }
.pillar-hook { margin-top: 10px; font-weight: 600; font-size: 1.05rem; line-height: 1.6; }
.pillar-text { margin-top: 10px; font-size: .98rem; line-height: 1.8; opacity: .7; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pillar, .pillar::before { transition: none; } }

/* Media tile: a wall of reels drifting in three columns */
.unit-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px; transform: rotate(-6deg) scale(1.25); }
.reel-col { display: grid; gap: 8px; align-content: start; animation: reel-up 26s linear infinite; animation-play-state: paused; }
.reel-col:nth-child(2) { animation-name: reel-down; animation-duration: 30s; }
.reel-col:nth-child(3) { animation-duration: 22s; }
.reel-cell { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; }
.unit-reels .reel-cell img, .unit-reels .reel-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.unit-reels::after { z-index: 1; }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 4px)); } }
@keyframes reel-down { from { transform: translateY(calc(-50% - 4px)); } to { transform: translateY(0); } }
@media (hover: hover) and (min-width: 901px) {
  .unit:hover .reel-col, .unit:focus-within .reel-col { animation-play-state: running; }
}
@media (hover: none), (max-width: 900px) { .reel-col { animation-play-state: running; animation-duration: 40s; } }
@media (prefers-reduced-motion: reduce) { .reel-col { animation: none; } }

/* Page-wide light in the colour of the opened division */
.amb-tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.amb-tint i { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.amb-tint .t-media  { background: radial-gradient(60vmax 50vmax at 80% 30%, rgba(255,106,0,.46), transparent 70%), radial-gradient(50vmax 40vmax at 10% 85%, rgba(242,106,15,.3), transparent 70%); }
.amb-tint .t-fontix { background: radial-gradient(60vmax 50vmax at 50% 30%, rgba(31,79,196,.55), transparent 70%), radial-gradient(45vmax 35vmax at 85% 90%, rgba(61,255,65,.2), transparent 70%); }
.amb-tint .t-events { background: radial-gradient(60vmax 50vmax at 20% 30%, rgba(217,120,200,.48), transparent 70%), radial-gradient(50vmax 40vmax at 90% 85%, rgba(110,59,184,.4), transparent 70%); }
.amb-tint[data-on="media"] .t-media, .amb-tint[data-on="fontix"] .t-fontix, .amb-tint[data-on="events"] .t-events { opacity: 1; }
.unit-row:hover .unit:not(:hover) { filter: saturate(.6) brightness(.8); }
.unit { transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
@media (prefers-reduced-motion: reduce) { .amb-tint i { transition: none; } }