/* Hallmark · shape: brochure leaves, one page per brochure spread · genre: editorial · theme: custom · job: hire · idea: "the TrioLex brochure, opened on the web: every page a navy leaf edged in gold" · vibe: "navy and gold, quiet, formal, exact"
 * paper: oklch(21.7% 0.049 256) · accent: oklch(81.9% 0.089 78) · display: Forum · body: Cormorant Garamond · hero: the brochure cover, the ribbon and wordmark beside the promise · nav: wordmark left, six pages, a call action · footer: Connect With Us, as on the brochure's last page · imagery: the founder's portrait from the brochure, the brochure's own wordmark · signature: the cover ribbon with the gold wordmark
 * axes: dark/roman-serif/warm · posture: Drenched, the navy is the surface and gold is the signal, locked to the client's printed brochure · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the structure follows the brochure page for page by the client's instruction rather than a fresh plan */
/* Hallmark · waive 81 · the ribbon holds the client's gold wordmark at its centre · this is the TrioLex brochure cover ribbon, the brand's own device */
/* Hallmark · waive 23 · gold fills the primary buttons and the cover ribbon's edge · the TrioLex brochure is navy with gold rules on every page */
/* Hallmark · waive 49b · scope links are the brochure's full service titles · TrioLex India approved these service names in its brochure */
/* Client instruction, not a waiver: the brochure sets index titles and subtitles in tracked capitals (gate 67); kept because TrioLex India asked for the brochure's exact theme */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 84px;
  --bar: 64px;
  /* the gold page edges and the content's side padding share one width, so text never runs under an edge */
  --edge: clamp(32px, 9vw - 2px, 150px);
  --rail: calc(var(--edge) * 0.34);
  --panel: calc(var(--edge) - var(--rail) - 1px);
  --curve: 220px;
  --col: calc(var(--edge) + clamp(16px, 3.5vw, 48px));
}
/* phones: the bars stay broad enough to read as the brochure's panels, and the gap to the text tightens so the text keeps its width */
@media (max-width: 40rem) { :root { --edge: 28px; --col: calc(var(--edge) + 14px); --curve: 140px; } }

html { background: var(--color-paper-3); }
body {
  background:
    radial-gradient(120% 60% at 15% 0%, var(--color-paper-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-3) 100%);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  font-variant-numeric: lining-nums;
}

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 400; color: var(--color-accent); letter-spacing: var(--tracking-display); line-height: 1.12; }
.display { font-size: clamp(2.75rem, 4.4vw + 1rem, 4.75rem); }
.h-section { font-size: clamp(2.25rem, 2.6vw + 1rem, 3.5rem); }
.h-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); color: var(--color-accent-pale); letter-spacing: 0; line-height: 1.25; }
.bar { display: block; width: var(--bar); height: 2px; margin-top: var(--space-md); background: var(--color-accent); border: 0; }
.lead { font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); line-height: 1.6; color: var(--color-ink); max-width: 36ch; }
.prose p { max-width: 62ch; }
.prose p + p { margin-top: var(--space-md); }
.prose ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.prose li { position: relative; padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::before { content: ""; position: absolute; left: 0.2em; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.caps { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink); }
.label { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.32em; color: var(--color-ink-2); }
.kicker { display: flex; align-items: center; gap: var(--space-lg); font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.42em; color: var(--color-accent); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: 2px; background: var(--color-accent); color: var(--color-accent-ink); font: 600 1rem/1 var(--font-body); letter-spacing: 0.03em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-accent); }
.btn--quiet:hover { background: var(--color-wash); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.link { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-rule); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: none; } }

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-nav); border-bottom: 1px solid var(--color-rule-quiet); backdrop-filter: blur(10px); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; flex: none; }
.wordmark img { width: 196px; height: auto; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) 0; border-bottom: 1px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); white-space: nowrap; }
.nav__links a:hover { color: var(--color-accent); }
.nav__links a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav .btn { min-height: 44px; font-size: var(--text-sm); }
.nav__call { flex: none; white-space: nowrap; }
.menu { display: none; }
@media (max-width: 78rem) {
  .nav__links, .nav__call { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: 2px; color: var(--color-accent); font-weight: 600; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu[open] summary { background: var(--color-wash); }
  .menu__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 320px); padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); box-shadow: 0 24px 48px var(--color-shade); }
  .menu__panel ul { margin: 0; padding: 0; list-style: none; }
  .menu__panel li a { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-quiet); color: var(--color-ink); font-weight: 600; text-decoration: none; }
  .menu__panel li a[aria-current="page"] { color: var(--color-accent); }
  .menu__panel li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu__panel .btn { width: 100%; margin-top: var(--space-lg); }
  .wordmark img { width: 176px; }
}

