/* InVerum — site styles

   Dark and earth-toned, with a northern-lights sky behind everything. The sky
   is built the way Meedia's app shell is: soft glows pooled at the edges, a
   fine noise spray over the whole screen, and a heavier spatter only where the
   glows pool. Each company has its own three colours, and the sky eases into
   them as that company's section reaches the middle of the screen
   (script.js sets data-sky on <html>). */

/* Registered so the sky can transition between palettes; unregistered custom
   properties just snap. Browsers without @property get the snap. */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #a4bf86; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #e2b25c; }
@property --a3 { syntax: '<color>'; inherits: true; initial-value: #de8a68; }

:root {
  --bg: #0b0a08;
  --bg-deep: #060504;
  --bg-raised: rgba(27, 24, 20, 0.8);
  --bg-overlay: rgba(40, 36, 30, 0.9);
  --bg-hover: rgba(255, 243, 226, 0.05);
  --border: rgba(255, 243, 226, 0.08);
  --border-strong: rgba(255, 243, 226, 0.16);
  --text: #f2ebdf;
  --text-muted: #afa596;
  --text-faint: #807769;

  /* Each company's sky: a lead colour and the two it pools with. */
  --inv-1: #a4bf86;  /* moss */
  --inv-2: #e2b25c;  /* ochre */
  --inv-3: #de8a68;  /* clay */
  --sci-1: #79bfa9;  /* patina */
  --sci-2: #8eaac4;  /* slate */
  --sci-3: #d8bf86;  /* sand */
  --svc-1: #e5b04f;  /* ochre */
  --svc-2: #d9794a;  /* rust */
  --svc-3: #a9b873;  /* olive */
  --care-1: #e08c78; /* terracotta */
  --care-2: #b999b8; /* heather */
  --care-3: #dcc38e; /* wheat */

  /* The live sky. */
  --a1: var(--inv-1);
  --a2: var(--inv-2);
  --a3: var(--inv-3);
  transition: --a1 1.4s ease, --a2 1.4s ease, --a3 1.4s ease;

  /* Meedia's overspray masks: feTurbulence noise pushed through a steep alpha
     ramp, so it lands as specks rather than a pattern. Fine and heavy. */
  --spray-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 6 0 0 0 -3.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
  --spray-heavy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -5.6'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E");

  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 12px;
  --radius-sm: 7px;

  color-scheme: dark;
}

:root[data-sky='sciences'] { --a1: var(--sci-1); --a2: var(--sci-2); --a3: var(--sci-3); }
:root[data-sky='services'] { --a1: var(--svc-1); --a2: var(--svc-2); --a3: var(--svc-3); }
:root[data-sky='care']     { --a1: var(--care-1); --a2: var(--care-2); --a3: var(--care-3); }
/* Every company's lead colour at once, for the sections that speak for all three. */
:root[data-sky='family']   { --a1: var(--sci-1); --a2: var(--svc-1); --a3: var(--care-1); }

/* Local palettes, for anything that belongs to one company wherever it sits. */
.co-inverum  { --c1: var(--inv-1);  --c2: var(--inv-2);  --c3: var(--inv-3); }
.co-sciences { --c1: var(--sci-1);  --c2: var(--sci-2);  --c3: var(--sci-3); }
.co-services { --c1: var(--svc-1);  --c2: var(--svc-2);  --c3: var(--svc-3); }
.co-care     { --c1: var(--care-1); --c2: var(--care-2); --c3: var(--care-3); }
.co-sciences, .co-services, .co-care { --tint: var(--c1); }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}

