/* ==========================================================================
   Postjer Group — postjer.org
   One stylesheet for the whole site. Restyle by editing the tokens below.
   ========================================================================== */

/* --- Tokens: light (default) --------------------------------------------- */
:root {
  --ground:      #ffffff;
  --ground-deep: #eef1f2;
  --surface:     #f5f7f8;
  --surface-hi:  #ffffff;
  --ink:         #0b1a26;
  --ink-soft:    #4a5a66;
  --ink-mute:    #5d6b74;
  --line:        #d6dde1;
  --line-soft:   #e6ebee;
  --accent:      #c33b16;
  --co-agency:   #8a6500;
  --co-ventures: #0f6b4f;
  --co-studio:   #2b3fd1;

  /* One face for the whole site, headings included. */
  --ff-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Small label size. Sentence case now, so it can be read at a normal size. */
  --t-label:  0.8125rem;
  --t-sm:    0.8125rem;
  --t-base:  0.9375rem;
  --t-md:    1.0625rem;
  --t-lg:    clamp(1.35rem, 2.2vw, 1.85rem);
  --t-xl:    clamp(1.9rem, 4vw, 3rem);
  --t-hero:  clamp(2.05rem, 4.3vw, 3.5rem);

  /* Subsidiary brand colours, identical in light and dark: a brand colour is
     not a theme value. Each carries the text colour that belongs on it, which
     is what makes yellow workable. Checked: yellow with dark type 10.2:1,
     green 6.5:1 and blue 7.7:1 with white. */
  --brand-group:        #ef4e24;
  --brand-agency:       #e9e10d;
  --brand-agency-ink:   #141007;
  --brand-ventures:     #4cb870;
  --brand-ventures-ink: #141007;
  --brand-studio:       #2b3fd1;
  --brand-studio-ink:   #ffffff;

  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 6px;

  --rail: 11rem;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --hair: 1px;
  --headerh: 4.25rem;
  --strip: 3.5rem;
  --stack-top: var(--headerh);
}

/* --- Tokens: dark -------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0b1115;
    --ground-deep: #070c0f;
    --surface:     #121a20;
    --surface-hi:  #18222a;
    --ink:         #e8edf0;
    --ink-soft:    #a0afb8;
    --ink-mute:    #8a99a3;
    --line:        #222e36;
    --line-soft:   #1a242b;
    --accent:      #ef4e24;
    --co-agency:   #f2b705;
    --co-ventures: #6fae93;
    --co-studio:   #8ba1e2;
  }
}
:root[data-theme="dark"] {
  --ground:      #0b1115;
  --ground-deep: #070c0f;
  --surface:     #121a20;
  --surface-hi:  #18222a;
  --ink:         #e8edf0;
  --ink-soft:    #a0afb8;
  --ink-mute:    #8a99a3;
  --line:        #222e36;
  --line-soft:   #1a242b;
  --accent:      #ef4e24;
  --co-agency:   #f2b705;
  --co-ventures: #6fae93;
  --co-studio:   #8ba1e2;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Primitives --------------------------------------------------------- */
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--edge); }
.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink-mute);
}
.display {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.lede {
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34em;
  text-wrap: pretty;
}
.arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.3,1); }

/* --- Logo ---------------------------------------------------------------
   The logo is assets/logo.svg, shown as a mask so it takes whatever colour
   the surrounding text has. That is how one file serves the group orange and
   each company's colour without a separate file per colour.
   While logo.svg is empty the mask covers everything and nothing is drawn,
   which is intended: better blank than a stand-in logo.
   The shape is taller than it is wide; adjust --logo-ratio if the supplied
   file has different proportions. */
