/* ==========================================================================
   Dr. Yulia Purba — Modern Asset funnel
   Visual DNA: 24-hour dial (the copy's "bergerak terus 24 jam") + a lecturer's
   red pen (35 tahun dosen). Navy / gold / ivory derived from the eBook cover.
   ========================================================================== */

:root {
  /* colour */
  --ink: #081430;
  --navy: #0e2450;
  --navy-2: #173a72;
  --navy-glass: rgba(8, 20, 48, .78);
  --gold: #d6a840;
  --gold-hi: #f1d27a;
  --gold-deep: #7d5a14;
  --gold-grad: linear-gradient(100deg, #b7852a 0%, #f3d685 38%, #d6a840 62%, #a87a1f 100%);
  --ivory: #f6f0e3;
  --paper: #fdfaf3;
  --paper-edge: #e8dfcb;
  --pen: #c62032;
  --pen-bright: #ec4356;
  --text: #1a2134;
  --text-soft: #4a5368;
  --text-on-dark: #eef1f7;
  --text-on-dark-soft: #b9c3d8;
  --line-dark: rgba(214, 168, 64, .35);
  --line-light: rgba(14, 36, 80, .14);
  --focus: #ffcf4a;

  /* type */
  --f-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --f-body: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --f-ui: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --fs-body: clamp(1.07rem, .35vw + 1rem, 1.22rem);
  --fs-small: .92rem;
  --fs-label: .74rem;
  --fs-h3: clamp(1.3rem, 1vw + 1rem, 1.75rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.6rem);
  --fs-statement: clamp(2.1rem, 4vw + 1rem, 5.2rem);
  --lh-body: 1.68;
  --measure: 38rem;

  /* space & shape */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --wrap: 1240px;
  --sec-y: clamp(4.5rem, 8vw, 8.5rem);
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-paper: 0 1px 0 rgba(0,0,0,.04), 0 22px 50px -22px rgba(8, 20, 48, .45);
  --shadow-deep: 0 30px 70px -25px rgba(0, 0, 0, .7);
  --header-h: 72px;
  --bridge-lift: clamp(120px, 11vw, 160px);
  --bridge-pop: 90px;
  --arc-h: clamp(46px, 7.5vw, 112px);
  --builder-rise: 150px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text); background: var(--ink); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.05em; }
h1, h2, h3 { margin: 0; font-weight: 600; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--gold); color: var(--ink); padding: .7rem 1rem; font-family: var(--f-ui); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; position: relative; }

/* emphasis system: bold = key fact, .mark = core idea (gold/marker), em = inner voice */
.mark { background: linear-gradient(transparent 58%, rgba(214, 168, 64, .42) 58%, rgba(214, 168, 64, .42) 92%, transparent 92%); padding: 0 .04em; font-weight: 700; color: inherit; }
.on-dark .mark, .mark--gold { background: none; color: var(--gold-hi); font-weight: 700; }
.pen { color: var(--pen); }
.on-dark .pen { color: var(--pen-bright); }

/* ---------- labels / eyebrows ---------- */
.label {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.label::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.on-dark .label { color: var(--gold); }

/* ---------- tick ruler (motif divider: the dial's minute marks unrolled) ---------- */
.ticks {
  height: 14px; width: 100%;
  background:
    repeating-linear-gradient(90deg, var(--tick, var(--gold)) 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--tick, var(--gold)) 0 2px, transparent 2px 72px) bottom / 100% 14px no-repeat;
  opacity: .75;
}
.ticks--light { --tick: var(--navy); opacity: .35; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--gold-grad); --b-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.6rem; padding: 1rem 1.7rem; border: 0; border-radius: var(--radius);
  background: var(--b-bg); color: var(--b-fg); cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--f-ui); font-size: clamp(.92rem, .25vw + .86rem, 1.02rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
  box-shadow: 0 14px 30px -12px rgba(214, 168, 64, .65), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.1) brightness(1.04); box-shadow: 0 20px 36px -14px rgba(214, 168, 64, .8), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--block { width: 100%; }
.btn--navy { --b-bg: var(--navy); --b-fg: #fff; box-shadow: 0 14px 30px -14px rgba(8, 20, 48, .7); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--gold-hi); border: 1px solid var(--line-dark); box-shadow: none; }
.btn--wa { --b-bg: linear-gradient(100deg, #128c4a, #1fae5f); --b-fg: #fff; box-shadow: 0 14px 30px -14px rgba(18, 140, 74, .75); }
.cta-note { display: block; margin-top: .8rem; font-family: var(--f-ui); font-size: .82rem; letter-spacing: .04em; color: var(--text-soft); }
.on-dark .cta-note { color: var(--text-on-dark-soft); }
.text-link { font-family: var(--f-ui); font-weight: 700; color: var(--gold-hi); text-underline-offset: .25em; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(8, 20, 48, .82) 0%, rgba(8, 20, 48, .35) 70%, rgba(8, 20, 48, 0) 100%);
  transition: background .35s, box-shadow .35s, backdrop-filter .35s;
}
.site-header.is-solid, .site-header--solid { background: rgba(8, 20, 48, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-dark); }
.site-header--solid { background: var(--ink); box-shadow: 0 1px 0 rgba(214, 168, 64, .5); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; min-width: 0; }
.brand svg { width: 42px; height: 42px; color: var(--gold); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name { font-family: var(--f-display); font-size: 1.28rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.brand__desc { font-family: var(--f-ui); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .28rem; white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav a:not(.btn) { font-family: var(--f-ui); font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; color: var(--text-on-dark); opacity: .85; }
.nav a:not(.btn):hover { opacity: 1; color: var(--gold-hi); }
.nav .btn { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .8rem; }

/* ---------- dial graphic ---------- */
.dial { position: absolute; pointer-events: none; color: var(--gold); }
.dial img { width: 100%; height: 100%; max-width: none; }
.dial--spin img { animation: dial-spin 240s linear infinite; }
@keyframes dial-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   OPT-IN — HERO
   ========================================================================== */
.hero {
  --rise: 2.6rem;                       /* how far her head rises into the support line */
  --gap-x: 64%;                         /* where her head sits across the wrap */
  --gap-w: clamp(220px, 21vw, 310px);   /* space the support line leaves for her head */
  position: relative; isolation: isolate; color: var(--text-on-dark);
  padding-top: var(--header-h); overflow: hidden;
  background: radial-gradient(110% 80% at 70% 45%, #1d4384 0%, #0e2450 40%, #081430 80%);
}
.hero__scene { position: absolute; inset: 0; z-index: -3; }
.hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: .7; }
/* soft stage light: two beams from above + a glow behind her */
.hero__scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(38% 70% at 22% -12%, rgba(241, 210, 122, .2), transparent 70%),
              radial-gradient(34% 64% at 82% -10%, rgba(150, 190, 255, .18), transparent 70%),
              radial-gradient(30% 38% at var(--gap-x) 58%, rgba(214, 168, 64, .2), transparent 72%); }
.hero__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, .9) 0%, rgba(8, 20, 48, .62) 30%, rgba(8, 20, 48, .3) 58%, rgba(8, 20, 48, .85) 100%), linear-gradient(90deg, rgba(8, 20, 48, .7) 0%, rgba(8, 20, 48, .25) 48%, rgba(8, 20, 48, 0) 70%); }

.hero__poster { position: relative; z-index: 3; text-align: center; padding-top: clamp(1.6rem, 4.5vh, 3.2rem); }
.hero__tag { position: relative; display: inline-block; margin-top: .6rem; margin-bottom: clamp(1.2rem, 3vh, 2rem); transform: rotate(-1deg); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.hero__clip { position: absolute; z-index: 1; left: .55rem; top: -1.5rem; width: 1.35rem; height: 3.6rem; transform: rotate(-6deg); overflow: visible; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .45)); }
.hero__eyebrow {
  display: inline-block; position: relative; font-family: var(--f-ui); font-weight: 800; font-size: clamp(.72rem, .25vw + .66rem, .86rem); letter-spacing: .14em; text-transform: uppercase;
  color: #1b2a55; padding: .85rem 1.6rem .8rem 2.4rem; margin: 0;
  background-color: #f3e2a4;
  background-image:
    linear-gradient(90deg, transparent 1.35rem, rgba(198, 32, 50, .55) 1.35rem, rgba(198, 32, 50, .55) calc(1.35rem + 1.5px), transparent calc(1.35rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(1.1rem - 1px), rgba(40, 80, 160, .22) calc(1.1rem - 1px) 1.1rem),
    radial-gradient(120% 140% at 85% 20%, rgba(255, 250, 225, .55), transparent 60%),
    linear-gradient(180deg, rgba(120, 80, 10, .06), transparent 35%, transparent 70%, rgba(120, 80, 10, .1));
  background-position: 0 0, 0 .35rem, 0 0, 0 0;
  clip-path: polygon(0.0% 2px, 2.94% 1px, 5.88% 3px, 8.82% 5px, 11.76% 0px, 14.71% 0px, 17.65% 4px, 20.59% 0px, 23.53% 2px, 26.47% 4px, 29.41% 0px, 32.35% 4px, 35.29% 1px, 38.24% 0px, 41.18% 0px, 44.12% 3px, 47.06% 3px, 50.0% 0px, 52.94% 1px, 55.88% 0px, 58.82% 4px, 61.76% 3px, 64.71% 0px, 67.65% 4px, 70.59% 0px, 73.53% 1px, 76.47% 5px, 79.41% 5px, 82.35% 4px, 85.29% 0px, 88.24% 4px, 91.18% 4px, 94.12% 3px, 97.06% 0px, 100.0% 1px, 100.0% calc(100% - 0px), 97.06% calc(100% - 4px), 94.12% calc(100% - 1px), 91.18% calc(100% - 2px), 88.24% calc(100% - 3px), 85.29% calc(100% - 1px), 82.35% calc(100% - 4px), 79.41% calc(100% - 0px), 76.47% calc(100% - 4px), 73.53% calc(100% - 2px), 70.59% calc(100% - 4px), 67.65% calc(100% - 5px), 64.71% calc(100% - 1px), 61.76% calc(100% - 0px), 58.82% calc(100% - 4px), 55.88% calc(100% - 4px), 52.94% calc(100% - 5px), 50.0% calc(100% - 1px), 47.06% calc(100% - 2px), 44.12% calc(100% - 0px), 41.18% calc(100% - 4px), 38.24% calc(100% - 5px), 35.29% calc(100% - 0px), 32.35% calc(100% - 4px), 29.41% calc(100% - 0px), 26.47% calc(100% - 4px), 23.53% calc(100% - 1px), 20.59% calc(100% - 3px), 17.65% calc(100% - 5px), 14.71% calc(100% - 4px), 11.76% calc(100% - 3px), 8.82% calc(100% - 2px), 5.88% calc(100% - 3px), 2.94% calc(100% - 4px), 0.0% calc(100% - 3px));
}
.hero h1 { margin: 0; font-family: var(--f-ui); font-weight: 900; line-height: 1; }
.h1__setup { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(.82rem, 1vw + .5rem, 1.4rem); color: var(--text-on-dark); margin-bottom: .7rem; padding-left: .3em; }
.h1__main {
  display: block; font-stretch: 74%; text-transform: uppercase; letter-spacing: .005em; line-height: .9; white-space: nowrap;
  font-size: clamp(2.7rem, 6.5vw, 6.3rem);
  color: #fff;
}
.h1__main .gold { color: #e9bf55; }
/* support line splits around her head, as one sentence */
.h1__support { display: grid; grid-template-columns: calc(var(--gap-x) - var(--gap-w) / 2) var(--gap-w) minmax(0, 1fr); align-items: baseline; margin-top: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: clamp(.8rem, .8vw + .5rem, 1.2rem); color: var(--text-on-dark); }
.h1__support-a { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem; white-space: nowrap; }
.h1__support-a > .t { order: 1; }
.h1__support-a::before { content: ""; flex: 1 1 auto; max-width: 34rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(214, 168, 64, 0), rgba(214, 168, 64, .7) 40%, var(--gold-hi)); }
.h1__support-a::after { content: ""; order: -1; flex: none; width: 7px; height: 7px; margin-left: -1.1rem; transform: rotate(45deg); background: var(--gold-hi); order: 0; }
.h1__support-b { grid-column: 3; text-align: left; padding-left: .26em; white-space: nowrap; }
.h1__support em { font-style: normal; color: var(--gold-hi); }

.hero__stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; min-height: clamp(500px, 60vh, 640px); }
.hero__copy { position: relative; z-index: 3; padding: clamp(1.4rem, 3.2vh, 2.4rem) 0 2.4rem; }
.hero__lede { max-width: 31rem; color: var(--text-on-dark-soft); font-size: clamp(1.05rem, .35vw + 1rem, 1.22rem); margin-bottom: 1.8rem; }
.hero__lede strong { color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.hero__cta .cta-note { margin: 0; }
.hero__offer { display: inline-flex; align-items: center; gap: 1.1rem; margin-top: 1.8rem; padding: .7rem 1.4rem .7rem .9rem; text-decoration: none; color: var(--text-on-dark);
  background: rgba(8, 20, 48, .6); border: 1px solid var(--line-dark); border-left: 3px solid var(--gold); border-radius: 4px; backdrop-filter: blur(6px); transition: border-color .25s, background .25s; }
.hero__offer:hover { background: rgba(14, 36, 80, .8); border-color: var(--gold); }
.hero__offer img { width: 66px; flex: none; transform: rotate(-6deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.hero__offer-text { display: grid; gap: .15rem; line-height: 1.25; }
.hero__offer-text b { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.hero__offer-text span { font-family: var(--f-display); font-size: 1.05rem; }
.hero__offer-text em { font-family: var(--f-display); font-size: .95rem; color: var(--text-on-dark-soft); }
.hero__note { position: relative; display: inline-block; margin: 1.5rem 0 0 1.4rem; font-family: var(--f-hand); font-weight: 700; font-size: clamp(1.6rem, 1vw + 1.1rem, 2.05rem); line-height: 1; color: var(--gold-hi); transform: rotate(-4deg); }
.hero__note svg { position: absolute; left: calc(100% + .4rem); top: -2.6rem; width: clamp(200px, 19vw, 280px); height: auto; color: var(--gold-hi); overflow: visible; }
.hero__note-line { stroke-dasharray: 360; stroke-dashoffset: 360; animation: note-draw 1.4s var(--ease) .8s forwards; }
@keyframes note-draw { to { stroke-dashoffset: 0; } }
.hero__figure { position: relative; align-self: stretch; z-index: 2; }
.hero__figbox { position: absolute; left: 38%; bottom: 0; height: calc(100% + var(--rise)); aspect-ratio: 1065 / 1427; transform: translateX(-50%); }
.hero__figbox .dial { width: 96%; aspect-ratio: 1; left: 2%; top: 3%; opacity: .45; }
.hero__portrait { position: relative; display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); }
.nameplate {
  position: absolute; z-index: 3; right: -2%; bottom: 12%;
  background: var(--navy-glass); backdrop-filter: blur(8px); border-left: 3px solid var(--gold);
  padding: .85rem 1.1rem; max-width: 15.5rem;
}
.nameplate b { display: block; font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; color: #fff; line-height: 1.1; }
.nameplate span { display: block; margin-top: .35rem; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); line-height: 1.45; }

.cred-strip { position: relative; z-index: 4; background: rgba(5, 13, 32, .86); backdrop-filter: blur(10px); border-top: 1px solid var(--line-dark); }
.cred-strip ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.cred-strip li { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem; min-height: 92px; border-left: 1px solid rgba(214, 168, 64, .18); }
.cred-strip li:first-child { border-left: 0; padding-left: 0; }
.cred-strip b { font-family: var(--f-display); font-size: clamp(1.6rem, 1.4vw + 1rem, 2.3rem); font-weight: 600; color: var(--gold-hi); line-height: 1; white-space: nowrap; }
.cred-strip span { font-family: var(--f-ui); font-size: .8rem; line-height: 1.4; color: var(--text-on-dark-soft); letter-spacing: .02em; }

/* shared: arc seam — the ivory section ends on a curved horizon in the next section's navy */
.arc-seam::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--arc-h); z-index: 4; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100V70Q720 -30 1440 70V100Z' fill='%23081430'/><path d='M0 70Q720 -30 1440 70' fill='none' stroke='%23d6a840' stroke-width='1.6' vector-effect='non-scaling-stroke'/><path d='M0 80Q720 -20 1440 80' fill='none' stroke='%23d6a840' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") center bottom / 100% 100% no-repeat; }

/* shared: photographic background layer + red rubber stamp */
.bg-photo { position: absolute; inset: 0; z-index: -2; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; }
.stamp {
  position: absolute; z-index: 2; display: grid; place-items: center; text-align: center;
  width: 9.2rem; height: 9.2rem; border-radius: 50%; color: var(--pen); border: 3px double currentColor;
  font-family: var(--f-ui); text-transform: uppercase; transform: rotate(-12deg); background: rgba(253, 250, 243, .82);
  box-shadow: 0 0 0 6px rgba(253, 250, 243, .82);
}
.stamp b { display: block; font-size: 1.7rem; font-weight: 900; letter-spacing: .06em; line-height: 1; }
.stamp span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin-top: .3rem; }

/* ==========================================================================
   INSIDE THE EBOOK — the book at the centre of the 24-hour dial,
   eight points set around it like hour markers
   ========================================================================== */
.inside { position: relative; isolation: isolate; background: var(--ivory); padding: var(--sec-y) 0 calc(var(--sec-y) * .6 + var(--bridge-lift) + var(--bridge-pop)); overflow: hidden; }
.inside .bg-photo img { opacity: .32; object-position: center 30%; }
.inside .bg-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 60% at 50% 58%, rgba(246, 240, 227, .97) 0%, rgba(246, 240, 227, .9) 55%, rgba(246, 240, 227, .6) 100%); }
.inside__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.inside__head .label::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.inside h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 3.6vw + 1rem, 4.6rem); line-height: 1; color: var(--navy); margin-top: .8rem; }
.inside h2 em { position: relative; display: inline-block; color: var(--pen); }
.pen-line { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .38em; color: var(--pen); overflow: visible; }
.pen-line path { stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.is-in .pen-line path, .no-js .pen-line path { stroke-dashoffset: 0; }

.inside__orbit { --core: clamp(340px, 32vw, 440px); position: relative; min-height: calc(var(--core) * 1.42); }
.inside__core { position: absolute; left: 50%; top: calc(50% + var(--core) * .17); width: var(--core); aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); }
.inside__core .disc { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1d4384 0%, var(--navy) 55%, var(--ink) 100%); box-shadow: 0 34px 60px -26px rgba(8, 20, 48, .65), 0 0 0 10px rgba(214, 168, 64, .16); }
.inside__core .dial { inset: 0; width: 100%; height: 100%; opacity: .95; }
.inside__core .book { position: absolute; z-index: 1; left: 50%; bottom: 4%; width: 80%; max-width: none; transform: translateX(-50%) rotate(-5deg); filter: drop-shadow(0 36px 34px rgba(8, 20, 48, .55)) drop-shadow(0 6px 10px rgba(8, 20, 48, .25)); }
.inside__core .stamp { right: 5%; bottom: 3%; width: 6.6rem; height: 6.6rem; }
.inside__core .stamp b { font-size: 1.3rem; } .inside__core .stamp span span { font-size: .58rem; }

