/* Self-hosted from Google Fonts: Jost 300/400/500, Chivo Mono 300/400 (latin, latin-ext). */
/* Chivo Mono 300 latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/chivo-mono-latin-ext.woff2?v=fe0ab404e3) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chivo Mono 300 latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/chivo-mono-latin.woff2?v=052bc39584) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chivo Mono 400 latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/chivo-mono-latin-ext.woff2?v=fe0ab404e3) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chivo Mono 400 latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/chivo-mono-latin.woff2?v=052bc39584) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 300 latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.woff2?v=2b2ae750b2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 300 latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.woff2?v=d3fc5b412c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 400 latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.woff2?v=2b2ae750b2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 400 latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.woff2?v=d3fc5b412c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 500 latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext.woff2?v=2b2ae750b2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost 500 latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin.woff2?v=d3fc5b412c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   ECHELON DIGITAL PARTNERS — Global Stylesheet
   Black-AMEX premium aesthetic. Obsidian / graphite / platinum.
   Type: Jost (display + body) · Chivo Mono (numerals, labels, IDs)
   ========================================================================= */

/* ---- 1. Design tokens ------------------------------------------------- */
:root {
  /* Surfaces */
  --obsidian:      #08080A;
  --graphite:      #17171A;
  --graphite-2:    #1E1E22;
  --line:          rgba(212,197,170,0.14);
  --line-strong:   rgba(212,197,170,0.28);

  /* Metals & type */
  --bone:          #EFEAE0;
  --champagne:     #D9CBB0;
  --platinum-hi:   #FBF4E8;
  --platinum-lo:   #8F8574;
  --text:          #D6D1C6;   /* running body text — brighter for readability */
  --muted:         #ADA99E;   /* secondary text */
  --muted-2:       #8B887F;   /* tertiary / captions */

  /* Platinum foil gradient (type & rules only) */
  --foil: linear-gradient(150deg, #FBF4E8 0%, #E8DFC9 26%, #B7A987 52%, #FBF4E8 74%, #8F8574 100%);

  /* Layout */
  --maxw: 1320px;
  --gutter: 40px;
  --section-y: 128px;      /* consistent vertical rhythm for EVERY section */
  --radius: 4px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type scale — dialed down so headings don't overpower */
  --fs-display: clamp(2.4rem, 5vw, 4.3rem);
  --fs-h2:      clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.45rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.8125rem;
  --tracking-cap: 0.30em;
}

/* ---- 2. Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--obsidian);
  color: var(--text);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--champagne); color: var(--obsidian); }

/* Subtle grain + vignette on the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,197,170,0.05), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,0.6), transparent 55%);
}

/* ---- 3. Layout helpers ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.section { padding-block: var(--section-y); position: relative; z-index: 1; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); border: 0; }

/* ---- 4. Typography ---------------------------------------------------- */
.eyebrow {
  font-family: "Chivo Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--champagne);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--champagne); opacity: 0.7; }

.display {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h2.h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h3.h3 { font-size: var(--fs-h3); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; }
.lead { font-size: 1.22rem; line-height: 1.7; color: #C8C3B8; max-width: 62ch; font-weight: 400; }
.mono { font-family: "Chivo Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--fs-small); color: var(--champagne); }
p { color: var(--text); }
p + p { margin-top: 1.1em; }

/* Platinum foil text */
.foil {
  background: var(--foil);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: foilShift 9s ease-in-out infinite;
}
@keyframes foilShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---- 5. Buttons ------------------------------------------------------- */
/* ── Button: pill with circular arrow badge, fills from the left ─────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 1.1em;
  font-family: "Chivo Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  padding: 0.62em 0.7em 0.62em 1.7em; border-radius: 40px;
  border: 1px solid var(--line-strong);
  color: var(--bone); background: transparent;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* champagne fill slides in from the left */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--champagne);
  transform: translateX(-101%); transition: transform .55s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--obsidian); border-color: var(--champagne); transform: translateY(-2px); box-shadow: 0 20px 44px -24px rgba(217,203,176,0.55); }
.btn:hover::before { transform: none; }
/* the circular arrow badge (built from the existing .arw span) */
.btn .arw {
  display: inline-grid; place-items: center; width: 2.55em; height: 2.55em; border-radius: 50%;
  background: var(--champagne); color: var(--obsidian); font-size: 0.92em; line-height: 1;
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover .arw { background: var(--obsidian); color: var(--champagne); transform: rotate(-45deg); }
/* buttons that have no arrow badge get a touch more right padding */
.btn:not(:has(.arw)) { padding-right: 1.7em; }

/* primary — champagne face at rest, dark badge; inverts to dark fill on hover */
.btn--solid { color: var(--obsidian); border-color: transparent; background: var(--bone); }
.btn--solid::before { background: var(--obsidian); }
.btn--solid .arw { background: var(--obsidian); color: var(--bone); }
.btn--solid:hover { color: var(--bone); border-color: transparent; box-shadow: 0 24px 50px -22px rgba(0,0,0,0.7); }
.btn--solid:hover .arw { background: var(--bone); color: var(--obsidian); transform: rotate(-45deg); }

/* ---- 6. Emboss card (light from above) ------------------------------- */
.emboss {
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line);
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px -40px rgba(0,0,0,0.9);
  position: relative;
}

/* ---- 7. Header / nav -------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,8,10,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav__logo img { height: 38px; width: auto; }
.nav__links { display: flex; gap: 2.4rem; align-items: center; }
.nav__links a {
  font-family: "Chivo Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  position: relative; padding: 0.4em 0; transition: color 0.4s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--champagne); transition: width 0.4s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--bone); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__links a.nav__cta { padding: 0.9em 1.6em; font-size: 0.66rem; letter-spacing: 0.14em; background: var(--bone); color: var(--obsidian); border-color: transparent; }
.nav__links a.nav__cta::before { background: var(--champagne); }
.nav__links a.nav__cta::after { display: none; }
.nav__links a.nav__cta:hover { color: var(--obsidian); border-color: transparent; }
.nav__toggle { display: none; background: none; border: 0; color: var(--bone); cursor: pointer; flex-direction: column; gap: 5px; }
.nav__toggle span { width: 24px; height: 1.5px; background: var(--bone); transition: 0.4s var(--ease); }

/* ── Services mega-dropdown ──────────────────────────────────────────── */
.nav__has-drop { position: relative; display: inline-flex; align-items: center; }
.nav__droptrigger { display: inline-flex; align-items: center; gap: 0.45em; }
.nav__droptrigger .caret { font-size: 0.6em; color: var(--champagne); transition: transform .4s var(--ease); }
.nav__has-drop:hover .nav__droptrigger .caret { transform: rotate(180deg); }
.nav__drop { position: absolute; top: 100%; left: 50%; width: 780px; max-width: calc(100vw - 40px); margin-top: 20px; padding: 20px;
  transform: translateX(-50%) translateY(10px); transform-origin: top center;
  background: rgba(13,13,16,0.96); backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 50px 100px -45px rgba(0,0,0,0.95);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 130;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.nav__drop::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px; }
.nav__has-drop:hover .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dropitem { display: flex; align-items: flex-start; gap: 13px; padding: 14px; border-radius: 12px; position: relative;
  border: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.dropitem:hover { background: rgba(212,197,170,0.07); border-color: var(--line); transform: translateY(-2px); }
.dropitem__ico { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--champagne); flex: none;
  background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); transition: border-color .3s var(--ease), color .3s var(--ease); }
.dropitem:hover .dropitem__ico { border-color: var(--line-strong); }
.dropitem__ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.dropitem b { display: block; font-family: "Jost", sans-serif; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.03em; color: var(--bone); text-transform: none; }
.dropitem small { display: block; font-family: "Chivo Mono", monospace; font-size: 0.64rem; letter-spacing: 0.03em; color: var(--muted); text-transform: none; margin-top: 3px; line-height: 1.4; }
/* the two resale cards, set apart with a metal icon + champagne accent */
.dropitem[href="black-amex-card.html"] .dropitem__ico,
.dropitem[href="premium-card.html"] .dropitem__ico { background: radial-gradient(120% 130% at 20% 10%, #2a2a2f, #0b0b0d 72%); border-color: var(--line-strong); }
.dropitem[href="black-amex-card.html"]::after,
.dropitem[href="premium-card.html"]::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--champagne), transparent); opacity: 0.55; }
.nav__drop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 14px 14px 6px; border-top: 1px solid var(--line);
  font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
.nav__drop-foot::after { display: none; }

/* ---- 8. Hero ---------------------------------------------------------- */
.hero { position: relative; display: flex; align-items: flex-start; padding: 168px 0 96px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.46; filter: grayscale(0.25) contrast(1.08);
  transform-origin: 60% 40%; animation: heroDrift 24s ease-in-out infinite; }
@keyframes heroDrift { 0%,100% { transform: scale(1.06) translate(0,0); } 50% { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.38) 0%, rgba(8,8,10,0.62) 60%, var(--obsidian) 100%),
              radial-gradient(70% 60% at 78% 42%, rgba(212,197,170,0.10), transparent 60%),
              radial-gradient(80% 60% at 15% 35%, transparent, rgba(8,8,10,0.6));
}
.hero .wrap { z-index: 2; }
.hero__inner { max-width: 900px; }
.hero .display { margin: 0.5em 0 0.4em; }

/* ---- 9. Grids --------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head .h2 { margin: 0.4em 0 0.5em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* ---- 10. Service / feature cards ------------------------------------- */
.card {
  padding: 40px 34px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -50px rgba(0,0,0,0.9); }
.card:hover::before { transform: scaleX(1); }
.card__num { font-family: "Chivo Mono", monospace; font-size: 0.75rem; color: var(--muted-2); letter-spacing: 0.2em; }
.card__ico { width: 46px; height: 46px; margin-bottom: 26px; color: var(--champagne); }
.card__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
.card h3 { margin: 0.2em 0 0.6em; }
.card p { font-size: 0.98rem; color: var(--muted); }

/* ---- 11. Framed image ------------------------------------------------- */
.frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.frame:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.08); }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,8,10,0.55)); }
.frame__cap { position: absolute; left: 22px; bottom: 20px; z-index: 2; }

/* ---- 12. Stat row ----------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 42px 32px; border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); }
.stat:last-child { border-right: 0; }
.stat__n { font-family: "Chivo Mono", monospace; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: 0.01em; }
.stat__l { font-family: "Chivo Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.6em; }

/* ---- 13. Membership / partner cards (AMEX-style) --------------------- */
/* Home — capability index (editorial service list) */
.capstack { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 60px; align-items: start; }
.capstack__intro { position: sticky; top: 118px; }
.capstack__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.caprow { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px;
  padding: 22px 8px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  transition: padding 0.45s var(--ease), background 0.45s var(--ease); }
.caprow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--champagne);
  transform: scaleY(0); transform-origin: top; transition: transform 0.45s var(--ease); }