:root { --logo-ratio: 0.45; }
.logomark {
  display: block;
  flex: none;
  height: 1.75rem;
  width: calc(1.75rem * var(--logo-ratio));
  background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat;
  mask: url("logo.svg") center / contain no-repeat;
}
.logomark--bar { height: 1.5rem; width: calc(1.5rem * var(--logo-ratio)); }
.logomark--big {
  height: clamp(2.6rem, 4.5vw, 3.4rem);
  width: calc(clamp(2.6rem, 4.5vw, 3.4rem) * var(--logo-ratio));
}
/* The group logo is always the official orange. */
.mark .logomark { color: var(--brand-group); }

/* --- Header ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--hair) solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.mark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mark__sub {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: .2em;
  color: var(--ink-mute);
}
.masthead nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 2.2vw, 1.6rem); }
.navpanel { display: flex; align-items: center; gap: clamp(.7rem, 2.2vw, 1.6rem); }
.navtoggle {
  display: none;
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-soft);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  transition: border-color .25s, color .25s;
}
.navtoggle:hover { border-color: var(--ink-mute); color: var(--ink); }

@media (max-width: 59.99rem) {
  /* The header scrolls away here so the stacking panels get the full
     viewport. Without this there is not enough height on a phone to stack
     three panels without cutting one off. */
  .masthead { position: static; }
  :root { --strip: 2.5rem; --stack-top: 0rem; }
}

@media (max-width: 51.99rem) {
  .navtoggle { display: block; }
  .navpanel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: var(--hair) solid var(--line);
    padding: .25rem var(--edge) .75rem;
  }
  .masthead.is-open .navpanel { display: flex; }
  .navpanel .navlink {
    padding-block: .95rem;
    border-bottom: var(--hair) solid var(--line-soft);
    font-size: var(--t-sm);
    letter-spacing: .1em;
  }
  .navpanel .navlink:last-child { border-bottom: 0; }
  .navpanel .navlink:hover { border-bottom-color: var(--line-soft); color: var(--ink); }
}
.navlink {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-soft);
  padding: .35rem 0;
  border-bottom: var(--hair) solid transparent;
  transition: color .25s, border-color .25s;
}
.navlink:hover { color: var(--ink); border-bottom-color: var(--accent); }
.navlink[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
/* The one place the official orange appears at full strength in the chrome. */
.navcta {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--brand-group);
  border: var(--hair) solid var(--brand-group);
  border-radius: var(--r-sm);
  padding: .55rem .85rem;
  white-space: nowrap;
  transition: background .25s, color .25s;
}
.navcta:hover { background: var(--brand-group); color: #fff; }
@media (max-width: 29.99rem) { .navcta { display: none; } }

.themetoggle {
  width: 2rem; height: 2rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: var(--hair) solid var(--line);
  color: var(--ink-soft);
  transition: border-color .25s, color .25s;
}
.themetoggle:hover { border-color: var(--ink-mute); color: var(--ink); }
.themetoggle svg { width: 14px; height: 14px; }

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section__head { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); text-align: center; }
.section__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
  margin-inline: auto;
  max-width: 20em;
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(3.25rem, 10vw, 8rem) clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.hero__eyebrow { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero__title { font-size: var(--t-hero); max-width: 16em; margin-inline: auto; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.hero__lede { margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3rem); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  border-radius: var(--r-sm);
  padding: .85rem 1.35rem;
  border: var(--hair) solid transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-primary { background: var(--ink); color: var(--ground); }
.btn-primary:hover { background: var(--brand-group); color: #fff; }
.btn-primary--lg {
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: none;
  padding: .95rem 1.6rem;
}
.btn-ghost { color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* --- Company panels ----------------------------------------------------
   A stack of brand-coloured panels. Each one sticks a little lower than the
   one before, so the previous panel's title bar stays visible as the next
   slides over it. Sticky only kicks in on wide screens: a panel taller than
   the sticky window would hide its own bottom half, so narrow screens get a
   plain vertical stack instead. */
.stack { padding-bottom: clamp(2rem, 5vw, 4rem); }
.stack__intro { padding-top: clamp(3.5rem, 8vw, 7rem); }
.panel {
  --veil-dot: color-mix(in srgb, var(--brand-ink) 34%, transparent);
  --veil-bg: color-mix(in srgb, var(--brand-ink) 10%, transparent);
  position: relative;
  width: min(56rem, calc(100% - 2 * var(--edge)));
  margin-inline: auto;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  /* A rule, not a glow: the card above reads as a layer because its edge is
     drawn, which is how print does it. */
  border-top: var(--hair) solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
}
.panel .wrap { padding-inline: clamp(1.15rem, 2.8vw, 2rem); max-width: none; }
.panel__inner { padding-block: 0 clamp(1.4rem, 3vw, 2rem); }
.panel__bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: var(--strip);
  flex: none;
}
.panel__name {
  font-family: var(--ff-body);
  font-size: var(--t-sm);
  letter-spacing: .005em;
}
.panel__pos {
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--brand-ink) 68%, transparent);
  font-variant-numeric: tabular-nums;
}
.panel__body { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); align-items: center; }
@media (min-width: 48rem) {
  .panel__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
}
.panel__visual {
  position: relative;
  border-radius: var(--r-md);
  background: var(--veil-bg);
  border: var(--hair) solid color-mix(in srgb, var(--brand-ink) 18%, transparent);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  min-height: clamp(7rem, 12vw, 9rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.8rem, 1.8vw, 1.1rem);
}
.panel__chips {
  display: flex;
  flex-direction: column;
  /* The visual stacks its children at flex-start, so the list has to claim
     the full width itself or every rule stops at the end of its own words. */
  align-self: stretch;
}
.chip {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  line-height: 1.35;
  letter-spacing: .08em;
  color: var(--brand-ink);
  padding: .5rem 0;
  border-top: var(--hair) solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
  /* No nowrap and no ellipsis: a capability name must never be cut off. */
  white-space: normal;
}
.panel__chips .chip:first-child { border-top: 0; }
.panel__eyebrow {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: color-mix(in srgb, var(--brand-ink) 78%, transparent);
  margin-bottom: .9rem;
}
.panel__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.9vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: .7rem;
}
.panel__line {
  font-size: var(--t-base);
  line-height: 1.55;
  color: color-mix(in srgb, var(--brand-ink) 90%, transparent);
  max-width: 32em;
  margin-bottom: 1.2rem;
}
.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  border: var(--hair) solid color-mix(in srgb, var(--brand-ink) 55%, transparent);
  border-radius: var(--r-sm);
  padding: .7rem 1.05rem;
  transition: background .3s, color .3s, border-color .3s;
}
.panel__cta:hover { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }
.panel__cta:hover .arrow { transform: translateX(4px); }
.panel :focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }

