/* =============================================================
   UGARSOFT GROUP Design System
   Palette sampled directly from the corporate mark (imgs/logo.png):
     rust  #AA2F04  (cube side faces + wordmark)
     sand  #C69C6D  (cube top faces)
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand, straight off the logo */
  --rust:        #AA2F04;
  --rust-deep:   #7E2203;
  --rust-lit:    #D9481A;
  --rust-glow:   #FF6A34;
  --sand:        #C69C6D;
  --sand-lit:    #E3C8A6;
  --sand-pale:   #F0E2D1;

  /* Warm neutral ground, hue-matched to the rust so nothing reads grey */
  --ink:         #0C0908;
  --ink-2:       #15100E;
  --ink-3:       #201917;
  --ink-4:       #2E2422;
  --paper:       #F7F3EE;
  --paper-2:     #EDE5DA;
  --paper-3:     #DCD0C1;

  /* Semantic, flipped by [data-theme] on each section */
  --bg:          var(--ink);
  --bg-soft:     var(--ink-2);
  --fg:          var(--paper);
  --fg-muted:    rgba(247, 243, 238, .58);
  --fg-faint:    rgba(247, 243, 238, .34);
  --rule:        rgba(247, 243, 238, .13);
  --rule-strong: rgba(247, 243, 238, .26);
  /* --accent is the pure brand colour, used for fills, bars and canvas.
     --accent-text is the legible-on-this-ground version used for type and
     hairlines. --accent-ink is what sits on top of a solid accent fill. */
  --accent:         var(--rust);
  --accent-2:       var(--sand);
  --accent-on-dark: var(--rust-lit);
  --accent-on-light:var(--rust);
  --accent-text:    var(--rust-lit);
  --accent-ink:     #FFF;

  /* Type */
  --f-display: "Space Grotesk", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --f-serif:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale, 380px to 1600px viewport */
  --t-hero:  clamp(2.75rem, 1.05rem + 7.1vw, 8.25rem);
  --t-xxl:   clamp(2.25rem, 1.15rem + 4.6vw, 5.5rem);
  --t-xl:    clamp(1.75rem, 1.12rem + 2.6vw, 3.5rem);
  --t-lg:    clamp(1.35rem, 1.05rem + 1.25vw, 2.125rem);
  --t-md:    clamp(1.0625rem, .99rem + .31vw, 1.25rem);
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;
  --t-label: .6875rem;

  /* Space */
  --gut:     clamp(1.25rem, .55rem + 2.9vw, 4.5rem);
  --sec:     clamp(5rem, 2.6rem + 10vw, 12.5rem);
  --sec-sm:  clamp(3.25rem, 1.9rem + 5.6vw, 7rem);
  --maxw:    1680px;
  --nav-h:   84px;

  /* Motion */
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-io:    cubic-bezier(.65, .05, .18, 1);
  --e-spring:cubic-bezier(.34, 1.42, .48, 1);

  --radius:  2px;
}

[data-theme="light"] {
  --bg:          var(--paper);
  --bg-soft:     var(--paper-2);
  --fg:          var(--ink);
  --fg-muted:    rgba(12, 9, 8, .62);
  --fg-faint:    rgba(12, 9, 8, .36);
  --rule:        rgba(12, 9, 8, .13);
  --rule-strong: rgba(12, 9, 8, .3);
}

/* Per-brand accents. Each subsidiary keeps its own signal colour,
   the rust/sand chrome stays constant so the group reads as one house.

   Each brand carries four values because one colour cannot do every job:
   the brand hex itself is often unreadable as small type on one of the two
   grounds. The -on-dark / -on-light variants hold the same hue and
   saturation and move only lightness, until they clear 4.5:1. */