.caprow__n { font-family: "Chivo Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted-2); }
.caprow__ico { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--champagne); flex: none; transition: border-color 0.45s var(--ease), background 0.45s var(--ease); }
.caprow__ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.1; }
.caprow__txt b { display: block; font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--bone); }
.caprow__txt small { display: block; font-size: 0.92rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.caprow__arw { color: var(--muted-2); display: grid; place-items: center; transition: transform 0.45s var(--ease), color 0.45s var(--ease); }
.caprow__arw svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.caprow:hover { padding-left: 20px; background: rgba(212,197,170,0.03); }
.caprow:hover::before { transform: scaleY(1); }
.caprow:hover .caprow__ico { border-color: var(--line-strong); background: rgba(212,197,170,0.09); }
.caprow:hover .caprow__arw { transform: translate(4px, -4px); color: var(--champagne); }
.caprow--card .caprow__ico { background: radial-gradient(120% 130% at 20% 10%, #232327, #0b0b0d 70%); border-color: var(--line-strong); }
.caprow__label { padding: 20px 8px 10px; }
@media (max-width: 860px) {
  .capstack { grid-template-columns: 1fr; gap: 30px; }
  .capstack__intro { position: static; }
  .caprow { grid-template-columns: auto 1fr auto; gap: 16px; }
  .caprow__n { display: none; }
}
/* Services page — resale card blocks + card-page hero */
.cardsvc { display: flex; flex-direction: column; }
.cardsvc__card { width: 100%; max-width: 420px; border-radius: 16px !important; margin-bottom: 26px;
  box-shadow: 0 44px 90px -55px rgba(0,0,0,0.95); }
.cardsvc__body { display: flex; flex-direction: column; align-items: flex-start; }
.cardhero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.cardhero__stage { position: relative; display: grid; place-items: center; padding: 20px; }
.cardhero__stage .memcard { width: 100%; max-width: 460px; border-radius: 18px !important;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,0.95); animation: cardFloat 7s ease-in-out infinite; }
@keyframes cardFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
.cardperk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cardperk__item { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: rgba(20,20,24,0.5); }
.cardperk__item .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--champagne); margin-bottom: 14px; }
.cardperk__item h3 { font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--bone); margin-bottom: 6px; }
.cardperk__item p { font-size: 0.92rem; color: var(--muted-2); margin: 0; }
@media (max-width: 860px) { .cardhero { grid-template-columns: 1fr; gap: 34px; } .cardperk { grid-template-columns: 1fr; } }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.tier { position: relative; padding: 0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.tier:hover { transform: translateY(-8px); box-shadow: 0 50px 90px -50px rgba(0,0,0,0.95); }
/* the physical card */
.memcard { aspect-ratio: 1.586/1; border-radius: 10px 10px 0 0; position: relative; padding: 26px 26px 22px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; }
.memcard::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%); pointer-events:none; }
.memcard--black { background: radial-gradient(120% 130% at 20% 10%, #232327, #0b0b0d 70%); }
.memcard--platinum { background: linear-gradient(135deg, #6f6a5f, #d8cdb6 45%, #8a8271 70%, #cabfa5); color: var(--obsidian); }
.memcard--champagne { background: linear-gradient(135deg, #b7a582, #efe4cc 45%, #cdbb98 75%); color: var(--obsidian); }
.memcard__brand { font-family: "Chivo Mono", monospace; letter-spacing: 0.3em; font-size: 0.7rem; text-transform: uppercase; }
.memcard__tier { font-size: 1.5rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 300; }
.memcard__chip { width: 42px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, #d8cdb6, #9a8f78); position: relative; opacity: 0.9; }
.memcard__chip::before { content:""; position:absolute; inset: 6px 8px; border: 1px solid rgba(0,0,0,0.25); border-radius: 2px; }
.memcard__no { font-family: "Chivo Mono", monospace; letter-spacing: 0.18em; font-size: 0.82rem; }
.memcard--black .memcard__no, .memcard--black .memcard__brand { color: var(--champagne); }
.tier__body { background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); padding: 30px 28px 34px; flex: 1; display: flex; flex-direction: column; }
.tier__rate { font-family: "Chivo Mono", monospace; font-size: 2.4rem; font-weight: 300; }
.tier__rate span { font-size: 1rem; color: var(--muted); }
.tier__list { margin: 22px 0 26px; display: grid; gap: 12px; }
.tier__list li { display: flex; gap: 12px; font-size: 0.95rem; color: var(--muted); }
.tier__list li::before { content: "—"; color: var(--champagne); }
.tier__body .btn { margin-top: auto; justify-content: center; }
.tier--featured { border-color: var(--champagne); }
.tier--featured .badge { position: absolute; top: 16px; right: 16px; z-index: 5; }
.badge { font-family: "Chivo Mono", monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--obsidian); background: var(--foil); padding: 0.4em 0.8em; border-radius: 40px; }

/* ---- 14. Process / diagram ------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.flow__line { position: absolute; top: 34px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); z-index: 0; }
.flow__step { text-align: center; padding: 0 18px; position: relative; z-index: 1; }
.flow__dot { width: 68px; height: 68px; margin: 0 auto 26px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: "Chivo Mono", monospace; color: var(--champagne);
  background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.flow__step h3 { font-size: 1.05rem; letter-spacing: 0.1em; margin-bottom: 0.5em; }
.flow__step p { font-size: 0.9rem; color: var(--muted-2); }

/* Wholesale->retail model diagram */
.model { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; }
.model__box { padding: 34px 30px; border-radius: var(--radius); text-align: center;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08); }
.model__box .mono { display: block; margin-bottom: 0.6em; }
.model__arrow { font-family: "Chivo Mono", monospace; color: var(--champagne); font-size: 1.4rem; }

/* ---- 15. Accordion ---------------------------------------------------- */
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; text-align: left; background: none; border: 0; color: var(--bone); cursor: pointer;
  padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: "Jost", sans-serif; font-size: 1.15rem; font-weight: 300; letter-spacing: 0.04em; }
.acc__q .pm { color: var(--champagne); font-family: "Chivo Mono", monospace; transition: transform 0.4s var(--ease); }
.acc__item.open .pm { transform: rotate(45deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.acc__a p { padding-bottom: 28px; color: var(--muted); max-width: 68ch; }

/* ---- 16. Forms -------------------------------------------------------- */
.form { display: grid; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--bone); padding: 15px 18px; font-family: "Jost", sans-serif; font-size: 1rem; font-weight: 300;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(212,197,170,0.08); }
.field textarea { resize: vertical; min-height: 130px; }
/* phone with country code */
.field--phone .phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; }
.phone-row select { background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone);
  padding: 15px 12px; font-family: "Chivo Mono", monospace; font-size: 0.9rem; }
.phone-row select:focus { outline: 0; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(212,197,170,0.08); }
/* validation states */
.field__err { font-family: "Chivo Mono", monospace; font-size: 0.64rem; letter-spacing: 0.06em; color: #d98a7a; text-transform: uppercase;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease), opacity .35s var(--ease); }
.field.invalid input, .field.invalid select, .field.invalid textarea, .field--phone.invalid .phone-row select, .field--phone.invalid .phone-row input {
  border-color: #b5675c; box-shadow: 0 0 0 3px rgba(181,103,92,0.10); }
.field.invalid .field__err { max-height: 40px; opacity: 1; margin-top: 2px; }
.field.valid input, .field.valid select, .field.valid textarea { border-color: rgba(150,180,140,0.4); }

/* submit button sending / sent states */
.btn.is-sending { pointer-events: none; }
.btn.is-sending .btn-label { opacity: 0; }
.btn.is-sending .arw { animation: planeFly .9s var(--ease) infinite; }
@keyframes planeFly { 0% { transform: translate(0,0); opacity: 1; } 70% { transform: translate(26px,-26px); opacity: 0; } 71% { transform: translate(-26px,26px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; } }

/* success panel with animated check */
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.show { display: block; animation: fadeUp .7s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.check { width: 78px; height: 78px; margin: 0 auto 26px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); position: relative; }
.check::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--champagne); opacity: 0; animation: ring 2.4s ease-out infinite; }
.check svg { width: 40px; height: 40px; }
.check svg path { stroke: var(--champagne); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .8s var(--ease) .25s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.form-success h2 { font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.02em; color: var(--bone); margin-bottom: 0.5em; }
.form-success p { color: var(--text); max-width: 46ch; margin: 0 auto; }
.form-success .mono { display: inline-block; margin-top: 22px; color: var(--champagne); }

/* ---- 17. Contact aside ------------------------------------------------ */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-item .mono { color: var(--muted); }
.contact-item strong { font-weight: 300; font-size: 1.15rem; letter-spacing: 0.04em; }

/* ---- 18. Footer ------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 72px 40px; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer img { height: 24px; width: auto; margin-bottom: 22px; }
.site-footer h2 { font-family: "Chivo Mono", monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 20px; }
.site-footer a { color: var(--muted); font-size: 0.92rem; display: block; padding: 5px 0; transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--bone); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--line); }
.footer-bottom p { font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--muted-2); text-transform: uppercase; }
.footer-legal { display: flex; gap: 1.6rem; }
.footer-legal a { font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); padding: 0; }
.footer-legal a:hover { color: var(--champagne); }

/* ---- 19. Scroll reveal ------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* ---- 20. Page hero (interior pages) ---------------------------------- */
.pagehero { padding-top: 210px; padding-bottom: 76px; position: relative; overflow: hidden; }
.pagehero .display { font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin-top: 0.35em; }
.breadcrumb { font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.breadcrumb a:hover { color: var(--champagne); }

/* image-backed interior hero using title-banner4 */
.pagehero--img { padding-top: 230px; padding-bottom: 96px; }
.pagehero--img .pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.pagehero--img .pagehero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: grayscale(0.35) contrast(1.05) brightness(0.85); opacity: 0.42; }
.pagehero--img .pagehero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.72) 55%, var(--obsidian) 100%),
              linear-gradient(90deg, rgba(8,8,10,0.85), transparent 60%); }
.pagehero--img .wrap { position: relative; z-index: 2; }
.pagehero__tag { display: inline-flex; align-items: center; gap: 0.7em; margin-top: 26px; padding: 0.7em 1.1em;
  border: 1px solid var(--line); border-radius: 40px; background: rgba(8,8,10,0.4); backdrop-filter: blur(6px);
  font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pagehero__tag b { color: var(--champagne); font-weight: 400; }

/* ---- 21. Marquee ------------------------------------------------------ */
/* single-row marquee (original) */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 28px 0; background: linear-gradient(180deg, #0c0c0e, var(--obsidian)); }
.marquee__track { display: flex; gap: 4rem; white-space: nowrap; width: max-content; animation: scrollX 36s linear infinite; }
.marquee__track span { font-family: "Chivo Mono", monospace; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 4rem; }
.marquee__track span::after { content: "◆"; color: var(--champagne); opacity: 0.55; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---- 24. Home hero composition (heading left · mini image right) ------ */
.hero__top { display: grid; grid-template-columns: 1.5fr 0.92fr; gap: 50px; align-items: center; }
.hero__head .display { margin: 0.4em 0 0.5em; }
.hero__aside { display: flex; flex-direction: column; gap: 16px; }
.hero__mini { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 44px 90px -55px rgba(0,0,0,0.9); }
.hero__mini img { width: 100%; height: clamp(190px, 18vw, 250px); object-fit: cover; filter: grayscale(0.2) contrast(1.05) brightness(0.92); transition: transform 1.2s var(--ease); }
.hero__mini:hover img { transform: scale(1.04); }
.hero__note { text-align: right; font-size: 1.0rem; line-height: 1.5; color: var(--bone); }
.hero__note b { color: var(--champagne); margin-right: 0.3em; }

/* floating hero card (from the video reference) */
.cardfloat { position: relative; display: grid; place-items: center; padding: 40px 0 20px; perspective: 1200px; }
/* rich glow orb behind the card (reference: colored glow behind bank cards) */
.cardfloat__glow { position: absolute; width: 160%; height: 176%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,224,190,0.5), transparent 42%),
    radial-gradient(circle at 38% 62%, rgba(212,197,170,0.32), transparent 55%),
    radial-gradient(circle at 66% 38%, rgba(150,138,110,0.22), transparent 58%);
  filter: blur(8px); animation: glowPulse 7s ease-in-out infinite; }
/* halftone dotted accent disc (reference: dotted WORLDWIDE orb) */
.cardfloat::before { content: ""; position: absolute; top: -6px; right: 4%; width: 104px; height: 104px; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--champagne), rgba(212,197,170,0.15) 70%, transparent);
  -webkit-mask-image: radial-gradient(circle, #000 1.3px, transparent 1.7px); mask-image: radial-gradient(circle, #000 1.3px, transparent 1.7px);
  -webkit-mask-size: 7px 7px; mask-size: 7px 7px; opacity: 0.55; animation: glowPulse 7s ease-in-out infinite reverse; }
@keyframes glowPulse { 0%,100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.cardfloat__inner { position: relative; z-index: 1; width: 100%; max-width: 440px; transform-style: preserve-3d;
  animation: cardBob 7s ease-in-out infinite; will-change: transform; }
@keyframes cardBob { 0%,100% { transform: translateY(0) rotateZ(-3deg); } 50% { transform: translateY(-16px) rotateZ(-2deg); } }
.cardfloat__inner img { width: 100%; border-radius: 14px; box-shadow: 0 50px 90px -34px rgba(0,0,0,0.85), 0 0 0 1px rgba(212,197,170,0.12); display: block; }
.cardfloat__shine { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none; }
.cardfloat__shine::before { content: ""; position: absolute; top: -30%; left: -60%; width: 40%; height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg);
  animation: cardSweep 5.5s ease-in-out infinite; }
@keyframes cardSweep { 0%, 55% { left: -60%; } 80%, 100% { left: 130%; } }

/* Home hero feature banner + floating pills */
.herobanner { position: relative; margin-top: 44px; border-radius: 18px; overflow: hidden;
  border: 0; box-shadow: 0 60px 120px -70px rgba(0,0,0,0.9); }
.herobanner img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; object-position: center 28%;
  filter: grayscale(0.2) contrast(1.05) brightness(0.9); }
.herobanner::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.15), rgba(8,8,10,0.55) 70%, rgba(8,8,10,0.85)); }
.herobanner__note { position: absolute; top: 26px; right: 28px; z-index: 2; max-width: 300px; text-align: right;
  font-size: 1.02rem; color: var(--bone); }
.herobanner__note b { color: var(--champagne); font-family: "Chivo Mono", monospace; margin-right: 0.3em; }

/* abstract concave cut, upper right */
.herobanner__cut { position: absolute; top: 0; right: 0; z-index: 4; background: var(--obsidian);
  padding: 20px 26px 24px 32px; border-bottom-left-radius: 30px; max-width: 340px; }
.herobanner__cut p { margin: 0; font-size: 1.0rem; line-height: 1.45; color: var(--bone); text-align: right; }
.herobanner__cut b { color: var(--champagne); margin-right: 0.35em; }
.herobanner__cut::before { content: ""; position: absolute; top: 0; left: -30px; width: 30px; height: 30px;
  background: radial-gradient(circle at 0 100%, transparent 30px, var(--obsidian) 31px); }
.pills { position: absolute; left: 26px; bottom: 24px; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; max-width: 70%; }
.pill { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1.15em; border-radius: 40px;
  font-family: "Chivo Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(20,20,24,0.72); border: 1px solid var(--line-strong); color: var(--bone);
  backdrop-filter: blur(10px); transition: transform .5s var(--ease), background .5s var(--ease); }
.pill:hover { transform: translateY(-3px); background: rgba(30,30,35,0.9); }
.pill .st { color: var(--champagne); }
.pill--light { background: var(--bone); color: var(--obsidian); border-color: transparent; }
.pill--light .st { color: #8a7f68; }

/* ---- 29. The Model — animated chain ---------------------------------- */
.chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; margin-top: 8px; }
.chain__node { position: relative; padding: 34px 30px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08);
  border-radius: 12px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
  opacity: 0; transform: translateY(26px); }
.chain.in .chain__node { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .6s, box-shadow .6s; }
.chain.in .chain__node:nth-child(3) { transition-delay: .18s; }
.chain.in .chain__node:nth-child(5) { transition-delay: .36s; }
.chain__node:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.chain__node--accent { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px rgba(212,197,170,.06); }
.chain__ico { width: 42px; height: 42px; color: var(--champagne); margin-bottom: 18px; }
.chain__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
.chain__tag { font-family: "Chivo Mono", monospace; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.chain__node h3 { font-size: 1.15rem; font-weight: 400; letter-spacing: .04em; margin: .5em 0 .45em; color: var(--bone); }
.chain__node p { font-size: .95rem; color: var(--muted); margin: 0; }
.chain__link { position: relative; width: 66px; align-self: center; height: 2px; }
.chain__link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--line-strong), var(--champagne)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
.chain.in .chain__link::before { transform: scaleX(1); }
.chain__pulse { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 12px var(--champagne); transform: translate(-50%,-50%); opacity: 0; }
.chain.in .chain__pulse { animation: pulseRun 2.4s var(--ease) 1s infinite; }
@keyframes pulseRun { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---- 30. Partner-card teaser — fanned membership stack --------------- */
.cardfan { position: relative; height: clamp(320px, 33vw, 440px); perspective: 1300px; }
.fancard { position: absolute; top: 50%; left: 50%; width: min(360px, 84%); aspect-ratio: 1.586/1; border-radius: 14px;
  padding: 22px 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 34px 66px -34px rgba(0,0,0,.95); border: 1px solid rgba(255,255,255,.10);
  will-change: transform; animation: deckShuffle 7.5s ease-in-out infinite; }
.fancard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%); pointer-events: none; }
.fancard .fc-brand { font-family: "Chivo Mono", monospace; letter-spacing: .3em; font-size: .64rem; text-transform: uppercase; }
.fancard .fc-tier { font-size: 1.25rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 300; }
.fancard .fc-no { font-family: "Chivo Mono", monospace; letter-spacing: .16em; font-size: .72rem; }
.fancard .fc-chip { width: 38px; height: 27px; border-radius: 5px; background: linear-gradient(135deg, #d8cdb6, #9a8f78); }
.fancard.blk { background: radial-gradient(120% 130% at 20% 10%, #232327, #0b0b0d 70%); }
.fancard.blk .fc-brand, .fancard.blk .fc-no { color: var(--champagne); }
.fancard.plt { background: linear-gradient(135deg, #6f6a5f, #d8cdb6 45%, #8a8271 70%, #cabfa5); color: var(--obsidian); }
.fancard.chm { background: linear-gradient(135deg, #b7a582, #efe4cc 45%, #cdbb98 75%); color: var(--obsidian); }
/* base deck slots (also the reduced-motion resting state) */
.fancard--1 { transform: translate(-50%,-50%) translate(34px,46px) rotate(3deg) scale(.9); z-index: 1; animation-delay: 0s; }
.fancard--2 { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.95); z-index: 2; animation-delay: -2.5s; }
.fancard--3 { transform: translate(-50%,-50%) translate(-34px,-46px) rotate(-3deg) scale(1); z-index: 3; animation-delay: -5s; }
/* auto shuffle — each card cycles through the three deck slots */
@keyframes deckShuffle {
  0%, 26%   { transform: translate(-50%,-50%) translate(-34px,-46px) rotate(-3deg) scale(1);    z-index: 30; }
  33%       { transform: translate(-50%,-50%) translate(-74px,-124px) rotate(-6deg) scale(1.04); z-index: 30; }
  40%, 66%  { transform: translate(-50%,-50%) translate(34px,46px) rotate(3deg) scale(.9);       z-index: 10; }
  73%, 100% { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.95);            z-index: 20; }
}
.cardfan:hover .fancard { animation-play-state: paused; }

/* ---- 31. Why Echelon — index cards ----------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.whycard { position: relative; padding: 44px 34px 38px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,.08);
  border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.whycard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--foil); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.whycard:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 46px 90px -55px rgba(0,0,0,.95); }
.whycard:hover::before { transform: scaleX(1); }
.whycard__n { position: absolute; top: 14px; right: 22px; font-family: "Chivo Mono", monospace; font-size: 4.6rem; line-height: 1; font-weight: 300; color: rgba(212,197,170,.07); }
.whycard__ico { width: 46px; height: 46px; color: var(--champagne); margin-bottom: 24px; }
.whycard__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; }
.whycard h3 { font-size: 1.2rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--bone); margin-bottom: .55em; }
.whycard p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ---- 32. Two ways the card pays — animated panels ------------------- */
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.paypanel { position: relative; padding: 46px 42px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,.08);
  border-radius: 14px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); overflow: hidden;
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease); }
.paypanel:hover { border-color: var(--line-strong); box-shadow: 0 46px 90px -55px rgba(0,0,0,.95); }
.paypanel > .mono { color: var(--champagne); }
.paypanel h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--bone); margin: .5em 0 .5em; }
.paypanel > p { color: var(--muted); font-size: .98rem; }
/* lever one — margin bar */
.margin { margin-top: 32px; }
.margin__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.margin__label { font-family: "Chivo Mono", monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.margin__label b { color: var(--champagne); font-weight: 400; }
.margin__retail { font-family: "Chivo Mono", monospace; font-size: 1.15rem; color: var(--bone); }
.margin__bar { height: 50px; border-radius: 11px; overflow: hidden; display: flex; border: 1px solid var(--line); background: var(--obsidian); }
.margin__cost { flex: 0 0 70%; display: grid; place-items: center; color: var(--muted);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px); }
.margin__profit { flex: 0 0 0%; display: grid; place-items: center; color: var(--obsidian); background: var(--foil); background-size: 200% 200%;
  white-space: nowrap; overflow: hidden; transition: flex-basis 1.6s var(--ease) .2s; animation: foilShift 9s ease-in-out infinite; }
.paypanel.in .margin__profit { flex-basis: 30%; }
.margin__cost span, .margin__profit span { font-family: "Chivo Mono", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.margin__foot { display: flex; justify-content: space-between; margin-top: 16px; }
/* lever two — compounding bars */
.compound { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 32px; }
.compound__bar { flex: 1; border-radius: 7px 7px 0 0; height: 8px;
  background: linear-gradient(180deg, var(--champagne), rgba(212,197,170,.22)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  transition: height 1s var(--ease); }
.paypanel.in .compound__bar { height: var(--h); transition-delay: calc(var(--i) * .12s); }
.compound__foot { display: flex; justify-content: space-between; margin-top: 16px; }

/* ---- 33. Animated flow / timeline (onboarding + delivery) ----------- */
.flow__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--champagne), var(--platinum-hi));
  transform: scaleX(0); transform-origin: left; transition: transform 2s var(--ease) .25s; }
.flow.in .flow__line::after { transform: scaleX(1); }
.flow__step { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.flow.in .flow__step { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .2s); }
.flow.in .flow__dot { animation: dotPop .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .2s); }
@keyframes dotPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ---- 35. Service galleries ------------------------------------------- */
.shots { display: grid; gap: 18px; }
.shots--wide { grid-template-columns: repeat(2, 1fr); }
.shots--phone { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shot { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--graphite);
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.shot:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shots--phone .shot { border-radius: 20px; }
.featlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.featlist span { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); font-size: .92rem; color: var(--text); }
.featlist span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); flex: none; }
@media (max-width: 860px) { .shots--wide { grid-template-columns: 1fr; } .featlist { grid-template-columns: 1fr; } }

