/* ==========================================================================
   Investment Trust — "The Certificate"
   Banknote green, paper, brass. Engraved guilloché, ledgers, seals.
   ========================================================================== */

:root {
  --paper: #efe9dd;
  --paper-2: #e6dfd0;
  --paper-3: #dcd3c0;
  --ink: #0d1d18;
  --ink-2: #132a23;
  --ink-3: #1b382f;
  --brass: #94743f;
  --brass-hi: #c9a96b;
  --wine: #5c1f26;
  --bronze: #6b5126;
  --cream: #ece4d2;
  --text: #22322d;
  --mute: #5f6c66;
  --mute-d: #9aa69f;
  --rule: rgba(13, 29, 24, 0.16);
  --rule-strong: rgba(13, 29, 24, 0.36);
  --rule-d: rgba(236, 228, 210, 0.14);
  --rule-d-strong: rgba(236, 228, 210, 0.3);

  --display: "Libre Caslon Text", "Baskerville", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;

  --gutter: clamp(16px, 4.5vw, 72px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.7; font-weight: 400;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }

/* Paper fibre — very light, static */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Themes ---------- */

.ink { background: var(--ink); color: var(--cream); --rule: var(--rule-d); --rule-strong: var(--rule-d-strong); --mute: var(--mute-d); --text: var(--cream); }
.ink h1, .ink h2, .ink h3, .ink .display { color: var(--cream); }
.ink .smallcaps, .ink .folio { color: var(--brass-hi); }
.paper-2 { background: var(--paper-2); }

/* ---------- Typography ---------- */

h1, h2, h3, .display { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(3rem, 9vw, 9.6rem); line-height: .92; }
h2 { font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: 1.02; }
h3 { font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.12; }
em { font-style: italic; }
.brass { color: var(--brass); }
.ink .brass { color: var(--brass-hi); }

.smallcaps {
  font-family: var(--display); font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); display: inline-flex; align-items: center; gap: 14px;
}
.smallcaps.rule::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); max-width: 52ch; line-height: 1.7; }
.mute { color: var(--mute); }
.fine { font-size: .78rem; color: var(--mute); letter-spacing: .02em; }
.serial { font-family: var(--display); font-size: .82rem; letter-spacing: .16em; color: var(--brass); font-variant-numeric: oldstyle-nums; }

/* ---------- Layout ---------- */

.wrap { padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(90px, 11vw, 170px); overflow-x: clip; }
.section--tight { padding-block: clamp(60px, 7vw, 110px); }

/* Folio: section header in the left margin, like a ledger */
.folio-head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 26px;
  margin-bottom: clamp(48px, 6vw, 88px); padding-top: 26px; position: relative;
}
/* double rule, drawn as if by pen when the folio scrolls into view */
.folio-head::before, .folio-head::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule-strong);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-io);
}
.folio-head::before { top: 0; }
.folio-head::after { top: 4px; background: var(--rule); transition-delay: .18s; }
.folio-head.is-in::before, .folio-head.is-in::after { transform: scaleX(1); }
.folio { grid-column: 1 / span 3; font-family: var(--display); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); display: flex; flex-direction: column; gap: 6px; }
.folio b { font-weight: 400; font-size: 2.6rem; letter-spacing: 0; line-height: 1; font-style: italic; }
.folio-head h2 { grid-column: 4 / span 6; }
.folio-head .lead { grid-column: 4 / span 6; }
.folio-head .note { grid-column: 10 / -1; align-self: end; font-size: .86rem; color: var(--mute); border-left: 1px solid var(--rule); padding-left: 18px; }
@media (max-width: 900px) { .folio-head > * { grid-column: 1 / -1 !important; } .folio-head .note { border: 0; padding: 0; } }

