/* ============================================================
   ORIGIN DESIGN SYSTEM — v1
   ------------------------------------------------------------
   LAYER 1  Tokens .............. :root  (colour, type, space)
   LAYER 2  Primitives .......... type, layout, reveal
   LAYER 3  Shared components ... used across every page
   LAYER 4  Page components ..... homepage sections (01-11)
   ------------------------------------------------------------
   Palette is black / fire-engine red / white only.
   No purple, no violet, no third hue. Ever.
   ============================================================ */



/* ============================================================
   LAYER 3 — SHARED COMPONENTS
   Everything below is used by two or more pages. Page-specific
   styling lives in LAYER 4. If you find yourself copying a rule
   into a second page, promote it up here.
   ============================================================ */

/* ---------- page hero: the sub-page counterpart to .hero ---------- */
.phero{
  position:relative;overflow:hidden;clip-path:inset(0); /* clips the pinned plate to the hero */
  padding-block:clamp(8rem,17vh,11rem) var(--section);
  border-bottom:1px solid var(--rule-soft);
}
.phero-bg{position:absolute;inset:0;pointer-events:none;opacity:0.13;}
.phero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(0.6);}
.phero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 8%,rgba(9,9,10,0.72) 48%,rgba(9,9,10,0.35) 100%);
}
.phero-inner{position:relative;z-index:2;}
/* bottom fade into the page. It lives on the hero (not on the pinned image
   layer) so it stays glued to the hero's bottom edge as that edge rises over
   the static photo; on the layer it was left behind at the screen bottom and
   the photo showed hard-cut and unshaded at the grey line. */
.phero-parallax::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 1%,transparent 38%);
}
/* the hero's grey bottom rule. It is the top border of whatever section
   follows, not part of the hero: on the hero itself it was either painted
   over by the pinned photo layer or, on pages whose hero height lands on a
   fractional pixel, half-clipped by the hero's clip-path, which left a
   see-through row. A border on the next section is always solid. */
.phero-parallax{border-bottom:0;}
.phero-parallax + *{border-top:1px solid var(--rule-soft);}

/* ---------- special page heroes: a space photo instead of the plain grey
   texture, with a subtle scroll parallax (deliberately understated — this
   is a secondary page hero, not the homepage's full treatment). shared by
   any .phero carrying .phero-parallax; per-image classes tune framing. ---------- */
.phero-parallax .phero-bg{opacity:0.5;position:fixed;top:0;left:0;right:0;height:var(--hero-h,100%);}
.phero-parallax .phero-bg img{filter:grayscale(1) contrast(1.2) brightness(0.72);}
/* slow Ken Burns, same as the homepage hero: push in and drift, ease back */
.phero-parallax .phero-bg img{
  animation:pheroKenBurns 12s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes pheroKenBurns{
  from{transform:scale(1) translate(0,0);}
  to  {transform:scale(1.1) translate(-1.5%,-1%);}
}
@media (prefers-reduced-motion:reduce){
  .phero-parallax .phero-bg img{animation:none;}
}
.phero-parallax .phero-bg::after{
  background:linear-gradient(100deg,rgba(9,9,10,0.9) 12%,rgba(9,9,10,0.62) 46%,rgba(9,9,10,0.26) 100%);
}
.phero-stars{position:fixed;top:0;left:0;right:0;height:var(--hero-h,100%);pointer-events:none;overflow:hidden;}
.phero-stars .star-layer{will-change:transform;}

.phero-moon .phero-bg img{object-position:68% 28%;}
@media (max-width:640px){.phero-moon .phero-bg img{object-position:80% 22%;}}

.phero-planets .phero-bg img{object-position:50% 55%;}
@media (max-width:640px){.phero-planets .phero-bg img{object-position:70% 62%;}}

.phero-whatwemake .phero-bg img{object-position:66% 35%;}
@media (max-width:640px){.phero-whatwemake .phero-bg img{object-position:78% 28%;}}

.phero-startproject .phero-bg img{object-position:64% 38%;}
@media (max-width:640px){.phero-startproject .phero-bg img{object-position:92% 40%;}}

.phero-ourwork .phero-bg img{object-position:56% 42%;}
@media (max-width:640px){.phero-ourwork .phero-bg img{object-position:50% 42%;}}

.phero-aboutus .phero-bg img{object-position:64% 32%;}
@media (max-width:640px){.phero-aboutus .phero-bg img{object-position:80% 28%;}}

/* Case study heroes — a full-colour photographic hero (scoped to the work
   case-study pages): no grayscale, lifted brightness, ~40% opacity, a gentler
   dark wash so the image reads in colour while the headline stays legible. */
.phero-hyphen .phero-bg,
.phero-alula .phero-bg,
.phero-dstv .phero-bg,
.phero-elle .phero-bg,
.phero-fnb .phero-bg,
.phero-liberty .phero-bg,
.phero-mckinsey .phero-bg,
.phero-mbclub .phero-bg,
.phero-qatar .phero-bg,
.phero-lifehealth .phero-bg,
.phero-weathersa .phero-bg,
.phero-weapply .phero-bg,
.phero-bfs .phero-bg,
.phero-azlms .phero-bg,
.phero-healthbridge .phero-bg,
.phero-orange .phero-bg,
.phero-stdbank .phero-bg{opacity:0.4;}
.phero-hyphen .phero-bg img,
.phero-alula .phero-bg img,
.phero-dstv .phero-bg img,
.phero-elle .phero-bg img,
.phero-fnb .phero-bg img,
.phero-liberty .phero-bg img,
.phero-mckinsey .phero-bg img,
.phero-mbclub .phero-bg img,
.phero-qatar .phero-bg img,
.phero-lifehealth .phero-bg img,
.phero-weathersa .phero-bg img,
.phero-weapply .phero-bg img,
.phero-bfs .phero-bg img,
.phero-azlms .phero-bg img,
.phero-healthbridge .phero-bg img,
.phero-orange .phero-bg img,
.phero-stdbank .phero-bg img{filter:contrast(1.03) saturate(1.06);}
.phero-hyphen .phero-bg img{object-position:58% 46%;}
.phero-hyphen .phero-bg::after,
.phero-alula .phero-bg::after,
.phero-dstv .phero-bg::after,
.phero-elle .phero-bg::after,
.phero-fnb .phero-bg::after,
.phero-liberty .phero-bg::after,
.phero-mckinsey .phero-bg::after,
.phero-mbclub .phero-bg::after,
.phero-qatar .phero-bg::after,
.phero-lifehealth .phero-bg::after,
.phero-weathersa .phero-bg::after,
.phero-weapply .phero-bg::after,
.phero-bfs .phero-bg::after,
.phero-azlms .phero-bg::after,
.phero-healthbridge .phero-bg::after,
.phero-orange .phero-bg::after,
.phero-stdbank .phero-bg::after{
  background:linear-gradient(100deg,rgba(9,9,10,0.7) 4%,rgba(9,9,10,0.32) 46%,rgba(9,9,10,0.1) 100%);
}
@media (max-width:640px){.phero-hyphen .phero-bg img{object-position:66% 46%;}}

.phero-elle .phero-bg img{object-position:60% 26%;}
@media (max-width:640px){.phero-elle .phero-bg img{object-position:66% 24%;}}

.phero-alula .phero-bg img{object-position:58% 30%;}
@media (max-width:640px){.phero-alula .phero-bg img{object-position:64% 26%;}}

.phero-lifehealth .phero-bg img{object-position:62% 38%;}
@media (max-width:640px){.phero-lifehealth .phero-bg img{object-position:74% 34%;}}

.phero-weathersa .phero-bg img{object-position:42% 48%;}
@media (max-width:640px){.phero-weathersa .phero-bg img{object-position:32% 46%;}}

.phero-weapply .phero-bg img{object-position:50% 38%;}
@media (max-width:640px){.phero-weapply .phero-bg img{object-position:60% 34%;}}

.phero-orange .phero-bg{opacity:0.8;}
.phero-orange .phero-bg img{object-position:50% 48%;}
@media (max-width:640px){.phero-orange .phero-bg img{object-position:34% 48%;}}
.phero-bfs .phero-bg img{object-position:50% 35%;}
@media (max-width:640px){.phero-bfs .phero-bg img{object-position:58% 35%;}}
.phero-azlms .phero-bg img{object-position:50% 22%;}
@media (max-width:640px){.phero-azlms .phero-bg img{object-position:50% 18%;}}
.phero-healthbridge .phero-bg img{object-position:60% 40%;}
@media (max-width:640px){.phero-healthbridge .phero-bg img{object-position:62% 40%;}}

/* ---------- start-a-project v2 experiment: one static full-screen photo
   fixed behind the whole page — it never moves, everything else scrolls
   over it (no parallax here, deliberately: this is the opposite treatment) ---------- */
body.bg-fixed-page{background:transparent;}
body.bg-fixed-page .foot{background:var(--ink);position:relative;z-index:1;}
/* pull the form section up to where the hero's bottom rule used to sit,
   then drop the rule itself */
body.bg-fixed-page .phero{border-bottom:none;padding-bottom:calc(var(--s5) + 4px);}
body.bg-fixed-page .phero + .band{padding-top:2.5rem;}
.page-bg-fixed{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--ink);}
.page-bg-fixed img{
  width:100%;height:100%;object-fit:cover;object-position:64% 38%;
  filter:grayscale(1) contrast(1.2) brightness(0.385);
}
.page-bg-fixed-veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 28% 18%, rgba(9,9,10,0.65) 0%, rgba(9,9,10,0.87) 45%, rgba(9,9,10,0.96) 100%);
}
@media (max-width:640px){.page-bg-fixed img{object-position:80% 34%;}}
.phero h1{max-width:clamp(40.1rem,57.55vw,50.12rem);margin-block:var(--s4) var(--s4);}
.phero .lead{max-width:52ch;}
/* a hairline rule that draws in under the page title */
.phero-rule{
  height:1px;margin-top:var(--s5);position:relative;overflow:hidden;
}
.phero-rule::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .4s;
}
.phero.lit .phero-rule::after{transform:scaleX(0.24);}

/* ---------- breadcrumb ---------- */
.crumb{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-faint);display:flex;align-items:center;gap:0.7em;flex-wrap:wrap;
}
.crumb a{transition:color .35s var(--ease);}
.crumb a:hover{color:var(--red-text);}
.crumb .sep{color:var(--red-deep);}
.crumb .here{color:var(--white-dim);}

/* ---------- section header (rail label + heading + lead) ---------- */
.sec-head{margin-bottom:var(--s5);}
.sec-head h2{max-width:18ch;}
.sec-head .prose{margin-top:var(--s4);}

/* ---------- prose article body ---------- */
.rich > * + *{margin-top:var(--s3);}
.rich h3{margin-top:var(--s5);margin-bottom:var(--s2);}
.rich p{font-family:var(--serif);line-height:1.85;color:var(--white-dim);max-width:62ch;}
.rich strong{color:var(--white);font-weight:400;}
.rich em{color:var(--white);font-style:italic;}
.rich ul,.rich ol{max-width:62ch;padding-left:0;list-style:none;margin-top:var(--s3);}
.rich li{
  font-family:var(--serif);line-height:1.75;color:var(--white-dim);
  padding-left:var(--s4);position:relative;padding-block:0.3em;
}
.rich ul > li::before{
  content:"";position:absolute;left:0;top:1.05em;width:14px;height:1px;background:var(--red);
}
.rich ol{counter-reset:ri;}
.rich ol > li{counter-increment:ri;}
.rich ol > li::before{
  content:counter(ri,decimal-leading-zero);position:absolute;left:0;top:0.42em;
  font-family:var(--mono);font-size:var(--t-cap-68);letter-spacing:0.1em;color:var(--red-text);
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.16;
  color:var(--white);max-width:22ch;
  padding-left:var(--s4);margin-block:var(--s6);position:relative;
}
/* mobile only: the pull-quote (red keyline, e.g. start-a-project.html and
   about.html) was reading too small next to the rest of the mobile type
   scale — bumped to match the h2 size there, desktop untouched */
@media (max-width:759px){.pull{font-size:var(--t-h2);}}
.pull::before{
  content:"";position:absolute;left:0;top:0.14em;bottom:0.14em;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .9s var(--ease) .2s;
}
.rv.on .pull::before,.pull.on::before{transform:scaleY(1);}
.pull cite{
  display:block;margin-top:var(--s3);font-style:normal;
  font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--white-faint);
}

/* ---------- chips / tag list ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);}
.chips li{
  font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white-faint);border:1px solid var(--rule-soft);padding:0.5em 0.85em;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.chips li:hover{border-color:var(--red-deep);color:var(--white-dim);}
.chips li a{display:block;margin:-0.5em -0.85em;padding:0.5em 0.85em;color:inherit;text-decoration:none;}
.chips li:has(a):hover{color:var(--red-text);}
#capabilities .chips li:hover{color:var(--white);}

/* capability targets: clear the fixed header when jumped to */
#cap-research,#cap-strategy,#cap-product-design,#cap-technology,#cap-optimisation{scroll-margin-top:6rem;}
#stage-understand,#stage-define,#stage-design,#stage-validate-1,#stage-build,#stage-evolve{scroll-margin-top:6rem;}
#capabilities li:target{color:var(--white);}
#capabilities li:target strong{color:var(--red-text);}

/* ---------- work card grid ---------- */
.wgrid{display:grid;gap:clamp(1rem,2vw,1.8rem);grid-template-columns:1fr;}
@media (min-width:720px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1180px){.wgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.wcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:
    linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 40%),
    linear-gradient(180deg,#151518,#0e0e10);
  box-shadow:0 1px 2px rgba(0,0,0,.42), 0 12px 28px -10px rgba(0,0,0,.6);
  transition:border-color .5s var(--ease);
}
/* rollover: keyline + title warm to red, the shot eases in — no card movement */
.wcard:hover,.wcard:focus-within{border-color:var(--red);}
.wcard:hover h3,.wcard:focus-within h3{color:var(--red-text);}
.wcard-shot{position:relative;overflow:hidden;background:var(--ink-3);aspect-ratio:16/10;}
.wcard-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:scale(1.04);
  transition:transform .9s var(--ease),filter .7s var(--ease);
  filter:contrast(1.03) saturate(1.02) brightness(0.96);
}
.wcard:hover .wcard-shot img{transform:scale(1.09) rotate(-0.3deg);filter:contrast(1.07) saturate(1.12) brightness(1.02);}
.wcard-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(9,9,10,0.6) 100%);
}
.wcard-num{
  position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;color:var(--white);
  background:rgba(9,9,10,.7);backdrop-filter:blur(6px);padding:.3em .6em;
}
.wcard-meta{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;flex:1;}
.wcard .wcard-tag{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--s2);
}
.wcard h3{margin-bottom:var(--s2);transition:color .45s var(--ease);}
.wcard p{font-family:var(--serif);font-size:0.92rem;line-height:1.75;color:var(--white-dim);margin-bottom:var(--s4);}
/* the visible "Read the case study" link sits above the full-card overlay so
   it can be hovered directly — its red keyline draws in only on link rollover,
   never on card rollover */
.wcard .hl{margin-top:auto;color:var(--white-faint);position:relative;z-index:5;width:fit-content;}
.wcard .hl:hover,.wcard .hl:focus-visible{color:var(--white);}
/* the rest of the card is still a link target */
.wcard-link{position:absolute;inset:0;z-index:4;}

/* ---------- work category filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);}
.filters-center{justify-content:center;}

/* the "Selected work" label sits on the left at its natural width (out of the
   flow, so it never pushes the buttons); the button row is centred on the
   full page width */
.filter-row{position:relative;}
/* Our work: the count line sits in the band's top padding, centred between
   the hero keyline and the filter buttons, without moving the buttons */