::selection { background: color-mix(in srgb, var(--a1) 38%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--a1); color: var(--bg); padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip:focus { top: 1rem; }

/* Gradient text. Solid lead colour where background-clip: text is missing,
   rather than transparent text. Override --g1..3 to recolour. */
.grad-text { color: var(--g1, var(--a1)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text {
    background-image: linear-gradient(100deg, var(--g1, var(--a1)), var(--g2, var(--a2)) 55%, var(--g3, var(--a3)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---------- The sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(26, 22, 16, 0.4) 15%, var(--bg-deep) 100%);
}
.sky-glow {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 58% 46% at 4% 8%, color-mix(in srgb, var(--a1) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 52% 44% at 98% 30%, color-mix(in srgb, var(--a2) 11%, transparent), transparent 74%),
    radial-gradient(ellipse 62% 42% at 38% 102%, color-mix(in srgb, var(--a3) 9%, transparent), transparent 72%);
  animation: drift 50s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.2%, 0) scale(1.05); }
}
.sky::before,
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Fine overspray across the whole sky, coloured by gradients underneath. */
.sky::before {
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 8%, var(--a1) 0%, transparent 68%),
    radial-gradient(ellipse 60% 50% at 92% 30%, var(--a2) 0%, transparent 66%),
    radial-gradient(ellipse 75% 45% at 45% 104%, var(--a3) 0%, transparent 70%);
  -webkit-mask-image: var(--spray-fine);
  mask-image: var(--spray-fine);
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
  opacity: 0.14;
}
/* Heavy spatter, intersected with the glow shapes so it only exists where the
   light pools. Without mask-composite it falls back to an even scatter. */
.sky::after {
  background-image:
    radial-gradient(ellipse 55% 45% at 8% 14%, var(--a1) 0%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 96% 34%, var(--a2) 0%, transparent 70%),
    radial-gradient(ellipse 65% 35% at 38% 102%, var(--a3) 0%, transparent 74%);
  -webkit-mask-image:
    var(--spray-heavy),
    radial-gradient(ellipse 45% 60% at 4% 10%, #000 0%, transparent 72%),
    radial-gradient(ellipse 40% 48% at 100% 34%, #000 0%, transparent 70%),
    radial-gradient(ellipse 55% 34% at 32% 104%, #000 0%, transparent 76%);
  mask-image:
    var(--spray-heavy),
    radial-gradient(ellipse 45% 60% at 4% 10%, #000 0%, transparent 72%),
    radial-gradient(ellipse 40% 48% at 100% 34%, #000 0%, transparent 70%),
    radial-gradient(ellipse 55% 34% at 32% 104%, #000 0%, transparent 76%);
  -webkit-mask-size: 420px 420px, 100% 100%, 100% 100%, 100% 100%;
  mask-size: 420px 420px, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat, no-repeat;
  mask-repeat: repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-over, source-over, source-over;
  mask-composite: intersect, add, add, add;
  opacity: 0.32;
}

main, .site-footer { position: relative; z-index: 1; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 10, 8, 0.76);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
/* The bar sprays in the sky's colours too, just a whisper of it. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 45% 160% at 8% 50%, var(--a1) 0%, transparent 72%),
    radial-gradient(ellipse 45% 160% at 92% 50%, var(--a3) 0%, transparent 72%);
  -webkit-mask-image: var(--spray-fine);
  mask-image: var(--spray-fine);
  -webkit-mask-size: 140px 140px;
  mask-size: 140px 140px;
  opacity: 0.22;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: auto; height: 34px; }

.site-nav { display: flex; align-items: center; gap: 1.9rem; }
.site-nav a:not(.btn) {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.site-nav a:not(.btn):hover { color: var(--text); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}
.nav-toggle .bar { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--text); transition: transform 0.2s; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Buttons, cards, chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-overlay);
  border: 1px solid var(--border-strong);
  transition: background 0.2s, border-color 0.2s, transform 0.15s, filter 0.2s;
}
.btn:hover { background: rgba(56, 50, 42, 0.92); transform: translateY(-1px); }
.btn-primary {
  color: #0d0b08;
  background: linear-gradient(115deg, var(--a1), var(--a2) 52%, var(--a3));
  border-color: transparent;
}
.btn-primary:hover { background: linear-gradient(115deg, var(--a1), var(--a2) 52%, var(--a3)); filter: brightness(1.08); }
.btn-small { padding: 0.45rem 1rem; font-size: 0.88rem; }

.card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tint, var(--a1)) 7%, transparent), transparent 46%),
    var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c1, var(--a1));
  background: color-mix(in srgb, var(--c1, var(--a1)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c1, var(--a1)) 45%, transparent);
}
.chip-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; }
}
.chip-soon { border-style: dashed; background: transparent; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a1);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: currentColor; opacity: 0.7; }

/* ---------- Hero ---------- */

.hero { padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 6.5rem); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* A dictionary entry for the name. */
.define {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.define-word { color: var(--a1); font-size: 0.95rem; font-weight: 500; }
.define-pos { color: var(--text-faint); }

.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1;
  margin-bottom: 1.6rem;
}
/* "overlooked" arrives out of focus and resolves: the truth coming clear.
   The blur sits on a wrapper so it never touches the clipped gradient. */
.focus {
  display: inline-block;
  animation: come-into-focus 2.2s cubic-bezier(0.2, 0.65, 0.25, 1) 0.35s both;
}
@keyframes come-into-focus {
  0%   { filter: blur(12px); opacity: 0.12; }
  55%  { opacity: 0.85; }
  100% { filter: blur(0); opacity: 1; }
}

.lede { font-size: clamp(1.08rem, 1.6vw, 1.2rem); color: var(--text-muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* The family card */
.family { display: grid; gap: 0.35rem; padding: 1.1rem; }
.family-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.3rem 0.45rem 0.85rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.family-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.family-count { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.family-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.family-row:hover { background: var(--bg-hover); border-color: var(--border); }
.family-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.family-text span { display: block; font-size: 0.86rem; color: var(--text-muted); }
.family-arrow { color: var(--text-faint); transition: transform 0.2s, color 0.2s; }
.family-row:hover .family-arrow { color: var(--c1); transform: translateX(3px); }

/* A company's sky in miniature. */
.swatch {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 18%, var(--c1), transparent 62%),
    radial-gradient(circle at 96% 46%, var(--c2), transparent 60%),
    radial-gradient(circle at 40% 118%, var(--c3), transparent 66%),
    #17140f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---------- Sections ---------- */

.section { padding: clamp(4.5rem, 10vw, 7.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.section-lede { font-size: 1.12rem; color: var(--text-muted); }

/* What we do */
.tells {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.tell { display: flex; flex-direction: column; padding: 1.6rem; }
.tell-where {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c1);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 12px var(--c1); }
.tell-label {
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tell-label-fix { color: var(--c1); }
.tell-workaround {
  color: var(--text-muted);
  font-size: 0.98rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-strong);
}
.tell-fix {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.tell-link { margin-top: 1.4rem; font-size: 0.9rem; font-weight: 600; color: var(--c1); text-decoration: none; }
.tell-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Companies */
.company-list { display: grid; gap: 1.25rem; }
.company {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in srgb, var(--c1) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, color-mix(in srgb, var(--c3) 8%, transparent), transparent 70%),
    rgba(20, 18, 15, 0.72);
}
/* Each company sprays in its own colours, so the panels read as separate
   objects rather than one continuous wash. */
.company::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 55% at 6% 4%, var(--c1), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 40%, var(--c2), transparent 68%),
    radial-gradient(ellipse 70% 45% at 45% 110%, var(--c3), transparent 72%);
  -webkit-mask-image: var(--spray-fine);
  mask-image: var(--spray-fine);
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
  opacity: 0.17;
}
.company-index {
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c1);
}
.company h3 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -0.025em; line-height: 0.98; margin-bottom: 1.2rem; }
.co-parent {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-faint);
}
.co-name { --g1: var(--c1); --g2: var(--c2); --g3: var(--c3); }
.company-head > p:last-child { color: var(--text-muted); }

.products { display: grid; gap: 0.9rem; align-content: start; }
.product { padding: 1.35rem 1.45rem; }
.product-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.product h4 { font-size: 1.45rem; letter-spacing: -0.025em; }
.product p { color: var(--text-muted); font-size: 0.97rem; }
.product-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c1);
  text-decoration: none;
}
.product-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Approach: three stops on one line of light. */
.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.steps::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--a1), var(--a2) 50%, var(--a3));
  opacity: 0.55;
}
.steps li { position: relative; padding-top: 2.4rem; }
.steps li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--step, var(--a1));
  box-shadow: 0 0 16px color-mix(in srgb, var(--step, var(--a1)) 60%, transparent);
}
.steps li:nth-child(2) { --step: var(--a2); }
.steps li:nth-child(3) { --step: var(--a3); }
.step-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-faint); }
.steps h3 { font-size: clamp(2.3rem, 4.6vw, 3.3rem); letter-spacing: -0.025em; margin: 0.35rem 0 0.8rem; }
.steps p { color: var(--text-muted); max-width: 23rem; }