/* Intro with marginalia */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 40px; }
.intro__side { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 22px; }
.intro__main { grid-column: 4 / span 7; display: flex; flex-direction: column; gap: 36px; }
.intro__main--wide { grid-column: 5 / -1; }
.intro__margin { grid-column: 11 / -1; font-size: .84rem; color: var(--mute); border-left: 1px solid var(--rule); padding-left: 18px; align-self: start; }
.statement { font-family: var(--display); font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.3; color: var(--ink); max-width: 32ch; }
.ink .statement { color: var(--cream); }
.statement .word { opacity: .18; transition: opacity .5s; }
.statement .word.is-lit { opacity: 1; }
.dropcap::first-letter { float: left; font-family: var(--display); font-size: 4.6em; line-height: .8; padding: 6px 12px 0 0; color: var(--brass); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); color: var(--mute); }
.facts { list-style: none; border-top: 1px solid var(--rule-strong); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.facts li span:first-child { color: var(--mute); }
.facts li span:last-child { font-family: var(--display); color: var(--ink); text-align: right; }
@media (max-width: 1000px) {
  .intro__side, .intro__main, .intro__margin { grid-column: 1 / -1; }
  .cols-2 { grid-template-columns: 1fr; }
}

/* ---------- Loader ---------- */

.loader { position: fixed; inset: 0; z-index: 9500; background: var(--ink); display: grid; place-items: center; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader svg { width: 96px; }
.loader path { fill: none; stroke: var(--brass-hi); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-io) forwards; }
.loader__label { position: absolute; bottom: var(--gutter); left: 0; right: 0; text-align: center; color: var(--mute-d); }
@keyframes draw { to { stroke-dashoffset: 0; } }

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

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 800; color: var(--cream);
  /* top padding clears the hero's certificate frame (inset 14px + inner rule) */
  display: flex; align-items: center; justify-content: space-between; padding: 50px var(--gutter) 28px;
  transition: padding .6s var(--ease), background .6s, color .6s, border-color .6s, transform .6s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled { padding-block: 14px; background: rgba(239, 233, 221, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); border-color: var(--rule); }
.header.is-hidden { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand svg { width: 38px; height: 38px; }
.brand__name { font-family: var(--display); font-size: 1.02rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand__name small { display: block; font-size: .56rem; letter-spacing: .34em; margin-top: 6px; opacity: .7; }
.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav__links a { font-size: .8rem; letter-spacing: .06em; position: relative; padding-block: 4px; white-space: nowrap; }
.btn { white-space: nowrap; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.menu-btn i { display: grid; gap: 5px; }
.menu-btn i::before, .menu-btn i::after { content: ""; display: block; width: 26px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn:hover i::before { transform: translateX(4px); }
@media (max-width: 1180px) { .nav__links, .nav .btn { display: none; } }

/* ---------- Buttons ---------- */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 26px;
  border: 1px solid currentColor; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; transition: color .5s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.btn:hover { color: var(--cream); }
.btn:hover::before { transform: scaleY(1); }
.ink .btn::before, .header:not(.is-scrolled) .btn::before { background: var(--cream); }
.ink .btn:hover, .header:not(.is-scrolled) .btn:hover { color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--solid::before { background: var(--brass); }
.ink .btn--solid { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--sm { height: 42px; padding: 0 18px; font-size: .74rem; }
.btn .arrow { width: 18px; transition: transform .6s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; letter-spacing: .06em; border-bottom: 1px solid var(--rule-strong); padding-bottom: 4px; transition: border-color .4s, gap .5s var(--ease); }
.link:hover { border-color: currentColor; gap: 16px; }
.link svg { width: 18px; }

/* ---------- Menu ---------- */

.menu {
  position: fixed; inset: 0; z-index: 900; background: var(--ink); color: var(--cream);
  display: grid; grid-template-columns: 1.3fr 1fr; visibility: hidden;
  clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io), visibility 0s linear .9s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-io); }
.menu__main { padding: 130px var(--gutter) 60px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--rule-d); }
.menu__main ol { list-style: none; counter-reset: m; }
.menu__main li { overflow: hidden; counter-increment: m; border-bottom: 1px solid var(--rule-d); }
.menu__main a { display: flex; align-items: baseline; gap: 26px; padding-block: 10px; font-family: var(--display); font-size: clamp(2.2rem, 4.8vw, 5rem); line-height: 1.1; white-space: nowrap; transform: translateY(110%); transition: transform .9s var(--ease), color .4s, padding .5s var(--ease); }
.menu__main a::before { content: counter(m, upper-roman) "."; font-size: .9rem; letter-spacing: .1em; color: var(--brass-hi); width: 36px; }
.menu__main a:hover { color: var(--brass-hi); font-style: italic; padding-left: 14px; }
.menu.is-open .menu__main a { transform: none; }
.menu.is-open li:nth-child(1) a { transition-delay: .25s; }
.menu.is-open li:nth-child(2) a { transition-delay: .3s; }
.menu.is-open li:nth-child(3) a { transition-delay: .35s; }
.menu.is-open li:nth-child(4) a { transition-delay: .4s; }
.menu.is-open li:nth-child(5) a { transition-delay: .45s; }
.menu__side { position: relative; overflow: hidden; padding: 110px var(--gutter) 60px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.menu__side p { color: var(--mute-d); }
.menu__office { display: flex; flex-direction: column; gap: 22px; }
.menu__close { position: absolute; top: 38px; right: var(--gutter); z-index: 2; color: var(--cream); }
.menu__brand { position: absolute; top: 30px; left: var(--gutter); z-index: 2; color: var(--cream); }

/* Folio card: a small certificate previewing the hovered destination */
.menu__card {
  position: relative; padding: clamp(34px, 3vw, 48px); min-height: clamp(260px, 32vh, 340px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  opacity: 0; translate: 0 30px; transition: opacity .6s var(--ease), translate .9s var(--ease);
}
.menu.is-open .menu__card { opacity: 1; translate: 0 0; transition-delay: .45s; }
.menu__card .frame { inset: 12px; }
.menu__card .serial { position: relative; color: var(--brass-hi); }
.menu__card-body { position: relative; display: grid; gap: 10px; transition: opacity .2s, transform .2s; }
.menu__card-body.is-changing { opacity: 0; transform: translateY(10px); }
.menu__card-body > * { animation: previewIn .7s var(--ease) both; }
.menu__card-body > :nth-child(2) { animation-delay: .05s; }
.menu__card-body > :nth-child(3) { animation-delay: .1s; }
.menu__card-n { font-family: var(--display); font-style: italic; font-size: clamp(4rem, 6vw, 5.6rem); line-height: .9; color: var(--brass-hi); }
.menu__card h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); color: var(--cream); }
.menu__card p { max-width: 36ch; }
.menu__office, .menu__brand { opacity: 0; transition: opacity .6s var(--ease); }
.menu.is-open .menu__office, .menu.is-open .menu__brand { opacity: 1; transition-delay: .55s; }
.menu__close i::before { transform: translateY(3px) rotate(45deg); }
.menu__close i::after { transform: translateY(-3px) rotate(-45deg); }
.menu__main a small, .menu__quick { display: none; }
.menu__address span { display: block; }

/* Mobile menu: links with a one-line description, actions anchored at the bottom */
@media (max-width: 780px) {
  .menu { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; }
  .menu__main { border: 0; padding: 96px var(--gutter) 16px; justify-content: center; }
  .menu__main a {
    display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: start;
    font-size: clamp(1.55rem, 6.6vw, 2rem); line-height: 1.15; white-space: normal; padding-block: 10px;
  }
  .menu__main a::before { grid-row: 1 / span 2; width: auto; padding-top: .55em; line-height: 1; }
  .menu__main a small {
    display: block; grid-column: 2; font-family: var(--sans); font-style: normal;
    font-size: .74rem; line-height: 1.4; letter-spacing: 0; color: var(--mute-d);
  }
  .menu__brand .brand__name { font-size: .82rem; letter-spacing: .12em; }
  .menu__brand svg { width: 32px; height: 32px; }
  .menu__close { font-size: 0; gap: 0; }
  .menu__main a:hover { padding-left: 0; font-style: normal; }
  .menu__main a[aria-current="page"] span { color: var(--brass-hi); font-style: italic; }
  .menu__side {
    display: flex; overflow: visible; gap: 0; justify-content: flex-end;
    padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-d);
  }
  .menu__card, .menu__office > .smallcaps, .menu__office > p:nth-of-type(2) { display: none; }
  .menu__office { gap: 12px; }
  .menu__office > div:first-of-type { order: 1; }
  .menu__office .btn { width: 100%; justify-content: space-between; }
  .menu__quick { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .menu__quick a {
    display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px;
    border: 1px solid var(--rule-d-strong); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
    transition: background .4s, color .4s;
  }
  .menu__quick a:active { background: var(--cream); color: var(--ink); }
  .menu__quick svg { width: 18px; height: 18px; color: var(--brass-hi); }
  .menu__address { order: 3; font-size: .78rem; line-height: 1.6; text-align: center; margin-top: 4px; }
  .menu__address span { display: inline; }
  .menu__address span + span::before { content: " · "; }
  .menu__address span:nth-child(3) { display: none; }
}

/* ---------- Certificate frame ---------- */

.frame { position: absolute; inset: 14px; pointer-events: none; border: 1px solid var(--rule-d-strong); z-index: 2; }
.frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule-d); }
.frame i { position: absolute; width: 22px; height: 22px; border: 1px solid var(--brass-hi); }
.frame i:nth-child(1) { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.frame i:nth-child(2) { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.frame i:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.frame i:nth-child(4) { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

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

.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); align-content: end;
  padding: 180px var(--gutter) clamp(64px, 7vw, 100px);
}
/* the brass light only belongs behind the home certificate */
.hero:not(:has(.cert-card))::after { display: none; }
/* soft brass light behind the certificate, like a desk lamp on paper */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 34% 48% at 82% 44%, rgba(201, 169, 107, .13), transparent 70%); }
.hero > :where(:not(.frame, .cert-card)) { position: relative; z-index: 3; grid-column: 1 / -1; }
.hero__kicker { display: flex; gap: 22px; align-items: center; margin-bottom: 36px; flex-wrap: wrap; }
.hero__title { font-size: clamp(3.2rem, 9.6vw, 10.4rem); line-height: .9; max-width: 10ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.4s var(--ease); }
.is-loaded .hero__title .line > span { transform: none; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .2s; }
.hero__foot {
  margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--rule-d-strong);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 24px; align-items: end;
}
.hero__foot .lead { grid-column: 1 / span 5; color: var(--cream); }
.hero__foot .cert { grid-column: 6 / span 4; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: .8rem; color: var(--mute-d); }
.hero__foot .cert dt { font-family: var(--display); letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; color: var(--brass-hi); padding-top: 2px; }
.hero__foot .actions { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 1000px) {
  .hero__foot > * { grid-column: 1 / -1 !important; justify-self: start !important; }
}
.page-hero { min-height: 82svh; }
.page-hero .hero__title { font-size: clamp(3rem, 8.4vw, 8.8rem); max-width: 12ch; }

/* ---------- Ledger: index + sticky preview ---------- */

.ledger-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.ledger-wrap .ledger { grid-column: 1 / span 7; }
.ledger { list-style: none; border-top: 1px solid var(--rule-strong); }
.ledger li { position: relative; }
.ledger li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io); transition-delay: inherit; }
.ledger li.is-in::after { transform: scaleX(1); }
.ledger__row {
  position: relative; width: 100%; isolation: isolate;
  display: grid; grid-template-columns: 48px auto minmax(24px, 1fr) auto 34px; column-gap: 16px; align-items: baseline;
  padding: 20px 16px; transition: color .5s var(--ease);
}
.ledger__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.ledger__row:hover, .ledger__row.is-active { color: var(--cream); }
.ledger__row:hover::before, .ledger__row.is-active::before { transform: scaleX(1); }
.ledger__n { font-family: var(--display); font-style: italic; color: var(--brass); font-size: 1rem; }
.ledger__row:hover .ledger__n, .ledger__row.is-active .ledger__n { color: var(--brass-hi); }
.ledger__row h3 { font-size: clamp(1.3rem, 1.8vw, 1.75rem); font-weight: 400; color: inherit; transition: transform .6s var(--ease); }
.ledger__row.is-active h3 { transform: translateX(8px); font-style: italic; }
.ledger__dots { height: 2px; background-image: radial-gradient(circle, currentColor .9px, transparent 1.1px); background-size: 7px 2px; background-repeat: repeat-x; opacity: .4; }
.ledger__tag { font-family: var(--display); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; transition: color .5s; }
.ledger__row:hover .ledger__tag, .ledger__row.is-active .ledger__tag { color: var(--brass-hi); }
.ledger__go { align-self: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; opacity: .35; transition: opacity .4s, transform .6s var(--ease); }
.ledger__row:hover .ledger__go, .ledger__row.is-active .ledger__go { opacity: 1; transform: rotate(-45deg); }
.ledger__go svg { width: 14px; }
.ledger__row p { grid-column: 2 / -1; display: none; font-size: .9rem; color: var(--mute); margin-top: 8px; }