/* Stacking needs vertical room: the panels park under the strips above them,
   so a very short viewport could not show one in full. That is the only case
   that falls back to a plain vertical stack. */
@media (min-height: 34rem) {
  .panel { position: sticky; top: calc(var(--stack-top) + var(--i) * var(--strip)); }
  /* Height is tied to the viewport rather than fixed, so a panel can never
     grow taller than the space left under the stacked strips above it —
     which would hide its own lower half while stuck. */
  .panel { min-height: min(21rem, 46vh); }
  /* Bar pinned to the top so it lines up with the visible strip; the body
     takes the remaining height and centres itself within it. */
  .panel__inner { display: flex; flex-direction: column; min-height: inherit; }
  .panel__body { flex: 1 1 auto; align-content: center; }
}
@media (max-width: 47.99rem) {
  /* Trimmed so a whole panel fits on a phone screen while stacked. */
  .panel__inner { padding-bottom: 1.25rem; }
  .panel__body { gap: 1rem; }
  .panel__visual {
    min-height: 0;
    padding: .9rem;
    gap: .8rem;
  }
  .panel__visual .logomark--big { width: 2.5rem; height: 2.5rem; }
  .panel__eyebrow { margin-bottom: .55rem; }
  .panel__title { font-size: 1.45rem; margin-bottom: .6rem; }
  .panel__line { font-size: var(--t-base); margin-bottom: 1.1rem; }
  .panel__cta { padding: .7rem 1rem; }
  .chip { padding: .32rem .6rem; }
}