/* ---- 34. Team grid --------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.member { border: 1px solid var(--line); border-top-color: rgba(255,255,255,.08); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.member:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.member__ph { aspect-ratio: 1/1; overflow: hidden; background: radial-gradient(circle at 50% 20%, #26261f, var(--obsidian)); position: relative; }
.member__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(.35) contrast(1.03); transition: filter .6s var(--ease), transform 1s var(--ease); }
.member:hover .member__ph img { filter: grayscale(0) contrast(1.05); transform: scale(1.05); }
.member__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,8,10,.55)); }
.member__b { padding: 18px 20px 22px; }
.member__n { font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.06rem; letter-spacing: .03em; color: var(--bone); }
.member__r { font-family: "Chivo Mono", monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); margin-top: 5px; }
@media (max-width: 1024px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr 1fr; gap: 14px; } .member__b { padding: 14px; } }

/* ---- 25. Background section treatments -------------------------------- */
.bg-panel { background: linear-gradient(180deg, #0d0d10, #0a0a0c); border-block: 1px solid var(--line); }
.bg-radial { background: radial-gradient(90% 65% at 50% 0%, rgba(212,197,170,0.10), transparent 62%); }
.bg-dots { position: relative; }
.bg-dots::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
  background-image: radial-gradient(rgba(212,197,170,0.18) 1.2px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%); }
.bg-dots > .wrap { position: relative; z-index: 1; }
.sep-glow { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--champagne) 50%, var(--line-strong) 70%, transparent); opacity: 0.5; }

/* ---- 26. Direct lines (contact) — refined ---------------------------- */
.dl { display: grid; gap: 14px; }
.dl__row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 18px;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); transition: border-color .5s var(--ease), transform .5s var(--ease); }
.dl__row:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.dl__ico { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; color: var(--champagne);
  border: 1px solid var(--line); background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); }
.dl__ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.dl__body { display: flex; flex-direction: column; gap: 4px; }
.dl__k { font-family: "Chivo Mono", monospace; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.dl__v { font-size: 1.12rem; letter-spacing: 0.02em; color: var(--bone); }
a.dl__row { text-decoration: none; }
a.dl__row:hover .dl__cta { color: var(--bone); }
.dl__v small { display: block; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.01em; }
.dl__cta { font-family: "Chivo Mono", monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }

/* ---- 28. Legal prose (terms / privacy) ------------------------------- */
.legal { max-width: 820px; }
.legal__meta { font-family: "Chivo Mono", monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 48px; }
.legal h2 { font-size: 1.35rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bone); margin: 2.4em 0 0.7em; display: flex; gap: 0.7em; align-items: baseline; }
.legal h2 .n { font-family: "Chivo Mono", monospace; font-size: 0.85rem; color: var(--champagne); }
.legal > .legal__block:first-of-type h2 { margin-top: 0; }
.legal p { color: var(--text); line-height: 1.8; }
.legal ul { margin: 0.8em 0 0; display: grid; gap: 12px; }
.legal li { display: flex; gap: 14px; color: var(--text); line-height: 1.7; }
.legal li::before { content: "—"; color: var(--champagne); flex: none; }
.legal a { color: var(--champagne); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 27. Back-to-top button with scroll-progress ring ---------------- */
.totop { position: fixed; right: 28px; bottom: 28px; z-index: 150; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 0; background: transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke-width: 2.5; }
.totop__ring .track { stroke: var(--line); }
.totop__ring .bar { stroke: var(--champagne); stroke-linecap: round; transition: stroke-dashoffset .1s linear; filter: drop-shadow(0 0 5px rgba(212,197,170,0.5)); }
.totop__face { position: absolute; inset: 5px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); border: 1px solid var(--line);
  color: var(--bone); transition: background .4s var(--ease), color .4s var(--ease); }
.totop:hover .totop__face { background: var(--bone); color: var(--obsidian); }
.totop__face svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---- 22. Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-y: 96px; --gutter: 28px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .split { gap: 44px; }
}
@media (max-width: 860px) {
  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px); flex-direction: column; justify-content: center;
    gap: 2rem; background: rgba(12,12,14,0.97); backdrop-filter: blur(20px); transform: translateX(100%);
    transition: transform 0.5s var(--ease); border-left: 1px solid var(--line); padding: 40px; align-items: flex-start; }
  .nav__links.open { transform: none; }
  .nav__links a { font-size: 0.9rem; }
  .nav__toggle { display: flex; z-index: 101; }
  .grid-3, .grid-2, .tiers, .flow { grid-template-columns: 1fr; }
  .split, .model, .footer-grid { grid-template-columns: 1fr; }
  .model__arrow { transform: rotate(90deg); justify-self: center; }
  .flow__line { display: none; }
  .flow { gap: 44px; }
  .footer-grid { gap: 34px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}
@media (max-width: 560px) {
  :root { --section-y: 76px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .grid-4 { grid-template-columns: 1fr; }
}
/* ---- 23. Ambient + interactive FX ------------------------------------ */
/* drifting champagne light — kept extremely low to read as metal on black */
.fx-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-ambient b { position: absolute; display: block; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(120px); }
.fx-ambient .b1 { top: -20vw; left: -10vw; opacity: 0.16; background: radial-gradient(circle, var(--champagne), transparent 60%); animation: drift1 26s ease-in-out infinite; }
.fx-ambient .b2 { bottom: -24vw; right: -12vw; opacity: 0.13; background: radial-gradient(circle, #c9bd9f, transparent 60%); animation: drift2 32s ease-in-out infinite; }
.fx-ambient .b3 { top: 30%; left: 55%; width: 40vw; height: 40vw; opacity: 0.08; background: radial-gradient(circle, #b9ad92, transparent 62%); animation: drift1 38s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(13vw, 9vw) scale(1.18); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.12); } 50% { transform: translate(-11vw,-7vw) scale(1); } }

/* fine engineered grid, masked to a soft pool near the top */
.fx-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 18%, #000, transparent 75%); }

/* scroll progress ribbon */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: var(--foil); box-shadow: 0 0 14px rgba(212,197,170,0.55); transition: width .1s linear; }

/* cursor spotlight injected into cards / emboss */
.spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(212,197,170,0.10), transparent 60%); }
.card, .emboss { position: relative; }
.card > *:not(.spot), .emboss > *:not(.spot) { position: relative; z-index: 1; }
.card:hover .spot, .emboss:hover .spot { opacity: 1; }

/* membership card 3D tilt + moving sheen */
.tiers { perspective: 1400px; }
.memcard { transition: transform .4s var(--ease), box-shadow .4s var(--ease); transform-style: preserve-3d; will-change: transform; }
.memcard .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.4), transparent 46%); mix-blend-mode: overlay; }
.tier:hover .memcard .sheen { opacity: 1; }

/* pulsing rings on process dots */
.flow__dot { position: relative; }
.flow__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--line-strong);
  opacity: 0; animation: ring 3.6s ease-out infinite; }
.flow__step:nth-child(3) .flow__dot::after { animation-delay: .9s; }
.flow__step:nth-child(4) .flow__dot::after { animation-delay: 1.8s; }
.flow__step:nth-child(5) .flow__dot::after { animation-delay: 2.7s; }
@keyframes ring { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }

/* hover life on stats + model boxes */
.stat { transition: background .5s var(--ease); }
.stat:hover { background: linear-gradient(180deg, #212127, var(--graphite)); }
.model__box { transition: transform .5s var(--ease), border-color .5s var(--ease); }
.model__box:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.frame { transition: box-shadow .6s var(--ease); }
.frame:hover { box-shadow: 0 40px 80px -50px rgba(0,0,0,0.9); }

/* animated accent under section eyebrows */
.section-head .eyebrow::before { transition: width .6s var(--ease); }
[data-reveal].in .eyebrow::before { animation: lineGrow 1s var(--ease) .2s both; }
@keyframes lineGrow { from { width: 0; } to { width: 26px; } }

/* soft float on hero foil */
.hero .foil { display: inline-block; animation: foilShift 9s ease-in-out infinite, floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 860px) {
  .hero__top { grid-template-columns: 1fr; gap: 30px; }
  .hero__note { text-align: left; }
  .hero__mini img { height: clamp(200px, 44vw, 300px); width: auto; }
  .herobanner__note { position: static; max-width: none; text-align: left; margin-top: 20px; padding: 0 4px; }
  .herobanner { margin-top: 36px; }
  .pills { position: static; max-width: none; padding: 18px 16px 4px; }
  .marquee__stage { transform: none; }
  .marquee { padding: 46px 0; }
  .dl__row { grid-template-columns: 40px 1fr; }
  .dl__cta { grid-column: 2; }
  .totop { right: 18px; bottom: 18px; width: 52px; height: 52px; }
  .chain { grid-template-columns: 1fr; }
  .chain__link { width: 2px; height: 38px; justify-self: center; }
  .chain__link::before { background: linear-gradient(180deg, var(--line-strong), var(--champagne)); transform: scaleY(0); transform-origin: top; }
  .chain.in .chain__link::before { transform: scaleY(1); }
  .chain__pulse { display: none; }
  .why { grid-template-columns: 1fr; }
  .nav__has-drop { width: 100%; }
  .nav__drop { display: none; }
  .nav__droptrigger .caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .fx-ambient, .fx-grid { display: none; }
}

/* =========================================================================
   V2 UPDATE — Aug 2026
   Transparent hero badge · clean 2-col dropdown · refined stats ·
   Why Echelon spine · How-we-work conveyor · animated features ·
   app platform features · work sliders · 6-column team
   ========================================================================= */

/* ---- V2.1 Hero badge — transparent frosted (was solid obsidian) ------- */
.herobanner__cut { top: 20px; right: 20px; background: rgba(10,10,13,0.30);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line); border-radius: 14px; padding: 15px 20px; max-width: 320px;
  box-shadow: 0 20px 50px -32px rgba(0,0,0,0.7); }
.herobanner__cut::before { display: none; }
.herobanner__cut p { font-size: 0.95rem; }

/* ---- V2.2 Cleaner 2-column services dropdown -------------------------- */
.nav__drop { width: 600px; max-width: calc(100vw - 40px); padding: 16px; border-radius: 16px; }
.nav__drop-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dropitem { padding: 13px 14px; }
.dropitem b { font-size: 0.92rem; }
.nav__drop-foot { justify-content: center; gap: 0.7em; margin: 12px 0 0; padding: 15px 14px; border-top: 1px solid var(--line);
  border-radius: 10px; background: rgba(212,197,170,0.05); text-align: center; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.nav__drop-foot span { transition: transform 0.35s var(--ease); }
.nav__drop-foot:hover { background: rgba(212,197,170,0.12); color: var(--bone); }
.nav__drop-foot:hover span { transform: translateX(5px); }

/* ---- V2.3 Refined stats ---------------------------------------------- */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.statx { position: relative; padding: 40px 30px 34px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.statx::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 30px 30px; -webkit-mask-image: radial-gradient(circle at 82% 8%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 82% 8%, #000, transparent 72%); }
.statx > * { position: relative; z-index: 1; }
.statx:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -55px rgba(0,0,0,0.9); }
.statx__n { font-family: "Chivo Mono", monospace; font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: 0.01em; color: var(--bone); }
.statx__bar { display: block; width: 34px; height: 2px; margin: 20px 0 14px; background: var(--foil); background-size: 200% 200%;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 0.25s; animation: foilShift 9s ease-in-out infinite; }
[data-reveal].in .statx__bar, .statx.in .statx__bar { transform: scaleX(1); }
.statx__l { font-family: "Chivo Mono", monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 900px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .statgrid { grid-template-columns: 1fr 1fr; gap: 12px; } .statx { padding: 26px 20px; } }

/* ---- V2.4 Why Echelon Digital Partners — animated spine --------------- */
.whyeco { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.whyeco__intro { position: sticky; top: 120px; }
.whyeco__list { position: relative; display: flex; flex-direction: column; padding-left: 36px; }
.whyeco__list::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.whyeco__list::after { content: ""; position: absolute; left: 9px; top: 10px; width: 2px; height: 0;
  background: linear-gradient(var(--champagne), var(--platinum-hi)); box-shadow: 0 0 12px rgba(212,197,170,0.5);
  transition: height 1.5s var(--ease) 0.15s; }
.whyeco__list.in::after { height: calc(100% - 20px); }
.whyrow { position: relative; padding: 22px 0 26px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.whyeco__list.in .whyrow { opacity: 1; transform: none; }
.whyeco__list.in .whyrow:nth-child(2) { transition-delay: 0.12s; }
.whyeco__list.in .whyrow:nth-child(3) { transition-delay: 0.24s; }
.whyeco__list.in .whyrow:nth-child(4) { transition-delay: 0.36s; }
.whyeco__list.in .whyrow:nth-child(5) { transition-delay: 0.48s; }
.whyrow:last-child { border-bottom: 0; }
.whyrow__dot { position: absolute; left: -36px; top: 26px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); }
.whyrow__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 10px var(--champagne); }
.whyrow__k { font-family: "Chivo Mono", monospace; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); }
.whyrow h3 { font-size: 1.18rem; font-weight: 400; letter-spacing: 0.04em; color: var(--bone); margin: 0.35em 0 0.4em; }
.whyrow p { font-size: 0.97rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .whyeco { grid-template-columns: 1fr; gap: 34px; } .whyeco__intro { position: static; } }

/* ---- V2.5 How we work — animated conveyor ---------------------------- */
.howwork__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.howwork__grid::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; background: var(--line); z-index: 0; }
.howwork__grid::after { content: ""; position: absolute; left: 6%; top: 46px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--champagne), var(--platinum-hi)); box-shadow: 0 0 12px rgba(212,197,170,0.5); z-index: 0;
  transition: width 1.9s var(--ease) 0.2s; }
.howwork__grid.in::after { width: 88%; }
.hw { position: relative; z-index: 1; padding: 0 6px; opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.howwork__grid.in .hw { opacity: 1; transform: none; }
.howwork__grid.in .hw:nth-child(2) { transition-delay: 0.15s; }
.howwork__grid.in .hw:nth-child(3) { transition-delay: 0.30s; }
.howwork__grid.in .hw:nth-child(4) { transition-delay: 0.45s; }
.hw__node { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; position: relative; margin-bottom: 24px;
  border: 1px solid var(--line-strong); color: var(--champagne); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  background: radial-gradient(circle at 50% 25%, var(--graphite-2), var(--obsidian)); }
.hw__node svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.hw__node::after { content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 1px solid var(--line-strong); opacity: 0; }
.howwork__grid.in .hw:nth-child(1) .hw__node::after { animation: ring 3.6s ease-out infinite; }
.howwork__grid.in .hw:nth-child(2) .hw__node::after { animation: ring 3.6s ease-out 0.6s infinite; }
.howwork__grid.in .hw:nth-child(3) .hw__node::after { animation: ring 3.6s ease-out 1.2s infinite; }
.howwork__grid.in .hw:nth-child(4) .hw__node::after { animation: ring 3.6s ease-out 1.8s infinite; }
.hw__num { position: absolute; top: -12px; right: 2px; font-family: "Chivo Mono", monospace; font-size: 2.5rem; line-height: 1; font-weight: 300; color: rgba(212,197,170,0.14); }
.hw h3 { font-size: 1.12rem; font-weight: 400; letter-spacing: 0.04em; color: var(--bone); margin-bottom: 0.4em; }
.hw p { font-size: 0.94rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .howwork__grid { grid-template-columns: 1fr; gap: 34px; } .howwork__grid::before, .howwork__grid::after { display: none; } }

/* ---- V2.6 Animated feature cards ------------------------------------- */
.afeat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.afeatc { position: relative; padding: 34px 28px 28px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.afeatc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--foil);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.afeatc:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -55px rgba(0,0,0,0.9); }
.afeatc:hover::before { transform: scaleX(1); }
.afeatc__ico { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--champagne); margin-bottom: 20px; background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); }
.afeatc__ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.afeatc h3 { font-size: 1.08rem; font-weight: 400; letter-spacing: 0.03em; color: var(--bone); margin-bottom: 0.5em; }
.afeatc p { font-size: 0.93rem; color: var(--muted); margin: 0 0 22px; }
.afeatc__meter { height: 6px; border-radius: 6px; background: var(--obsidian); border: 1px solid var(--line); overflow: hidden; }
.afeatc__fill { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--foil); background-size: 200% 200%; animation: foilShift 9s ease-in-out infinite;
  transition: width 1.5s var(--ease) 0.25s; }
.afeatc.in .afeatc__fill { width: var(--v, 80%); }
.afeatc__foot { display: flex; justify-content: space-between; margin-top: 11px; font-family: "Chivo Mono", monospace;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.afeatc__foot b { color: var(--champagne); font-weight: 400; }
@media (max-width: 860px) { .afeat { grid-template-columns: 1fr; } }

/* ---- V2.7 App platform features grid --------------------------------- */
.appfeat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.appfeatc { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 12px; text-align: center;
  border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.07); border-radius: 14px;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.appfeatc:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 30px 60px -46px rgba(0,0,0,0.9); }