/* Preview card: the open page of the ledger */
.ledger-preview {
  grid-column: 9 / -1; position: sticky; top: 110px;
  background: var(--paper-2); border: 1px solid var(--rule-strong); overflow: hidden; color: var(--brass);
  padding: clamp(28px, 3vw, 44px); min-height: 480px;
}
.paper-2 .ledger-preview { background: var(--paper); }
.ledger-preview::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rule); pointer-events: none; }
.ledger-preview__inner { position: relative; display: flex; flex-direction: column; gap: 16px; color: var(--text); transition: opacity .18s, transform .18s; }
.ledger-preview__inner.is-changing { opacity: 0; transform: translateY(8px); }
.ledger-preview__inner > * { animation: previewIn .7s var(--ease) both; }
.ledger-preview__inner > :nth-child(2) { animation-delay: .04s; }
.ledger-preview__inner > :nth-child(3) { animation-delay: .08s; }
.ledger-preview__inner > :nth-child(4) { animation-delay: .12s; }
.ledger-preview__inner > :nth-child(n+5) { animation-delay: .16s; }
@keyframes previewIn { from { opacity: 0; transform: translateY(10px); } }
.ledger-preview__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.ledger-preview__n { font-family: var(--display); font-style: italic; font-size: clamp(4rem, 6vw, 5.6rem); line-height: .85; color: var(--brass); }
.ledger-preview h3 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.ledger-preview p { color: var(--mute); }
.ledger-preview ul { list-style: none; border-top: 1px solid var(--rule-strong); counter-reset: pv; }
.ledger-preview li { display: grid; grid-template-columns: 30px 1fr; padding-block: 9px; border-bottom: 1px solid var(--rule); font-size: .92rem; counter-increment: pv; }
.ledger-preview li::before { content: counter(pv, lower-roman) "."; font-family: var(--display); font-style: italic; color: var(--brass); }
.ledger-preview .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 1000px) {
  .ledger-wrap .ledger { grid-column: 1 / -1; }
  .ledger-preview { display: none; }
  .ledger__row { grid-template-columns: 40px 1fr 34px; }
  .ledger__dots, .ledger__tag { display: none; }
  .ledger__row p { display: block; }
}

/* ---------- Slips (cards as certificate slips) ---------- */

.slips { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.slips--4 { grid-template-columns: repeat(4, 1fr); }
.slips--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .slips--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .slips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .slips, .slips--4, .slips--2 { grid-template-columns: 1fr; } }
.slip {
  position: relative; width: 100%; text-align: left; overflow: hidden;
  background: var(--paper); border: 1px solid var(--rule-strong);
  padding: clamp(24px, 2.4vw, 36px); min-height: clamp(280px, 24vw, 360px);
  display: flex; flex-direction: column; gap: 26px;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s;
}
.paper-2 .slip { background: var(--paper); }
.ink .slip { background: var(--ink-2); border-color: var(--rule-d-strong); }
.slip::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); pointer-events: none; transition: inset .6s var(--ease), border-color .5s; }
.slip:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(13,29,24,.45); border-color: var(--brass); }
.slip:hover::after { inset: 10px; border-color: var(--brass); }
.slip__top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.slip__icon { width: 46px; height: 46px; color: var(--brass); }
.ink .slip__icon { color: var(--brass-hi); }
.slip__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.slip__no { font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--brass); line-height: 1; }
.ink .slip__no { color: var(--brass-hi); }
.slip h3 { margin-block: 8px 10px; }
.slip p { color: var(--mute); font-size: .93rem; }
.slip .link { margin-top: auto; align-self: flex-start; }
.slip--guide { padding: 0; }
.slip--guide .slip__art { height: clamp(170px, 15vw, 220px); border-bottom: 1px solid var(--rule-strong); position: relative; overflow: hidden; background: var(--ink); }
.slip--guide .slip__art svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; transition: transform 1.8s var(--ease); }
.slip--guide:hover .slip__art svg { transform: scaleX(1.12); }
.slip--guide .slip__art span { position: absolute; left: 24px; bottom: 16px; font-family: var(--display); font-size: 2.6rem; color: var(--cream); line-height: 1; }
.slip--guide .slip__body { padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* ---------- Practices (two halves) ---------- */

.practices { display: grid; grid-template-columns: 1fr 1fr; }
.practice {
  position: relative; overflow: hidden; min-height: 86svh; padding: clamp(40px, 5vw, 80px) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 50px;
}
.practice + .practice { border-left: 1px solid var(--rule-d); }
.practice__no { font-family: var(--display); font-style: italic; font-size: clamp(5rem, 10vw, 10rem); line-height: .8; color: var(--brass-hi); }
.practice h3 { font-size: clamp(2.2rem, 3.8vw, 3.8rem); margin-block: 14px 16px; }
.practice p { max-width: 42ch; color: var(--mute-d); }
.practice ul { list-style: none; margin-block: 24px 32px; border-top: 1px solid var(--rule-d); }
.practice li { padding-block: 10px; border-bottom: 1px solid var(--rule-d); font-size: .92rem; display: flex; justify-content: space-between; }
.practice li::after { content: attr(data-n); font-family: var(--display); font-style: italic; color: var(--brass-hi); }
.practice__actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .practices { grid-template-columns: 1fr; } .practice + .practice { border-left: 0; border-top: 1px solid var(--rule-d); } .practice { min-height: 70svh; } }

/* ---------- Steps: sticky numeral ---------- */

.steps { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.steps__aside { grid-column: 1 / span 5; position: relative; }
.steps__sticky { position: sticky; top: 18vh; display: flex; flex-direction: column; gap: 24px; }
.steps__numeral { position: relative; font-size: clamp(9rem, 17vw, 16rem); height: 1.05em; overflow: hidden; }
.steps__numeral span {
  position: absolute; left: 0; top: 0; font-family: var(--display); font-style: italic; line-height: 1.05;
  font-size: inherit; color: var(--brass-hi);
  transform: translateY(105%); transition: transform .9s var(--ease);
}
.steps__numeral span.is-active { transform: none; }
.steps__numeral span.is-past { transform: translateY(-105%); }
.steps__list { grid-column: 7 / -1; list-style: none; }
.step { width: 100%; text-align: left; display: grid; gap: 14px; padding-block: clamp(50px, 9vh, 90px); border-top: 1px solid var(--rule-d); opacity: .35; transition: opacity .6s; }
.step.is-active { opacity: 1; }
.step h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.step p { color: var(--mute-d); max-width: 44ch; }
.step .link { justify-self: start; }
@media (max-width: 900px) { .steps__aside { display: none; } .steps__list { grid-column: 1 / -1; } .step { opacity: 1; } }

/* ---------- Figures ---------- */

.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--rule-strong); }
.figure { padding: clamp(32px, 4vw, 56px) var(--gutter); border-right: 1px solid var(--rule); }
.figure:last-child { border-right: 0; }
.figure__n { font-family: var(--display); font-size: clamp(3.4rem, 6vw, 6rem); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.figure__n sup { font-size: .3em; font-style: italic; color: var(--brass); vertical-align: top; margin-left: 4px; }
.figure p { margin-top: 10px; color: var(--mute); font-size: .86rem; }
.figure .roman { display: block; font-family: var(--display); font-style: italic; color: var(--brass); margin-bottom: 6px; }
@media (max-width: 860px) { .figures { grid-template-columns: 1fr 1fr; } .figure:nth-child(2) { border-right: 0; } .figure:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }

/* ---------- Seal ---------- */

.seal { width: clamp(120px, 12vw, 170px); aspect-ratio: 1; color: var(--brass); }
.ink .seal { color: var(--brass-hi); }
.seal svg { width: 100%; height: 100%; }
.seal text { font-family: var(--display); font-size: 9.2px; letter-spacing: 3.2px; fill: currentColor; text-transform: uppercase; }
.seal.reveal { opacity: 0; transform: scale(1.35) rotate(-14deg); transition: opacity .5s, transform .7s cubic-bezier(.2, 1.6, .4, 1); translate: none; }
.seal.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Testimonials ---------- */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote { border-top: 1px solid var(--rule-strong); padding-top: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 260px; }
.quote blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.35; color: var(--ink); }
.quote blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: .6; color: var(--brass); font-style: normal; }
.quote cite { font-style: normal; font-size: .86rem; }
[data-placeholder] { position: relative; outline: 1px dashed var(--brass); outline-offset: 8px; }
[data-placeholder]::before {
  content: "Placeholder — verified content required"; position: absolute; top: -18px; right: 0; z-index: 2;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--brass); padding: 3px 8px;
}

