/* =========================================================
   ARCHID GROUP — styles
   Brand colours are placeholders until the logo arrives:
   change the tokens in :root and the whole site follows.
   ========================================================= */

:root {
  /* brand palette: primary navy, secondary white, third black */
  --navy: #0b2545;
  --white: #ffffff;
  --black: #000000;

  --ink: var(--navy);         /* dark sections */
  --ink-2: #081c35;           /* deeper navy (menu) */
  --ivory: var(--white);      /* light sections */
  --paper: #f3f5f8;           /* faint navy tint for alternating light sections */
  --accent: var(--white);     /* "the thread" on dark; navy on light (see .section--light) */

  --on-dark: var(--white);
  --on-dark-muted: rgba(255,255,255, 0.72);
  --on-dark-line: rgba(255,255,255, 0.18);
  --on-light: var(--black);
  --on-light-muted: #3e4a5c;
  --on-light-line: rgba(11,37,69, 0.14);

  /* type */
  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-ui: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-hi: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;
  --f-or: "Noto Serif Oriya", "Noto Sans Oriya", serif;

  /* rhythm */
  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 8vw, 120px);
  --hdr-h: 72px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--f-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 12px 18px; background: var(--ivory); color: var(--ink);
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.container { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }

/* subtle film grain for the cinematic feel */
body::after { display: none;
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared bits ---------- */
.label {
  font-family: var(--f-ui); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
}
.diamond { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; display: inline-block; }
.diamond--lg { width: 14px; height: 14px; }
.sep { display: inline-block; width: 18px; height: 1px; background: currentColor; opacity: .5; vertical-align: middle; }

.scripts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; line-height: 1.5; opacity: .85; }
.scripts [lang="hi"] { font-family: var(--f-hi); }
.scripts [lang="or"] { font-family: var(--f-or); }

.h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 96px); line-height: 1.02; letter-spacing: -.01em;
}
.h2 em { color: var(--accent); }
.section--light .h2 em { color: var(--ink); }

.sec-head { display: grid; gap: 24px; max-width: 880px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head__lede { max-width: 560px; font-size: 18px; }
.sec-head--row { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .sec-head--row { grid-template-columns: 1.4fr 1fr; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 36px; bottom: 8px; height: 1px; background: currentColor;
  transform-origin: right; transition: transform .5s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(0); }
.link-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .5s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--light { color: var(--on-dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px; border-radius: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--ghost { border: 1px solid var(--on-dark-line); }
.btn--ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--solid { background: var(--ivory); color: var(--ink); min-height: 56px; padding: 0 28px; }
.btn--solid:hover { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.section--light { --accent: var(--navy); background: var(--ivory); color: var(--on-light); }
.section--light .h2, .section--light .statement, .founder__quote, .founder__name, .loop__name { color: var(--navy); }
.section--light ::selection { background: var(--navy); color: var(--white); }
.section--light .label { color: var(--on-light-muted); }

/* =========================================================
   OPENING SCREEN EFFECT
   ========================================================= */
.curtain { display: none; }
html.js:not(.intro-done) .curtain,
html.js .curtain.is-playing { display: block; position: fixed; inset: 0; z-index: 180; pointer-events: none; }
.curtain__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); }
.curtain__half--top { top: 0; }
.curtain__half--bottom { bottom: 0; }
.curtain__thread {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 18px rgba(255,255,255,.55);
}

/* =========================================================
   HEADER + MENU
   ========================================================= */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter); padding-top: env(safe-area-inset-top);
  color: var(--on-dark);
  transition: transform .6s var(--ease), background .5s var(--ease);
}
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(11,37,69,.94); /* solid, no backdrop blur: blur over moving full-screen photos was costly */
  border-bottom: 1px solid var(--on-dark-line); transition: opacity .5s var(--ease);
}
.hdr.is-solid::before { opacity: 1; }
.hdr.is-hidden { transform: translateY(-110%); }
body.menu-open .hdr { transform: none; }
body.menu-open .hdr::before { opacity: 0; }

.hdr__brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; min-height: 44px; align-items: center; }
.hdr__mark { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }
.hdr__word { font-family: var(--f-display); font-size: 22px; letter-spacing: .14em; }
.hdr__sub { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }

.hdr__nav { display: none; gap: 36px; }
.hdr__nav a {
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding: 12px 0; position: relative; opacity: .82; transition: opacity .3s;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.hdr__nav a:hover { opacity: 1; }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__actions { display: flex; align-items: center; gap: 12px; }
.hdr__cta { display: none; }
.hdr__menu { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; padding: 0 4px; }
.hdr__menu-label { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.hdr__menu-lines { position: relative; width: 26px; height: 10px; }
.hdr__menu-lines i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hdr__menu-lines i:first-child { top: 0; }
.hdr__menu-lines i:last-child { top: 9px; }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:first-child { top: 5px; transform: rotate(45deg); }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:last-child { top: 5px; transform: rotate(-45deg); }

@media (min-width: 720px) { .hdr__cta { display: inline-flex; } }
@media (min-width: 1100px) { .hdr__nav { display: flex; } }

.menu {
  position: fixed; inset: 0; z-index: 110; background: var(--ink-2); color: var(--on-dark);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu[hidden] { display: block; visibility: hidden; }
.menu.is-open, .menu.is-closing { visibility: visible; }
.menu__inner {
  min-height: 100%; display: grid; gap: 48px; align-content: center;
  padding-top: calc(var(--hdr-h) + 32px); padding-bottom: 48px;
}
@media (min-width: 900px) { .menu__inner { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.menu__col .label { color: var(--on-dark-muted); margin-bottom: 24px; }
.menu__big a {
  display: block; font-family: var(--f-display); font-size: clamp(36px, 6vw, 80px); line-height: 1.12;
  text-decoration: none; transition: color .3s, transform .5s var(--ease);
}
.menu__big a:hover { opacity: .75; transform: translateX(10px); }
.menu__list a {
  display: flex; gap: 18px; align-items: baseline; padding: 12px 0; min-height: 44px;
  border-bottom: 1px solid var(--on-dark-line); text-decoration: none; font-size: 18px;
  transition: color .3s, padding .5s var(--ease);
}
.menu__list a span { font-size: 12px; letter-spacing: .15em; color: var(--on-dark-muted); }
.menu__list a:hover { opacity: .75; padding-left: 8px; }
.menu__addr { margin-top: 32px; color: var(--on-dark-muted); font-size: 14px; }
.menu li { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.menu.is-open li { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .05s); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
html.intro-done .hero__media img { animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,37,69,.6) 0%, rgba(11,37,69,.3) 30%, rgba(11,37,69,.45) 60%, rgba(11,37,69,.97) 100%),
    radial-gradient(90% 45% at 50% 50%, rgba(8,28,53,.4) 0%, transparent 100%);
}
/* navy tone over the hero photo */
.hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(11,37,69,.3); }

/* =========================================================
   COLOUR BLENDING between sections
   Light sections open with a soft navy-tinted wash, dark
   sections carry a gentle glow, and the page settles into
   black at the footer: no hard colour edges.
   ========================================================= */
.story, .eco, .tree-sec {
  background:
    linear-gradient(180deg, #dfe6ef 0, #eef2f7 120px, var(--white) 420px);
}
.founder {
  background:
    linear-gradient(180deg, #dfe6ef 0, #eef2f7 120px, var(--paper) 420px) !important;
}
.dir {
  background: linear-gradient(180deg, var(--paper) 0, var(--paper) 70%, #dfe6ef 100%) !important;
}
.nums {
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(38,77,122,.55) 0%, transparent 70%),
    var(--navy) !important;
}
.reg {
  background:
    radial-gradient(60% 60% at 90% 10%, rgba(38,77,122,.45) 0%, transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy) 55%, #06162b 100%) !important;
}
.ftr { background: linear-gradient(180deg, #06162b 0%, var(--black) 60%) !important; border-top: 0 !important; }
.xp { background: var(--navy); }
.hero__inner { align-self: center; display: grid; justify-items: center; text-align: center; gap: 22px; padding-top: var(--hdr-h); }
.hero__eyebrow { color: var(--on-dark-muted); }
.hero__word {
  display: flex; justify-content: center;
  font-family: var(--f-display); font-weight: 400;
  font-size: min(clamp(72px, 19vw, 380px), 34vh); line-height: .9; letter-spacing: .04em;
  margin-right: -.04em;
}
.ch { display: inline-block; overflow: hidden; padding-block: .06em; }
.ch > span { display: inline-block; }
.hero__lede { font-family: var(--f-display); font-size: clamp(22px, 3vw, 40px); line-height: 1.2; }
.hero__lede em { color: var(--accent); }
.hero__tagline { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-muted); max-width: 32ch; }

.hero__foot {
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px; min-width: 44px;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--on-dark-muted);
}
.scroll-cue i { position: relative; display: block; width: 1px; height: 56px; background: var(--on-dark-line); overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--accent);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* =========================================================
   STORY
   ========================================================= */
.story { padding-block: var(--section); }
.story__grid { display: grid; gap: 40px; }
.statement {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 72px); line-height: 1.1; letter-spacing: -.01em; max-width: 20ch;
}
.story__aside { display: grid; gap: 32px; align-items: end; }
.story__fig { overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.story__fig img { width: 100%; height: 100%; object-fit: cover; }
.story__copy { display: grid; gap: 24px; max-width: 460px; color: var(--on-light-muted); }
.story__copy .link-arrow { color: var(--on-light); justify-self: start; }
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 1.5fr 1fr; column-gap: 6vw; row-gap: 40px; }
  .story__label { grid-column: 1 / -1; }
  .story__aside { grid-template-columns: 1fr; }
}

/* word-by-word scrub text */
.w { display: inline; }

/* =========================================================
   EXPRESSIONS
   Default (no JS / reduced motion): stacked full-screen panels.
   .xp.is-pinned (set by JS): one pinned stage, morphing word.
   ========================================================= */
.xp { position: relative; background: var(--ink); }
.xp__stage { position: relative; }
.xp__kicker { position: absolute; top: calc(var(--hdr-h) + 20px); left: var(--gutter); z-index: 5; color: var(--on-dark-muted); display: none; }
.xp__word { display: none; }
.xp__rail { display: none; }

.xp__item {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end; isolation: isolate;
}
.xp__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.xp__media img { width: 100%; height: 100%; object-fit: cover; }
/* navy tone over every photo so scenes sit inside the brand palette */
.xp__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(11,37,69,.32);
}
.xp__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(11,37,69,.55) 0%, rgba(11,37,69,.05) 28%, rgba(11,37,69,.25) 50%, rgba(8,28,53,.92) 100%);
}
.xp__info {
  width: 100%; padding: 0 var(--gutter) max(100px, calc(env(safe-area-inset-bottom) + 100px));
  display: grid; gap: 16px; grid-template-columns: 1fr; align-items: end;
}
/* the verb: a translucent watermark, not the headline */
.xp__verb {
  font-family: var(--f-display); font-size: clamp(56px, 13vw, 220px); line-height: .9; text-transform: uppercase;
  letter-spacing: .01em; margin-bottom: 8px;
  color: rgba(255,255,255,.2); -webkit-text-stroke: 1px rgba(255,255,255,.28);
}
.xp__num { font-size: 12px; letter-spacing: .2em; color: var(--accent); font-weight: 600; }
.xp__num span { color: var(--on-dark-muted); font-weight: 400; }
/* the company name is the headline */
.xp__name {
  font-family: var(--f-display); font-weight: 400; line-height: 1;
  font-size: clamp(40px, min(7vw, 10.5vh), 128px); letter-spacing: -.01em;
  font-size: clamp(36px, min(8.6cqi, 10.5vh), 128px); /* sized to its own column: longest name stays on one line */
  text-shadow: 0 2px 30px rgba(8,28,53,.35);
}
.xp__names { container-type: inline-size; }
.xp__names .scripts { margin-top: 14px; font-size: 16px; color: var(--on-dark-muted); opacity: 1; }
.xp__desc { max-width: 40ch; color: var(--on-dark-muted); font-size: 17px; }
.xp__desc em { color: var(--on-dark); }
.xp__info .link-arrow { justify-self: start; }

@media (min-width: 960px) {
  .xp__info {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    grid-template-areas: "num num" "names desc" "names link";
    column-gap: 64px; row-gap: 12px;
  }
  .xp__verb { grid-column: 1 / -1; }
  .xp__num { grid-area: num; }
  .xp__names { grid-area: names; align-self: end; }
  .xp__desc { grid-area: desc; align-self: end; }
  .xp__info .link-arrow { grid-area: link; }
}

/* --- pinned (enhanced) mode --- */
.xp.is-pinned .xp__stage { height: 100vh; height: 100svh; overflow: hidden; }
.xp.is-pinned .xp__kicker { display: inline-flex; }
.xp.is-pinned .xp__items { position: absolute; inset: 0; z-index: 1; } /* own stacking context: scenes stay under word + rail */
.xp.is-pinned .xp__item { position: absolute; inset: 0; min-height: 0; }
/* only the scenes around the current one are GPU layers (keeps memory low on phones) */
.xp.is-pinned .xp__item.is-near .xp__media, .xp.is-pinned .xp__item.is-near .xp__media img { will-change: transform; backface-visibility: hidden; }
.xp.is-pinned .xp__verb { display: none; }
.xp.is-pinned .xp__info > * { visibility: hidden; opacity: 0; }
.xp.is-pinned .xp__item.is-active { z-index: 2; }

/* translucent watermark: blends into each photo (overlay), sits behind the company name */
.xp.is-pinned .xp__word {
  display: block; position: absolute; left: 0; right: 0; top: 38%; transform: translateY(-50%);
  z-index: 2; pointer-events: none; text-align: center;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .9;
  font-size: min(14vw, 26vh); letter-spacing: .02em;
  color: rgba(255,255,255,.2); -webkit-text-stroke: 1px rgba(255,255,255,.28);
}
.xp.is-pinned .xp__items { z-index: 1; }
.xp.is-pinned .xp__item .xp__info { position: relative; z-index: 3; }
@media (max-width: 959px) {
  .xp.is-pinned .xp__word { top: 34%; font-size: min(13.5vw, 22vh); }
  .xp.is-pinned .xp__info { gap: 12px; }
}
.xp__line { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; white-space: nowrap; }
.xp__line:first-child { position: relative; }
.xp__line .l { display: inline-block; overflow: hidden; padding: .08em .005em; margin: -.08em 0; }
.xp__line .l > span { display: inline-block; will-change: transform; }