/* ---------- the leaf: a brochure page, edged in gold ---------- */
.leaf { position: relative; isolation: isolate; padding-block: var(--section-gap-s); }
.leaf--tight { padding-block: var(--space-3xl); }
/* section dividers stay inside the text column, so they never cut across the side panels */
.leaf + .leaf::before { content: ""; position: absolute; top: 0; left: var(--col); right: var(--col); height: 1px; background: var(--color-rule-quiet); }

/* ---------- the brochure frame ----------
 * As in the printed brochure: a thin rail runs the full height of every page on each side,
 * and gold-edged panels peel off that rail on a long curve and fold back into it.
 * Sections alternate, so a panel that runs off the bottom of one section carries straight
 * on at the top of the next, and every panel ends by curving into the rail, never abruptly. */
body { position: relative; }
body::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--color-edge), var(--color-edge)) left var(--rail) top / 1px 100% no-repeat,
    linear-gradient(var(--color-edge), var(--color-edge)) right var(--rail) top / 1px 100% no-repeat; }
.edges { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --bw: 1px; }
/* each panel has a twin (a <b> that frame.js adds to the .glint layer) with the same outline, which carries the gold streak */
.edges::before, .edges::after, .glint b { content: ""; position: absolute; width: var(--panel); border: 0 solid var(--color-edge-line); }
.edges::before, .glint .l { left: calc(var(--rail) + 1px); }
.edges::after, .glint .r { right: calc(var(--rail) + 1px); }
/* straight ends run 48px past the section so the shadow stays even where two sections meet */
.edges::before { background: linear-gradient(90deg, var(--color-paper-3), var(--color-paper-2)); filter: drop-shadow(16px 0 22px var(--color-shade-leaf)); }
.edges::after { background: linear-gradient(270deg, var(--color-paper-3), var(--color-paper-2)); filter: drop-shadow(-16px 0 22px var(--color-shade-leaf)); }
/* odd sections: left panel comes down from the top and folds in; right panel peels out and runs off the bottom */
.edges::before, .glint .l { top: -48px; height: calc(68% + 48px); border-right-width: var(--bw); border-bottom-width: var(--bw); border-bottom-right-radius: 100% min(var(--curve), 30%); }
.edges::after, .glint .r { top: 42%; bottom: -48px; border-left-width: var(--bw); border-top-width: var(--bw); border-top-left-radius: 100% min(var(--curve), 30%); }
/* even sections: the mirror, so both sides stay continuous across the boundary */
main > .leaf:nth-child(even) .edges::before, .glint .even .l { top: 42%; bottom: -48px; height: auto; border-width: var(--bw) var(--bw) 0 0; border-radius: 0 100% 0 0 / 0 min(var(--curve), 30%) 0 0; }
main > .leaf:nth-child(even) .edges::after, .glint .even .r { top: -48px; bottom: auto; height: calc(68% + 48px); border-width: 0 0 var(--bw) var(--bw); border-radius: 0 0 0 100% / 0 0 0 min(var(--curve), 30%); }
/* the last section folds its lower panel back into the rail before the footer, as the brochure's last page does */
:is(main > .leaf:last-child:nth-child(odd), main.leaf) .edges::after, .glint .last:not(.even) .r { bottom: 14%; border-bottom-width: var(--bw); border-bottom-left-radius: 100% min(var(--curve), 30%); }
main > .leaf:last-child:nth-child(even) .edges::before, .glint .last.even .l { bottom: 14%; border-bottom-width: var(--bw); border-bottom-right-radius: 100% min(var(--curve), 30%); }