.filter-row > .hint-above{
  position:absolute;left:0;right:0;bottom:100%;height:var(--section);margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.filter-label{margin:0 0 var(--s4);width:max-content;}
/* only lift the label out of flow once the centred button row leaves a clear
   margin for it on the left — below that it stacks above, still left-aligned */
@media (min-width:1280px){
  .filter-label{
    position:absolute;left:0;top:0;margin:0;
    display:flex;align-items:center;min-height:2.67rem;   /* align to the button row */
  }
}
.fbtn{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--mono);font-size:var(--t-cap-86);letter-spacing:0.13em;text-transform:uppercase;
  color:var(--white-faint);border:1px solid var(--rule-soft);
  padding:0.7em 1.1em;border-radius:var(--r-sm);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
/* red panel that swipes up from the bottom — same rollover as the header
   "Start a project" button */
.fbtn::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.fbtn:hover,.fbtn:focus-visible{border-color:var(--red);color:var(--white);}
.fbtn:hover::before,.fbtn:focus-visible::before{transform:translateY(0);}
/* selected: the red panel sits up; hovering it replays the swipe */
.fbtn.on{border-color:var(--red);color:var(--white);}
.fbtn.on::before{transform:translateY(0);}
.fbtn.on:hover::before,.fbtn.on:focus-visible::before{animation:fbtnReswipe .6s var(--ease);}
@keyframes fbtnReswipe{
  0%{transform:translateY(0);}
  45%{transform:translateY(101%);}
  100%{transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .fbtn::before{transition:none;}
  .fbtn.on:hover::before,.fbtn.on:focus-visible::before{animation:none;}
}

/* mobile only: shorter filter labels (All, Websites, Apps, Saas, L.o.b,
   Portals, Interactive) — desktop keeps the full wording untouched */
.fbtn-short{display:none;}
@media (max-width:759px){
  .fbtn-full{display:none;}
  .fbtn-short{display:inline;}
}
.wcard[hidden]{display:none;}
/* Our work: the top row is there on load, the rest reveal on scroll.
   The row is one, two or three cards wide, matching .wgrid's columns */
#workGrid > .wcard.rv:first-child{opacity:1;transform:none;}
@media (min-width:720px){#workGrid > .wcard.rv:nth-child(-n+2){opacity:1;transform:none;}}
@media (min-width:1180px){#workGrid > .wcard.rv:nth-child(-n+3){opacity:1;transform:none;}}
/* same for the first row of a filtered tab (class set in origin.js) */
#workGrid > .wcard.rv.top-row{opacity:1;transform:none;transition:border-color .5s var(--ease);}

/* ---------- case-study spine: fact table ---------- */
.spine{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule-soft);margin-top:var(--s5);
}
@media (min-width:760px){.spine{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6);}}
@media (min-width:1100px){.spine{grid-template-columns:repeat(4,minmax(0,1fr));}}
.spine div{padding-block:var(--s3);border-bottom:1px solid var(--rule-soft);}
.spine dt{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--white-faint);margin-bottom:var(--s2);
}
.spine dd{font-family:var(--serif);font-size:0.95rem;line-height:1.6;color:var(--white);}
.spine dd .spine-link{
  display:inline-block;margin-top:2px;color:var(--white);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .3s var(--ease);
}
.spine dd .spine-link:hover,.spine dd .spine-link:focus-visible{color:var(--red-text);}

/* Hyphen case study only — keyline sits under the fact spine, not over it, and
   the discipline chips get a rule of their own before the narrative starts,
   with breathing room on both sides so they never touch a line. */
.spine--study{border-top:0;margin-top:0;}
.spine--study div{border-bottom:0;}
@media (min-width:760px){.spine--study .spine-wide{grid-column:span 2;}}
.chips--study{margin-top:calc(var(--s5) - 20px);padding-bottom:var(--s5);border-bottom:1px solid var(--rule-soft);}

/* ---------- outcome figures ---------- */
/* tracks are minmax(0,1fr): a bare 1fr floors at min-content, so a long
   unbreakable phrase in .out b would push the grid past its container. */
.outs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5);}
@media (min-width:640px){.outs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1020px){.outs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);}}
.out{min-width:0;}
.out b{
  font-family:var(--display);
  /* sized for short phrases as well as bare figures */
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.08;
  color:var(--white);display:block;font-weight:400;
  overflow-wrap:break-word;hyphens:auto;
}
.out b i{font-style:normal;color:var(--red-text);}
.out span{
  display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--white-faint);line-height:1.65;
}

/* ---------- full-bleed figure ---------- */
.fig{margin-block:var(--s6);}
.fig img{width:100%;border:1px solid var(--rule-soft);background:var(--ink-2);}
.fig figcaption{
  margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--white-faint);
}

/* three portrait figures sitting side by side, sharing one caption.
   grayscale by default; the one being hovered fades up to full colour. */
.fig-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);}
.fig-trio img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  filter:grayscale(1) brightness(0.6);opacity:0.65;
  transition:filter .55s var(--ease),opacity .55s var(--ease);
}
.fig-trio img:hover{filter:grayscale(0) brightness(1);opacity:1;}
.fig-trio figcaption{grid-column:1/-1;}
@media (hover:none){
  .fig-trio img{filter:none;opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .fig-trio img{transition:none;}
}
@media (max-width:640px){
  .fig-trio{grid-template-columns:1fr;gap:var(--s3);}
  .fig-trio img{aspect-ratio:4/3;}
}

/* wide variant: for landscape reference material (wireframes, screen captures)
   that needs to be seen in full rather than cropped to the default portrait
   frame. object-fit:contain keeps the whole image, letterboxed on the frame's
   own background if its ratio doesn't match exactly. */
.fig-trio--wide img{aspect-ratio:4/3;object-fit:contain;background:var(--ink-1);}
@media (max-width:640px){
  .fig-trio--wide img{aspect-ratio:4/3;}
}

/* ward wireframe variant: three panels cut from one wide image, each ~1.3:1, shown whole */
.fig-trio--ward img{aspect-ratio:594/456;object-fit:contain;background:var(--ink-1);}

/* landscape sheet variant (A4-style scans, 1754:1240): full width shown, nothing cropped */
.fig-trio--sheet img{aspect-ratio:1754/1240;object-fit:contain;background:var(--ink-1);}

/* paper-sketch variant: landscape wireframe crops, shown whole in a 3:2 frame */
.fig-trio--sketch img{aspect-ratio:3/2;object-fit:contain;background:var(--ink-1);}

/* wireframe variant: frame matches the wireframes' own ~1.46:1 ratio so the
   whole tablet outline shows edge to edge, nothing cropped or letterboxed. */
.fig-trio--wire img{aspect-ratio:1.46/1;object-fit:contain;background:var(--ink-1);}
@media (max-width:640px){
  .fig-trio--wire img{aspect-ratio:1.46/1;}
}

/* six-across variant: a full research/process row on desktop, same
   grayscale-to-colour rollover as fig-trio, just more columns and a shorter
   frame so six tiles read as one consistent line rather than six posters. */
.fig-six{grid-template-columns:repeat(6,1fr);gap:var(--s2);}
.fig-six img{aspect-ratio:3/4;}
/* fit modifier: image fills the frame width, pinned to the top; the bottom is cropped by the frame height */
.fig-six.fig-fit img{object-fit:cover;object-position:top;}
/* four-across: full image width, pinned to the top, taller frames than the six-across row */
.fig-six.fig-four{grid-template-columns:repeat(4,1fr);}
.fig-six.fig-four img{aspect-ratio:3/4;}
@media (max-width:900px){
  .fig-six{grid-template-columns:repeat(3,1fr);}
  .fig-six.fig-four{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .fig-six,.fig-six.fig-four{grid-template-columns:repeat(2,1fr);gap:var(--s3);}
  .fig-six img{aspect-ratio:4/3;}
  .fig-six.fig-four img{aspect-ratio:3/4;}
}

/* zoom-crop: wrapper clips a scaled image so it zooms inside its own frame */
.zoom-crop{display:block;overflow:hidden;}
.zoom-crop img{display:block;width:100%;transform-origin:center;}
.zoom-in-20 img{transform:scale(1.2);}
.zoom-in-30-right img{transform:scale(1.3);transform-origin:right center;}

/* landscape-tile modifier for the four-across row (mixed field photography) */
.fig-six.fig-four.fig-land img{aspect-ratio:4/3;object-fit:cover;object-position:center;}
@media (max-width:640px){.fig-six.fig-four.fig-land img{aspect-ratio:4/3;}}

/* badge row: five course badges in a single line. The badge artwork is black
   and orange on transparent, so each sits on a white tile. Grayscale by
   default, full colour on hover, same rollover as fig-trio. */
.fig-badges{grid-template-columns:repeat(5,1fr);gap:var(--s2);}
.fig-badges img{
  aspect-ratio:1/1;object-fit:contain;padding:12%;background:#fff;border:0;
  filter:grayscale(1) brightness(0.9);opacity:0.7;
}
.fig-badges img:hover{filter:grayscale(0) brightness(1);opacity:1;}
@media (max-width:900px){
  .fig-badges{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .fig-badges{grid-template-columns:repeat(2,1fr);gap:var(--s2);}
  .fig-badges img{aspect-ratio:1/1;}
  .fig-badges img:nth-of-type(5){grid-column:1/-1;justify-self:center;width:calc(50% - var(--s2) / 2);padding:6%;}
}

/* eight-across variant: two rows of four, for a research set too large
   for a single line. Same grayscale-to-colour rollover as fig-trio. */
.fig-eight{grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.fig-eight img{aspect-ratio:3/4;}
@media (max-width:900px){
  .fig-eight{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .fig-eight{grid-template-columns:repeat(2,1fr);gap:var(--s3);}
  .fig-eight img{aspect-ratio:4/3;}
}

/* click-through gallery: a crossfading stage image driven by a thumbnail row.
   condenses a run of figures into a single unit. */
.gallery{margin-block:var(--s6);}
.gallery-stage{margin:0;}
.gallery-frame{
  position:relative;display:block;overflow:hidden;
  border:0;border-radius:var(--r-md);background:var(--ink-2);
  aspect-ratio:5/3;
}
.gallery-frame img{border:0;}
.gallery-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
  opacity:0;transition:opacity .7s var(--ease);
}
.gallery-layer.is-shown{opacity:1;}
/* padded variant: for a mark (e.g. a logo) that should sit inset within the
   frame rather than fill it, so the frame's own background reads as a border
   of breathing room around a smaller image, instead of the image touching
   every edge. */
.gallery-frame.is-padded .gallery-layer{object-fit:contain;padding:10%;box-sizing:border-box;}
/* opt-in: a padded mark (logo) sits on solid white instead of the dark matte */
.gallery--mark-white .gallery-frame.is-padded,
.gallery--mark-white .gallery-frame.is-padded .gallery-layer{background:#fff;}
.gallery-stage figcaption{
  margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--white-faint);text-align:center;
  white-space:normal;overflow-wrap:break-word;
}
@media (max-width:480px){
  .gallery-stage figcaption{font-size:0.56rem;letter-spacing:0.07em;}
}
@media (prefers-reduced-motion:reduce){
  .gallery-layer{transition:none;}
}
.gallery-thumbs{
  display:flex;gap:var(--s2);margin-top:var(--s3);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px;
}
.gallery-thumb{
  flex:0 0 108px;padding:0;line-height:0;cursor:pointer;overflow:hidden;
  border:2px solid var(--rule-soft);border-radius:var(--r-md);background:var(--ink-2);
  opacity:0.5;transition:opacity .35s var(--ease),border-color .35s var(--ease);
}
.gallery-thumb img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.gallery-thumb:hover{opacity:0.85;border-color:var(--red-deep);}
.gallery-thumb:focus-visible{outline:2px solid var(--red-text);outline-offset:2px;opacity:0.85;}
.gallery-thumb.is-active{opacity:1;border-color:var(--red);}
@media (min-width:760px){
  .gallery-thumbs{overflow:visible;flex-wrap:wrap;justify-content:center;}
  .gallery-thumb{flex:0 0 128px;}
}
@media (prefers-reduced-motion:reduce){
  .gallery-thumb{transition:none;}
}
/* sectioned variant: a wide stage showing one screen section at a time,
   with the thumbnails in a vertical filmstrip beside it (stacking above on narrow screens).
   Screens are portrait, so each sits matted on a dark stage. */
.gallery--sectioned .gallery-frame{
  aspect-ratio:16/11;background:var(--ink-1);border:1px solid var(--rule-soft);
}
@media (max-width:759px){
  .gallery--sectioned .gallery-frame{aspect-ratio:4/5;}
}
.gallery--sectioned .gallery-layer{object-fit:contain;object-position:center top;}
.gallery--sectioned .gallery-stage figcaption{white-space:normal;overflow:visible;}
.gallery--sectioned .gallery-thumb img{aspect-ratio:1170/1400;object-fit:cover;object-position:top;}

/* the vertical thumbnail filmstrip: up/down nav buttons top and bottom, a
   scrolling window of ~5 thumbnails between them. On narrow screens it collapses
   to the plain horizontal thumb row (nav buttons hidden). */
.gallery--sectioned .gallery-filmstrip{display:contents;}
.gallery--sectioned .gallery-nav{display:none;}

@media (min-width:760px){
  /* grid: the filmstrip shares row 1 with the stage frame (caption drops to row 2),
     so the strip, nav buttons included, is exactly the frame's height and centres on the image */
  .gallery--sectioned{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:var(--s3);align-items:stretch;}
  .gallery--sectioned .gallery-stage{display:contents;}
  .gallery--sectioned .gallery-frame{grid-column:2;grid-row:1;}
  .gallery--sectioned .gallery-stage figcaption{grid-column:2;grid-row:2;}
  .gallery--sectioned .gallery-filmstrip{
    grid-column:1;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:8px;
  }
  .gallery--sectioned .gallery-thumbs{
    flex-direction:column;flex-wrap:nowrap;margin-top:0;gap:6px;
    flex:0 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    justify-content:flex-start;scrollbar-width:none;
  }
  .gallery--sectioned .gallery-thumbs::-webkit-scrollbar{display:none;}
  .gallery--sectioned .gallery-thumb{flex:0 0 auto;width:100%;}
  .gallery--sectioned .gallery-nav{
    display:grid;place-items:center;width:100%;height:34px;flex:none;
    border:1px solid var(--rule);color:var(--white);cursor:pointer;
    position:relative;isolation:isolate;overflow:hidden;
    transition:border-color .4s var(--ease),color .4s var(--ease),opacity .4s var(--ease);
  }
  .gallery--sectioned .gallery-nav::before{
    content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
    transform:translateY(101%);transition:transform .45s var(--ease);
  }
  .gallery--sectioned .gallery-nav:hover:not(:disabled){border-color:var(--red);}
  .gallery--sectioned .gallery-nav:hover:not(:disabled)::before{transform:translateY(0);}
  .gallery--sectioned .gallery-nav:disabled{opacity:0.3;cursor:default;}
  .gallery--sectioned .gallery-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;}
}
@media (min-width:760px) and (prefers-reduced-motion:reduce){
  .gallery--sectioned .gallery-nav,
  .gallery--sectioned .gallery-nav::before{transition:none;}
}

/* contained variant: landscape screenshots shown whole on the stage (no crop),
   with thumbnails filled edge to edge. Used on the Elle case study. */
.gallery--contain .gallery-frame{
  aspect-ratio:16/9;background:#0b0b0c;border:1px solid var(--rule-soft);
}
.gallery--contain .gallery-layer{object-fit:contain;object-position:center;}
.gallery--contain .gallery-thumb img{aspect-ratio:16/9;object-fit:cover;object-position:top;}

/* brand/logo gallery: thumbnails hold a mix of wide and tall mock-ups (a
   wordmark, signage, stationery, a phone splash screen), so cropping to a
   fixed box cuts pieces off. Show each thumbnail whole instead, letterboxed
   on the frame's own dark background rather than cover-cropped. */
/* phone-screen thumbnails: same 16:9 height as every other strip, but the whole portrait screen fits inside it */
#mobileGallery .gallery-thumb img{aspect-ratio:16/9;object-fit:contain;object-position:center;background:var(--ink-2);}
#brandGallery .gallery-thumb img{aspect-ratio:4/3;object-fit:contain;object-position:center;background:var(--ink-2);}

/* fixed-frame images (gallery-frame.is-cover): the frame keeps its standard fixed
   box, and the image fills it entirely, height-first, cropping the left/right edges
   rather than letterboxing. */
.gallery--contain .gallery-frame.is-cover .gallery-layer{object-fit:cover;object-position:center;}

/* fluid-width stage: set via inline width/height by JS (gallery-frame.is-fluid) so the
   frame keeps the standard height but its width tracks the active image's own aspect
   ratio, leaving no empty space either side of the image. On mobile/tablet this would
   leave the frame visibly narrower than the fixed-frame images beside it in the same
   strip, so below the 760px breakpoint the JS instead lets it run full width with the
   height following the image's own ratio (see sizeFrame in the inline script). */
.gallery--contain .gallery-frame.is-fluid{
  width:auto;max-width:100%;aspect-ratio:auto;margin-inline:auto;
}

/* before / after variant: the stage holds two screens side by side inside one
   matted frame, the old screen left and the redesign right. Used on VivaScore. */
.gallery--compare .gallery-frame{
  aspect-ratio:auto;display:flex;justify-content:center;align-items:center;gap:0;
  padding:clamp(12px,2.4vw,26px);background:var(--ink-1);
  border:1px solid var(--rule-soft);border-radius:var(--r-md);
}
.gallery--compare .compare-pane{
  position:relative;flex:0 1 300px;min-width:0;
  aspect-ratio:47/96;background:var(--ink-2);
  border-radius:var(--r-sm);overflow:hidden;
}
.gallery--compare .compare-pane .gallery-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  opacity:0;transition:opacity .6s var(--ease);
}
.gallery--compare .compare-pane .gallery-layer.is-shown{opacity:1;}
/* the old screens are raw captures with no device frame, so render them 15%
   shorter than the redesigned (framed) screens and keep them vertically centred. */
.gallery--compare .compare-old .gallery-layer{height:85%;top:7.5%;bottom:auto;}
@media (prefers-reduced-motion:reduce){
  .gallery--compare .compare-pane .gallery-layer{transition:none;}
}
/* centre gutter: a vertical hairline with the Before / After labels
   sitting either side of it, vertically centred, pushing the two screens apart. */
.gallery--compare .compare-divider{
  position:relative;z-index:3;flex:0 0 clamp(78px,14vw,150px);align-self:stretch;
}
.gallery--compare .compare-divider::before{
  content:"";position:absolute;left:50%;top:14%;bottom:14%;width:1px;
  background:var(--rule);transform:translateX(-50%);
}
.gallery--compare .compare-label{
  position:absolute;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:var(--t-cap-58);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-faint);white-space:nowrap;background:var(--ink-1);padding:7px 0;
}
.gallery--compare .compare-label:first-child{right:50%;padding-right:10px;}
.gallery--compare .compare-label:last-child{left:50%;padding:7px 10px;background:var(--red);color:var(--white);}
@media (max-width:520px){
  .gallery--compare .compare-label{font-size:0.5rem;letter-spacing:0.1em;}
  .gallery--compare .compare-label:first-child{padding-right:7px;}
  .gallery--compare .compare-label:last-child{padding:7px;}
}
.gallery--compare .gallery-thumb img{aspect-ratio:304/190;object-fit:cover;object-position:top;}

/* paginated thumbnail strip: added by JS only when a gallery has more than 7
   thumbnails. Seven show at a time; the arrows + rail scroll through the rest. */
.gallery-thumbs.is-navd{
  flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gallery-thumbs.is-navd::-webkit-scrollbar{display:none;}
.gallery-thumbnav{
  display:none;align-items:center;gap:var(--s3);margin-top:var(--s3);
}
.gallery-thumbs.is-navd + .gallery-thumbnav{display:flex;}
.gallery-thumbnav .reel-rail{flex:1;}
@media (min-width:760px){
  .gallery-thumbs.is-navd{
    max-width:calc(128px * 6 + var(--s2) * 5);margin-inline:auto;justify-content:flex-start;
  }
  .gallery-thumbs.is-navd + .gallery-thumbnav{
    max-width:calc(128px * 6 + var(--s2) * 5);margin-inline:auto;
  }
}

/* ---------- numbered journey / step strip ---------- */
.journey{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.12em;text-transform:uppercase;
}
.journey span,.journey a{color:var(--white-dim);border:1px solid var(--red);padding:0.55em 0.9em;
  transition:color .4s var(--ease);}
.journey a{text-decoration:none;display:inline-block;}
.journey span:hover,.journey a:hover,.journey a:focus-visible{color:var(--red-text);}
.journey i{color:var(--red-deep);font-style:normal;}
#iterative h2{color:var(--red);}


/* ---------- symptom / question list ---------- */
.symp{list-style:none;border-top:1px solid var(--rule-soft);margin-top:var(--s4);}
.symp li{
  border-bottom:1px solid var(--rule-soft);padding-block:calc(var(--s3) * 0.9);
  font-family:var(--serif);font-size:1.02rem;line-height:1.44;color:var(--white-dim);
  display:flex;gap:var(--s3);align-items:baseline;
  transition:color .4s var(--ease);
}
.symp li::before{
  content:"";flex:none;width:16px;height:1px;background:var(--rule);
  transform:translateY(-0.35em);transition:background .4s var(--ease),width .4s var(--ease);
}
.symp li:hover{color:var(--white);}
.symp li:hover::before{background:var(--red);width:24px;}

/* symp variant: a heading + smaller supporting line per item, same rollover */
.symp-detail li{align-items:flex-start;}
/* what-we-make tab panels: the list is ruled between items only, with no
   line above the first or below the last */
.tab-panel .symp-detail{border-top:none;}
.tab-panel .symp-detail li:last-child{border-bottom:none;}
.symp-detail li::before{margin-top:0.7em;transform:none;}
.symp-detail .symp-body{display:block;}
.symp-detail .symp-q{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.44;color:var(--white);transition:color .4s var(--ease);}
.symp-detail .symp-a{display:block;margin-top:0.4em;font-family:var(--serif);font-size:0.85rem;line-height:1.6;color:var(--white-dim);transition:color .4s var(--ease);}
.symp-detail li:hover .symp-q{color:var(--red-text);}
.symp-detail li:hover .symp-a{color:var(--white);}

/* pull quote flush left, no rule/indent — for placement next to unindented body copy */
.pull-flush{padding-left:0;}
.pull-flush::before{display:none;}
/* what-we-make tab panels: tighter gap between the header and the label under it */
.tab-panel .pull-flush{margin-bottom:calc(var(--s6) * 0.7);}

/* ---------- two-column feature split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);}}
.split.wide-left{grid-template-columns:1fr;}
@media (min-width:900px){.split.wide-left{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}}

/* ---------- panel ---------- */
.panel{
  background:var(--ink-2);border:1px solid var(--rule-soft);border-radius:var(--r-md);
  padding:var(--s5) var(--s4);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.panel:hover{border-color:var(--rule);background:var(--ink-3);}
.panel .k{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--s3);
}
.panel h3{margin-bottom:var(--s3);}
.panel p{font-family:var(--serif);font-size:0.94rem;line-height:1.8;color:var(--white-dim);}

/* ---------- capability / discipline grid ---------- */
.dgrid{display:grid;grid-template-columns:1fr;gap:clamp(0.8rem,1.5vw,1.2rem);}
@media (min-width:700px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1100px){.dgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* three cards, one line — skips the awkward 2-up tablet stage other .dgrid.c3
   instances use, jumping straight from a single mobile column to all three */
@media (min-width:700px){.dgrid.trio-grid{grid-template-columns:1fr;}}
@media (min-width:860px){.dgrid.trio-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* ---------- pager: previous / next project ---------- */
.pager{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule-soft);
}
@media (min-width:760px){.pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.pager a{
  padding:var(--s5) 0;position:relative;
  transition:background .5s var(--ease);
  display:flex;flex-direction:column;gap:var(--s2);
}
@media (min-width:760px){
  .pager a{padding-inline:var(--s4);}
  .pager a + a{border-left:1px solid var(--rule-soft);text-align:right;align-items:flex-end;}
  .pager a:first-child{padding-left:0;}
  .pager a:last-child{padding-right:0;}
}
@media (max-width:759px){
  .pager a + a{border-top:1px solid var(--rule-soft);text-align:right;align-items:flex-end;}
}
.pager a:hover{background:var(--ink-2);}
.pager .k{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--white-faint);transition:color .4s var(--ease);
}
.pager a:hover .k{color:var(--red-text);}
.pager .t{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1;color:var(--white);}

/* Hyphen case study — no hover fill on the pager; the project title fades
   white -> red on hover, matching the Previous/Next label. */
.pager--plain a{transition:none;}
.pager--plain a:hover{background:none;}
.pager--plain .t{transition:color .4s var(--ease);}
.pager--plain a:hover .t{color:var(--red-text);}

/* ---------- closing CTA band (lighter than the homepage .cta, but same
   centred treatment as the homepage's "Start a conversation" section) ---------- */
.cta-band{
  border-top:1px solid var(--rule-soft);
  padding-block:clamp(4.5rem,11vh,8rem);
  position:relative;overflow:hidden;
  background:var(--ink);
  text-align:center;
}
.cta-band > .wrap{position:relative;z-index:2;}
.cta-band .plate{color:var(--white-dim);}
.cta-band .plate .n{color:var(--white);}
.cta-band h2{
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;
  max-width:20ch;margin-inline:auto;margin-bottom:var(--s3);
}
.cta-band .figure{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.12;
  color:var(--red-text);margin-bottom:var(--s4);
}
.cta-band .lead{margin-inline:auto;text-align:center;max-width:46ch;margin-bottom:var(--s5);}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:center;}

/* ---------- related links ---------- */
.rel{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  border-top:1px solid var(--rule-soft);padding-top:var(--s4);margin-top:var(--s6);
}
/* About page: no keyline above this row, sits closer to the cards above */
.rel.rel-plain{border-top:none;padding-top:0;margin-top:var(--s5);}

/* ---------- what-we-do section subnav (band directly below sub-page hero) ---------- */
.band.wwd-subnav-band{padding-block:var(--s4);border-bottom:1px solid var(--rule-soft);}
.wwd-subnav{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
}
.wwd-subnav .hl{color:var(--white-faint);}
.wwd-subnav .hl[aria-current="page"]{
  color:var(--red-text);pointer-events:none;
}
.wwd-subnav .hl[aria-current="page"]::after{transform:scaleX(1);}
.wwd-subnav .hl[aria-current="page"] .ar{display:none;}

/* ---------- what-we-do capability blocks ---------- */
.wwd-cap{padding-bottom:calc(var(--s7) * 0.6);}   /* space before the hairline */
.wwd-cap:last-child{padding-bottom:var(--s6);}
.wwd-cap + .wwd-cap{border-top:1px solid var(--rule-soft);padding-top:calc(var(--s7) * 0.7);}
.wwd-cap h2{max-width:20ch;margin-bottom:var(--s4);}   /* heading -> description gap */
.cap-research-h .brk-sm{display:none;}
@media (min-width:641px){
  h2.cap-research-h{max-width:26ch;}
}
@media (max-width:640px){
  h2.cap-research-h{max-width:none;font-size:calc(var(--t-h2) * 0.88);}
  .cap-research-h .brk-lg{display:none;}
  .cap-research-h .brk-sm{display:inline;}
}
#capabilities{padding-bottom:calc(var(--section) * 0.4);}
#capabilities:has(.wwd-cap){padding-bottom:var(--s4);}   /* wwd-cap already carries its own bottom space */
#capabilities .sec-head + .wwd-cap{margin-top:calc(var(--s7) * 0.5);}   /* intro -> first capability */

/* how-we-work: tighter stage blocks, capability label + chip on one line */
#stages{padding-bottom:var(--s4);}
#stages .wwd-cap{padding-bottom:var(--s5);}
#stages .wwd-cap:last-child{padding-bottom:0;}
#stages .wwd-cap + .wwd-cap{padding-top:var(--s5);}
#stages .sec-head + .wwd-cap{margin-top:var(--s5);}
#stages .wwd-cap h2{margin-bottom:var(--s3);}
#stages .stage-cap{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s4);}
#stages .stage-cap .wwd-help{margin:0;}
#stages .stage-cap .chips{margin:0;}
#stages .wwd-outcome{margin-top:var(--s4);}

/* how-we-work: slim "validate & test" connector between stage blocks */
#stages .stage-connector{padding-bottom:var(--s5);}
#stages .wwd-cap + .stage-connector{border-top:1px solid var(--rule-soft);padding-top:var(--s5);}
#stages .stage-connector + .wwd-cap{border-top:1px solid var(--rule-soft);padding-top:var(--s5);}
#stages .stage-connector .plate .n{font-size:1.1em;}
#stages .stage-connector .wwd-help{margin-top:0;}
#stages .stage-connector p.prose{color:var(--white-dim);}
#stages .stage-connector p.prose{color:var(--white-dim);}

/* how-we-work: section heading moved into the narrow left rail */
#iterative .rail-label h2,
#capabilities .rail-label h2,
#challenge .rail-label h2{
  font-size:clamp(2.4rem,3.4vw,3rem);
  line-height:1.04;letter-spacing:-0.02em;margin:0;overflow-wrap:break-word;
}
@media (max-width:899px){
  #iterative .rail-label h2,
  #capabilities .rail-label h2,
  #challenge .rail-label h2{font-size:var(--t-h2);}
}

/* journey strips sit close under the text they follow */
.rail-journey{margin-top:var(--s4);}
.rail-journey .journey{margin-top:0;}

/* ---- "Our capabilities" section: tighter top spacing, white journey keylines ---- */
#capabilities{padding-top:var(--s5);}
#capabilities .prose + .rich{margin-top:var(--s4);}
#capabilities .rich li{padding-left:var(--s3);}
#capabilities .journey span,#capabilities .journey a{border-color:var(--white);}
#capabilities .journey span:hover,#capabilities .journey a:hover{color:var(--white);}
#capabilities .journey i{color:var(--white);}
.wwd-help{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red-text);display:block;margin-top:var(--s4);margin-bottom:var(--s3);
}
.wwd-outcome{
  border-left:2px solid var(--red);padding-left:var(--s3);
  margin-top:var(--s4);max-width:54ch;
}
.wwd-outcome .k{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red-text);display:block;margin-bottom:0.35em;
}
.wwd-outcome .t{font-family:var(--serif);font-size:0.98rem;line-height:1.55;color:var(--white);}
#capabilities .wwd-outcome{max-width:42ch;}   /* 22% narrower than base 54ch, so it wraps to two lines */