.inside__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: calc(var(--core) + 4.5rem); row-gap: 1.4rem; align-items: center; }
.inside__list li { --reach: 2.6rem; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .95rem; align-items: start; padding: 1.15rem 1.3rem; background: rgba(253, 250, 243, .94); border: 1px solid var(--paper-edge); border-radius: 3px; box-shadow: 0 14px 30px -22px rgba(8, 20, 48, .45); font-size: clamp(1rem, .2vw + .95rem, 1.08rem); line-height: 1.55; }
.inside__list p { margin: 0; }
.inside__list strong { color: var(--navy); }
.hour { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--gold-deep); background: var(--ivory); font-family: var(--f-ui); font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--navy); }
/* connectors toward the dial: left column points right, right column points left */
.inside__list li::after { content: ""; position: absolute; top: 2.45rem; width: var(--reach); height: 9px; pointer-events: none; }
.inside__list li:nth-child(-n+4) { grid-template-columns: minmax(0, 1fr) auto; }
.inside__list li:nth-child(-n+4) .hour { order: 2; }
.inside__list li:nth-child(-n+4)::after { left: 100%; background: radial-gradient(circle, var(--gold) 3px, transparent 3.6px) right center / 9px 9px no-repeat, linear-gradient(var(--gold-deep), var(--gold-deep)) left center / calc(100% - 6px) 1px no-repeat; }
.inside__list li:nth-child(n+5)::after { right: 100%; background: radial-gradient(circle, var(--gold) 3px, transparent 3.6px) left center / 9px 9px no-repeat, linear-gradient(var(--gold-deep), var(--gold-deep)) right center / calc(100% - 6px) 1px no-repeat; }
/* middle markers sit closer to the circle so each column follows its curve */
.inside__list li:nth-child(2), .inside__list li:nth-child(3) { --reach: 1.4rem; transform: translateX(1.8rem); }
.inside__list li:nth-child(6), .inside__list li:nth-child(7) { --reach: 1.4rem; transform: translateX(-1.8rem); }
.inside__more { display: flex; justify-content: center; align-items: flex-end; gap: .4rem; margin: clamp(1.5rem, 3vw, 2.4rem) 0 0; font-family: var(--f-hand); font-size: clamp(1.7rem, 1vw + 1.3rem, 2.2rem); color: var(--pen); line-height: 1; }
.inside__more em { font-style: normal; font-weight: 700; transform: rotate(-2deg); }
.inside__more svg { width: 52px; height: 36px; }
.hand-note { font-family: var(--f-hand); font-weight: 700; color: var(--pen); line-height: 1.1; }

/* ==========================================================================
   OPT-IN FORM
   ========================================================================== */