/* ---------- Signatories (team) ---------- */

.signatories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 900px) { .signatories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .signatories { grid-template-columns: 1fr; } }
.signatory { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cameo {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 4 / 5; border-radius: 50%;
  padding: 10px; border: 1px solid var(--brass); transition: transform .8s var(--ease);
}
.cameo::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--rule-strong); }
.cameo__img { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--ink); }
.cameo__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  filter: grayscale(1) sepia(.35) contrast(1.15) brightness(.95); transform: scale(1.08); transition: transform 1.4s var(--ease), filter .8s;
}
/* engraved line screen, like a banknote portrait */
.cameo__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55; transition: opacity .8s;
  background: repeating-linear-gradient(0deg, rgba(13,29,24,.55) 0 1px, transparent 1px 3px);
}
.signatory:hover .cameo { transform: translateY(-6px); }
.signatory:hover .cameo__img img { transform: scale(1.02); filter: grayscale(.2) sepia(.1) contrast(1.05); }
.signatory:hover .cameo__img::after { opacity: .15; }
.cameo__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 4rem; color: var(--brass-hi); }
.signature { width: 100%; max-width: 280px; display: grid; gap: 6px; }
.signature h3 { font-style: italic; }
.signature hr { border: 0; height: 1px; background: var(--rule-strong); transform: scaleX(0); transition: transform 1.2s var(--ease-io) .3s; }
.signatory.is-in .signature hr { transform: scaleX(1); }
.signature .smallcaps { justify-content: center; font-size: .68rem; }

/* ---------- Timeline ---------- */

.timeline { list-style: none; border-top: 1px solid var(--rule-strong); }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 30px; padding-block: clamp(24px, 3vw, 38px); }
.timeline li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-io); }
.timeline li.is-in::after { transform: scaleX(1); }
.timeline time { font-family: var(--display); font-style: italic; font-size: clamp(2.2rem, 3.6vw, 3.4rem); color: var(--brass); line-height: 1; }
.timeline h3 { margin-bottom: 8px; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.faq__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 22px; }
.acc { grid-column: 6 / -1; border-top: 1px solid var(--rule-strong); }
@media (max-width: 900px) { .faq__head, .acc { grid-column: 1 / -1; } .acc { margin-top: 40px; } }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 30px; align-items: baseline; gap: 16px; padding-block: 24px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary em { font-family: var(--display); color: var(--brass); }
.acc summary span { font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.25; transition: color .4s; }
.acc summary:hover span { color: var(--brass); }
.acc summary i { font-style: normal; font-family: var(--display); font-size: 1.6rem; color: var(--brass); transition: transform .5s var(--ease); justify-self: end; }
.acc details[open] summary i { transform: rotate(45deg); }
.acc details p { padding: 0 40px 26px 56px; color: var(--mute); }

/* ---------- CTA band ---------- */

.cta { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: center; padding-block: clamp(90px, 12vw, 170px); }
.cta__text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 26px; }
.cta h2 { font-size: clamp(2.6rem, 6vw, 6rem); }
.cta .seal { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 900px) { .cta__text, .cta .seal { grid-column: 1 / -1; justify-self: start; } .cta .seal { margin-top: 40px; } }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 60px; }
.contact-grid > :first-child { grid-column: 1 / span 5; }
.contact-grid > :last-child { grid-column: 7 / -1; }
@media (max-width: 900px) { .contact-grid > * { grid-column: 1 / -1 !important; } }
.info-list { list-style: none; border-top: 1px solid var(--rule-strong); }
.info-list li { padding-block: 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
.info-list .smallcaps { font-size: .68rem; padding-top: 4px; }
.info-list a:hover { color: var(--brass); }
@media (max-width: 500px) { .info-list li { grid-template-columns: 1fr; gap: 6px; } }

.form { display: grid; gap: 28px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong);
  color: var(--ink); font: inherit; font-size: 1.05rem; padding: 26px 0 10px; outline: none; border-radius: 0;
}
.field select { appearance: none; cursor: pointer; }
.field textarea { resize: vertical; min-height: 100px; }
.field label { position: absolute; left: 0; top: 26px; color: var(--mute); pointer-events: none; transition: transform .4s var(--ease), color .4s; transform-origin: left; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { transform: translateY(-24px) scale(.8); color: var(--brass); }
.field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.check { display: flex; gap: 12px; align-items: start; font-size: .84rem; color: var(--mute); }
.check input { accent-color: var(--ink); margin-top: 5px; }
.check a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.form__status { font-size: .82rem; color: var(--brass); min-height: 1em; }

/* ---------- Modal: a certificate drawn from the drawer ---------- */

.modal {
  position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: clamp(14px, 4vw, 48px);
  visibility: hidden; pointer-events: none; transition: visibility 0s linear .7s;
}
.modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(13, 29, 24, .78); opacity: 0; transition: opacity .6s var(--ease); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; width: min(1120px, 100%); max-height: calc(100svh - 28px); overflow: hidden auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--text);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(70px) rotate(1.4deg); transform-origin: 30% 100%;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform 1.1s var(--ease); }
.modal__panel::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); pointer-events: none; z-index: 3; }

.modal__visual {
  position: relative; overflow: hidden; background: var(--ink); color: var(--cream); min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 3vw, 48px);
}
.modal__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(1) sepia(.3) contrast(1.1); transform: scale(1.12); transition: transform 1.6s var(--ease) .1s, opacity .4s; }
.modal.is-open .modal__visual img { transform: none; }
.modal__visual img + .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,29,24,.2), rgba(13,29,24,.88)); }
.modal__visual > *:not(img):not(.shade) { position: relative; z-index: 1; }
.modal__visual .serial { color: var(--brass-hi); }
.modal__visual .big { font-family: var(--display); font-style: italic; font-size: clamp(4.4rem, 8vw, 7.8rem); line-height: .85; color: var(--cream); transition: opacity .4s, transform .6s var(--ease); }
.modal__visual.is-swapping img, .modal__visual.is-swapping .big { opacity: 0; transform: translateY(14px); }