.xp.is-pinned .xp__rail {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); z-index: 6;
}
.xp__rail button {
  position: relative; width: 100%; min-height: 44px; display: flex; align-items: flex-end; padding-bottom: 12px;
  color: var(--on-dark-muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: color .4s var(--ease);
}
.xp__rail button span { display: none; }
.xp__rail button::before, .xp__rail button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--on-dark-line);
}
.xp__rail button::after { background: var(--accent); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.xp__rail button:hover, .xp__rail button.is-active { color: var(--on-dark); }
@media (min-width: 960px) { .xp__rail button span { display: inline; } .xp__rail { gap: 14px; } }

/* =========================================================
   ECOSYSTEM
   ========================================================= */
.eco { padding-block: var(--section); overflow: hidden; }
.loop { position: relative; }
.loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.loop__track { fill: none; stroke: var(--on-light-line); stroke-width: 1; }
.loop__thread { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.loop__nodes { position: relative; display: grid; gap: 48px; padding-left: 40px; }
.loop__node { position: relative; display: grid; gap: 6px; }
.loop__mark {
  position: absolute; left: -40px; top: 10px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--ivory); border: 1px solid var(--on-light-muted); transform: rotate(45deg);
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
}
.loop__node.is-lit .loop__mark { background: var(--accent); border-color: var(--accent); transform: rotate(45deg) scale(1.25); }
.loop__verb { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.loop__name { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.loop__note { color: var(--on-light-muted); font-size: 15px; max-width: 28ch; }
.loop__node { opacity: .45; transition: opacity .6s var(--ease); }
.loop__node.is-lit { opacity: 1; }
html:not(.motion) .loop__node { opacity: 1; }

@media (min-width: 900px) {
  .loop__nodes { grid-template-columns: repeat(4, 1fr); column-gap: 32px; row-gap: 80px; padding-left: 0; padding-top: 44px; }
  .loop__mark { left: 6px; top: -44px; margin-left: 0; }
  /* snake: row two runs right-to-left */
  .loop__node:nth-child(5) { grid-area: 2 / 4; }
  .loop__node:nth-child(6) { grid-area: 2 / 3; }
  .loop__node:nth-child(7) { grid-area: 2 / 2; }
  .loop__node:nth-child(8) { grid-area: 2 / 1; }
}

/* =========================================================
   NUMBERS
   ========================================================= */
.nums { background: var(--ink); padding-block: clamp(56px, 6vw, 96px); }
.nums__grid { display: grid; gap: 0; }
.nums__cell { padding: 36px 0; border-top: 1px solid var(--on-dark-line); display: grid; gap: 10px; }
.nums__val { font-family: var(--f-display); font-size: clamp(64px, 9vw, 150px); line-height: .95; font-variant-numeric: lining-nums tabular-nums; }
.nums__val sup { font-size: .4em; color: var(--accent); vertical-align: top; position: relative; top: .2em; margin-left: .05em; }
.nums__cap { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); max-width: 26ch; }
@media (min-width: 900px) {
  .nums__grid { grid-template-columns: repeat(3, 1fr); }
  .nums__cell { padding: 40px 40px 0 0; }
  .nums__cell + .nums__cell { border-left: 1px solid var(--on-dark-line); padding-left: 40px; }
}

/* =========================================================
   FOUNDER
   ========================================================= */
.founder { padding-block: var(--section); background: var(--paper); }
.founder__grid { display: grid; gap: 48px; align-items: center; }
.founder__portrait { overflow: hidden; aspect-ratio: 4 / 5; max-width: 460px; width: 100%; }
.founder__ph {
  width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(11,37,69,.05) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #e3e9f1, #c3cfdf);
}
.founder__ph-mono { font-family: var(--f-display); font-size: 120px; line-height: 1; color: rgba(11,37,69,.25); }
.founder__text { display: grid; gap: 32px; }
.founder__quote { font-family: var(--f-display); font-style: italic; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.18; max-width: 22ch; }
.founder__name { font-family: var(--f-display); font-size: 26px; }
.founder__role { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-light-muted); margin-top: 4px; }
@media (min-width: 960px) { .founder__grid { grid-template-columns: 5fr 7fr; gap: 7vw; } }

/* =========================================================
   DIRECTORY MOSAIC
   ========================================================= */
.dir { padding-block: 0 var(--section); background: var(--paper); }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4; color: var(--on-dark); text-decoration: none; background: var(--ink-2); isolation: isolate;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,37,69,.35), rgba(11,37,69,.15) 40%, rgba(8,28,53,.9)); transition: opacity .6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11,37,69,.28); transition: opacity .6s var(--ease); pointer-events: none; }
.tile:hover::after { opacity: .08; }
.tile__num { position: absolute; top: 16px; left: 16px; font-size: 12px; letter-spacing: .2em; color: var(--on-dark-muted); }
.tile__body { display: grid; gap: 4px; padding: 16px; padding-right: 56px; }
.tile__verb { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.tile__name { font-family: var(--f-display); font-size: clamp(20px, 2vw, 30px); line-height: 1.1; }
.tile__arrow { position: absolute; right: 16px; bottom: 18px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.08); }
.tile:hover::before { background: linear-gradient(180deg, rgba(5,17,33,.1), rgba(5,17,33,.05) 40%, rgba(5,17,33,.9)); }
.tile:hover .tile__arrow { transform: translate(4px, -4px); }
.tile--a, .tile--f { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 899px) {
  .tile__arrow { top: 14px; bottom: auto; right: 14px; width: 20px; height: 20px; }
  .tile__body { padding-right: 16px; }
}
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(220px, 21vw, 340px); gap: 12px; }
  .tile { aspect-ratio: auto; }
  .tile--a { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .tile--f { grid-column: span 2; aspect-ratio: auto; }
  .tile__body { padding: 24px; padding-right: 64px; }
  .tile__num { top: 22px; left: 24px; }
  .tile__arrow { right: 24px; bottom: 26px; }
}

/* =========================================================
   REGISTER
   ========================================================= */
.reg { padding-block: var(--section); background: var(--ink); }
.reg__grid { display: grid; gap: 56px; }
.reg__intro { display: grid; gap: 24px; align-content: start; }
.reg__intro .label { color: var(--on-dark-muted); }
.reg__lede { color: var(--on-dark-muted); max-width: 46ch; font-size: 18px; }
.reg__contact { display: grid; gap: 18px; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--on-dark-line); }
.reg__contact dt { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-muted); }
.reg__contact dd a { display: inline-block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--on-dark-line); }
.reg__contact dd a:hover { border-color: var(--accent); }
@media (min-width: 960px) { .reg__grid { grid-template-columns: 5fr 7fr; gap: 7vw; } }

.form { display: grid; gap: 28px; }
.form__row { display: grid; gap: 28px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); padding: 0;
}
.field abbr { text-decoration: none; color: var(--accent); }
.opt { text-transform: none; letter-spacing: 0; font-size: 13px; opacity: .8; margin-left: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 17px; color: var(--on-dark);
  background: transparent; border: 0; border-bottom: 1px solid var(--on-dark-line); border-radius: 0;
  padding: 12px 0; min-height: 48px; transition: border-color .4s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--accent); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: 0 1px 0 0 var(--accent); }
.field [aria-invalid="true"] { border-bottom-color: #e0715a; }
.field__err { min-height: 0; font-size: 14px; color: #f0907c; }
.field__err:empty { display: none; }
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; opacity: .7;
}
.select select { padding-right: 28px; cursor: pointer; }
.select option { color: var(--ink); }

.chips legend { margin-bottom: 14px; }
.chips__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.field .chip { position: relative; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--on-dark); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--on-dark-line); border-radius: 2px; font-size: 15px;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.chip span::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); transition: background .3s; opacity: .7; }
.chip:hover span { border-color: var(--on-dark-muted); }
.chip input:checked + span { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.chip input:checked + span::before { background: var(--navy); border-color: var(--navy); opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.form__note { font-size: 14px; color: var(--on-dark-muted); }
.form-done { display: grid; gap: 18px; align-content: center; justify-items: start; padding: 48px 0; }
.form-done[hidden] { display: none; }
.form-done h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.form-done p { color: var(--on-dark-muted); max-width: 40ch; }
.form-done:focus { outline: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.ftr { background: var(--black); border-top: 1px solid var(--on-dark-line); padding-top: 48px; padding-bottom: max(28px, env(safe-area-inset-bottom)); overflow: hidden; }
.ftr__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.ftr__top .scripts { color: var(--on-dark-muted); }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ftr__nav a { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--on-dark-muted); padding: 12px 0; transition: color .3s; }
.ftr__nav a:hover { color: var(--on-dark); }
.ftr__word {
  font-family: var(--f-display); font-size: 25vw; line-height: .8; letter-spacing: .02em; text-align: center;
  margin: 32px 0 24px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22);
  white-space: nowrap; max-width: 100%;
}
@media (min-width: 1680px) { .ftr__word { font-size: 420px; } }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--on-dark-muted); }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 170;
  transform: translate(-50%, calc(100% + 48px)); padding: 14px 20px; max-width: calc(100vw - 32px);
  background: var(--ivory); color: var(--ink); font-size: 14px; border-radius: 2px;
  visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .6s var(--ease), visibility 0s; }

/* =========================================================
   MOTION PRE-STATES (only when JS motion is running)
   ========================================================= */
html.motion [data-fade] { opacity: 0; transform: translateY(28px); }
html.motion [data-clip] { clip-path: inset(100% 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .hero__media img { transform: none; }
}

/* =========================================================
   COMPANY LOGO MARKS
   ========================================================= */
.co-logo { display: inline-block; flex: none; fill: currentColor; }
.co-logo--xp { width: .9em; height: .9em; margin-right: .35em; vertical-align: -.08em; }
.co-logo--loop { width: .8em; height: .8em; margin-right: .3em; vertical-align: -.06em; }
.co-logo--menu { width: 16px; height: 16px; margin-left: auto; align-self: center; opacity: .8; }
.co-logo--tile { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; color: var(--white); }
@media (max-width: 899px) { .co-logo--tile { right: auto; left: 44px; top: 14px; width: 20px; height: 20px; } }
@media (min-width: 900px) { .co-logo--tile { top: 22px; right: 24px; width: 38px; height: 38px; } }

/* =========================================================
   FOUNDER PORTRAIT
   ========================================================= */
.founder__portrait { position: relative; }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.founder__portrait::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8,28,53,.85));
}
.founder__cap {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--white);
}
.founder__cap span:first-child { font-family: var(--f-display); font-size: 22px; }
.founder__cap span:last-child { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }

/* tablets: pair images with their text instead of leaving them alone in a column */
@media (min-width: 640px) and (max-width: 959px) {
  .story__aside { grid-template-columns: 1fr 1fr; gap: 32px; }
  .story__fig { max-width: none; }
  .founder__grid { grid-template-columns: 5fr 6fr; gap: 40px; }
  .founder__portrait { max-width: none; }
}

/* =========================================================
   RESPONSIVE REFINEMENTS
   ========================================================= */
/* narrow phones: slimmer gaps so each rail segment stays a comfortable tap target */
@media (max-width: 400px) { .xp.is-pinned .xp__rail { gap: 3px; } }

/* laptops with short screens (e.g. 1366x768, 1280x720): lift the watermark */
@media (min-width: 960px) and (max-height: 820px) {
  .xp.is-pinned .xp__word { top: 33%; }
  .xp__info { padding-bottom: 92px; }
}

/* phones held sideways and other very short screens */
@media (max-height: 560px) and (min-width: 560px) {
  .hero__inner { gap: 10px; }
  .hero__tagline { display: none; }
  .xp.is-pinned .xp__kicker { display: none; }
  .xp.is-pinned .xp__word { top: 27%; font-size: min(12vw, 24vh); }
  .xp__info {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 42%);
    grid-template-areas: "num num" "names desc" "names link";
    column-gap: 32px; row-gap: 6px; padding-bottom: 64px;
  }
  .xp__num { grid-area: num; }
  .xp__names { grid-area: names; align-self: end; }
  .xp__desc { grid-area: desc; align-self: end; font-size: 15px; }
  .xp__info .link-arrow { grid-area: link; }
  .xp__name { font-size: clamp(28px, 9vh, 44px); }
  .xp__names .scripts { margin-top: 6px; font-size: 14px; }
  .xp.is-pinned .xp__rail { bottom: 8px; }
  .menu__big a { font-size: clamp(28px, 9vh, 44px); }
}
/* narrow phones: keep the hero eyebrow on one tidy line */
@media (max-width: 420px) {
  .hero__eyebrow { white-space: nowrap; letter-spacing: .12em; gap: 8px; font-size: 11.5px; }
  .hero__eyebrow .sep { width: 12px; }
}

/* =========================================================
   OPENING ANIMATION
   Tiles assemble around a window onto the hero; the camera then
   pushes through the window and the window becomes the hero.
   ========================================================= */
.intro { display: none; }
html.js:not(.intro-done) .intro,
.intro.is-playing { display: block; position: fixed; inset: 0; z-index: 180; pointer-events: none; }
.intro__grid { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.intro__tile { position: absolute; overflow: hidden; background: var(--ink-2); }
.intro__img { position: absolute; inset: 0; }
.intro__img img { width: 100%; height: 100%; object-fit: cover; }
.intro__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,.15), rgba(8,28,53,.65)); }
.intro__label {
  position: absolute; left: 12px; bottom: 10px; z-index: 1; color: var(--white);
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.intro__label i { font-style: normal; opacity: .6; margin-right: 8px; }
.intro__caption {
  position: absolute; left: 0; right: 0; bottom: max(5vh, 24px); text-align: center; color: var(--white);
  font-family: var(--f-display); font-size: clamp(18px, 2.2vw, 28px); opacity: 0;
}
.intro__caption em { font-style: italic; }
@media (max-width: 560px) { .intro__label { display: none; } }

/* before and during the intro, the hero is only visible through the window */
html.js:not(.intro-done) .hero__media,
html.js:not(.intro-done) .hero__scrim { clip-path: circle(0px at 50% 45%); }
html.js:not(.intro-done) .hero__title,
html.js:not(.intro-done) .hero__eyebrow,
html.js:not(.intro-done) .hero__lede,
html.js:not(.intro-done) .hero__tagline,
html.js:not(.intro-done) .hero__foot > *,
html.js:not(.intro-done) .hdr { opacity: 0; }

/* =========================================================
   SHOWCASE: division label + grouped rail
   ========================================================= */
.xp__kicker { gap: 14px; }
.xp__div-num {
  display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px;
  border: 1px solid var(--on-dark-line); font-family: var(--f-display); font-size: 14px; letter-spacing: .06em; color: var(--white);
}
.xp__div-name { display: inline-block; }
.xp.is-pinned .xp__rail li.is-group-start:not(:first-child) { margin-left: 10px; }
@media (min-width: 960px) { .xp.is-pinned .xp__rail li.is-group-start:not(:first-child) { margin-left: 22px; } }

/* =========================================================
   MENU: division groups
   ========================================================= */
.menu__group {
  padding: 20px 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted);
}
.menu__group:first-child { padding-top: 0; }

/* =========================================================
   RASTER LOGOS (e.g. Archid Poultry)
   ========================================================= */
.co-logo--img { width: auto; object-fit: contain; }
.co-logo--xp.co-logo--img { height: 1.05em; width: auto; margin-right: .3em; vertical-align: -.14em; }
.co-logo--menu.co-logo--img { height: 22px; width: auto; opacity: 1; }
.co-logo--tile.co-logo--img { height: 44px; width: auto; }
@media (max-width: 899px) { .co-logo--tile.co-logo--img { height: 26px; } }

/* =========================================================
   STRUCTURE TREE
   ========================================================= */
.tree-sec { padding-block: var(--section); overflow: hidden; }
.tree { position: relative; }
.tree__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree__track { fill: none; stroke: var(--on-light-line); stroke-width: 1; }
.tree__thread { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: square; }

.tree__root { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 56px; color: var(--navy); }
.tree__root-mark { width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg); flex: none; }
.tree__root-name { font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1; }

.tree__divs { position: relative; display: grid; gap: 44px; padding-left: 36px; }
.tree__div { transition: opacity .6s var(--ease); }
html.motion .tree__div { opacity: .35; }
html.motion .tree__div.is-lit { opacity: 1; }
.tree__head { position: relative; display: grid; gap: 6px; }
.tree__mark {
  position: absolute; left: -35px; top: 3px; width: 12px; height: 12px;
  background: var(--white); border: 1px solid var(--on-light-muted); transform: rotate(45deg);
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
}
.tree__div.is-lit .tree__mark { background: var(--navy); border-color: var(--navy); transform: rotate(45deg) scale(1.2); }
.tree__verb { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--on-light-muted); }
.tree__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; color: var(--navy); }