.value { display: inline-flex; align-items: baseline; gap: .6rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); color: var(--gold-hi); }
.value s { color: var(--text-on-dark-soft); text-decoration-color: var(--pen-bright); text-decoration-thickness: 2px; }
/* the form card straddles the seam between the eBook points and the 24-jam band */
.bridge { position: relative; z-index: 5; margin: calc(-1 * var(--bridge-lift)) 0; background: linear-gradient(180deg, transparent 0, transparent var(--bridge-lift), var(--navy) var(--bridge-lift), var(--navy) calc(100% - var(--bridge-lift)), transparent calc(100% - var(--bridge-lift))); }
.bridge__card { --cover-w: clamp(200px, 19vw, 262px); position: relative; color: var(--text-on-dark); background: linear-gradient(135deg, #12306a 0%, var(--navy) 38%, var(--ink) 100%); border: 1px solid rgba(214, 168, 64, .45); border-radius: 14px; box-shadow: 0 44px 80px -34px rgba(8, 20, 48, .85); padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.6rem) clamp(1.6rem, 2.6vw, 2.2rem) calc(var(--cover-w) + clamp(2.6rem, 4.5vw, 4.4rem)); }
.bridge__card::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 3px; border-radius: 3px; background: var(--gold-grad); }
.bridge__deco { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bridge__glow { position: absolute; left: -6%; top: -10%; width: 52%; height: 130%; background: radial-gradient(closest-side, rgba(214, 168, 64, .32), rgba(214, 168, 64, .08) 60%, transparent); }
.bridge__deco .dial { right: -140px; top: -150px; width: 420px; aspect-ratio: 1; opacity: .14; }
.bridge__cover { position: absolute; left: clamp(1.2rem, 2.6vw, 2.4rem); bottom: clamp(1.4rem, 2.4vw, 2rem); width: var(--cover-w); margin: 0; z-index: 1; }
.bridge__cover img { width: 100%; border-radius: 3px; transform: rotate(-4deg); box-shadow: -18px 30px 44px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }
.bridge__body { position: relative; z-index: 1; }
.bridge h2 { font-family: var(--f-ui); font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 2.4vw + .9rem, 3.3rem); line-height: .95; margin: .7rem 0 .45rem; }
.bridge h2 .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bridge__sub { font-family: var(--f-display); font-size: clamp(1.1rem, .6vw + 1rem, 1.4rem); color: var(--text-on-dark); margin: 0 0 1.4rem; }
.bridge__sub em { color: var(--gold-hi); }
.bridge__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 15.5rem); gap: .8rem; align-items: start; }
.bridge .field { margin: 0; }
.bridge .field label { font-size: .8rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: .4rem; }
.field__box { position: relative; display: block; }
.field__box svg { position: absolute; left: .85rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); color: #7a8399; pointer-events: none; }
.bridge .field__box input { padding-left: 2.7rem; }
.bridge .field__error { color: #ffb3bc; }
.bridge .field input[aria-invalid="true"] { border-color: var(--pen-bright); }
.bridge__submit { margin-top: calc(.72rem * 1.2 + .4rem); }
.bridge__submit .btn { min-height: 3.35rem; padding: .7rem 1rem; font-size: .84rem; letter-spacing: .04em; }
.bridge .form-consent { color: var(--text-on-dark-soft); margin-top: 1rem; }
.bridge .form-status[data-tone="error"] { background: rgba(236, 67, 86, .14); color: #ffd2d8; }
.bridge .form-status[data-tone="info"] { background: rgba(214, 168, 64, .14); color: var(--gold-hi); border-left-color: var(--gold); }

.field { margin-bottom: 1.05rem; }
.field label { display: block; font-family: var(--f-ui); font-size: .88rem; font-weight: 700; letter-spacing: .02em; color: var(--navy); margin-bottom: .4rem; }
.field input {
  width: 100%; min-height: 3.35rem; padding: .8rem 1rem; font: 500 1.05rem/1.3 var(--f-ui); color: var(--text);
  background: #fff; border: 1.5px solid #c9cfdb; border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #8a92a5; }
.field input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px rgba(23, 58, 114, .16); }
.field input[aria-invalid="true"] { border-color: var(--pen); box-shadow: 0 0 0 3px rgba(198, 32, 50, .12); }
.field__error { display: block; min-height: 0; font-family: var(--f-ui); font-size: .84rem; font-weight: 600; color: var(--pen); margin-top: .35rem; }
.field__error:empty { display: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--f-ui); font-size: .92rem; font-weight: 600; margin: .9rem 0 0; padding: .75rem .9rem; border-radius: var(--radius); }
.form-status:empty { display: none; }
.form-status[data-tone="error"] { background: #fdecee; color: #8c1222; border-left: 3px solid var(--pen); }
.form-status[data-tone="info"] { background: #eef3fb; color: var(--navy); border-left: 3px solid var(--navy-2); }
.form-consent { font-size: .86rem; line-height: 1.55; color: var(--text-soft); margin: 1rem 0 0; font-style: italic; }
.btn[aria-busy="true"] { cursor: progress; filter: saturate(.7); transform: none; }
.btn .spinner { display: none; width: 1.1em; height: 1.1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   24 JAM statement
   ========================================================================== */
.clock-band { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); padding: calc(var(--sec-y) * .7 + var(--bridge-lift)) 0 calc(var(--sec-y) * .8); overflow: hidden; }
.clock-band .bg-photo img { opacity: .35; }
.clock-band .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0%, rgba(8, 20, 48, .7) 40%, rgba(8, 20, 48, .95) 100%); }
.clock-band__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.big-dial { position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; margin-inline: auto; }
.big-dial svg { width: 100%; height: 100%; overflow: visible; }
.big-dial__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.big-dial__center b { font-family: var(--f-display); font-weight: 600; font-size: clamp(4.2rem, 7vw, 7.5rem); line-height: .85; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-dial__center span { font-family: var(--f-ui); font-size: .82rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-top: .5rem; }
.dial-label { font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--text-on-dark); }
.statement { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 2.6vw + 1rem, 3.6rem); line-height: 1.08; margin-bottom: 1.5rem; }
.statement em { color: var(--gold-hi); }
.statement .moments { display: flex; flex-wrap: wrap; gap: .1em .5em; font-style: italic; color: var(--gold-hi); }
.sub-statement { font-family: var(--f-display); font-size: clamp(1.2rem, .8vw + 1rem, 1.55rem); line-height: 1.4; color: var(--text-on-dark); max-width: 36rem; border-left: 2px solid var(--pen-bright); padding-left: 1.2rem; margin-bottom: 2rem; }

.ticker { position: relative; background: var(--gold-grad); color: var(--ink); overflow: hidden; padding: .95rem 0; }
.ticker__track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li { display: flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font-family: var(--f-ui); font-stretch: 85%; font-weight: 800; font-size: clamp(.95rem, .6vw + .8rem, 1.2rem); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: ""; width: .5rem; height: .5rem; border: 2px solid currentColor; border-radius: 50%; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   STORY
   ========================================================================== */
.story-open { position: relative; isolation: isolate; background: var(--ivory); padding: var(--sec-y) 0 0; overflow: hidden; }
.story-open .story-text { padding-bottom: calc(var(--sec-y) * .55); }
.story-band { position: relative; z-index: 3; color: var(--text-on-dark); background: linear-gradient(100deg, var(--ink) 0%, var(--navy) 55%, #12306a 100%); padding: clamp(2.4rem, 4vw, 3.4rem) 0 clamp(2.4rem, 4vw, 3.2rem); box-shadow: 0 -22px 40px -26px rgba(8, 20, 48, .55); }
.story-band > .ticks { position: absolute; left: 0; right: 0; top: -7px; }
/* father's workshop (IMG-004) behind the "8": left half, melting into the band's navy */
.story-band__scene { right: 38%; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%); }
.story-open .story-band .story-band__scene img { opacity: .6; object-position: 30% 62%; }
.story-open .story-band .story-band__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 48, .25) 0%, rgba(8, 20, 48, .55) 60%, rgba(8, 20, 48, .8) 100%), linear-gradient(180deg, rgba(8, 20, 48, .35), rgba(8, 20, 48, .1) 40%, rgba(8, 20, 48, .45)); }
.story-band__inner { display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); column-gap: clamp(2rem, 4vw, 4rem); }
.story-band__quote, .story-band__after { grid-column: 2; }
.story-band__fact { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: end; display: flex; align-items: center; gap: 1.2rem; margin: 0; padding-right: clamp(1rem, 3vw, 3rem); position: relative; z-index: 1; }
.story-band__fact b { font-family: var(--f-display); font-weight: 600; font-size: clamp(5rem, 8vw, 8.6rem); line-height: .8; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story-band__fact span { max-width: 13.5rem; font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .14em; line-height: 1.55; text-transform: uppercase; color: var(--text-on-dark); border-left: 1px solid var(--line-dark); padding-left: 1.2rem; }
.story-band__quote { margin: 0; padding-left: 1.6rem; border-left: 3px solid var(--pen-bright); }
.story-band__quote p { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 2vw + 1rem, 2.7rem); line-height: 1.14; color: #fff; }
.story-band__quote strong { font-weight: 600; }
.story-band__quote cite { display: block; margin-top: .8rem; font-family: var(--f-ui); font-style: normal; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.story-band__after { margin: 1.3rem 0 0; padding-left: calc(1.6rem + 3px); font-family: var(--f-display); font-size: clamp(1.1rem, .5vw + 1rem, 1.35rem); color: var(--text-on-dark-soft); }
.story-open .bg-photo img { opacity: .42; object-position: center 20%; }
.story-open .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 240, 227, .15) 0%, rgba(246, 240, 227, .55) 40%, rgba(246, 240, 227, .96) 58%), linear-gradient(0deg, var(--ivory) 0%, transparent 30%); }
.story-open__grid { display: grid; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.story-open .story-text { padding-top: clamp(.5rem, 2vw, 2rem); }
.story-portrait { position: relative; align-self: stretch; min-height: min(830px, calc(66vw - 60px)); }
.story-figure { position: absolute; z-index: 1; left: 50%; bottom: calc(-1 * var(--tuck, 130px)); width: min(122%, 640px); aspect-ratio: 954 / 1500; transform: translateX(-52%); }
.story-figure .ring { position: absolute; left: 50%; top: 3%; width: 82%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1d4384 0%, var(--navy) 60%, var(--ink) 100%); box-shadow: 0 0 0 10px rgba(214, 168, 64, .22); }
.story-figure .dial { width: 98%; aspect-ratio: 1; left: 1%; top: -5.5%; opacity: .95; }
.story-figure > img { position: relative; display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(-14px 0 30px rgba(8, 20, 48, .18)); }
.story-open h2 { margin: .7rem 0 1rem; line-height: 1; }
.who__lead { display: block; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.1vw + 1rem, 2.1rem); color: var(--text-soft); margin-bottom: .4rem; }
.who__name { display: block; font-family: var(--f-ui); font-stretch: 74%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.9rem, 4.4vw + .5rem, 5.6rem); line-height: .9; letter-spacing: -.005em; color: var(--gold-deep); background: linear-gradient(100deg, #5f430c 0%, #8f6a1a 38%, #a57b25 55%, #6e4e0f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.designation { font-family: var(--f-ui); font-size: clamp(.82rem, .3vw + .75rem, .98rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); padding: .9rem 0; border-block: 1px solid rgba(156, 115, 32, .35); margin-bottom: 1.8rem; }
.designation em { font-style: normal; color: var(--navy); }
.story-text { max-width: var(--measure); }
.story-text--wide { max-width: 44rem; }

/* lecturer era — documentary prints */
.lecturer { position: relative; isolation: isolate; background: var(--ivory); padding: calc(var(--sec-y) * .55) 0 calc(var(--arc-h) + 3rem); overflow: hidden; }
.lecturer__grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bignum { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.4rem; }
.bignum b { font-family: var(--f-display); font-weight: 600; font-size: clamp(5.5rem, 10vw, 10rem); line-height: .8; color: var(--navy); letter-spacing: -.03em; }
.bignum b sup { font-size: .45em; color: var(--pen); vertical-align: top; position: relative; top: .1em; }
.bignum span { font-family: var(--f-ui); font-weight: 700; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); padding-bottom: .6rem; line-height: 1.5; }
.prints { position: relative; min-height: 440px; }
.print { position: absolute; background: #fff; padding: .7rem .7rem 2.6rem; box-shadow: 0 18px 40px -18px rgba(8, 20, 48, .55); margin: 0; }
.print img { width: 100%; height: 100%; object-fit: cover; }
.print figcaption { position: absolute; left: .9rem; right: .9rem; bottom: .55rem; font-family: var(--f-hand); font-size: 1.35rem; color: var(--navy); line-height: 1.1; }
.print::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(214, 168, 64, .5); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.print--a { width: 33%; aspect-ratio: 3 / 4; left: 0; top: 40px; transform: rotate(-4deg); z-index: 1; }
.print--b { width: 46%; aspect-ratio: 14 / 10; left: 26%; top: 0; transform: rotate(2deg); z-index: 2; }
.print--c { width: 33%; aspect-ratio: 3 / 4; right: 0; top: 70px; transform: rotate(3deg); z-index: 3; }
.print--a img { object-position: center 70%; }

/* crisis — dusk scene, oversized statements */
.dusk { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem) 0 calc(var(--sec-y) * .6); overflow: hidden; }
.dusk .bg-photo { top: 8%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); }
.dusk .bg-photo img { opacity: .22; object-position: center 35%; }
.dusk .bg-photo::after { content: ""; position: absolute; inset: 0; background: rgba(8, 20, 48, .55); }
.dusk__count { display: grid; grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ledger { position: relative; list-style: none; margin: 0; padding: 1.5rem 1.9rem 1.1rem 3.6rem; color: var(--navy); border-radius: 3px; transform: rotate(1.2deg);
  background: linear-gradient(90deg, transparent 2.6rem, rgba(198, 32, 50, .38) 2.6rem, rgba(198, 32, 50, .38) calc(2.6rem + 1px), transparent calc(2.6rem + 1px)), var(--paper);
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .75), 0 0 0 1px rgba(214, 168, 64, .25); }
.ledger::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(214, 168, 64, .55); }
.ledger li { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(14, 36, 80, .14); font-family: var(--f-display); font-size: clamp(1.15rem, .7vw + 1rem, 1.45rem); }
.ledger li::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--gold-deep); background: conic-gradient(var(--gold-deep) var(--fill, 25%), transparent 0); }
.ledger li:nth-child(2) { --fill: 50%; } .ledger li:nth-child(3) { --fill: 75%; } .ledger li:nth-child(4) { --fill: 100%; }
.ledger li:last-child { border-bottom: 0; font-style: italic; font-weight: 600; color: var(--pen); font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
.ledger li:last-child::before { border-color: var(--pen); background: var(--pen); }
.dusk__fact { font-family: var(--f-display); font-size: clamp(1.35rem, 1vw + 1rem, 1.9rem); line-height: 1.35; }
.turn { text-align: center; padding: clamp(4rem, 9vw, 8rem) 0 0; }
.turn__lead { font-family: var(--f-ui); font-size: clamp(.82rem, .3vw + .76rem, .95rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 2.2rem; }
.turn__pair { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-statement); line-height: 1.02; letter-spacing: -.01em; margin-bottom: 2.4rem; }
.turn__pair span { display: block; }
.turn__pair .dim { color: var(--text-on-dark-soft); font-weight: 400; font-size: .62em; font-style: italic; margin-bottom: .3em; }
.turn__realize { max-width: 44rem; margin: 0 auto 1rem; font-size: clamp(1.15rem, .6vw + 1rem, 1.45rem); color: var(--text-on-dark-soft); }
.turn__asset { font-family: var(--f-ui); font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6.5vw + .5rem, 7.6rem); line-height: .9; letter-spacing: -.01em; margin: 0 0 1rem; }
.turn__asset .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(4rem, 8vw, 7rem); align-items: stretch; }
.q-card { position: relative; padding: 2rem 2rem 2.2rem; border: 1px solid var(--line-dark); background: rgba(8, 20, 48, .55); }
.q-card .label { margin-bottom: 1rem; }
.q-card blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.35rem, 1.1vw + 1rem, 2rem); line-height: 1.25; }
.struck { color: var(--text-on-dark-soft); background-image: linear-gradient(var(--pen-bright), var(--pen-bright)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 3px; transition: background-size 1.6s var(--ease) .3s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.is-in .struck, .no-js .struck { background-size: 100% 3px; }
.q-card--new { border-color: var(--gold); background: linear-gradient(160deg, rgba(214, 168, 64, .16), rgba(8, 20, 48, .6)); }
.q-card--new blockquote { color: #fff; }
.q-card .hand-note { position: absolute; right: 1.2rem; bottom: -1.1rem; font-size: 1.6rem; background: var(--ink); padding: 0 .5rem; color: var(--pen-bright); transform: rotate(-3deg); }
.questions__after { grid-column: 1 / -1; text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1vw + 1rem, 1.8rem); color: var(--gold-hi); margin: 1rem 0 0; }

/* digital learning + asset stack */
.digital { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); padding: var(--sec-y) 0; overflow: hidden; }
.digital .bg-photo img { opacity: .7; object-position: 85% center; }
.digital .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 20, 48, .25) 22%, rgba(8, 20, 48, .3) 70%, rgba(8, 20, 48, .9) 100%), linear-gradient(90deg, rgba(8, 20, 48, .82) 0%, rgba(8, 20, 48, .55) 45%, rgba(8, 20, 48, .2) 100%); }
.digital__grid { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.screens { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: .9rem; margin-top: 2rem; }
.screens figure { margin: 0; position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--line-dark); background: #000; }
.screens img { width: 100%; height: 100%; object-fit: cover; }
.screens figure:first-child { grid-row: span 2; }
.screens figure:first-child img { object-position: 30% center; }
.screens figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem; font-family: var(--f-ui); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.stack { list-style: none; margin: 1.5rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.stack li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem; margin-left: calc(var(--i) * 1.1rem); background: linear-gradient(90deg, rgba(23, 58, 114, .85), rgba(14, 36, 80, .55)); border-left: 3px solid var(--gold); font-family: var(--f-display); font-size: clamp(1.1rem, .7vw + .95rem, 1.4rem); }
.stack li span { font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.stack li.stack__last { margin-left: 0; background: linear-gradient(90deg, rgba(214, 168, 64, .25), rgba(14, 36, 80, .6)); display: block; font-style: italic; }
.stack--desc li { display: block; }
.stack--desc li span { display: block; margin-top: .25rem; font-family: var(--f-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--text-on-dark-soft); }
.stack__title { font-family: var(--f-ui); font-weight: 800; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

/* observation + mission */
.mission { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--navy); padding: var(--sec-y) 0 calc(var(--sec-y) + var(--builder-rise)); overflow: hidden; }
.mission .bg-photo img { opacity: .8; object-position: center 30%; }
.mission .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, .92) 0%, rgba(14, 36, 80, .5) 38%, rgba(14, 36, 80, .58) 62%, rgba(8, 20, 48, .9) 100%); }
.observe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); margin: 2rem 0 clamp(4rem, 8vw, 6rem); }
.observe p { margin: 0; padding: 1.8rem 1.6rem; background: rgba(8, 20, 48, .82); font-family: var(--f-display); font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); line-height: 1.4; }
.observe p strong { color: var(--gold-hi); font-weight: 600; }
.mission__head { text-align: center; max-width: 60rem; margin: 0 auto; }
.mission__lead { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1vw + 1rem, 1.8rem); color: var(--text-on-dark-soft); margin-bottom: 1.4rem; }
.mission__lead strong { color: var(--gold-hi); font-style: normal; }
.mission__statement { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 2.8vw + 1rem, 3.9rem); line-height: 1.1; margin-bottom: 2.5rem; text-wrap: balance; }
.mission__statement em { color: var(--gold-hi); }
.paths { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; list-style: none; margin: 0 auto 2.4rem; padding: 0; max-width: 62rem; }
.paths li { padding: .8rem 1.2rem; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(8, 20, 48, .7); font-family: var(--f-ui); font-size: .98rem; }
.paths li b { color: var(--gold-hi); font-weight: 700; }
.vehicle { text-align: center; max-width: 46rem; margin: 0 auto; font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); }
.vehicle p:first-child { color: var(--text-on-dark-soft); font-style: italic; }