[data-brand="xend"] {
  --accent: #2042B8; --accent-2: #7E9BF0;
  --accent-on-dark: #5373E1;        /* #2042B8 is only 2.4:1 on the ink ground */
  --accent-on-light: #2042B8;
  --accent-text: #5373E1;
  --accent-ink: #FFF;
}
[data-brand="wicrypt"] {
  --accent: #E5B90F; --accent-2: #F7D75E;
  --accent-on-dark: #E5B90F;
  --accent-on-light: #836A09;       /* gold on paper is 1.7:1, so type darkens */
  --accent-text: #E5B90F;
  --accent-ink: var(--ink);         /* white on gold is 1.9:1 */
}
[data-brand="hammer"] {
  --accent: #9BCC15; --accent-2: #C6E85F;
  --accent-on-dark: #9BCC15;
  --accent-on-light: #5A760C;       /* lime on paper is 1.7:1, so type darkens */
  --accent-text: #9BCC15;
  --accent-ink: var(--ink);         /* white on lime is 1.9:1 */
}
[data-brand="ogwugo"] {
  --accent: #CF2803; --accent-2: #FF6A42;
  --accent-on-dark: #EB2D03;
  --accent-on-light: #CF2803;
  --accent-text: #EB2D03;
  --accent-ink: #FFF;
}
/* Forge amber, taken from the Quantum Forge Labs mark. */
[data-brand="quantum"] {
  --accent: #F7A33E; --accent-2: #FFC98A;
  --accent-on-dark: #F7A33E;
  --accent-on-light: #9A5A05;       /* amber on paper is 1.9:1, so type darkens */
  --accent-text: #F7A33E;
  --accent-ink: var(--ink);         /* white on amber is 2.1:1 */
}
[data-brand="group"] {
  --accent: var(--rust); --accent-2: var(--sand);
  --accent-on-dark: var(--rust-lit);
  --accent-on-light: var(--rust);
  --accent-text: var(--rust-lit);
  --accent-ink: #FFF;
}

/* Must follow the brand blocks: on a light band the text token swaps to the
   darkened variant. Custom properties resolve per element, so a section
   carrying both data-theme and data-brand picks up its own brand's value. */
[data-theme="light"] { --accent-text: var(--accent-on-light); }
[data-theme="dark"]  { --accent-text: var(--accent-on-dark); }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Native scrolling, native smooth anchors. The wheel is the visitor's. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.62;
  font-weight: 380;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--rust); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- 3. Type primitives ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.em {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--sand);
}
[data-theme="light"] .em { color: var(--rust); }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-faint);
}
.label--accent { color: var(--accent-text); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: var(--accent-text);
  flex: none;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.42;
  letter-spacing: -.018em;
  font-weight: 380;
  color: var(--fg);
  text-wrap: pretty;
}
.muted { color: var(--fg-muted); }
.measure   { max-width: 62ch; }
.measure-s { max-width: 46ch; }

/* ---------- 4. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--sec);
  z-index: 1;
}
.section--tight { padding-block: var(--sec-sm); }
.section--flush-top { padding-top: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.rule { height: 1px; background: var(--rule); border: 0; }

/* Section heading block */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sec-head h2 { font-size: var(--t-xxl); }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* ---------- 5. Buttons ---------- */
/* Colour comes from context (currentColor), so a button dropped on the
   inverted nav or a light section stays legible without a variant class. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.0625rem 1.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: inherit;
  border: 1px solid var(--rule-strong);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s var(--e-out), border-color .25s var(--e-out);
  will-change: transform;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .25s var(--e-out);
}
.btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.btn:hover::before { transform: translateY(0); }
.btn__arrow { transition: transform .25s var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--solid::before { background: var(--fg); transform: translateY(101%); }
.btn--solid:hover { color: var(--bg); border-color: var(--fg); }

/* Text link with a wiping underline */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .25rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .25s var(--e-out);
}
.tlink:hover::after { transform: scaleX(0); transform-origin: left; }
.tlink svg { transition: transform .25s var(--e-out); }
.tlink:hover svg { transform: translate(3px, -3px); }