.tree__cos { display: grid; gap: 2px; margin-top: 16px; padding-left: 18px; position: relative; }
.tree__cos::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--navy);
  transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .15s;
}
html:not(.motion) .tree__cos::before, .tree__div.is-lit .tree__cos::before { transform: scaleY(1); }
.tree__co a { display: grid; gap: 2px; padding: 10px 0; min-height: 44px; text-decoration: none; }
.tree__co-name {
  font-family: var(--f-display); font-size: 21px; line-height: 1.2; color: var(--black);
  display: inline-flex; align-items: center; transition: transform .5s var(--ease), color .3s;
}
.tree__co-note { font-size: 14px; color: var(--on-light-muted); }
.tree__co a:hover .tree__co-name, .tree__co a:focus-visible .tree__co-name { color: var(--navy); transform: translateX(6px); }
.co-logo--tree { width: .85em; height: .85em; margin-right: .4em; color: var(--navy); }
.co-logo--tree.co-logo--img { height: 1.2em; width: auto; }

@media (min-width: 900px) {
  .tree__root { justify-content: center; margin-bottom: 96px; }
  .tree__divs { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; padding-left: 0; padding-top: 40px; }
  .tree__mark { left: 0; top: -40px; }
}
/* raster logo inside a tile: must not inherit the tile photo's full-bleed styling */
.tile img.co-logo--tile {
  inset: auto; top: 22px; right: 24px; left: auto; z-index: 1;
  width: auto; height: 44px; object-fit: contain; transform: none; transition: none;
}
.tile:hover img.co-logo--tile { transform: none; }
@media (max-width: 899px) { .tile img.co-logo--tile { top: 12px; left: 44px; right: auto; height: 24px; } }

/* Archid Poultry mark: single colour, takes the surrounding text colour
   (white on navy and photos, navy on white), like the Builders mark. */
.co-logo--poultry {
  display: inline-block; flex: none; aspect-ratio: 193 / 256; background-color: currentColor;
  -webkit-mask: url("../assets/logos/archid-poultry-mark.png") center / contain no-repeat;
          mask: url("../assets/logos/archid-poultry-mark.png") center / contain no-repeat;
}
.co-logo--xp.co-logo--poultry { height: 1em; width: auto; margin-right: .3em; vertical-align: -.1em; }
.co-logo--tree.co-logo--poultry { height: 1.05em; width: auto; margin-right: .4em; color: var(--navy); }
.co-logo--menu.co-logo--poultry { height: 20px; width: auto; }
.co-logo--tile.co-logo--poultry { position: absolute; top: 22px; right: 24px; height: 40px; width: auto; color: var(--white); }
@media (max-width: 899px) { .co-logo--tile.co-logo--poultry { top: 12px; left: 44px; right: auto; height: 22px; } }

/* Company slide: full identity in white: rooster and eye solid, egg translucent */
.co-logo--poultry.co-logo--egg {
  aspect-ratio: 283 / 320;
  -webkit-mask-image: url("../assets/logos/archid-poultry-mark-egg.png");
          mask-image: url("../assets/logos/archid-poultry-mark-egg.png");
}
.co-logo--xp.co-logo--egg { height: 1.2em; margin-right: .35em; vertical-align: -.2em; color: var(--white); }

/* Structure section: inverted Poultry logo (navy egg, white rooster) */
.co-logo--tree.co-logo--navy-egg { height: 1.35em; width: auto; margin-right: .45em; vertical-align: -.25em; }

/* =========================================================
   PHONES: company showcase as a native swipe carousel
   (no pinning, no scroll hijacking: the phone's own physics)
   ========================================================= */
.xp__swipe { display: none; }
.xp.is-carousel { padding: calc(var(--hdr-h) + 8px) 0 36px; }
.xp.is-carousel .xp__stage { position: relative; display: grid; gap: 18px; }
.xp.is-carousel .xp__kicker { display: inline-flex; position: static; margin: 0 var(--gutter); min-height: 24px; }
.xp.is-carousel .xp__swipe {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 2px; right: var(--gutter);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted);
}
.xp.is-carousel .xp__swipe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }

.xp.is-carousel .xp__items {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.xp.is-carousel .xp__items::-webkit-scrollbar { display: none; }
.xp.is-carousel .xp__item {
  flex: 0 0 min(86%, 440px); min-height: 0; height: min(72svh, 620px);
  scroll-snap-align: start; scroll-snap-stop: always; border-radius: 2px;
}
.xp.is-carousel .xp__info { padding: 0 20px 22px; gap: 10px; }
/* the verb becomes a quiet watermark at the top of each card */
.xp.is-carousel .xp__verb {
  position: absolute; top: 18px; left: 20px; right: 20px; margin: 0;
  font-size: clamp(34px, 11.5vw, 56px); line-height: 1; white-space: nowrap;
  color: rgba(255,255,255,.22); -webkit-text-stroke: 1px rgba(255,255,255,.3);
}
.xp.is-carousel .xp__name { font-size: clamp(28px, 9.4cqi, 44px); }
.xp.is-carousel .xp__names .scripts { margin-top: 8px; font-size: 14px; }
.xp.is-carousel .xp__desc { font-size: 15px; line-height: 1.5; }
.xp.is-carousel .xp__info .link-arrow { min-height: 40px; }

.xp.is-carousel .xp__rail {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 0 var(--gutter);
}
.xp.is-carousel .xp__rail button { min-height: 32px; padding-bottom: 10px; }
.xp.is-carousel .xp__rail button span { display: none; }
.xp.is-carousel .xp__rail li.is-group-start:not(:first-child) { margin-left: 8px; }
.xp.is-carousel .xp__rail button::after { transition: transform .5s var(--ease); }

/* phones held sideways: wider, shorter cards */
@media (max-height: 560px) {
  .xp.is-carousel { padding-top: calc(var(--hdr-h) - 6px); padding-bottom: 20px; }
  .xp.is-carousel .xp__item { flex-basis: min(72%, 620px); height: calc(100svh - 150px); min-height: 230px; }
  .xp.is-carousel .xp__verb { font-size: min(8vw, 44px); }
  .xp.is-carousel .xp__name { font-size: clamp(26px, 6cqi, 36px); }
}
/* carousel layout: label on top, cards, then progress bar + swipe hint on one row */
.xp.is-carousel .xp__stage { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.xp.is-carousel .xp__kicker { grid-row: 1; grid-column: 1 / -1; }
.xp.is-carousel .xp__items { grid-row: 2; grid-column: 1 / -1; }
.xp.is-carousel .xp__rail { grid-row: 3; grid-column: 1; margin-right: 0; align-self: center; }
.xp.is-carousel .xp__swipe { grid-row: 3; grid-column: 2; position: static; margin-right: var(--gutter); transition: opacity .5s var(--ease); }
.xp.is-carousel.has-swiped .xp__swipe { opacity: 0; }
.xp.is-carousel .xp__rail button { min-height: 44px; padding-bottom: 18px; }
/* phones: the directory repeats the carousel, so keep it compact */
@media (max-width: 560px) {
  .mosaic { gap: 6px; }
  .tile { aspect-ratio: 1 / 1; }
  .tile--a, .tile--f { aspect-ratio: 16 / 9; }
  .tile__name { font-size: 18px; }
}
/* phones held sideways: the whole showcase fits one screen */
@media (max-height: 560px) {
  .xp.is-carousel { padding-top: calc(var(--hdr-h) - 16px); padding-bottom: 12px; }
  .xp.is-carousel .xp__stage { gap: 10px; }
  .xp.is-carousel .xp__item { height: calc(100svh - 168px); }
  .xp.is-carousel .xp__verb { top: 12px; font-size: min(6vw, 34px); }
  .xp.is-carousel .xp__num { display: none; }
  .xp.is-carousel .xp__rail button { min-height: 34px; padding-bottom: 12px; }
}

/* =========================================================
   ARCHID GROUP LOGO
   Mark, wordmark and "GROUP" are alpha masks filled with currentColor,
   so one set of files gives white on navy and navy on white.
   The mark keeps the ribbon's light-to-dark shading in its alpha.
   ========================================================= */
.brand-mark, .brand-word, .brand-group {
  display: inline-block; flex: none; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.brand-mark  { aspect-ratio: 1; -webkit-mask-image: url("../assets/logos/archid-mark.png"); mask-image: url("../assets/logos/archid-mark.png"); }
.brand-word  { aspect-ratio: 1800 / 210; -webkit-mask-image: url("../assets/logos/archid-wordmark.png"); mask-image: url("../assets/logos/archid-wordmark.png"); }
.brand-group { aspect-ratio: 808 / 73; -webkit-mask-image: url("../assets/logos/archid-group-word.png"); mask-image: url("../assets/logos/archid-group-word.png"); }

/* header */
.hdr__brand { gap: 12px; }
.hdr .hdr__mark.brand-mark { width: 34px; height: 34px; transform: none; background-color: currentColor; }
.hdr .hdr__word.brand-word { height: 13px; width: auto; font-size: 0; letter-spacing: 0; }
@media (max-width: 420px) { .hdr .hdr__mark.brand-mark { width: 30px; height: 30px; } .hdr .hdr__word.brand-word { height: 11px; } }

/* hero lockup (the landing page title) */
.hero__lockup { display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 22px); }
.hero__lockup .ch { display: block; overflow: hidden; padding: 4px 0; }
.hero__lockup .ch > span { display: block; }
.hero__mark { position: relative; width: clamp(88px, 21vh, 200px); height: auto; color: var(--white); margin-bottom: clamp(4px, 1vh, 12px); }
.hero .hero__word.brand-word { width: min(80vw, 760px, 88vh); height: auto; font-size: 0; margin: 0; letter-spacing: 0; }
.hero__group { width: clamp(120px, 15vw, 210px); height: auto; opacity: .9; }
/* while the intro weaves it, the mark is made of nine sector pieces */
.hero__mark.is-woven { -webkit-mask-image: none; mask-image: none; background: none; }
.hero__mark-piece { position: absolute; inset: 0; background-color: currentColor; will-change: transform, opacity;
  -webkit-mask: url("../assets/logos/archid-mark.png") center / contain no-repeat; mask: url("../assets/logos/archid-mark.png") center / contain no-repeat; }
@media (max-height: 560px) { .hero__mark { width: clamp(64px, 20vh, 110px); } .hero .hero__word.brand-word { width: min(60vw, 480px); } }

/* menu: a faint mark turning slowly behind the links */
.menu__mark { position: absolute; right: -12vw; bottom: -14vw; width: min(90vw, 760px); color: var(--white); opacity: .05; pointer-events: none;
  animation: markSpin 120s linear infinite; }
@keyframes markSpin { to { transform: rotate(360deg); } }

/* structure: the group logo is the root of the tree */
.tree__root .tree__root-mark.brand-mark { width: 48px; height: 48px; transform: none; background-color: var(--navy); }
.tree__root-name { font-size: clamp(24px, 2.4vw, 34px); }
@media (max-width: 899px) {
  .tree__divs { padding-left: 52px; }
  .tree__mark { left: -34px; }          /* centre of each division mark sits on the root mark's centre line (x = 24px) */
}
@media (min-width: 900px) { .tree__root .tree__root-mark.brand-mark { width: 64px; height: 64px; } }

/* numbers: a large faint mark, turned by scrolling */
.nums { position: relative; overflow: hidden; }
.nums__mark { position: absolute; right: -10vw; top: 50%; width: min(78vw, 680px); margin-top: calc(min(78vw, 680px) / -2);
  color: var(--white); opacity: .06; pointer-events: none; }
.nums__grid { position: relative; }

/* footer lockup */
.ftr__lockup { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); margin: 40px 0 28px; }
.ftr__mark { width: clamp(56px, 11vw, 170px); color: rgba(255,255,255,.9); }
.ftr__lockup .ftr__word.brand-word { flex: 1; width: auto; height: auto; min-width: 0; font-size: 0; margin: 0; color: rgba(255,255,255,.16); -webkit-text-stroke: 0; white-space: normal; }

/* form thank-you */
.form-done__mark { width: 48px; color: var(--white); }

/* =========================================================
   LANDING: nine-company background cycle + the mark as a dial
   ========================================================= */
.hero__media img.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.1); animation: none;
  transition: opacity 1.6s var(--ease), transform 9s linear;
}
.hero__media img.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__media.is-cut img.hero__slide { transition: none; }     /* the intro montage cuts instantly */
.hero__media::after { z-index: 1; }

/* each fold of the star is one company; the current one is lit */
.hero__mark-piece { transition: opacity .9s var(--ease); }
.hero__mark.is-dial .hero__mark-piece { opacity: .38; }
.hero__mark.is-dial .hero__mark-piece.is-on { opacity: 1; }

/* "now showing" caption */
.hero__foot-left { display: grid; gap: 14px; justify-items: start; }
.hero__now { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; color: var(--white); }
.hero__now-num { font-family: var(--f-display); font-size: 30px; line-height: 1; font-variant-numeric: lining-nums; }
.hero__now-text { display: grid; gap: 2px; }
.hero__now-name { font-family: var(--f-display); font-size: 19px; line-height: 1.15; }
.hero__now-div { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero__now-bar { position: relative; width: 56px; height: 1px; background: rgba(255,255,255,.25); overflow: hidden; align-self: center; }
.hero__now-bar i { position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero__now:hover .hero__now-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 420px) { .hero__now-bar { display: none; } .hero__now-num { font-size: 26px; } }
@media (max-height: 560px) { .hero__foot-left .scripts { display: none; } }

/* =========================================================
   LANDING (v3): logo-built background, nine-A star, company intro
   ========================================================= */
html.js:not(.intro-done) .hero__media.hero__bg { clip-path: none; }
.hero__bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(55% 45% at 50% 36%, rgba(62, 104, 158, .42) 0%, transparent 70%),
    radial-gradient(90% 55% at 50% 115%, rgba(0, 0, 0, .5) 0%, transparent 70%),
    var(--navy);
}
.hero__bg::after { display: none; }
.hero__bg-mark {
  position: absolute; width: 132vmin; left: calc(50% - 66vmin); top: calc(36% - 66vmin);
  color: var(--white); opacity: .05; animation: markSpin 200s linear infinite;
}