.modal__body { position: relative; padding: clamp(30px, 4vw, 60px); display: flex; flex-direction: column; gap: 20px; }
.modal__body > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.modal.is-open .modal__body > * { opacity: 1; transform: none; transition-duration: .9s; }
.modal.is-open .modal__body > *:nth-child(1) { transition-delay: .3s; }
.modal.is-open .modal__body > *:nth-child(2) { transition-delay: .36s; }
.modal.is-open .modal__body > *:nth-child(3) { transition-delay: .42s; }
.modal.is-open .modal__body > *:nth-child(4) { transition-delay: .48s; }
.modal.is-open .modal__body > *:nth-child(5) { transition-delay: .54s; }
.modal.is-open .modal__body > *:nth-child(n+6) { transition-delay: .6s; }
.modal__body h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); max-width: 16ch; }
.modal__text { display: grid; gap: 12px; color: var(--mute); }
.modal__text p.fine { border-top: 1px solid var(--rule); padding-top: 12px; }
.modal__body ul { list-style: none; border-top: 1px solid var(--rule-strong); }
.modal__body li { display: grid; grid-template-columns: 34px 1fr; padding-block: 10px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; counter-increment: pt; }
.modal__body ul { counter-reset: pt; }
.modal__body li::before { content: counter(pt, lower-roman) "."; font-family: var(--display); font-style: italic; color: var(--brass); }
.modal__body li a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.modal__actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.modal__seal { position: absolute; right: clamp(24px, 3vw, 44px); bottom: clamp(24px, 3vw, 44px); width: 92px; opacity: 0; transform: scale(1.6) rotate(-20deg); transition: opacity .2s, transform .2s; pointer-events: none; }
.modal.is-open .modal__seal { opacity: .9; transform: rotate(-8deg); transition: opacity .3s .9s, transform .55s cubic-bezier(.2, 1.6, .4, 1) .9s; }
.modal__close { position: absolute; top: 22px; right: 22px; z-index: 4; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: transform .6s var(--ease), background .4s, color .4s; }
.modal__close:hover { transform: rotate(90deg); background: var(--ink); color: var(--cream); }
.modal__nav { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 8px; }
.modal__nav button { font-family: var(--display); font-style: italic; font-size: .98rem; color: var(--mute); transition: color .3s; }
.modal__nav button:hover { color: var(--ink); }
.modal__nav[hidden] { display: none; }
@media (min-width: 861px) { .modal__nav { margin-right: 110px; } }
.modal__body.is-swapping-out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); transition: opacity .25s, transform .3s var(--ease); }
.modal--form .modal__panel { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
@media (max-width: 860px) {
  .modal__panel, .modal--form .modal__panel { grid-template-columns: 1fr; }
  .modal__visual { min-height: 220px; }
  .modal__seal { display: none; }
}

/* ---------- Footer: the certificate stub ---------- */

.footer { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; }
.footer__perf { height: 14px; background: radial-gradient(circle at 7px -2px, var(--paper) 6px, transparent 6.5px) 0 0 / 22px 14px repeat-x; }
.footer__cta {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 30px; align-items: end;
  padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 7vw, 100px); border-bottom: 1px solid var(--rule-d);
}
.footer__cta .smallcaps { grid-column: 1 / -1; color: var(--brass-hi); }
.footer__big { grid-column: 1 / span 8; font-family: var(--display); font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .95; text-align: left; color: var(--cream); }
.footer__big em { color: var(--brass-hi); }
.footer__big span { display: inline-block; border-bottom: 1px solid var(--rule-d-strong); transition: border-color .6s; }
.footer__big:hover span { border-color: var(--brass-hi); }
.footer__cta p { grid-column: 9 / -1; color: var(--mute-d); max-width: 34ch; }
@media (max-width: 900px) { .footer__cta > * { grid-column: 1 / -1 !important; } }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(30px, 4vw, 60px); padding: clamp(50px, 6vw, 80px) var(--gutter); }
.footer__grid h4 { font-family: var(--display); font-weight: 400; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 18px; }
.footer__grid ul { list-style: none; display: grid; gap: 9px; }
.footer__grid li { color: var(--mute-d); }
.footer__grid li a { color: var(--cream); transition: color .4s; }
.footer__grid li a:hover { color: var(--brass-hi); }
.footer__brand { display: flex; flex-direction: column; gap: 22px; }
.footer__brand p { color: var(--mute-d); max-width: 32ch; }
.footer__sign { display: grid; gap: 8px; max-width: 260px; margin-top: 10px; }
.footer__sign svg { width: 200px; height: 54px; color: var(--cream); }
.footer__sign svg path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io); }
.footer__sign.is-in svg path { stroke-dashoffset: 0; }
.footer__sign hr { border: 0; height: 1px; background: var(--rule-d-strong); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__legal { display: grid; grid-template-columns: 1fr auto; gap: 16px 40px; align-items: center; padding: 22px var(--gutter); border-top: 1px solid var(--rule-d); font-size: .76rem; color: var(--mute-d); }
.footer__legal a { color: var(--cream); border-bottom: 1px solid var(--rule-d-strong); }
.to-top { font-family: var(--display); font-style: italic; color: var(--brass-hi); }
@media (max-width: 700px) { .footer__legal { grid-template-columns: 1fr; } }

/* ---------- Legal prose ---------- */

.prose { max-width: 780px; display: grid; gap: 18px; }
.prose h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 36px; }
.prose a { color: var(--brass); border-bottom: 1px solid var(--rule-strong); }
.prose dl { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--rule-strong); }
.prose dt, .prose dd { padding-block: 14px; border-bottom: 1px solid var(--rule); }
.prose dt { font-family: var(--display); color: var(--brass); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding-top: 18px; }
@media (max-width: 600px) { .prose dl { grid-template-columns: 1fr; } .prose dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Reveal ---------- */

.reveal { opacity: 0; translate: 0 34px; transition: opacity 1.1s var(--ease), translate 1.1s var(--ease); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.split-lines .line { display: block; overflow: hidden; padding-bottom: .06em; }
.split-lines .line > span { display: inline-block; transform: translateY(108%); transition: transform 1.2s var(--ease); }
.split-lines.is-in .line > span { transform: none; }
.split-lines.is-in .line:nth-child(2) > span { transition-delay: .09s; }
.split-lines.is-in .line:nth-child(3) > span { transition-delay: .18s; }
.rule-draw { height: 1px; background: var(--rule-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-io); }
.rule-draw.is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; translate: none; }
  .split-lines .line > span, .hero__title .line > span { transform: none; }
}

/* ==========================================================================
   Colour & motion layer
   ========================================================================== */

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Reading progress under the header ---------- */
.header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--brass); transform: scaleX(var(--progress, 0)); transform-origin: left;
}

