/*
  Marzex Technologies, edition 4.3: the multi-page site.
  Home (index.html), About us, Work, Case studies and Contact us share this file. It sits on marzex.css (tokens,
  header, menu, accordion, fields) and marzex-scale.css (buttons, pill tabs, cards, panels, container, type ramp),
  and holds the section patterns the pages share. Behaviour lives in marzex-site.js.

  Copy comes from marzex.tech. Sections the live site has no words for (partners, vision, mission, value, FAQ,
  archived) carry draft copy built from its words, each marked "Client to confirm" in the HTML.
  revamp.html, the one-page 4.2 experiment, keeps its own inline styles and is not linked from here.
*/

main .grid:not(.wrap-in), .ftr .grid { max-width: calc(var(--container) + 2 * var(--margin)); margin-inline: auto; }
.slice { padding-block: 6rem; }
.panel.slice { padding-block: 5rem; }
.slice:not(.panel) + .slice:not(.panel) { padding-top: 0; } /* two ink sections in a row share one gap */

/* Section head: title left, a note and an onward link right */
.head { align-items: end; margin-bottom: 3rem; }
.head > h2, .head > h3 { grid-column: 1 / 7; }
.head__aside { grid-column: 7 / 13; display: grid; justify-items: start; gap: .75rem; }
.head__aside > p { max-width: 40ch; }
.label-col { grid-column: 1 / 4; padding-top: .75rem; }

/* ---------- Page hero: one pattern for every page. Title across, then meta, lede and actions on one row ---------- */
.hero { padding-top: calc(var(--header-h) + 7rem); }
.hero__head { row-gap: 2.5rem; padding-bottom: 3rem; }
.hero__title { grid-column: 1 / -1; }
.hero__title .line { display: block; padding: 0; } /* .line is also the product-line card; keep its padding off the title */
.hero__meta { grid-column: 1 / 4; display: grid; align-content: start; gap: 1rem; }
.hero__lede { grid-column: 4 / 8; max-width: 48ch; line-height: 1.35; }
.hero__actions { grid-column: 8 / 12; justify-self: end; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hero__lede + .hero__actions { grid-column: 8 / 12; }
/* scale's square step control: 1px line, a fill rises from the bottom over 300ms */
.hero__cue {
  grid-column: 12; justify-self: end; align-self: end; position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); border-radius: var(--r-md); color: inherit;
}
.hero__cue::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fg) 14%, transparent); transform-origin: 50% 100%; scale: 1 0; transition: scale .3s var(--s-ease); }
.hero__cue:hover::before { scale: 1 1; }
.hero__cue:focus-visible { outline-offset: 2px; }
.hero__cue .icon { width: .875rem; height: .875rem; }
.hero--page { padding-bottom: 2rem; }

/* Home hero, centred: two-line title and lede on the centre line, then the media frame on the container edge
   with its lower half past the fold */
.hero--center { padding-top: calc(var(--header-h) + 5rem); }
.hero--center .hero__head { justify-items: center; row-gap: 0; padding-bottom: 4.5rem; text-align: center; }
.hero--center .hero__head > * { grid-column: 1 / -1; }
.hero--center .hero__lede { max-width: 42rem; margin-top: 1.75rem; line-height: 1.4; text-wrap: balance; }
:root[data-type="scale"] .hero--center .hero__title { font-size: clamp(2.571rem, 5.5vw, 5.5rem); line-height: 1; letter-spacing: -.03em; }
.hero--center .hero__media { margin-inline: auto; }
.hero--center .hero__head > .hero__actions { grid-column: 1 / -1; justify-self: center; justify-content: center; margin-top: 2rem; }

/* Hero media: a 24px-cornered frame, inset from the screen edge */
.hero__media { margin: 0; }
.hero__media > .frame { border-radius: var(--r-3xl); }
.lock-stage { aspect-ratio: 16 / 9; }
/* The photo and the overlay share one box, so they crop and scale together at every frame shape. */
.lock-view { position: absolute; inset: 0; }
.lock-view .media, .lock { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; }
.lock__scrim { fill: rgba(1, 1, 1, .45); fill-rule: evenodd; }
.lock__box { fill: none; stroke: url(#signal-stroke); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.lock__handles { fill: none; stroke: url(#signal-stroke); stroke-width: 8; stroke-linecap: square; vector-effect: non-scaling-stroke; }

/* Hero load: one orchestrated moment. Lines rise, then (home) the lock-on settles on the signal. */
@keyframes rise { from { opacity: 0; transform: translateY(.35em); } }
@keyframes fade { from { opacity: 0; } }
@keyframes acquire { from { opacity: 0; transform: scale(1.4); } }
.hero__title .line { animation: rise 1s var(--ease-expo) .2s backwards; }
.hero__title .line + .line { animation-delay: .3s; }
.hero__meta { animation: rise 1s var(--ease-expo) .45s backwards; }
.hero__lede { animation: rise 1s var(--ease-expo) .55s backwards; }
.hero__actions, .hero__cue { animation: rise 1s var(--ease-expo) .65s backwards; }
.lock__scrim { animation: fade .5s var(--ease-cubic) 1.1s backwards; }
.lock__box { animation: acquire .6s var(--ease-expo) 1.35s backwards; }
.lock__handles { animation: fade .2s linear 1.75s backwards; }

/* ---------- Chips row: names as 6px chips, one line under a hero ---------- */
/* Rules sit inside the grid's side margins, not across them */
.strip, .touch__base { background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--margin)) 1px no-repeat; }
.strip { margin-top: 3rem; padding-top: 1.5rem; align-items: center; row-gap: 1rem; }
.strip__label { grid-column: 1 / 4; }
.strip__list { grid-column: 4 / 13; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.strip__list a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: .375rem .75rem;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); border-radius: var(--r-md); text-decoration: none;
  transition: background-color .15s var(--s-ease), border-color .15s var(--s-ease);
}
.strip__list a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }

