/* JR Capital — glass layer, shared with R&R Grandeur Properties.
   Load AFTER site.css:  <link rel="stylesheet" href="/assets/css/glass.css">
   Additive only: remove the link to roll back.

   Tokens are copied unchanged from R&R's glass.css; the selectors are mapped
   to JR's markup. Rules this layer keeps:
   - Glass only where something sits behind it (warm orbs).
   - Sections are white; ivory glass carries ink. Contrast stays AA.
   - Gold is a hairline and a glow, never a fill under body text.
   - No glass box on the hero.
   - No backdrop-filter support, or "reduce transparency" set → solid fallbacks. */

:root {
  --glass-navy: rgba(10, 26, 49, 0.58);
  --glass-navy-strong: rgba(10, 26, 49, 0.78);
  --glass-light: rgba(255, 255, 255, 0.55);
  --glass-light-strong: rgba(255, 255, 255, 0.72);
  --glass-edge-gold: rgba(201, 162, 39, 0.38);
  --glass-edge-white: rgba(255, 255, 255, 0.16);
  --glass-edge-light: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(18px) saturate(150%);
  --glass-radius: 18px;
  --glass-shadow: 0 18px 50px rgba(6, 14, 28, 0.28);
  --glass-shadow-light: 0 14px 40px rgba(14, 35, 64, 0.10);
}

/* ── Official logo (JR. | CAPITAL) ─────────────────────────────────── */
/* Same rules and sizes as R&R's logo, pointing at JR's file: the official
   artwork cut out onto a transparent background, white and gold, for the navy
   header and footer. The link keeps its aria-label, so screen readers and
   search still read "JR Capital". */
.brand {
  display: block; flex: none;
  width: 132px; height: 47px;               /* logo ratio 2.81 : 1 */
  background: url("/assets/logo.png") left center / contain no-repeat;
}
.brand > * {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.site-head .brand { margin-right: auto; transition: width 320ms var(--ease), height 320ms var(--ease); }
.site-head.is-solid .brand { width: 118px; height: 42px; }
.foot-brand .brand { width: 210px; height: 75px; background-image: url("/assets/logo-navy.png"); }
@media (max-width: 560px) {
  .brand, .site-head.is-solid .brand { width: 112px; height: 40px; }
}

/* ── Header: frosted navy once scrolled ────────────────────────────── */
.site-head.is-solid {
  background: var(--glass-navy-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 var(--glass-edge-gold), 0 10px 30px rgba(6, 14, 28, 0.22);
}
.head-cta { border-radius: 999px; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { border-radius: 999px; }
.btn-primary { box-shadow: 0 8px 24px rgba(201, 162, 39, 0.28); }

/* ── Light sections: warm orbs behind ivory glass ──────────────────── */
#growth, #invest { position: relative; overflow: hidden; isolation: isolate; }
#growth::before, #invest::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 8% 18%, rgba(201, 162, 39, 0.16), transparent 70%),
    radial-gradient(640px 420px at 92% 82%, rgba(14, 35, 64, 0.10), transparent 70%);
}

/* Card used by value steps, goals, strategies, standards, team, the investor
   form. On the cream chapters it is a solid white card (cream / white / navy
   theme); inside the navy chapters .band turns it to navy glass. */
.step, .goal, .strategy, .standard, .person, .invest-form {
  background: var(--white);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-light);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-light), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.step, .goal { padding: 24px 24px 26px; border-top: 2px solid var(--gold-ink); }
.strategy, .standard { padding: 26px 26px 28px; border-top: 2px solid var(--gold-ink); }
.person { padding: 32px 32px 34px; border-top: 2px solid var(--navy); }
.invest-form { padding: 32px 36px; }

.step:hover, .goal:hover, .strategy:hover, .standard:hover, .person:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(14, 35, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Former navy sections: three-part glow, now in the light colours ─ */
#offering, .band { position: relative; overflow: hidden; isolation: isolate; }
#offering::before, .band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 480px at 12% 8%, rgba(201, 162, 39, 0.16), transparent 70%),
    radial-gradient(800px 560px at 90% 60%, rgba(14, 35, 64, 0.10), transparent 70%),
    radial-gradient(600px 400px at 40% 100%, rgba(201, 162, 39, 0.08), transparent 70%);
}
/* Glows fade out at each section's edge, so white sections run together. */
#growth::before, #invest::before, #offering::before, .band::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}

.trait {
  padding: 24px 24px 26px;
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-light);
  border-radius: 22px;
  box-shadow: var(--glass-shadow-light), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}
.trait:hover { transform: translateY(-6px); border-color: var(--glass-edge-gold); }

/* Cards inside the former navy chapters: light glass, with a gold top edge. */
.band :is(.step, .goal, .strategy, .standard, .person) {
  background: var(--glass-light);
  border-color: var(--glass-edge-light);
  border-top: 2px solid var(--gold);
  box-shadow: var(--glass-shadow-light), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.band :is(.step, .goal, .strategy, .standard, .person):hover {
  border-color: var(--glass-edge-gold); border-top-color: var(--gold);
  box-shadow: 0 22px 50px rgba(14, 35, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Platform and table: rounded imagery, glass table ──────────────── */
[data-arms] { border-radius: var(--glass-radius); overflow: hidden; }
.table tbody tr:hover { background: rgba(14, 35, 64, 0.03); }

/* Platform panels show their images in true colour: no darkening and no navy
   tint. Captions are ink on a soft white fade at the left edge (no box), so
   they read on the light illustrations and on the construction photo. */
[data-arm] [data-arm-img], [data-arm].is-active [data-arm-img] { filter: none; }
[data-arm] [data-arm-scrim] {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 55%);
}
[data-arm]:not(.is-active) [data-arm-scrim] { background: none; }
[data-arm].is-active { background: none; }
[data-arm] h4, [data-arm] [data-arm-body] p { color: var(--ink); }
[data-arm] [data-arm-n], [data-arm].is-passed [data-arm-n], [data-arm].is-active [data-arm-n] { color: var(--navy); }
[data-arm-t]::after { background: var(--navy); }
/* Phones: the image gets its own strip and the caption sits below it. */
@media (max-width: 760px) {
  [data-arm] { padding: 0 20px 24px !important; }
  [data-arm] [data-arm-img] { position: relative !important; inset: auto !important; order: -1; aspect-ratio: 18 / 7; margin: 0 -20px 14px; }
  [data-arm] [data-arm-scrim], [data-arm]:not(.is-active) [data-arm-scrim] { display: none; }
}

/* ── Dark colour theme (CMS option): cards turn to navy glass ──────── */
:root[data-theme="dark"] :is(.step, .goal, .strategy, .standard, .person, .invest-form) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-edge-white);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Mobile: lighter blur, tighter cards ───────────────────────────── */
@media (max-width: 940px) {
  .trait, .person, .invest-form { border-radius: 18px; }
}
@media (max-width: 560px) {
  :root { --glass-blur: blur(12px) saturate(140%); }
  .person, .invest-form { padding: 24px; }
}

/* ── Fallbacks ─────────────────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head.is-solid { background: var(--navy); }
  .step, .goal, .strategy, .standard, .person, .invest-form { background: var(--white); }
  .trait, .band :is(.step, .goal, .strategy, .standard, .person) { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-head.is-solid { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .step, .goal, .strategy, .standard, .person, .invest-form { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step, .goal, .strategy, .standard, .person, .trait { transition: none; }
  .step:hover, .goal:hover, .strategy:hover, .standard:hover, .person:hover, .trait:hover { transform: none; }
}