/* ---------- Page transition: an ink curtain ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 9400; background: var(--ink); color: var(--cream);
  display: grid; place-items: center; pointer-events: none;
  transform: translateY(100%);
}
.curtain.is-covering { transform: none; pointer-events: auto; transition: transform .75s var(--ease-io); }
.curtain.is-leaving { transform: translateY(-100%); transition: transform .9s var(--ease-io) .1s; }
.curtain.is-instant { transition: none !important; }
.curtain__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.curtain svg { width: 48px; height: 48px; color: var(--brass-hi); }
.curtain__label { font-family: var(--display); font-style: italic; font-size: clamp(2rem, 4vw, 3.4rem); overflow: hidden; line-height: 1.2; }
.curtain__label span { display: inline-block; transform: translateY(110%); transition: transform .7s var(--ease) .2s; }
.curtain.is-covering .curtain__label span { transform: none; }

/* ---------- Coloured slips ---------- */
.slip { padding: 0; min-height: 0; gap: 0; }
.slip__band {
  position: relative; overflow: hidden; height: clamp(150px, 12vw, 190px);
  background: var(--band, var(--ink)); color: var(--cream);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 22px clamp(22px, 2.2vw, 32px);
}
.slips > :nth-child(3n + 2) { --band: var(--wine); }
.slips > :nth-child(3n + 3) { --band: var(--bronze); }
.ink .slip { --band: var(--paper); }
.ink .slip .slip__band { color: var(--ink); }
.ink .slips > :nth-child(3n + 2) { --band: var(--brass-hi); }
.ink .slips > :nth-child(3n + 3) { --band: #b9c4b9; }
.slip__band .slip__no { position: relative; color: inherit; font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: .8; transition: transform .8s var(--ease); }
.slip:hover .slip__band .slip__no { transform: translateY(-6px); }
.slip__band .slip__icon { position: relative; color: inherit; width: 40px; height: 40px; }
.slip__band .slip__icon svg * { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 2s var(--ease) .4s; }
.slip.is-in .slip__band .slip__icon svg * { stroke-dashoffset: 0; }
.slip__body { padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.slip__body h3 { margin: 4px 0 2px; font-size: clamp(1.5rem, 1.9vw, 1.9rem); }
.slip__body p { font-size: 1rem; line-height: 1.6; }
.slip__body .link { margin-top: 14px; align-self: flex-start; }
.slip::after { inset: 6px; }

/* dealt onto the desk: each slip lands with a slight angle */
.slip.reveal { translate: 0 70px; rotate: -2.2deg; transition: opacity .9s var(--ease), translate 1.2s var(--ease), rotate 1.4s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s; }
.slips > :nth-child(even).reveal { rotate: 1.8deg; }
.slip.reveal.is-in { translate: 0 0; rotate: 0deg; }

/* ---------- Ledger preview: an ink header ---------- */
.ledger-preview { padding: 0; }
.ledger-preview__inner { gap: 14px; padding: 0 clamp(26px, 2.6vw, 40px) clamp(26px, 2.6vw, 40px); }
.ledger-preview__top {
  position: relative; overflow: hidden; margin: 0 calc(-1 * clamp(26px, 2.6vw, 40px)) 10px;
  padding: 26px clamp(26px, 2.6vw, 40px) 22px; background: var(--ink); color: var(--cream); min-height: 170px; align-items: flex-end;
}
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.ledger-preview__top > :not(svg) { position: relative; }
.ledger-preview__n { color: var(--brass-hi); }
.ledger-preview__top .slip__icon { color: var(--cream); }
.ledger-preview::after { z-index: 2; }

/* ---------- Portraits unveiled inside their cameo ---------- */
.cameo__img { clip-path: ellipse(50% 0% at 50% 100%); transition: clip-path 1.6s var(--ease-io); }
.signatory.is-in .cameo__img { clip-path: ellipse(50% 50% at 50% 50%); }
.signatory .cameo__img img { transform: scale(1.3); }
.signatory.is-in .cameo__img img { transform: scale(1.08); }
.signatory.is-in:hover .cameo__img img { transform: scale(1.02); }
.signatory:nth-child(2) .cameo__img { transition-delay: .15s; }
.signatory:nth-child(3) .cameo__img { transition-delay: .3s; }

/* ---------- Hero certificate (issued live) ---------- */
.cert-card {
  position: absolute; z-index: 2; top: clamp(110px, 16vh, 170px); right: calc(var(--gutter) + 1vw);
  width: clamp(300px, 27vw, 450px); perspective: 1400px;
}
.cert-card__float { animation: float 7s ease-in-out infinite; animation-play-state: paused; }
.is-loaded .cert-card__float { animation-play-state: running; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cert-card__paper {
  /* paper keeps its own ink colours even inside a dark hero */
  --text: #22322d; --mute: #5f6c66; --rule: rgba(13, 29, 24, .16); --rule-strong: rgba(13, 29, 24, .36);
  position: relative; overflow: hidden; color: var(--ink);
  background: linear-gradient(160deg, #f3eee2, #e7dfcd);
  padding: clamp(24px, 2.2vw, 34px) clamp(22px, 2vw, 32px);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.85), 0 18px 30px -18px rgba(0,0,0,.6);
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-3deg);
  transition: transform .9s var(--ease);
  opacity: 0; translate: 0 90px; rotate: 9deg;
}
.is-loaded .cert-card__paper { opacity: 1; translate: 0 0; rotate: 0deg; transition: opacity .8s var(--ease) .5s, translate 1.6s var(--ease) .5s, rotate 1.8s var(--ease) .5s, transform .9s var(--ease); }
/* soft light passing over the paper */
.cert-card__paper::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-60%); animation: glare 9s ease-in-out 3.5s infinite;
}
@keyframes glare { 0%, 70% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.cert-card__frame { position: absolute; inset: 10px; pointer-events: none; }
.cert-card__frame rect { fill: none; stroke: var(--brass); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cert-card__frame rect + rect { stroke-opacity: .45; }
.is-loaded .cert-card__frame rect { animation: drawIn 2s var(--ease-io) 1s forwards; }
.cert-card__body { position: relative; display: grid; gap: 10px; text-align: center; padding-block: 48px 52px; }
.cert-card__body > * { opacity: 0; transform: translateY(8px); }
.is-loaded .cert-card__body > * { animation: lineIn .8s var(--ease) forwards; animation-delay: calc(1.6s + var(--d, 0) * .18s); }
@keyframes lineIn { to { opacity: 1; transform: none; } }
.cert-card .smallcaps { justify-content: center; font-size: .6rem; color: var(--brass); }
.cert-card h4 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.1; color: var(--ink); }
.cert-card p { font-size: .78rem; color: var(--mute); line-height: 1.5; }
.cert-card__serial { font-family: var(--display); font-size: .78rem; letter-spacing: .16em; color: var(--wine); font-variant-numeric: tabular-nums; }
.cert-card__hand { font-family: "Pinyon Script", cursive; font-size: clamp(1.7rem, 2.3vw, 2.3rem); color: var(--ink); line-height: 1.1; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.is-loaded .cert-card__hand { --at: calc(1.6s + var(--d, 4) * .18s); animation: lineIn .1s var(--at) forwards, write 2.2s steps(28) var(--at) forwards; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.cert-card__rule { height: 1px; background: var(--rule-strong); width: 70%; justify-self: center; }
.cert-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: 10px; text-align: left; }
.cert-card__sign { display: grid; gap: 4px; }
.cert-card__sign svg { width: 120px; height: 32px; }
.cert-card__sign path { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-loaded .cert-card__sign path { animation: drawIn 1.8s var(--ease-io) 4.4s forwards; }
.cert-card__sign span { font-size: .6rem; color: var(--mute); border-top: 1px solid var(--rule-strong); padding-top: 4px; }
.cert-card__stamp {
  border: 1.5px solid var(--wine); outline: 1px solid var(--wine); outline-offset: 2px; color: var(--wine);
  font-family: var(--display); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  padding: 6px 9px; line-height: 1.5; opacity: 0; transform: scale(1.8) rotate(-18deg);
}
.cert-card__stamp b { display: block; font-size: .95rem; letter-spacing: .08em; font-weight: 400; font-style: italic; }
.is-loaded .cert-card__stamp { animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) 6.2s forwards; }
@keyframes stamp { to { opacity: .85; transform: scale(1) rotate(-8deg); } }
@media (max-width: 1100px) { .cert-card { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cert-card__paper, .cert-card__body > *, .cert-card__stamp, .slip.reveal { opacity: 1 !important; translate: none !important; rotate: none !important; transform: none !important; }
  .cert-card__hand, .cameo__img { clip-path: none !important; }
  .folio-head::before, .folio-head::after, .ledger li::after, .timeline li::after { transform: none !important; }
}

/* ---------- Fine double rule inside the coloured panels ---------- */
.slip__band::before, .slip__band::after,
.slip--guide .slip__art::before, .slip--guide .slip__art::after,
.ledger-preview__top::before, .ledger-preview__top::after,
.modal__visual::before, .modal__visual::after {
  content: ""; position: absolute; pointer-events: none; border: 1px solid currentColor;
  transition: inset .8s var(--ease), opacity .6s;
}
.slip__band::before, .slip--guide .slip__art::before, .ledger-preview__top::before, .modal__visual::before { inset: 10px; opacity: .28; }
.slip__band::after, .slip--guide .slip__art::after, .ledger-preview__top::after, .modal__visual::after { inset: 14px; opacity: .14; }
.slip--guide .slip__art, .modal__visual { color: var(--brass-hi); }
.slip--guide .slip__art span, .modal__visual > * { color: var(--cream); }
.modal__visual .serial { color: var(--brass-hi); }
.slip:hover .slip__band::before, .slip--guide:hover .slip__art::before { inset: 14px; opacity: .4; }
.slip:hover .slip__band::after, .slip--guide:hover .slip__art::after { inset: 18px; }

/* ---------- Inner-page hero documents ---------- */
.page-hero:has(.cert-card) { min-height: 100svh; }
/* sized on height too, so the document never runs into the hero's bottom rule */
.doc-card { width: clamp(270px, min(25vw, 44vh), 410px); top: clamp(104px, 14vh, 150px); }
.doc-card .cert-card__body { gap: 12px; padding-block: 34px 30px; }

/* private clients: plan lines ticked one by one */
.doc-list { list-style: none; text-align: left; border-top: 1px solid var(--rule-strong); margin-top: 6px; }
.doc-list li { display: flex; justify-content: space-between; align-items: center; padding-block: 9px; border-bottom: 1px solid var(--rule); font-size: .82rem; color: var(--text); opacity: 0; transform: translateY(6px); }
.doc-list em { font-family: var(--display); color: var(--brass); margin-right: 10px; }
.is-loaded .doc-list li { animation: lineIn .7s var(--ease) forwards; animation-delay: calc(1.6s + var(--d) * .18s); }
.doc-check { width: 16px; height: 16px; flex: none; }
.doc-check path { fill: none; stroke: var(--wine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-loaded .doc-check path { animation: drawIn .5s var(--ease) forwards; animation-delay: calc(2.3s + var(--d) * .18s); }

/* corporate: engraved bar chart that grows */
.doc-chart { height: 110px; display: flex; align-items: flex-end; gap: 10px; padding: 0 6px 0; border-bottom: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong);
  background: repeating-linear-gradient(0deg, transparent 0 21px, var(--rule) 21px 22px); }
.doc-chart i { flex: 1; height: var(--h); transform: scaleY(0); transform-origin: bottom;
  background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); border: 1px solid var(--ink); }
.doc-chart i:last-child { background: repeating-linear-gradient(135deg, var(--wine) 0 1px, transparent 1px 4px); border-color: var(--wine); }
.is-loaded .doc-chart i { animation: grow 1s var(--ease) forwards; animation-delay: calc(2.3s + var(--i) * .16s); }
@keyframes grow { to { transform: scaleY(1); } }
.doc-caption { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* the firm: register entries */
.doc-register { text-align: left; border-top: 1px solid var(--rule-strong); }
.doc-register div { display: flex; justify-content: space-between; gap: 14px; padding-block: 8px; border-bottom: 1px solid var(--rule); font-size: .8rem; opacity: 0; transform: translateY(6px); }
.doc-register dt { font-family: var(--display); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); padding-top: 2px; }
.doc-register dd { color: var(--ink); text-align: right; }
.is-loaded .doc-register div { animation: lineIn .7s var(--ease) forwards; animation-delay: calc(1.6s + var(--d) * .18s); }

/* contact: a letter being written */
.doc-hand-left { justify-self: start; text-align: left; }
.doc-lines { display: grid; gap: 14px; padding-block: 8px; }
.doc-lines i { height: 1px; background: var(--rule-strong); transform: scaleX(0); transform-origin: left; }
.doc-lines i:nth-child(2) { width: 92%; } .doc-lines i:nth-child(3) { width: 97%; } .doc-lines i:nth-child(4) { width: 60%; }
.is-loaded .doc-lines i { animation: grow-x .9s var(--ease-io) forwards; }
.is-loaded .doc-lines i:nth-child(1) { animation-delay: 2.9s; } .is-loaded .doc-lines i:nth-child(2) { animation-delay: 3.2s; }
.is-loaded .doc-lines i:nth-child(3) { animation-delay: 3.5s; } .is-loaded .doc-lines i:nth-child(4) { animation-delay: 3.8s; }
@keyframes grow-x { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .doc-list li, .doc-register div { opacity: 1 !important; transform: none !important; }
  .doc-chart i, .doc-lines i { transform: none !important; }
  .doc-check path { stroke-dashoffset: 0 !important; }
}

/* ---------- Hero with a document: title left, document right, in the grid flow ---------- */
.hero:has(.cert-card) { min-height: 100svh; align-content: center; padding-top: clamp(140px, 17vh, 180px); }
.hero:has(.cert-card) > .hero__kicker { grid-column: 1 / span 7; grid-row: 1; align-self: end; }
.hero:has(.cert-card) > .hero__title { grid-column: 1 / span 7; grid-row: 2; font-size: clamp(3rem, 7.4vw, 8.6rem); }
.hero:has(.cert-card) > .hero__foot { grid-row: 3; }
.hero .cert-card, .hero .doc-card {
  position: relative; top: auto; right: auto; z-index: 2;
  grid-column: 8 / -1; grid-row: 1 / span 2; align-self: center; justify-self: end;
  width: clamp(280px, 26vw, 420px); margin-block: 10px 30px;
}
@media (max-width: 1100px) {
  .hero:has(.cert-card) > .hero__kicker, .hero:has(.cert-card) > .hero__title { grid-column: 1 / -1; }
}

/* ---------- Margin chronology: a ledger annotation in the intro margin ---------- */
.margin-dates { list-style: none; position: relative; display: grid; gap: 20px; margin-top: 30px; padding-left: 20px; }
.margin-dates::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--brass);
  transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease-io) .3s;
}
.is-in .margin-dates::before { transform: scaleY(1); }
.margin-dates li { position: relative; display: grid; gap: 2px; opacity: 0; translate: 0 8px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.margin-dates li::before { content: ""; position: absolute; left: -20px; top: .75em; width: 12px; height: 1px; background: var(--brass); }
.is-in .margin-dates li { opacity: 1; translate: 0 0; }
.is-in .margin-dates li:nth-child(1) { transition-delay: .5s; }
.is-in .margin-dates li:nth-child(2) { transition-delay: .75s; }
.is-in .margin-dates li:nth-child(3) { transition-delay: 1s; }
.is-in .margin-dates li:nth-child(4) { transition-delay: 1.25s; }
.margin-dates b { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.25rem; color: var(--brass); line-height: 1.2; }
.margin-dates span { font-size: .8rem; color: var(--mute); line-height: 1.5; }
.margin-stamp {
  display: inline-block; margin-top: 34px; padding: 7px 12px; line-height: 1.4; text-align: center;
  border: 1.5px solid var(--wine); outline: 1px solid var(--wine); outline-offset: 2px; color: var(--wine);
  font-family: var(--display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transform: scale(1.7) rotate(-16deg);
}
.margin-stamp b { display: block; font-weight: 400; font-style: italic; font-size: 1.05rem; letter-spacing: .06em; }
.is-in .margin-stamp { animation: marginStamp .5s cubic-bezier(.2, 1.6, .4, 1) 1.7s forwards; }
@keyframes marginStamp { to { opacity: .85; transform: scale(1) rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) {
  .margin-dates::before { transform: none; } .margin-dates li { opacity: 1; translate: none; }
  .margin-stamp { opacity: .85; transform: rotate(-7deg); animation: none !important; }
}

/* ---------- Footer calling card ---------- */
.footer__aside { grid-column: 9 / -1; display: grid; gap: 26px; justify-items: start; }
.calling-card {
  position: relative; width: 360px; max-width: 100%; padding: 30px 30px 26px; display: grid; gap: 4px;
  background: linear-gradient(160deg, #f3eee2, #e7dfcd); color: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8);
  rotate: -3deg; transition: rotate .8s var(--ease), translate .8s var(--ease), box-shadow .8s var(--ease);
}
.calling-card::before, .calling-card::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--brass); }
.calling-card::before { inset: 8px; opacity: .7; }
.calling-card::after { inset: 12px; opacity: .3; }
.calling-card:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .85); }
.footer__aside.reveal { translate: 0 60px; rotate: 6deg; transition: opacity 1s var(--ease), translate 1.3s var(--ease), rotate 1.5s var(--ease); }
.footer__aside.reveal.is-in { translate: 0 0; rotate: 0deg; }
.calling-card__name { white-space: nowrap; font-family: var(--display); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.calling-card__sub { font-family: var(--display); font-style: italic; font-size: .92rem; color: var(--brass); }
.calling-card__rule { height: 1px; background: rgba(13, 29, 24, .3); margin: 12px 0 10px; width: 48px; }
.calling-card address { font-style: normal; font-size: .84rem; color: #3d4a45; line-height: 1.55; margin-bottom: 6px; }
.calling-card a { font-size: .86rem; color: var(--ink); justify-self: start; border-bottom: 1px solid rgba(13, 29, 24, .25); transition: color .3s, border-color .3s; }
.calling-card a:hover { color: var(--wine); border-color: var(--wine); }
.calling-card__note { margin-top: 12px; justify-self: end; font-family: var(--display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wine);
  border: 1px solid var(--wine); padding: 4px 8px; rotate: -4deg; }
.footer__aside p { color: var(--mute-d); max-width: 34ch; }
@media (max-width: 900px) { .footer__aside { grid-column: 1 / -1; } }

/* ---------- Contact modal: left panel ---------- */
.modal--form .modal__visual { justify-content: space-between; gap: 34px; }
.modal__visual .statement { color: var(--cream); font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.modal__intro { display: grid; gap: 30px; }
.modal__steps { list-style: none; border-top: 1px solid var(--rule-d-strong); }
.modal__steps li { display: grid; grid-template-columns: 38px 1fr; padding-block: 13px; border-bottom: 1px solid var(--rule-d); font-size: .92rem; color: var(--cream);
  opacity: 0; translate: 0 10px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.modal__steps b { font-family: var(--display); font-weight: 400; font-style: italic; color: var(--brass-hi); }
.modal.is-open .modal__steps li { opacity: 1; translate: 0 0; }
.modal.is-open .modal__steps li:nth-child(1) { transition-delay: .7s; }
.modal.is-open .modal__steps li:nth-child(2) { transition-delay: .85s; }
.modal.is-open .modal__steps li:nth-child(3) { transition-delay: 1s; }
.modal__address { font-size: .8rem; line-height: 1.7; color: var(--mute-d); }
.modal__address a { color: var(--cream); border-bottom: 1px solid var(--rule-d-strong); }
.check span { flex: 1; }

/* ---------- Legal page: prose + sticky aside ---------- */
.legal-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.legal-grid .prose { grid-column: 1 / span 7; grid-row: 1; }
.legal-aside { grid-column: 9 / -1; grid-row: 1; position: sticky; top: 120px; display: grid; gap: 22px; }
.legal-card {
  position: relative; padding: 32px 30px; display: grid; gap: 16px; background: var(--paper-2);
}
.legal-card::before, .legal-card::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--brass); }
.legal-card::before { inset: 8px; opacity: .55; }
.legal-card::after { inset: 12px; opacity: .22; }
.legal-card > * { position: relative; }
.legal-card--ink { background: var(--ink); color: var(--cream); }
.legal-card--ink .smallcaps { color: var(--brass-hi); }
.legal-card--ink p, .legal-card--ink address { color: var(--mute-d); font-style: normal; font-size: .9rem; line-height: 1.6; }
.legal-card--ink .link { color: var(--cream); border-color: var(--rule-d-strong); justify-self: start; }
.legal-toc { list-style: none; border-top: 1px solid var(--rule-strong); }
.legal-toc a {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.15rem; color: var(--ink); position: relative; isolation: isolate;
  transition: color .4s, padding .5s var(--ease);
}
.legal-toc a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.legal-toc em { font-size: .9rem; color: var(--brass); min-width: 26px; }
.legal-toc a:hover { padding-left: 16px; }
.legal-toc a.is-active { color: var(--cream); padding-left: 16px; }
.legal-toc a.is-active::before { transform: scaleX(1); }
.legal-toc a.is-active em { color: var(--brass-hi); }
@media (max-width: 1000px) {
  .legal-grid .prose, .legal-aside { grid-column: 1 / -1; grid-row: auto; position: static; }
  .legal-aside { margin-bottom: 50px; }
}

/* ---------- Guide articles ---------- */
.article { max-width: 720px; }
.article__intro { font-family: var(--display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--ink); }
.article p { font-size: 1.04rem; line-height: 1.8; }
.article h2 { scroll-margin-top: 110px; }
.article__service {
  position: relative; margin-top: 40px; padding: 34px 32px; background: var(--ink); color: var(--cream); display: grid; gap: 14px;
}
.article__service::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--brass-hi); opacity: .4; pointer-events: none; }
.article__service > * { position: relative; }
.article__service .smallcaps { color: var(--brass-hi); }
.article__service h3 { color: var(--cream); }
.article__service p { color: var(--mute-d); font-size: .96rem; }
.article__actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.article__service .btn--solid { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.article__service .link { color: var(--cream); border-color: var(--rule-d-strong); }
.article__disclaimer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }
.legal-card--ink .modal__steps li { opacity: 1; translate: none; }
a.slip { color: inherit; }