/* the gold streak: a band of light that travels along the panel edges as the page scrolls (frame.js sets --gy).
 * One layer above every section, so the glow runs on across section boundaries instead of being cut at each one;
 * each section's streaks sit in a clipped box (an <i> matching the section), and the glow is added after clipping. */
.glint { position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none; opacity: var(--glow, 0); transition: opacity 700ms var(--ease-out);
  filter: drop-shadow(0 0 3px var(--color-accent)) drop-shadow(0 0 12px var(--color-accent-2)); }
.glint i { position: absolute; left: 0; right: 0; overflow: hidden; }
.glint b { --bw: 2.5px; border-color: transparent;
  background: linear-gradient(180deg, transparent, var(--color-gold-deep) 25%, var(--color-accent) 40%, var(--color-accent-pale) 50%, var(--color-accent) 60%, var(--color-gold-deep) 75%, transparent) 0 calc(var(--gy, -9999px) - 170px) / 100% 340px no-repeat border-box;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) border-box exclude, linear-gradient(#000 0 0) padding-box; }
/* the rails catch the same light */
.rail-glint { position: fixed; z-index: 0; top: 0; width: 1px; height: 300px; pointer-events: none; opacity: var(--glow, 0); transform: translateY(calc(var(--gy, -9999px) - 150px));
  background: linear-gradient(180deg, transparent, var(--color-accent) 35%, var(--color-accent-pale) 50%, var(--color-accent) 65%, transparent);
  filter: drop-shadow(0 0 3px var(--color-accent)) drop-shadow(0 0 10px var(--color-accent-2)); transition: opacity 700ms var(--ease-out); }
.rail-glint--l { left: var(--rail); }
.rail-glint--r { right: var(--rail); }

.wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.container { padding-inline: var(--col); }

/* ---------- hero: the cover ---------- */
.hero { padding-block: var(--space-2xl); min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
.hero .wrap { align-items: center; }
.hero { padding-top: 0; align-items: stretch; }
.hero .wrap { align-items: stretch; }
.hero__text { padding-block: var(--space-2xl); }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.hero__text { display: grid; gap: var(--space-lg); align-content: center; }
.hero__text .lead { max-width: 34ch; }
.ribbon { position: relative; justify-self: center; align-self: start; width: min(100%, 340px); height: min(82svh, 640px); }
.ribbon__body { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper-3) 70%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.ribbon__line { position: absolute; inset: 0 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); background: linear-gradient(180deg, var(--color-accent-2), var(--color-gold-deep) 55%, var(--color-accent-2)); }
.ribbon__line::after { content: ""; position: absolute; inset: 0 1.5px 1.8px; clip-path: inherit; background: linear-gradient(180deg, var(--color-paper-2), var(--color-paper-3) 70%); }
.ribbon__mark { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding-inline: 7%; }
.ribbon__logo { position: relative; width: 84%; }
.ribbon__logo img { width: 100%; height: auto; }
.ribbon__mark .bar { width: 48px; margin: 0; height: 1.5px; }
@media (max-width: 60rem) { .hero { min-height: 0; } .ribbon { order: -1; width: min(64%, 240px); height: 300px; } .hero__text { padding-top: var(--space-lg); } }

/* ---------- the preface index ---------- */
.index { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.index li { border-bottom: 1px solid var(--color-rule); }
.index a { display: grid; grid-template-columns: 64px 1px minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xs); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.index a:hover { background: var(--color-wash-faint); }
.index a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.index__n { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--color-accent); }
.index__rule { align-self: stretch; background: var(--color-rule); }
.index__t { display: grid; gap: var(--space-2xs); }
.index__t .caps { font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); }
.index__go { color: var(--color-accent); font-size: var(--text-lg); transition: transform var(--dur-short) var(--ease-out); }
.index a:hover .index__go { transform: translateX(4px); }
@media (max-width: 40rem) { .index a { grid-template-columns: 40px 1px minmax(0, 1fr); gap: var(--space-md); } .index__go { display: none; } }