/* --- Company page brand band ------------------------------------------- */
.coband {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--r-xl);
  margin-inline: var(--edge);
  overflow: hidden;
}
.coband__inner {
  padding-block: clamp(2.25rem, 6vw, 4rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  justify-items: center;
  text-align: center;
}
.coband__sector { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); margin-bottom: .8rem; }
.coband__title { font-size: clamp(2.25rem, 5.8vw, 4rem); margin-bottom: 1.1rem; }
.coband__lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: color-mix(in srgb, var(--brand-ink) 90%, transparent);
  max-width: 36em;
  margin-inline: auto;
}
.coband :focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
.crumb--above { padding-bottom: 1.1rem; justify-content: center; }

/* --- Register (about / what we do) -------------------------------------- */
.register { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .register { grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 4vw, 3.5rem); } }
.register__body { display: grid; gap: 1.25rem; max-width: 40em; }
.register__body p { color: var(--ink-soft); text-wrap: pretty; }
.register__body p strong { color: var(--ink); font-weight: 500; }
.register__body p:first-child { font-size: var(--t-md); color: var(--ink); }
.facts { display: grid; gap: 0; align-content: start; border-top: var(--hair) solid var(--line); }
.facts > div { display: grid; gap: .15rem; padding-block: .85rem; border-bottom: var(--hair) solid var(--line-soft); }
.facts dt {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-mute);
}
.facts dd { font-size: var(--t-sm); color: var(--ink); }

/* --- Stats strip -------------------------------------------------------- */
.credbar { border-block: var(--hair) solid var(--line); background: var(--surface); }
.stats { display: grid; gap: var(--hair); background: var(--line); }
.credbar .stats { background: transparent; gap: 0; }
.credbar .stat { background: transparent; }
@media (min-width: 44rem) {
  .credbar .stat + .stat { border-left: var(--hair) solid var(--line); }
}
@media (min-width: 44rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ground);
  padding: clamp(1.25rem, 2.8vw, 1.9rem) clamp(1rem, 2.5vw, 1.75rem);
  display: grid; gap: .3rem;
  text-align: center;
}
.stat__n {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-mute);
}