/* the star as nine separate A folds (plus a faint outline used by the intro) */
.hero__mark.is-folded { -webkit-mask-image: none; mask-image: none; background: none; }
.hero__mark-ghost, .hero__fold { position: absolute; inset: 0; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.hero__mark-ghost { -webkit-mask-image: url("../assets/logos/archid-mark.png"); mask-image: url("../assets/logos/archid-mark.png"); opacity: .12; }
html.intro-done .hero__mark-ghost { opacity: 0; }
.hero__fold { transition: opacity .45s var(--ease); will-change: transform, opacity; }
.hero__mark.is-picking .hero__fold { opacity: .28; }
.hero__mark.is-picking .hero__fold.is-on { opacity: 1; }

/* the lede names the company whose A you point at */
.hero__lede { display: grid; justify-items: center; }
.hero__lede-main, .hero__lede-co { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero__lede-co { opacity: 0; transform: translateY(8px); display: inline-flex; align-items: baseline; gap: 12px; }
.hero__lede.is-co .hero__lede-main { opacity: 0; transform: translateY(-8px); }
.hero__lede.is-co .hero__lede-co { opacity: 1; transform: none; }
.hero__lede-num { font-family: var(--f-ui); font-size: 12px; letter-spacing: .2em; color: var(--on-dark-muted); }

/* intro: company cards, shown one at a time where ARCHID will appear */
.intro-cos { position: absolute; left: 0; right: 0; height: 0; z-index: 3; pointer-events: none; }
.intro-co { position: absolute; left: 50%; top: 0; display: grid; justify-items: center; gap: 8px; white-space: nowrap; text-align: center; color: var(--white); }
.intro-co__num { font-size: 12px; font-weight: 500; letter-spacing: .24em; color: var(--on-dark-muted); }
.intro-co__name { font-family: var(--f-display); font-size: clamp(26px, 4.2vw, 50px); line-height: 1.05; display: inline-flex; align-items: center; }
.intro-co__div { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); }
.intro-co .co-logo--xp { color: var(--white); }
/* background star: fits the screen, centred, never cut off (rotation stays inside its box) */
.hero__bg-mark {
  --s: min(92vw, 92vh, 92svh);
  width: var(--s); height: var(--s); left: 50%; top: 50%;
  margin-left: calc(var(--s) / -2); margin-top: calc(var(--s) / -2);
}

/* =========================================================
   HERO: the nine verticals, separated by thin bars
   ========================================================= */
.hero__verticals {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  max-width: 980px; margin-top: 6px; row-gap: 2px;
}
.hero__verticals a {
  position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--on-dark-muted); white-space: nowrap; transition: color .3s var(--ease);
}
.hero__verticals a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(255,255,255,.3);
}
.hero__verticals a:hover, .hero__verticals a:focus-visible { color: var(--white); }
@media (max-width: 560px) {
  .hero__verticals { max-width: 360px; }
  .hero__verticals a { padding: 0 9px; font-size: 11.5px; letter-spacing: .12em; min-height: 30px; }
}
@media (max-height: 560px) { .hero__verticals { display: none; } }

/* =========================================================
   CAREERS
   ========================================================= */
.careers { padding-block: var(--section); background: linear-gradient(180deg, #dfe6ef 0, #eef2f7 120px, var(--white) 420px); }
.careers__head { display: grid; gap: 20px; }
.careers__why { display: grid; gap: 28px; margin-bottom: clamp(40px, 6vw, 72px); }
.careers__point { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--on-light-line); }
.careers__num { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--navy); }
.careers__point h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--navy); }
.careers__point p { color: var(--on-light-muted); max-width: 36ch; }
@media (min-width: 900px) { .careers__why { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.careers__areas { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.careers__areas .label { color: var(--on-light-muted); }
.careers__list { display: grid; }
.careers__list > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--on-light-line); }
.careers__list > div:first-child { border-top: 1px solid var(--on-light-line); }
.careers__list dt { font-family: var(--f-display); font-size: 21px; color: var(--navy); }
.careers__list dd { margin: 0; color: var(--on-light-muted); font-size: 15px; }
@media (min-width: 900px) { .careers__list > div { grid-template-columns: 1fr 1.4fr; align-items: baseline; gap: 32px; } }

.careers__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.careers__cta p { color: var(--on-light-muted); font-size: 15px; }
.careers__cta p a { color: var(--navy); }
.btn--navy { background: var(--navy); color: var(--white); min-height: 56px; padding: 0 28px; }
.btn--navy:hover { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.hero__verticals a.is-row-start::before { display: none; }

/* =========================================================
   ONE SECTION = ONE SCREEN
   Every section is exactly one screen tall on any device, with its
   content centred. Type, images and spacing scale with the screen's
   height as well as its width, so content shrinks rather than overflows.
   ========================================================= */
:root {
  --fit-top: calc(var(--hdr-h) + clamp(8px, 2.5vh, 32px));   /* clear the fixed header */
  --fit-bot: clamp(16px, 3.5vh, 44px);
  --fit-gap: clamp(12px, 2.6vh, 32px);
}
main > section:not(.hero):not(.xp) {
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--fit-top); padding-bottom: var(--fit-bot);
  display: flex; flex-direction: column; justify-content: center;
}
main > section:not(.hero):not(.xp) > .container { width: 100%; }
.sec-head { margin-bottom: var(--fit-gap); gap: clamp(8px, 1.6vh, 20px); }
.h2 { font-size: clamp(32px, min(5.4vw, 8.4vh), 88px); }
.sec-head__lede { font-size: clamp(15px, 2.1vh, 18px); }

/* ---------- The Group ---------- */
.story__grid { row-gap: var(--fit-gap); }
.statement { font-size: clamp(24px, min(4.4vw, 6.6vh), 68px); }
.story__aside { gap: var(--fit-gap); }
.story__fig { aspect-ratio: auto; width: 100%; max-width: none; height: clamp(150px, 40vh, 440px); }
.story__copy { gap: 14px; font-size: clamp(15px, 2.1vh, 17px); }
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 1.35fr 1fr; align-items: center; }
  .story__label { grid-column: 1 / -1; }
  .story__aside { grid-template-columns: 1fr; }
}
@media (max-width: 959px) {
  .story__fig { height: clamp(120px, 24svh, 320px); }
  .story__aside { grid-template-columns: 1fr; }
}

/* ---------- Careers ---------- */
.careers { background: linear-gradient(180deg, #dfe6ef 0, #eef2f7 120px, var(--white) 420px); }
.careers .sec-head--row { grid-template-columns: 1fr; }
.careers__why { gap: clamp(10px, 2vh, 22px); margin-bottom: var(--fit-gap); }
.careers__point { gap: 4px; padding-top: clamp(8px, 1.6vh, 16px); }
.careers__point h3 { font-size: clamp(19px, 2.8vh, 26px); }
.careers__point p { font-size: clamp(14px, 1.9vh, 16px); }
.careers__areas { gap: 10px; margin-bottom: var(--fit-gap); }
.careers__list > div { padding: clamp(8px, 1.5vh, 14px) 0; }
.careers__list dt { font-size: clamp(17px, 2.5vh, 21px); }
.careers__list dd { font-size: clamp(13px, 1.8vh, 15px); }
.careers__cta .btn--navy { min-height: 48px; }
@media (min-width: 960px) {
  .careers .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; align-items: center; }
  .careers .sec-head { grid-column: 1; grid-row: 1; }
  .careers__why { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
  .careers__cta { grid-column: 1; grid-row: 3; }
  .careers__areas { grid-column: 2; grid-row: 1 / 4; margin-bottom: 0; }
}
@media (max-width: 959px) {
  .careers__point p { display: none; }                       /* phones: the three headlines say it */
  .careers__point { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
  .careers__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .careers__list > div, .careers__list > div:first-child { border: 1px solid var(--on-light-line); padding: 8px 12px; }
  .careers__list dd { display: none; }                       /* phones: division names as tags */
  .careers__list dt { font-size: 16px; }
}

/* ---------- Numbers: a full-screen moment ---------- */
.nums { justify-content: center; }
.nums__val { font-size: clamp(56px, min(9vw, 14vh), 160px); }

/* ---------- Founder ---------- */
.founder__grid { gap: var(--fit-gap) 7vw; }
.founder__portrait { aspect-ratio: 4 / 5; height: clamp(220px, 68vh, 640px); width: auto; max-width: 100%; }
.founder__quote { font-size: clamp(22px, min(3.4vw, 4.8vh), 54px); }
.founder__text { gap: clamp(14px, 3vh, 32px); }
@media (max-width: 959px) {
  .founder__grid { grid-template-columns: 1fr; }
  .founder__portrait { height: clamp(180px, 34svh, 420px); }
}
@media (min-width: 640px) and (max-width: 959px) {
  .founder__grid { grid-template-columns: auto 1fr; align-items: center; }
}

/* ---------- Visit our companies: the grid fills the screen exactly ---------- */
.dir { height: 100vh; height: 100svh; }
.dir > .container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dir .sec-head { flex: none; }
.dir .mosaic { flex: 1; min-height: 0; grid-auto-rows: auto; }
.dir .tile, .dir .tile--a { aspect-ratio: auto; min-height: 0; }
@media (min-width: 900px) {
  .dir .mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .dir .tile--a { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 899px) {
  .dir .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .dir .tile--a { grid-column: span 2; grid-row: span 1; }
  .dir .sec-head__lede { display: none; }
  .dir .tile__body { padding: 10px 12px; }
  .dir .tile__name { font-size: clamp(15px, 2.2vh, 20px); }
  .dir .tile__verb { font-size: 12px; letter-spacing: .14em; }
}

/* ---------- Register: heading and form on one screen ---------- */
.reg__grid { gap: var(--fit-gap) 7vw; align-items: center; }
.reg__intro { gap: clamp(10px, 2vh, 22px); }
.reg__lede { font-size: clamp(15px, 2.1vh, 18px); }
.reg__contact { gap: 8px; margin-top: 0; padding-top: clamp(10px, 2vh, 24px); }
.form { gap: clamp(10px, 1.9vh, 22px); }
.form__row { gap: clamp(10px, 1.9vh, 22px) 20px; }
.field { gap: 4px; }
.field input, .field select, .field textarea { min-height: 42px; padding: 8px 0; font-size: 16px; }
.field textarea { min-height: 52px; height: 52px; }
.chips legend { margin-bottom: 8px; }
.chips__grid { gap: 6px; }
.chip span { min-height: 36px; padding: 0 12px; font-size: 14px; }
.form__foot { margin-top: 0; }
.btn--solid { min-height: 50px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 959px) {
  .reg__lede, .reg__contact, .form__note { display: none; }   /* phones: the contact details live in the footer */
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .field label, .field legend { font-size: 11.5px; letter-spacing: .12em; }
  .chip span { min-height: 34px; padding: 0 10px; font-size: 13px; }
  .form__foot { justify-content: stretch; }
  .form__foot .btn { width: 100%; }
}

/* ---------- Phones: the swipe carousel fills the screen too ---------- */
.xp.is-carousel { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.xp.is-carousel .xp__item { height: min(64svh, 600px); }
.ftr__contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ftr__contact a { text-decoration: none; padding: 10px 0; color: var(--on-dark-muted); }
.ftr__contact a:hover { color: var(--white); }
/* landing: spacing scales with screen height so it never exceeds one screen */
.hero__inner { gap: clamp(8px, 1.9vh, 22px); padding-top: calc(var(--hdr-h) - 8px); }
.hero__mark { width: clamp(72px, 19vh, 200px); }
.hero__lockup { gap: clamp(8px, 1.8vh, 22px); }
.hero__lede { font-size: clamp(19px, min(2.8vw, 3.8vh), 40px); }
.hero__tagline { font-size: clamp(11.5px, 1.6vh, 13px); }
.hero__verticals { margin-top: 0; }
.hero__verticals a { min-height: clamp(26px, 3.6vh, 32px); }
.hero__foot { padding-bottom: max(clamp(12px, 3vh, 28px), env(safe-area-inset-bottom)); }
.scroll-cue i { height: clamp(28px, 6vh, 56px); }
/* careers: compact reasons (headline only) wherever the full text would not fit */
@media (max-width: 1199px) {
  .careers__point p { display: none; }
  .careers__point { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
}
@media (max-width: 959px) {
  .careers .h2 { font-size: clamp(30px, 5vh, 44px); }
  .careers .sec-head__lede { font-size: 15px; line-height: 1.5; }
  .careers__why { gap: 8px; }
  .careers__point h3 { font-size: clamp(18px, 2.4vh, 22px); }
  .careers__list > div, .careers__list > div:first-child { padding: 6px 11px; }
  .careers__list dt { font-size: 15px; }
  .careers__cta { gap: 10px 20px; }
  .careers__cta p { font-size: 14px; }
}
/* short phones (e.g. iPhone SE 375x667, small Android 360x740): tighter, nothing removed from the form */
@media (max-width: 959px) and (max-height: 760px) {
  :root { --fit-top: calc(var(--hdr-h) + 2px); --fit-bot: 12px; --fit-gap: 12px; }
  .h2, .careers .h2 { font-size: clamp(26px, 4.6vh, 34px); }
  .statement { font-size: clamp(21px, 3.9vh, 28px); }
  .story__fig { height: 17svh; }
  .story__copy { font-size: 14px; line-height: 1.5; }
  .careers .sec-head__lede { font-size: 14px; line-height: 1.45; }
  .careers__point { padding-top: 6px; }
  .careers__point h3 { font-size: 17px; }
  .careers__areas { gap: 6px; }
  .careers__list { gap: 6px; }
  .careers__cta .btn--navy { min-height: 44px; }
  .reg .h2 { font-size: 26px; }
  .form, .form__row { gap: 8px 14px; }
  .field input, .field select { min-height: 38px; padding: 6px 0; font-size: 15px; }
  .field textarea { min-height: 40px; height: 40px; }
  .field label, .field legend { font-size: 11px; }
  .chips .opt { display: none; }
  .chip span { min-height: 32px; padding: 0 9px; font-size: 12.5px; }
  .chips__grid { gap: 5px; }
  .btn--solid { min-height: 44px; }
}

/* =========================================================
   NUMBERS AS A BANNER (not a full screen)
   ========================================================= */
main > section.nums.nums {
  min-height: 0; padding-top: clamp(36px, 7vh, 72px); padding-bottom: clamp(36px, 7vh, 72px);
}
.nums__grid { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: center; }
.nums__cell, .nums__cell + .nums__cell { padding: 4px clamp(12px, 3vw, 44px); border-top: 0; text-align: center; justify-items: center; gap: 6px; }
.nums__cell + .nums__cell { border-left: 1px solid var(--on-dark-line); }
.nums__val { font-size: clamp(38px, min(6.4vw, 11vh), 108px); line-height: 1; }
.nums__cap { font-size: 12px; letter-spacing: .14em; max-width: 22ch; }
.nums__mark { width: min(60vw, 520px); margin-top: calc(min(60vw, 520px) / -2); right: -6vw; opacity: .05; }
@media (max-width: 560px) {
  .nums__cell, .nums__cell + .nums__cell { padding: 4px 6px; }
  .nums__cap { letter-spacing: .06em; }
}

/* =========================================================
   CAREERS: interactive application, on a light background
   ========================================================= */
.careers__grid { display: grid; gap: var(--fit-gap) 6vw; align-items: center; }
@media (min-width: 960px) { .careers__grid { grid-template-columns: 1fr 1.05fr; } }
.careers__intro { display: grid; gap: clamp(10px, 2vh, 20px); align-content: center; }
.careers__intro .label { color: var(--on-light-muted); flex-wrap: wrap; }
.careers__where { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); }
.careers__lede { color: var(--on-light-muted); font-size: clamp(15px, 2.1vh, 18px); max-width: 44ch; }

.careers__picker { display: grid; gap: 12px; }
.careers__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--on-light-line); }
.careers__tabs::-webkit-scrollbar { display: none; }
.careers__tabs button {
  position: relative; flex: none; min-height: 42px; padding: 0 12px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-muted); transition: color .3s var(--ease);
}
.careers__tabs button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transition: transform .4s var(--ease); }
.careers__tabs button.is-on { color: var(--navy); }
.careers__tabs button.is-on::after { transform: scaleX(1); }
.careers__roles { display: flex; flex-wrap: wrap; gap: 8px; }
.careers__roles button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--on-light-line);
  border-radius: 2px; font-size: 14px; color: var(--black); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.careers__roles button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .6; }
.careers__roles button:hover { border-color: var(--navy); }
.careers__roles button.is-picked { background: var(--navy); color: var(--white); border-color: var(--navy); }
.careers__roles button.is-picked::before { background: var(--white); opacity: 1; }