/* ---------- two-column statement ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); } }
.stack { display: grid; gap: var(--space-2xl); }
.block { display: grid; gap: var(--space-lg); align-content: start; }

/* ---------- numbered timeline (gold rings on a gold line) ---------- */
.steps { margin: var(--space-xl) 0 0; padding: 0; list-style: none; position: relative; display: grid; gap: var(--space-xl); }
.steps::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 1.5px; background: var(--color-accent); }
.steps > li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.ring { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--color-accent); border-radius: 50%; background: var(--color-paper); color: var(--color-accent); font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.steps .h-title { margin-top: var(--space-sm); }
.steps p { margin-top: var(--space-xs); max-width: 60ch; }
.steps p + p { margin-top: var(--space-sm); }
.steps--icons { gap: var(--space-lg); }
.steps--icons .h-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); font-weight: 400; margin-top: var(--space-sm); }

/* ---------- scope grid ---------- */
.scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
@media (min-width: 52rem) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.scope li { list-style: none; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.scope { padding: 0; }
.scope a { color: var(--color-ink); text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; transition: color var(--dur-short) var(--ease-out); }
.scope a:hover { color: var(--color-accent); }
.scope a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- arch portrait (brochure founder frame) ---------- */
.arch { position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5; margin: 0; padding: var(--space-xs); border: 1.5px solid var(--color-accent); border-radius: 999px 999px 0 0; }
.arch [data-slot] { width: 100%; height: 100%; border-radius: 999px 999px 0 0; }
.arch img { object-position: 50% 20%; }
.person { display: grid; gap: var(--space-2xs); margin-top: var(--space-lg); }
.person .person__creds { color: var(--color-muted); letter-spacing: 0.12em; }
.person .h-title { color: var(--color-accent); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1vw + 1.3rem, 2.25rem); }
.founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (min-width: 52rem) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } }

/* ---------- connect (brochure last page) ---------- */
.connect { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-lg); max-width: 640px; }
.connect li { display: grid; grid-template-columns: 52px 1px minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.connect .rule { align-self: stretch; background: var(--color-rule); }
.connect a, .connect span.v { font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-short) var(--ease-out); }
.connect a:hover { color: var(--color-accent); }
.connect a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.connect .k { display: block; margin-bottom: var(--space-3xs); }

/* ---------- form ---------- */
.form { display: grid; gap: var(--space-lg); max-width: 560px; }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 600; color: var(--color-ink); }
.field input, .field textarea { width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-md); line-height: 1.4; border: 1px solid var(--color-rule); border-radius: 2px; background: var(--color-field); color: var(--color-ink); font-weight: 400; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-accent); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--color-error); }
.field .hint { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status { min-height: 1.6em; color: var(--color-accent-pale); }
.note { padding: var(--space-lg); border: 1px solid var(--color-rule-quiet); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); font-size: var(--text-sm); }
.note h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: var(--color-accent); margin-bottom: var(--space-xs); }