/* --- Founder note ------------------------------------------------------- */
.note { background: var(--surface); border-block: var(--hair) solid var(--line); }
.note__inner { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.note blockquote {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.1vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -.028em;
  text-wrap: balance;
  max-width: 26em;
  margin-inline: auto;
}
.note__attr {
  display: inline-flex; align-items: center; gap: .85rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.25rem;
  border-top: var(--hair) solid var(--line);
  text-align: left;
}
.note__attr .initials {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  border: var(--hair) solid var(--line);
  color: var(--ink-soft);
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .06em;
}
.note__who { display: grid; gap: .1rem; }
.note__who b { font-weight: 500; font-size: var(--t-sm); }
.note__who span { font-size: var(--t-sm); color: var(--ink-mute); }

/* --- People (board & leadership) ---------------------------------------- */
.people { display: grid; gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 40rem) { .people { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit rather than a fixed count, so adding or removing a board member
   never leaves an empty cell sitting in the grid. */
@media (min-width: 64rem) { .people { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.person {
  background: var(--ground);
  padding: clamp(1.35rem, 2.8vw, 1.9rem);
  display: grid; gap: .5rem;
  align-content: start;
}
.person__portrait {
  width: 3rem; height: 3rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: var(--hair) solid var(--line);
  color: var(--ink-soft);
  font-family: var(--ff-body);
  font-size: var(--t-sm);
  letter-spacing: .04em;
  margin-bottom: .6rem;
  overflow: hidden;
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-family: var(--ff-display); font-weight: 500; font-size: 1.125rem; letter-spacing: -.02em; }
.person__role {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--accent);
}
.person__bio { font-size: var(--t-sm); color: var(--ink-soft); text-wrap: pretty; }
/* Unfilled seat: deliberately obvious so it is never published by accident. */
.person--open { background: var(--ground-deep); }
.person--open .person__portrait { border-style: dashed; color: var(--ink-mute); }
.person--open .person__name { color: var(--ink-mute); }
.person--open .person__role { color: var(--ink-mute); }

/* --- Swipe rail (advisory divisions) ------------------------------------ */
.rail { display: grid; gap: 1rem; }
.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  cursor: grab;
}
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Snapping fights a mouse drag, so it is switched off for the duration. */
.rail__viewport.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.rail__track {
  display: flex;
  gap: var(--hair);
  background: var(--line);
  margin: 0;
  min-width: min-content;
}
.acard {
  --tint: var(--accent);
  position: relative;
  flex: 0 0 clamp(14rem, 76vw, 19.5rem);
  background: var(--ground);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 12.5rem;
  scroll-snap-align: start;
  transition: background .35s ease;
}
.acard::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--tint);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.acard:hover { background: var(--surface-hi); }
.acard:hover::before { transform: scaleX(1); }
.acard__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.12;
  letter-spacing: -.026em;
  text-wrap: balance;
}
.acard__line { font-size: var(--t-sm); color: var(--ink-soft); text-wrap: pretty; }
.rail__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.rail__hint {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-mute);
}
.rail__progress {
  flex: 0 1 13rem;
  height: 2px;
  min-width: 4rem;
  background: var(--line);
  overflow: hidden;
}
.rail__progress span {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--accent);
  transition: transform .25s ease-out, width .25s ease-out;
}
.rail__nav { display: flex; gap: .4rem; margin-left: auto; }
.railbtn {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: var(--hair) solid var(--line);
  color: var(--ink-soft);
  font-family: var(--ff-body);
  font-size: var(--t-sm);
  transition: border-color .25s, color .25s, opacity .25s;
}
.railbtn:hover:not(.is-off) { border-color: var(--ink); color: var(--ink); }
.railbtn.is-off { opacity: .3; }

/* --- Expert network band ------------------------------------------------ */
.netband { border-block: var(--hair) solid var(--line); background: var(--surface); }
.netband__inner { padding-block: clamp(2.75rem, 6.5vw, 5rem); text-align: center; }
.netband__title { font-size: var(--t-xl); margin-bottom: 1.1rem; color: var(--ink); }
.netband__lede { max-width: 42em; margin-inline: auto; }
.netband__divisions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}
.netband__divisions li {
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--ink-soft);
  border: var(--hair) solid var(--line);
  padding: .45rem .7rem;
}

/* --- Contact ------------------------------------------------------------ */
.contact { border-top: var(--hair) solid var(--line); background: var(--surface); }
.contact__inner {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.contact__title { font-size: var(--t-xl); color: var(--ink); }
.contact__note { color: var(--ink-soft); max-width: 36em; margin-inline: auto; }
.offices {
  display: grid;
  gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  width: min(32rem, 100%);
  margin-top: 1rem;
}
@media (min-width: 30rem) { .offices { grid-template-columns: repeat(2, 1fr); } }
.office { background: var(--surface); padding: 1rem 1.25rem; }
.office h3 {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink);
}
.bigmail {
  font-family: var(--ff-body);
  font-size: clamp(.8125rem, 1.6vw, 1rem);
  letter-spacing: .06em;
  border-bottom: var(--hair) solid var(--ink-mute);
  padding-bottom: .25rem;
  transition: border-color .25s, color .25s;
  white-space: nowrap;
}
.bigmail:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Footer ------------------------------------------------------------- */
.footer { border-top: var(--hair) solid var(--line); background: var(--ground-deep); }
.footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
@media (min-width: 46rem) { .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__brand { display: grid; gap: .9rem; align-content: start; }
.footer__blurb { color: var(--ink-soft); font-size: var(--t-sm); max-width: 28em; }
.footer__col { display: grid; gap: .55rem; align-content: start; font-size: var(--t-sm); }
.footer__h {
  font-family: var(--ff-body);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink-mute);
  margin-bottom: .3rem;
}
.footer__col a { color: var(--ink-soft); transition: color .25s; }
.footer__col a:hover { color: var(--ink); }
.footer__col span { color: var(--ink-soft); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: var(--hair) solid var(--line);
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--ink-mute);
}