/* light form fields */
.form--light .field label, .form--light .field legend, .form--light .field__label {
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-muted);
}
.form--light .field__label { display: block; }
.form--light .field input, .form--light .field select, .form--light .field textarea { color: var(--black); border-bottom-color: rgba(11,37,69,.25); }
.form--light .field input:focus, .form--light .field select:focus { border-bottom-color: var(--navy); }
.form--light .field input:focus-visible, .form--light .field select:focus-visible { box-shadow: 0 1px 0 0 var(--navy); }
.form--light .field abbr { color: var(--navy); }
.form--light .field__err { color: #b3261e; }
.form--light [aria-invalid="true"] { border-bottom-color: #b3261e; }
.form--light .form__note { color: var(--on-light-muted); }
.form--light .select option, .form--light .select optgroup { color: var(--black); }
.form--light .field select.is-flash { animation: flashField 1s var(--ease); }
@keyframes flashField { 0% { background: rgba(11,37,69,.12); } 100% { background: transparent; } }

/* CV drop zone */
.drop {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 6px; padding: 10px 16px;
  border: 1px dashed rgba(11,37,69,.35); border-radius: 2px; cursor: pointer; color: var(--on-light-muted);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.5; }
.drop__text strong { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.drop__file { color: var(--black); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.drop:hover, .drop.is-over { border-color: var(--navy); background: rgba(11,37,69,.04); }
.drop.has-file { border-style: solid; border-color: var(--navy); }
.drop.is-bad { border-color: #b3261e; }
.drop:focus-within { outline: 2px solid var(--navy); outline-offset: 3px; }

.careers__form .form__foot { flex-wrap: wrap; }
.form-done--light h3 { color: var(--navy); }
.form-done--light p { color: var(--on-light-muted); }
.form-done--light .form-done__mark { color: var(--navy); }

@media (max-width: 959px) {
  .careers__lede { font-size: 15px; }
  .careers__form .form__note { display: none; }
  .careers__form .form__foot .btn { width: 100%; }
}
@media (max-width: 959px) and (max-height: 760px) {
  .careers__lede { display: none; }
  .careers__roles button { min-height: 34px; padding: 0 10px; font-size: 13px; }
  .careers__tabs button { min-height: 36px; }
  .drop { min-height: 48px; padding: 6px 12px; }
}
.careers__roles[hidden] { display: none; }
/* a submitted form must disappear (the grid display was overriding [hidden]) */
.form[hidden] { display: none; }
/* the thank-you takes the form's place */
@media (min-width: 960px) {
  .careers__grid > .form-done, .reg__grid > .form-done { grid-column: 2; grid-row: 1; }
}

/* =========================================================
   PORTRAIT TABLETS (iPad mini, iPad, Android tablets)
   Tall screens that were getting phone-sized type.
   ========================================================= */
@media (min-width: 600px) and (max-width: 959px) and (min-height: 900px) {
  .h2 { font-size: clamp(40px, 7vw, 68px); }
  .statement { font-size: clamp(32px, 5.8vw, 54px); max-width: 17ch; }
  .story__copy, .sec-head__lede, .careers__lede, .reg__lede { font-size: 19px; line-height: 1.55; }
  .story__fig { height: 30svh; }
  .founder__quote { font-size: clamp(28px, 4.6vw, 42px); }
  .founder__portrait { height: 42svh; }
  .founder__name { font-size: 30px; }
  .hero__verticals { max-width: 620px; }
  .hero__verticals a { font-size: 13px; min-height: 36px; }
  .hero__lede { font-size: clamp(24px, 3.8vw, 34px); }
  .xp.is-carousel .xp__item { flex-basis: min(80%, 560px); height: min(66svh, 760px); }
  .xp.is-carousel .xp__name { font-size: clamp(32px, 8cqi, 52px); }
  .xp.is-carousel .xp__desc { font-size: 17px; }
  .careers__roles button { min-height: 44px; font-size: 15px; }
  .careers__tabs button { font-size: 13px; min-height: 46px; }
  .form--light .field input, .form--light .field select { font-size: 18px; min-height: 48px; }
  .nums__val { font-size: clamp(48px, 9vw, 84px); }
  .nums__cap { font-size: 13px; }
  .dir .tile__name { font-size: 24px; }
  .dir .sec-head__lede { display: block; }
}

/* half-screen laptop windows and other short narrow windows: careers keeps to one screen */
@media (max-width: 959px) and (max-height: 820px) {
  .careers__lede { display: none; }
  .careers__intro { gap: 10px; }
}
@media (min-width: 600px) and (max-width: 959px) and (min-height: 900px) {
  .founder__grid { grid-template-columns: 1fr; }
  .founder__portrait { height: 38svh; }
  .founder__quote { max-width: 24ch; }
}
/* phones: role chips on one swipeable row, like the tabs */
@media (max-width: 599px) {
  .careers__roles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .careers__roles::-webkit-scrollbar { display: none; }
  .careers__roles button { flex: none; }
  .careers__tabs { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .careers .h2 { font-size: clamp(28px, 4.6vh, 40px); }
}
/* short phones: tiles are small, so the sector label is enough; labels stay at 12px */
@media (max-width: 959px) and (max-height: 760px) {
  .dir .tile__num { display: none; }
  .field label, .field legend, .form--light .field label, .form--light .field__label { font-size: 12px; letter-spacing: .08em; }
}

/* =========================================================
   DROPDOWNS in the site's own style (built by js/main.js)
   ========================================================= */
.cselect { position: relative; }
.cselect::after { display: none; }
.cselect__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cselect__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 42px; padding: 8px 0; font: inherit; font-size: 16px; text-align: left; color: var(--on-dark);
  border-bottom: 1px solid var(--on-dark-line); transition: border-color .3s var(--ease);
}
.cselect__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .75; transition: transform .35s var(--ease); }
.cselect.is-open .cselect__btn svg { transform: rotate(180deg); }
.cselect__btn:hover, .cselect.is-open .cselect__btn { border-bottom-color: var(--white); }
.cselect__btn:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--white); }
.cselect__btn.is-flash { animation: flashField 1s var(--ease); }

.cselect__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  margin: 0; padding: 6px; list-style: none; max-height: 290px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink-2); border: 1px solid var(--on-dark-line); border-radius: 2px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
  opacity: 0; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .3s var(--ease);
}
.cselect.is-up .cselect__list { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); }
.cselect.is-open .cselect__list { opacity: 1; transform: none; }
.cselect__list:focus { outline: none; }
.cselect__group {
  padding: 12px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted);
}
.cselect__group:first-child { padding-top: 6px; }
.cselect__opt {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; border-radius: 2px;
  font-size: 15px; color: var(--on-dark); cursor: pointer; transition: background .15s;
}
.cselect__opt::before { content: ""; width: 6px; height: 6px; flex: none; border: 1px solid currentColor; transform: rotate(45deg); opacity: .4; }
.cselect__opt.is-active { background: rgba(255, 255, 255, .09); }
.cselect__opt[aria-selected="true"] { font-weight: 500; }
.cselect__opt[aria-selected="true"]::before { background: currentColor; opacity: 1; }

/* light version (Careers) */
.form--light .cselect__btn { color: var(--black); border-bottom-color: rgba(11, 37, 69, .25); }
.form--light .cselect__btn:hover, .form--light .cselect.is-open .cselect__btn { border-bottom-color: var(--navy); }
.form--light .cselect__btn:focus-visible { box-shadow: 0 1px 0 0 var(--navy); }
.form--light .cselect__list { background: var(--white); border-color: var(--on-light-line); box-shadow: 0 22px 48px rgba(11, 37, 69, .18); }
.form--light .cselect__group { color: var(--on-light-muted); }
.form--light .cselect__opt { color: var(--black); }
.form--light .cselect__opt::before { border-color: var(--navy); }
.form--light .cselect__opt.is-active { background: #eef2f7; }
.form--light .cselect__opt[aria-selected="true"] { color: var(--navy); }
.form--light .cselect__opt[aria-selected="true"]::before { background: var(--navy); }
.form--light .field input::placeholder { color: rgba(62, 74, 92, .55); }

@media (max-width: 959px) and (max-height: 760px) {
  .cselect__btn { min-height: 38px; padding: 6px 0; font-size: 15px; }
}
.cselect__list { right: auto; width: max(100%, 290px); max-width: calc(100vw - 2 * var(--gutter)); }
.cselect__group { letter-spacing: .12em; }
@media (max-width: 599px) { .drop { min-height: 52px; padding: 8px 14px; } .careers__intro { gap: 10px; } }

/* header: ARCHID with GROUP underneath, like the logo lockup */
.hdr__type { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.hdr .hdr__type .hdr__word.brand-word { height: 13px; }
.hdr__group { height: 6px; width: auto; opacity: .85; }
@media (max-width: 420px) {
  .hdr .hdr__type .hdr__word.brand-word { height: 11px; }
  .hdr__group { height: 5px; }
  .hdr__type { gap: 4px; }
}

/* dropdowns: rounded, translucent (frosted glass) */
.cselect__list {
  border-radius: 12px; padding: 8px;
  background: rgba(8, 28, 53, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .14);
}
.cselect__opt { border-radius: 8px; }
.cselect__opt.is-active { background: rgba(255, 255, 255, .12); }
.form--light .cselect__list {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(11, 37, 69, .12);
  box-shadow: 0 22px 48px rgba(11, 37, 69, .16);
}
.form--light .cselect__opt.is-active { background: rgba(11, 37, 69, .07); }
/* browsers without backdrop blur get a more solid panel so text stays readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cselect__list { background: rgba(8, 28, 53, .96); }
  .form--light .cselect__list { background: rgba(255, 255, 255, .97); }
}
.cselect__list { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.form--light .cselect__list { scrollbar-color: rgba(11,37,69,.25) transparent; }
.cselect__list::-webkit-scrollbar { width: 6px; }
.cselect__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 6px; }
.form--light .cselect__list::-webkit-scrollbar-thumb { background: rgba(11,37,69,.25); }
/* translucent, but solid enough that text behind the menu never competes with the options */
.cselect__list { background: rgba(10, 32, 60, .88); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.form--light .cselect__list { background: rgba(255, 255, 255, .86); }
/* final balance: glassy, but text behind never competes (even where blur is unsupported) */
.cselect__list { background: rgba(10, 32, 60, .94); }
.form--light .cselect__list { background: rgba(255, 255, 255, .9); }
/* no backdrop blur: it rendered unpredictably across browsers; plain translucency is consistent */
.cselect__list, .form--light .cselect__list { -webkit-backdrop-filter: none; backdrop-filter: none; }


/* =========================================================
   LIQUID GLASS (v2)
   No hard borders: edges are drawn with light alone — a hairline
   inner glow, a bright specular top edge and a soft sheen pooling
   in the top-left corner, over a strong blur + saturation.
   Clear glass on navy and imagery, navy-tinted glass on white.
   Text-heavy panels (dropdown lists, menu) stay dense enough to read.
   ========================================================= */
:root {
  --lg-sheen: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 70%);
  --glass-bg: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  --glass-blur: blur(22px) saturate(1.35) brightness(1.04);
  --glass-shadow:
    inset 0 1px .5px rgba(255,255,255,.42),
    inset 0 -1px .5px rgba(255,255,255,.06),
    inset 0 0 0 .5px rgba(255,255,255,.14),
    inset 0 0 22px rgba(255,255,255,.05),
    0 8px 28px rgba(3, 12, 26, .18);
  --glass-shadow-hi:
    inset 0 1px .5px rgba(255,255,255,.6),
    inset 0 0 0 .5px rgba(255,255,255,.24),
    inset 0 0 26px rgba(255,255,255,.10),
    0 12px 34px rgba(3, 12, 26, .24);
  /* on white: navy-tinted glass */
  --glass-light-bg: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%), linear-gradient(180deg, rgba(11,37,69,.035), rgba(11,37,69,.07));
  --glass-light-shadow:
    inset 0 1px .5px #fff,
    inset 0 0 0 .5px rgba(11,37,69,.10),
    inset 0 -1px 1px rgba(11,37,69,.04),
    0 6px 18px rgba(11,37,69,.08);
  /* navy liquid: primary actions on white */
  --glass-navy-bg: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.26), rgba(255,255,255,0) 55%), linear-gradient(180deg, #16395f, #0B2545);
  --glass-navy-shadow:
    inset 0 1px .5px rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(0,0,0,.18),
    0 10px 26px rgba(11,37,69,.28);
  /* white liquid: primary actions on navy */
  --glass-white-bg: radial-gradient(120% 160% at 18% -10%, #fff, rgba(255,255,255,.9) 55%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,238,246,.94));
  --glass-white-shadow:
    inset 0 1px .5px #fff,
    inset 0 -2px 6px rgba(11,37,69,.10),
    0 10px 26px rgba(3,12,26,.28);
  --glass-fallback: rgba(20, 48, 84, .9);
  --lg-t: background .45s var(--ease), color .35s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}

/* ---------- clear glass: controls over navy and imagery ---------- */
.hdr__cta, .hdr__menu,
.hero__verticals,
.xp__kicker, .xp__info .link-arrow, .xp__swipe,
.link-arrow--light,
.chip span,
.reg .cselect__btn,
.toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid transparent;
  box-shadow: var(--glass-shadow);
  transition: var(--lg-t);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hdr__cta, .hdr__menu, .hero__verticals, .xp__kicker, .xp__info .link-arrow, .xp__swipe,
  .link-arrow--light, .chip span, .reg .cselect__btn, .toast { background: var(--glass-fallback); }
}
/* hover: the glass fills with light */
.hdr__menu:hover, .link-arrow--light:hover, .chip:hover span, .reg .cselect__btn:hover, .reg .cselect.is-open .cselect__btn {
  background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
  box-shadow: var(--glass-shadow-hi);
}
.hdr__cta:hover, .xp__info .link-arrow:hover {
  background: var(--glass-white-bg); color: var(--navy); box-shadow: var(--glass-white-shadow); border-color: transparent;
}

/* ---------- header: floating glass bar ---------- */
.hdr::before {
  inset: 8px clamp(8px, 1.4vw, 16px); border-radius: 22px; border: 0;
  background: radial-gradient(80% 220% at 12% -40%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(22,52,90,.66), rgba(11,37,69,.58));
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.34), inset 0 0 0 .5px rgba(255,255,255,.10), 0 14px 36px rgba(3,12,26,.24);
}
/* over the pinned company showcase: solid (blurring moving full-screen photos is costly) */
.hdr.is-over-xp::before { background: rgba(11,37,69,.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hdr::before { background: rgba(11,37,69,.95); } }
.hdr { padding-left: calc(var(--gutter) + 6px); padding-right: calc(var(--gutter) + 2px); }
.hdr__cta { border-radius: 999px; min-height: 42px; padding: 0 20px; }
.hdr__menu { border-radius: 999px; min-height: 42px; padding: 0 16px 0 18px; }
body.menu-open .hdr__menu { box-shadow: var(--glass-shadow-hi); }

/* ---------- hero verticals capsule ---------- */
.hero__verticals { border-radius: 20px; padding: 4px 6px; margin-top: 4px; }
@media (max-width: 760px) { .hero__verticals { border-radius: 22px; padding: 8px 10px; } }
@media (min-width: 1100px) { .hero__verticals { max-width: none; flex-wrap: nowrap; } .hero__verticals a { padding: 0 12px; letter-spacing: .13em; } }

/* ---------- link buttons become glass pills ---------- */
.link-arrow--light, .story__copy .link-arrow { border-radius: 999px; padding: 0 18px 0 20px; min-height: 44px; }
.link-arrow--light::after, .story__copy .link-arrow::after { display: none; }
.story__copy .link-arrow { color: var(--navy); background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow); transition: var(--lg-t); }
.story__copy .link-arrow:hover { background: var(--glass-navy-bg); color: var(--white); box-shadow: var(--glass-navy-shadow); }