/* ---------- 6. Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--paper);
  transition: color .25s var(--e-out), background-color .25s var(--e-out),
              backdrop-filter .25s var(--e-out), transform .25s var(--e-out);
  mix-blend-mode: normal;
}
.nav.is-inverted { color: var(--ink); }
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(247, 243, 238, .1);
}
.nav.is-stuck.is-inverted {
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  border-bottom-color: rgba(12, 9, 8, .1);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brandmark { display: flex; align-items: center; gap: .7rem; flex: none; }
.brandmark svg { width: 30px; height: 30px; }
.brandmark__wordmark {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); margin-left: auto; }
.nav__link {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .5rem 0;
  opacity: .78;
  transition: opacity .25s var(--e-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { flex: none; padding: .8125rem 1.375rem; }

/* Burger + drawer */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  position: relative;
  flex: none;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--e-out), opacity .3s;
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--nav-h) + 2rem) var(--gut) 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 44px) 42px);
  pointer-events: none;
  transition: clip-path .25s var(--e-out);
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 42px); pointer-events: auto; }
.drawer__list { display: flex; flex-direction: column; }
.drawer__list a {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  letter-spacing: -.035em;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .25s var(--e-out), transform .25s var(--e-out);
}
.drawer.is-open .drawer__list a { opacity: 1; transform: none; }
.drawer__list a i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-faint);
}
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: .35rem; }

@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .burger { display: block; }
  .nav__cta { display: none; }
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 1rem 1.5rem;
  background: var(--rust);
  color: #fff;
}
.skip:focus { left: 0; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + 3rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
/* Composition: the cube field lives on the right, the type sits on
   near-black at the left. Three stacked washes get there. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--ink) 4%, rgba(12,9,8,.9) 30%, rgba(12,9,8,.42) 58%, rgba(12,9,8,.06) 86%),
    linear-gradient(to top, var(--ink) 1%, rgba(12,9,8,.72) 30%, rgba(12,9,8,.1) 70%),
    radial-gradient(110% 70% at 88% 6%, transparent 30%, rgba(12,9,8,.55) 80%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero__veil {
    background:
      linear-gradient(to top, var(--ink) 6%, rgba(12,9,8,.82) 44%, rgba(12,9,8,.3) 100%);
  }
}
.hero__inner { width: 100%; position: relative; }
.hero__title {
  font-size: var(--t-hero);
  letter-spacing: -.045em;
  max-width: 15ch;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* The one loop kept on the site. It is an instruction, not decoration: a
   still line reads as a stray mark, where a line travelling downward tells
   you which way the page goes. Slow, low-contrast, and out of sight the
   moment you scroll past the hero. */
.hero__scroll i {
  display: block;
  width: 1px; height: 34px;
  background: linear-gradient(var(--sand), transparent);
  transform-origin: top;
  animation: scrollPulse 2.4s var(--e-io) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(34px); opacity: 0; }
}
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* Page hero (interior) */
.phero {
  position: relative;
  min-height: clamp(56vh, 40vh + 18vw, 88vh);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + 4rem) clamp(2.5rem, 5vw, 4.5rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.phero__canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.phero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--ink) 4%, rgba(12,9,8,.5) 48%, rgba(12,9,8,.2) 100%);
}
.phero h1 { font-size: var(--t-xxl); max-width: 18ch; }
.phero__crumbs {
  display: flex; gap: .625rem; align-items: center;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.phero__crumbs a:hover { color: var(--paper); }

/* ---------- 8. Reveal ---------- */
/* A single effect for the whole site: a short fade with a few pixels of
   travel, once, as a section arrives. No word-by-word wipes, no zooms. */
[data-rise], [data-lines], [data-scale] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease-out, transform .45s ease-out;
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in, [data-lines].is-in, [data-scale].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 9. Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.stat {
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) 0;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 1rem + 4.4vw, 5rem);
  letter-spacing: -.05em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.stat__num sub { font-size: .38em; vertical-align: baseline; bottom: 0; position: relative; color: var(--sand); letter-spacing: -.02em; }