/* what-we-do — "why it matters" list: pronounced rollover */
#why .symp{border-top-color:var(--rule);}
#why .symp li{transition:color .35s var(--ease),transform .35s var(--ease);}
#why .symp li::before{width:20px;transition:width .35s var(--ease),background .35s var(--ease);}
#why .symp li:hover{transform:translateX(10px);color:var(--white);}
#why .symp li:hover::before{width:44px;background:var(--red);}

/* ---------- form ---------- */
.form{display:grid;gap:var(--s4);max-width:44rem;}
.form[hidden]{display:none;}
/* enquiry sent: replaces the form, red keyline, two ways forward */
.panel.done{border-color:var(--red);margin-bottom:var(--s4);max-width:44rem;padding:var(--s6) var(--s5);}
.panel.done[hidden]{display:none;}
.panel.done h3{font-size:var(--t-h2);margin-bottom:var(--s3);}
.panel.done p{max-width:46ch;}
.done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin-top:var(--s5);}
.done-again{
  font-family:var(--mono);font-size:var(--t-cap-86);letter-spacing:0.13em;text-transform:uppercase;
  color:var(--white-faint);padding:0.9em 0;min-height:44px;
  border-bottom:1px solid var(--rule-soft);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.done-again:hover,.done-again:focus-visible{color:var(--white);border-color:var(--red);}
@media (max-width:640px){.panel.done{padding:var(--s5) var(--s4);}}
.field{display:flex;flex-direction:column;gap:var(--s2);}
.field label{
  font-family:var(--mono);font-size:var(--t-cap-78);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-faint);
}
.field input,.field textarea,.field select{
  font-family:var(--serif);font-size:1rem;line-height:1.6;
  background:var(--ink-2);color:var(--white);
  border:1px solid var(--rule-soft);border-radius:var(--r-sm);
  padding:0.95em 1.05em;width:100%;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.field textarea{min-height:9rem;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--white-quiet);}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--rule);}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--red);background:var(--ink-3);
}
/* completed fields keep the red keyline (matching the pill selected state) even after blur */
.field input:not(:placeholder-shown),.field textarea:not(:placeholder-shown){
  border-color:var(--red);
}
/* stop the browser's autofill background (light blue) from overriding the dark field style */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 100px var(--ink-2) inset;
  box-shadow:0 0 0 100px var(--ink-2) inset;
  border-color:var(--red);
  transition:background-color 999999s ease-in-out 0s;
}
.field-row{display:grid;grid-template-columns:1fr;gap:var(--s4);}
@media (min-width:640px){.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.hint{font-family:var(--mono);font-size:var(--t-cap-62);letter-spacing:0.1em;color:var(--white-quiet);text-transform:uppercase;}
.field .hint{font-size:0.68rem;}

/* radio pills — the qualification question */
.pills{display:flex;flex-wrap:wrap;gap:var(--s2);}
.pill{position:relative;}
.pill input{position:absolute;opacity:0;width:0;height:0;}
.pill span{
  display:inline-block;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-cap-78);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white-dim);border:1px solid var(--rule-soft);padding:0.72em 1.05em;
  border-radius:var(--r-sm);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.pill span:hover{border-color:var(--rule);color:var(--white);}
.pill input:checked + span{border-color:var(--red);color:var(--white);background:rgba(206,32,41,0.12);}
.pill input:focus-visible + span{outline:2px solid var(--red-bright);outline-offset:3px;}

/* start-a-project only: default keyline was too faint against the dark background */
#enquiry .pill span{border-color:#3A3A42;}
#enquiry .pill span:hover{border-color:#4C4C56;}
#enquiry .pill input:checked + span{border-color:var(--red);}

.form-note{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white-quiet);line-height:1.7;
}

/* ---------- footer (extended, multi-column) ---------- */
.foot-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s5);
  /* top padding trimmed ~40% so the footer content sits closer to the rule */
  padding-block:calc(var(--s6) * 0.6) var(--s5);
}
/* mobile: keep the footer short by sitting the two link lists side by side,
   brand block and Connect column stay full-width above/below them */
@media (max-width:759px){
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:var(--s5);}
  .foot-brand,.foot-connect{grid-column:1 / -1;}
}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s6);}}
@media (min-width:1080px){.foot-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}}
.foot-col h4{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--white-faint);font-weight:400;margin-bottom:var(--s3);
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2);}
.foot-col a{
  font-family:var(--sans);font-size:0.9rem;color:var(--white-dim);
  transition:color .35s var(--ease);display:inline-flex;align-items:center;min-height:24px;
}
.foot-col a:hover{color:var(--red-text);}
/* footer email: static grey underline, red keyline draws in on hover
   (same as the info@origin-interactive links elsewhere) */
.foot-col a[href^="mailto:"]{position:relative;}
.foot-col a[href^="mailto:"]:hover{color:var(--white-dim);}
.foot-col a[href^="mailto:"]::before{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--rule);
}
.foot-col a[href^="mailto:"]::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.foot-col a[href^="mailto:"]:hover::after,
.foot-col a[href^="mailto:"]:focus-visible::after{transform:scaleX(1);}
.foot-brand p{
  font-family:var(--serif);font-size:0.94rem;line-height:1.75;color:var(--white-dim);
  width:85%;max-width:28.9ch;margin-top:var(--s3);
}
.foot-brand .foot-mark{margin-bottom:var(--s2);}

/* tightened link lists that bloom into a keylined button on hover —
   the button box is an absolutely-positioned pseudo so it never
   affects the list's own flow/spacing, even while animating in */
.foot-nav ul{gap:var(--s1);}
.foot-nav a{position:relative;isolation:isolate;min-height:0;transition:color .35s var(--ease);}
.foot-nav a::before{
  content:"";position:absolute;left:-0.9em;right:-0.9em;
  top:50%;height:calc(100% + 4px);z-index:-1;
  background:var(--red);border:1px solid var(--red);
  /* hover: red wipes in left to right. leave: box stays full and simply fades out,
     then snaps back to zero width once invisible (transform delay = fade time) */
  opacity:0;transform:translateY(-50%) scaleX(0);transform-origin:left center;
  transition:opacity .3s var(--ease),transform 0s linear .3s;
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--white);}
.foot-nav a:hover::before,.foot-nav a:focus-visible::before{
  opacity:1;transform:translateY(-50%) scaleX(1);
  transition:opacity 0s,transform .4s var(--ease);
}
@media (prefers-reduced-motion:reduce){.foot-nav a::before{transition:none;}}