/* ---------- page head ---------- */
.pagehead { padding-block: var(--space-3xl) var(--space-xl); }
.pagehead + .leaf { padding-top: var(--space-xl); }
.pagehead + .leaf::before { content: none; }
.pagehead .lead { margin-top: var(--space-lg); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- close band ---------- */
.close { text-align: left; display: grid; gap: var(--space-lg); justify-items: start; }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); background: var(--color-paper-3); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); } }
.foot .wordmark img { width: 230px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.foot a { color: var(--color-ink-2); text-decoration: none; font-weight: 600; transition: color var(--dur-short) var(--ease-out); }
.foot a:hover { color: var(--color-accent); }
.foot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot__small { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-quiet); font-size: var(--text-sm); color: var(--color-muted); }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- motion: the brochure opening, quiet and exact ----------
   Everything here is transform and opacity only, gated on .js and on
   prefers-reduced-motion, so the page reads complete with neither. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.nav { view-transition-name: nav; }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; }

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, var(--color-sheen) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); }
.btn:hover::after { transform: translateX(120%); }
.ring { transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.scope li:hover .ring, .connect li:hover .ring, .steps li:hover .ring { transform: scale(1.06); box-shadow: 0 0 0 6px var(--color-wash-faint), 0 0 24px var(--color-wash); }
.index li { position: relative; }
.index li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.index li:hover::after { transform: scaleX(1); }
.index__n, .index__t { transition: transform var(--dur-long) var(--ease-out); }
.index a:hover .index__t { transform: translateX(6px); }
.nav { transition: box-shadow var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 10px 30px var(--color-shade-leaf); }
.arch { transition: box-shadow 900ms var(--ease-out); }
.arch:hover { box-shadow: 0 0 0 6px var(--color-wash-faint), 0 30px 60px var(--color-shade-leaf); }
.arch img { transition: transform 1600ms var(--ease-out); }
.arch:hover img { transform: scale(1.03); }

/* ---------- illustrations: gold line-art figures, as in the client's presentation (drawn by _ill.py) ---------- */
.ill { display: block; width: 100%; max-width: 460px; height: auto; margin-top: var(--space-xl); overflow: visible; }
.ill .ln, .ill .fig, .ill .hair { fill: none; stroke: url(#ill-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill .fig, .ill .hair { fill: var(--color-paper-2); }
.ill .hair { fill: var(--color-paper-3); }
.ill .gold { fill: url(#ill-gold); stroke: none; }
.ill .fl { stroke: url(#ill-fade); stroke-width: 1.2; }
.ill .gear { fill: none; stroke: url(#ill-gold); stroke-width: 6; }
.ill .rise { filter: drop-shadow(0 0 18px oklch(81.9% 0.089 78 / 0.35)); }
.ill .pick { filter: drop-shadow(0 0 10px oklch(81.9% 0.089 78 / 0.3)); }
.ill :is(.bob, .float, .spin, .grow, .scan, .wave, .swing, .twinkle, .pick, .pop, .ring-phone) { transform-box: view-box; }
.split .ill, .founder .ill { max-width: 420px; }

@media (prefers-reduced-motion: no-preference) {
  /* the cover: the ribbon unrolls, its gold edge draws, the wordmark catches the light */
  .js .ribbon__body, .js .ribbon__line { transform-origin: top; animation: unroll 1400ms var(--ease-out) 150ms both; }
  .js .ribbon__mark { animation: rise 1100ms var(--ease-out) 1000ms both; }
  .ribbon__mark .bar { transform-origin: center; }
  .js .ribbon__mark .bar { animation: draw 900ms var(--ease-out) 1500ms both; }
  .ribbon__shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("img/triolex-logo-stacked.webp") center / contain no-repeat; mask: url("img/triolex-logo-stacked.webp") center / contain no-repeat; pointer-events: none; }
  .ribbon__shine::before { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 40%, var(--color-shine) 50%, transparent 60%); transform: translateX(-70%); animation: shine 5.5s var(--ease-in-out) 2.2s infinite; }
  .js .hero__text > * { animation: rise 1000ms var(--ease-out) both; }
  .js .hero__text > :nth-child(1) { animation-delay: 300ms; }
  .js .hero__text > :nth-child(2) { animation-delay: 650ms; }
  .js .hero__text > :nth-child(3) { animation-delay: 800ms; }
  .js .hero__text > :nth-child(4) { animation-delay: 950ms; }
  .js .pagehead .container > * { animation: rise 1000ms var(--ease-out) both; }
  .js .pagehead .container > :nth-child(2) { animation-delay: 150ms; }
  .js .pagehead .container > :nth-child(3) { animation-delay: 300ms; }
  .js .pagehead .container > :nth-child(4) { animation-delay: 420ms; }

  /* sections settle in, children one after another */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal .bar { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) 350ms; }
  .js .reveal.in .bar { transform: scaleX(1); }
  .js .reveal :is(.index li, .scope li, .steps > li, .connect li) { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .js .reveal.in :is(.index li, .scope li, .steps > li, .connect li) { opacity: 1; transform: none; }
  .js .reveal .steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1800ms var(--ease-out) 300ms; }
  .js .reveal.in .steps::before { transform: scaleY(1); }
  .js .reveal .arch { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
  .js .reveal.in .arch { opacity: 1; transform: none; }
  .js .reveal .kicker::after { transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease-out) 200ms; }
  .js .reveal.in .kicker::after { transform: scaleX(1); }

  /* illustrations draw themselves in when their section arrives, then keep a gentle motion */
  .js .reveal .ill :is(.ln, .fig, .hair) { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1800ms var(--ease-out) calc(var(--d, 0) * 140ms + 250ms), fill-opacity 900ms ease calc(var(--d, 0) * 140ms + 1000ms); }
  .js .reveal .ill :is(.gold, .mk, .floor) { opacity: 0; transition: opacity 1000ms ease calc(var(--d, 0) * 140ms + 1000ms); }
  .js .reveal.in .ill :is(.ln, .fig, .hair) { stroke-dashoffset: 0; fill-opacity: 1; }
  .js .reveal.in .ill :is(.gold, .mk, .floor) { opacity: 1; }
  .ill .bob { animation: ill-bob 5.5s var(--ease-in-out) infinite; }
  .ill .b2 { animation-delay: -1.3s; } .ill .b3 { animation-delay: -2.6s; } .ill .b4 { animation-delay: -3.9s; }
  .ill .float { animation: ill-float 6s var(--ease-in-out) infinite; }
  .ill .f2 { animation-delay: -2s; } .ill .f3 { animation-delay: -4s; }
  .ill .spin { animation: ill-spin 14s linear infinite; }
  .ill .spin.rev { animation-direction: reverse; animation-duration: 10s; }
  .ill .grow { transform-box: fill-box; transform-origin: bottom; animation: ill-grow 3.6s var(--ease-in-out) infinite; }
  .ill .scan { animation: ill-scan 8s var(--ease-in-out) infinite; }
  .ill .pick { animation: ill-pick 8s var(--ease-in-out) infinite; }
  .ill .pop { transform-box: fill-box; transform-origin: center; animation: ill-pop 8s var(--ease-in-out) infinite; }
  .ill .wave { animation: ill-wave 2.6s var(--ease-in-out) infinite; }
  .ill .swing { animation: ill-swing 3.4s var(--ease-in-out) infinite; }
  .ill .twinkle { animation: ill-twinkle 3.2s var(--ease-in-out) infinite; }
  .ill .pulse { animation: ill-pulse 3.6s var(--ease-in-out) infinite; }
  .ill .tp { animation: ill-tp 1.4s var(--ease-in-out) infinite; }
  .ill .ring-phone { animation: ill-ring 4s var(--ease-in-out) infinite; }
  /* the team scene: the group walks in from both sides, then sways while the gold figure lifts and catches the light */
  .js .reveal .ill--team [style*="--from"] { translate: var(--from) 0; transition: translate 1600ms var(--ease-out) calc(var(--d, 0) * 140ms + 150ms); }
  .js .reveal.in .ill--team [style*="--from"] { translate: 0 0; }
  .ill--team .bob { transform-box: fill-box; transform-origin: 50% 100%; animation: ill-sway 4.8s var(--ease-in-out) infinite; }
  .ill--team .rise { transform-box: view-box; animation: ill-lift 4.2s var(--ease-in-out) infinite; }
  .ill--team .sheen { transform-box: view-box; animation: ill-sheen 4.2s var(--ease-in-out) infinite 1.2s; }
  .ill--team .floor.pulse { animation-duration: 4.2s; }
  .ill .march { animation: ill-march 1.6s linear infinite; }
}
@keyframes unroll { from { transform: scaleY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes shine { 0% { transform: translateX(-70%); } 35%, 100% { transform: translateX(70%); } }
@keyframes ill-bob { 50% { transform: translateY(-3px); } }
@keyframes ill-float { 50% { transform: translateY(-7px); } }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-grow { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@keyframes ill-scan { 0%, 8% { transform: translateX(-168px); } 30%, 38% { transform: translateX(-84px); } 55%, 85% { transform: translateX(0); } 100% { transform: translateX(-168px); } }
@keyframes ill-pick { 0%, 50% { filter: drop-shadow(0 0 0 transparent); } 58%, 82% { filter: drop-shadow(0 0 14px oklch(81.9% 0.089 78 / 0.55)); } 92%, 100% { filter: drop-shadow(0 0 0 transparent); } }
@keyframes ill-pop { 0%, 54% { transform: scale(0); } 60%, 84% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
@keyframes ill-wave { 0%, 100% { transform: skewY(-4deg) scaleX(0.94); } 50% { transform: skewY(4deg) scaleX(1); } }
@keyframes ill-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ill-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ill-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes ill-tp { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ill-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-12deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-9deg); } 86% { transform: rotate(6deg); } }
@keyframes ill-sway { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-2deg); } 65% { transform: translateY(-2px) rotate(1.5deg); } }
@keyframes ill-lift { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 14px oklch(81.9% 0.089 78 / 0.3)); } 50% { transform: translateY(-8px); filter: drop-shadow(0 0 30px oklch(81.9% 0.089 78 / 0.6)); } }
@keyframes ill-sheen { 0%, 45% { transform: translateX(-60px) skewX(-18deg); } 75%, 100% { transform: translateX(200px) skewX(-18deg); } }
@keyframes ill-march { to { stroke-dashoffset: -10; } }

/* ---------- phone layout ----------
 * One column, so spacing follows the reading order: a heading sits close to the text it introduces,
 * and the larger gaps are kept for the breaks between topics. */
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; line-height: 1.65; }
  .lead { font-size: 1.125rem; }
  .h-section { font-size: 2.125rem; }
  .display { font-size: 2.625rem; }
  .bar { margin-top: var(--space-sm); width: 48px; }
  .block { gap: var(--space-md); }
  .split { gap: var(--space-lg); }
  .stack { gap: var(--space-xl); }
  .pagehead { padding-block: var(--space-2xl) var(--space-lg); }
  .pagehead + .leaf { padding-top: var(--space-lg); }
  .pagehead .lead { margin-top: var(--space-md); }

  /* hero: ribbon, then the pitch, then two equal buttons */
  .hero__text { padding-block: var(--space-lg) var(--space-xl); gap: var(--space-md); }
  .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-xs); }
  .close .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); width: 100%; }
  .actions .btn, .form .btn { width: 100%; }

  /* illustrations: centred, a little smaller, close to their heading */
  .ill, .split .ill, .founder .ill { max-width: 300px; margin: var(--space-md) auto 0; }

  /* preface index */
  .index a { grid-template-columns: 32px 1px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; }
  .index__t .caps { font-size: 1.0625rem; letter-spacing: 0.06em; }

  /* timelines and lists: smaller rings so the text column stays wide */
  .ring { width: 40px; height: 40px; font-size: 1.125rem; }
  .ring svg { width: 20px; height: 20px; }
  .steps::before { left: 19.5px; top: 20px; bottom: 20px; }
  .steps > li, .scope li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-md); }
  .steps { gap: var(--space-lg); }
  .steps--icons .h-title { margin-top: 6px; }
  .scope li { padding: var(--space-md) 0; }
  .scope a { font-size: 1.0625rem; }

  /* contact rows: emails and links break only at sensible points */
  .connect { gap: var(--space-md); }
  .connect li { grid-template-columns: 40px 1px minmax(0, 1fr); gap: var(--space-md); }
  .connect a, .connect span.v { font-size: 1rem; overflow-wrap: break-word; }
}