.stat__label { margin-top: .875rem; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.45; max-width: 22ch; }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---------- 10. Businesses grid ---------- */
/* Five across on one row: the whole group is visible without scrolling. */
.bizgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.75rem, 1vw, 1.125rem);
}
.bizcard {
  --c: var(--accent-text);
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 30vw, 460px);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: border-color .25s var(--e-out), transform .25s var(--e-out);
}
.bizcard:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }

/* Logo plate. Each company's mark comes at a different aspect and weight, so
   the plate fixes the height and lets the mark size itself inside it. */
.bizcard__plate {
  position: relative;
  display: block;
  height: clamp(148px, 12.5vw, 190px);
  background: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
/* Absolutely positioned against the plate, so its content box has a definite
   height — a plain block, not a grid, because a percentage height against a
   content-sized grid row falls back to auto. */
.bizcard__logo {
  position: absolute;
  inset: 0;
  padding: clamp(1.625rem, 2.4vw, 2.125rem) clamp(1rem, 1.6vw, 1.5rem);
}
/* These marks ship at tiny intrinsic sizes (Xend's SVG is 105x43), so a
   max-width/max-height cap would never scale them up. Filling a definite box
   and letting object-fit hold the aspect ratio scales both ways. */
.bizcard__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* a square badge sits in a tighter box, or it towers over the wordmarks */
.bizcard__logo--badge { padding: clamp(.625rem, 1vw, .875rem); }
.bizcard__logo--text { display: grid; place-items: center; }
.bizcard__wip {
  position: absolute;
  top: .625rem;
  right: .625rem;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  padding: .25rem .4rem;
  line-height: 1;
}
/* no logo yet: set the name instead of inventing a mark */
.bizcard__logo--text {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-align: center;
  color: var(--paper);
}

.bizcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.125rem, 1.6vw, 1.75rem);
}
.bizcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bizcard__meta i { font-style: normal; color: var(--c); flex: none; }
.bizcard__sector { color: rgba(247,243,238,.5); text-align: right; }
.bizcard__name {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 1.7vw, 1.875rem);
  letter-spacing: -.04em;
  line-height: .98;
  color: var(--paper);
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
}
.bizcard__desc {
  font-size: var(--t-sm);
  color: rgba(247,243,238,.62);
  line-height: 1.55;
  margin-top: .75rem;
}
.bizcard__go {
  margin-top: auto;
  padding-top: clamp(1rem, 1.8vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}
.bizcard__go svg { transition: transform .25s var(--e-out); }
.bizcard:hover .bizcard__go svg { transform: translateX(5px); }

@media (max-width: 1180px) { .bizgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .bizgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .bizgrid { grid-template-columns: 1fr; } }

/* The same marks, reused in the company-page heroes */
/* Company-page hero: the mark sits over the sketch in the open right-hand
   half, clear of the headline, which is bottom-left and capped at 18ch. */
.phero__logo {
  position: absolute;
  top: 46%;
  right: clamp(2rem, 7vw, 7rem);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(200px, 26vw, 380px);
  height: clamp(130px, 18vw, 240px);
  pointer-events: none;
  isolation: isolate;
}
.phero__logo::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, rgba(12, 9, 8, .72), rgba(12, 9, 8, 0));
  z-index: -1;
}
.phero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.phero__logo--badge img { width: 55%; }
.phero__logo--text {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-align: center;
  color: var(--paper);
  text-wrap: balance;
}
/* once the headline needs the full width, the mark moves up out of its way */
@media (max-width: 900px) {
  .phero__logo {
    top: calc(var(--nav-h) + 1rem);
    right: var(--gut);
    transform: none;
    width: clamp(120px, 32vw, 190px);
    height: clamp(72px, 16vw, 110px);
  }
}

/* businesses.html: the mark sits in the visual panel, over its sketch. The
   panel is always the ink ground, so no mark needs flipping. */