/* identity: Modern Asset Builder */
.builder { position: relative; isolation: isolate; background: var(--ivory); padding: calc(var(--sec-y) * .6) 0 0; overflow: hidden; overflow-x: clip; overflow-y: visible; }
.builder .bg-photo { overflow: hidden; }
.builder .bg-photo img { opacity: .3; object-position: center 40%; }
.builder .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 240, 227, .97) 0%, rgba(246, 240, 227, .86) 52%, rgba(246, 240, 227, .3) 100%), linear-gradient(180deg, var(--ivory) 0%, transparent 25%); }
.builder__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
.builder__copy { padding-bottom: calc(var(--arc-h) + 2.2rem); }
.builder__copy > p { font-size: clamp(1rem, .2vw + .96rem, 1.1rem); margin-bottom: .7rem; }
.builder__title { display: block; font-family: var(--f-ui); font-stretch: 74%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 4.3vw + .4rem, 5.3rem); line-height: .88; color: var(--navy); margin: .4rem 0 .2rem; }
.builder__title span { display: block; color: var(--gold-deep); white-space: nowrap; }
.builder__copy > p.builder__before { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, .9vw + 1rem, 1.65rem); line-height: 1.35; color: var(--text-soft); max-width: 30rem; margin-bottom: 1.3rem; }
.builder__before .struck { color: var(--text-soft); font-style: italic; background-image: linear-gradient(var(--pen), var(--pen)); }
.builder__copy > p.builder__after { margin-bottom: 1.2rem; }
.builder__lead { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--f-ui); font-size: .82rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--pen); }
.builder__lead::before { content: ""; width: 2.2rem; height: 2px; background: var(--pen); }
.belief { font-family: var(--f-display); font-size: clamp(1.1rem, .45vw + 1rem, 1.32rem); line-height: 1.4; color: var(--navy); margin: 1.4rem 0; padding-left: 1.2rem; border-left: 3px solid var(--gold); }
.belief p { margin-bottom: .55rem; }
.belief strong { color: var(--pen); font-weight: 600; }
.note-card { position: relative; background: var(--paper); box-shadow: var(--shadow-paper); padding: 1.5rem 1.6rem 1.4rem; transform: rotate(-.8deg); max-width: 36rem; margin-top: 1.8rem; }
.note-card::before { content: ""; position: absolute; top: -12px; left: 2rem; width: 110px; height: 26px; background: rgba(214, 168, 64, .5); transform: rotate(-4deg); }
.note-card p { font-family: var(--f-display); font-size: clamp(1.08rem, .45vw + 1rem, 1.3rem); line-height: 1.4; color: var(--navy); margin-bottom: 1.1rem; }
.note-card .uline { background: linear-gradient(transparent 80%, rgba(198, 32, 50, .55) 80%, rgba(198, 32, 50, .55) 92%, transparent 92%); }
.builder__portrait { position: relative; align-self: stretch; }
.builder__figure { position: absolute; z-index: 1; bottom: 0; left: 50%; width: min(128%, 800px); aspect-ratio: 944 / 1435; transform: translateX(-45%); }
.builder__figure .ring { position: absolute; left: 50%; top: 2.5%; width: 74%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #1d4384 0%, var(--navy) 58%, var(--ink) 100%); box-shadow: 0 0 0 12px rgba(214, 168, 64, .18); }
.builder__figure .dial { width: 90%; aspect-ratio: 1; left: 5%; top: -3.4%; opacity: .95; }
.builder__figure > img { position: relative; display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(-16px 0 34px rgba(8, 20, 48, .22)); }

/* ==========================================================================
   PROOF / GALLERY
   ========================================================================== */
.proof { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); padding: clamp(2rem, 3.5vw, 3rem) 0 calc(var(--sec-y) * .6); overflow: hidden; }
.proof .bg-photo img { opacity: .3; }
.proof .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 20, 48, .78) 30%, rgba(8, 20, 48, .9) 100%); }
.proof__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: 2.4rem; }
.proof h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.02; margin-top: .8rem; text-wrap: balance; }
.proof h2 em { color: var(--gold-hi); }
.gal-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.gal-tabs button { font-family: var(--f-ui); font-size: .82rem; font-weight: 700; letter-spacing: .06em; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: var(--text-on-dark); cursor: pointer; }
.gal-tabs button:hover, .gal-tabs button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.rail-wrap { position: relative; }
.rail { list-style: none; margin: 0; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: .5rem var(--gutter) 1.4rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail__item { flex: none; scroll-snap-align: start; margin: 0; height: clamp(260px, 34vw, 420px); position: relative; }
.rail__item button { display: block; height: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.rail__item img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.rail__item button:hover img, .rail__item button:focus-visible img { transform: scale(1.04); }
.rail__cap { position: absolute; left: .8rem; bottom: .7rem; font-family: var(--f-ui); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; }
.rail__group-start { padding-left: 0; }
.rail-bar { display: flex; align-items: center; gap: 1.2rem; margin-top: .4rem; }
.rail-bar .ticks { flex: 1; position: relative; }
.rail-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold-hi); transition: width .2s linear; }
.rail-btn { flex: none; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold-hi); cursor: pointer; display: grid; place-items: center; }
.rail-btn:hover { background: var(--gold); color: var(--ink); }
.rail-btn svg { width: 1.2rem; height: 1.2rem; }
.rail-btn--play .i-play { display: none; }
.rail-btn--play[aria-pressed="true"] .i-play { display: block; }
.rail-btn--play[aria-pressed="true"] .i-pause { display: none; }
.rail.is-auto { scroll-snap-type: none; }
.rail-count { font-family: var(--f-ui); font-size: .8rem; letter-spacing: .12em; color: var(--text-on-dark-soft); min-width: 4.5rem; text-align: right; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.lightbox::backdrop { background: rgba(3, 8, 20, .94); }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 4.5rem 4.5rem 3.5rem; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: 3px; box-shadow: var(--shadow-deep); }
.lightbox__close, .lightbox__nav { position: absolute; border: 1px solid rgba(255,255,255,.35); background: rgba(8, 20, 48, .7); color: #fff; width: 3.2rem; height: 3.2rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav svg, .lightbox__close svg { width: 1.3rem; height: 1.3rem; }
.lightbox__cap { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-family: var(--f-ui); font-size: .8rem; letter-spacing: .1em; color: var(--text-on-dark-soft); }

/* ==========================================================================
   BUDI — the market never sleeps
   ========================================================================== */
.budi { position: relative; isolation: isolate; color: var(--text-on-dark); background: #050d22; padding: calc(var(--sec-y) * .6) 0 0; overflow: hidden; }
.budi__night { position: relative; isolation: isolate; }
.budi__night > .bg-photo img { opacity: .55; }
.budi__night > .bg-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 75% 35%, rgba(23, 58, 114, .25), rgba(5, 13, 34, .9) 70%), linear-gradient(180deg, #050d22 0%, transparent 20%, transparent 80%, #050d22 100%); }
.budi__grid { display: grid; grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.budi h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1; margin: .8rem 0 1.6rem; }
.budi h2 em { color: var(--gold-hi); }
.budi .story-text p { color: var(--text-on-dark); }
.budi-dial { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin-inline: auto; }
.budi-dial svg { width: 100%; height: 100%; overflow: visible; }
.budi-dial .hand { transform-box: view-box; transform-origin: 240px 240px; animation: dial-spin 60s linear infinite; }
.budi-dial__center { position: absolute; inset: 31%; display: grid; place-content: center; text-align: center; }
.budi-dial__center p { margin: 0; font-family: var(--f-display); font-size: clamp(1.05rem, .7vw + .9rem, 1.35rem); line-height: 1.35; }
.budi-dial__center strong { color: var(--gold-hi); display: block; font-size: 1.5em; line-height: 1.1; margin-bottom: .2rem; }
.belief-check { margin: 2rem 0 0; padding: 1.6rem 1.8rem; background: rgba(253, 250, 243, .07); border: 1px dashed rgba(236, 67, 86, .6); font-family: var(--f-display); font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); line-height: 1.45; }
.belief-check strong { color: var(--pen-bright); font-weight: 600; }

.dawn { position: relative; isolation: isolate; padding: clamp(6rem, 12vw, 10rem) 0 calc(var(--sec-y) * .5); text-align: center; color: var(--ink);
  background: linear-gradient(180deg, #050d22 0%, #1a2d55 14%, #6d6176 30%, #d99a64 48%, #f3cf8e 62%, var(--ivory) 86%); }
.dawn > .bg-photo img { opacity: .85; object-position: center; }
.dawn > .bg-photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 70%, transparent 100%); }
.dawn > .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,34,.88) 0%, rgba(26,45,85,.68) 30%, rgba(243,207,142,.78) 48%, rgba(246,240,227,.92) 75%, var(--ivory) 100%); }
.dawn__imagine { max-width: 46rem; margin: 0 auto 3rem; font-family: var(--f-display); font-size: clamp(1.2rem, .8vw + 1rem, 1.55rem); line-height: 1.5; color: #fff; text-shadow: 0 1px 20px rgba(5, 13, 34, .5); }
.dawn__imagine strong { color: var(--gold-hi); }
.dawn__big { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-statement); line-height: 1.02; margin: 0 auto 1.4rem; max-width: 18ch; color: var(--navy); text-wrap: balance; }
.dawn__big span { display: block; font-size: .5em; font-style: italic; color: var(--navy); margin-bottom: .4rem; position: relative; }
.dawn__big span s { text-decoration: none; position: relative; }
.dawn__big strong { font-weight: 700; }
.dawn__q { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, .9vw + 1rem, 1.7rem); color: var(--navy); max-width: 40rem; margin: 0 auto 2rem; }