/* ---------- Shared: film frames ---------- */
.film { margin: 0; }
.film .frame { aspect-ratio: 21 / 9; border-radius: var(--r-3xl); }
.clip-ready [data-clip] .frame { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-3xl)); }
.clip-ready [data-clip] .media { scale: calc(1.1 - .1 * var(--clip-p, 1)); }

/* ---------- Partners: a logo marquee, 40s linear like scale.com's, with a pause control ----------
   Two copies of the list run side by side and the track slides -50%, so the loop has no seam. Hover, focus and the
   pause button stop it. Under reduced motion it is one list that scrolls sideways by hand. */
.partners { padding-block: 4rem 0; }
.partners__head { align-items: center; margin-bottom: 1.5rem; }
.partners__head > h2 { grid-column: 1 / 4; }
.partners__head > p { grid-column: 4 / 11; max-width: 52ch; }
.partners__pause {
  grid-column: 12; justify-self: end; position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); border-radius: var(--r-md); background: none; color: inherit;
}
.partners__pause::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fg) 14%, transparent); transform-origin: 50% 100%; scale: 1 0; transition: scale .3s var(--s-ease); }
.partners__pause:hover::before { scale: 1 1; }
.partners__pause svg { width: .75rem; height: .75rem; fill: currentColor; }
.partners__pause .i-play { display: none; }
.partners__pause[aria-pressed="true"] .i-play { display: block; }
.partners__pause[aria-pressed="true"] .i-pause { display: none; }
.marquee {
  overflow: hidden; padding-inline: var(--inset);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: logo-marquee 40s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__list { list-style: none; display: flex; gap: var(--stack); padding-right: var(--stack); }
@keyframes logo-marquee { to { translate: -50% 0; } }
.partner {
  flex: none; display: grid; align-content: space-between; gap: 1.5rem; width: 17rem; min-height: 7.5rem; padding: 1.25rem;
}
/* Logo: a one-colour file on a 120 x 32 box, painted through currentColor like .icon so it follows the theme */
.partner__logo {
  display: block; width: 7.5rem; height: 2rem; background: color-mix(in srgb, var(--fg) 70%, transparent);
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
}
.partner__sector { display: block; margin-bottom: .5rem; }
.partner__name { display: block; margin-bottom: .25rem; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask: none; mask: none; scrollbar-width: none; }
  .marquee__track { animation: none; }
  .marquee__list[aria-hidden="true"], .partners__pause { display: none; }
}

/* ---------- About (home): the statement lights up word by word (marzex-site.js wraps each word in .w and sets its
   opacity from scroll), then the partners: one-colour logos on four cards ---------- */
.about__statement { grid-column: 1 / -1; max-width: 22ch; font-size: clamp(2.571rem, 5.4vw, 5.25rem); line-height: 1; letter-spacing: -.035em; }
.about__statement .w { opacity: .16; }
.about__ptitle { grid-column: 1 / 7; align-self: baseline; margin-top: 6rem; }
.about__plede { grid-column: 7 / 13; align-self: baseline; max-width: 34ch; margin-top: 6rem; }
.about__logos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stack); margin-top: 1.5rem; list-style: none; }
.about__cell { display: grid; place-items: center; aspect-ratio: 1 / 1; }
/* Partner logos are full-colour marks: each cell is a light tile and the image sits inside it (media/partners/). */
.about__cell.card { background: var(--paper); }
.about__logo { display: grid; place-items: center; width: 100%; height: 100%; padding: 1.25rem; border-radius: inherit; }
.about__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.about__logo:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.about__more { grid-column: 1 / -1; margin-top: 2rem; }