.appfeatc__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--champagne);
  border: 1px solid var(--line); background: radial-gradient(circle at 50% 25%, #1c1c20, var(--obsidian)); transition: color 0.4s var(--ease), border-color 0.4s var(--ease); }
.appfeatc:hover .appfeatc__ico { border-color: var(--line-strong); }
.appfeatc__ico svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.appfeatc__l { font-family: "Chivo Mono", monospace; font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
@media (max-width: 1024px) { .appfeat { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .appfeat { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ---- V2.8 Work slider ------------------------------------------------- */
.slider { position: relative; }
.slider__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; gap: 22px; transition: transform 0.7s var(--ease); will-change: transform; }
.slider__slide { flex: 0 0 calc((100% - 44px) / 3); }
.slide-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--graphite);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.slide-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -50px rgba(0,0,0,0.9); }
.slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider--wide .slide-card img { aspect-ratio: 16/10; }
.slider--phone .slide-card img { aspect-ratio: 9/16; object-position: top; }
.slider__nav { display: flex; gap: 12px; }
.slider__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); color: var(--bone); display: grid; place-items: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); }
.slider__btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.slider__btn:hover { background: var(--bone); color: var(--obsidian); }
.slider__btn:disabled { opacity: 0.3; cursor: default; }
.slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.slider__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); border: 0; cursor: pointer; transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.slider__dot.on { background: var(--champagne); transform: scale(1.3); }
@media (max-width: 860px) { .slider__slide { flex-basis: calc((100% - 22px) / 2); } .slider__head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 560px) { .slider__slide { flex-basis: 100%; } }

/* ---- V2.9 Team — six columns, two rows ------------------------------- */
.team--six { grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1100px) { .team--six { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .team--six { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 460px) { .team--six { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   V3 UPDATE — dropdown spacing · how-we-work motion · capability cockpit ·
   auto work marquee (borderless) · social 5-col · VIP featured frame
   ========================================================================= */

/* ---- V3.1 Dropdown — more spacing, no card accent line --------------- */
.nav__drop { width: 660px; padding: 22px; }
.nav__drop-grid { gap: 14px; }
.dropitem { padding: 17px 18px; gap: 15px; }
.dropitem b { font-size: 0.94rem; }
.dropitem small { margin-top: 4px; }
.dropitem[href="black-amex-card.html"]::after,
.dropitem[href="premium-card.html"]::after { display: none; }
.dropitem[href="black-amex-card.html"],
.dropitem[href="premium-card.html"] { padding-left: 18px; }
.nav__drop-foot { margin-top: 16px; }

/* ---- V3.2 How we work — richer motion + layout ----------------------- */
.howwork__grid { position: relative; gap: 30px; }
.howwork__grid::after { background: linear-gradient(90deg, var(--champagne), var(--platinum-hi), var(--champagne));
  background-size: 200% 100%; animation: railSheen 2.6s linear infinite; }
.howwork__spark { position: absolute; top: 46px; left: 6%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--champagne); box-shadow: 0 0 16px 4px rgba(212,197,170,0.7); z-index: 2; opacity: 0; }
.howwork__grid.in .howwork__spark { animation: hwTravel 3.6s var(--ease) infinite; }
@keyframes hwTravel { 0% { left: 6%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 94%; opacity: 0; } }
@keyframes railSheen { to { background-position: 200% 0; } }
.hw__node { width: 96px; height: 96px; }
.howwork__grid.in .hw:nth-child(1) .hw__node { animation: hwFloat 4s ease-in-out infinite; }
.howwork__grid.in .hw:nth-child(2) .hw__node { animation: hwFloat 4s ease-in-out 0.5s infinite; }
.howwork__grid.in .hw:nth-child(3) .hw__node { animation: hwFloat 4s ease-in-out 1s infinite; }
.howwork__grid.in .hw:nth-child(4) .hw__node { animation: hwFloat 4s ease-in-out 1.5s infinite; }
@keyframes hwFloat { 0%,100% { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
  50% { transform: translateY(-7px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 40px -18px rgba(212,197,170,0.5); } }
.hw__node svg { transition: transform 0.5s var(--ease); }
.hw:hover .hw__node svg { transform: scale(1.12); }

/* ---- V3.3 Capability cockpit ----------------------------------------- */
.cockpit { position: relative; padding: 26px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.10);
  border-radius: 20px; background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  box-shadow: 0 50px 110px -55px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; }
.cockpit::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 88% 0%, #000, transparent 70%); mask-image: radial-gradient(circle at 88% 0%, #000, transparent 70%); }
.cockpit > * { position: relative; z-index: 1; }
.cockpit__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.cockpit__title { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.04em; color: var(--bone); }
.cockpit__sub { font-family: "Chivo Mono", monospace; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-top: 6px; }
.cockpit__live { display: inline-flex; align-items: center; gap: 0.55em; font-family: "Chivo Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); }
.cockpit__live i { width: 8px; height: 8px; border-radius: 50%; background: #7fc79a; box-shadow: 0 0 0 0 rgba(127,199,154,0.6); animation: liveping 2s ease-out infinite; }
@keyframes liveping { 0% { box-shadow: 0 0 0 0 rgba(127,199,154,0.5); } 70% { box-shadow: 0 0 0 8px rgba(127,199,154,0); } 100% { box-shadow: 0 0 0 0 rgba(127,199,154,0); } }
.cockpit__rows { display: flex; flex-direction: column; gap: 10px; }
.crow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(8,8,10,0.4); opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease); }
.cockpit.in .crow { opacity: 1; transform: none; }
.cockpit.in .crow:nth-child(2) { transition-delay: 0.08s; }
.cockpit.in .crow:nth-child(3) { transition-delay: 0.16s; }
.cockpit.in .crow:nth-child(4) { transition-delay: 0.24s; }
.cockpit.in .crow:nth-child(5) { transition-delay: 0.32s; }
.crow:hover { border-color: var(--line-strong); background: rgba(212,197,170,0.05); }
.crow__ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--champagne);
  background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); }
.crow__ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.crow__label { font-size: 0.98rem; color: var(--bone); letter-spacing: 0.02em; }
.crow__status { display: inline-flex; align-items: center; gap: 0.5em; font-family: "Chivo Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); white-space: nowrap; }
.crow__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.crow__status.ok { color: #7fc79a; }
.cockpit__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.cmetric { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8,8,10,0.4); }
.cmetric__n { font-family: "Chivo Mono", monospace; font-size: 2.1rem; font-weight: 300; color: var(--bone); line-height: 1; }
.cmetric__l { font-family: "Chivo Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.cbars { display: flex; align-items: flex-end; gap: 5px; height: 30px; margin-top: 14px; }
.cbars span { flex: 1; border-radius: 3px 3px 0 0; height: 8%; background: linear-gradient(180deg, var(--champagne), rgba(212,197,170,0.25)); transition: height 0.9s var(--ease); }
.cockpit.in .cbars span { height: var(--h, 40%); }
.cockpit.in .cbars span { transition-delay: calc(var(--i, 0) * 0.06s); }
.cockpit__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.cockpit__foot span { font-family: "Chivo Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.cockpit__foot a { font-family: "Chivo Mono", monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); transition: gap 0.3s var(--ease); display: inline-flex; align-items: center; gap: 0.5em; }
.cockpit__foot a:hover { color: var(--bone); }
@media (max-width: 560px) { .cockpit__metrics { grid-template-columns: 1fr; } }

/* ---- V3.4 Work marquee (auto, borderless, no dots) ------------------- */
.workrail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.workrail__track { display: flex; gap: 22px; width: max-content; will-change: transform; }
.workrail--wide .workrail__track { animation: railScroll 46s linear infinite; }
.workrail--phone .workrail__track { animation: railScroll 40s linear infinite; }
.workrail:hover .workrail__track { animation-play-state: paused; }
.workrail .wc { flex: 0 0 auto; border: 0; border-radius: 16px; overflow: hidden; background: var(--graphite); box-shadow: 0 30px 60px -45px rgba(0,0,0,0.9); }
.workrail--wide .wc { width: 440px; }
.workrail--wide .wc img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.workrail--phone .wc { width: 214px; }
.workrail--phone .wc img { width: 100%; aspect-ratio: 9/16; object-fit: cover; object-position: top; display: block; }
@keyframes railScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) { .workrail--wide .wc { width: 300px; } }

/* ---- V3.5 Social work — five columns --------------------------------- */
.workgrid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.workgrid5 .wc { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--graphite);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); }
.workgrid5 .wc:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.workgrid5 .wc img { width: 100%; aspect-ratio: 9/16; object-fit: cover; object-position: top; display: block; transition: transform 0.7s var(--ease); }
.workgrid5 .wc:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .workgrid5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .workgrid5 { grid-template-columns: repeat(2, 1fr); } }

/* ---- V3.6 VIP featured frame ----------------------------------------- */
.featured { position: relative; }
.featured__glow { position: absolute; inset: -10% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 42%, rgba(212,197,170,0.30), transparent 60%); filter: blur(34px); animation: glowPulse 7s ease-in-out infinite; }
.featured__disc { position: absolute; top: -16px; right: -8px; width: 96px; height: 96px; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--champagne), rgba(212,197,170,0.15) 70%, transparent);
  -webkit-mask-image: radial-gradient(circle, #000 1.2px, transparent 1.6px); mask-image: radial-gradient(circle, #000 1.2px, transparent 1.6px);
  -webkit-mask-size: 7px 7px; mask-size: 7px 7px; opacity: 0.5; animation: glowPulse 7s ease-in-out infinite reverse; }
.featured .frame { position: relative; z-index: 1; }
.frame--vip { border-color: var(--line-strong); box-shadow: 0 55px 120px -55px rgba(0,0,0,0.95); }
.frame--vip::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(212,197,170,0.20); }
.featured__tag { position: absolute; left: 18px; top: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.6em 1em; border-radius: 40px; border: 1px solid var(--line); background: rgba(8,8,10,0.55); backdrop-filter: blur(8px);
  font-family: "Chivo Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); }
.featured__tag b { color: var(--champagne); }

/* =========================================================================
   V4 UPDATE — 6-col phone rails · wavy How-we-work · centered cockpit ·
   dropdown card row · How-we-operate rebuild · team backgrounds ·
   Why-Echelon scroll number
   ========================================================================= */

/* ---- V4.1 Phone work rails — full screens, ~6 across ----------------- */
.workrail--phone .workrail__track { animation-duration: 52s; gap: 16px; }
.workrail--phone .wc { width: 208px; aspect-ratio: 49/100; background: transparent; border: 0; box-shadow: none; border-radius: 22px; }
.workrail--phone .wc img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6)); }
@media (max-width: 560px) { .workrail--phone .wc { width: 150px; } }