/* --- Company detail pages ---------------------------------------------- */
.co { --tint: var(--accent); }
.crumb {
  display: flex; align-items: center; gap: .5rem;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  color: var(--ink-mute);
}
.crumb a { transition: color .25s; }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-current] { color: var(--tint); }
.capabilities { border-top: var(--hair) solid var(--line); }
.capability {
  display: grid; gap: .35rem 2rem;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: var(--hair) solid var(--line-soft);
  align-items: baseline;
}
@media (min-width: 48rem) { .capability { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.capability h3 { font-family: var(--ff-display); font-size: var(--t-md); font-weight: 500; letter-spacing: -.02em; }
.capability p { color: var(--ink-soft); font-size: var(--t-base); max-width: 42em; text-wrap: pretty; }
.cocta { border-block: var(--hair) solid var(--line); background: var(--surface); }
.cocta__inner { display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .cocta__inner { grid-template-columns: 1fr auto; } }
.cocta__title { font-size: var(--t-xl); }
.cocta__note { color: var(--ink-soft); font-size: var(--t-sm); margin-top: .5rem; max-width: 40em; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.4rem;
  border: var(--hair) solid var(--tint);
  border-radius: var(--r-sm);
  color: var(--tint);
  font-family: var(--ff-body);
  font-size: var(--t-label);
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--tint); color: var(--ground); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.siblings { display: grid; gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 48rem) { .siblings { grid-template-columns: repeat(2, 1fr); } }
.sibling { background: var(--ground); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .4rem; transition: background .35s; }
.sibling:hover { background: var(--surface-hi); }
.sibling__name { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; }
.sibling__line { font-size: var(--t-sm); color: var(--ink-soft); }
.sibling:hover .arrow { transform: translateX(4px); }

/* --- Entrance motion ---------------------------------------------------- */
/* The fade-up on every block was template furniture, so it is gone. The two
   pieces of motion left are the ones that carry meaning: the diagram drawing
   its own connectors, and the figures counting. .rise stays as a hook so the
   markup does not have to change. */


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Structure diagram -------------------------------------------------
   One picture of the operating model. The connectors carry pathLength="1",
   so a single dash rule draws every one of them in regardless of its real
   length, and the nodes reuse the site's own reveal classes. */
.orgchart { margin: 0; }
.orgchart svg { width: 100%; height: auto; display: block; }
.orgline {
  stroke: var(--line);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.is-in .orgline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .3, 1) .15s;
}
/* A CSS fill always beats an SVG fill attribute, so the per-company colours
   come in as custom properties on each node instead of as attributes. */
.orgnode__box { fill: var(--n-bg, var(--surface)); stroke: none; }
.orgnode__box--group { fill: var(--surface); stroke: var(--brand-group); stroke-width: 2; }
.orgnode__box--base { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.orgnode__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.5px;
  text-anchor: middle;
  fill: var(--n-fg, var(--ink));
}
.orgnode__role {
  font-family: var(--ff-body);
  font-size: 19px;
  letter-spacing: 1.6px;
  text-anchor: middle;
  fill: var(--n-fg, var(--ink-soft));
}
.orgnode__base {
  font-family: var(--ff-body);
  font-size: 23px;
  text-anchor: middle;
  fill: var(--ink-soft);
}
.orgchart figcaption {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  max-width: 44em;
  margin-inline: auto;
  text-wrap: pretty;
}
@media (max-width: 34rem) {
  /* The three company labels get tight on a narrow screen, so the type in
     the diagram steps up relative to the artwork. */
  .orgnode__name { font-size: 34px; }
  .orgnode__role { font-size: 21px; }
  .orgnode__base { font-size: 24px; }
}

.section__head { text-align: center; }
.section__title { margin-inline: auto; }
.hero { text-align: center; }
.hero__title { margin-inline: auto; }
.hero__lede { margin-inline: auto; }
.hero__actions { justify-content: center; }
.netband__inner { text-align: center; }
.netband__lede { margin-inline: auto; }
.netband__divisions { justify-content: center; }
.note__inner { text-align: center; }
.note blockquote { margin-inline: auto; }
.note__attr { text-align: left; }
.contact__inner { justify-items: center; text-align: center; }
.contact__note { margin-inline: auto; }
.coband__inner { justify-items: center; text-align: center; }
.coband__lede { margin-inline: auto; }
.crumb--above { justify-content: center; }
.orgchart figcaption { text-align: center; margin-inline: auto; }

/* The footer lockup follows the supplied artwork: lowercase, one weight. */
.mark { gap: .42rem; }
.mark__name { font-weight: 600; letter-spacing: -.01em; text-transform: lowercase; }
.mark__sub {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--ink-soft);
}
/* The logo file carries a small margin inside its viewBox so the artwork
   never lands on the edge of the mask, which showed as a faint line across
   the mark when a phone magnified the page. The ratio follows that box. */