/* ---------- Services: pill tabs over one card per line; offers are cards inside it ---------- */
.svc-head { margin-top: 6rem; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.svc__bar { display: none; }
.svc.is-ready .svc__bar { display: flex; }
.svc__panels { display: grid; gap: var(--stack); }
.svc.is-ready .tabpanel { grid-area: 1 / 1; visibility: hidden; }
.svc.is-ready .tabpanel.is-active { visibility: visible; }
.tabpanel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2rem; padding: 1.5rem; }
.tabpanel:focus-visible { outline-offset: 3px; }
.svc__intro { grid-column: 1 / 6; display: grid; align-content: start; gap: 1rem; }
.svc__intro > p { max-width: 40ch; }
.svc__fig { margin: 1rem 0 0; }
.svc__fig .frame { aspect-ratio: 4 / 3; }
.offers { grid-column: 6 / 13; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack); align-content: start; }
.offer { display: grid; align-content: start; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; }
.offer p { line-height: 1.45; }
/* scale's list-item payload: each card rises 14px, .7s power2.out, 80ms apart, every time its line is chosen */
@keyframes lift { from { opacity: 0; transform: translateY(14px); } }
.svc.is-ready .tabpanel.is-active .offer { animation: lift .7s var(--s-power2-out) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.offer:nth-child(2) { --i: 1; } .offer:nth-child(3) { --i: 2; } .offer:nth-child(4) { --i: 3; } .offer:nth-child(5) { --i: 4; }

/* ---------- Vision (home): the film opens out of a 5% inset, the statement and its link centred on it. The two
   share one grid cell, and the frame stretches with it, so a long statement on a small screen grows the card. ---------- */
.film .media { object-position: 70% 50%; }
.vision { display: grid; }
.vision > * { grid-area: 1 / 1; }
.vision .film .frame { height: 100%; aspect-ratio: 16 / 9; }
.vision .frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, color-mix(in srgb, var(--ink) 50%, transparent), transparent 80%);
}
.vision__body {
  position: relative; z-index: 1; place-self: center; display: grid; justify-items: center;
  padding: 4rem 1.5rem; color: var(--paper); text-align: center;
}
.vision__text { max-width: 17em; text-wrap: balance; }
.vision__more { margin-top: 2rem; }

/* ---------- Platform cards: rounded-2xl, the picture in an 8px frame and the caption under it ---------- */
.cards { grid-auto-rows: 31rem; gap: var(--stack); }
.pcard { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: var(--stack); color: inherit; text-decoration: none; }
.pcard--8 { grid-column: span 8; }
.pcard--4 { grid-column: span 4; }
.pcard--12 { grid-column: 1 / -1; }
.pcard .media { position: absolute; inset: 0; transition: transform .5s var(--s-power2-out); }
.pcard:hover .media { transform: scale(1.02); }
/* i-Tasweet and SURGE carry their name and tagline low in the shot; the caption says it, so the frame crops them off. */
.pcard__media--crop .media { inset: 0 0 auto; height: 125%; }
.pcard__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem 1rem; padding: 1.25rem .75rem .75rem; }
.pcard__title { font-weight: 700; }
.pcard__desc { grid-column: 1; max-width: 52ch; }
.pcard__go { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
a.pcard:focus-visible { outline-offset: 2px; }

/* The NE arrow box on a linked card: lines up with the card's 8px corners, a fill rises on hover */
.go {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--r-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}
.go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, currentColor 14%, transparent); transform-origin: 50% 100%; scale: 1 0; transition: scale .3s var(--s-ease); }
.go .icon { width: .625rem; height: .625rem; }
a:hover > * > .go::before, a:hover > .go::before, a:focus-visible .go::before { scale: 1 1; }