/* ---------- Phones: keep content clear of the certificate frame ---------- */
@media (max-width: 600px) {
  :root { --gutter: 26px; }
  .frame { inset: 8px; }
  .frame::before { inset: 4px; }
  .header { padding-top: 26px; padding-bottom: 20px; }
  .brand__name { font-size: .86rem; letter-spacing: .14em; }
  .brand svg { width: 32px; height: 32px; }
  .menu-btn { font-size: .7rem; gap: 10px; }
  .menu-btn i::before, .menu-btn i::after { width: 22px; }
  /* on phones the hero is as tall as its content: no empty band under the header */
  .hero, .hero:has(.cert-card), .page-hero { min-height: 0 !important; padding-top: 136px; padding-bottom: 56px; align-content: start; }
  .hero__kicker { gap: 10px 14px; margin-bottom: 26px; }
  .smallcaps { font-size: .68rem; letter-spacing: .16em; }
  .smallcaps.rule::before { width: 18px; }
  .hero__foot { margin-top: 36px; }
}

/* ---------- Mobile menu: fewer rules ---------- */
@media (max-width: 780px) {
  .menu__main li { border-bottom: 0; }
  .menu__main a { padding-block: 13px; }
  .menu__side { border-top: 0; padding-top: 8px; }
  /* only the cross, no "Close" label (beats the phone .menu-btn font size) */
  .menu-btn.menu__close { font-size: 0; gap: 0; }
}
/* ---------- Tablets ---------- */
/* landscape (900–1100px): the hero document stays beside the title, a little smaller */
@media (min-width: 900px) and (max-width: 1100px) {
  .cert-card { display: block; }
  .hero:has(.cert-card) > .hero__kicker, .hero:has(.cert-card) > .hero__title { grid-column: 1 / span 7; }
  .hero:has(.cert-card) > .hero__title { font-size: clamp(3rem, 7vw, 5.6rem); }
  .hero .cert-card, .hero .doc-card { grid-column: 8 / -1; width: min(100%, 330px); }
}
/* portrait (600–899px): the document comes under the text, centred, instead of an empty screen */
@media (min-width: 600px) and (max-width: 899px) {
  .cert-card { display: block; }
  .hero:has(.cert-card) { align-content: start; }
  .hero .cert-card, .hero .doc-card { grid-column: 1 / -1; grid-row: 4; justify-self: center; align-self: start; width: min(400px, 60vw); margin: 56px 0 24px; }
}
/* the footer calling card and the margin stamp follow their column */
@media (max-width: 1180px) {
  .footer__aside { grid-column: 7 / -1; }
  .calling-card__name { white-space: normal; }
  .margin-stamp { max-width: 100%; }
}
@media (max-width: 900px) { .footer__aside { grid-column: 1 / -1; } }

/* ---------- Footer: discreet way into the management area ---------- */
.footer__login {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 9px 14px 9px 12px;
  border: 1px solid rgba(201, 169, 107, .35); color: var(--brass-hi);
  font-family: var(--display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.footer__login svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer__login:hover { border-color: var(--brass-hi); background: rgba(201, 169, 107, .08); color: var(--cream); }
.footer__login { justify-self: start; align-self: start; width: max-content; }