/* Leadership */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.person {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.6rem;
}
.person-photo {
  width: 132px;
  height: 132px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border-strong), 0 12px 32px rgba(0, 0, 0, 0.35);
}
.person-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(circle at 18% 16%, var(--inv-1), transparent 62%),
    radial-gradient(circle at 100% 50%, var(--inv-2), transparent 60%),
    radial-gradient(circle at 40% 118%, var(--inv-3), transparent 66%),
    #1a1612;
}
.person h3 { font-size: 1.75rem; letter-spacing: -0.015em; }
.person-role {
  margin: 0.45rem 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a1);
}
.person-body > p:not(.person-role) { color: var(--text-muted); font-size: 0.98rem; }
.person-email {
  display: inline-block;
  margin-top: 1rem;
  padding-bottom: 1px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--a1) 55%, transparent);
  transition: color 0.2s;
}
.person-email:hover { color: var(--a1); }

/* Contact */
.contact { padding: clamp(2rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 7rem); }
.contact-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.75rem);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, color-mix(in srgb, var(--a1) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in srgb, var(--a3) 13%, transparent), transparent 70%),
    rgba(20, 18, 15, 0.75);
}
.contact-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 70% at 4% 6%, var(--a1), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 30%, var(--a2), transparent 68%),
    radial-gradient(ellipse 60% 55% at 60% 110%, var(--a3), transparent 72%);
  -webkit-mask-image: var(--spray-fine);
  mask-image: var(--spray-fine);
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  opacity: 0.2;
}
.contact h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.contact-cards { display: grid; gap: 0.8rem; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(11, 10, 8, 0.55);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.contact-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.contact-primary {
  border-color: color-mix(in srgb, var(--a1) 45%, transparent);
  background: color-mix(in srgb, var(--a1) 9%, rgba(11, 10, 8, 0.55));
}
.contact-primary:hover { border-color: var(--a1); }
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-email {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

/* Footer */
.site-footer {
  padding: 2.25rem 0 2.75rem;
  border-top: 1px solid var(--border);
  background: rgba(8, 7, 6, 0.6);
  color: var(--text-faint);
  font-size: 0.9rem;
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.footer-tag { margin-top: 0.55rem; }
.footer-family { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-family a { color: var(--text-muted); text-decoration: none; }
.footer-family a:hover { color: var(--text); }
.footer-copy { font-family: var(--font-mono); font-size: 0.76rem; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .hero-inner, .company, .contact-panel { grid-template-columns: 1fr; }
  .tells, .people { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background: rgba(11, 10, 8, 0.97);
    border-bottom: 1px solid var(--border);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .site-nav .btn { margin-top: 0.85rem; padding: 0.75rem 1rem; }

  /* The line of light runs down the side instead. */
  .steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .steps::before {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--a1), var(--a2) 50%, var(--a3));
  }
  .steps li { padding: 0 0 0 2.4rem; }
  .steps li::before { top: 0.3rem; }
}

@media (max-width: 520px) {
  .brand-logo { height: 30px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .family { padding: 0.8rem; }
  .family-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.6rem 0.4rem; }
  .swatch { width: 40px; height: 40px; }
  .person { grid-template-columns: 1fr; padding: 1.4rem; }
  .person-photo { width: 104px; height: 104px; border-radius: 18px; }
  .person-monogram { font-size: 2.1rem; }
  .tell { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { transition: none; }
  .sky-glow, .focus, .chip-live::before { animation: none; }
  *, *::before, *::after { transition: none !important; }
}