/* ---------- Case cards (home): paper cards in a bone panel ---------- */
.ccards { list-style: none; gap: var(--stack); }
.ccard { grid-column: span 4; }
.ccard > a {
  display: grid; grid-template-rows: auto 1fr; height: 100%; padding: var(--stack); border-radius: var(--r-2xl);
  background: var(--paper); color: var(--ink); text-decoration: none;
}
.ccard .frame { aspect-ratio: 4 / 3; }
.ccard .media { transition: transform .5s var(--s-power2-out); }
.ccard > a:hover .media { transform: scale(1.02); }
.ccard__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: 1.25rem .75rem .75rem; }
.ccard__body > p { line-height: 1.45; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.ccard__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ---------- Case rail (home): all six cards in a sideways scroller, three to a view on wide screens ----------
   The rail runs the panel's width; its padding lines the first card up with the grid, and snapping keeps a card's
   left edge there. The bar under it: where you are, how far along, and the two step buttons. */
/* Home case studies: title and description centred, the rail and its steps, then one centred button */
.cases__head { max-width: calc(var(--container) + 2 * var(--margin)); margin: 0 auto 3rem; padding-inline: var(--margin); display: grid; justify-items: center; text-align: center; row-gap: 1.5rem; }
.cases__title { max-width: none; text-transform: none; }
.cases__head > p { max-width: 42rem; text-wrap: balance; }
.cases__all { display: flex; justify-content: center; margin-top: 3rem; }
.ccards--rail {
  --pad: max(var(--margin), calc((100% - var(--container)) / 2));
  display: flex; gap: var(--stack); margin: 0; padding: 0 var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.ccards--rail::-webkit-scrollbar { display: none; }
.ccards--rail:focus { outline: none; }
.ccards--rail > .ccard { flex: 0 0 calc((100% - 2 * var(--stack)) / 3); scroll-snap-align: start; }
.crail__bar { align-items: center; margin-top: 2rem; }
.crail__bar[hidden] { display: none; }
.crail__count { grid-column: 1 / 3; font-variant-numeric: tabular-nums; }
.crail__rail { grid-column: 3 / 11; position: relative; height: 1px; overflow: hidden; background: color-mix(in srgb, var(--fg) 15%, transparent); }
.crail__fill { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--fg); transition: transform .45s var(--s-power2-out); }
.crail__btns { grid-column: 11 / 13; justify-self: end; display: flex; gap: .5rem; }

/* Step buttons: 48px squares, 8px corners, a 1.5px line in the text colour. The fill rises on hover as on .go;
   at either end the button greys over and stays put. aria-disabled, not disabled, so focus is never dropped. */
:root {
  --icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6.6 1.2 2.8 5l3.8 3.8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.4 1.2 7.2 5 3.4 8.8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
.icon--prev { --i: var(--icon-prev); }
.icon--next { --i: var(--icon-next); }
.stepbtn {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 3rem; height: 3rem;
  padding: 0; border: 1.5px solid currentColor; border-radius: var(--r-lg); background: none; color: inherit; cursor: pointer;
  transition: background-color .3s var(--s-ease), scale .15s var(--s-ease);
}
.stepbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, currentColor 10%, transparent); transform-origin: 50% 100%; scale: 1 0; transition: scale .3s var(--s-ease); }
.stepbtn .icon { width: .75rem; height: .75rem; transition: translate .3s var(--s-ease); }
@media (hover: hover) {
  .stepbtn:hover::before { scale: 1 1; }
  .stepbtn[data-step="-1"]:hover .icon { translate: -2px 0; }
  .stepbtn[data-step="1"]:hover .icon { translate: 2px 0; }
}
.stepbtn:active { scale: .96; }
.stepbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stepbtn[aria-disabled="true"] { background: color-mix(in srgb, var(--fg) 28%, transparent); cursor: default; scale: 1; }
.stepbtn[aria-disabled="true"]::before { scale: 1 0; }
.stepbtn[aria-disabled="true"] .icon { translate: none; }
@media (prefers-reduced-motion: reduce) {
  .crail__fill, .stepbtn, .stepbtn::before, .stepbtn .icon { transition: none; }
}

/* ---------- Value (H split): flare panel, title and lede on the left, ink tiles on the right, mono glyph that takes the signal on hover.
   Scoped to #value, because .value is also the dark tile specimen on design-system.html. ---------- */
#value { --bg: var(--flare); --fg: var(--paper); --dim: .9; --focus: var(--paper); --mark: var(--paper); background-color: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; align-items: start; padding: 4rem clamp(1.25rem, 4vw, 3.5rem); }
#value .value__head { display: block; grid-column: 1; margin: 0; padding: 0; }
#value .value__head h2 { margin: 0; max-width: none; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.035em; }
#value .value__head > p { margin: 1.25rem 0 0; max-width: 28ch; font-size: 1.125rem; line-height: 1.5; opacity: .9; text-align: left; }
#value .values { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stack); margin: 0; padding: 0; border: 0; }
#value .value {
  position: relative; grid-column: auto; display: grid; grid-template-columns: none; grid-template-rows: auto auto 1fr; column-gap: 0; row-gap: .75rem;
  align-items: stretch; min-height: 15rem; padding: 1.5rem; border-radius: var(--r-2xl); border-bottom: 0;
  background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); color: var(--paper); transition: none;
}
/* the edge: a 1px ring of the signal gradient, lit on hover */
#value .value::before {
  inset: 0; padding: 1px; border-radius: inherit; z-index: auto; background: linear-gradient(in oklab 135deg, var(--flare), var(--iris));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transform: none; transition: opacity .4s cubic-bezier(.2, .7, .2, 1);
}
#value .value:hover::before { opacity: .8; transform: none; }
#value .value:hover { color: var(--paper); }
#value .value__top { display: flex; align-items: flex-start; justify-content: space-between; }
#value .value__icon { grid-column: auto; grid-row: auto; width: 2.75rem; height: 2.75rem; }
#value .value h3 { grid-column: auto; grid-row: auto; margin: 1.75rem 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
#value .value__top > .t-label { grid-column: auto; grid-row: auto; justify-self: auto; }
#value .value p { grid-column: auto; grid-row: auto; align-self: end; margin: 0; padding: 1.5rem 0 0; font-size: 1rem; line-height: 1.45; opacity: 1; }
@media (max-width: 1000px) {
  #value { grid-template-columns: 1fr; }
  #value .value__head, #value .values { grid-column: 1; }
}
@media (max-width: 768px) { #value { padding: 3.5rem 1.25rem 4rem; } }
@media (max-width: 560px) { #value .values { grid-template-columns: 1fr; } }
.value__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.value__head > p { grid-column: 1 / -1; margin-top: .75rem; }
.values { list-style: none; gap: var(--stack); }
.value {
  position: relative; grid-column: span 3; display: grid; grid-template-rows: auto auto 1fr; gap: .75rem; min-height: 17rem;
  padding: 1.5rem; border-radius: var(--r-2xl);
  background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
/* the edge: a 1px ring of the signal gradient, lit on hover */
.value::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(in oklab 135deg, var(--flare), var(--iris));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1);
}
.value:hover::before { opacity: .8; }
/* mono at rest; the Fill glyph fades to the signal gradient on hover */
.value__icon .value__mono { fill: currentColor; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); }
.value__icon .value__sig { opacity: 0; transition: opacity .4s cubic-bezier(.2, .7, .2, 1); }
.value:hover .value__icon .value__mono { opacity: 0; }
.value:hover .value__icon .value__sig { opacity: 1; }
.value__top { display: flex; align-items: flex-start; justify-content: space-between; }
.value__icon { width: 2.75rem; height: 2.75rem; }
.value h3 { margin-top: 1.75rem; }
.value p { align-self: end; padding-top: 1.5rem; line-height: 1.45; }