/* ---------- company showcase ---------- */
.xp__kicker { border-radius: 999px; padding: 6px 16px 6px 8px; color: var(--white); }
.xp__div-num { border: 0; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px .5px rgba(255,255,255,.4), inset 0 0 0 .5px rgba(255,255,255,.14); }
.xp.is-carousel .xp__swipe { border-radius: 999px; padding: 6px 14px; }

/* ---------- primary buttons: liquid fills ---------- */
.btn { border-radius: 999px; border: 0; }
.btn--solid { background: var(--glass-white-bg); color: var(--navy); box-shadow: var(--glass-white-shadow); transition: var(--lg-t); }
.btn--solid:hover {
  background: var(--glass-bg); color: var(--white); box-shadow: var(--glass-shadow-hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.btn--navy { background: var(--glass-navy-bg); color: var(--white); box-shadow: var(--glass-navy-shadow); transition: var(--lg-t); }
.btn--navy:hover { background: var(--glass-light-bg); color: var(--navy); box-shadow: var(--glass-light-shadow), 0 10px 26px rgba(11,37,69,.14); }
.btn:active, .chip:active span, .careers__roles button:active, .careers__tabs button:active { transform: scale(.97); }

/* ---------- register chips ---------- */
.chip span { border-radius: 999px; }
.chip input:checked + span { background: var(--glass-white-bg); color: var(--navy); box-shadow: var(--glass-white-shadow); border-color: transparent; }

/* ---------- careers (white section): navy-tinted glass ---------- */
.careers__tabs {
  gap: 2px; padding: 4px; margin-right: 0; border: 0; border-radius: 999px; justify-self: start; max-width: 100%; min-width: 0;
  background: linear-gradient(180deg, rgba(11,37,69,.07), rgba(11,37,69,.04));
  box-shadow: inset 0 1px 2px rgba(11,37,69,.08), inset 0 0 0 .5px rgba(11,37,69,.08);
}
.careers__tabs button { border-radius: 999px; padding: 0 16px; min-height: 40px; transition: var(--lg-t); }
@media (pointer: coarse) { .careers__tabs button { min-height: 44px; padding: 0 14px; } }
.careers__tabs button::after { display: none; }
.careers__tabs button:hover { color: var(--navy); }
.careers__tabs button.is-on { background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow), 0 4px 12px rgba(11,37,69,.10); }
.careers__roles button {
  border: 0; border-radius: 999px; padding: 0 16px;
  background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow); transition: var(--lg-t);
}
.careers__roles button:hover { box-shadow: var(--glass-light-shadow), 0 0 0 1px rgba(11,37,69,.18); }
.careers__roles button.is-picked { background: var(--glass-navy-bg); color: var(--white); box-shadow: var(--glass-navy-shadow); }
.drop {
  border: 1px dashed rgba(11,37,69,.22); border-radius: 18px;
  background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow);
}
.drop:hover, .drop.is-over { background: radial-gradient(120% 160% at 18% -10%, #fff, rgba(255,255,255,.4) 60%), linear-gradient(180deg, rgba(11,37,69,.05), rgba(11,37,69,.10)); border-color: rgba(11,37,69,.45); }
.drop.has-file { border-style: solid; border-color: rgba(11,37,69,.28); }
.drop.is-bad { border-color: #b3261e; }

/* ---------- dropdown triggers: glass fields ---------- */
.cselect__btn { border: 0; border-radius: 14px; padding: 8px 14px 8px 16px; min-height: 46px; margin-top: 4px; }
.cselect__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: var(--glass-shadow-hi); }
.form--light .cselect__btn { background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow); color: var(--black); transition: var(--lg-t); }
.form--light .cselect__btn:hover, .form--light .cselect.is-open .cselect__btn { box-shadow: var(--glass-light-shadow), 0 0 0 1px rgba(11,37,69,.2); }
.form--light .cselect__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: var(--glass-light-shadow); }
@media (max-width: 959px) and (max-height: 760px) { .cselect__btn { min-height: 40px; padding: 6px 12px 6px 14px; } }

/* ---------- dropdown lists: liquid, but dense enough to read ---------- */
.cselect__list {
  border: 0; border-radius: 18px; padding: 6px;
  background: radial-gradient(120% 90% at 15% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%), linear-gradient(170deg, rgba(24,54,92,.95), rgba(10,32,60,.97));
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.36), inset 0 0 0 .5px rgba(255,255,255,.12), 0 24px 50px rgba(3,12,26,.40);
}
.form--light .cselect__list {
  border: 0;
  background: radial-gradient(120% 90% at 15% -10%, #fff, rgba(255,255,255,.6) 55%), linear-gradient(170deg, rgba(255,255,255,.95), rgba(242,246,251,.93));
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1px .5px #fff, inset 0 0 0 .5px rgba(11,37,69,.10), 0 24px 50px rgba(11,37,69,.18);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cselect__list { background: #0f2c50; } .form--light .cselect__list { background: #fff; }
}
.cselect__opt { border-radius: 12px; }
.cselect__opt.is-active { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); box-shadow: inset 0 1px .5px rgba(255,255,255,.25); }
.form--light .cselect__opt.is-active { background: linear-gradient(180deg, rgba(11,37,69,.08), rgba(11,37,69,.05)); box-shadow: inset 0 1px .5px #fff; }

/* ---------- company tiles: glass strip ---------- */
@media (min-width: 600px) {
  .tile__body {
    position: relative; margin: 10px; padding: 12px 52px 12px 16px; border-radius: 18px;
    background: var(--glass-bg); border: 0;
    -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
    box-shadow: var(--glass-shadow);
    transition: background .5s var(--ease), box-shadow .5s var(--ease);
  }
  .tile:hover .tile__body { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: var(--glass-shadow-hi); }
  .tile__arrow { right: 26px; bottom: 26px; }
  .tile::before { background: linear-gradient(180deg, rgba(11,37,69,.25), rgba(11,37,69,.05) 45%, rgba(8,28,53,.45)); }
  .tile__verb { color: rgba(255,255,255,.9); }
}

/* ---------- full-screen menu: glass sheet ---------- */
.menu {
  background: radial-gradient(90% 70% at 10% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), linear-gradient(160deg, rgba(20,48,84,.80), rgba(8,28,53,.88));
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  overflow-x: hidden;   /* the turning background star must not create a sideways scrollbar */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .menu { background: var(--ink-2); } }

/* ---------- toast: navy liquid so it reads on white and navy ---------- */
.toast {
  border-radius: 999px; padding: 12px 22px; color: var(--white);
  background: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(28,60,100,.84), rgba(11,37,69,.88));
}

@media (prefers-reduced-motion: reduce) { .btn:active, .chip:active span, .careers__roles button:active, .careers__tabs button:active { transform: none; } }
.cselect, .cselect__btn { min-width: 0; }
.cselect__value { flex: 1; min-width: 0; }
@media (max-width: 599px) { .cselect__btn { min-height: 40px; margin-top: 2px; padding: 6px 12px 6px 14px; } }
@media (min-width: 600px) and (max-width: 959px) and (min-height: 900px) { .story__fig { height: 25svh; } }

/* =========================================================
   COMPANY BRANDS (from each company's brandbook)
   Showcase: reversed marks (navy turned white, brand accents kept)
   plus the company tagline in its own accent colour.
   Directory: the full-colour official mark on a white glass plate.
   ========================================================= */
.co-logo--rev { filter: drop-shadow(0 2px 10px rgba(3, 12, 26, .35)); }
.co-logo--xp.co-logo--rev { height: 1em; vertical-align: -.1em; margin-right: .32em; }
.xp__tag {
  display: block; margin-bottom: .55em; color: var(--co, var(--on-dark));
  font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 2.6vh, 25px); line-height: 1.2; letter-spacing: 0;
  text-shadow: 0 1px 14px rgba(3, 12, 26, .45);
}
.xp__lic { display: block; margin-top: .8em; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (max-height: 760px) { .xp__tag { font-size: clamp(17px, 2.5vh, 20px); margin-bottom: .4em; } .xp__lic { margin-top: .5em; } }
.co-logo--menu.co-logo--img { height: 20px; width: auto; max-width: 30px; object-fit: contain; }

.tile__plate {
  position: absolute; z-index: 2; top: 18px; right: 18px; width: 66px; height: 66px; padding: 10px;
  display: grid; place-items: center; border-radius: 18px; color: var(--navy);
  background: var(--glass-white-bg); box-shadow: var(--glass-white-shadow);
  transition: transform .6s var(--ease);
}
.tile .tile__plate img { position: static; inset: auto; z-index: auto; width: 100%; height: 100%; object-fit: contain; transform: none; transition: none; }
.tile:hover .tile__plate { transform: translateY(-3px); }
.tile:hover .tile__plate img { transform: none; }
.tile__plate-svg { width: 74%; height: 74%; fill: currentColor; }
.tile--a .tile__plate { width: 78px; height: 78px; }
@media (max-width: 899px) {
  .tile__plate { top: 10px; right: 10px; width: 40px; height: 40px; padding: 6px; border-radius: 12px; }
  .tile--a .tile__plate { width: 46px; height: 46px; }
  .tile:has(.tile__plate) .tile__arrow { top: auto; bottom: 22px; right: 22px; }
}
@media (max-width: 599px) { .tile:has(.tile__plate) .tile__arrow { display: none; } }

/* =========================================================
   V6 — CLEAN PASS
   Type: Outfit (geometric, round C/O/D like the ARCHID wordmark) for
   headings, labels and names; Manrope (a softer geometric grotesk) for
   reading text. Same proportions, so the two blend without a seam.
   Company marks in the site share one translucent white/blue look;
   the full-colour logos live only in "Visit our companies".
   ========================================================= */
:root {
  --f-display: "Outfit", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-hi: "Noto Sans Devanagari", "Mangal", sans-serif;
  --f-or: "Noto Sans Oriya", "Kalinga", sans-serif;
  --mono-2: #B4C6DE;          /* the soft blue second tone of the company marks */
  --slate: #758297;           /* Archid Group "Slate Blue" */
}
body { font-size: 16.5px; line-height: 1.65; letter-spacing: -.003em; }
em { font-style: normal; }

/* headings: light geometric, like the logo's GROUP line scaled up */
.h2, .statement, .menu__big a, .xp__name, .tile__name, .founder__quote, .founder__name, .form-done h3,
.careers__point h3, .careers__list dt, .intro-co__name, .founder__cap span:first-child, .loop__name {
  font-family: var(--f-display); font-weight: 300; font-style: normal; letter-spacing: -.015em;
}
.h2 em, .statement em { font-weight: 200; color: var(--mono-2); }
.section--light .h2 em, .section--light .statement em { color: var(--slate); }
.label, .hdr__nav a, .hdr__cta, .hdr__menu, .btn, .link-arrow, .xp__num, .tile__verb, .hero__eyebrow, .hero__tagline,
.hero__verticals a, .careers__tabs button, .scroll-cue, .intro-co__div, .intro-co__num, .menu__group, .nums__cap {
  font-family: var(--f-display);
}
.nums__val { font-family: var(--f-display); font-weight: 200; letter-spacing: -.02em; }
.founder__quote { font-size: clamp(26px, 3.1vw, 48px); line-height: 1.22; }
.xp__verb, .xp.is-pinned .xp__word { font-family: var(--f-display); font-weight: 200; letter-spacing: .06em; }
.statement { letter-spacing: -.02em; }

/* ---------- landing: the star is the background ---------- */
.hero__bg {
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(62, 104, 158, .40) 0%, transparent 72%),
    radial-gradient(90% 55% at 50% 115%, rgba(0, 0, 0, .5) 0%, transparent 70%),
    var(--navy);
}
.hero__bg .hero__mark {
  --s: min(92vw, 92vh, 92svh);
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  color: var(--white); pointer-events: none; will-change: transform;
}
.hero__bg .hero__fold { opacity: .08; transition: opacity .6s var(--ease); }
.hero__bg .hero__mark.is-picking .hero__fold { opacity: .045; }
.hero__bg .hero__mark.is-picking .hero__fold.is-on { opacity: .34; }
.hero__mark.is-spinning { animation: markSpin 150s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero__mark.is-spinning { animation: none; } }

/* ARCHID GROUP carries the screen */
.hero__inner { gap: clamp(14px, 2.6vh, 30px); }
.hero__lockup { gap: clamp(14px, 2.6vh, 28px); }
.hero .hero__word.brand-word { width: min(86vw, 1040px, 118vh); }
.hero__group { width: clamp(150px, 19vw, 300px); opacity: .92; }
.hero__tagline { font-size: clamp(12px, 1.7vh, 15px); font-weight: 400; letter-spacing: .34em; color: rgba(255,255,255,.86); max-width: none; }
@media (max-height: 560px) and (min-width: 560px) { .hero__tagline { display: block; } }
@media (max-width: 420px) { .hero__tagline { letter-spacing: .24em; } }

/* intro cards: names set like the wordmark, marks translucent and colourless */
.intro-co__name { text-transform: uppercase; font-weight: 300; letter-spacing: .16em; font-size: clamp(20px, 3.4vw, 40px); gap: .1em; }
.intro-co .co-logo { opacity: .78; filter: none; }
.intro-co__num { font-weight: 400; }

/* ---------- company showcase: one family of marks, one quiet tagline colour ---------- */
.co-logo--xp { opacity: .9; }
.co-logo--rev { filter: none; }
.xp__name svg.co-logo--xp, .co-logo--menu:not(.co-logo--img), .intro-co svg.co-logo { color: var(--white); }
.xp__tag {
  color: var(--mono-2); font-family: var(--f-display); font-style: normal; font-weight: 400;
  font-size: clamp(16px, 2.2vh, 21px); letter-spacing: .02em; text-shadow: 0 1px 14px rgba(3, 12, 26, .45);
}
.xp__name { font-weight: 300; letter-spacing: -.025em; }

/* ---------- Visit our companies: one glass card per tile ---------- */
.tile .tile__card {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px;
  background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.38), inset 0 0 0 .5px rgba(255,255,255,.14), 0 10px 28px rgba(3,12,26,.22);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tile .tile__card { background: rgba(11,37,69,.78); } }