/* "Start a project" footer link — identical treatment to the header's nav-cta button */
.foot-col a.foot-btn{
  font-family:var(--mono);font-size:var(--t-cap-74);letter-spacing:0.11em;text-transform:uppercase;
  border:1px solid var(--rule);padding:0.7em 1.3em;color:var(--white);white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;min-height:0;
  transition:border-color .4s var(--ease),color .4s var(--ease);
  margin-bottom:var(--s1);
}
.foot-btn::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.foot-col a.foot-btn:hover{border-color:var(--red);color:var(--white);}
.foot-btn:hover::before{transform:translateY(0);}
.foot-bar{
  border-top:1px solid var(--rule-soft);padding-block:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-cap-65);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--white-quiet);
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:var(--gutter);top:-4rem;z-index:200;
  background:var(--red);color:var(--white);padding:0.8em 1.2em;
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.12em;text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip:focus{top:1rem;}


/* ============================================================
   LAYER 4 — PAGE COMPONENTS (homepage sections 01-11)
   ============================================================ */
/* ============================================================
   ORIGIN — v4  "The Baskerville Plate"
   Dark plate, crisp white type, red as a second ink run.
   ============================================================ */

:root{
  /* --- ink --- */
  --ink:#09090A;
  --ink-2:#101012;
  --ink-3:#161619;
  --rule:#34343B;
  --rule-soft:#242429;

  /* --- paper --- */
  --white:#FBFBFC;
  --white-dim:#A2A2AB;
  --white-faint:#7E7E88;   /* 4.5:1 on --ink */
  --white-quiet:#6A6A74;
  --white-ghost:#2E2E35;   /* decorative letterforms only */

  /* --- second ink --- */
  --red:#CE2029;          /* fills, rules, graphics */
  --red-text:#EC3A44;     /* red type on ink + raised panels — 4.5:1+ */
  --red-bright:#E8323C;
  --red-deep:#78121A;
  --trust:#4FA57E;        /* trust green: type on ink, 7:1+ */

  /* --- type --- */
  --display:'Baskervville',Baskerville,'Baskerville Old Face','Times New Roman',serif;
  --serif:'Libre Baskerville',Baskerville,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --t-display:clamp(3.4rem,9.4vw,9rem);
  --t-h1:clamp(2.5rem,6.4vw,5.4rem);
  --t-h2:clamp(1.95rem,4.4vw,3.5rem);
  --t-h3:clamp(1.2rem,2vw,1.75rem);
  --t-lead:clamp(1.08rem,1.55vw,1.35rem);
  --t-body:clamp(1.05rem,1.1vw,1.15rem);
  /* mono/caption scale — every size the mono voice (nav, labels, metadata,
     captions) renders at, smallest to largest. Values unchanged from before
     tokenizing; --t-cap is the most-used step (nav rail labels, .plate). */
  --t-cap-50:0.5rem;
  --t-cap-58:0.58rem;
  --t-cap-60:0.6rem;
  --t-cap-62:0.62rem;
  --t-cap-63:0.63rem;
  --t-cap-64:0.64rem;
  --t-cap-65:0.65rem;
  --t-cap-66:0.66rem;
  --t-cap-68:0.68rem;
  --t-cap:0.7rem;
  --t-cap-72:0.72rem;
  --t-cap-74:0.74rem;
  --t-cap-75:0.75rem;
  --t-cap-76:0.76rem;
  --t-cap-78:0.78rem;
  --t-cap-82:0.82rem;
  --t-cap-86:0.86rem;
  /* mono sizes set in absolute px — used inside inline SVG (logo mark,
     ring/reach graphics) where sizing isn't tied to the root rem scale */
  --t-cap-svg-7:7px;
  --t-cap-svg-11:11px;
  --t-cap-svg-13:13px;

  /* --- space: macro + micro --- */
  --s1:0.375rem;
  --s2:0.75rem;
  --s3:1.25rem;
  --s4:2rem;
  --s5:2.75rem;
  --s6:4rem;
  --s7:6rem;
  --section:clamp(4.5rem,9vh,8rem);
  --gutter:clamp(1.4rem,5vw,4.5rem);
  --maxw:1360px;

  --r-sm:6px;
  --r-md:14px;
  --r-lg:20px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* mobile only: bump readability on the base body copy, the H1 headline
   and the lead/supporting paragraph beneath it — nothing else */
@media (max-width:759px){
  :root{
    /* phones in bright light: the darkest greys were close to invisible, so
       key lines and quiet text step up (mobile only, desktop/tablet unchanged) */
    --rule-soft:#4A4A52;
    --rule:#5E5E68;
    --white-quiet:#8C8C96;
    --white-faint:#9696A0;
    --t-h1:clamp(2.6rem,13.65vw,3.2rem);   /* was 2.9rem: page headings a touch larger on phones */
    --t-lead:clamp(1.22rem,1.55vw,1.35rem);
    --t-body:clamp(1.15rem,1.1vw,1.15rem);
    /* h3 (e.g. the Understand/Define/Design/Deliver step headings) was
       reading too small on mobile — matched to the h2 size, mobile only */
    --t-h3:clamp(1.95rem,4.4vw,3.5rem);
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--red);color:var(--white);}

:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:4px;
  border-radius:1px;
}

/* ---------- type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:0.92;
  letter-spacing:-0.018em;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:0.98;letter-spacing:-0.015em;}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);line-height:1.15;}
.ital{font-style:italic;}
.red{color:var(--red-text);}
.white{color:var(--white);}

.prose{font-family:var(--serif);font-size:var(--t-body);line-height:1.85;color:var(--white-dim);}
.prose + .prose{margin-top:var(--s3);}
.prose strong{color:var(--white);font-weight:400;}
.prose em{font-style:italic;color:var(--white);}

/* ---------- quiet editorial note ---------- */
.note{
  font-family:var(--mono);font-size:var(--t-cap-68);line-height:1.9;
  letter-spacing:0.04em;color:var(--white-quiet);max-width:66ch;
  padding-left:var(--s3);border-left:1px solid var(--rule-soft);
}
.lead{font-family:var(--serif);font-size:var(--t-lead);line-height:1.7;color:var(--white-dim);max-width:38ch;}
.measure{max-width:58ch;}

/* plate label — the mono voice */
.plate{
  font-family:var(--mono);
  font-size:var(--t-cap-72);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--white-faint);
  display:flex;
  align-items:baseline;
  gap:0.9em;
  flex-wrap:wrap;
}
.plate .n{white-space:nowrap;}
.plate .n{color:var(--red-text);}
.plate::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
  transform:translateY(-0.28em);
  min-width:2rem;
}
.plate.no-rule::after{display:none;}
@media (max-width:720px){
  .plate{display:block;}
  .plate::after{display:none;}
  .plate .n{display:inline;margin-right:0.7em;}
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.band{padding-block:var(--section);position:relative;}
/* the next section (What we believe) brings its own full top padding and no
   keyline, so this section doesn't need a second full pad beneath it */
#exist{padding-bottom:var(--section);}
/* About page "Origin today": trim the deep gap between the stats block and
   the keyline of the next section (which has its own full top padding) */
.band.about{padding-bottom:var(--s5);}
.band.hairline::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  width:calc(100% - 2 * var(--gutter));max-width:calc(var(--maxw) - 2 * var(--gutter));
  margin-inline:auto;background:var(--rule-soft);
}
/* home page: "Why now" divider (right below the hero's logo ticker) runs
   full-bleed edge to edge instead of the site's usual content-width
   hairline */
#shift.band.hairline::before{
  left:50%;right:auto;width:100vw;max-width:none;margin-inline:0;
  transform:translateX(-50%);
  background:var(--rule-soft);
}

/* about page: full-bleed keylines above and below the "We are independent" photo band */
.people-band.hairline::before,.band.hairline.hairline-full::before{
  left:50%;right:auto;width:100vw;max-width:none;margin-inline:0;
  transform:translateX(-50%);
}
.people-band.hairline::before{z-index:3;}
/* about page: full-bleed keyline between "Why we exist" and the statement */
.statement.hairline-full{position:relative;}
.statement.hairline-full::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-soft);
}

/* the rail grid: narrow label column, wide content, breathing room right */
.rail{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s5) var(--gutter);
}
@media (min-width:900px){
  .rail{grid-template-columns:14rem minmax(0,1fr);gap:0 var(--s6);}
  .rail > .rail-label{grid-column:1;}
  .rail > .rail-body{grid-column:2;}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease);}
.rv.on{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;}
.rv.d2{transition-delay:.16s;}
.rv.d3{transition-delay:.24s;}
.rv.d4{transition-delay:.32s;}

/* ============================================================
   CHROME — progress + nav
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:1px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--red);z-index:120;
}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background 1.5s ease-in-out,border-color 1.5s ease-in-out,backdrop-filter 1.5s ease-in-out;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  /* frosted glass: still blurred, but light enough to let the page show through */
  background:rgba(9,9,10,0.42);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:var(--s3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.mark{
  display:inline-flex;align-items:center;
  min-height:40px;padding-block:2px;
  transition:opacity .4s var(--ease);
}
.mark:hover{opacity:0.82;}
.mark img{height:40px;width:auto;display:block;}

.nav-links{display:none;align-items:center;gap:var(--s4);}
@media (min-width:1000px){.nav-links{display:flex;}}
.nav-links a{
  font-family:var(--mono);font-size:var(--t-cap-74);letter-spacing:0.11em;text-transform:uppercase;
  color:var(--white-dim);position:relative;padding-block:4px;transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav-links a:hover,.nav-links a.current{color:var(--white);}
.nav-links a:hover::after,.nav-links a.current::after{transform:scaleX(1);transform-origin:0 50%;}

.nav-cta{
  font-family:var(--mono);font-size:var(--t-cap-74);letter-spacing:0.11em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.3);padding:0.7em 1.3em;color:var(--white);
  position:relative;overflow:hidden;isolation:isolate;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.nav-cta::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.nav-cta:hover{border-color:var(--red);}
.nav-cta:hover::before{transform:translateY(0);}

@media (max-width:999px){.nav-cta{display:none;}}
.burger{display:flex;flex-direction:column;gap:5px;padding:8px;margin-right:-8px;}
@media (min-width:1000px){.burger{display:none;}}
.burger i{display:block;width:22px;height:1px;background:var(--white);transition:transform .45s var(--ease),opacity .3s var(--ease);}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .burger i:nth-child(2){opacity:0;}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s7) var(--gutter) var(--s6);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto;}
.menu a{
  font-family:var(--display);font-size:clamp(2.2rem,10vw,3.6rem);line-height:1.25;
  color:var(--white);opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
  display:flex;align-items:baseline;gap:0.6em;
}
.menu a .mn{font-family:var(--mono);font-size:var(--t-cap);color:var(--red-text);letter-spacing:0.1em;}
body.menu-open .menu a{opacity:1;transform:none;}
body.menu-open .menu a:nth-child(1){transition-delay:.16s;}
body.menu-open .menu a:nth-child(2){transition-delay:.23s;}
body.menu-open .menu a:nth-child(3){transition-delay:.30s;}
body.menu-open .menu a:nth-child(4){transition-delay:.37s;}
body.menu-open .menu a:nth-child(5){transition-delay:.44s;}
.menu a:hover{color:var(--red-text);}

/* ============================================================
   01 — HERO.  behaviour: a three-depth hairline scene, parallaxed by pointer + scroll
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex;align-items:stretch;
  padding-block:6rem var(--s5);
  position:relative;overflow:hidden;
  clip-path:inset(0); /* clips the fixed (pinned) plate to the hero box */
}
.hero-content{display:flex;flex-direction:column;}
/* flex:1 + justify-content:center centers the lede in whatever space is
   actually left above .hero-logos, however much margin that element has —
   margin:auto here would split space evenly within hero-content's own
   padding box, which drifts out of sync with the nav/logo-row landmarks
   the moment either one's spacing changes */
.hero-lede{flex:1;display:flex;flex-direction:column;justify-content:center;}
.hero-lede .hero-ctas{margin-bottom:0;}

/* mobile: tighten the top gap so the heading/copy/CTA aren't pushed too
   far down. Background photo and .hero's own height (100svh) are
   untouched, only the inner content spacing changes. The logo strip
   (a single scrolling row) stays visible — it doesn't crowd like the
   old text ticker did. */
@media (max-width:759px){
  .hero-content{padding-top:3rem;}
  .hero-logos{margin-top:var(--s4);}
}

/* a photographic plate, strictly black/white/grey — no second colour run.
   A faint ghost echo gives it depth, a shutter wipe reveals it on load,
   then it sits quietly under the wireframe scene. */
.hero-photo{
  position:fixed;top:0;left:0;right:0;height:var(--hero-h,100svh);pointer-events:none;overflow:hidden;
  will-change:opacity;
  opacity:0;
  transition:opacity 2s var(--ease) .2s;
}
.hero.lit .hero-photo{opacity:1;}
.hero-photo .ph{position:absolute;inset:0;}
.hero-photo .ph img{
  width:100%;height:100%;object-fit:cover;object-position:72% 34%;
}
/* echo: the same plate, softened and offset a hair — a faint double-exposure, not a colour */
.hero-photo .ph-echo{
  opacity:0.16;mix-blend-mode:screen;
  transform:translate(7px,-5px) scale(1.02);
  transition:opacity 1.4s var(--ease) .5s;
  filter:blur(1.5px);
}
.hero.lit .hero-photo .ph-echo{opacity:0.12;}
.hero-photo .ph-echo img{filter:grayscale(1) contrast(1.1) brightness(0.9);}
/* black run: the base plate — the moon photograph itself, kept dark but legible */
.hero-photo .ph-black img{
  filter:grayscale(1) contrast(1.18) brightness(0.62);
  transform:scale(1.04);
}
.hero-photo .ph-black{opacity:0.96;}
/* slow Ken Burns: the plate pushes in and drifts, then eases back, forever.
   Both layers run the same keyframes so the echo stays locked to the base.
   Starts at the base plate's own 1.04 scale; the hero's overflow:hidden and
   the plate's overscan keep the edges covered at full zoom. */
.hero-photo .ph img{
  animation:heroKenBurns 12s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  from{transform:scale(1.04) translate(0,0);}
  to  {transform:scale(1.14) translate(-1.5%,-1%);}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo .ph img{animation:none;}
}
@media (max-width:640px){
  .hero-photo .ph img{object-position:88% 28%;}
}
@media (max-width:640px){
  .cta-photo img{object-position:74% 24%;}
}
/* fine scan texture — nods to the screen inside the photo itself */
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 1px, transparent 3px);
  opacity:0.5;mix-blend-mode:multiply;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(115deg, rgba(9,9,10,0.86) 0%, rgba(9,9,10,0.7) 28%, rgba(9,9,10,0.28) 56%, transparent 76%);
}
/* bottom shade lives on the hero so it tracks the hero's bottom edge */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 100%, rgba(9,9,10,0.75) 0%, transparent 42%);
}

/* the scene: hairline artefacts of digital product work, in three depths */
.hero-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.hero-scene svg{width:100%;height:100%;display:block;}
.hero-scene .dz{will-change:transform;}

/* synthetic starfield, layered over the photo's own sky to sell depth —
   each layer parallaxes at a different rate (see .dz handling in JS) so
   scrolling reads as moving *through* the scene, not just past a flat image */