/* ---- V4.2 How we work — flowing wavy path ---------------------------- */
.howflow { position: relative; height: 320px; margin-top: 10px; }
.howflow__svg { position: absolute; left: 0; top: 0; width: 100%; height: 340px; overflow: visible; z-index: 0; }
.howflow__track { fill: none; stroke: var(--line); stroke-width: 2; }
.howflow__path { fill: none; stroke: url(#howGrad); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.howflow.in .howflow__path { transition: stroke-dashoffset 2.2s var(--ease) 0.2s; stroke-dashoffset: 0; }
.howflow__dot { fill: var(--platinum-hi); filter: drop-shadow(0 0 6px rgba(212,197,170,0.9)); }
.hnode { position: absolute; z-index: 2; }
.hnode__ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 20px;
  display: grid; place-items: center; color: var(--champagne); border: 1px solid var(--line-strong); z-index: 2; opacity: 0;
  background: radial-gradient(circle at 50% 25%, var(--graphite-2), var(--obsidian)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.howflow.in .hnode__ico { animation: nodePop 0.6s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes nodePop { from { opacity: 0; transform: translate(-50%,-50%) scale(0.55); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.hnode__ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.hnode__ico::after { content: ""; position: absolute; inset: -6px; border-radius: 24px; border: 1px solid var(--line-strong); opacity: 0; }
.howflow.in .hnode__ico::after { animation: ring 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
.hnode__num { position: absolute; left: 50%; top: 50%; transform: translate(-32%, -128%); font-family: "Chivo Mono", monospace;
  font-size: 6.5rem; line-height: 1; font-weight: 300; color: rgba(212,197,170,0.09); z-index: 0; }
.hnode__label { position: absolute; left: 50%; width: 250px; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.7s var(--ease); transition-delay: var(--d, 0s); }
.howflow.in .hnode__label { opacity: 1; }
.hnode__label--above { bottom: 52px; }
.hnode__label--below { top: 52px; }
.hnode__label h3 { font-size: 1.08rem; font-weight: 400; letter-spacing: 0.03em; color: var(--bone); margin-bottom: 0.35em; }
.hnode__label p { font-size: 0.9rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
  .howflow { height: auto; display: flex; flex-direction: column; gap: 28px; }
  .howflow__svg { display: none; }
  .hnode { position: static !important; display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; }
  .hnode__ico { position: static; transform: none; opacity: 1; }
  .howflow.in .hnode__ico { animation: none; }
  .hnode__num { position: static; transform: none; font-size: 2.2rem; grid-row: 1; }
  .hnode__label { position: static; transform: none; width: auto; text-align: left; opacity: 1; grid-column: 2; }
}

/* ---- V4.3 Cockpit — centered, closer to reference ------------------- */
.capstack--center { display: block; }
.capstack--center .section-head { margin: 0 auto 48px; text-align: center; }
.capstack--center .section-head .eyebrow { justify-content: center; }
.capstack--center .cta-line { justify-content: center; }
.cockpit { max-width: 780px; margin: 0 auto; padding: 30px; }
.crow__status.warn { color: #e0b877; }
.crow__status.neutral { color: var(--champagne); }

/* ---- V4.4 Dropdown — dedicated card row ------------------------------ */
.dropitem[href="black-amex-card.html"], .dropitem[href="premium-card.html"] { padding-left: 18px; }
.nav__drop-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav__drop-cards .dropitem { margin: 0; }
@media (max-width: 560px) { .nav__drop-cards { grid-template-columns: 1fr; } }

/* ---- V4.5 How we operate — rebuilt principles ------------------------ */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rulecard { position: relative; display: flex; gap: 22px; align-items: flex-start; padding: 40px 36px; overflow: hidden;
  border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.08); border-radius: 14px;
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.rulecard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--foil);
  transform: scaleY(0); transform-origin: top; transition: transform 0.8s var(--ease); }
.rulecard.in::before { transform: scaleY(1); }
.rulecard:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 44px 90px -55px rgba(0,0,0,0.95); }
.rulecard__ico { width: 54px; height: 54px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--champagne);
  border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--obsidian)); }
.rulecard__ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.rulecard__n { position: absolute; top: 14px; right: 22px; font-family: "Chivo Mono", monospace; font-size: 3.4rem; line-height: 1; color: rgba(212,197,170,0.07); }
.rulecard h3 { font-size: 1.12rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bone); margin-bottom: 0.45em; }
.rulecard p { font-size: 0.96rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .rules { grid-template-columns: 1fr; } }

/* ---- V4.6 Team member backgrounds ------------------------------------ */
.member__ph img { position: relative; z-index: 1; }
.member__ph::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.55;
  background-image: radial-gradient(rgba(212,197,170,0.18) 1px, transparent 1.5px); background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%); mask-image: linear-gradient(180deg, #000, transparent 72%); }
.member__ph::after { z-index: 2; }
.team--six .member:nth-child(6n+1) .member__ph { background: radial-gradient(circle at 50% 16%, #2c2518, var(--obsidian)); }
.team--six .member:nth-child(6n+2) .member__ph { background: radial-gradient(circle at 50% 16%, #202a24, var(--obsidian)); }
.team--six .member:nth-child(6n+3) .member__ph { background: radial-gradient(circle at 50% 16%, #1f2430, var(--obsidian)); }
.team--six .member:nth-child(6n+4) .member__ph { background: radial-gradient(circle at 50% 16%, #2b2026, var(--obsidian)); }
.team--six .member:nth-child(6n+5) .member__ph { background: radial-gradient(circle at 50% 16%, #282814, var(--obsidian)); }
.team--six .member:nth-child(6n)   .member__ph { background: radial-gradient(circle at 50% 16%, #241f2c, var(--obsidian)); }
.member__ph { position: relative; }
.member::after { content: ""; position: absolute; left: 50%; top: 8px; width: 60%; height: 60%; transform: translateX(-50%); z-index: 0;
  background: radial-gradient(circle, rgba(212,197,170,0.16), transparent 70%); filter: blur(20px); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.member { position: relative; }
.member:hover::after { opacity: 1; }

/* ---- V4.7 Why Echelon — scroll-driven number ------------------------- */
.whyeco__count { display: flex; align-items: baseline; gap: 0.5em; margin: 14px 0 22px; }
.whyeco__count b { font-family: "Chivo Mono", monospace; font-size: 4.6rem; font-weight: 300; line-height: 1; color: var(--bone);
  background: var(--foil); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: foilShift 9s ease-in-out infinite; }
.whyeco__count span { font-family: "Chivo Mono", monospace; font-size: 1rem; letter-spacing: 0.14em; color: var(--muted-2); }
.whyeco__list.in .whyrow { opacity: 0.4; transition: opacity 0.45s var(--ease), transform 0.7s var(--ease); }
.whyeco__list.in .whyrow.active { opacity: 1; }
.whyrow.active h3 { color: var(--platinum-hi); }
.whyrow.active .whyrow__dot { border-color: var(--champagne); box-shadow: 0 0 0 4px rgba(212,197,170,0.10); }
.whyrow.active .whyrow__dot::after { transform: scale(1.4); }
.whyrow__dot::after { transition: transform 0.4s var(--ease); }

/* =========================================================================
   V5 UPDATE — Why-Echelon pinned-left/scroll-right · cockpit on sub-pages
   (2-column) · equal-height service frames · website featured (no crop)
   ========================================================================= */

/* ---- V5.1 Why Echelon — left pinned, right scrolls ------------------- */
.whyeco__intro { position: sticky; top: 96px; align-self: start; }
.whyeco__list { padding-top: 4px; }
.whyrow { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 0; padding: 10px 0; }
.whyrow__dot { top: 50%; transform: translateY(-50%); }
.whyrow.active .whyrow__dot { transform: translateY(-50%); }
@media (max-width: 860px) { .whyrow { min-height: 0; padding: 22px 0 26px; } }

/* ---- V5.2 Cockpit on sub-pages — two columns ------------------------- */
.cockpit--wide { max-width: 100%; }
.cockpit--wide .cockpit__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cockpit.in .crow:nth-child(6) { transition-delay: 0.4s; }
@media (max-width: 720px) { .cockpit--wide .cockpit__rows { grid-template-columns: 1fr; } }

/* ---- V5.3 Website featured — show full image, no crop ---------------- */
.frame--contain img { object-fit: contain; background: #0b0b0d; }

/* =========================================================================
   V3 additions — built on the existing tokens. No override of --section-y,
   --maxw or any base component. Obsidian / champagne throughout.
   ========================================================================= */

/* ---- Bare frame: transparent cut-out PNGs, no plate ---------------------- */
.frame--bare { border: 0; border-radius: 0; overflow: visible; background: none; }
.frame--bare img { object-fit: contain; filter: none;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,0.62)); }
.frame--bare:hover img { transform: none; }

/* ---- Service cards: media band + button --------------------------------- */
.card__media { margin: -28px -28px 22px; border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; aspect-ratio: 16 / 9.2; border-bottom: 1px solid var(--line); background: #0B0B0E; }
.card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .92;
  transition: transform 1.1s var(--ease), opacity .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); opacity: 1; }
.card { display: flex; flex-direction: column; }
.card p { flex: 1; }
.card__btn, .cardsvc__btn { margin-top: 22px; align-self: flex-start; }
.cardsvc { display: flex; flex-direction: column; }

/* ---- Hero caption: fully transparent. No fill, blur, border or plate ----- */
.herobanner__cut { background: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; padding: 22px 26px 0 0 !important; }
.herobanner__cut::before { display: none !important; }

/* ---- Stats: three figures, each with a sub-line -------------------------- */
.statgrid { grid-template-columns: repeat(3, 1fr); }
.statx__s { margin-top: 8px; font-size: 0.95rem; line-height: 1.5;
  color: var(--muted-2); letter-spacing: 0; text-transform: none; max-width: 26ch; }

/* ---- Footer link icons -------------------------------------------------- */
.footer-grid a { display: flex; align-items: center; gap: 11px; }
.fi { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px;
  width: 26px; height: 26px; border-radius: 6px; background: rgba(212,197,170,0.08);
  border: 1px solid var(--line); color: var(--champagne);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.fi i, .fi svg { width: 13px; height: 13px; }
.footer-grid a:hover .fi { background: var(--champagne); color: var(--obsidian);
  border-color: var(--champagne); transform: translateY(-2px); }

/* ---- CTA band: copy left, cut-out bleeding off the right edge ------------ */
.ctaband { display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: center;
  gap: clamp(28px, 4vw, 56px); padding: clamp(48px, 5vw, 72px) 0 clamp(48px, 5vw, 72px) clamp(36px, 4vw, 56px);
  border-radius: 22px; overflow: hidden; position: relative; text-align: left; }
.ctaband::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 150% at 100% 50%, rgba(212,197,170,0.10), transparent 58%),
    repeating-linear-gradient(115deg, rgba(212,197,170,0.030) 0 1px, transparent 1px 84px); }
.ctaband__copy { position: relative; z-index: 2; }
.ctaband__copy .eyebrow { justify-content: flex-start; }
.ctaband__copy .h2 { margin: 0.4em 0 0.45em; max-width: 18ch; }
.ctaband__copy .lead { margin: 0 0 34px; max-width: 46ch; }
.ctaband__copy .cta-line { justify-content: flex-start; }
.ctaband__shot { position: relative; z-index: 1; align-self: end; margin-bottom: calc(-1 * clamp(48px, 5vw, 72px)); }
.ctaband__shot img { width: 100%; height: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 30px 56px rgba(0,0,0,0.6)); }

/* ---- Testimonials: auto-rotating, five stars, real client marks ---------- */
.tst { display: grid; gap: clamp(26px, 3vw, 38px); }
.tst__stage { position: relative; min-height: clamp(230px, 24vw, 264px); }
.tst__item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  display: grid; grid-template-columns: 1.44fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.tst__item.is-on { opacity: 1; visibility: visible; transform: none; }
.tst__quote { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.5; color: var(--bone);
  font-weight: 300; position: relative; }
.tst__quote::before { content: "\201C"; position: absolute; left: -0.42em; top: -0.2em;
  font-size: 2.6em; line-height: 1; color: var(--champagne); opacity: 0.22; pointer-events: none; }
.tst__stars { display: flex; gap: 5px; margin-bottom: 20px; }
.tst__stars i, .tst__stars svg { width: 17px; height: 17px; color: var(--champagne);
  fill: var(--champagne); stroke: var(--champagne); }
.tst__by { display: flex; align-items: center; gap: 18px;
  padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--line); }
.tst__av { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 1px solid var(--line-strong); display: grid; place-items: center; }
.tst__av img { width: 100%; height: 100%; object-fit: cover; }
.tst__name { display: block; font-size: 1.06rem; color: var(--bone); line-height: 1.3; }
.tst__role { display: block; margin-top: 4px; font-family: "Chivo Mono", monospace;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.tst__nav { display: flex; gap: 10px; flex-wrap: wrap; }
.tst__dot { flex: 1 1 0; min-width: 64px; height: 2px; background: var(--line);
  position: relative; overflow: hidden; cursor: pointer; border: 0; padding: 0;
  transition: background .35s var(--ease); }
.tst__dot:hover { background: var(--line-strong); }
.tst__dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--champagne); display: block; }
.tst__dot.is-on i { width: 100%; transition: width 6s linear; }

@media (prefers-reduced-motion: reduce) {
  .tst__item { transition: none; }
  .tst__dot.is-on i { transition: none; width: 100%; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .statgrid { grid-template-columns: 1fr; gap: 28px; }
  .statx__s { max-width: none; }
}
@media (max-width: 900px) {
  .ctaband { grid-template-columns: 1fr; text-align: center;
    padding: clamp(40px, 6vw, 56px) clamp(26px, 5vw, 40px) 0; }
  .ctaband__copy .eyebrow, .ctaband__copy .cta-line { justify-content: center; }
  .ctaband__copy .h2, .ctaband__copy .lead { margin-left: auto; margin-right: auto; }
  .ctaband__shot { margin: 8px auto 0; max-width: 400px; }
  .tst__item { grid-template-columns: 1fr; gap: 24px; align-content: start; }
  .tst__by { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--line); }
  .tst__av { flex: 0 0 58px; width: 58px; height: 58px; }
  .tst__stage { min-height: 320px; }
}
@media (max-width: 760px) {
  .card__media { margin: -22px -22px 18px; }
  .tst__dot { min-width: 0; }
}

/* ---- Team wall: one member featured, twelve tiles, auto-advancing -------- */
.teamwall { display: grid; grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 4vw, 64px); align-items: stretch; }

.tw__feature { display: grid; gap: 26px; }
.tw__stage { position: relative; aspect-ratio: 4 / 3.5; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 14%, #2a2419, var(--obsidian)); }
.tw__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8,8,10,0.78) 100%); }
.tw__shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transform: scale(1.05); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.tw__shot.is-on { opacity: 1; visibility: visible; transform: scale(1); }
.tw__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.tw__meta { position: relative; min-height: 106px; }
.tw__id { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
.tw__id.is-on { opacity: 1; visibility: visible; transform: none; }
.tw__no { font-family: "Chivo Mono", monospace; font-size: .7rem; letter-spacing: .2em;
  color: var(--champagne); display: block; margin-bottom: 10px; }
.tw__no i { font-style: normal; color: var(--muted-2); }
.tw__name { font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: .04em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--bone); line-height: 1.15; }
.tw__role { font-family: "Chivo Mono", monospace; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.tw__grid { display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr); gap: 14px; align-self: stretch; }
.tw__tile { position: relative; padding: 0; border: 0; cursor: pointer; border-radius: 12px;
  overflow: hidden; min-height: 118px; background: #131316;
  transition: transform .5s var(--ease); }
.tw__tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  filter: grayscale(1) brightness(.62); transition: filter .55s var(--ease), transform 1s var(--ease); }
.tw__ring { position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  border: 1px solid var(--line); transition: border-color .45s var(--ease), box-shadow .45s var(--ease); }
.tw__tile:hover { transform: translateY(-4px); }
.tw__tile:hover img { filter: grayscale(0.15) brightness(.95); }
.tw__tile:focus-visible .tw__ring { border-color: var(--champagne); }
.tw__tile.is-on img { filter: none; transform: scale(1.04); }
.tw__tile.is-on .tw__ring { border-color: var(--champagne);
  box-shadow: inset 0 0 0 1px rgba(212,197,170,0.45), 0 18px 40px -26px rgba(0,0,0,0.9); }

@media (prefers-reduced-motion: reduce) {
  .tw__shot, .tw__id { transition: none; }
}
@media (max-width: 1080px) {
  .teamwall { grid-template-columns: 1fr; gap: 34px; }
  .tw__stage { aspect-ratio: 16 / 10; }
  .tw__grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tw__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; }
  .tw__tile { min-height: 92px; }
  .tw__meta { min-height: 92px; }
}

/* =========================================================================
   V6 UPDATE — production-line How-we-work · slider arrows · overlapping CTA
   cut-out · XL featured frame · membership earn module
   ========================================================================= */

/* ---- V6.1 How we work — the production line ------------------------------
   Scroll-linked rail: a fill draws left to right as you scroll the section,
   a carriage rides the leading edge, and each station arms as it is passed.
   -------------------------------------------------------------------------- */
.howrail { position: relative; margin-top: clamp(34px, 4vw, 52px); }

.howrail__line { position: relative; height: 1px; background: var(--line); }
.howrail__fill { position: absolute; left: 0; top: 0; height: 1px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(212,197,170,0.18) 0%, var(--champagne) 100%); }
.howrail__fill::after { content: ""; position: absolute; right: 0; top: -1px; width: 90px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(212,197,170,0.55)); filter: blur(2px); }
.howrail__unit { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--champagne); opacity: calc(0.15 + var(--p, 0));
  box-shadow: 0 0 0 5px rgba(212,197,170,0.10), 0 0 22px rgba(212,197,170,0.85); }

.howrail__steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.hstep { position: relative; padding: 34px clamp(22px, 2.2vw, 34px) 4px;
  border-left: 1px solid var(--line); overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hstep:first-child { border-left: 0; padding-left: 0; }
.hstep.is-live { opacity: 1; transform: none; }
/* failsafe: without the JS controller nothing may stay hidden */
.howrail:not([data-armed]) .hstep { opacity: 1; transform: none; }

/* station marker sitting on the rail */
.hstep__tick { position: absolute; top: -5px; left: clamp(22px, 2.2vw, 34px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--graphite);
  border: 1px solid var(--line-strong);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.hstep:first-child .hstep__tick { left: 0; }
.hstep.is-live .hstep__tick { background: var(--champagne); border-color: var(--champagne);
  box-shadow: 0 0 0 5px rgba(212,197,170,0.12); }

/* ghost numeral */
.hstep__n { display: block; font-family: "Chivo Mono", monospace; font-weight: 300;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(212,197,170,0.20);
  transition: -webkit-text-stroke-color .6s var(--ease); }
.hstep.is-live .hstep__n { -webkit-text-stroke-color: rgba(212,197,170,0.48); }

.hstep__ico { display: grid; place-items: center; width: 48px; height: 48px; margin: 20px 0 22px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(212,197,170,0.03);
  color: var(--muted); transition: color .45s var(--ease), border-color .45s var(--ease),
    background .45s var(--ease), transform .45s var(--ease); }
.hstep__ico i, .hstep__ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.hstep.is-live .hstep__ico { color: var(--champagne); border-color: var(--line-strong);
  background: rgba(212,197,170,0.07); }

.hstep h3 { font-size: 1.12rem; font-weight: 400; letter-spacing: 0.02em; color: var(--bone);
  margin: 0 0 0.55em; }
.hstep p { font-size: 0.92rem; color: var(--muted); margin: 0; max-width: 30ch; }
.hstep__meta { display: inline-block; margin-top: 20px; font-family: "Chivo Mono", monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  padding: 0.5em 0.9em; border: 1px solid var(--line); border-radius: 30px;
  transition: color .45s var(--ease), border-color .45s var(--ease); }
.hstep.is-live .hstep__meta { color: var(--champagne); border-color: var(--line-strong); }

/* continuous pass-through sweep, so the line never reads as static */
.hstep::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(212,197,170,0.07) 50%, transparent 62%); }
.hstep.is-live::after { opacity: 1; animation: hsweep 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 0.5s); }
@keyframes hsweep {
  0%, 62% { transform: translateX(-100%); }
  86%, 100% { transform: translateX(100%); }
}

.hstep:hover .hstep__ico { transform: translateY(-3px); }

@media (max-width: 980px) {
  .howrail__line { display: none; }
  .howrail__steps { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .hstep { padding-top: 0; }
  .hstep:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hstep__tick { display: none; }
}
@media (max-width: 620px) {
  .howrail__steps { grid-template-columns: 1fr; gap: 38px; }
  .hstep { border-left: 0; padding-left: 0; }
  .hstep p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hstep { opacity: 1; transform: none; transition: none; }
  .hstep.is-live::after { animation: none; }
}

/* ---- V6.2 Testimonial slider — head row with arrows top right ------------ */
.tst-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(30px, 5vw, 70px); }
.tst-head .section-head { margin-bottom: 0; }
.tst__arrows { display: flex; gap: 12px; flex: 0 0 auto; padding-top: 6px; }
.tst__arw { width: 54px; height: 54px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--bone);
  display: grid; place-items: center;
  transition: background .35s var(--ease), color .35s var(--ease),
    border-color .35s var(--ease), transform .35s var(--ease); }
.tst__arw i, .tst__arw svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tst__arw:hover { background: var(--champagne); color: var(--obsidian);
  border-color: var(--champagne); transform: translateY(-3px); }
.tst__arw:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
@media (max-width: 820px) {
  .tst-head { flex-direction: column; gap: 26px; }
  .tst__arrows { padding-top: 0; }
  .tst__arw { width: 48px; height: 48px; }
}

/* ---- V6.3 CTA band — cut-out breaking above the panel edge ---------------- */
/* --shot-h is the FULL height of the cut-out. The image is anchored to the
   content box, never to the panel edge, so the hands are never clipped. */
.ctaband { overflow: visible; position: relative;
  --pad: clamp(40px, 4vw, 56px);
  --shot-h: clamp(390px, 33vw, 512px);
  --cta-lift: calc(var(--pad) + clamp(46px, 4.6vw, 66px));
  margin-top: clamp(64px, 7vw, 108px);
  grid-template-columns: 1.18fr 0.82fr;
  padding-block: var(--pad); align-items: center; }
.ctaband::after { border-radius: inherit; }
.ctaband__copy { position: relative; z-index: 2; }
.ctaband__shot { position: relative; align-self: stretch; z-index: 3; margin-bottom: 0;
  min-height: calc(var(--shot-h) - var(--cta-lift)); }
.ctaband__shot::before { content: ""; position: absolute; right: -4%; bottom: 0;
  width: 118%; height: calc(100% + var(--cta-lift)); z-index: 0; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 60% 52%, rgba(212,197,170,0.20), transparent 62%);
  filter: blur(40px); animation: glowPulse 7s ease-in-out infinite; }
/* flush to the panel floor — his lowest content is jacket, not fingers */
.ctaband__shot img { position: absolute; right: 0; bottom: calc(-1 * var(--pad)); z-index: 1;
  height: var(--shot-h); width: auto; max-width: none; display: block;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,0.72)); }