/* ==========================================================================
   FAQ: Tanya-Jawab board, index cards, every answer visible
   ========================================================================== */
.faq { position: relative; isolation: isolate; background: var(--ivory); padding: calc(var(--sec-y) * .8) 0 calc(var(--arc-h) + 3rem); overflow: hidden; }
.faq .bg-photo img { opacity: .2; object-position: center 25%; }
.faq .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, rgba(246, 240, 227, .72) 40%, rgba(246, 240, 227, .92) 100%); }
.faq__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.faq__head .label::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.faq h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 2.6vw + 1rem, 3.6rem); line-height: 1.05; color: var(--navy); margin-top: .7rem; }
.faq h2 em { color: var(--pen); }
.qa-board { columns: 2; column-gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.qa { position: relative; break-inside: avoid; margin: 0 0 clamp(1.2rem, 2.6vw, 2.2rem); padding: 1.6rem 1.7rem 1.45rem; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 3px; box-shadow: 0 16px 34px -24px rgba(8, 20, 48, .5); transform: rotate(-.35deg); }
.qa:nth-child(even) { transform: rotate(.4deg); }
.qa:nth-child(3n+1)::before { content: ""; position: absolute; top: -11px; left: 1.6rem; width: 84px; height: 22px; background: rgba(214, 168, 64, .5); transform: rotate(-4deg); }
.qa__num { position: absolute; right: 1.1rem; top: .5rem; font-family: var(--f-display); font-weight: 600; font-size: 3.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(125, 90, 20, .45); }
.qa__q, .qa__a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .35rem; }
.qa__q { margin: 0 0 .75rem; padding-right: 3.4rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.12rem, .4vw + 1rem, 1.3rem); line-height: 1.3; color: var(--navy); }
.qa__a p { margin: 0; }
.qa__mark { font-family: var(--f-hand); font-weight: 700; font-size: 1.6rem; line-height: .85; color: var(--pen); }
.qa__a .qa__mark { color: var(--navy); }
.qa--key { background: linear-gradient(150deg, #12306a, var(--navy) 55%, var(--ink)); color: var(--text-on-dark); border-color: rgba(214, 168, 64, .5); }
.qa--key .qa__q { color: #fff; }
.qa--key .qa__q .qa__mark { color: var(--pen-bright); }
.qa--key .qa__a .qa__mark, .qa--key strong { color: var(--gold-hi); }
.qa--key .qa__num { -webkit-text-stroke-color: rgba(241, 210, 122, .55); }

/* ==========================================================================
   CLOSING + FOOTER (shared final scene)
   ========================================================================== */
.closing { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); overflow: hidden; }
.closing .bg-photo { bottom: auto; height: 78%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
.closing .bg-photo img { opacity: 1; object-position: center 72%; }
.closing .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 20, 48, .35) 22%, rgba(8, 20, 48, 0) 46%), linear-gradient(90deg, rgba(8, 20, 48, .12) 0%, rgba(8, 20, 48, .28) 34%, rgba(8, 20, 48, .8) 56%, rgba(8, 20, 48, .88) 100%); }
.closing__cta { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.6rem) 0 clamp(4rem, 7vw, 6rem); }
.closing__book { position: relative; }
.closing__book img { width: min(100%, 380px); margin-inline: auto; transform: rotate(4deg); filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)); }
.closing__book .dial { width: 120%; aspect-ratio: 1; left: -10%; top: -6%; opacity: .35; }
.closing__book .stamp { right: 2%; bottom: 4%; background: rgba(253, 250, 243, .92); }
.closing h2 { font-family: var(--f-ui); font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 4.6vw + .6rem, 5.6rem); line-height: .9; margin: .8rem 0 1rem; }
.closing h2 .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closing__line { font-family: var(--f-display); font-size: clamp(1.2rem, .8vw + 1rem, 1.55rem); line-height: 1.4; max-width: 34rem; color: var(--text-on-dark); margin-bottom: 2rem; }

.site-footer { position: relative; color: var(--text-on-dark-soft); padding: 2.6rem 0 2.4rem; font-family: var(--f-ui); font-size: .9rem; }
.site-footer > .wrap > .ticks { margin-bottom: 2.4rem; opacity: .4; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
.footer__brand p { margin: 1rem 0 0; max-width: 24rem; line-height: 1.55; }
.footer__col h3 { font-family: var(--f-ui); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__col a { text-decoration: none; color: var(--text-on-dark); }
.footer__col a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: .2em; }
.social { display: flex; gap: .6rem; flex-wrap: wrap; }
.social a { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--gold-hi); }
.social a:hover { background: var(--gold); color: var(--ink); }
.social svg { width: 1.15rem; height: 1.15rem; }
.footer__legal { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(214, 168, 64, .2); }
.legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.legal-links a { color: var(--text-on-dark); font-weight: 600; text-underline-offset: .25em; }
.legal-links a:hover { color: var(--gold-hi); }
.fb-notice { max-width: 46rem; font-size: .8rem; line-height: 1.6; color: var(--text-on-dark-soft); margin: 0 0 .6rem; }
.copyright { font-size: .78rem; color: #8f9bb6; margin: 0; }

/* ==========================================================================
   MODAL OPT-IN
   ========================================================================== */
.optin-modal { border: 0; padding: 0; width: min(900px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border-radius: 14px; background: var(--paper); color: var(--text); overflow: auto;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(214, 168, 64, .55); }
.optin-modal::backdrop { background: radial-gradient(circle at 50% 40%, rgba(14, 36, 80, .78), rgba(3, 8, 20, .92)); backdrop-filter: blur(4px); }
.optin-modal__grid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); }
.optin-modal__aside { position: relative; isolation: isolate; overflow: hidden; color: var(--text-on-dark); padding: 2.2rem 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: radial-gradient(90% 70% at 50% 30%, #1d4384 0%, var(--navy) 55%, var(--ink) 100%); }
.optin-modal__aside::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); }
.optin-modal__aside .dial { width: 140%; aspect-ratio: 1; left: -20%; top: 4%; opacity: .32; z-index: -1; }
.optin-modal__aside img { width: min(100%, 210px); transform: rotate(-4deg); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
.optin-modal__offer { margin-top: 1.3rem; }
.optin-modal__aside .ebook-name { margin: 0; font-family: var(--f-ui); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.optin-modal__book { margin: .35rem 0 .2rem; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; color: #fff; }
.optin-modal__aside .value { margin: 0; font-size: 1.05rem; }
.optin-modal__body { position: relative; isolation: isolate; padding: 2.2rem 2.3rem 1.7rem; }
.optin-modal__body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grid-paper) 0 0 / 56px 56px repeat; opacity: .6; }
.optin-modal__body h2 .nb { white-space: nowrap; }
.optin-modal__body h2 { font-family: var(--f-ui); font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); line-height: .95; color: var(--navy); margin: .5rem 0 1.3rem; padding-right: 2.5rem; }
.optin-modal .field { margin-bottom: .85rem; }
.optin-modal .field label { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .35rem; }
.optin-modal .field__box input { padding-left: 2.7rem; }
.optin-modal .btn { margin-top: .3rem; }
.modal-close { position: absolute; top: .9rem; right: .9rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(214, 168, 64, .6); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background .2s, color .2s; }
.modal-close:hover { background: var(--navy); color: var(--gold-hi); }
.modal-close svg { width: 1.1rem; height: 1.1rem; }
body.modal-open { overflow: hidden; }

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */
.ty-hero { position: relative; isolation: isolate; background: var(--ivory); padding-top: var(--header-h); overflow: hidden; }
.ty-hero .bg-photo img { opacity: .28; object-position: center 40%; }
.ty-hero .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 240, 227, .97) 0%, rgba(246, 240, 227, .85) 50%, rgba(246, 240, 227, .35) 100%); }
.ty-hero__grid { display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr); gap: 2rem; align-items: end; min-height: min(86svh, 780px); }
.ty-hero__copy { padding: clamp(3rem, 7vh, 5rem) 0 clamp(3rem, 7vh, 5rem); align-self: center; }
.ty-hero h1 { font-family: var(--f-display); font-weight: 500; color: var(--navy); line-height: 1; margin: 1rem 0 1.6rem; }
.ty-hero h1 .t1 { display: block; font-size: clamp(2.6rem, 4.6vw + 1rem, 5.8rem); }
.ty-hero h1 .t2 { display: block; font-size: clamp(1.4rem, 1.4vw + 1rem, 2.3rem); font-style: italic; color: var(--text-soft); margin-top: .5rem; }
.ty-hero h1 .ty-name { font-family: var(--f-hand); font-style: normal; font-weight: 700; color: var(--pen); font-size: 1.7em; line-height: .8; display: inline-block; transform: rotate(-3deg); margin-left: .1em; }
.ty-hero h1 .ty-name:empty { display: none; }
.ty-hero__lede { max-width: 36rem; }
.ty-quick { margin-top: 1.6rem; }
.ty-quick__title { margin: 0 0 .7rem; font-family: var(--f-ui); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.ty-quick ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ty-quick a { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; text-decoration: none; color: var(--navy); background: var(--paper); border: 1px solid var(--paper-edge); border-left: 3px solid var(--gold); border-radius: 4px; box-shadow: 0 10px 24px -18px rgba(8, 20, 48, .5); transition: transform .2s var(--ease), border-color .2s; }
.ty-quick a:hover { transform: translateX(4px); border-color: var(--gold); }
.ty-quick li:first-child a { background: var(--gold-grad); border-color: transparent; color: var(--ink); }
.ty-quick__n { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; background: var(--navy); color: var(--gold-hi); }
.ty-quick b { display: block; font-family: var(--f-ui); font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
.ty-quick small { display: block; font-family: var(--f-body); font-size: .9rem; color: var(--text-soft); }
.ty-quick li:first-child small { color: rgba(8, 20, 48, .75); }
.ty-hero__lede h2 { font-family: var(--f-display); font-size: clamp(1.35rem, 1vw + 1rem, 1.9rem); font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 1rem; }
.ty-hero__figure { position: relative; align-self: stretch; min-height: 560px; }
.ty-hero__figure .ring { position: absolute; left: 0; right: 0; bottom: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--navy-2), var(--navy) 70%); }
.ty-hero__figure .dial { width: 112%; aspect-ratio: 1; left: -6%; bottom: 0; opacity: .95; }
.ty-hero__figure > img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(105%, 520px); max-width: none; filter: drop-shadow(0 24px 30px rgba(8, 20, 48, .35)); }
.ty-hero__figure .nameplate { bottom: 9%; right: auto; left: -6%; }