.star-layer{position:absolute;inset:-25% -20%;background-repeat:repeat;}
.star-layer-1{
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 38%, #fff, transparent 60%),
    radial-gradient(1px 1px at 41% 6%, #fff, transparent 60%),
    radial-gradient(1px 1px at 58% 27%, #fff, transparent 60%),
    radial-gradient(1px 1px at 73% 52%, #fff, transparent 60%),
    radial-gradient(1px 1px at 88% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 12% 68%, #fff, transparent 60%),
    radial-gradient(1px 1px at 33% 84%, #fff, transparent 60%),
    radial-gradient(1px 1px at 66% 91%, #fff, transparent 60%),
    radial-gradient(1px 1px at 95% 73%, #fff, transparent 60%);
  background-size:220px 220px;
  opacity:0.35;
}
.star-layer-2{
  background-image:
    radial-gradient(1.3px 1.3px at 15% 22%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 37% 9%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 48%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 69% 64%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 84% 31%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 79%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 93%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 93% 88%, #fff, transparent 60%);
  background-size:300px 300px;
  opacity:0.5;
}
.star-layer-3{
  background-image:
    radial-gradient(1.8px 1.8px at 19% 30%, #fff, transparent 65%),
    radial-gradient(1.6px 1.6px at 47% 14%, #fff, transparent 65%),
    radial-gradient(2px 2px at 63% 57%, #fff, transparent 65%),
    radial-gradient(1.6px 1.6px at 81% 42%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 9% 61%, #fff, transparent 65%),
    radial-gradient(1.6px 1.6px at 36% 87%, #fff, transparent 65%);
  background-size:380px 380px;
  opacity:0.6;
}
.hero-scene .ln{fill:none;stroke:var(--white);stroke-width:1;vector-effect:non-scaling-stroke;}
.hero-scene .nd{fill:var(--white);}
.hero-scene .nd-red{fill:var(--red);}
.hero-scene .ln-red{fill:none;stroke:var(--red);stroke-width:1.2;vector-effect:non-scaling-stroke;}
.hero-scene .sweep{
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  animation:draw 2.6s var(--ease) .5s forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
/* readability: sink the scene behind the headline, lift the edges */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 55%, rgba(9,9,10,0.94) 0%, rgba(9,9,10,0.72) 38%, transparent 68%),
    linear-gradient(to top, var(--ink) 2%, transparent 26%);
}
.grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:0.035;mix-blend-mode:screen;
}

.hero-content{position:relative;z-index:2;width:100%;}
.hero h1{
  font-size:var(--t-display);
  line-height:0.94;
  letter-spacing:-0.025em;
  margin-block:var(--s4) var(--s4);
  max-width:16ch;
  /* the negative margin on the last .ln (below) compensates its own
     padding for descender clearance — without this, that negative
     margin collapses into h1's own margin-bottom and eats the gap
     before the paragraph that follows. 1px of padding blocks the
     parent/child collapse without adding a visible gap. */
  padding-bottom:1px;
}
.hero .ln{
  display:block;overflow:hidden;
  padding-bottom:0.36em;margin-bottom:-0.36em;
  padding-left:0.16em;margin-left:-0.16em;
}
.hero .ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease);
}
.hero.lit .ln > span{transform:translateY(0);}
.hero.lit .ln:nth-child(2) > span{transition-delay:.11s;}
.hero .ital{color:var(--white);}
/* the red hot-press underline under 'value' */
.uline{position:relative;display:inline-block;}
.uline::after{
  content:"";position:absolute;left:0.02em;right:0.06em;bottom:0.06em;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--ease) .9s;
}
.hero.lit .uline::after{transform:scaleX(1);}
.hero .display .hero-accent{color:var(--red-text);}

/* .stmt — a full-sentence hero headline: smaller than the 2-word display
   treatment, wider measure, tighter leading. Used on the homepage. */
.hero h1.stmt{
  font-size:clamp(2.6rem,8vw,6.6rem);
  line-height:1.02;
  letter-spacing:-0.021em;
  max-width:20ch;
  margin-top:0;
}
.hero h1.stmt .ital{display:inline;}
@media (max-width:600px){.hero h1.stmt{font-size:clamp(2.4rem,11.35vw,3.7rem);line-height:1.08;}}

.hero-sub{max-width:46ch;margin-bottom:var(--s5);}
/* mobile: drop the hero paragraph's first sentence to simplify the page,
   keeping only "We design and build experiences..." */
@media (max-width:759px){.hero-sub-drop{display:none;}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s6);}
/* mobile-only shorter label so both hero buttons fit on one row */
.lbl-short{display:none;}
@media (max-width:759px){.lbl-long{display:none;}.lbl-short{display:inline;}.hero-ctas{flex-wrap:nowrap;gap:var(--s2);}.hero-ctas .btn{white-space:nowrap;padding-inline:clamp(14px,4.5vw,22px);}}

.btn{
  font-family:var(--mono);font-size:var(--t-cap-78);letter-spacing:0.11em;text-transform:uppercase;
  padding:1.05em 1.9em;display:inline-flex;align-items:center;gap:0.9em;
  position:relative;isolation:isolate;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn .ar{transition:transform .45s var(--ease);}
.btn:hover .ar{transform:translateX(6px);}
.btn.fill{background:var(--red);color:var(--white);}
.btn.fill::before{
  content:"";position:absolute;inset:0;background:var(--white);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn.fill:hover{color:var(--red);}
.btn.fill:hover::before{transform:translateY(0);}
.btn.line{border:1px solid var(--rule);color:var(--white);}
.btn.line::before{
  content:"";position:absolute;inset:0;background:var(--white);z-index:-1;
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease);
}
.btn.line:hover{border-color:var(--white);color:var(--red);}
.btn.line:hover::before{transform:scaleY(1);}

.ticker{
  display:flex;flex-wrap:wrap;gap:0 var(--s3);align-items:center;
  font-family:var(--mono);font-size:var(--t-cap-72);letter-spacing:0.13em;text-transform:uppercase;
  color:var(--white-faint);padding-top:var(--s3);position:relative;
}
.ticker::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right, transparent 0, var(--rule-soft) 6%, var(--rule-soft) 94%, transparent 100%);
}
.ticker span{transition:color .35s var(--ease);}
.ticker span:hover{color:var(--white);}
.ticker .sep{color:var(--red-deep);}

.scroll-hint{
  position:absolute;right:var(--gutter);bottom:var(--s5);z-index:2;
  font-family:var(--mono);font-size:var(--t-cap-64);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--white-faint);display:none;align-items:center;gap:0.8em;
  writing-mode:vertical-rl;
}
@media (min-width:1000px){.scroll-hint{display:flex;}}
.scroll-hint::after{content:"";width:1px;height:56px;background:linear-gradient(var(--rule),transparent);}

/* ============================================================
   02 — BIG IDEA.  behaviour: scroll-driven convergence + isolate
   ============================================================ */
.idea-grid{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center;}
@media (min-width:960px){.idea-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s6);}}

.instrument{position:relative;width:100%;max-width:720px;margin-inline:auto;}
.instrument svg{width:100%;height:auto;overflow:visible;}
.ring{transition:transform 1.1s var(--ease);}
.ring circle{
  fill:none;stroke:var(--rule);stroke-width:1.1;
  transition:stroke .5s var(--ease),stroke-width .5s var(--ease);
  pointer-events:all;
}
.ring text{
  font-family:var(--mono);font-size:var(--t-cap-svg-13);letter-spacing:1.7px;
  fill:var(--white-faint);transition:fill .5s var(--ease);
}
.instrument.ready .ring circle{stroke:#45454E;}
/* hovered / active ring: a pure-white keyline — specificity matches the
   .instrument.ready rule above so it wins on source order */
.instrument .ring:hover circle,.instrument .ring.act circle{stroke:#fff;stroke-width:1.5;}
.instrument .ring:hover text,.instrument .ring.act text{fill:#fff;}
.instrument.iso .ring:not(.act):not(:hover) circle{stroke:var(--rule-soft);}
.instrument.iso .ring:not(.act):not(:hover) text{fill:var(--white-ghost);}

.origin-mark{opacity:0;transition:opacity .7s var(--ease);}
.instrument.met .origin-mark{opacity:1;}
.origin-mark line{stroke:var(--red);stroke-width:1;}
.origin-mark circle{fill:var(--red);}
.origin-mark text{font-family:var(--mono);font-size:var(--t-cap-svg-11);letter-spacing:2px;fill:var(--red-text);}

.idea-copy{position:relative;min-height:1px;}
.idea-h{text-wrap:balance;}
.idea-h .br-wide{display:none;}
@media (min-width:768px) and (max-width:959px){.idea-h{max-width:58%;}}
@media (min-width:960px){.idea-h .br-wide{display:inline;}}
.idea-default{transition:opacity 2s var(--ease);}
.instrument-linked.swapped .idea-default{opacity:0;}
.force-note{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 2s var(--ease);
}
.force-note.on{opacity:1;}
.force-note h2{margin-bottom:var(--s2);font-size:calc(var(--t-h2) * 0.78);}
.instrument-hint{
  font-family:var(--mono);font-size:var(--t-cap-64);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-faint);margin-top:var(--s3);text-align:center;
}
.instrument-hint::before{content:"Hover a circle";}
@media (hover:none),(pointer:coarse){.instrument-hint::before{content:"Tap a circle";}}

/* mobile only: the diagram becomes a static graphic — bigger, edge to
   edge at the gutter, no hover/tap isolate behaviour */
@media (max-width:759px){
  .instrument{
    max-width:none;
    width:117%;
    margin-left:-11%;
    margin-right:-6%;
  }
  .ring,.ring circle{pointer-events:none;}
  .instrument-hint{display:none;}
}

/* ============================================================
   03 — BELIEF.  behaviour: rule draws / strike-through
   ============================================================ */
.statement{padding-block:var(--section);text-align:left;overflow-x:clip;}
.statement .big{
  font-family:var(--display);
  font-size:clamp(2.4rem,7.2vw,6rem);
  line-height:1.0;letter-spacing:-0.022em;max-width:16ch;
}
.draw-u{position:relative;display:inline-block;}
.draw-u::after{
  content:"";position:absolute;left:0;right:0;bottom:0.04em;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease) .3s;
}
.statement.on .draw-u::after{transform:scaleX(1);}
/* the four forces drift apart, then settle into line as you scroll in */
.chaos{margin-block:var(--s5);display:flex;flex-direction:column;gap:0.06em;overflow:visible;}
.chaos-line{
  font-family:var(--display);font-size:clamp(1.3rem,3.5vw,2.7rem);line-height:1.12;
  color:var(--white-faint);will-change:transform;
  width:fit-content;max-width:100%;
  transition:color .7s var(--ease);
}
.chaos.settled .chaos-line{color:var(--white-dim);}
.resolve{
  font-family:var(--display);font-size:clamp(1.7rem,4.4vw,3.3rem);line-height:1.08;
  color:var(--white);max-width:18ch;position:relative;padding-left:var(--s4);
}
.resolve::before{
  content:"";position:absolute;left:0;top:0.12em;bottom:0.12em;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .9s var(--ease);
}
.chaos.settled + .resolve::before{transform:scaleY(1);}
.statement .big{will-change:transform;}
.strike{position:relative;display:inline-block;color:var(--white-faint);}
.strike::after{
  content:"";position:absolute;left:-0.04em;right:-0.04em;top:52%;height:2px;background:var(--white-faint);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) .85s;
}
.statement.on .strike::after{transform:scaleX(1);}

/* ============================================================
   04 — WHAT WE DO.  behaviour: hairline accordion
   ============================================================ */
.caps{border-top:1px solid var(--rule-soft);}
.cap{
  border-bottom:1px solid var(--rule-soft);
  position:relative;
  transition:background .55s var(--ease);
}
.cap::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.cap.open::before{transform:scaleX(1);}
.cap.open{background:var(--ink-2);}
.cap-btn{
  width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:var(--s3);
  padding:var(--s4) 0;
}
@media (min-width:900px){
  .cap-btn{grid-template-columns:15.5rem 1fr auto;padding-inline:var(--s3);}
}
.cap-key{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--white-faint);transition:color .45s var(--ease);display:none;
}
@media (min-width:900px){.cap-key{display:block;}}
.cap.open .cap-key{color:var(--red-text);}
.cap-name{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.05;
  color:var(--white-dim);transition:color .45s var(--ease),transform .55s var(--ease);
}
.cap.open .cap-name{color:var(--white);}
@media (min-width:900px){.cap.open .cap-name{transform:translateX(10px);}}
.cap-plus{position:relative;width:14px;height:14px;flex:none;}
.cap-plus i{position:absolute;background:var(--white-faint);transition:transform .5s var(--ease),background .4s var(--ease);}
.cap-plus i:first-child{left:0;right:0;top:6px;height:1px;}
.cap-plus i:last-child{top:0;bottom:0;left:6px;width:1px;}
.cap.open .cap-plus i{background:var(--red);}
.cap.open .cap-plus i:last-child{transform:scaleY(0);}
.cap-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);}
.cap.open .cap-body{grid-template-rows:1fr;}
.cap-body > div{overflow:hidden;}
.cap-body p{
  padding:0 0 var(--s3);max-width:52ch;
  font-family:var(--serif);color:var(--white-dim);line-height:1.85;
}
/* pull the open panel's content up toward the heading, and tighten its
   closing gap before the red rule — confined to .cap-body (0-height while
   closed), so the collapsed row's own size is untouched */
.cap-body p:first-child{margin-top:-0.5rem;}
.cap-body p:last-child{padding-bottom:1.5rem;max-width:none;}
@media (min-width:900px){.cap-body p{padding-left:calc(15.5rem + var(--s3) + var(--s3));padding-right:var(--s3);max-width:calc(52ch + 15.5rem + var(--s3) * 3);}}

/* ============================================================
   05 — HOW WE CAN HELP.  behaviour: the title rule draws in,
   then a red rule sweeps over it on hover. No icons.
   ============================================================ */
.help-grid{display:grid;gap:clamp(0.7rem,1.2vw,1.1rem);grid-template-columns:1fr;}
@media (min-width:600px){.help-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.help-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1300px){.help-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (min-width:1000px){.help-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:960px){.help-grid.c6{grid-template-columns:repeat(3,minmax(0,1fr));}}
.help{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-md);
  padding:var(--s4) var(--s3) var(--s3);
  display:flex;flex-direction:column;min-height:15rem;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
/* whole-card click target, same pattern as .wcard-link on the work-index
   cards: an absolute link spanning the card sits under the visible .hl
   link (which keeps its own hover state via a higher z-index) so a click
   anywhere on the card follows the same href. */
.help-link{position:absolute;inset:0;z-index:4;border-radius:inherit;}
.help:hover,.help:focus-within{background:var(--ink-3);border-color:var(--rule);transform:translateY(-3px);}
.help-q{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--white-faint);margin-bottom:var(--s3);line-height:1.6;min-height:3.2em;
  transition:color .45s var(--ease);
}
.help:hover .help-q{color:var(--red-text);}
.help h3{margin-bottom:var(--s3);}
.ul{position:relative;display:inline-block;}
.ul::before,.ul::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  transform:scaleX(0);transform-origin:0 50%;
}
.ul::before{background:var(--rule);transition:transform .75s var(--ease);}
.ul::after{background:var(--red);transition:transform .5s var(--ease);}
.help.seen .ul::before{transform:scaleX(1);}
.help:hover .ul::after,.help:focus-within .ul::after{transform:scaleX(1);}
.help .hp{font-family:var(--serif);font-size:0.9rem;line-height:1.75;color:var(--white-dim);margin-bottom:var(--s4);}
.help .hl{
  position:relative;z-index:5;
  margin-top:auto;color:var(--white);
  transition:color .4s var(--ease);
}
.help:hover .hl{color:var(--white);}
/* the keyline under the card's link animates only on a direct hover of the
   link itself (base .hl rule), never on whole-card hover */
.help .help-flow{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:var(--t-cap-60);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--white-faint);line-height:1.7;transition:color .4s var(--ease);
}
.help:hover .help-flow{color:var(--white-dim);}

/* ---------- 05 — HOW CAN WE HELP.  compact starting-point cards ---------- */
@media (min-width:960px){#helpGridBuild.help-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
#helpGridBuild .help{
  background:transparent;
  /* red fades OUT gently */
  transition:background .85s cubic-bezier(.33,0,.2,1),border-color .85s cubic-bezier(.33,0,.2,1),transform .5s var(--ease);
}
#helpGridBuild .help:hover,#helpGridBuild .help:focus-within{
  background:var(--red);border-color:var(--red);
  /* red fades IN a touch quicker, still smooth and even */
  transition:background .6s cubic-bezier(.33,0,.2,1),border-color .6s cubic-bezier(.33,0,.2,1),transform .5s var(--ease);
}
#helpGridBuild .help h3{color:var(--red);transition:color .4s var(--ease);}
#helpGridBuild .help:hover h3{color:var(--white);}
#helpGridBuild .help-top{display:flex;align-items:baseline;gap:0.6em;margin-bottom:var(--s2);}
#helpGridBuild .help-idx{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;
  color:var(--white-faint);flex:none;transition:color .45s var(--ease);
}
#helpGridBuild .help:hover .help-idx{color:var(--white);}
#helpGridBuild .help-q{margin:0 0 var(--s3);min-height:0;}
#helpGridBuild .help:hover .help-q{color:var(--white);}
#helpGridBuild .help:hover .ul::after{background:var(--white);}
#helpGridBuild .help:hover .hp{color:var(--white);}

/* ---------- WHAT WE MAKE teaser cards — same default background as the
   pricing tier cards on what-we-make.html: black-family vertical fall.
   Hover/focus state is untouched — it keeps the standard .help treatment. ---------- */
#whatWeMakeCards .help{
  background:
    linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 40%),
    linear-gradient(180deg,#151518,#0e0e10);
}
#helpGridBuild .help:hover .hl{color:var(--white);}
/* red-fill card: the link's hover keyline is white so it reads on the red */
#helpGridBuild .help .hl::after{background:var(--white);}
#helpGridBuild .help-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:0.4em 0.5em;margin:0 0 var(--s4);
}
#helpGridBuild .help-tags li{
  font-family:var(--mono);font-size:var(--t-cap-58);letter-spacing:0.04em;text-transform:uppercase;
  color:var(--white-faint);border:1px solid var(--rule-soft);border-radius:999px;
  padding:0.3em 0.65em;transition:border-color .4s var(--ease),color .4s var(--ease);
}
#helpGridBuild .help:hover .help-tags li{border-color:rgba(251,251,252,0.6);color:var(--white);}

/* ============================================================
   06 — WORK.  behaviour: a reel you drive yourself.
   Horizontal travel is never tied to vertical scroll.
   ============================================================ */
.reel-wrap{position:relative;margin-top:var(--s4);}
.reel-wrap::before,.reel-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(1.5rem,6vw,6rem);
  pointer-events:none;z-index:3;transition:opacity .45s var(--ease);
}
.reel-wrap::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);opacity:0;}
.reel-wrap::after{right:0;background:linear-gradient(270deg,var(--ink),transparent);}
.reel-wrap.at-start::before{opacity:0;}
.reel-wrap:not(.at-start)::before{opacity:1;}
.reel-wrap.at-end::after{opacity:0;}