@media (max-width: 1240px) {
  .ctaband { --shot-h: clamp(340px, 36vw, 430px); grid-template-columns: 1.05fr 0.95fr; }
}
@media (max-width: 900px) {
  .ctaband { grid-template-columns: 1fr; text-align: center; margin-top: 56px;
    padding: clamp(40px, 6vw, 56px) clamp(26px, 5vw, 40px) clamp(28px, 4vw, 38px); }
  .ctaband__copy .eyebrow, .ctaband__copy .cta-line { justify-content: center; }
  .ctaband__copy .h2, .ctaband__copy .lead { margin-left: auto; margin-right: auto; }
  .ctaband__shot { align-self: auto; min-height: 0; margin: 24px auto 0; max-width: 400px; width: 100%; }
  .ctaband__shot::before { display: none; }
  .ctaband__shot img { position: static; width: 100%; height: auto; margin-top: -58px; }
}

/* ---- V6.4 XL featured frame — natural ratio, no crop --------------------- */
.split--feature { grid-template-columns: 0.84fr 1.16fr; gap: clamp(40px, 4vw, 56px); }
.frame--natural { aspect-ratio: auto; }
.frame--natural img { width: 100%; height: auto; display: block; }
.featured--xl .featured__tag { left: 0; top: 4px; }
.featured--xl .featured__glow { inset: -10% 0; }
.featured--xl .featured__disc { right: 0; }
@media (min-width: 1401px) {
  .featured--xl { margin-right: calc(-1 * var(--gutter)); }
}
@media (max-width: 1100px) {
  .split--feature { grid-template-columns: 1fr; }
}

/* ---- V6.5 Membership earn module — two levers, side by side -------------- */
.earn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 32px; }
.earn__cell { position: relative; padding: 22px 22px 20px; border: 1px solid var(--line);
  border-radius: 16px; background: rgba(212,197,170,0.025); overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease); }
.earn__cell:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.earn__k { display: block; font-family: "Chivo Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.earn__v { display: block; margin: 12px 0 6px; font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 300; line-height: 1; color: var(--bone); letter-spacing: -0.01em; }
.earn__v em { font-style: normal; font-size: 0.5em; color: var(--champagne); margin-left: 0.2em; }
.earn__d { display: block; font-size: 0.88rem; color: var(--muted); margin: 0; }
.earn__cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.earn__cell:hover::after { transform: scaleX(1); }
@media (max-width: 560px) { .earn { grid-template-columns: 1fr; } }

/* referral chain, three links */
.chainrow { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px;
  margin: 24px 0 30px; font-family: "Chivo Mono", monospace; font-size: 0.63rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.chainrow i { display: inline-flex; align-items: center; gap: 12px; font-style: normal;
  white-space: nowrap; margin-right: 12px; }
.chainrow span { padding: 0.55em 0.95em; border: 1px solid var(--line); border-radius: 30px;
  transition: border-color .4s var(--ease), color .4s var(--ease); }
.chainrow span.on { color: var(--champagne); border-color: var(--line-strong); }
.chainrow b { color: var(--muted-2); font-weight: 300; }
@media (max-width: 520px) { .chainrow { font-size: 0.58rem; } }

/* =========================================================================
   V7 UPDATE — service intro as an editorial band: tall media, an offset
   card overlapping its edge, and a ruled spec strip beneath
   ========================================================================= */

.edband { display: grid; grid-template-columns: repeat(12, 1fr);
  align-items: center; position: relative; }

/* ---- V7.1 The media plate ------------------------------------------------ */
.edband__media { grid-column: 5 / -1; grid-row: 1; position: relative; }
.edband__media .frame { aspect-ratio: 4 / 3; border-color: var(--line-strong);
  box-shadow: 0 60px 130px -60px rgba(0,0,0,0.95); }
.edband__media .frame img { transform: scale(1.05) translateY(var(--par, 0px));
  transition: transform 1.4s var(--ease), filter 1.2s var(--ease); }
.edband__media:hover .frame img { transform: scale(1.09) translateY(var(--par, 0px)); }
.edband__media .frame::after { background: linear-gradient(105deg, rgba(8,8,10,0.72) 0%, rgba(8,8,10,0.10) 46%, transparent 70%); }

/* transparent cut-outs get a plate instead of a crop */
.edband__media--bare .frame { border: 0; background:
  linear-gradient(150deg, rgba(212,197,170,0.055), rgba(8,8,10,0) 62%), var(--graphite);
  display: grid; place-items: center end; overflow: hidden;
  padding: clamp(22px, 3vw, 44px);
  padding-left: clamp(56px, 17%, 215px); }
.edband__media--bare .frame img { width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 34px 58px rgba(0,0,0,0.6)); transform: translateY(var(--par, 0px)); }
.edband__media--bare:hover .frame img { transform: translateY(var(--par, 0px)) scale(1.03); }
.edband__media--bare .frame::after { display: none; }

.edband__tag { position: absolute; z-index: 4; right: clamp(20px, 2.4vw, 34px); bottom: 0;
  transform: translateY(50%); display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1.15em; border-radius: 40px; border: 1px solid var(--line-strong);
  background: rgba(10,10,12,0.9); backdrop-filter: blur(10px);
  font-family: "Chivo Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.edband__tag b { color: var(--champagne); }

/* ---- V7.2 The offset card ------------------------------------------------ */
.edband__card { grid-column: 1 / 7; grid-row: 1; z-index: 2; position: relative;
  padding: clamp(34px, 3.6vw, 54px);
  border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.10);
  border-radius: 22px; background: rgba(11,11,13,0.90); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 50px 110px -55px rgba(0,0,0,0.95); }
.edband__card::before { content: ""; position: absolute; left: clamp(34px, 3.6vw, 54px);
  top: -1px; width: 68px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--champagne), transparent); }
.edband__card .h2 { margin: 0.5em 0 0.6em; }
.edband__card p { margin: 0 0 32px; color: var(--muted); }
.edband__card .cta-line { justify-content: flex-start; }

/* ---- V7.3 The spec strip — hairlines only, no boxes ---------------------- */
.specstrip { display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(52px, 5vw, 78px); border-top: 1px solid var(--line); }
.spec { position: relative; padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 34px)
  clamp(24px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.06s); }
.specstrip.in .spec { opacity: 1; transform: none; }
.spec + .spec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--line); }
.spec:nth-child(3n+1)::before { display: none; }
.spec:nth-child(3n+1) { padding-left: 0; }
.spec:not(:nth-child(3n+1)) { padding-left: clamp(22px, 2.2vw, 34px); }
.spec:nth-last-child(-n+3) { border-bottom: 0; }

.spec__n { display: block; font-family: "Chivo Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.18em; color: var(--champagne); margin-bottom: 1em; }
.spec__t { display: block; font-size: clamp(1rem, 1.2vw, 1.1rem); font-weight: 400;
  letter-spacing: 0.02em; color: var(--bone); margin-bottom: 0.5em; }
.spec__d { display: block; font-size: 0.88rem; color: var(--muted-2); margin: 0; max-width: 34ch; }
.spec::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--champagne), transparent);
  transition: width .6s var(--ease); }
.spec:hover::after { width: 100%; }
.spec:hover .spec__t { color: var(--champagne); }

/* ---- V7.4 Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .edband { grid-template-columns: 1fr; gap: 0; }
  .edband__media { grid-column: 1; grid-row: 1; }
  .edband__card { grid-column: 1; grid-row: 2; margin: -56px clamp(0px, 3vw, 40px) 0;
    z-index: 3; }
  .edband__tag { right: auto; left: clamp(20px, 4vw, 34px); }
  /* stacked: nothing overlaps the plate horizontally any more */
  .edband__media--bare .frame { padding-left: clamp(22px, 3vw, 44px); place-items: center; }
  .edband__media--bare .frame img { width: 92%; }
}
@media (max-width: 860px) {
  .specstrip { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(3n+1)::before { display: block; }
  .spec:nth-child(2n+1)::before { display: none; }
  .spec:nth-child(3n+1), .spec:not(:nth-child(3n+1)) { padding-left: clamp(20px, 3vw, 30px); }
  .spec:nth-child(2n+1) { padding-left: 0; }
  .spec:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .spec:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .specstrip { grid-template-columns: 1fr; }
  /* must out-specify .spec:not(:nth-child(3n+1)) above, or every other row indents */
  .specstrip .spec { padding-left: 0; padding-right: 0; }
  .spec::before { display: none !important; }
  .specstrip .spec { border-bottom: 1px solid var(--line); }
  .specstrip .spec:last-child { border-bottom: 0; }
  .edband__media .frame { aspect-ratio: 4 / 3; }
  .edband__card { margin: -40px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spec { opacity: 1; transform: none; transition: none; }
  .edband__media .frame img { transform: none !important; }
}

/* =========================================================================
   V8 UPDATE — app platform explorer: 20 features, a live phone, hover or click
   ========================================================================= */

.appx { display: grid; grid-template-columns: 0.63fr 0.81fr 0.99fr;
  gap: clamp(24px, 2.8vw, 44px); align-items: center;
  margin-top: clamp(30px, 3.2vw, 46px); }

/* ---- V8.1 The index ------------------------------------------------------ */
.appx__index { display: flex; flex-direction: column; gap: 1px; }
.appx__item { position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; width: 100%; text-align: left; line-height: 1.25;
  padding: clamp(6px, 0.72vw, 8px) 13px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; cursor: pointer;
  transition: background .35s var(--ease), padding-left .35s var(--ease); }
.appx__item::before { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 0;
  border-radius: 2px; background: var(--champagne); transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(212,197,170,0.7);
  transition: height .45s var(--ease); }
.appx__item.is-on::before { height: 58%; }
.appx__item.is-on { background: rgba(212,197,170,0.055); padding-left: 20px; }
.appx__item:hover:not(.is-on) { background: rgba(212,197,170,0.03); }
.appx__item:focus-visible { outline: 1px solid var(--champagne); outline-offset: 2px; }

.appx__n { font-family: "Chivo Mono", monospace; font-size: 0.63rem; letter-spacing: 0.12em;
  color: var(--muted-2); transition: color .35s var(--ease); }
.appx__item.is-on .appx__n { color: var(--champagne); }
.appx__name { font-size: clamp(0.88rem, 0.98vw, 0.95rem); letter-spacing: 0.015em;
  line-height: 1.25; color: var(--muted); transition: color .35s var(--ease); }
.appx__item.is-on .appx__name, .appx__item:hover .appx__name { color: var(--bone); }
.appx__go { display: grid; place-items: center; width: 16px; height: 16px; opacity: 0;
  color: var(--champagne); transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
.appx__go i, .appx__go svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.appx__item.is-on .appx__go { opacity: 1; transform: none; }

/* ---- V8.2 The phone stage ------------------------------------------------ */
.appx__stage { position: relative; }
.appx__glow { position: absolute; left: -14%; right: -14%; top: 4%; bottom: 6%; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(212,197,170,0.26), transparent 62%);
  filter: blur(44px); animation: glowPulse 7s ease-in-out infinite; }
.appx__phone { position: relative; z-index: 1; width: 100%; max-width: 400px;
  margin: 0 auto; aspect-ratio: 364 / 739; }
.appx__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(0.962);
  transition: opacity .5s var(--ease), transform .62s var(--ease), visibility .5s;
  filter: drop-shadow(0 40px 66px rgba(0,0,0,0.62)); }
.appx__shot.is-on { opacity: 1; visibility: visible; transform: none; }
.appx__floor { position: absolute; left: 8%; right: 8%; bottom: -4%; height: 34px; z-index: 0;
  border-radius: 50%; pointer-events: none; filter: blur(16px);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.75), transparent 70%); }

/* ---- V8.3 The detail panel ----------------------------------------------- */
.appx__detail { display: flex; flex-direction: column; gap: 26px; }
.appx__panels { position: relative; transition: height .5s var(--ease); }
.appx__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--line); }
.appx__foot .mono { color: var(--muted-2); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; }
.appx__panel { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.appx__panel.is-on { opacity: 1; visibility: visible; transform: none; }
.appx__tag { display: inline-flex; align-items: center; gap: 0.7em;
  font-family: "Chivo Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-2); }
.appx__tag b { color: var(--champagne); font-weight: 400; }
.appx__panel h3 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 300;
  letter-spacing: -0.01em; color: var(--bone); margin: 0.55em 0 0.4em; }
.appx__pl { font-size: 1rem; color: var(--muted); margin: 0 0 28px; max-width: 42ch; }
.appx__pts { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.appx__pt { display: grid; gap: 0.35em; }
.appx__panel.is-on .appx__pt { animation: ptIn .55s var(--ease) both;
  animation-delay: calc(var(--j, 0) * 0.07s + 0.08s); }
@keyframes ptIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.appx__k { font-family: "Chivo Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--champagne); }
.appx__v { font-size: 0.91rem; color: var(--muted-2); max-width: 46ch; }

/* ---- V8.4 Head row with the counter and arrows --------------------------- */
.appx-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(30px, 5vw, 70px); }
.appx-head .section-head { margin-bottom: 0; }
.appx__ctl { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding-top: 6px; }
.appx__count { font-family: "Chivo Mono", monospace; font-size: 0.65rem; letter-spacing: 0.16em;
  color: var(--muted-2); white-space: nowrap; }
.appx__count b { color: var(--champagne); font-weight: 400; font-size: 1.5rem; }

/* ---- V8.5 Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .appx { grid-template-columns: 1fr; gap: 30px; }
  .appx__index { order: 1; flex-direction: row; overflow-x: auto; gap: 8px;
    padding: 2px 2px 12px; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .appx__index::-webkit-scrollbar { height: 3px; }
  .appx__index::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  .appx__item { flex: 0 0 auto; width: auto; grid-template-columns: auto auto;
    padding: 10px 16px; border: 1px solid var(--line); border-radius: 30px;
    scroll-snap-align: center; }
  .appx__item::before { display: none; }
  .appx__item.is-on { padding-left: 16px; border-color: var(--line-strong);
    background: rgba(212,197,170,0.08); }
  .appx__go { display: none; }
  .appx__stage { order: 2; width: 100%; max-width: 300px; margin: 6px auto 0; }
  .appx__detail { order: 3; gap: 22px; }
  .appx__foot { justify-content: flex-start; }
  .appx-head { flex-direction: column; gap: 24px; }
  .appx__ctl { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .appx__shot, .appx__panel, .appx__panels, .appx__item { transition: none; }
  .appx__panel.is-on .appx__pt { animation: none; }
  .appx__glow { animation: none; }
}

/* =========================================================================
   V9 UPDATE — one arrow family. Every arrow on the site is now the same
   drawn SVG at the same head geometry, replacing the two font glyphs
   (which fell back to a different face per operating system) and the two
   mismatched lucide weights.
   ========================================================================= */

.ico-arw { display: block; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease); }

/* button badge — optically centred, no longer sitting on a text baseline */
.btn .arw { font-size: 0.92em; }
.btn .arw svg { width: 1.2em; height: 1.2em; stroke-width: 1.85; }

/* nav dropdown footer */
.nav__drop-foot .arw-i { display: grid; place-items: center; }
.nav__drop-foot .arw-i svg { width: 16px; height: 16px; stroke-width: 1.6; }

/* referral chain on the homepage */
.chainrow b { display: grid; place-items: center; }
.chainrow b svg { width: 15px; height: 15px; stroke-width: 1.55; }

/* round prev / next controls, testimonials and the app explorer */
.tst__arw i, .tst__arw svg { width: 20px; height: 20px; stroke-width: 1.6; }
[data-tst-next]:hover .ico-arw, [data-appx-next]:hover .ico-arw { transform: translateX(3px); }
[data-tst-prev]:hover .ico-arw, [data-appx-prev]:hover .ico-arw { transform: translateX(-3px); }

/* capability rows — the diagonal was 1.2 and read as a hairline next to everything else */
.caprow__arw svg { width: 19px; height: 19px; stroke-width: 1.6; }

/* app explorer index */
.appx__go i, .appx__go svg { width: 15px; height: 15px; stroke-width: 1.8; }

@media (prefers-reduced-motion: reduce) { .ico-arw { transition: none; } }

/* sub-page cockpit footer + contact call link, same family */
.cockpit__foot .arw-i, .dl__cta .arw-i { display: inline-grid; place-items: center; }
.cockpit__foot .arw-i svg { width: 14px; height: 14px; stroke-width: 1.7; }
.dl__cta { display: inline-flex; align-items: center; gap: 0.45em; }
.dl__cta .arw-i svg { width: 14px; height: 14px; stroke-width: 1.7; }
.cockpit__foot a:hover .ico-arw, .dl__cta:hover .ico-arw { transform: translateX(3px); }

/* back-to-top and the nav caret join the family */
.totop__face svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav__droptrigger .caret { display: inline-grid; place-items: center; font-size: 1em; }
.nav__droptrigger .caret svg { width: 13px; height: 13px; stroke-width: 1.8; }

/* =========================================================================
   V11 UPDATE — partner card section rebuilt on the real artwork ·
   team wall replaced with a uniform grid
   ========================================================================= */

/* ---- V11.1 The partner card ---------------------------------------------- */
.pcard { display: grid; grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(34px, 4vw, 68px); align-items: center;
  margin-top: clamp(34px, 3.6vw, 52px); }

.cardshow { position: relative; display: grid; place-items: center; }
.cardshow__glow { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(46px);
  background: radial-gradient(circle at 50% 45%, rgba(212,197,170,0.30), transparent 62%);
  animation: glowPulse 7s ease-in-out infinite; }
.cardshow img { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto;
  display: block; border-radius: 18px;
  filter: drop-shadow(0 44px 70px rgba(0,0,0,0.72));
  transform: rotate(-4deg); transition: transform 1s var(--ease); }
.cardshow:hover img { transform: rotate(-1.5deg) translateY(-6px); }
.cardshow__note { position: relative; z-index: 2; margin-top: 26px;
  font-family: "Chivo Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-2); text-align: center; }
.cardshow__note b { color: var(--champagne); }

/* ---- V11.2 Tier rate table ----------------------------------------------- */
.tiertable { margin: 28px 0 30px; border-top: 1px solid var(--line); }
.tiertable__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease); }
.tiertable__row:hover { background: rgba(212,197,170,0.04); }
.tiertable__row--head { padding: 0 0 12px; border-bottom: 0; }
.tiertable__row--head span { font-family: "Chivo Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.tiertable__t { display: flex; align-items: center; gap: 0.7em;
  font-size: 1rem; color: var(--bone); letter-spacing: 0.02em; }