.tile:hover .tile__card { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); transform: translateY(-3px); }
.tile .tile__card .tile__plate {
  position: static; flex: none; width: 52px; height: 52px; padding: 8px; border-radius: 15px;
  --mono-2: currentColor; transform: none;
}
.tile--a .tile__card .tile__plate { width: 58px; height: 58px; }
.tile .tile__card .tile__body {
  position: static; flex: 1; min-width: 0; margin: 0; padding: 0; display: grid; gap: 2px;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tile .tile__card .tile__arrow { position: static; flex: none; display: block; width: 22px; height: 22px; opacity: .85; }
.tile:hover .tile__card .tile__arrow { transform: translate(3px, -3px); }
.tile .tile__name { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.15; }
.tile .tile__verb { font-size: 12px; letter-spacing: .18em; font-weight: 500; color: rgba(255,255,255,.82); }
.tile::before { background: linear-gradient(180deg, rgba(11,37,69,.2), rgba(11,37,69,0) 40%, rgba(8,28,53,.55)); }
@media (max-width: 899px) {
  .tile .tile__card { left: 8px; right: 8px; bottom: 8px; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; }
  .tile .tile__card .tile__plate, .tile--a .tile__card .tile__plate { width: 40px; height: 40px; padding: 6px; border-radius: 12px; }
  .tile .tile__name { font-size: 16px; }
}
@media (max-width: 599px) {
  .tile .tile__card { left: 6px; right: 6px; bottom: 6px; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 14px; }
  .tile .tile__card .tile__plate, .tile--a .tile__card .tile__plate { width: 32px; height: 32px; padding: 4px; border-radius: 10px; }
  .tile .tile__card .tile__arrow { display: none; }
  .tile .tile__name { font-size: 13.5px; letter-spacing: -.01em; }
  .tile .tile__verb { display: none; }
}

/* ---------- liquid glass, calmer: less shine, even proportions ---------- */
:root {
  --lg-sheen: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 70%);
  --glass-bg: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  --glass-shadow:
    inset 0 1px .5px rgba(255,255,255,.34),
    inset 0 0 0 .5px rgba(255,255,255,.12),
    0 6px 22px rgba(3, 12, 26, .14);
}
.hdr__cta, .hdr__menu { min-height: 44px; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; }
.hdr__cta { padding: 0 22px; }
.hdr__menu { padding: 0 18px 0 20px; gap: 12px; }
.link-arrow--light, .story__copy .link-arrow { min-height: 46px; padding: 0 20px 0 22px; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.link-arrow svg { width: 18px; height: 18px; }
.btn { font-size: 12px; font-weight: 500; letter-spacing: .22em; gap: 14px; }
.btn--navy, .btn--solid { min-height: 54px; padding: 0 30px; }
.hero__verticals a { font-weight: 400; letter-spacing: .16em; }
.xp__kicker { padding: 6px 18px 6px 6px; gap: 12px; }
.xp__div-num { font-family: var(--f-display); font-weight: 500; }

/* menu: scrolls on its own when it is taller than the screen */
.menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu__big a { font-weight: 200; letter-spacing: -.02em; }
.menu__list a { font-family: var(--f-display); font-weight: 300; }
/* menu: when it scrolls, items fade out under the header row instead of sliding beneath the logo */
.menu::before {
  content: ""; position: sticky; top: 0; z-index: 3; display: block; pointer-events: none;
  height: calc(var(--hdr-h) + 20px); margin-bottom: calc(-1 * (var(--hdr-h) + 20px));
  background: linear-gradient(180deg, #0a2140 0%, rgba(10, 33, 64, .92) 55%, rgba(10, 33, 64, 0) 100%);
}
/* tiles: labels never spill out of their card; narrow tiles (small laptops) drop the arrow and tighten */
.tile .tile__verb, .tile .tile__name { overflow: hidden; text-overflow: ellipsis; }
.tile .tile__verb { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1279px) {
  .tile:not(.tile--a) .tile__card { gap: 10px; padding: 8px 12px 8px 8px; }
  .tile:not(.tile--a) .tile__card .tile__plate { width: 40px; height: 40px; padding: 6px; border-radius: 12px; }
  .tile:not(.tile--a) .tile__card .tile__arrow { display: none; }
  .tile:not(.tile--a) .tile__verb { letter-spacing: .1em; }
  .tile:not(.tile--a) .tile__name { font-size: 16px; }
}
/* office address (links to Google Maps) */
.reg__contact dd a.reg__addr { padding: 6px 0; line-height: 1.5; max-width: 34ch; }
.ftr__addr { margin: 0; flex-basis: 100%; order: -1; font-size: 14px; }
.ftr__addr a { color: var(--on-dark-muted); text-decoration: none; }
.ftr__addr a:hover { color: var(--white); }
.menu__addr a { text-decoration: none; color: inherit; }
.menu__addr a:hover { color: var(--white); }

/* =========================================================
   V7 — LAUNCH ESSENTIALS
   Hero calls to action, FAQ, form states, thank-you panels,
   phone quick-action bar, cookie banner, legal links.
   ========================================================= */

/* ---------- hero: two calls to action above the fold ---------- */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.hero__cta .btn--solid { min-height: 50px; padding: 0 26px; }
.hero__cta .link-arrow--light { min-height: 50px; }
@media (max-width: 599px) {
  .hero__cta { gap: 10px; width: 100%; max-width: 360px; }
  .hero__cta > * { flex: 1 1 100%; justify-content: center; }
  .hero__cta .btn--solid, .hero__cta .link-arrow--light { min-height: 46px; }
}
@media (max-height: 640px) { .hero__cta .link-arrow--light { display: none; } }

/* ---------- FAQ: glass accordion on navy ---------- */
.faq { position: relative; padding-block: var(--section); background: linear-gradient(180deg, #0d2a4d 0%, var(--ink) 100%); overflow: hidden; isolation: isolate; }
.faq::before {   /* a faint quarter of the star, like the menu */
  content: ""; position: absolute; z-index: -1; right: -18vmin; top: -22vmin; width: 70vmin; height: 70vmin; opacity: .045;
  background: var(--white); -webkit-mask: url("../assets/logos/archid-mark.png") center / contain no-repeat; mask: url("../assets/logos/archid-mark.png") center / contain no-repeat;
}
.faq__grid { display: grid; gap: clamp(20px, 4vh, 48px); align-items: start; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: .9fr 1.3fr; gap: 6vw; align-items: center; } }
.faq__intro { display: grid; gap: clamp(10px, 2vh, 20px); }
.faq__intro .label { color: var(--on-dark-muted); }
.faq__lede { color: var(--on-dark-muted); max-width: 38ch; font-size: clamp(15px, 2vh, 17px); }
.faq__lede a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.faq__lede a:hover { border-color: var(--white); }
.faq__list { display: grid; gap: 8px; }
.faq__item {
  border-radius: 18px; background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--glass-shadow); transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.faq__item[open] { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); box-shadow: var(--glass-shadow-hi); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 18px 12px 22px; font-family: var(--f-display); font-weight: 400; font-size: clamp(15px, 2.1vh, 18px); color: var(--white);
  border-radius: 18px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {   /* plus that turns into a minus */
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(var(--white), var(--white)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 1.5px 11px no-repeat,
    rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); transition: transform .4s var(--ease), background-size .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(180deg); background-size: 11px 1.5px, 1.5px 0, auto; }
.faq__item summary:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.faq__item p { margin: 0; padding: 0 22px 18px; color: var(--on-dark-muted); font-size: 15.5px; max-width: 60ch; }
.faq__item p a { color: var(--white); }
.faq__item[open] p { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .faq__item summary { min-height: 48px; padding: 10px 12px 10px 16px; }
  .faq__item p { padding: 0 16px 14px; font-size: 15px; }
  .faq__lede { display: none; }
}

/* ---------- forms: busy button, in-form alert ---------- */
.btn.is-loading { pointer-events: none; }
.btn.is-loading svg { display: none; }
.btn.is-loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form.is-sending .field, .form.is-sending .chips, .form.is-sending .drop { opacity: .55; pointer-events: none; transition: opacity .3s; }
.form__alert {
  margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.5;
  color: #fff; background: rgba(214, 69, 58, .18); box-shadow: inset 0 0 0 1px rgba(255, 140, 130, .45);
}
.form__alert a { color: inherit; }
.form--light .form__alert { color: #8e1f17; background: #fdeceb; box-shadow: inset 0 0 0 1px rgba(179, 38, 30, .25); }
.form__note a { color: inherit; }
@media (max-width: 599px) { .reg .form__note, .careers__form .form__note { display: block; font-size: 12.5px; } }

/* ---------- thank-you panels ---------- */
.form-done { gap: 14px; }
.form-done__check { width: 56px; height: 56px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-done--light .form-done__check { stroke: var(--navy); }
.form-done__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; opacity: .5; }
.form-done__check path { stroke-dasharray: 36; stroke-dashoffset: 36; }
.form-done.is-in .form-done__check circle { animation: draw .9s var(--ease) forwards; }
.form-done.is-in .form-done__check path { animation: draw .5s var(--ease) .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .form-done__check circle, .form-done__check path { stroke-dashoffset: 0; animation: none !important; } }
.form-done h3 { font-size: clamp(34px, 4.4vw, 60px); }
.form-done__next { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 8px; }
.form-done__next li { counter-increment: n; display: flex; gap: 12px; align-items: baseline; color: var(--on-dark-muted); font-size: 15px; }
.form-done__next li::before { content: "0" counter(n); font-family: var(--f-display); font-size: 12px; letter-spacing: .16em; color: var(--white); }
.form-done--light .form-done__next li { color: var(--on-light-muted); }
.form-done--light .form-done__next li::before { color: var(--navy); }
.form-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.form-done__again { min-height: 44px; padding: 0 4px; font: inherit; font-family: var(--f-display); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.form-done__again:hover { color: var(--white); }
.form-done--light .form-done__again { color: var(--on-light-muted); }
.form-done--light .form-done__again:hover { color: var(--navy); }
.form-done--light .link-arrow { color: var(--navy); }

/* ---------- phones: quick-action bar ---------- */
.mbar { display: none; }
@media (max-width: 719px) {
  .mbar {
    position: fixed; z-index: 90; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; gap: 8px; padding: 6px; border-radius: 22px;
    background: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(20,48,84,.78), rgba(11,37,69,.84));
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 1px .5px rgba(255,255,255,.3), inset 0 0 0 .5px rgba(255,255,255,.12), 0 14px 34px rgba(3,12,26,.35);
    transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform .55s var(--ease), opacity .35s var(--ease);
  }
  .mbar[hidden] { display: none; }
  .mbar.is-on { transform: none; opacity: 1; }
  .mbar__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 16px;
    font-family: var(--f-display); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--white);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18);
  }
  .mbar__btn--primary { flex: 1; color: var(--navy); background: var(--glass-white-bg); box-shadow: var(--glass-white-shadow); }
  .mbar__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
  .toast { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .mbar { background: rgba(11,37,69,.96); } }
@media (prefers-reduced-motion: reduce) { .mbar { transition: opacity .2s; transform: none; } }

/* ---------- cookie banner ---------- */
.cookie {
  position: fixed; z-index: 120; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(680px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 16px 16px 22px; border-radius: 22px; color: var(--white);
  background: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(20,48,84,.86), rgba(11,37,69,.92));
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.3), inset 0 0 0 .5px rgba(255,255,255,.12), 0 18px 44px rgba(3,12,26,.4);
  transform: translate(-50%, calc(100% + 30px)); opacity: 0; transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.cookie.is-on { transform: translate(-50%, 0); opacity: 1; }
.cookie[hidden] { display: none; }
.cookie__text { flex: 1 1 300px; margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
.cookie__text strong { color: var(--white); font-weight: 600; }
.cookie__text a { color: var(--white); }
.cookie__actions { display: flex; gap: 8px; margin-left: auto; }
.cookie__btn {
  min-height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--f-display); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); background: var(--glass-white-bg); box-shadow: var(--glass-white-shadow); cursor: pointer;
}
.cookie__btn--ghost { color: var(--white); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); }
.cookie__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 480px) { .cookie { padding: 14px; } .cookie__actions { width: 100%; } .cookie__btn { flex: 1; } }

/* ---------- footer: legal links ---------- */
.ftr__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ftr__legal a { padding: 10px 0; color: var(--on-dark-muted); text-decoration: none; font-size: 14px; }
.ftr__legal a:hover { color: var(--white); }

/* keyboard focus: one consistent, visible ring everywhere */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 3px; }
.section--light :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--navy); }

/* =========================================================
   DOCUMENT PAGES (privacy.html, terms.html)
   Navy band with the title, then a calm white reading column.
   ========================================================= */
.doc-page { background: var(--white); color: var(--on-light); }
.doc-hdr {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gutter); min-height: 68px;
  background: linear-gradient(180deg, rgba(20,48,84,.92), rgba(11,37,69,.9));
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.doc-hdr__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; min-height: 44px; }
.doc-hdr__mark { width: 30px; height: 30px; }
.doc-hdr__type { display: grid; gap: 3px; justify-items: center; }
.doc-hdr__word { width: 104px; }
.doc-hdr__group { width: 40px; opacity: .8; }
.doc-hdr__back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-display); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--white);
  background: var(--glass-bg); box-shadow: var(--glass-shadow); transition: background .4s var(--ease);
}
.doc-hdr__back:hover { background: var(--glass-white-bg); color: var(--navy); }
.doc-hdr__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.doc-hero { position: relative; overflow: hidden; padding: clamp(48px, 9vh, 110px) 0 clamp(36px, 6vh, 72px); background: var(--navy); color: var(--white); isolation: isolate; }
.doc-hero::after {
  content: ""; position: absolute; z-index: -1; right: -12vmin; top: 50%; width: 60vmin; height: 60vmin; transform: translateY(-50%); opacity: .06;
  background: var(--white); -webkit-mask: url("../assets/logos/archid-mark.png") center / contain no-repeat; mask: url("../assets/logos/archid-mark.png") center / contain no-repeat;
}
.doc-hero .label { color: var(--on-dark-muted); }
.doc-hero__title { margin: 14px 0 10px; font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 7vw, 84px); line-height: 1; letter-spacing: -.02em; }
.doc-hero__title em { font-weight: 200; color: var(--mono-2); }
.doc-hero__meta { margin: 0; color: var(--on-dark-muted); font-size: 14px; }

.doc { display: grid; gap: 32px; padding-block: clamp(36px, 7vh, 80px); }
@media (min-width: 960px) { .doc { grid-template-columns: 240px minmax(0, 720px); gap: 72px; } }
.doc__toc { align-self: start; }
@media (min-width: 960px) { .doc__toc { position: sticky; top: 96px; } }
.doc__toc .label { color: var(--on-light-muted); margin-bottom: 12px; }
.doc__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: t; }
.doc__toc li { counter-increment: t; }
.doc__toc a { display: flex; gap: 10px; padding: 6px 0; text-decoration: none; color: var(--on-light-muted); font-size: 14.5px; }
.doc__toc a::before { content: counter(t, decimal-leading-zero); font-family: var(--f-display); font-size: 11.5px; letter-spacing: .1em; color: var(--slate); padding-top: 2px; }
.doc__toc a:hover { color: var(--navy); }
@media (max-width: 959px) { .doc__toc { padding: 16px 20px; border-radius: 18px; background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow); } .doc__toc ol { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
@media (max-width: 480px) { .doc__toc ol { grid-template-columns: 1fr; } }
.doc__body { color: var(--on-light-muted); font-size: 16.5px; line-height: 1.75; }
.doc__body h2 { margin: 2.2em 0 .6em; scroll-margin-top: 96px; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; color: var(--navy); letter-spacing: -.01em; }
.doc__body p, .doc__body ul { margin: 0 0 1em; }
.doc__body ul { padding-left: 1.2em; }
.doc__body li { margin-bottom: .5em; }
.doc__body li::marker { color: var(--slate); }
.doc__body strong { color: var(--on-light); font-weight: 600; }
.doc__body a { color: var(--navy); text-underline-offset: 3px; }
.doc__body code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: #eef2f7; color: var(--navy); }
.doc__lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--on-light); }
.doc__contact { font-style: normal; padding: 20px 22px; border-radius: 18px; background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow); margin-bottom: 1em; }
.ftr--doc { padding-block: 28px; }
.ftr--doc .ftr__bottom { margin: 0; }
/* the home page's one-section-one-screen rule does not apply to documents */
.doc-page main > section:not(.hero):not(.xp) { min-height: 0; display: block; padding: clamp(48px, 9vh, 110px) 0 clamp(36px, 6vh, 72px); }

/* =========================================================
   404
   ========================================================= */