/* ---------- FAQ: the accordion as cards, the iris fill rising inside each ---------- */
.faq__head { grid-column: 1 / 5; display: grid; align-content: start; justify-items: start; gap: 1rem; }
.faq__head > p { max-width: 30ch; }
.faq .acc { grid-column: 5 / 13; }
.acc { display: grid; gap: var(--stack); border: 0; }
.acc__item { border: 0; border-radius: var(--r-2xl); overflow: hidden; }
.faq .acc__item { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.acc__item > summary { padding: 1.25rem 1.5rem; }
.acc__item > summary::before { inset: 0; }
.acc__plus {
  grid-column: 12; grid-row: 1; justify-self: end; width: 2rem; height: 2rem; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}
.acc__plus::before { left: .5625rem; right: .5625rem; }
.acc__plus::after { top: .5625rem; bottom: .5625rem; }
.faq__q { grid-column: 1 / 12; grid-row: 1; }
.faq__a { padding: 0 1.5rem 1.5rem; }
.faq__a p { max-width: 60ch; line-height: 1.45; }

/* ---------- Keep in touch: an olive panel, closing every page but Contact ---------- */
.touch__label { grid-column: 1 / 4; padding-top: .75rem; }
.touch__title { grid-column: 4 / 10; }
.touch__lede { grid-column: 4 / 9; max-width: 40ch; margin-top: .25rem; }
.touch__actions { grid-column: 4 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.touch__base { margin-top: 4rem; padding-top: 1.5rem; row-gap: 1.5rem; align-items: start; }
.touch__base > * { grid-column: span 3; display: grid; gap: .5rem; }
.touch__base > :first-child { grid-column: 4 / 7; }
.touch__base a { text-decoration: none; }
.touch__base a:hover { text-decoration: underline; }

/* ---------- People: a sage panel of white-20% cards ---------- */
.people { list-style: none; gap: var(--stack); }
.person { grid-column: span 3; display: grid; align-content: start; gap: .5rem; padding: var(--stack) var(--stack) 1.5rem; border-radius: var(--r-2xl); background: rgba(255, 255, 255, .2); }
.person > :not(.person__photo) { margin-inline: .75rem; }
.person__photo { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: .5rem; }
.person__bio { margin-top: .5rem; line-height: 1.45; }

/* ---------- About page: story, mission and vision cards, service lines ---------- */
.story__in { display: grid; justify-items: center; gap: 2.5rem; text-align: center; width: min(100% - 2 * var(--margin), 88rem); max-width: none; }
.story__label { margin-bottom: -.5rem; }
.story__lead { max-width: 74ch; font-size: clamp(2.571rem, 5vw, 4.75rem); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
:root[data-type="scale"] .story__cols, .story__cols { font-size: clamp(1rem, 1.15vw, 1.125rem); }
.story__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--col-gap); width: 100%; max-width: 76rem; margin-top: 2rem; text-align: left; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.45; }
.story__cols p { margin: 0; }
.mv { gap: var(--stack); }
.mv__card { grid-column: span 6; display: grid; grid-template-rows: auto 1fr; gap: 4rem; min-height: 22rem; padding: 1.5rem 1.5rem 2rem; border-radius: var(--r-2xl); background: var(--paper); }
.mv__card > p:last-child { align-self: end; max-width: 30ch; }
.lines { list-style: none; gap: var(--stack); }
.line { grid-column: span 4; display: grid; grid-template-rows: auto auto 1fr; gap: 1rem; padding: var(--stack); }
.line .frame { aspect-ratio: 16 / 10; }
.line__text { display: grid; gap: .75rem; padding: .75rem .75rem 0; }
.line__offers { list-style: none; display: grid; gap: var(--stack); align-content: start; }
.line__offers li { display: grid; gap: .375rem; padding: 1rem 1.125rem 1.125rem; }
.line__offers p { line-height: 1.45; }

/* ---------- Work page: one card per platform, picture and text side by side, alternating ---------- */
.platforms { list-style: none; display: grid; gap: var(--stack); }
.platform { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: var(--stack); scroll-margin-top: calc(var(--header-h) + 1rem); }
.platform__media { grid-column: 1 / 8; aspect-ratio: 16 / 10; }
.platform__media .media { position: absolute; inset: 0; }
.platform__text { grid-column: 8 / 13; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; padding: 1.25rem 1rem 1rem; }
.platform:nth-child(even) .platform__media { grid-column: 6 / 13; grid-row: 1; }
.platform:nth-child(even) .platform__text { grid-column: 1 / 6; grid-row: 1; }
.platform__name { font-weight: 700; }
.platform__facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; align-self: end; padding-top: 1rem; border-top: 1px solid var(--rule); }
.platform__facts dt { opacity: var(--dim); }