.visual--logo .sec-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
}
.visual--logo .sec-logo img {
  width: min(58%, 320px);
  height: 40%;
  object-fit: contain;
}
/* a soft scrim, not a drop shadow: a dark shadow on the ink ground just reads
   as a smudge behind the mark */
.visual--logo .sec-logo::before {
  content: "";
  position: absolute;
  inset: 22%;
  background: radial-gradient(closest-side, rgba(12, 9, 8, .78), rgba(12, 9, 8, 0));
  z-index: -1;
}
.visual--logo .sec-logo { isolation: isolate; }
.visual--logo .sec-logo--badge img { width: min(38%, 200px); height: 55%; }
.visual--logo .sec-logo--text {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-align: center;
  color: var(--paper);
  text-wrap: balance;
}

/* ---------- 11. Statement + scroll-driven canvas ---------- */
.statement { position: relative; }
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.statement h2 { font-size: var(--t-xl); }
.forge {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.forge canvas { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; }
  .forge { max-width: 420px; margin-inline: auto; order: -1; }
}

/* ---------- 12. Capability list ---------- */
/* ---------- Newsroom ----------
   Same editorial row as .cap, but each row is a link out to the original
   publication, and carries data-brand so the company name takes its own
   accent. */
.news-list { border-top: 1px solid var(--rule); }
.news {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 9rem auto;
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  transition: padding-inline .25s var(--e-out);
}
.news::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: -1;
  background: var(--bg-soft);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s var(--e-out);
}
.news:hover::before { transform: scaleY(1); }
.news:hover { padding-inline: 1.25rem; }
.news__date { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em; color: var(--fg-faint); }
.news__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  letter-spacing: -.032em;
  line-height: 1.1;
  text-wrap: pretty;
}
.news__desc { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.55; margin-top: .5rem; max-width: 62ch; }
.news__meta { display: grid; gap: .3rem; }
.news__co {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.news__src { font-size: var(--t-xs); color: var(--fg-faint); }
.news__go { color: var(--accent-text); opacity: 0; transform: translateX(-8px); transition: all .25s var(--e-out); }
.news:hover .news__go { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .news { grid-template-columns: 1fr auto; row-gap: .625rem; align-items: start; }
  .news__date { grid-column: 1; }
  .news__go { grid-column: 2; grid-row: 1; opacity: 1; transform: none; }
  .news__body { grid-column: 1 / -1; }
  .news__meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: .75rem; align-items: baseline; }
}

.caps { border-top: 1px solid var(--rule); }
.cap {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 2.6vw, 2.375rem);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  transition: padding-inline .25s var(--e-out), color .25s var(--e-out);
}
.cap::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: -1;
  background: var(--bg-soft);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s var(--e-out);
}
.cap:hover::before { transform: scaleY(1); }
.cap:hover { padding-inline: 1.25rem; }
.cap__no { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .16em; color: var(--fg-faint); }
.cap__name { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: -.032em; line-height: 1.06; }
.cap__desc { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.55; }
.cap__mark { color: var(--accent-text); opacity: 0; transform: translateX(-8px); transition: all .25s var(--e-out); }
.cap:hover .cap__mark { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .cap { grid-template-columns: 3rem 1fr; row-gap: .625rem; }
  .cap__desc { grid-column: 2; }
  .cap__mark { display: none; }
}

/* ---------- 13. Cards / tiles ---------- */
/* Rules are drawn by the children, not by a coloured container behind a 1px
   gap. Otherwise a part-filled last row shows the container as a grey slab. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.tile {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: clamp(220px, 22vw, 300px);
  overflow: hidden;
  isolation: isolate;
  transition: background .25s var(--e-out);
}
.tile::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--e-out);
}
.tile:hover { background: var(--bg-soft); }
.tile:hover::before { transform: scaleX(1); }
.tile__no { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.tile h3 { font-size: var(--t-lg); margin-top: auto; }
.tile p { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.55; }
.tile ul { display: grid; gap: .4rem; margin-top: .25rem; }
.tile li {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}
.tile li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px;
  background: var(--accent-text);
  transform: rotate(45deg);
}

/* ---------- 14. Feature split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
.split h2 { font-size: var(--t-xl); }
.visual {
  position: relative;
  aspect-ratio: 4 / 3.2;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.visual canvas { width: 100%; height: 100%; }

/* A real product shot rather than a generated sketch. The image is cropped to
   the same box; the caption names what is being shown so the picture is read
   against the paragraph beside it. */