.nf-page { background: var(--navy); }
.nf {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 48px var(--gutter);
  background: radial-gradient(60% 50% at 50% 45%, rgba(62,104,158,.38) 0%, transparent 72%), var(--navy);
}
.nf__star { position: absolute; z-index: -1; --s: min(92vw, 92vh); width: var(--s); height: var(--s); left: 50%; top: 50%; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: .06; color: var(--white); animation: markSpin 150s linear infinite; }
@media (prefers-reduced-motion: reduce) { .nf__star { animation: none; } }
.nf__inner { display: grid; justify-items: center; gap: clamp(12px, 2.4vh, 22px); text-align: center; max-width: 720px; }
.nf__brand { display: grid; justify-items: center; gap: 8px; color: var(--white); text-decoration: none; margin-bottom: clamp(8px, 3vh, 28px); }
.nf__word { width: min(56vw, 260px); }
.nf__group { width: min(22vw, 90px); opacity: .85; }
.nf__code { color: var(--on-dark-muted); }
.nf__title { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(36px, 6vw, 72px); line-height: 1.05; letter-spacing: -.02em; color: var(--white); }
.nf__title em { font-weight: 200; color: var(--mono-2); }
.nf__text { margin: 0; color: var(--on-dark-muted); max-width: 44ch; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 8px; }
/* founder caption: the name never breaks across lines */
.founder__cap span:first-child { white-space: nowrap; }
@media (max-width: 599px) { .founder__cap { flex-direction: column; align-items: flex-start; gap: 2px; left: 14px; bottom: 12px; } .founder__cap span:first-child { font-size: 18px; } .founder__cap span:last-child { font-size: 12px; } }
/* phones: room for the privacy note while Register still fits one screen */
@media (max-width: 599px) {
  .reg .form__foot { gap: 6px; }
  .reg .btn--solid { min-height: 48px; }
  .reg textarea { min-height: 40px; height: 40px; }
}
/* phones: the privacy link sits beside the button so the forms still fit one screen */
@media (max-width: 599px) {
  .form__note-long { display: none; }
  .reg .form__foot, .careers__form .form__foot { flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .reg .form__foot .btn, .careers__form .form__foot .btn { flex: 1; width: auto; }
  .reg .form__note, .careers__form .form__note { flex: none; font-size: 12px; }
}
@media (max-width: 599px) { .dir .tile__num { display: none; } }   /* the logo card already identifies each tile */
@media (max-width: 599px) and (max-height: 700px) { .reg .chips__grid { gap: 4px; } .reg textarea { min-height: 34px; height: 34px; } }
/* pinned showcase: the slides are stacked; only the visible one may receive clicks
   (the hidden slides' empty text boxes were sitting on top of the "Visit website" button) */
.xp.is-pinned .xp__item:not(.is-active) { pointer-events: none; }
.xp.is-pinned .xp__item.is-active { pointer-events: auto; }

/* =========================================================
   WELCOME GATE (first visit, home page): the page waits behind a
   soft navy veil until the visitor chooses. Built by js/consent.js.
   ========================================================= */
html.consent-lock, html.consent-lock body { overflow: hidden !important; overscroll-behavior: none; }
.cookie-scrim {
  position: fixed; inset: 0; z-index: 119;
  background: radial-gradient(70% 60% at 50% 50%, rgba(11,37,69,.35), rgba(5,17,33,.72));
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  opacity: 0; transition: opacity .6s var(--ease);
}
.cookie-scrim.is-on { opacity: 1; }
.cookie-scrim[hidden] { display: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cookie-scrim { background: rgba(5,17,33,.82); } }

.cookie__mark, .cookie__title { display: none; }
.cookie__body { flex: 1 1 300px; }
/* the small banner (legal pages, "Cookie settings") keeps its strip layout */
.cookie:not(.cookie--gate) .cookie__text { margin: 0; }

.cookie.cookie--gate {
  top: 50%; bottom: auto; width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto;
  flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: clamp(24px, 4vh, 36px) clamp(20px, 4vw, 36px);
  border-radius: 28px; transform: translate(-50%, calc(-50% + 24px)) scale(.98);
}
.cookie.cookie--gate.is-on { transform: translate(-50%, -50%); }
.cookie--gate .cookie__mark { display: block; width: 52px; height: 52px; color: var(--white); opacity: .95; animation: markSpin 40s linear infinite; }
.cookie--gate .cookie__title { display: block; margin: 0 0 8px; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.01em; color: var(--white); }
.cookie--gate .cookie__body { flex: none; }
.cookie--gate .cookie__text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
.cookie--gate .cookie__actions { width: 100%; margin: 4px 0 0; flex-direction: column-reverse; gap: 10px; }
.cookie--gate .cookie__btn { width: 100%; min-height: 50px; }
@media (min-width: 560px) { .cookie--gate .cookie__actions { flex-direction: row; } .cookie--gate .cookie__btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .cookie--gate .cookie__mark { animation: none; } }
.cookie-scrim { z-index: 200; }
.cookie { z-index: 201; }
/* first visit: accept only (client decision); "Cookie settings" also offers "Turn analytics off" */
.cookie__text--gate { display: none; }
.cookie--accept-only .cookie__text--gate { display: block; }
.cookie--accept-only .cookie__text--settings { display: none; }
.cookie--accept-only [data-consent="denied"] { display: none; }
.cookie--gate.cookie--accept-only .cookie__actions { flex-direction: row; }
.cookie--gate.cookie--accept-only .cookie__btn { flex: 1; }

/* =========================================================
   V8: REFINEMENTS
   ========================================================= */

/* ---------- header "Register interest": hidden on the landing screen (the hero has its own),
   slides in beside Menu as soon as the visitor starts scrolling ---------- */
@media (min-width: 720px) {
  .hdr__actions { gap: 0; }
  .hdr__cta {
    max-width: 260px; margin-right: 10px; overflow: hidden; white-space: nowrap;
    transition: var(--lg-t), max-width .6s var(--ease), margin .6s var(--ease), padding .6s var(--ease), opacity .45s var(--ease), visibility 0s;
  }
  .hdr:not(.has-cta) .hdr__cta {
    max-width: 0; margin-right: 0; padding-left: 0; padding-right: 0; opacity: 0; visibility: hidden; transform: translateX(14px);
    transition: var(--lg-t), max-width .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease), opacity .3s var(--ease), visibility 0s .5s;
  }
}

/* ---------- less empty space between sections: each section is as tall as its content ---------- */
main > section:not(.hero):not(.xp):not(.dir) {
  min-height: 0;
  padding-top: max(var(--hdr-h) + 12px, clamp(72px, 10vh, 112px));
  padding-bottom: clamp(48px, 8vh, 96px);
}
main > section.nums.nums.nums.nums { padding-top: clamp(32px, 6vh, 64px); padding-bottom: clamp(32px, 6vh, 64px); }
/* desktop: the companies grid gets a set height; phones and tablets keep it one screen tall */
@media (min-width: 900px) {
  main > section.dir.dir.dir.dir { height: auto; min-height: 0; padding-top: max(var(--hdr-h) + 12px, clamp(64px, 9vh, 104px)); padding-bottom: clamp(40px, 7vh, 88px); }
  main > section.dir .mosaic { flex: none; height: min(calc(100svh - var(--hdr-h) - 200px), 760px); min-height: 480px; }
  main > section.careers + section.dir.dir.dir.dir { padding-top: clamp(24px, 4vh, 48px); }          /* two light sections meet: no double gap */
}
main > section.founder.founder.founder.founder { padding-bottom: clamp(40px, 7vh, 80px); }

/* ---------- liquid glass v3: clearer, lighter, more premium ---------- */
:root {
  --lg-sheen: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,0) 70%);
  --glass-bg: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  --glass-blur: blur(28px) saturate(1.7) brightness(1.06);
  --glass-shadow:
    inset 0 1px .5px rgba(255,255,255,.42),
    inset 0 -.5px .5px rgba(255,255,255,.10),
    inset 0 0 0 .5px rgba(255,255,255,.15),
    0 8px 26px rgba(3, 12, 26, .14);
  /* primary buttons become frosted glass instead of solid fills */
  --glass-white-bg: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.96), rgba(255,255,255,.66) 58%), linear-gradient(180deg, rgba(255,255,255,.72), rgba(226,234,244,.60));
  --glass-navy-bg: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(24,60,100,.80), rgba(11,37,69,.76));
  --glass-light-bg: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.80), rgba(255,255,255,.24) 60%), linear-gradient(180deg, rgba(11,37,69,.025), rgba(11,37,69,.055));
}
.btn--solid, .btn--navy, .story__copy .link-arrow, .mbar__btn--primary, .cookie__btn {
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
}
/* header bar: a thinner, clearer pane */
.hdr::before {
  background: radial-gradient(80% 220% at 12% -40%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(22,52,90,.52), rgba(11,37,69,.46));
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.40), inset 0 0 0 .5px rgba(255,255,255,.12), 0 14px 36px rgba(3,12,26,.18);
}
/* company cards, sticky bar, cookie banner, FAQ: lighter panes */
.tile .tile__card { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); }
.tile:hover .tile__card { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06)); }
.faq__item { background: var(--lg-sheen), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
@media (max-width: 719px) {
  .mbar { background: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(20,48,84,.58), rgba(11,37,69,.66));
    -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); }
}
.cookie:not(.cookie--gate) { background: radial-gradient(120% 160% at 18% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(20,48,84,.66), rgba(11,37,69,.74));
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); }
@media (min-width: 960px) { .founder__portrait { height: clamp(220px, 56vh, 560px); } }

/* ---------- framing for the client's own photos: keep each subject clear of the text ---------- */
.xp__media img[src*="builders-elite"]     { object-position: 64% 40%; }
.xp__media img[src*="constructions-site"] { object-position: 62% 30%; }
.xp__media img[src*="poultry-eggs"]       { object-position: 66% 45%; }
/* tiles: the glass card covers the lower part, so show the top of each picture */
.tile img[src*="builders-glitter"]   { object-position: 50% 18%; }
.tile img[src*="constructions-site"] { object-position: 62% 22%; }
.tile img[src*="poultry-farm"]       { object-position: 42% 30%; }

/* ---------- founder: longer quote, signature, short introduction ---------- */
.founder__quote { font-size: clamp(22px, min(2.5vw, 4.2vh), 40px); line-height: 1.26; max-width: 30ch; }
.founder__bio {
  max-width: 58ch; margin: 0; padding-top: clamp(14px, 2.4vh, 24px); border-top: 1px solid var(--on-light-line);
  font-size: clamp(14.5px, 1.9vh, 16.5px); line-height: 1.7; color: var(--on-light-muted);
}
@media (max-width: 599px) { .founder__quote { font-size: 22px; max-width: none; } .founder__bio { font-size: 14.5px; } }
.founder__cap { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; }
.founder__cap span:first-child { font-size: clamp(18px, 2vw, 22px); }

/* ---------- RERA registration line under a pictured project ---------- */
.xp__rera {
  grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 11px; letter-spacing: .08em; line-height: 1.5; color: rgba(255,255,255,.62); text-shadow: 0 1px 10px rgba(3,12,26,.5);
}
.xp__rera .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.xp__rera a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.xp__rera a:hover { color: var(--white); }
/* Builders tile: the pictured project's RERA number, as a small glass chip */
.tile__rera {
  position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px; font-size: 10.5px; letter-spacing: .08em; color: rgba(255,255,255,.88);
  background: var(--lg-sheen), linear-gradient(180deg, rgba(11,37,69,.42), rgba(11,37,69,.30));
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px .5px rgba(255,255,255,.3), inset 0 0 0 .5px rgba(255,255,255,.14);
}
.tile__rera .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.tile img[src*="builders-elite-front"] { object-position: 50% 28%; }
@media (max-width: 599px) { .tile__rera { top: 8px; right: 8px; left: 8px; justify-content: center; font-size: 9.5px; padding: 4px 8px; } }
/* footer: the company that operates the site, on its own quiet line */
.ftr__entity { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: .04em; opacity: .62; }

/* ---------- numbers: four figures ---------- */
.nums__grid { grid-template-columns: repeat(4, 1fr); }
.nums__val { font-size: clamp(36px, min(5.4vw, 10vh), 96px); white-space: nowrap; }
.nums__unit { font-size: .42em; font-weight: 300; letter-spacing: .02em; margin-left: .14em; }
@media (max-width: 719px) {
  .nums__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .nums__cell:nth-child(3) { border-left: 0; }
  .nums__val { font-size: clamp(40px, 12vw, 56px); }
}
.nums__grid { align-items: start; }
/* Constructions: new frame (workers tying column steel) */
.xp__media img[src*="constructions-site"] { object-position: 58% 40%; }
.tile img[src*="constructions-site"] { object-position: 58% 32%; }

/* =========================================================
   THE GROUP: the star as a diagram of the nine companies
   Each fold of the mark is one company (clockwise from the top,
   in showcase order). One lights at a time; hover or focus a name
   to light its fold; click to open that company in the showcase.
   ========================================================= */
.nine {
  --s: clamp(150px, 17vw, 250px); --gap: 20px;
  position: relative; margin: 0; width: 100%; height: calc(var(--s) + 150px);
}
.nine__star { position: absolute; left: 50%; top: calc(50% - 16px); width: var(--s); height: var(--s); transform: translate(-50%, -50%); color: var(--navy); }
.nine__fold {
  position: absolute; inset: 0; background-color: currentColor; opacity: .12;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  transition: opacity .7s var(--ease);
}
.nine__fold.is-on { opacity: 1; }
.nine.is-idle .nine__fold { opacity: .55; }
.nine__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 32px; }
.nine__list li {
  position: absolute;
  left: calc(50% + cos(var(--a)) * (var(--s) / 2 + var(--gap)));
  top: calc(50% + sin(var(--a)) * (var(--s) / 2 + var(--gap)));
  transform: translate(0, -50%);
}
.nine__list li:first-child { transform: translate(-50%, -100%); }
.nine__list li:nth-child(n+6) { transform: translate(-100%, -50%); }
.nine__list a {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--f-display); font-size: clamp(13px, 1.05vw, 15px); font-weight: 400; letter-spacing: .01em;
  color: var(--slate); text-decoration: none;
  transition: color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.nine__n { font-size: .68em; letter-spacing: .14em; opacity: .65; font-variant-numeric: tabular-nums; }
.nine__list a.is-on, .nine__list a:hover, .nine__list a:focus-visible {
  color: var(--navy); background: var(--glass-light-bg); box-shadow: var(--glass-light-shadow);
}
.nine__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12.5px; letter-spacing: .02em; color: var(--slate); }

/* desktop: statement and text on the left, the star on the right */
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .story__aside { display: contents; }
  .story__label { grid-column: 1 / -1; }
  .story .statement { grid-column: 1; grid-row: 2; }
  .story__copy { grid-column: 1; grid-row: 3; align-self: start; }
  .nine { grid-column: 2; grid-row: 2 / 4; }
}
/* phones: the star on top, the nine names as a tidy grid underneath */
@media (max-width: 599px) {
  .nine { height: auto; display: grid; justify-items: center; gap: 14px; }
  .nine__star { position: relative; left: auto; top: auto; transform: none; width: min(56vw, 210px); height: min(56vw, 210px); }
  .nine__list { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
  .nine__list li, .nine__list li:first-child, .nine__list li:nth-child(n+6) { position: static; transform: none; }
  .nine__list a { width: 100%; justify-content: center; padding: 7px 4px; font-size: 13px; }
  .nine__n { display: none; }
  .nine__cap { position: static; }
}
@media (prefers-reduced-motion: reduce) { .nine__fold, .nine__list a { transition: none; } }
.nine__fold { opacity: .16; }
@media (min-width: 600px) and (max-width: 959px) { .nine { --s: clamp(170px, 30vw, 250px); height: calc(var(--s) + 130px); } }