.mature { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--navy); padding: var(--sec-y) 0; overflow: hidden; }
.mature .bg-photo img { opacity: .3; }
.mature .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, .9), rgba(14, 36, 80, .75) 50%, rgba(8, 20, 48, .95)); }
.mature__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mature__statement { font-family: var(--f-display); font-size: clamp(1.6rem, 1.8vw + 1rem, 2.7rem); line-height: 1.15; font-weight: 500; margin: 0 0 1.6rem; }
.mature__statement strong { color: var(--gold-hi); font-weight: 600; }
.mature blockquote { margin: 2rem 0 0; padding: 1.4rem 0 1.4rem 1.6rem; border-left: 3px solid var(--gold); font-family: var(--f-display); font-style: italic; font-size: clamp(1.2rem, .7vw + 1rem, 1.5rem); color: var(--text-on-dark); }
.foundation__title { font-family: var(--f-display); font-size: clamp(1.15rem, .6vw + 1rem, 1.35rem); margin-bottom: 1.1rem; }

.steps { position: relative; isolation: isolate; background: var(--ivory); padding: var(--sec-y) 0 calc(var(--arc-h) + 2.5rem); overflow: hidden; }
.steps .bg-photo img { opacity: .16; }
.steps .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory), rgba(246, 240, 227, .7) 30%, var(--ivory)); }
.steps h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1; color: var(--navy); margin: .8rem 0 3rem; }
.steps h2 em { color: var(--pen); }
.step { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.step::before { content: ""; position: absolute; left: 3.25rem; top: 6.5rem; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--gold) 0 2px, transparent 2px 10px); }
.step:last-child::before { display: none; }
.step__num { position: relative; width: 6.5rem; height: 6.5rem; display: grid; place-items: center; }
.step__num svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold-deep); }
.step__num b { font-family: var(--f-display); font-size: 2.8rem; font-weight: 600; color: var(--navy); line-height: 1; }
.step__card { background: var(--paper); box-shadow: var(--shadow-paper); border-radius: 3px; padding: clamp(1.6rem, 3vw, 2.6rem); }
.step__card h3 { font-family: var(--f-ui); font-stretch: 85%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 1.2vw + 1rem, 2rem); line-height: 1.05; color: var(--navy); margin-bottom: 1rem; }
.step--primary .step__card { border-top: 6px solid var(--gold); }
.step__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; align-items: center; }
.step__split img { width: min(100%, 260px); margin-inline: auto; transform: rotate(4deg); filter: drop-shadow(0 22px 26px rgba(8, 20, 48, .4)); }
.step__links { margin-top: 1.4rem; display: grid; gap: .6rem; justify-items: start; }
.step ul { padding-left: 1.2rem; }
.step li { margin-bottom: .5rem; }
.step li::marker { color: var(--gold-deep); }
.bonus { margin: 1.4rem 0; padding: 1.1rem 1.3rem; background: var(--navy); color: var(--text-on-dark); border-radius: 3px; font-family: var(--f-display); font-size: 1.1rem; }
.bonus strong { color: var(--gold-hi); font-weight: 600; }
.warn { display: flex; gap: .7rem; align-items: flex-start; font-family: var(--f-ui); font-weight: 700; color: var(--pen); font-size: .98rem; margin: 0 0 1.4rem; }
/* step 3: webinar invitation card */
.webinar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; padding: clamp(1rem, 2vw, 1.4rem); background: linear-gradient(140deg, #12306a 0%, var(--navy) 50%, var(--ink) 100%); color: var(--text-on-dark); border-top: 0; box-shadow: 0 30px 60px -30px rgba(8, 20, 48, .7), 0 0 0 1px rgba(214, 168, 64, .45); }
.webinar__visual { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(214, 168, 64, .4); }
.webinar__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.webinar__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 48, 0) 45%, rgba(8, 20, 48, .75)); }
.webinar__badge { position: absolute; z-index: 1; left: .9rem; top: .9rem; padding: .4rem .7rem; border-radius: 3px; background: var(--pen); color: #fff; font-family: var(--f-ui); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.webinar__body { padding: clamp(.4rem, 1.5vw, 1.2rem) clamp(.4rem, 1.5vw, 1.2rem) clamp(.4rem, 1.5vw, 1rem) 0; }
.webinar__kicker { margin: 0 0 .6rem; font-family: var(--f-ui); font-size: .74rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.step .webinar h3 { margin: 0 0 1.1rem; font-family: var(--f-display); font-stretch: normal; font-weight: 600; text-transform: none; font-size: clamp(1.3rem, 1vw + 1rem, 1.75rem); line-height: 1.25; color: #fff; }
.webinar h3 em { font-style: italic; color: var(--gold-hi); }
.webinar__free { display: block; margin-bottom: .25rem; font-family: var(--f-ui); font-stretch: 82%; font-weight: 900; letter-spacing: .02em; font-size: 1.15em; color: var(--gold-hi); }
.step .webinar__points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; }
.step .webinar__points li { margin: 0; padding: .45rem .8rem; border: 1px solid var(--line-dark); border-radius: 999px; font-family: var(--f-ui); font-size: .82rem; font-weight: 600; color: var(--text-on-dark); background: rgba(8, 20, 48, .5); }
.webinar__points li::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .5rem; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.webinar__cta { --b-bg: var(--gold-grad); --b-fg: var(--ink); }
.webinar--traffic .webinar__visual { width: 100%; max-width: 380px; justify-self: center; aspect-ratio: 4 / 5; }
.webinar--traffic .webinar__visual::after { display: none; }
.webinar--traffic .webinar__body > p:not(.webinar__kicker) { color: var(--text-on-dark-soft); }
.webinar--traffic .webinar__body strong { color: var(--text-on-dark); }
@media (max-width: 860px) {
  .webinar--traffic .webinar__visual { max-width: 320px; }
}
.step__consult { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; align-items: start; }
.step__consult figure { margin: 0; position: relative; }
.step__consult figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% center; border-radius: 3px; }
.step__consult figure::after { content: ""; position: absolute; inset: -10px 10px 10px -10px; border: 1px solid var(--gold); z-index: -1; }

.connect { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; overflow: hidden; }
.connect .bg-photo img { opacity: .4; }
.connect .bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 20, 48, .75) 12%, rgba(8, 20, 48, .88) 60%, rgba(5, 13, 34, .98) 100%); }
.connect__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: 0; }
.connect__photo { position: relative; margin: 0; }
.connect__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid rgba(214, 168, 64, .5); }
.connect__photo .dial { inset: -9%; width: 118%; aspect-ratio: 1; opacity: .6; }
.connect h2 { font-family: var(--f-ui); font-stretch: 85%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height: 1; margin: .8rem 0 1.2rem; }
.social-big { list-style: none; padding: 0; margin: 1.8rem 0 1.4rem; display: grid; gap: .7rem; }
.social-big a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line-dark); border-radius: 4px; text-decoration: none; color: var(--text-on-dark); font-family: var(--f-ui); font-weight: 600; background: rgba(8, 20, 48, .55); transition: background .2s, border-color .2s; }
.social-big a:hover { background: rgba(214, 168, 64, .16); border-color: var(--gold); }
.social-big svg { width: 1.4rem; height: 1.4rem; color: var(--gold-hi); flex: none; }
.social-big small { display: block; font-weight: 400; font-size: .78rem; color: var(--text-on-dark-soft); word-break: break-all; }
.signoff { text-align: center; padding: clamp(5rem, 9vw, 8rem) 0 clamp(2rem, 4vw, 3rem); }
.signoff__q { font-family: var(--f-display); font-size: clamp(1.25rem, .9vw + 1rem, 1.7rem); line-height: 1.4; max-width: 44rem; margin: 0 auto 1rem; color: var(--text-on-dark-soft); }
.signoff__q strong { color: #fff; font-weight: 600; }
.signoff blockquote { margin: 2rem auto; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: var(--fs-statement); line-height: 1.02; max-width: 18ch; }
.signoff blockquote em { color: var(--gold-hi); }
.signature { font-family: var(--f-hand); font-size: clamp(2.6rem, 3vw + 1.5rem, 3.8rem); color: var(--gold-hi); line-height: 1; transform: rotate(-3deg); display: inline-block; margin-top: .4rem; }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-hero { position: relative; isolation: isolate; color: var(--text-on-dark); background: var(--navy); padding: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) 0 clamp(3rem, 5vw, 4rem); overflow: hidden; }
.legal-hero .dial { width: 520px; aspect-ratio: 1; right: -120px; top: -60px; opacity: .25; }
.legal-hero h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.3rem, 3.4vw + 1rem, 4.4rem); line-height: 1; margin: .8rem 0 1rem; max-width: 18ch; }
.legal-hero p { max-width: 44rem; color: var(--text-on-dark-soft); margin: 0 0 .6rem; }
.legal-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 .2rem; }
.legal-switch a { padding: .5rem .95rem; border: 1px solid var(--line-dark); border-radius: 999px; font-family: var(--f-ui); font-size: .82rem; font-weight: 700; color: var(--text-on-dark); text-decoration: none; }
.legal-switch a:hover { border-color: var(--gold); color: var(--gold-hi); }
.legal-switch a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.legal-toc { margin: 0 0 2.2rem; padding: 1.2rem 1.4rem; background: var(--ivory); border-left: 3px solid var(--gold); }
.legal-toc p { margin: 0 0 .6rem; font-family: var(--f-ui); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.legal-toc li { margin: 0 0 .35rem; break-inside: avoid; font-size: .95rem; }
.legal-toc a { color: var(--navy); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-doc h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-hero .updated { font-family: var(--f-ui); font-size: .82rem; letter-spacing: .06em; color: var(--gold-hi); margin-top: 1.2rem; }
.legal-body { background: var(--ivory); padding: clamp(3rem, 6vw, 5rem) 0 var(--sec-y); }
.legal-doc { background: var(--paper); box-shadow: var(--shadow-paper); max-width: 52rem; margin: 0 auto; padding: clamp(1.8rem, 5vw, 4rem); }
.legal-doc h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, .8vw + 1.1rem, 1.75rem); color: var(--navy); margin: 2.4rem 0 .9rem; line-height: 1.2; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc li { margin-bottom: .6rem; }
.legal-doc a { color: var(--navy-2); text-underline-offset: .2em; }
.legal-contact { margin-top: 1rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--gold); background: var(--ivory); font-family: var(--f-ui); }
.legal-contact span { display: block; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: .3rem; }
.pending { display: inline-block; font-family: var(--f-ui); font-size: .85rem; font-weight: 700; color: #8c1222; background: #fdecee; border: 1px dashed var(--pen); padding: .15rem .5rem; border-radius: 3px; }
.legal-page .site-footer { background: var(--ink); }

/* ==========================================================================
   SVG DECORATION LAYER: dial orbits (dark sections) and lecturer grid paper
   (cream sections). Purely decorative; sits between the photo and the content.
   ========================================================================== */
:root {
  --orbit-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none' stroke='%23d6a840'%3E%3Ccircle cx='400' cy='400' r='392' stroke-opacity='0.340'/%3E%3Ccircle cx='400' cy='400' r='330' stroke-opacity='0.240' stroke-dasharray='2 9'/%3E%3Ccircle cx='400' cy='400' r='250' stroke-opacity='0.160'/%3E%3Ccircle cx='400' cy='400' r='150' stroke-opacity='0.100' stroke-dasharray='1 6'/%3E%3Cpath d='M400.0 8.0L400.0 24.0M425.6 8.8L425.1 16.8M451.2 11.4L450.1 19.3M476.5 15.5L474.9 23.4M501.5 21.4L497.3 36.8M526.0 28.8L523.4 36.4M550.0 37.8L547.0 45.2M573.4 48.4L569.8 55.6M596.0 60.5L588.0 74.4M617.8 74.1L613.3 80.7M638.6 89.0L633.8 95.4M658.5 105.3L653.2 111.3M677.2 122.8L665.9 134.1M694.7 141.5L688.7 146.8M711.0 161.4L704.6 166.2M725.9 182.2L719.3 186.7M739.5 204.0L725.6 212.0M751.6 226.6L744.4 230.2M762.2 250.0L754.8 253.0M771.2 274.0L763.6 276.6M778.6 298.5L763.2 302.7M784.5 323.5L776.6 325.1M788.6 348.8L780.7 349.9M791.2 374.4L783.2 374.9M792.0 400.0L776.0 400.0M791.2 425.6L783.2 425.1M788.6 451.2L780.7 450.1M784.5 476.5L776.6 474.9M778.6 501.5L763.2 497.3M771.2 526.0L763.6 523.4M762.2 550.0L754.8 547.0M751.6 573.4L744.4 569.8M739.5 596.0L725.6 588.0M725.9 617.8L719.3 613.3M711.0 638.6L704.6 633.8M694.7 658.5L688.7 653.2M677.2 677.2L665.9 665.9M658.5 694.7L653.2 688.7M638.6 711.0L633.8 704.6M617.8 725.9L613.3 719.3M596.0 739.5L588.0 725.6M573.4 751.6L569.8 744.4M550.0 762.2L547.0 754.8M526.0 771.2L523.4 763.6M501.5 778.6L497.3 763.2M476.5 784.5L474.9 776.6M451.2 788.6L450.1 780.7M425.6 791.2L425.1 783.2M400.0 792.0L400.0 776.0M374.4 791.2L374.9 783.2M348.8 788.6L349.9 780.7M323.5 784.5L325.1 776.6M298.5 778.6L302.7 763.2M274.0 771.2L276.6 763.6M250.0 762.2L253.0 754.8M226.6 751.6L230.2 744.4M204.0 739.5L212.0 725.6M182.2 725.9L186.7 719.3M161.4 711.0L166.2 704.6M141.5 694.7L146.8 688.7M122.8 677.2L134.1 665.9M105.3 658.5L111.3 653.2M89.0 638.6L95.4 633.8M74.1 617.8L80.7 613.3M60.5 596.0L74.4 588.0M48.4 573.4L55.6 569.8M37.8 550.0L45.2 547.0M28.8 526.0L36.4 523.4M21.4 501.5L36.8 497.3M15.5 476.5L23.4 474.9M11.4 451.2L19.3 450.1M8.8 425.6L16.8 425.1M8.0 400.0L24.0 400.0M8.8 374.4L16.8 374.9M11.4 348.8L19.3 349.9M15.5 323.5L23.4 325.1M21.4 298.5L36.8 302.7M28.8 274.0L36.4 276.6M37.8 250.0L45.2 253.0M48.4 226.6L55.6 230.2M60.5 204.0L74.4 212.0M74.1 182.2L80.7 186.7M89.0 161.4L95.4 166.2M105.3 141.5L111.3 146.8M122.8 122.8L134.1 134.1M141.5 105.3L146.8 111.3M161.4 89.0L166.2 95.4M182.2 74.1L186.7 80.7M204.0 60.5L212.0 74.4M226.6 48.4L230.2 55.6M250.0 37.8L253.0 45.2M274.0 28.8L276.6 36.4M298.5 21.4L302.7 36.8M323.5 15.5L325.1 23.4M348.8 11.4L349.9 19.3M374.4 8.8L374.9 16.8' stroke-opacity='0.400'/%3E%3Cpath d='M114.2 235.0A330 330 0 0 1 670.3 210.7' stroke-width='2.4' stroke-opacity='0.550' stroke-linecap='round'/%3E%3Ccircle cx='670.3' cy='210.7' r='5' fill='%23d6a840' fill-opacity='0.700' stroke='none'/%3E%3Cpath d='M400 400L604.8 256.6' stroke-opacity='0.250' stroke-width='1.2'/%3E%3C/svg%3E");
  --grid-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M56 0H0V56' fill='none' stroke='%230e2450' stroke-opacity='.07'/%3E%3Cpath d='M28 26v4M26 28h4' stroke='%230e2450' stroke-opacity='.09'/%3E%3C/svg%3E");
}
.deco-orbit::before, .deco-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco-orbit::before {
  background: var(--orbit-gold) var(--o1, right -300px top -260px) / var(--o1s, 900px) auto no-repeat,
              var(--orbit-gold) var(--o2, left -340px bottom -420px) / var(--o2s, 640px) auto no-repeat;
  opacity: var(--o-op, .75);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--wrap) / 2 - 90px), transparent calc(50% - var(--wrap) / 2 + 10px), transparent calc(50% + var(--wrap) / 2 - 10px), #000 calc(50% + var(--wrap) / 2 + 90px), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--wrap) / 2 - 90px), transparent calc(50% - var(--wrap) / 2 + 10px), transparent calc(50% + var(--wrap) / 2 - 10px), #000 calc(50% + var(--wrap) / 2 + 90px), #000 100%);
}
.deco-grid::before {
  background: var(--grid-paper) 0 0 / 56px 56px repeat;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at var(--g-at, 50% 45%), #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at var(--g-at, 50% 45%), #000 30%, transparent 100%);
  opacity: calc(var(--o-op, 1) * .75);
}
/* per-section placement so the orbit never sits in the same spot twice */
.clock-band { --o1: left -360px top -300px; --o1s: 980px; --o2: right -300px bottom -360px; --o2s: 560px; --o-op: .55; }
.story-band { isolation: isolate; overflow: hidden; --o1: left -160px top -520px; --o1s: 980px; --o2: right -220px bottom -520px; --o2s: 700px; --o-op: .8; }
.dusk { --o1: right -380px top 18%; --o1s: 1100px; --o2: left -420px bottom -300px; --o2s: 760px; --o-op: .6; }
.digital { --o1: left -300px top -200px; --o1s: 760px; --o2: right -260px bottom -300px; --o2s: 620px; --o-op: .55; }
.mission { --o1: center top -420px; --o1s: 1240px; --o2: right -500px bottom -600px; --o2s: 900px; --o-op: .55; }
.proof { --o1: right -260px top -160px; --o1s: 720px; --o2: left -380px bottom -460px; --o2s: 820px; --o-op: .6; }
.budi { --o1: left -420px bottom -360px; --o1s: 900px; --o2: right -300px top -320px; --o2s: 520px; --o-op: .5; }
.closing { --o1: right -340px top -300px; --o1s: 860px; --o2: left -200px bottom -520px; --o2s: 720px; --o-op: .45; }
.mature { --o1: right -300px top -240px; --o1s: 820px; --o2: left -360px bottom -420px; --o2s: 640px; --o-op: .6; }
.connect { --o1: left -360px top 10%; --o1s: 900px; --o2: right -280px bottom -320px; --o2s: 600px; --o-op: .5; }
.lecturer { --o1: right -360px top -200px; --o1s: 880px; --g-at: 40% 40%; }
.inside { --o1: left -380px top -260px; --o1s: 900px; --g-at: 50% 55%; --o-op: .85; }
.faq { --o1: right -420px bottom -300px; --o1s: 960px; --g-at: 50% 50%; --o-op: .9; }
.story-open { --o1: right -260px top -340px; --o1s: 760px; --g-at: 70% 40%; --o-op: .8; }
.builder { --o1: left -420px bottom -380px; --o1s: 900px; --g-at: 30% 50%; --o-op: .8; }
.steps { --o1: right -320px top -260px; --o1s: 860px; --o-op: .9; }
.ty-hero { --o1: left -360px bottom -420px; --o1s: 880px; --g-at: 30% 50%; --o-op: .8; }
.legal-body { position: relative; isolation: isolate; --o1: right -360px top -240px; --o1s: 860px; --o-op: .9; }
@media (max-width: 860px) {
  .deco-orbit::before { display: none; }
}
/* short screens: compress the modal before fields or the submit button leave the viewport */
@media (max-height: 800px) and (min-width: 861px) {
  .optin-modal__aside img { width: 160px; }
  .optin-modal__body { padding: 1.5rem 2rem 1.2rem; }
  .optin-modal__body h2 { margin-bottom: .9rem; }
  .optin-modal .field { margin-bottom: .6rem; }
  .optin-modal .form-consent { font-size: .78rem; margin-top: .7rem; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .optin-modal__aside { display: none; }
  .optin-modal__body { padding-top: .9rem; }
  .optin-modal .optin-modal__body h2 { font-size: 1.3rem; padding-right: 3.4rem; margin-bottom: .55rem; }
  .optin-modal .field { margin-bottom: .4rem; }
  .optin-modal .field__error { margin-top: .15rem; font-size: .78rem; }
  .optin-modal .form-status { margin-top: .5rem; padding: .5rem .7rem; font-size: .82rem; }
  .optin-modal .field input { min-height: 2.7rem; }
  .optin-modal .form-consent { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) { .deco-orbit::before, .deco-grid::before { transition: none; } }

/* ==========================================================================
   REVEAL (motion)
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* hero, tablet and small laptop: support line as one centred line, head below it */
@media (max-width: 1280px) {
  :root { --builder-rise: 0px; }
  .hero { --rise: -1.2rem; }
  .h1__support { display: block; text-align: center; letter-spacing: .16em; margin-top: .8rem; }
  .h1__support-a, .h1__support-b { display: inline; padding: 0; }
  .h1__support-a::before, .h1__support-a::after { content: none; }
  .hero .nameplate { right: 0; max-width: 14rem; }
}

@media (max-width: 1100px) {
  .h1__setup { letter-spacing: .2em; }
  .bridge__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bridge__submit { grid-column: 1 / -1; margin-top: .2rem; }
  .nav a:not(.btn) { display: none; }
  .cred-strip span { font-size: .74rem; }
}

@media (max-width: 1100px) {
  /* dial moves above the points; points keep two columns */
  .inside__orbit { --core: min(360px, 62vw); }
  .inside__orbit { min-height: 0; }
  .inside__core { position: relative; left: auto; top: auto; transform: none; margin: calc(var(--core) * .5) auto 2.4rem; }
  .inside__list { column-gap: 1.2rem; grid-template-rows: repeat(4, auto); }
  .inside__list li:nth-child(n) { grid-template-columns: auto minmax(0, 1fr); transform: none; }
  .inside__list li:nth-child(-n+4) .hour { order: 0; }
  .inside__list li::after { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; --bridge-lift: 110px; --bridge-pop: 150px; }
  .bridge__card { --cover-w: 172px; padding: 0 1.25rem 1.5rem; text-align: center; }
  .bridge__cover { position: relative; left: auto; bottom: auto; margin: -150px auto 1.2rem; }
  .bridge__glow { left: 10%; top: -30%; width: 80%; height: 70%; }
  .bridge .label { justify-content: center; }
  .bridge__fields { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .bridge .form-consent, .bridge .form-status { text-align: left; }
  .brand svg { width: 36px; height: 36px; }
  .brand__name { font-size: 1.1rem; }
  .brand__desc { font-size: .56rem; letter-spacing: .16em; }

  .nameplate { right: var(--gutter); bottom: 6%; max-width: 12.5rem; padding: .7rem .9rem; }
  .nameplate b { font-size: 1.1rem; }
  .nameplate span { font-size: .62rem; }
  .hero__scene img { object-position: 70% 30%; }
  /* hero (mobile): poster headline, then a large waist-crop portrait, then lede + CTA */
  .hero { --rise: 0px; }
  .hero__poster { padding-top: 1rem; }
  .hero__eyebrow { font-size: .8rem; letter-spacing: .06em; line-height: 1.35; }
  .h1__setup { letter-spacing: .16em; padding-left: 0; margin-bottom: .35rem; }
  .h1__main { font-size: min(14.6vw, 4.6rem); font-stretch: 70%; line-height: .88; white-space: normal; }
  .h1__support { display: block; letter-spacing: .14em; margin-top: .55rem; }
  .h1__support-a, .h1__support-b { text-align: center; padding: 0; white-space: normal; }
  .h1__support-a { display: inline; }
  .h1__support-a::before, .h1__support-a::after { content: none; }
  .hero__stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__figure { order: -1; height: min(122vw, 580px); margin: .4rem calc(-1 * var(--gutter)) 0; overflow: hidden; }
  .hero__figure::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(8, 20, 48, 0) 0%, rgba(8, 20, 48, 0) 40%, rgba(8, 20, 48, .72) 54%, rgba(8, 20, 48, .94) 66%, rgba(8, 20, 48, .98) 100%); }
  .hero .nameplate { display: none; }
  .hero__eyebrow { padding: .7rem 1.1rem .65rem 2rem; }
  .hero__tag { margin: .8rem 0 .9rem; }
  .hero__clip { left: .4rem; top: -1.3rem; width: 1.15rem; height: 3.1rem; }
  /* compact opt-in modal */
  .optin-modal { width: calc(100vw - 1.4rem); max-height: calc(100dvh - 1.4rem); overflow: auto; overflow-x: hidden; }
  .optin-modal__grid { position: relative; grid-template-columns: minmax(0, 1fr); }
  .optin-modal__body { position: static; }
  .optin-modal__body::before { display: none; }
  .optin-modal__aside { flex-direction: row; align-items: center; gap: .9rem; text-align: left; padding: .9rem 3.6rem .9rem 1rem; }
  .optin-modal__aside::after { top: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
  .optin-modal__aside .dial { width: 70%; left: auto; right: -25%; top: -40%; }
  .optin-modal__aside img { width: 62px; flex: none; }
  .optin-modal__offer { margin: 0; }
  .optin-modal__book { font-size: .96rem; margin: .2rem 0 .1rem; }
  .optin-modal__aside .value { font-size: .9rem; }
  .optin-modal__body { padding: 1rem 1.1rem 1rem; background: var(--paper); }
  .optin-modal__body > .label { display: none; }
  .optin-modal__body h2 { font-size: 1.5rem; margin: 0 0 .75rem; padding-right: 0; }
  .modal-close { top: .65rem; right: .65rem; width: 2.5rem; height: 2.5rem; }
  .optin-modal .field { margin-bottom: .55rem; }
  .optin-modal .field label { margin-bottom: .22rem; font-size: .78rem; }
  .optin-modal .field input { min-height: 2.9rem; }
  .optin-modal .form-consent { font-size: .72rem; line-height: 1.45; margin-top: .6rem; }
  .optin-modal .btn { min-height: 3.2rem; padding: .7rem 1rem; }
  .hero__note { display: none; }
  .hero__figbox { left: 50%; top: 2%; bottom: auto; height: auto; width: min(104vw, 500px); }
  .hero__portrait { width: 100%; height: auto; }
  .hero__copy { margin-top: calc(-1 * min(44vw, 210px)); padding: 0 0 2rem; text-align: center; }
  .hero__cta { justify-content: center; }
  .hero__offer { text-align: left; }
  /* local reading scrims over bright city lights (mobile) */
  .dawn__imagine { position: relative; }
  .dawn__imagine::before { content: ""; position: absolute; inset: -1.2rem -.8rem -2.6rem; z-index: -1; border-radius: 6px; background: radial-gradient(farthest-side, rgba(8, 20, 48, .7), rgba(8, 20, 48, .5) 75%, transparent); }
  .budi__night > .bg-photo img { object-position: 75% center; }
  .cred-strip ul { grid-template-columns: 1fr; }
  .cred-strip li { border-left: 0; border-top: 1px solid rgba(214, 168, 64, .18); padding: .9rem 0; min-height: 0; }
  .cred-strip li:first-child { border-top: 0; }
  .cred-strip span { font-size: .86rem; }

   .clock-band__grid, .story-open__grid, .lecturer__grid, .dusk__count, .digital__grid,
  .builder__grid, .proof__head, .budi__grid, .closing__cta, .footer__grid, .ty-hero__grid, .mature__grid,
  .step__split, .step__consult, .connect__grid { grid-template-columns: 1fr; }

  .stamp b { font-size: 1.35rem; } .stamp span { font-size: .62rem; }

  .inside__list { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; row-gap: .8rem; }
  .inside__orbit { --core: min(330px, 84vw); }

  .big-dial { max-width: 320px; }

  .story-portrait { min-height: 0; height: min(120vw, 560px); order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .story-portrait, .builder__portrait { overflow: hidden; }
  .story-figure, .builder__figure { top: 2%; bottom: auto; left: 50%; transform: translateX(-50%); }
  .story-figure { width: min(100vw, 470px); }
  .builder__figure { width: min(108vw, 500px); }
  /* mobile: her photo rises into the navy mission section above */
  .builder { z-index: 2; overflow: visible; overflow-x: clip; }
  .mission { padding-bottom: calc(var(--sec-y) * .6 + 130px); }
  .builder__portrait { margin-top: calc(-130px - var(--sec-y) * .6); }
  .builder__figure { top: 4%; }
  :root { --builder-rise: 0px; }
  .qa-board { columns: 1; }
  .legal-hero { padding: calc(var(--header-h) + 1.6rem) 0 1.6rem; }
  .legal-hero h1 { font-size: 2rem; margin-bottom: .6rem; }
  .legal-hero p { font-size: 1rem; }
  .legal-body { padding-top: 1.4rem; }
  .legal-doc { padding: 1.4rem 1.15rem; }
  .legal-toc ol { columns: 1; }
  .qa, .qa:nth-child(even) { transform: none; }
  .qa { padding: 1.15rem 1.05rem 1.1rem; margin-bottom: 1rem; }
  .qa__q, .qa__a { grid-template-columns: 1.35rem minmax(0, 1fr); gap: .25rem; }
  .qa__q { padding-right: 2.2rem; margin-bottom: .55rem; }
  .qa__mark { font-size: 1.2rem; }
  .qa__num { font-size: 2.1rem; right: .7rem; top: .45rem; -webkit-text-stroke-width: .8px; }
  .inside__list li { padding: .85rem .95rem; gap: .75rem; box-shadow: none; }
  .hour { width: 2.2rem; height: 2.2rem; font-size: .76rem; }
  .story-portrait::after, .builder__portrait::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(214, 168, 64, .75) 0 1px, transparent 1px 12px) top / 100% 6px no-repeat, repeating-linear-gradient(90deg, rgba(214, 168, 64, .9) 0 2px, transparent 2px 72px) top / 100% 12px no-repeat, linear-gradient(100deg, var(--ink), var(--navy));
    box-shadow: 0 -14px 26px -14px rgba(8, 20, 48, .5); }
  .story-band__inner { grid-template-columns: minmax(0, 1fr); }
  .story-band__quote, .story-band__after { grid-column: 1; }
  .story-band__fact { grid-row: auto; justify-self: start; padding: 0 0 1.6rem; }
  .story-band__scene { right: 0; bottom: 45%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .digital .bg-photo img { object-position: 80% center; }
  .story-open .story-band .story-band__scene img { opacity: .85; object-position: 25% 60%; }
  .story-open .bg-photo::after { background: linear-gradient(180deg, rgba(246, 240, 227, .2) 0%, rgba(246, 240, 227, .6) 40%, rgba(246, 240, 227, .97) 60%); }

  .prints { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; margin-top: 1rem; }
  .print { position: relative; inset: auto; width: auto; }
  .print--a { transform: rotate(-3deg); }
  .print--b { grid-column: 1 / -1; order: -1; transform: rotate(1.5deg); }
  .print--a, .print--b, .print--c { left: auto; right: auto; top: auto; }
  .print--c { transform: rotate(2deg); }

  .questions { grid-template-columns: 1fr; }
  .observe { grid-template-columns: 1fr; }
  .stack li { margin-left: calc(var(--i) * .45rem); }
  .screens { grid-template-columns: 1fr 1fr; }
  .screens figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }

  .builder__portrait { min-height: 0; height: min(128vw, 600px); order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .builder__copy { padding-bottom: 3rem; }
  .builder .bg-photo::after { background: linear-gradient(180deg, rgba(246, 240, 227, .4), rgba(246, 240, 227, .95) 45%); }

  .gal-tabs { justify-content: flex-start; }
  .rail-count { display: none; }


  .closing__cta { padding-top: 3rem; text-align: center; }
  .closing .bg-photo { height: 70%; }
  .closing .bg-photo img { object-position: 60% 75%; }
  .closing .bg-photo::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(8, 20, 48, .2) 14%, rgba(8, 20, 48, .1) 34%, rgba(8, 20, 48, .82) 54%, rgba(8, 20, 48, .9) 100%); }
  .closing__book { max-width: 280px; margin: 0 auto; }
  .closing__line { margin-inline: auto; }

  .ty-hero__figure { min-height: 0; height: min(100vw, 470px); overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
  .ty-hero__figure > img { width: min(96vw, 440px); top: 3%; bottom: auto; }
  .ty-hero__figure .ring { left: 10%; right: 10%; }
  .ty-hero__figure .dial { width: 92vw; left: 50%; transform: translateX(-50%); }
  .ty-hero__figure .nameplate { left: 0; bottom: 4%; }
  .ty-hero__copy { padding: 1.2rem 0 1.6rem; }
  .ty-hero__grid { min-height: 0; }
  .mature { padding: calc(var(--sec-y) * .65) 0 calc(var(--sec-y) * .55); }
  .steps { padding-top: calc(var(--sec-y) * .6); }
  .steps h2 { margin-bottom: 2.4rem; }
  .steps { padding-bottom: calc(var(--arc-h) + 1.2rem); }
  .ty-hero__figure { margin-top: -1.4rem; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1.7rem; padding-bottom: 1.8rem; }
  .step__card { min-width: 0; }
  .step__card h3 { overflow-wrap: anywhere; }
  .step__links .btn { max-width: 100%; overflow-wrap: anywhere; }
  .step::before { display: none; }
  .step__num { position: absolute; z-index: 2; top: 0; left: 1rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 1px rgba(156, 115, 32, .35), 0 6px 14px -8px rgba(8, 20, 48, .4); }
  .step__card { padding-top: 2.4rem; }
  .step__num b { font-size: 1.7rem; }
  .step__consult figure { max-width: 340px; }
  .webinar { grid-template-columns: minmax(0, 1fr); padding: 2.2rem 1rem 1.2rem; }
  .webinar__body { padding: 0 .3rem; }
  .webinar__cta { width: 100%; }
  .connect__photo { max-width: 300px; margin: 0 auto; }
  .signoff { padding-top: 3rem; }
  .signoff > .ticks { margin-bottom: 2.2rem !important; }

}

@media (max-width: 560px) {
  .nav .btn { padding: .55rem .8rem; font-size: .72rem; min-height: 2.6rem; }
  .brand__desc { display: none; }
  .hero__cta .btn, .closing .btn, .note-card .btn, .dawn .btn, .clock-band .btn { width: 100%; }

  .h1__setup { letter-spacing: .05em; font-size: .86rem; }
  .h1__support { letter-spacing: .06em; font-size: .86rem; }
  .ticks { --tick-gap: 8px; }
  .q-card { padding: 1.5rem 1.3rem 1.8rem; }
  .lightbox__inner { padding: 4rem .5rem 3rem; }
  .lightbox__nav { top: auto; bottom: .6rem; transform: none; }
  .lightbox__cap { bottom: 1.5rem; }
}

@media (max-width: 380px) {
  .brand__name { font-size: 1rem; }
  .brand svg { width: 32px; height: 32px; }
  .nav .btn { font-size: .68rem; padding: .5rem .65rem; letter-spacing: .03em; }
}

/* short screens: compress decorative layers before the form leaves the viewport */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker ul[aria-hidden="true"] { display: none; }
  .ticker ul { flex-wrap: wrap; justify-content: center; }
  .pen-line path, .hero__note-line { stroke-dashoffset: 0; }
  .struck { background-size: 100% 3px; }
}