:root { --logo-ratio: 0.4129; }

/* In the header the mark stands alone, so it carries a little more size. */
.masthead .logomark { height: 2.25rem; width: calc(2.25rem * var(--logo-ratio)); }

/* Two figures per row on a phone. One per row makes the band enormous, and
   four squeezes each label into a column of single words. Bounded to narrow
   screens: this sits after the four-column rule, so without the bound it
   would win on the desktop too. */
@media (max-width: 43.99rem) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .credbar .stat + .stat { border-left: 0; }
  .credbar .stat { border-top: var(--hair) solid var(--line); }
  .credbar .stat:nth-child(-n+2) { border-top: 0; }
  .credbar .stat:nth-child(even) { border-left: var(--hair) solid var(--line); }
}

/* Board entries are a portrait, a name and a role. The picture carries the
   card, so it runs the full width of it rather than sitting as a chip. */
.person__portrait {
  width: 100%; height: auto;
  aspect-ratio: 1;
  margin-bottom: .9rem;
  background: var(--surface);
  font-size: var(--t-label);
  letter-spacing: .06em;
}
.person { gap: .3rem; }

/* --- The company deck ---------------------------------------------------
   The panels used to park at staggered offsets, which left a strip of the
   card above showing and read as a misalignment rather than as depth. They
   now rest at the same line, so each one is seen whole, and the card behind
   steps back and fades as the next covers it. --cover is written by
   site.js; with no script it stays 0 and the deck is a plain stack. */
@media (min-height: 34rem) {
  .panel {
    top: var(--stack-top);
    /* Each card claims most of the screen and has clear road behind it, so
       only one is ever being read. Three short cards sharing one screen was
       what made the deck look misaligned. */
    min-height: min(32rem, 68vh);
    transform: scale(calc(1 - .06 * var(--cover, 0)))
               translateY(calc(var(--cover, 0) * -.9rem));
    transform-origin: 50% 0;
    will-change: transform;
  }
  .panel + .panel { margin-top: 10vh; }
  .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ground);
    opacity: calc(var(--cover, 0) * .74);
    pointer-events: none;
  }
}

/* Room to read the last card before the page moves on. */
.stack { padding-bottom: clamp(3.5rem, 9vh, 7rem); }

/* Hudi's portrait sits where the initials were. */
.note__photo {
  width: 3.25rem; height: 3.25rem; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}