/* Archive: a quiet table of earlier work */
.archive { list-style: none; border-top: 1px solid var(--rule); }
.archive__row { border-bottom: 1px solid var(--rule); }
.archive__row > a, .archive__row > div, .archive__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
  min-height: 4.5rem; padding-block: 1rem; color: inherit; text-decoration: none;
}
.archive__row > a { transition: opacity var(--t-fast) var(--ease-cubic); }
.archive__row > a:hover .archive__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.archive__head { min-height: 0; padding-block: 0 .75rem; }
.archive__name { grid-column: 1 / 6; }
.archive__line { grid-column: 6 / 9; }
.archive__sector { grid-column: 9 / 12; }
.archive__row .go { grid-column: 12; justify-self: end; }

/* ---------- Case studies page: a filter, then one card per case ---------- */
.filter { margin-bottom: 1.5rem; }
.filter .ptabs button { position: relative; flex: none; padding: .5rem 1rem; border: 0; border-radius: var(--r-pill); background: none; color: color-mix(in srgb, var(--fg) 50%, transparent); white-space: nowrap; font: 400 .875rem/1.375rem var(--sans); letter-spacing: -.009rem; transition: color var(--s-tab) var(--s-ease); }
.filter .ptabs button:hover, .filter .ptabs button[aria-pressed="true"] { color: var(--fg); }
.filter .ptabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.filter .ptabs button:not(:last-of-type)::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 50%; translate: 0 -50%; background: color-mix(in srgb, var(--fg) 20%, transparent); transition: scale .1s var(--s-ease); }
.filter .ptabs button.no-div::after { scale: 1 0; }
.filter .ptabs button span { opacity: .6; margin-left: .25rem; }
.filter .ptabs { display: flex; width: fit-content; margin-inline: auto; } /* centred; scrolls sideways on a phone */
.filter__status { margin-top: .75rem; text-align: center; }
@media (max-width: 768px) { .filter .ptabs button { font-size: 1rem; line-height: 1.5rem; } }
/* The title block sits right on the filter: no band between the hero and the list */
.hero--cases { padding-bottom: 0; }
.hero--cases .cases__head { margin-bottom: 2rem; }
.slice.slice--cases { padding-top: 0; }