.reel{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  /* headroom so the hover lift + card shadow aren't clipped by overflow-y */
  padding-block:6px 22px;
  scroll-padding-inline-start:var(--gutter);
}
.reel::-webkit-scrollbar{display:none;}
.reel.dragging{cursor:grabbing;scroll-snap-type:none;}
.reel.dragging *{user-select:none;pointer-events:none;}
.reel-track{
  display:flex;gap:clamp(0.9rem,1.8vw,1.8rem);
  padding-inline:var(--gutter);width:max-content;
  box-sizing:content-box;   /* keep the gutter; border-box would eat it */
}
.plate-card{
  flex:none;width:clamp(236px,68vw,372px);
  scroll-snap-align:start;
  border:1px solid var(--rule);
  /* black-family vertical fall, not a flat grey slab — top edge catches
     a little light, base sinks back toward the band, with a soft black
     settle across the bottom of the card */
  background:
    linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 40%),
    linear-gradient(180deg,#151518,#0e0e10);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.42),
    0 12px 28px -10px rgba(0,0,0,.6);
  transition:border-color .5s var(--ease);
  position:relative;
}
/* rollover: the shot image eases in, the keyline and the project title
   warm to red — no card movement */
.plate-card:hover,
.plate-card:focus-within{border-color:var(--red);}
.plate-card:hover h3,
.plate-card:focus-within h3{color:var(--red-text);}
.plate-shot{overflow:hidden;background:var(--ink-3);aspect-ratio:16/10;perspective:900px;}
.plate-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:contrast(1.03) saturate(1.04) brightness(0.98);
  transform:scale(1.045);
  transition:filter .7s var(--ease),transform .9s var(--ease);
  will-change:transform;
}
.plate-card:hover .plate-shot img{filter:contrast(1.07) saturate(1.12) brightness(1.02);transform:scale(1.09) rotate(-0.3deg);}
/* card art that should sit flush left in its frame, with no resting zoom cropping either side */
.wcard-shot img.shot-left,.plate-shot img.shot-left{object-position:left top;transform-origin:left center;transform:scale(1);}
.plate-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(9,9,10,0.55) 100%);
  pointer-events:none;
}
.plate-shot{position:relative;}
.plate-meta{padding:var(--s3) var(--s4) var(--s4);}
.plate-tag{
  font-family:var(--mono);font-size:var(--t-cap-64);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--s2);
}
.plate-card h3{margin-bottom:var(--s2);transition:color .45s var(--ease);}
.plate-line{font-family:var(--serif);font-size:0.92rem;line-height:1.75;color:var(--white-dim);}
.plate-num{
  position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;color:var(--white);
  background:rgba(9,9,10,.7);backdrop-filter:blur(6px);padding:.3em .6em;
}

/* reel controls */
.reel-bar{
  display:flex;align-items:center;gap:var(--s3);
  margin-top:var(--s4);
}
.rbtn{
  width:44px;height:44px;flex:none;
  border:1px solid var(--rule);color:var(--white);
  display:grid;place-items:center;
  position:relative;isolation:isolate;overflow:hidden;
  transition:border-color .4s var(--ease),color .4s var(--ease),opacity .4s var(--ease);
}
.rbtn::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.rbtn:hover:not(:disabled){border-color:var(--red);}
.rbtn:hover:not(:disabled)::before{transform:translateY(0);}
.rbtn:disabled{opacity:0.3;cursor:default;}
.rbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;}
.reel-rail{flex:1;height:1px;background:var(--rule-soft);position:relative;min-width:3rem;}
.reel-rail i{position:absolute;left:0;top:0;height:1px;background:var(--red);width:12%;transition:width .3s var(--ease),transform .3s var(--ease);}
.reel-count{
  font-family:var(--mono);font-size:var(--t-cap-68);letter-spacing:0.12em;color:var(--white-faint);
  white-space:nowrap;
}
.reel-count b{color:var(--white);font-weight:400;}
.hl{
  position:relative;
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:0.7em;width:fit-content;
  min-height:24px;padding-block:4px;color:var(--white);
  transition:color .4s var(--ease);
}
/* red keyline that draws in from the left on hover / focus — same
   behaviour as the hero capability picker */
.hl::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.hl .ar{transition:transform .45s var(--ease);}
.hl:hover .ar,.hl:focus-visible .ar{transform:translateX(6px);}
.hl:hover::after,.hl:focus-visible::after{transform:scaleX(1);}
.vh-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.reel-hint{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-faint);margin-top:var(--s2);margin-bottom:var(--s5);
}
.reel-hint::before{content:"Drag, swipe or use the arrows";}
@media (hover:none),(pointer:coarse){.reel-hint::before{content:"Swipe or use the arrows";}}

/* ============================================================
   07 — PROCESS.  behaviour: scroll-driven rail + expand active
   ============================================================ */
.proc{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media (min-width:900px){.proc{grid-template-columns:auto 1fr;gap:var(--s6);}}
/* widen the step's number column so its heading/body text lines up with the
   rail-body text above (same 14rem rail-label width, minus this step's own
   number-to-content gap and the proc-rail hairline) — the numbers and the
   proc-rail line itself stay put, full width, unchanged */
@media (min-width:900px){
  .proc-aligned .step{grid-template-columns:calc(14rem - var(--s3) - 1px) 1fr;}
}
.proc-rail{display:none;width:1px;background:var(--rule-soft);position:relative;}
@media (min-width:900px){.proc-rail{display:block;}}
.proc-rail i{position:absolute;left:0;top:0;width:1px;background:var(--red);height:0;}
.step{
  border-bottom:1px solid var(--rule-soft);padding-block:var(--s4);
  display:grid;grid-template-columns:3.2rem 1fr;gap:var(--s3);align-items:start;
}
.step:first-child{border-top:1px solid var(--rule-soft);}
.step .sn{
  font-family:var(--mono);font-size:var(--t-cap-75);letter-spacing:0.08em;color:var(--white-faint);
  padding-top:0.55em;transition:color .5s var(--ease);
}
.step.act .sn{color:var(--red-text);}
.step h3{
  font-size:clamp(1.4rem,3vw,2.2rem);color:var(--white-faint);
  transition:color .5s var(--ease),transform .6s var(--ease);
}
.step.act h3{color:var(--white);transform:translateX(8px);}
.step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease),opacity .5s var(--ease);opacity:0;}
.step.act .step-body{grid-template-rows:1fr;opacity:1;}
.step-body > div{overflow:hidden;}
.step-body p{
  padding-top:var(--s2);max-width:50ch;
  font-family:var(--serif);color:var(--white-dim);line-height:1.8;font-size:0.95rem;
}
@media (min-width:900px){.step.act .step-body p{padding-left:8px;}}

/* ============================================================
   08 — HOW WE WORK.  condensed numbered-card summary
   ============================================================ */
.quad{display:grid;gap:var(--s5) var(--s6);grid-template-columns:1fr;}
@media (min-width:640px){.quad{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1080px){.quad{grid-template-columns:repeat(4,minmax(0,1fr));}}
.quad.quad-6{grid-template-columns:1fr;}
@media (min-width:640px){.quad.quad-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.quad.quad-6{grid-template-columns:repeat(3,minmax(0,1fr));}}
.quad.quad-5{grid-template-columns:1fr;}
@media (min-width:640px){.quad.quad-5{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.quad.quad-5{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1400px){.quad.quad-5{grid-template-columns:repeat(5,minmax(0,1fr));}}
.qd{
  background:transparent;border-top:1px solid var(--rule-soft);
  padding-top:var(--s3);position:relative;
  transition:border-color .5s var(--ease);
}
.qd::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:2px;
  background:var(--red);transition:width .6s var(--ease);
}
.qd:hover::before{width:2.5rem;}
.qd:hover{border-top-color:transparent;}
.qn{
  display:block;font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.18em;
  color:var(--red-text);margin-bottom:var(--s3);
}
.qd h3{font-size:var(--t-h3);margin-bottom:var(--s2);transition:color .5s var(--ease);}
.qd:hover h3{color:var(--red-text);}
.qd p{font-family:var(--serif);font-size:0.88rem;line-height:1.75;color:var(--white-dim);transition:color .5s var(--ease);}
.qd:hover p{color:var(--white);}
/* About "Why trust us" and the what-we-make tab cards: headers sit in red at rest */
#trust .qd h3,.tab-panel .qd h3{color:var(--red-text);}
/* no card numbers here, so the header sits a set distance under the keyline */
#trust .qd h3,#trust .red{color:var(--trust);}
#trust .qd::before{background:var(--trust);}
#trust .qd,.tab-panel .qd{padding-top:2rem;}
@media (max-width:899px){#trust .rail-label:empty,#different .rail-label:empty{display:none;}}

/* ============================================================
   08 — WHY ORIGIN.  behaviour: negations strike out in sequence
   ============================================================ */
.neg{list-style:none;display:flex;flex-direction:column;gap:0.1em;margin-bottom:var(--s5);}
.neg li{
  font-family:var(--display);font-size:clamp(1.55rem,4.2vw,3.1rem);line-height:1.06;
  color:var(--white);position:relative;display:inline-block;width:fit-content;max-width:100%;
  transition:color .8s var(--ease);
}
.neg li::after{
  content:"";position:absolute;left:-0.03em;right:-0.03em;top:54%;height:2px;background:var(--red-deep);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .75s var(--ease);
}
.neg li.out{color:var(--white-quiet);}
.neg li.out::after{transform:scaleX(1);}
.neg.pos{margin-top:var(--s5);margin-bottom:0;}
.neg.pos li{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.neg.pos li::after{display:none;}
.neg.pos li.on{opacity:1;transform:none;}
.affirm{
  font-family:var(--display);font-size:clamp(1.9rem,5.2vw,4rem);line-height:1.05;
  color:var(--white);max-width:18ch;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.affirm.on{opacity:1;transform:none;}
.affirm-rail{margin-top:var(--s6);}
@media (max-width:759px){
  .affirm-rail{margin-top:var(--s3);}
}
/* no affirm line between the negations and the copy: the list's own bottom margin is the gap */
.neg + .affirm-rail{margin-top:0;}
@media (max-width:899px){.affirm-rail > .rail-label:empty{display:none;}}

/* ============================================================
   09 — EXPERIENCE.  behaviour: continuously scrolling logo marquee
   ============================================================ */
.logo-marquee{
  overflow:hidden;
  /* iOS Safari: keep the masked, clipped ticker on its own compositing layer
     so the mask isn't re-rasterised while the track moves underneath it */
  isolation:isolate;
  -webkit-transform:translateZ(0);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* the scroll-reveal (.rv) transform on this element was fighting the
   marquee's own infinite transform animation on .logo-track below it —
   toggling translateY on the ancestor mid-animation would desync or
   freeze the ticker in WebKit. Keep the reveal as an opacity-only fade
   here so the ticker's transform is never disturbed. */
.logo-marquee.rv{transform:translateZ(0);}
/* standalone ticker (About page): framed top and bottom, fading at the
   edges under the same mask */
.logo-marquee--framed{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);}
/* home hero: transparent, sits directly on the hero photo instead of a
   solid section background — just a top keyline, fading at the edges
   under the same mask as the About page ticker's frame */
.hero-logos{margin-top:var(--s5);border-top:1px solid var(--rule-soft);}
.logo-track{
  display:flex;width:max-content;gap:var(--s6);padding-block:var(--s5);
  /* the trailing pad makes the track exactly two equal halves (every item
     has a gap after it), so the -50% loop lands with no jump at the seam */
  padding-right:var(--s6);
  animation:marquee 62s linear infinite;
  will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  /* one filter on the moving track instead of one per logo: dozens of
     filtered images inside an animated layer stutter and flicker in iOS Safari */
  -webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);
}
/* hero instance: .hero's own bottom padding already closes the gap below
   the logos, so drop the track's own bottom padding here — otherwise the
   two stack and the gap below reads twice as large as the gap above (to
   the keyline) */
.hero-logos .logo-track{padding-bottom:0;}
.logo-item{display:flex;align-items:center;height:36px;flex:none;}
.logo-item img{
  height:100%;width:auto;display:block;
  opacity:0.55;
  transition:opacity .5s var(--ease);
}
.logo-item:hover img{opacity:1;}

/* wordmarks with an extreme aspect ratio need a shorter height so their
   auto-width doesn't blow out — everything else scales off the 36px row height */
.logo-item img[src$="hyphen.svg"]{height:11px;}
.logo-item img[src$="internet-solutions.svg"]{height:39.6px;}
.logo-item img[src$="liberty-life.svg"]{height:41.2px;}
.logo-item img[src$="comcorp.svg"]{height:34.2px;}
.logo-item img[src$="dariel.svg"]{height:34.2px;}
.logo-item img[src$="debt-rescue.svg"]{height:34.2px;}
.logo-item img[src$="mckinsey.svg"]{height:20px;}
.logo-item img[src$="standardbank.svg"]{height:28px;}
.logo-item img[src$="nedbank.svg"]{height:29px;}
.logo-item img[src$="bcl.svg"]{height:23px;}
.logo-item img[src$="teched.svg"]{height:30px;}

/* per-logo emphasis/de-emphasis requested by design review.
   height-only overrides (width stays auto) so the layout box — and therefore
   the flex `gap` between items — always matches what's painted, and aspect
   ratio is never distorted. */
.logo-item img[src$="abacus.svg"]{height:28.4px;}
.logo-item img[src$="bbc-minute.svg"]{height:28.4px;}
.logo-item img[src$="orange-cyberdefense.svg"]{height:71.5px;}
.logo-item img[src$="african-bank.svg"]{height:70.2px;}
.logo-item img[src$="anglo-american.svg"]{height:66.7px;}
.logo-item img[src$="aldes.svg"]{height:39.6px;}
.logo-item img[src$="cintocare.svg"]{height:37.8px;}
.logo-item img[src$="doe.svg"]{height:37.8px;}
.logo-item img[src$="elle.svg"]{height:108px;}
.logo-item img[src$="healthbridge.svg"]{height:101px;}
.logo-item img[src$="rbs.svg"]{height:58.3px;}
.logo-item img[src$="telesure.svg"]{height:106.7px;}
.logo-item img[src$="sage-mbo.svg"]{height:28.4px;}
.logo-item img[src$="alula.svg"]{height:27.6px;}
.logo-item img[src$="peezjob.svg"]{height:47.5px;}
.logo-item img[src$="merc-club.svg"]{height:44.7px;}
.logo-item img[src$="transnet.svg"]{transform:scale(1.8);}
/* tighten the gaps on either side of the Elle logo (DStv | Elle | FNB) by 15% */
.logo-item:has(img[src$="elle.svg"]){margin-inline:calc(var(--s6) * -0.15);}
/* tighten the gap after Standard Bank (Standard Bank | Telesure) by 15% */
.logo-item:has(img[src$="standardbank.svg"]){margin-right:calc(var(--s6) * -0.15);}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none;flex-wrap:wrap;width:auto;}
}
/* Experience section: cancel the marquee's internal bottom padding so the
   gap to the following hairline matches the section's top padding. */
#value .logo-marquee:last-child{margin-bottom:calc(var(--s5) * -1);}

/* About page: full-bleed client ticker standing in for a section divider */
.logo-band{border-bottom:1px solid var(--rule-soft);}

/* ---------- why grid: differentiators (reused inside About) ---------- */
.why-grid{display:grid;gap:clamp(0.9rem,1.6vw,1.4rem);grid-template-columns:1fr;}
@media (min-width:660px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1080px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.wy{border-top:1px solid var(--rule);padding-top:var(--s3);position:relative;}
.wy::before{
  content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease);
}
.rv.on .wy::before,.why-grid.on .wy::before{transform:scaleX(1);}
.wy h3{font-size:var(--t-h3);margin-bottom:var(--s2);max-width:20ch;}
.wy p{font-family:var(--serif);font-size:0.9rem;line-height:1.8;color:var(--white-dim);}

/* ============================================================
   10 — ABOUT.  behaviour: parallax counterweight numeral
   ============================================================ */
.about{position:relative;overflow:hidden;}
.about-photo{
  position:absolute;top:0;right:0;bottom:0;width:46%;min-width:320px;
  pointer-events:none;opacity:0.16;will-change:transform;
}
.about-photo img{width:100%;height:120%;object-fit:cover;object-position:60% 30%;filter:grayscale(1) contrast(1.1);}
.about-photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, transparent 42%);
}
@media (max-width:900px){.about-photo{display:none;}}
.about-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);position:relative;z-index:2;}

/* "The people" — subtle workspace photo behind the section, treated like the
   page-hero / cta backgrounds: greyscale, dimmed, gradient-faded at top & bottom */
.people-band{position:relative;overflow:hidden;}
.people-band > .wrap{position:relative;z-index:2;}
.people-photo{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.people-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.05);
  opacity:0.85;
}
.people-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(9,9,10,0.3) 14%, rgba(9,9,10,0.3) 86%, var(--ink) 100%);
}
@media (max-width:700px){
  .people-photo img{object-position:64% 42%;opacity:0.6;}
}
@media (min-width:900px){.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);}}
/* the ledger — an index-page device: entry, leader rule, value */
.ledger{list-style:none;border-top:1px solid var(--rule-soft);margin-top:var(--s4);}
.ledg{
  display:flex;align-items:baseline;gap:var(--s2);
  padding-block:var(--s3);border-bottom:1px solid var(--rule-soft);
}
.ledg-k{
  font-family:var(--serif);font-size:0.97rem;line-height:1.5;
  color:var(--white-dim);transition:color .4s var(--ease);
}
.ledg-r{
  flex:1;min-width:1.5rem;height:1px;background:var(--rule);
  position:relative;transform:translateY(-0.3em);
}
.ledg-r::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
}
.ledg-v{
  font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--white-faint);white-space:nowrap;transition:color .4s var(--ease);
}
.ledg:hover .ledg-k{color:var(--white);}
.ledg:hover .ledg-v{color:var(--red-text);}
.ledg:hover .ledg-r::after{transform:scaleX(1);}
@media (max-width:600px){
  .ledg{flex-wrap:wrap;gap:var(--s1);}
  .ledg-r{display:none;}
  .ledg-k{flex:1 1 100%;}
}
/* stylised South Africa + the markets Origin works into */
.reach{width:100%;max-width:400px;margin-bottom:calc(var(--s4) - 20px);}
.reach svg{width:100%;height:auto;overflow:visible;}