.visual--shot { margin: 0; background: var(--bg-soft); }
.visual--shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.visual--shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .75rem 1rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: #F7F3EE;
  background: linear-gradient(to top, rgba(12, 9, 8, .82), rgba(12, 9, 8, 0));
  padding-top: 2.75rem;
  pointer-events: none;
}
.visual--shot::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(247, 243, 238, .08);
  pointer-events: none;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
}

/* ---------- 15. People ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.person {
  background: var(--bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 180px;
  transition: background .25s var(--e-out);
}
.person:hover { background: var(--bg-soft); }
.person__initials {
  font-family: var(--f-display);
  font-size: 1.75rem;
  letter-spacing: -.04em;
  color: var(--accent-text);
  margin-bottom: auto;
}
.person__name { font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.022em; line-height: 1.2; }
.person__role { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }

/* ---------- 16. Clients ---------- */
.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.client {
  background: var(--bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.25rem, 2.2vw, 2rem);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background .25s var(--e-out);
}
.client:hover { background: var(--bg-soft); }
.client__name { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.03em; }
.client__sector { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.client p { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.55; margin-top: auto; }

/* ---------- 17. Offices ---------- */
.offices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.office { background: var(--bg); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1.5rem, 2.6vw, 2.5rem); min-height: 250px; display: flex; flex-direction: column; gap: .5rem; }
.office h3 { font-size: var(--t-lg); }
.office__addr { font-size: var(--t-sm); color: var(--fg-muted); margin-top: auto; line-height: 1.55; }
@media (max-width: 820px) { .offices { grid-template-columns: 1fr; } }

/* ---------- 18. CTA ---------- */
.cta { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate; }
.cta canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .55; }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 120% at 50% 100%, rgba(170,47,4,.28), transparent 62%);
}
.cta h2 { font-size: var(--t-xxl); }

/* ---------- 19. Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 5.5rem) 2rem; border-top: 1px solid var(--rule); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.footer__col h4 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer__col ul { display: grid; gap: .625rem; }
.footer__col a { font-size: var(--t-sm); color: rgba(247,243,238,.72); transition: color .25s var(--e-out); }
.footer__col a:hover { color: var(--sand); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------- 20. Forms ---------- */
.field { position: relative; border-bottom: 1px solid var(--rule); padding-top: 1.5rem; }
.field label {
  position: absolute;
  top: 1.6rem; left: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  pointer-events: none;
  transition: transform .25s var(--e-out), font-size .25s var(--e-out), color .25s var(--e-out);
  transform-origin: left;
}
.field input, .field textarea {
  width: 100%;
  padding: .375rem 0 .875rem;
  font-size: var(--t-md);
  color: var(--fg);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--accent-text); }
.field:focus-within label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.55rem) scale(.82);
  color: var(--accent-text);
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }

/* ---------- 21. Utility ---------- */
.parallax { will-change: transform; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pill i { width: 6px; height: 6px; background: var(--accent-text); border-radius: 50%; }
/* Status marker for a company that isn't operating yet */
.pill--wip { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 42%, transparent); }
.pill--wip i { opacity: .85; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.stack   { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.stack-s { display: grid; gap: .75rem; }
.flow > * + * { margin-top: 1.125rem; }
.col-7  { grid-column: span 7; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px) { .col-7, .col-5, .col-6 { grid-column: span 12; } }

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise], [data-lines], [data-scale] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__scroll i { animation: none; }
}