.cases { list-style: none; display: grid; gap: var(--stack); }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: var(--stack); scroll-margin-top: calc(var(--header-h) + 1rem); }
.case[hidden] { display: none; }
.case__fig { grid-column: 1 / 6; margin: 0; }
.case__fig .frame { aspect-ratio: 4 / 3; }
.case__text { grid-column: 7 / 13; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.25rem; padding: 1.25rem 1rem 1rem 0; }
.case__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.case__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: no-preference) {
  .case.is-entering { animation: lift .5s var(--s-power2-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
}

/* ---------- Contact page: the form reads as one sentence, each blank a field labelled by the words before it
   (contact-variations.html V8). The blanks grow with what is typed (field-sizing); without it they hold fixed widths.
   Office, phone and follow sit under one hairline below. ---------- */
.contact.slice { padding-top: .5rem; }
.cline { max-width: 62rem; margin-inline: auto; text-align: center; }
.cline__text { font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.5; letter-spacing: -.03em; text-wrap: balance; }
.cline__text label, .cline__nb > span { opacity: var(--dim); }
.cline__nb { white-space: nowrap; }
.cline input, .cline textarea {
  display: inline-block; field-sizing: content; min-width: 7ch; max-width: 100%; margin: 0 .15em; padding: 0 .1em;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 0; background: none;
  color: var(--fg); font: inherit; letter-spacing: inherit; line-height: 1.2; text-align: center; vertical-align: baseline;
  transition: border-color .2s var(--s-ease);
}
.cline textarea { min-width: 9ch; resize: none; overflow: hidden; vertical-align: -.26em; }
.cline ::placeholder { color: currentColor; opacity: .35; }
.cline input:focus, .cline textarea:focus { border-bottom-color: var(--fg); outline: none; }
.cline input:focus-visible, .cline textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Invalid: a 2px line in the type colour (error red only works as text on ink); the status line says why */
.cline [aria-invalid="true"] { border-bottom: 2px solid var(--fg); }
@supports not (field-sizing: content) {
  .cline input { width: 9ch; }
  .cline input[type="email"] { width: 12ch; }
  .cline textarea { width: 14ch; height: 1.2em; }
}
.cline__foot { display: flex; flex-direction: column-reverse; align-items: center; gap: 1rem; margin-top: 3rem; }
.cline__foot .form__status { flex: 0 0 auto; }
.cline__foot .form__status:empty { display: none; }
.reach {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--col-gap);
  margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.reach__col { display: grid; align-content: start; justify-items: start; gap: .75rem; }
.reach__col address { line-height: 1.45; }
.reach__col .social { margin-left: -.5625rem; }
.reach__tel { text-decoration: none; }
.reach__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (prefers-reduced-motion: reduce) { .cline input, .cline textarea { transition: none; } }

/* The site's boxed form, as design-system.html shows it on olive (.contact .form) */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; margin-top: 1.5rem; }
.field--full { grid-column: 1 / -1; }
.contact .field input, .contact .field textarea {
  padding: .75rem .875rem; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: transparent;
  transition: border-color .15s var(--s-ease);
}
.contact .field input:focus, .contact .field textarea:focus { border-color: var(--fg); }
.contact .field input:focus-visible, .contact .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Error red is under 3:1 on olive, so an invalid field takes a 2px line in the type colour, and the status says why. */
.contact .field [aria-invalid="true"] { border: 2px solid var(--fg); padding: calc(.75rem - 1px) calc(.875rem - 1px); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.form__status { flex: 1 1 16rem; line-height: 1.3; }

/* ---------- Footer ---------- */
.ftr { padding-block: 4rem 3.5rem; }
.ftr__top { row-gap: 3rem; }
.ftr__brand { grid-column: 1 / 5; }
.ftr__brand .wordmark { font-size: 1.5rem; }
.ftr__col { grid-column: span 2; }
.ftr__col h2 { margin-bottom: 1.25rem; }
.ftr__col ul { list-style: none; display: grid; gap: .35rem; }
.ftr__col a { text-decoration: none; transition: opacity var(--t-fast) var(--ease-cubic); }
.ftr__col a:hover { opacity: .5; }
.ftr__base { margin-top: 5rem; row-gap: 2rem; align-items: end; }
.ftr__legal { grid-column: 1 / 9; display: grid; gap: .9rem; justify-items: start; }
.ftr__contact { grid-column: 11 / 13; display: grid; gap: 1rem; }
.ftr__contact a { text-decoration: none; }
.ftr__contact a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__lede { grid-column: 4 / 10; }
  .hero__actions, .hero__lede + .hero__actions { grid-column: 4 / 12; justify-self: start; }
  .svc__intro, .offers { grid-column: 1 / -1; }
  .svc.is-ready .tabpanel:not(.is-active) { display: none; }
  .ccard { grid-column: span 6; }
  .ccard:last-child { grid-column: 1 / -1; }
  .ccards--rail > .ccard { flex-basis: calc((100% - var(--stack)) / 2); }
  .crail__count { grid-column: 1 / 4; }
  .crail__rail { grid-column: 4 / 10; }
  .crail__btns { grid-column: 10 / 13; }
  .value { grid-column: span 6; }
  .faq__head, .faq .acc { grid-column: 1 / -1; }
  .touch__title, .touch__lede, .touch__actions { grid-column: 4 / 13; }
  .touch__base > *, .touch__base > :first-child { grid-column: span 4; }
  .person { grid-column: span 6; }
  .line { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); grid-template-rows: auto 1fr; }
  .line .frame { grid-column: 1 / 6; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 16rem; }
  .line__text, .line__offers { grid-column: 6 / 13; }
  .platform__media, .platform:nth-child(even) .platform__media { grid-column: 1 / -1; grid-row: 1; }
  .platform__text, .platform:nth-child(even) .platform__text { grid-column: 1 / -1; grid-row: 2; padding: 1.25rem .75rem .75rem; }
  .case__fig { grid-column: 1 / 7; }
  .case__text { grid-column: 7 / 13; }
}
@media (max-width: 768px) {
  .slice { padding-block: 4.5rem; }
  .panel.slice { padding-block: 3.5rem; }
  .head { row-gap: 1rem; margin-bottom: 2rem; }
  .cases__head { margin-bottom: 2rem; }
  .cases__all { margin-top: 2rem; }
  .head > h2, .head > h3, .head__aside, .label-col { grid-column: 1 / -1; }
  .label-col { padding-top: 0; margin-bottom: 1rem; }
  .hero { padding-top: calc(var(--header-h) + 3rem); }
  .hero__head { row-gap: 1.75rem; }
  .hero__meta, .hero__lede, .hero__actions, .hero__lede + .hero__actions { grid-column: 1 / -1; }
  .hero__meta { grid-auto-flow: column; justify-content: space-between; align-items: start; }
  .hero__cue { display: none; }
  .hero--center .hero__head { padding-bottom: 2.5rem; }
  .hero--center .hero__lede { font-size: 1.125rem; margin-top: 1.25rem; }
  .hero__media > .frame, .film .frame { border-radius: var(--r-2xl); }
  .lock-stage { aspect-ratio: 4 / 5; }
  .lock-view { inset: 0 auto auto -56%; width: auto; height: 100%; aspect-ratio: 16 / 9; }
  .strip__label, .strip__list { grid-column: 1 / -1; }
  .partners { padding-top: 3rem; }
  .partners__head > h2 { grid-column: 1 / 11; }
  .partners__head > p { grid-column: 1 / -1; grid-row: 2; }
  .partners__pause { grid-column: 11 / 13; grid-row: 1; }
  .partner { width: 14rem; }
  .story__cols { grid-template-columns: 1fr; }
  .about__ptitle, .about__plede { grid-column: 1 / -1; }
  .about__ptitle { margin-top: 4rem; }
  .about__plede { margin-top: .5rem; }
  .about__logos { grid-template-columns: 1fr 1fr; }
  .svc-head { margin-top: 4rem; }
  .film .frame { aspect-ratio: 4 / 3; }
  .clip-ready [data-clip] .frame { clip-path: inset(calc((1 - var(--clip-p, 1)) * 5%) round var(--r-2xl)); }
  .vision .film .frame { aspect-ratio: 4 / 5; }
  .vision__body { padding: 3rem 1.5rem; }
  .tabpanel { padding: 1rem; row-gap: 1.5rem; }
  .offers { grid-template-columns: 1fr; }
  .cards { grid-auto-rows: auto; }
  .pcard--8, .pcard--4, .pcard--12 { grid-column: 1 / -1; grid-template-rows: auto auto; }
  .pcard__media { aspect-ratio: 4 / 3; }
  .ccard, .ccard:last-child, .value { grid-column: 1 / -1; }
  .ccards--rail > .ccard { flex-basis: 86%; } /* the next card peeks in, so the rail reads as one */
  .crail__bar { row-gap: 1rem; }
  .crail__count { grid-column: 1 / 4; grid-row: 1; }
  .crail__rail { grid-column: 4 / -1; grid-row: 1; }
  .crail__btns { grid-column: 1 / -1; grid-row: 2; justify-self: start; } /* left, clear of the floating Top button */
  .value { min-height: 0; }
  .acc__item > summary { padding: 1rem; }
  .faq__q { grid-column: 1 / 11; }
  .acc__plus { grid-column: 11 / 13; }
  .faq__a { padding: 0 1rem 1rem; }
  .touch__label, .touch__title, .touch__lede, .touch__actions { grid-column: 1 / -1; }
  .touch__label { padding-top: 0; margin-bottom: 1rem; }
  .touch__base > *, .touch__base > :first-child { grid-column: 1 / -1; }
  .person { grid-column: 1 / -1; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem; padding: var(--stack) var(--stack) 1.25rem; }
  .person > :not(.person__photo) { margin-inline: 0 .5rem; }
  .person__photo { grid-row: 1 / span 2; margin: 0; }
  .person h3 { align-self: end; }
  .person__role { align-self: start; }
  .person__bio { grid-column: 1 / -1; margin: .75rem .5rem 0; }
  .mv__card { grid-column: 1 / -1; min-height: 0; gap: 2.5rem; }
  .line { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .line .frame, .line__text, .line__offers { grid-column: 1; grid-row: auto; }
  .line .frame { aspect-ratio: 16 / 10; min-height: 0; }
  .platform__text { grid-template-rows: auto; }
  .archive__head { display: none; }
  .archive__row > a, .archive__row > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: .5rem; }
  .archive__name, .archive__line, .archive__sector { grid-column: 1; }
  .archive__row .go { grid-column: 2; grid-row: 1 / span 3; }
  .case__fig, .case__text { grid-column: 1 / -1; }
  .case__text { padding: 1.25rem .5rem .5rem; }
  .cline { text-align: left; }
  .cline__text { text-wrap: wrap; }
  .cline input, .cline textarea { text-align: left; }
  .cline__foot { align-items: stretch; }
  .cline .cta { width: 100%; }
  .reach { grid-template-columns: minmax(0, 1fr); margin-top: 4rem; }
  .form { grid-template-columns: 1fr; gap: 1.5rem; }
  .form .cta { width: 100%; }
  .form__foot { flex-direction: column-reverse; align-items: stretch; }
  .form__status { flex: 0 0 auto; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__col { grid-column: span 6; }
  .ftr__base { margin-top: 4rem; }
  .ftr__legal, .ftr__contact { grid-column: 1 / -1; }
}