/* wireframe globe */
.reach .sphere{
  fill:none;stroke:var(--white-faint);stroke-width:1;
  opacity:0;transition:opacity 1s var(--ease) .1s;
}
.rv.on .reach .sphere{opacity:0.55;}
.reach .grat{
  fill:none;stroke:rgba(255,255,255,0.08);stroke-width:0.5;
  opacity:0;transition:opacity 1.1s var(--ease) .35s;
}
.rv.on .reach .grat{opacity:1;}

/* land masses draw on */
.reach .land{
  fill:rgba(255,255,255,0.05);stroke:var(--white-faint);stroke-width:1.2;
  stroke-linejoin:round;
  stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);
  transition:stroke-dashoffset 2.2s var(--ease) .4s,stroke .6s var(--ease);
}
.reach .land-faint{
  fill:rgba(255,255,255,0.02);stroke:var(--white-ghost);stroke-width:0.9;
}
.rv.on .reach .land{stroke-dashoffset:0;}

/* reach arcs from Pretoria */
.reach .arc{
  fill:none;stroke:var(--red);stroke-width:1;stroke-dasharray:3 5;opacity:0;
  transition:opacity .9s var(--ease) 1.4s;
}
.rv.on .reach .arc{opacity:0.6;}
.rv.on .reach .arc:nth-of-type(2){transition-delay:1.6s;}
.rv.on .reach .arc:nth-of-type(3){transition-delay:1.8s;}

/* Pretoria marker + animated ring */
.reach .pin{fill:var(--red);opacity:0;transition:opacity .5s var(--ease) 1.1s;}
.rv.on .reach .pin{opacity:1;}
.reach .ring{
  fill:none;stroke:var(--red);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;transform:scale(.35);
  transition:opacity .9s var(--ease) 1.2s,transform 1.2s var(--ease) 1.2s;
}
.rv.on .reach .ring{opacity:0.5;transform:scale(1);}
.reach .ping{
  fill:none;stroke:var(--red);stroke-width:1;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;
}
.rv.on .reach .ping{animation:reachPing 3.6s var(--ease) 2.4s infinite;}
@keyframes reachPing{
  0%{opacity:0.5;transform:scale(.35);}
  70%{opacity:0;transform:scale(1.5);}
  100%{opacity:0;transform:scale(1.5);}
}
.reach text{
  font-family:var(--mono);font-size:var(--t-cap-svg-7);letter-spacing:1.1px;fill:var(--white-faint);
  opacity:0;transition:opacity .8s var(--ease) 1.6s;
}
.rv.on .reach text{opacity:1;}
.reach text.here{fill:var(--red-text);}
@media (prefers-reduced-motion:reduce){
  .rv.on .reach .ping{animation:none;}
  .reach .land{transition:stroke .6s var(--ease);stroke-dashoffset:0;}
}
.reach-cap{
  font-family:var(--mono);font-size:var(--t-cap-63);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--white-faint);margin-bottom:var(--s4);
}

/* homepage About: globe sits to the right of the copy; the copy column
   narrows so the description runs to four lines and leaves room for it */
.reach-sm{max-width:221px;margin:0;}
/* label sized so it renders at the same on-screen size as a .plate label
   (~11px) once the SVG's viewBox scaling is accounted for */
.reach-sm text{font-size:15px;letter-spacing:0.2em;}
@media (max-width:640px){.reach-sm{max-width:100%;}}
.about-home-split{display:grid;gap:var(--s5);}
/* tablets: keep the illustration to the right of the text instead of dropping it underneath */
@media (min-width:760px) and (max-width:1199px){
  .about-home-split{grid-template-columns:minmax(0,1fr) 190px;gap:var(--s5);align-items:center;}
  .about-home-split .reach-sm{max-width:190px;}
}
@media (min-width:1200px){
  /* text column 60px narrower than before, which pulls the illustration 60px to the left */
  .about-home-split{
    grid-template-columns:minmax(0,calc(54ch + 20px)) 221px;
    gap:var(--s6);align-items:center;justify-content:start;
  }
}

/* the two facts we can actually stand behind */
.facts{display:flex;flex-wrap:wrap;gap:var(--s5);margin-block:var(--s4) var(--s5);}
/* homepage About: wider spacing between the five stats, wider caption boxes */
.facts-wide{gap:calc(var(--s5) * 1.1);}
.facts-wide .fact > span{max-width:20.2ch;}
/* nudge the "1000+" stat and everything after it 15px to the left —
   desktop only: on mobile the stats wrap into a new row and this pulls
   "1000+" out of alignment with the gutter above it */
@media (min-width:760px){.facts-wide .fact:nth-child(3){margin-left:-15px;}}
/* small screens: force a fixed two-per-row grid instead of letting flex-wrap
   decide, so the five stats always pair up 25+/12+, 1000+/50+, with
   10Mil+ alone on its own row — regardless of each stat's text width */
@media (max-width:759px){
  .facts{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s4);row-gap:var(--s5);}
}
.fact b{
  font-family:var(--display);font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:0.9;
  color:var(--white);display:block;font-weight:400;
}
.fact b i{font-style:normal;color:var(--red-text);}
.fact span{
  display:block;margin-top:calc(var(--s2) + 10px);
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.14em;text-transform:uppercase;
  /* pull the word gaps back to a normal single space — letter-spacing widens
     the space character too, which otherwise reads as a double space */
  word-spacing:-0.14em;
  color:var(--white-faint);max-width:18ch;line-height:1.6;
}
.about-lead{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;
  color:var(--white);max-width:24ch;
}

/* ============================================================
   11 — CTA.  behaviour: a warm ember ground with engraved rings
   that open outward as the section arrives.
   ============================================================ */
.cta{
  position:relative;padding-block:clamp(5rem,12vh,9rem);
  text-align:center;overflow:hidden;
  border-top:1px solid var(--rule-soft);
  background:var(--ink);
}
.cta-photo{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.cta-photo img{
  position:absolute;left:50%;top:50%;
  width:112%;height:130%;min-width:1200px;
  transform:translate(-50%,-50%);
  object-fit:cover;object-position:58% 30%;
  filter:grayscale(1) contrast(1.22) brightness(0.85);
  opacity:0.5;
  will-change:transform;
}
.cta-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(9,9,10,0.5) 22%, rgba(9,9,10,0.5) 70%, var(--ink) 100%);
}
.cta-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.cta-stars .star-layer{will-change:transform;}
.cta-inner{position:relative;z-index:2;}
.cta h2{font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.02;max-width:20ch;margin-inline:auto;margin-bottom:var(--s3);}
.cta .figure{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.6rem,4vw,3rem);line-height:1.1;
  color:var(--red-text);margin-bottom:var(--s4);
}
.cta .lead{margin-inline:auto;text-align:center;max-width:46ch;margin-bottom:var(--s5);}
.cta .btn{margin-inline:auto;box-shadow:0 0 0 rgba(206,32,41,0);transition:box-shadow .6s var(--ease),color .4s var(--ease);}
.cta .btn:hover{box-shadow:0 18px 56px -14px rgba(206,32,41,0.6);}
.cta .cta-band-actions .btn{margin-inline:0;}
.cta .cta-band-actions .btn.line:hover{box-shadow:none;}
.cta-alt{
  margin-top:var(--s4);font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.1em;
  color:var(--white-dim);
}
.cta .plate{color:var(--white-dim);}
.cta .plate .n{color:var(--white);}
.cta-alt a,.about-lead a{
  position:relative;color:var(--white);
  display:inline-flex;align-items:center;min-height:24px;
}
/* static grey underline at rest */
.cta-alt a::before,.about-lead a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);
}
/* red keyline draws in over it on hover, same as the .hl links */
.cta-alt a::after,.about-lead a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.cta-alt a:hover::after,.cta-alt a:focus-visible::after,
.about-lead a:hover::after,.about-lead a:focus-visible::after{transform:scaleX(1);}

.foot{border-top:1px solid var(--rule-soft);padding-block:calc(var(--s4) * 0.6) var(--s4);}
.foot-mark{height:30px;width:auto;opacity:0.82;transition:opacity .35s var(--ease);}
.foot-mark:hover{opacity:1;}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .rv{opacity:1 !important;transform:none !important;}
  .hero .ln > span{transform:none !important;}
  .hero-scene .dz{transform:none !important;}
  .hero-scene .sweep{stroke-dashoffset:0 !important;animation:none !important;}
  .hero-photo{transform:none !important;opacity:1 !important;}
  .cta-photo,.cta-stars .star-layer{transform:none !important;}
  .phero-parallax .phero-bg,.phero-stars .star-layer{transform:none !important;}
  .reel{scroll-behavior:auto !important;}
  .plate-card:hover .plate-shot img{transform:scale(1.045) !important;}
  .cross{display:none !important;}
  .step-body{grid-template-rows:1fr !important;opacity:1 !important;}
}

/* ============================================================
   DRAFT-CONTENT MARKERS
   Anything wrapped in .tbc is placeholder copy written to show
   the shape of the page. Replace with real project facts and
   delete the marker. Search the source for "tbc" to find them all.
   ============================================================ */
.tbc{
  border-bottom:1px dashed var(--red-deep);
  cursor:help;
}
.draft-flag{
  display:inline-flex;align-items:center;gap:0.6em;
  font-family:var(--mono);font-size:var(--t-cap-60);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--red-text);border:1px solid var(--red-deep);
  padding:0.45em 0.8em;margin-bottom:var(--s4);
}
.draft-flag::before{content:"";width:5px;height:5px;background:var(--red);border-radius:50%;}

/* homepage reel cards are now links through to the case studies */
.plate-card{cursor:pointer;}
.plate-link{position:absolute;inset:0;z-index:5;}
.plate-card:focus-within{border-color:var(--red);}

/* ============================================================
   DELIVERABLES — tier / investment cards
   Exploration (v2): small/medium/large scope + indicative cost.
   ============================================================ */
.tier-grid{display:grid;grid-template-columns:1fr;gap:clamp(0.8rem,1.5vw,1.2rem);margin-top:var(--s4);}
@media (min-width:640px){.tier-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.tier-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}}
.tier{
  position:relative;
  /* same black-family vertical fall + keyline as the work cards on the home page */
  background:
    linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0) 40%),
    linear-gradient(180deg,#151518,#0e0e10);
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  /* red fades OUT gently */
  transition:background .85s cubic-bezier(.33,0,.2,1),border-color .85s cubic-bezier(.33,0,.2,1),transform .5s var(--ease);
}
/* red-fill rollover — matches the "Six ways in" starting-point cards */
.tier:hover,.tier:focus-within{
  background:var(--red);border-color:var(--red);transform:translateY(-3px);
  /* red fades IN a touch quicker */
  transition:background .6s cubic-bezier(.33,0,.2,1),border-color .6s cubic-bezier(.33,0,.2,1),transform .5s var(--ease);
}
.tier:hover .tier-name,.tier:focus-within .tier-name,
.tier:hover .tier-size,.tier:focus-within .tier-size,
.tier:hover .tier-scope,.tier:focus-within .tier-scope,
.tier:hover .tier-includes li,.tier:focus-within .tier-includes li,
.tier:hover .tier-price .from,.tier:focus-within .tier-price .from,
.tier:hover .tier-price .range,.tier:focus-within .tier-price .range,
.tier:hover .tier-price .range .to,.tier:focus-within .tier-price .range .to{color:var(--white);}
.tier:hover .tier-includes li::before,.tier:focus-within .tier-includes li::before{background:var(--white);}
.tier:hover .tier-price,.tier:focus-within .tier-price{border-top-color:rgba(251,251,252,0.4);}
.tier:hover .tier-cta,.tier:focus-within .tier-cta{color:var(--white);}
/* whole-card click target, same pattern as .wcard-link / .help-link */
.tier-link{position:absolute;inset:0;z-index:4;border-radius:inherit;}

/* ---------- "Not ready yet?" panels ----------
   transparent at rest; on hover, the same black-family vertical fall used by
   the "What we make" cards (.help) fades in at half strength. The heading
   keyline is red by default (not the usual grey rule), and still runs its
   draw-in animation on hover. ---------- */
#notReadyCards .panel{
  background:transparent;
  border:1px solid var(--rule-soft);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
#notReadyCards .panel:hover,#notReadyCards .panel:focus-within{
  background:
    linear-gradient(to top, rgba(0,0,0,0.21), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, rgba(21,21,24,0.5), rgba(14,14,16,0.5));
  border-color:var(--rule);transform:translateY(-3px);
}
#notReadyCards .panel .ul::before{background:var(--red);}
#notReadyCards .panel.seen .ul::before{transform:scaleX(1);}
#notReadyCards .panel:hover .ul::after,#notReadyCards .panel:focus-within .ul::after{transform:scaleX(1);}

/* what-we-do "What we make" teaser cards — heading keyline red instead of
   grey by default (still draws in on scroll via .seen, same as elsewhere).
   Card hover replays the draw-in as a quick redraw flourish instead of the
   grey-to-red colour change used on other .ul instances, since the line is
   already red at rest here. */
#whatWeMakeCards .help .ul::before{background:var(--red);}
#whatWeMakeCards .help .ul::after{content:none;}
#whatWeMakeCards .help:hover .ul::before,
#whatWeMakeCards .help:focus-within .ul::before{animation:ulRedraw .6s var(--ease);}
@keyframes ulRedraw{
  0%{transform:scaleX(1);}
  45%{transform:scaleX(0);}
  100%{transform:scaleX(1);}
}
@media (prefers-reduced-motion:reduce){
  #whatWeMakeCards .help:hover .ul::before,
  #whatWeMakeCards .help:focus-within .ul::before{animation:none;}
}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;}
.tier-name{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--red-text);
}
.tier-size{font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.06em;color:var(--white-faint);}
.tier-scope{font-family:var(--serif);font-size:0.92rem;line-height:1.75;color:var(--white-dim);}
.tier-price{border-top:1px solid var(--rule-soft);padding-top:var(--s3);margin-top:auto;}
.tier-price .from{
  display:block;margin-bottom:0.4em;
  font-family:var(--mono);font-size:var(--t-cap-64);letter-spacing:0.14em;text-transform:uppercase;color:var(--white-faint);
}
.tier-price .range{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--white);line-height:1.15;}
.tier-price .range .to{color:var(--white-dim);font-size:0.72em;}
.tier-includes{list-style:none;display:flex;flex-direction:column;gap:0.55em;}
.tier-includes li{
  font-family:var(--sans);font-size:0.82rem;line-height:1.5;color:var(--white-dim);
  display:flex;gap:0.7em;align-items:baseline;
}
.tier-includes li::before{content:"";flex:none;width:10px;height:1px;background:var(--red-deep);transform:translateY(-0.35em);}
.deliv-group + .deliv-group{margin-top:var(--s6);}
.deliv-note{
  font-family:var(--mono);font-size:var(--t-cap-64);letter-spacing:0.06em;color:var(--white-quiet);
  margin-top:var(--s3);line-height:1.7;max-width:62ch;
}
.deliv-note:first-of-type{max-width:112ch;}

/* ---------- deliverable tabs ---------- */
.tabs{
  display:flex;flex-wrap:wrap;row-gap:0.2em;
  border-bottom:1px solid var(--rule-soft);
  margin-bottom:var(--s5);
}
.tab-btn{
  font-family:var(--mono);font-size:var(--t-cap-86);letter-spacing:0.13em;text-transform:uppercase;
  color:var(--white-faint);white-space:nowrap;
  padding:1.1em 0;margin-right:clamp(1.4rem,3vw,var(--s6));
  position:relative;
  transition:color .35s var(--ease);
}
.tab-btn .tn{color:var(--red-deep);margin-right:0.7em;transition:color .35s var(--ease);}
.tab-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.tab-btn:hover{color:var(--white);}
.tab-btn[aria-selected="true"]{color:var(--white);}
.tab-btn[aria-selected="true"] .tn{color:var(--red-text);}
.tab-btn[aria-selected="true"]::after{transform:scaleX(1);}

/* what-we-make deliverable tabs restyled to match the Our Work page's
   filter buttons (.fbtn) — a bordered pill, solid red fill with a white
   label on rollover and when selected — instead of the numbered
   underline-tab look above. */
.tabs-center{gap:var(--s2);border-bottom:none;}
.tabs-center .tab-btn.fbtn{padding:0.7em 1.1em;margin-right:0;}
.tabs-center .tab-btn.fbtn .tn{display:none;}
.tabs-center .tab-btn.fbtn::after{content:none;}
.tabs-center .tab-btn.fbtn::before{background:var(--red);}
.tabs-center .tab-btn.fbtn:hover,.tabs-center .tab-btn.fbtn:focus-visible{border-color:var(--red);color:var(--white);}
.tabs-center .tab-btn.fbtn[aria-selected="true"]{border-color:var(--red);color:var(--white);}
.tabs-center .tab-btn.fbtn[aria-selected="true"]::before{transform:translateY(0);}
.tab-panel[hidden]{display:none;}
/* Deliverable tab intro text sits horizontally centred */
.tab-panel > .sec-head.rail:first-child{
  display:block;
  text-align:center;
}
.tab-panel > .sec-head.rail:first-child > .rail-label{display:none;}
.tab-panel > .sec-head.rail:first-child .measure{margin-inline:auto;max-width:75ch;}