.tiertable__t i { width: 22px; height: 14px; border-radius: 3px; flex: none;
  border: 1px solid var(--line-strong); }
.tiertable__t i.blk { background: linear-gradient(140deg, #26262b, #0b0b0d); }
.tiertable__t i.plt { background: linear-gradient(140deg, #d8d8dc, #8e8e95); }
.tiertable__t i.chm { background: linear-gradient(140deg, #f0e2c4, #b99f6d); }
.tiertable__v { font-size: 1.02rem; color: var(--champagne); font-weight: 300; }
.tiertable__v small { color: var(--muted-2); font-size: 0.72em; margin-left: 0.25em; }

@media (max-width: 1000px) {
  .pcard { grid-template-columns: 1fr; gap: 36px; }
  .cardshow { order: -1; }
  .cardshow img { max-width: 380px; }
}
@media (max-width: 520px) {
  .tiertable__row { grid-template-columns: 1fr auto auto; gap: 12px; }
  .tiertable__t { font-size: 0.92rem; }
}

/* ---- V11.3 Team grid — one treatment for twelve very different photos ---- */
.tgrid { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.5vw, 22px) clamp(12px, 1.3vw, 18px);
  margin-top: clamp(34px, 3.6vw, 52px); }
.tmate { opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.045s); }
.tgrid.in .tmate { opacity: 1; transform: none; }

.tmate__shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line); background: var(--graphite);
  transition: border-color .45s var(--ease), transform .45s var(--ease),
    box-shadow .45s var(--ease); }
.tmate__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%;
  filter: grayscale(1) contrast(1.06) brightness(0.82);
  transition: filter .6s var(--ease), transform .8s var(--ease); }
.tmate__shot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8,8,10,0.55));
  opacity: 0.9; transition: opacity .5s var(--ease); }
.tmate__n { position: absolute; left: 10px; top: 9px; z-index: 2;
  font-family: "Chivo Mono", monospace; font-size: 0.56rem; letter-spacing: 0.14em;
  color: var(--muted-2); transition: color .45s var(--ease); }

.tmate:hover .tmate__shot { border-color: var(--line-strong); transform: translateY(-5px);
  box-shadow: 0 26px 50px -28px rgba(0,0,0,0.9); }
.tmate:hover .tmate__shot img { filter: none; transform: scale(1.06); }
.tmate:hover .tmate__shot::after { opacity: 0.45; }
.tmate:hover .tmate__n { color: var(--champagne); }

.tmate__name { display: block; margin-top: 13px; font-size: 0.94rem; letter-spacing: 0.02em;
  color: var(--bone); transition: color .45s var(--ease); }
.tmate:hover .tmate__name { color: var(--champagne); }
.tmate__role { display: block; margin-top: 3px; font-family: "Chivo Mono", monospace;
  font-size: 0.57rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-2); line-height: 1.5; }

@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .tgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tmate { opacity: 1; transform: none; transition: none; }
  .cardshow img { transition: none; }
}

/* ---- V11.4 Pre-existing: the hero backdrop image escaped its box at some
   widths and pushed the page scrollWidth out. Clip it to its own bounds. -- */
.hero__bg { overflow: hidden; }

/* ---- V11.5 Pre-existing: the contact form scrolled sideways on phones.
   Grid/flex children default to min-width:auto, so the selects and inputs
   refused to shrink below their intrinsic width. ------------------------- */
.form .field, .form .grid, .form .phone-row { min-width: 0; }
.form input, .form select, .form textarea { max-width: 100%; min-width: 0; }
@media (max-width: 620px) {
  .form .grid-2 { grid-template-columns: 1fr; }
  .form .phone-row { grid-template-columns: 1fr; }
  section .emboss[style] { padding: 30px 22px !important; }
}

/* ---- V11.6 Final guard. Decorative blobs and horizontal scrollers can still
   poke past the viewport on very narrow phones. `clip` (not `hidden`) kills
   the sideways scroll without creating a scroll container, so the fixed
   header and every sticky element keep working. ------------------------- */
html, body { overflow-x: clip; }

/* =========================================================================
   V12 UPDATE — About page.
   1. "Why we exist" carried a stock photo that said nothing. It now carries
      a drawn diagram: 200 member marks converge on one buying list, which
      pays out twice — member rate and referral commission. Same slot in the
      .split, so section rhythm is untouched.
   2. The founder section drops its portrait and becomes a single-column
      statement — monogram, quote, attribution. No half-empty grid left over.
   ========================================================================= */

/* ---- V12.1 The leverage diagram ----------------------------------------- */
.lvg { position: relative; }

.lvg__cap { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  font-family: "Chivo Mono", ui-monospace, monospace; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.lvg__cap b { color: var(--champagne); font-weight: 400; }
.lvg__capr { color: var(--muted-2); }

/* the field of 200 marks */
.lvg__field { display: grid; grid-template-columns: repeat(20, 1fr);
  gap: 13px 0; justify-items: center; margin: 26px 0 4px; }
.lvg__field i { width: 3px; height: 3px; border-radius: 50%;
  background: var(--platinum-lo); opacity: 0; transform: scale(0.3); }
.lvg.in .lvg__field i {
  animation: lvgSeed .5s var(--ease) forwards, lvgBreathe 5.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 5ms), calc(1300ms + var(--i) * 5ms); }
@keyframes lvgSeed   { to { opacity: .5; transform: scale(1); } }
@keyframes lvgBreathe{ 0%, 100% { opacity: .34; } 50% { opacity: .9; } }

/* the converging / diverging spine */
.lvg__stage { position: relative; }
.lvg__svg { display: block; width: 100%; height: 190px; }
.lvg__svg path { fill: none; stroke: rgba(212,197,170,0.20); stroke-width: 1;
  vector-effect: non-scaling-stroke; }

.lvg__draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lvg.in .lvg__draw path { animation: lvgDraw 1.1s var(--ease) forwards;
  animation-delay: calc(700ms + var(--d)); }
@keyframes lvgDraw { to { stroke-dashoffset: 0; } }

.lvg__draw .lvg__out { stroke: rgba(212,197,170,0.34); }

.lvg__flow path { stroke: var(--champagne); stroke-width: 1.6;
  stroke-linecap: round; stroke-dasharray: 0.04 0.96; stroke-dashoffset: 1; opacity: 0; }
.lvg.in .lvg__flow path { animation: lvgFlow 3.6s linear infinite;
  animation-delay: calc(1900ms + var(--f)); }
@keyframes lvgFlow {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; } }

/* the node — an HTML element so preserveAspectRatio:none can't skew it */
.lvg__node { position: absolute; top: 112px; left: 50%; width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px; display: grid; place-items: center;
  opacity: 0; transform: scale(.4) rotate(45deg); }
.lvg__node i { width: 100%; height: 100%; background: var(--champagne);
  box-shadow: 0 0 0 1px rgba(8,8,10,0.9), 0 0 22px 4px rgba(217,203,176,0.22); }
.lvg__node::after { content: ""; position: absolute; inset: -10px;
  border: 1px solid rgba(212,197,170,0.30); border-radius: 50%; }
.lvg.in .lvg__node { animation: lvgGem .7s var(--ease) 1500ms forwards; }
.lvg.in .lvg__node::after { animation: lvgRing 4.2s ease-out 2200ms infinite; }
@keyframes lvgGem  { to { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lvgRing { 0% { opacity: .7; transform: scale(.9); }
                     70%,100% { opacity: 0; transform: scale(1.9); } }

.lvg__nodelab { position: absolute; top: 112px; left: calc(50% + 26px);
  transform: translateY(-50%);
  white-space: nowrap; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne); opacity: 0; transition: opacity .6s var(--ease) 1.75s; }
.lvg__nodelab::before { content: ""; position: absolute; left: -20px; top: 50%;
  width: 14px; height: 1px; background: var(--line-strong); }
.lvg.in .lvg__nodelab { opacity: 1; }

/* the two outcomes */
.lvg__out2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 4px; }
.lvg__end { display: block; text-align: center; padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.lvg__end + .lvg__end { transition-delay: .12s; }
.lvg.in .lvg__end { opacity: 1; transform: none; transition-delay: 2s; }
.lvg.in .lvg__end + .lvg__end { transition-delay: 2.15s; }
.lvg__end b { display: block; font-weight: 400; font-size: 0.95rem; color: var(--bone);
  letter-spacing: 0.02em; }
.lvg__end small { display: block; margin-top: 6px; font-size: 0.76rem; line-height: 1.5;
  color: var(--muted-2); max-width: 22ch; margin-inline: auto; }

@media (max-width: 860px) {
  .lvg__field { gap: 10px 0; margin-top: 22px; }
  .lvg__svg { height: 150px; }
  .lvg__node { top: 88px; }
  .lvg__nodelab { top: 88px; left: calc(50% + 22px); font-size: 0.58rem; letter-spacing: 0.16em; }
}
@media (max-width: 460px) {
  .lvg__out2 { grid-template-columns: 1fr; gap: 18px; }
  .lvg__cap { flex-direction: column; gap: 6px; }
  .lvg__field { gap: 8px 0; }
  .lvg__field i { width: 2px; height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .lvg.in .lvg__field i,
  .lvg.in .lvg__draw path,
  .lvg.in .lvg__node,
  .lvg.in .lvg__node::after { animation: none; }
  .lvg__field i { opacity: .5; transform: none; }
  .lvg__draw path { stroke-dashoffset: 0; }
  .lvg__node { opacity: 1; transform: rotate(45deg); }
  .lvg__flow { display: none; }
  .lvg__end { opacity: 1; transform: none; }
}

/* ---- V12.2 Founder — a statement, not a portrait ------------------------ */
.fndr__top { display: flex; align-items: center; gap: 24px; }
.fndr__top .eyebrow { flex: none; margin: 0; }
.fndr__rule { flex: 1; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) .15s; }
.fndr__top.in .fndr__rule { transform: scaleX(1); }
.fndr__meta { flex: none; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted-2); }

.fndr__quote { position: relative; margin: 40px 0 52px; max-width: 27ch;
  font-weight: 300; font-size: clamp(1.45rem, 2.9vw, 2.45rem); line-height: 1.3;
  letter-spacing: -0.012em; color: var(--bone); }
.fndr__mark { color: var(--champagne); opacity: .5; margin-right: .06em; }

.fndr__grid { display: grid; grid-template-columns: 230px minmax(0, 66ch); gap: 88px;
  align-items: start; padding-top: 40px; border-top: 1px solid var(--line); }

.fndr__id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fndr__monogram { position: relative; display: grid; place-items: center;
  width: 96px; height: 96px; margin-bottom: 22px; }
.fndr__monogram svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fndr__monogram circle { fill: none; stroke: var(--line-strong); stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg);
  transform-origin: 50% 50%; }
.fndr__id.in .fndr__monogram circle { animation: lvgDraw 1.4s var(--ease) .2s forwards; }
/* a single arc turning slowly inside the ring — the only motion in this block */
.fndr__monogram .fndr__arc { stroke: var(--champagne); stroke-linecap: round;
  stroke-dasharray: 0.11 0.89; stroke-dashoffset: 0; opacity: 0;
  transform-origin: 50% 50%; }
.fndr__id.in .fndr__monogram .fndr__arc { opacity: .75;
  animation: fndrSpin 22s linear 1.4s infinite; }
@keyframes fndrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fndr__monogram b { font-family: "Chivo Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 1.15rem; letter-spacing: 0.18em; text-indent: 0.18em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.fndr__name { font-size: 1.35rem; font-weight: 400; color: var(--bone); letter-spacing: 0.01em; }
.fndr__role { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted-2); }

.fndr__body p + p { margin-top: 1.1em; }

@media (max-width: 900px) {
  .fndr__grid { grid-template-columns: 1fr; gap: 36px; }
  .fndr__quote { max-width: none; margin: 34px 0 44px; }
}
@media (max-width: 560px) {
  .fndr__top { flex-wrap: wrap; gap: 14px; }
  .fndr__rule { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fndr__rule { transform: scaleX(1); transition: none; }
  .fndr__monogram circle { stroke-dashoffset: 0; animation: none; }
  .fndr__monogram .fndr__arc { display: none; }
}

/* ---- V15.1 Hero card — lighter shadow that carries onto the banner ------- */
/* The card's shadow stopped dead on the feature banner's top edge, which read
   as the card being cut off. Two parts: .hero__top is lifted above .herobanner
   so anything it casts feathers over the banner instead of being painted out,
   and the card's own box-shadow is softened. The card floats ~160px clear of
   the banner, further than a box-shadow can carry, so the contact shadow is a
   separate elliptical pool that straddles the seam. Round, never a box. */
.hero__top { position: relative; z-index: 2; }
.herobanner { position: relative; z-index: 1; }
.cardfloat__inner img {
  box-shadow: 0 30px 58px -30px rgba(0,0,0,0.52), 0 0 0 1px rgba(212,197,170,0.12);
}
.cardfloat::after { content: ""; position: absolute; left: 4%; right: 4%; top: 72%;
  height: 330px; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.60), rgba(0,0,0,0.30) 52%, transparent 76%);
  filter: blur(44px); }
@media (max-width: 980px) { .cardfloat::after { display: none; } }

/* ============================================================================
   V16 — seamless sections, tighter rhythm, no visible joins
   ========================================================================= */

/* ---- V16.1 Kill the section indicators ---------------------------------
   Three full-width hard edges gave the page its "stacked blocks" look: the
   1px rules top and bottom of .bg-panel and .marquee, and the footer rule.
   A band that starts and ends on the page colour has no edge to see, so the
   panels now fade in and out of --obsidian instead of stepping into it. */
.bg-panel {
  border-block: 0;
  background: linear-gradient(180deg,
    var(--obsidian) 0%, #0d0d10 14%, #0d0d10 86%, var(--obsidian) 100%);
}
.marquee {
  border-block: 0;
  background: linear-gradient(180deg, var(--obsidian), #0c0c0e 50%, var(--obsidian));
}
/* the footer keeps a join, but as a hairline that dies out at both ends */
.site-footer { border-top: 0; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: min(100%, var(--maxw)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
  pointer-events: none; }

/* ---- V16.2 Close the gaps ----------------------------------------------
   Every section carried a full 128px top AND bottom, so any two of them put
   256px of empty page between their content. The rhythm is now one shared
   gap: a section pays full padding, and the section that follows it pays
   half. Every section-to-section join is the same distance, which is what
   the uniform-spacing rule asks for; it is the doubling that broke it. */
:root { --section-y: clamp(72px, 6.6vw, 96px); }
.section--tight { padding-block: calc(var(--section-y) * 0.72); }
.section + .section,
.section + .section--tight,
.section--tight + .section,
.section--tight + .section--tight { padding-top: calc(var(--section-y) * 0.55); }
/* a panel needs its full run so the fade has room to resolve */
.section.bg-panel + .section,
.section + .section.bg-panel { padding-top: var(--section-y); }
.section-head { margin-bottom: clamp(34px, 3.4vw, 52px); }

/* ---- V16.3 One tracking scale ------------------------------------------
   Letter-spacing had drifted to 34 distinct values, and the same visual job
   was being done at 0.12em in one component and 0.24em in the next. That
   unevenness is what reads as "not designed". Five roles, five values. The
   display / h2 / h3 ramp keeps its own optical progression (smaller caps
   need more air), which is deliberate, not drift. */
:root {
  --tr-wide:  0.26em;   /* eyebrows and the card brand / tier lockups */
  --tr-cap:   0.16em;   /* every uppercase micro-label, chip and key */
  --tr-title: 0.05em;   /* uppercase component headings */
  --tr-name:  0.02em;   /* mixed-case component headings and names */
  --tr-lg:   -0.01em;   /* large numerals and pull quotes */
  --tracking-cap: var(--tr-wide);
}

/* wide lockups */
.memcard__brand, .memcard__tier,
.fancard .fc-brand, .fancard .fc-tier,
.marquee__track span, .fndr__role { letter-spacing: var(--tr-wide); }

/* uppercase micro-labels */
.mono, .breadcrumb, .pagehero__tag, .crow__status, .featured__tag, .hstep__meta,
.edband__tag, .appx__foot .mono, .appx__k, .appx__count, .cardshow__note,
.lvg__cap, .lvg__nodelab, .btn, .nav__links a, .nav__links a.nav__cta,
.nav__drop-foot, .dl__cta, .legal__meta, .afeatc__foot, .cmetric__l,
.cockpit__foot span, .cockpit__foot a, .whyeco__count span, .tst__role,
.chainrow, .tmate__n, .tmate__role, .stat__l, .memcard__no, .field label,
.dl__k, .statx__l, .whyrow__k, .earn__k, .spec__n, .appx__tag, .appx__n,
.tiertable__row--head span, .fndr__monogram b, .card__num, .caprow__n, .badge,
.site-footer h2, .cockpit__live, .cockpit__sub, .fndr__meta, .footer-bottom p,
.footer-legal a, .chain__tag, .fancard .fc-no, .margin__label, .tw__role,
.tw__no, .member__r, .appfeatc__l, .pill, .field__err,
.margin__cost span, .margin__profit span { letter-spacing: var(--tr-cap); }

/* uppercase component headings */
.whycard h3, .paypanel h3, .legal h2, .rulecard h3,
.flow__step h3 { letter-spacing: var(--tr-title); }

/* mixed-case component headings and names */
.acc__q, .whyrow h3, .hw h3, .cockpit__title, .chain__node h3, .tw__name,
.afeatc h3, .hnode__label h3, .dropitem b, .dropitem small, .spec__t,
.hstep h3, .tiertable__t, .tmate__name, .cardperk__item h3, .form-success h2,
.appx__name, .crow__label, .dl__v, .member__n, .fndr__name,
.contact-item strong, .caprow__txt b, .lvg__end b { letter-spacing: var(--tr-name); }

/* large numerals and pull quotes */
.stat__n, .statx__n, .statx__s, .dl__v small, .earn__v, .appx__panel h3,
.fndr__quote, .hstep__n { letter-spacing: var(--tr-lg); }

/* ---- V16.4 Motion and light --------------------------------------------
   The page already had reveals, tilt and a progress ribbon. What it did not
   have was one consistent answer to the pointer: only .card and .emboss lit
   up, so most of the page felt inert next to them. */

/* the spotlight now runs on every bordered panel */
.statx, .whycard, .afeatc, .chain__node, .cockpit, .dl__row,
.rulecard, .paypanel, .cardperk__item, .hnode { position: relative; }
.statx > *:not(.spot), .whycard > *:not(.spot), .afeatc > *:not(.spot),
.chain__node > *:not(.spot), .cockpit > *:not(.spot), .dl__row > *:not(.spot),
.rulecard > *:not(.spot), .paypanel > *:not(.spot),
.cardperk__item > *:not(.spot), .hnode > *:not(.spot) { position: relative; z-index: 1; }
.statx > .spot, .cockpit > .spot { z-index: 0; }
.statx:hover .spot, .whycard:hover .spot, .afeatc:hover .spot,
.chain__node:hover .spot, .cockpit:hover .spot, .dl__row:hover .spot,
.rulecard:hover .spot, .paypanel:hover .spot,
.cardperk__item:hover .spot, .hnode:hover .spot { opacity: 1; }

/* and the edge answers with it */
.statx, .whycard, .afeatc, .chain__node, .cockpit,
.rulecard, .paypanel, .cardperk__item, .hnode {
  transition: border-color .6s var(--ease), transform .6s var(--ease); }
.statx:hover, .whycard:hover, .afeatc:hover, .chain__node:hover, .cockpit:hover,
.rulecard:hover, .paypanel:hover, .cardperk__item:hover, .hnode:hover {
  border-color: var(--line-strong); }

/* the tiers band lost its rules, so it earns its edges with light instead:
   one slow specular pass, 24s, no repeat-flicker */
.bg-panel { position: relative; }
/* a moving background-position, not a moving box: a box would show its own
   two vertical edges the moment the gradient axis is closer to vertical */
.bg-panel::after { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(212,197,170,0.05) 50%, transparent 66%);
  background-size: 280% 100%;
  animation: panelSheen 26s linear infinite; }
.bg-panel > .wrap { position: relative; z-index: 1; }
@keyframes panelSheen { 0% { background-position: 140% 0; } 60%, 100% { background-position: -40% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bg-panel::after { display: none; }
  .statx, .whycard, .afeatc, .chain__node, .cockpit,
  .rulecard, .paypanel, .cardperk__item, .hnode { transition: none; }
}

/* ---- V17.1 Remove the section backgrounds -------------------------------
   The V16 fade matched the TONE either side of a section join, which the
   pixel test confirmed. It did not fix the real tell: .fx-grid and .fx-ambient
   are fixed layers at z-index 0, and every section sits at z-index 1 with its
   own opaque background, so a panel PAINTS OVER the page grid. The texture
   stops dead at the section's top and bottom edge even when the brightness
   matches, and that reads as a cut.

   The section treatments are therefore gone. One page surface: the fixed
   grid, the drifting ambient and the body vignette now run edge to edge with
   nothing sitting on top of them. */
.bg-panel { background: none; border-block: 0; }
.bg-panel::after { display: none; }          /* the sheen belonged to the band */
.bg-radial { background: none; }
.bg-dots::before { display: none; }
.marquee { background: none; border-block: 0; }

/* ---- V17.2 The hero backdrops must dissolve, not end --------------------
   Same fault as the section backgrounds, one layer up. Both hero backdrops
   finish their overlay on `var(--obsidian) 100%`, i.e. fully opaque black,
   and that opaque plate covers the fixed page grid for the hero's whole
   height. Where the hero ends, the grid reappears in one step and the join
   above the marquee reads as a hard line.

   Masking the backdrop itself fades the photo AND its darkening overlay out
   together, so the hero resolves into the page surface instead of stopping
   on an edge. The hero's content sits in .wrap at z-index 2, outside the
   masked element, so nothing readable is touched. */
.hero__bg,
.pagehero--img .pagehero__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 92%);
}
/* The hero also clips a second thing. .hero has overflow: hidden, and the
   feature banner casts `0 60px 120px -70px rgba(0,0,0,0.9)` downward, so the
   bottom of that shadow was being sliced off flat on the hero's edge. On a
   near-black page the shadow buys nothing except the cut, so it goes.
   Bisected by hiding one element at a time: .hero -> step 0, .hero__bg -> 1,
   .herobanner -> 1. Two contributors, one each. */
.herobanner { box-shadow: none; }

/* ---- V18.1 Rate change: the calculator bar follows the numbers -----------
   Champagne moved from a 30% member discount to 20%, so the saving on a
   $10,000 published rate is $2,000, not $3,000. The bar is a picture of that
   split and has to carry the same proportion, or the graphic contradicts the
   figures printed directly beneath it. 70/30 -> 80/20. */
.margin__cost { flex: 0 0 80%; }
.paypanel.in .margin__profit { flex-basis: 20%; }

/* ---- V20.1 Three cards, not two ----------------------------------------
   The card line is Black / Platinum / Champagne everywhere. Two containers
   were built for a pair and now hold three: the nav dropdown's card row and
   the Services page card blocks. Both go to a three-column grid, and the
   dropdown items go compact because the panel stays 600px wide.          */
.nav__drop-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav__drop-cards .dropitem { padding: 11px 10px; gap: 10px; }
.nav__drop-cards .dropitem__ico { width: 30px; height: 30px; flex: 0 0 30px; }
.nav__drop-cards .dropitem b { font-size: 0.86rem; }
.nav__drop-cards .dropitem small { font-size: 0.7rem; letter-spacing: var(--tr-name); white-space: nowrap; }
@media (max-width: 760px) { .nav__drop-cards { grid-template-columns: 1fr; } }

.cardsvc-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; }
.cardsvc-3 .cardsvc__card { max-width: 100%; }
@media (max-width: 1040px) { .cardsvc-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .cardsvc-3 { grid-template-columns: 1fr; } }

/* The card detail pages run a two-up perk grid and a 3-up number row. The
   number row inherits .statgrid's three columns, which is already right.  */
.cardhero__stage .memcard { max-width: 460px; }
@media (max-width: 860px) { .cardhero { grid-template-columns: 1fr; gap: 34px; } }

/* ---- V20.2 The application page -----------------------------------------
   The aside runs the same four-step flow as the card pages, but vertically
   in a narrow column: one row per step, number on the left, rail down the
   side. .flow's reveal timing and dot styling carry over untouched.      */
.flow--stack { grid-template-columns: 1fr; gap: 24px; }
.flow--stack .flow__line { top: 0; bottom: 0; left: 28px; right: auto; width: 1px; height: auto;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent); }
.flow--stack .flow__line::after { background: linear-gradient(180deg, var(--champagne), var(--platinum-hi));
  transform: scaleY(0); transform-origin: top; }
.flow--stack.in .flow__line::after { transform: scaleY(1); }
/* Same markup as the horizontal flow: dot, h3, p as three siblings. The dot
   spans both rows in column one so the copy keeps the full column two. */
.flow--stack .flow__step { display: grid; grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto; column-gap: 20px; text-align: left; padding: 0; align-items: start; }
.flow--stack .flow__dot { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; font-size: 0.9rem; }
.flow--stack .flow__step h3 { grid-column: 2; grid-row: 1; margin: 0.45em 0 0.35em; }
.flow--stack .flow__step p { grid-column: 2; grid-row: 2; }

/* Two panes share one form element; the hidden one must not be reachable. */
.form [data-pane][hidden] { display: none; }

/* ---- V21 One card moves, and it is the top one ---------------------------
   Until now the only ambient motion in the card line was the shimmer on the
   BLACK lettering: the entry tier moved, the invitation tier sat still.
   Motion is a signal, so it belongs on Champagne. Black keeps its foil, held
   still. Champagne gets three layers, all slow:
     1. light catching the metal, a band that crosses the face every 8s
     2. the lettering shimmers in a deep gold that stays legible on the light card
     3. a low warm glow that breathes, plus a 6px float
   The float uses the `translate` property, not `transform`, so it composes with
   the hover tilt main.js writes to style.transform instead of overriding it.
   The sweep animates background-position on a full-bleed layer, so no moving
   box edge can show.                                                        */

.memcard__tier.foil { animation: none; background-position: 30% 50%; }

.memcard--champagne { isolation: isolate;
  animation: champGlow 6s ease-in-out infinite, champFloat 7s ease-in-out infinite; }
.memcard--champagne::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 38%, rgba(255,250,236,0.0) 42%,
              rgba(255,250,236,0.75) 50%, rgba(255,250,236,0.0) 58%, transparent 62%);
  background-size: 300% 100%; background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  animation: champSweep 8s cubic-bezier(.45,.05,.35,1) infinite; }
.memcard--champagne .memcard__tier { position: relative; z-index: 2;
  background: linear-gradient(100deg, #3d311b 0%, #6e5a35 30%, #9c804c 48%, #6e5a35 66%, #3d311b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: champText 8s ease-in-out infinite; }

@keyframes champSweep { 0%, 62% { background-position: 130% 0; } 92%, 100% { background-position: -30% 0; } }
@keyframes champText  { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
@keyframes champFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes champGlow {
  0%, 100% { box-shadow: 0 34px 70px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(239,228,204,0.10), 0 18px 60px -24px rgba(212,197,170,0.18); }
  50%      { box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(239,228,204,0.22), 0 22px 80px -18px rgba(212,197,170,0.42); } }

/* the detail-page hero already floats with cardFloat; keep that, add the rest */
.cardhero__stage .memcard--champagne { animation: cardFloat 7s ease-in-out infinite, champGlow 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .memcard--champagne, .memcard--champagne::before, .memcard--champagne .memcard__tier,
  .cardhero__stage .memcard--champagne { animation: none; }
  .memcard--champagne .memcard__tier { background-position: 50% 0; }
}

/* ---- V21.1 In a tier column the card is joined to its panel --------------
   On partners.html the card sits flush on the tier body (square bottom
   corners). Floating it opens a 6px gap at that join, and a downward glow
   smears onto the panel. In that context the card stays put; the breathing
   glow moves to the whole Champagne column instead, so the join never moves. */
.tier .memcard--champagne { animation: none; }
.tier:has(> .memcard--champagne) { animation: champColumn 6s ease-in-out infinite; }
@keyframes champColumn {
  0%, 100% { border-color: rgba(212,197,170,0.16); box-shadow: 0 0 0 0 rgba(212,197,170,0); }
  50%      { border-color: rgba(212,197,170,0.42); box-shadow: 0 30px 90px -50px rgba(212,197,170,0.38); } }
@media (prefers-reduced-motion: reduce) { .tier:has(> .memcard--champagne) { animation: none; } }

/* ---- V24 Pre-launch: motion timing, form states -------------------------
   Reveals: half a second, no blur filter (costly to paint), short stagger,
   and anything on screen at load (.rv-now) appears at once. Hover responds
   within 0.18s on any element under the cursor.                            */
[data-reveal] { filter: none; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
[data-reveal].rv-now { transition: none !important; }
[data-reveal][data-delay="1"] { transition-delay: .05s; }
[data-reveal][data-delay="2"] { transition-delay: .1s; }
[data-reveal][data-delay="3"] { transition-delay: .15s; }
[data-reveal][data-delay="4"] { transition-delay: .15s; }
.flow.in .flow__step { transition-delay: calc(min(var(--i, 0), 3) * .08s); }
.flow.in .flow__dot { animation-delay: calc(min(var(--i, 0), 3) * .08s); }
@media (hover: hover) { *:hover { transition-duration: .18s !important; } }

/* honeypot: present for bots, invisible and unreachable for people */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* the form's error line */
.form-error { margin: 4px 0 2px; padding: 12px 16px; border: 1px solid rgba(232,140,120,0.45); border-radius: 10px;
  background: rgba(232,140,120,0.07); color: #f0c9bf; font-size: 0.95rem; line-height: 1.55; }
.form-error a { color: var(--champagne); text-decoration: underline; text-underline-offset: 3px; }
button[type=submit]:disabled { cursor: progress; }

/* ---- V24.1 Phones: 16px body copy, 44px tap targets -------------------- */
@media (max-width: 600px) {
  .hnode__label p, .flow__step p, .tier__list li, .rulecard p, .herobanner__cut p, .whyrow p,
  .chain__node p, .card p, .paypanel p, .cardperk__item p, .hstep p, .afeatc p, .whycard p, .hw p { font-size: 1rem; }
  .btn { min-height: 44px; }
  .nav__toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .footer-grid a, .footer-legal a { min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 15px 0; margin: -15px 0; }
}
@media (max-width: 860px) { .nav__links a { min-height: 44px; display: inline-flex; align-items: center; } }
/* testimonial dots stay 2px to the eye; the button is 44px tall. Negative margins
   keep the row exactly where it was. */
.tst__dot { height: 44px; margin: -21px 0; background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat; }
.tst__dot:hover { background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 2px no-repeat; }
.tst__dot i { inset: 21px auto 21px 0; }
@media (max-width: 860px) {
  .nav__logo { min-height: 44px; display: flex; align-items: center; }
  .nav__links a { min-width: 44px; justify-content: center; }
  .appx__item { min-height: 44px; }
  .breadcrumb a { min-width: 44px; text-align: center; }
}

/* ---- V24.2 Accessibility ---------------------------------------------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; border-radius: 999px;
  background: var(--bone); color: var(--obsidian); font-size: 0.85rem; transition: top .15s; }
.skip-link:focus { top: 12px; }
main { display: block; }
/* the "four reasons" rows dim to 0.7, not 0.4, so secondary text keeps 4.5:1 */
.whyeco__list.in .whyrow { opacity: 0.7; }
.whyeco__list.in .whyrow.active { opacity: 1; }
@media (max-width: 600px) { .cockpit__foot a { min-height: 44px; display: inline-flex; align-items: center; } }
/* The ambient glows are radial gradients that already fade to nothing; a 120px blur
   on three 60vw layers added almost nothing visible (max 15/255 on any pixel) and
   was the most expensive paint on the page. */
.fx-ambient b { filter: none; }

/* ---- V25: Privacy and Terms use the full content width -------------------
   Number and heading on the left, the text on the right, one rule between
   sections. List items keep the bold label inline with its sentence. */
.legal { max-width: none; }
.legal__meta { max-width: 820px; }
.legal__block { border-top: 1px solid var(--line); padding: 40px 0; }
.legal > .legal__block:last-of-type { border-bottom: 1px solid var(--line); }
.legal__block h2 { margin: 0 0 0.9em; }
.legal__block > :last-child { margin-bottom: 0; }
.legal__block p + p, .legal__block ul + p { margin-top: 1.1em; }
.legal li { display: block; position: relative; padding-left: 30px; }
.legal li::before { position: absolute; left: 0; top: 0; }
.legal li strong { color: var(--bone); font-weight: 500; }
@media (min-width: 900px) {
  .legal__block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; padding: 48px 0; }
  .legal__block h2 { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
  .legal__block > :not(h2) { grid-column: 2; }
  .legal__block > h2 + ul { margin-top: 0; }
  .legal__block > p + ul { margin-top: 1.1em; }
}