/* "Work of this kind" evidence block appended inside each deliverable tab */
.wm-evidence{
  margin-top:var(--s7);
  border-top:1px solid var(--rule-soft);
  padding-top:var(--s6);
}

/* ============================================================
   v4 — hero deliverable picker, tier CTA, progressive form
   ============================================================ */
/* sit the row midway between its hairline and the hero's lower edge:
   the space below it is the hero's own padding-bottom (var(--s5)), so match
   that above the text — .ticker's default (var(--s3)) left it hugging the rule */
.hero-picker{gap:0 var(--s3);padding-top:var(--s5);}
.hero-picker .tick-lead,
.hero-picker .tick-lead:hover{color:var(--white-quiet);}
.hero-picker a{
  color:var(--white-faint);position:relative;
  transition:color .35s var(--ease);
}
.hero-picker a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
/* no colour rollover — the strip was plain grey text originally; keep it that
   way on hover. Keyboard focus still gets a clear indicator. */
.hero-picker a:focus-visible{color:var(--white);}
.hero-picker a:hover::after,.hero-picker a:focus-visible::after{transform:scaleX(1);}

/* tier card → form hand-off */
.tier-cta{
  position:relative;z-index:5;
  display:inline-flex;align-self:flex-start;align-items:center;gap:0.5em;margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--red-text);
  transition:color .3s var(--ease);
}
/* red (or white, on the red-fill card) keyline that draws in from the left */
.tier-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.tier-cta .ar{transition:transform .45s var(--ease);}
.tier-cta:hover,.tier-cta:focus-visible{color:var(--white);}
.tier-cta:hover::after,.tier-cta:focus-visible::after{transform:scaleX(1);}
.tier-cta:hover .ar,.tier-cta:focus-visible .ar{transform:translateX(4px);}

/* progressive enquiry form */
.form-step{
  border-top:1px solid var(--rule-soft);padding-top:var(--s4);
}
.form-step:first-of-type{border-top:0;padding-top:0;}
.step-n{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h3);line-height:1.15;letter-spacing:-0.015em;
  color:var(--red-text);display:block;margin-bottom:var(--s2);
}
.field .opt{color:var(--white-quiet);text-transform:none;letter-spacing:0;font-style:italic;}
.reveal-step{display:none;}
.reveal-step.on{display:block;animation:stepIn .45s var(--ease) both;}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal-step.on{animation:none;}}
.recap{
  border:1px solid var(--rule-soft);border-left:2px solid var(--red);
  background:var(--ink-2);padding:var(--s3) var(--s4);
  font-family:var(--mono);font-size:var(--t-cap-68);letter-spacing:0.06em;line-height:1.9;
  color:var(--white-dim);
}
.recap b{color:var(--white);font-weight:500;}
.recap .recap-k{
  display:block;font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-quiet);margin-bottom:var(--s2);
}

/* v4 — coverage cards demoted h3 → h4 for correct hierarchy; keep the h3 look */
.panel h4{
  font-family:var(--display);font-weight:400;line-height:1.15;letter-spacing:-0.015em;
  font-size:var(--t-h3);margin-bottom:var(--s3);
}

/* v4 — three-up deliverable grids on the situation pages */
@media (min-width:960px){.help-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* ============================================================
   v4.1 — deliverables page refinements
   ============================================================ */

/* headline highlight — red block behind the opening clause, like a
   marker-pen highlight. Kept to one line so the block reads as a single
   deliberate stamp rather than an accidental paragraph wrap. */
.hl-mark{
  background:var(--red);color:var(--white);font-weight:700;
  padding:0.02em 0.28em;white-space:nowrap;display:inline-block;
}
/* the headline stamp on a longer line: same block, but allowed to wrap,
   with the fill following each line */
.hl-mark--wrap{
  display:inline;white-space:normal;font-weight:inherit;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* same red marker stamp, for a run inside body copy: keeps the surrounding
   text's weight and size, and wraps cleanly if it runs onto a second line */
.hl-mark--text{
  background:var(--red);color:var(--white);
  padding:0.02em 0.28em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* centred, equal-width tab strip */
.tabs-center{
  justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  /* stop the browser's scroll-anchoring from nudging this strip sideways
     when resizing across the mobile breakpoint — it was leaving the first
     tab (Websites) scrolled out of view on the left */
  overflow-anchor:none;
}
.tabs-center::-webkit-scrollbar{display:none;}
.tabs-center .tab-btn{
  display:inline-flex;flex-direction:column;align-items:center;text-align:center;
  flex:none;padding-inline:clamp(0.9em,2.2vw,1.7em);
}
.tabs-center .tab-btn .tn{margin:0 0 0.4em;}

/* mobile — no horizontal scrolling: matches the Our Work page's filter
   row (.filters), which simply wraps its buttons onto as many lines as
   needed instead of scrolling or forcing a fixed grid. */
.tab-lbl-short{display:none;}
@media (max-width:759px){
  .tabs-center{
    flex-wrap:wrap;overflow-x:visible;
  }
  .tabs-center .tab-btn{
    flex:none;min-width:0;
  }
  .tab-lbl-full{display:none;}
  .tab-lbl-short{display:inline;}
}

/* tier card — meta line replaces the old page/screen-count restatement */
.tier-meta{
  display:block;font-family:var(--mono);font-size:var(--t-cap-62);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--white-quiet);
}

/* contact form — indicative price under the size select */
.size-price{
  font-family:var(--mono);font-size:var(--t-cap-66);letter-spacing:0.06em;
  color:var(--red-text);margin-top:var(--s2);
}

/* anchor targets land clear of the fixed nav */
#form-start{scroll-margin-top:6.5rem;}
#deliverables{scroll-margin-top:6.5rem;}

/* ============================================================
   "WHY NOW" — a cursor-tracking spotlight that warms the body
   copy from dim-white to red around the pointer. Dark band, as
   the rest of the page.
   ============================================================ */
@property --sr{
  syntax:"<length>";
  inherits:true;
  initial-value:0px;
}

/* "Why we exist" copy: same treatment as "Why now" below, in a narrower column */
#exist .rail-body.rich p{
  max-width:48.6ch;
}
/* "humans, business and technology" reads as a fixed red anchor, slightly
   bolder than body copy but short of a full bold weight, in every state */
#exist .rail-body strong{
  color:var(--red-text);
  font-weight:600;
}

/* base / no-JS / reduced-motion: the normal dark-band treatment.
   size sits between body copy and the hero lead paragraph.
   shared by every cursor-spotlight section (Why now, Why we exist). */
.shift-spot .rail-body p{
  color:var(--white-dim);
  font-size:clamp(1.03rem,1.3vw,1.2rem);
  line-height:1.75;
}
.shift-spot .rail-body strong{color:var(--white);}

/* spotlight mode — added by JS only on a fine pointer with motion allowed */
.shift-spot.spot .rail-body{
  --sr:0px;
  --mx:50%;
  --my:35%;
}
.shift-spot.spot.spot-on .rail-body{--sr:120px;}
.shift-spot.spot .rail-body p{
  color:transparent;
  /* solid red disc with a hard edge at the spotlight radius — no fade.
     painted at the size of the whole .rail-body, then windowed into each
     paragraph via background-position, so the circle reads as one spotlight
     moving across the full text block rather than a separate one per <p>. */
  background-image:radial-gradient(
    circle var(--sr) at var(--mx) var(--my),
    var(--red-text) 0%,
    var(--red-text) 100%,
    var(--white-dim) 100%
  );
  background-size:var(--bw) var(--bh);
  background-position:calc(var(--px) * -1) calc(var(--py) * -1);
  -webkit-background-clip:text;
  background-clip:text;
  transition:--sr .5s cubic-bezier(.22,.61,.36,1);
}
/* "Why we exist" spotlight warms to solid white instead of red */
#exist.shift-spot.spot .rail-body p{
  background-image:radial-gradient(
    circle var(--sr) at var(--mx) var(--my),
    var(--white) 0%,
    var(--white) 100%,
    var(--white-dim) 100%
  );
}
/* emphasis stays bright white, a focal point the red pool sweeps past */
.shift-spot.spot .rail-body strong{color:var(--white);}

/* start page "Not ready yet?": whole card is the click target, and hovering
   anywhere on it drives the link's own hover state */
#notReadyCards .panel{cursor:pointer;}
#notReadyCards .panel:hover .hl .ar{transform:translateX(6px);}
#notReadyCards .panel:hover .hl::after{transform:scaleX(1);}

/* ---------- footer social icons: grey, solid white on hover ---------- */
.foot-col .foot-social{display:flex;gap:var(--s3);margin-top:calc(var(--s3) + 20px);}
.foot-col .foot-social a{
  width:24px;height:24px;min-height:0;color:var(--white-faint);justify-content:center;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.foot-col .foot-social a:hover,.foot-col .foot-social a:focus-visible{color:#fff;transform:translateY(-2px);}
.foot-col .foot-social svg{width:100%;height:100%;display:block;}
@media (prefers-reduced-motion:reduce){.foot-col .foot-social a:hover{transform:none;}}

/* ---------- how-we-work: who does what inside a phase ---------- */
.roles{margin-top:var(--s4);border-top:1px solid var(--rule-soft);max-width:62ch;}
.roles > div{
  display:grid;grid-template-columns:1fr;gap:var(--s1);
  padding-block:var(--s3);border-bottom:1px solid var(--rule-soft);
}
@media (min-width:640px){.roles > div{grid-template-columns:9rem minmax(0,1fr);gap:var(--s4);}}
.roles dt{
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--white-dim);padding-top:0.4em;transition:color .4s var(--ease);
}
.roles dd{font-family:var(--serif);font-size:0.95rem;line-height:1.7;color:var(--white-dim);margin:0;transition:color .4s var(--ease);}
.roles .you dt{color:var(--red-text);}
.roles .you dd{color:var(--white);}
.roles > div:hover dd{color:var(--white);}

/* ---------- how-we-work: the loop. The red marker steps through the four cards in turn ---------- */
.quad.loop .qd::before{animation:loopStep 12s var(--ease) infinite;}
.quad.loop .qd:nth-child(2)::before{animation-delay:3s;}
.quad.loop .qd:nth-child(3)::before{animation-delay:6s;}
.quad.loop .qd:nth-child(4)::before{animation-delay:9s;}
.quad.loop .qd:hover::before{animation:none;}
@keyframes loopStep{
  0%{width:0;}
  6%,22%{width:2.5rem;}
  30%,100%{width:0;}
}

/* ---------- home: tighter "How can we help" cards (carried over from v10) ---------- */
#helpGridBuild.help-tight .help{min-height:0;padding-top:var(--s3);}
#helpGridBuild.help-tight .help-top{margin-bottom:var(--s3);}
#helpGridBuild.help-tight .help-q{margin-bottom:0;}
#helpGridBuild.help-tight .help h3{margin-bottom:var(--s3);}
#helpGridBuild.help-tight .help .hp{margin-bottom:var(--s3);}

/* ---------- home: "Why now" heading in the left rail, "How we work" heading held to two lines ---------- */
#shift .rail-label h2{margin:0;}
.hww-h .br-wide{display:none;}
@media (min-width:900px){.hww-h .br-wide{display:inline;}}

/* ---------- what-we-do: capability rail labels read red, with the number in grey ---------- */
#capabilities .wwd-cap .rail-label .plate{color:var(--red-text);}
#capabilities .wwd-cap .rail-label .plate .n{color:var(--white-dim);}
/* chips follow the paragraph directly now the "Where we add value" label is gone */
#capabilities .wwd-cap .rich + .chips{margin-top:var(--s4);}

/* ---------- page hero heading held to two lines: first phrase, then the italic phrase ---------- */
.phero h1.h-2line .ital{display:block;}
@media (min-width:600px){.phero h1.h-2line{max-width:none;white-space:nowrap;}}
/* what-we-make: "Built around people." is too long for a phone at the full
   display size, so the heading scales with the screen to stay on two lines */
@media (max-width:599px){.phero-whatwemake h1.h-2line{font-size:min(var(--t-display,2.9rem),10vw);white-space:nowrap;}}

/* how-we-work: the loop header is set on two lines, so it steps down on phones to stay on two */
@media (max-width:640px){#loop h2{font-size:calc(var(--t-h2) * 0.78);}}

/* how-we-work: two-line stage headings */
.wwd-cap h2.h-two-line{max-width:none;}
@media (max-width:640px){.wwd-cap h2.h-two-line{font-size:calc(var(--t-h2) * 0.82);}}

/* how-we-work "What it means for you": four cards stay on one row from tablet up */
.quad.quad-4{grid-template-columns:1fr;}
@media (min-width:560px){.quad.quad-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:768px){.quad.quad-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4);}}
@media (min-width:1080px){.quad.quad-4{gap:var(--s5) var(--s6);}}

/* how-we-work stages: AI does / People decide / You sit side by side */
#stages .roles{display:grid;grid-template-columns:1fr;gap:var(--s3) var(--s4);max-width:none;border-top:0;}
#stages .roles > div{display:block;padding-block:var(--s3) 0;border-bottom:0;border-top:1px solid var(--rule-soft);}
#stages .roles dt{padding-top:0;margin-bottom:var(--s2);}
@media (min-width:640px){#stages .roles{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* capability label + chip sit under the stage number on the left */
#stages .rail-label .stage-cap{margin-top:var(--s3);gap:var(--s2);}
@media (max-width:899px){#stages .rail-label .stage-cap{margin-top:var(--s2);margin-bottom:var(--s2);}}

/* how-we-work stages: number grey, stage name red; "Capability" label grey */
#stages .wwd-cap > .rail-label .plate{color:var(--red-text);}
#stages .wwd-cap > .rail-label .plate .n{color:var(--white-dim);}
#stages .wwd-cap > .rail-label .stage-cap .wwd-help{color:var(--white-dim);}

/* how-we-work "What it means for you": trust green in place of red */
#benefits .red,#benefits .plate .n,#benefits .qd h3{color:var(--trust);}
#benefits .qd{padding-top:2rem;}   /* no card numbers, so the title sits a set distance under the keyline */
#benefits .qd::before{background:var(--trust);}

/* how-we-work "Sized to fit": two-line heading may run a little past the narrow label column into the gutter */
@media (min-width:900px){#challenge .rail-label h2{white-space:nowrap;}}

/* how-we-work stages: hovering AI does / People decide turns the label red and the text white */
#stages .roles > div:hover dt{color:var(--red-text);}
#stages .roles > div:hover dd{color:var(--white);}

/* how-we-work: breathing room under the last stage before the keyline */
#stages .wwd-cap#stage-evolve:last-child{padding-bottom:var(--s5);}

/* how-we-work: the keyline above "Better products, in less time" is solid white */
#benefits.band.hairline::before{background:var(--white);}

/* how-we-work: the keyline above "Five stages" is red */
#stages.band.hairline::before{background:var(--red);}

/* how-we-work: "Built for how products get made today" uses the tablet heading size on desktop too */
#iterative .rail-label h2{font-size:2.25rem;}   /* 36px, the size it has on tablet */

/* home: the five how-we-work stages sit on one row on wide screens */
@media (min-width:1080px){#how-we-work .quad.quad-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5) var(--s4);}}

/* how-we-work stages: more room on both sides of the keyline between stages */
#stages .wwd-cap{padding-bottom:calc(var(--s7) * 0.7);}
#stages .stage-connector{padding-bottom:calc(var(--s7) * 0.7);}
#stages .wwd-cap + .wwd-cap,
#stages .stage-connector + .wwd-cap,
#stages .wwd-cap + .stage-connector{padding-top:calc(var(--s7) * 0.7);}
#stages .wwd-cap#stage-evolve:last-child{padding-bottom:var(--s5);}

/* how-we-work stages: the two "Validate & test" steps keep their original spacing,
   and so do the stages either side of them */
#stages .stage-connector{padding-bottom:var(--s5);}
#stages .wwd-cap:has(+ .stage-connector){padding-bottom:var(--s5);}
#stages .wwd-cap + .stage-connector,
#stages .stage-connector + .wwd-cap{padding-top:var(--s5);}

/* how-we-work: stages 04 and 05 get the same room between the keyline and the heading as 02 and 03 */
#stages .stage-connector + .wwd-cap{padding-top:calc(var(--s7) * 0.7);}

/* home: the how-we-work stage cards sit two to a row on phones */
@media (max-width:639px){
  #how-we-work .quad.quad-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3);}
  #how-we-work .quad.quad-5 .qd h3{font-size:1.35rem;}
  /* four cards on phones: Evolve is left off so the grid is a clean 2 x 2 */
  #how-we-work .quad.quad-5 .qd:nth-child(5){display:none;}
}

/* home: no three-circle diagram on phones; the copy stands alone */
@media (max-width:759px){.idea-grid > .idea-art{display:none;}}

/* case studies, phones: Next sits above Previous (alignment stays with each link) */
@media (max-width:759px){
  .pager a:last-child{order:-1;border-top:0;}
  .pager a:first-child{border-top:1px solid var(--rule-soft);}
}

/* what-we-do: "We create & improve" scales with the screen so the heading stays on two lines on phones */
@media (max-width:599px){.phero-whatwedo h1.h-2line{font-size:min(var(--t-display,2.9rem),9vw);white-space:nowrap;}}

/* home: "Find where to start" and "About" no longer have a small label, so on stacked layouts the empty label column collapses */
@media (max-width:899px){#what-we-build .rail-label:empty,#about .rail-label:empty{display:none;}}

/* what-we-do: "Five capabilities" and "How can we help" no longer carry a small label, so the empty label column collapses when stacked */
@media (max-width:899px){#capabilities .rail-label:empty,#situations .rail-label:empty{display:none;}}