/* ==========================================================================
   Upsurge Investment & Finance Ltd: site.css (2026 design system)

   One stylesheet for every page. Plain CSS, no build step. The brand rules
   (palette, type, logo, voice) live in CLAUDE.md; this file only uses them.

   Contents
      0. Fonts
      1. Tokens
      2. Themes: data-theme on a section sets its colours
      3. Base
      4. Type
      5. Layout: wrap, 12-column grid, sections
      6. Links, buttons, the chevron
      7. Header and reading progress
      8. Menu (below 900px)
      9. Plates, captions, cursor companion, WebGL layer
     10. Ledger
     11. Forms (base styles for the proposal and contact pages)
     12. Footer
     13. Home (and the clause ledger 13.5 and the doors 13.8, which other pages share)
     13b. Pages: About, Approach, Products, Team, Contact, Accessibility, 404,
          Investors, Pitch to us
     14. Utilities and accessibility
     15. Motion: reveals, masked lines, rules, rolling figures, develop
     16. Still mode, reduced motion, Lenis, view transitions
     17. Print

   Conventions
     - Mobile first. Breakpoints: 560 (large phone), 900 (full navigation),
       960 (12-column composition), 1200 (wide).
     - One reading axis: headings on the left edge (columns 1 to 6), reading
       text from column 7.
     - Motion is gated on `.js:not(.still)`, so without JavaScript, with
       ?still, or with reduced motion every element simply shows its final state.
   ========================================================================== */


/* ==========================================================================
   0. Fonts
   PP Eiko (licensed) for display only; Bricolage Grotesque and Newsreader
   come from Google Fonts in each page head. Only Thin (200, every title) is
   preloaded; Medium (500) sets the roman numerals, which are never in a
   first screen's title, so it loads when a numeral first needs it.
   ========================================================================== */

@font-face {
  font-family: 'PP Eiko';
  src: url('fonts/PPEiko-Thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Eiko';
  src: url('fonts/PPEiko-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Palette: closed. Nothing outside CLAUDE.md "Brand: source of truth". */
  --paper: #F7F5F0;
  --cream: #F2E9D8;
  --navy: #0B2447;
  --midnight: #06162C;
  --burgundy: #7E2D3A;      /* accent on light; small text allowed (8.3:1 on paper) */
  --rose: #C06B78;          /* accent on dark: graphics and text of 24px and over only */
  --rose-tint: #C8A0A8;     /* small accent text on dark (6.7:1 on navy) */
  --ink: #2A3340;
  --ink-2: #3A4453;
  --slate: #646E7E;         /* labels on paper only (fails on cream) */
  --mist: #C2CAD6;
  --mist-2: #AEB8C7;
  --steel: #8FA0B8;
  --steel-2: #7E8DA3;

  /* Type families */
  --f-display: 'PP Eiko', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Type scale (restrained: H1 about 95px and section heads about 52px at 1440). The H1 is
     continuous across 960: 64px at the top of the phone and tablet range, 63px just above it. */
  --t-h1: clamp(2.25rem, 10.4vw, 4rem);
  /* An inner page's title (13b): a chapter opening, a step below Home's title page. 72px at
     1440 x 900, 47px at 1000 x 560 (it follows the window's height, as the H1 does); 38 to 50px on
     phones and tablets, continuous across 960 (50px below it, 48px just above it). */
  --t-title: clamp(2.375rem, 6vw, 3.125rem);
  --t-h2: clamp(2rem, 3.6vw, 3.375rem);
  --t-h3: clamp(1.4375rem, 2vw, 1.9375rem);
  --t-lede: clamp(1.1875rem, 1.45vw, 1.375rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;                 /* floor for anything read: tracked capitals below 12px blur */

  /* Layout */
  --maxw: 1440px;                         /* content width inside the margins */
  --m: clamp(20px, 4.45vw, 72px);         /* side margin */
  --g: clamp(16px, 2.2vw, 32px);          /* gutter */
  --section: clamp(72px, 8.9vw, 128px);   /* section padding, capped at 128 */
  --header-h: 64px;
  --header-space: 0px;                    /* room the page leaves for a header that lies over it (see 7) */
  /* The Millau plate in "Two ways to begin" (13.7): its width, and the room the section above
     leaves for it to rise into (half its 2:3 height, so it straddles the boundary 50/50). */
  --plate-w: calc((100vw - 2 * var(--m)) * .62);
  --rise: calc(var(--plate-w) * .75);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .1, 1);        /* long, soft landing */
  --ease-io: cubic-bezier(.65, 0, .35, 1);    /* symmetrical, for wipes */
  --ease-soft: cubic-bezier(.33, 0, .2, 1);

  /* Layers. GL canvas sits above the page; anything that must read over a
     photograph (headline ink, quotes, veils) sits above the canvas. */
  --z-grow: 2;
  --z-gl: 3;
  --z-veil: 4;
  --z-over: 5;
  --z-cursor: 40;
  --z-header: 50;
  --z-progress: 51;
  --z-menu: 60;
  --z-skip: 70;
}

@media (min-width: 560px) {
  :root { --t-body: 1.03125rem; --plate-w: calc((100vw - 2 * var(--m)) * .42); }
}
@media (min-width: 900px) {
  :root { --header-h: 76px; --t-body: 1.0625rem; }
}
@media (min-width: 960px) {
  :root {
    /* 95px at 1440 x 900, 96px at most; short windows (1000 x 560, 1280 x 720) step down with
       the height, so the title page always fits beside its frontispiece. */
    --t-h1: min(clamp(2.75rem, 6.6vw, 6rem), max(2.75rem, 10.7vh));
    --t-title: min(clamp(2.75rem, 5vw, 4.5rem), max(2.5rem, 8.4vh));
    --plate-w: calc((min(100vw - 2 * var(--m), var(--maxw)) - 2 * var(--g)) / 3);   /* four columns */
  }
}
/* The header lies over the top of the page (fixed with JavaScript; from 900px, absolute without
   it), so pages leave room for it. Below 900px without JavaScript it is in the flow instead. */
.js { --header-space: var(--header-h); }
@media (min-width: 900px) { :root { --header-space: var(--header-h); } }

/* Values site.js writes every frame during the overture. Registered as non-inherited, so a
   write restyles only the element it is set on, not the whole hero. */
@property --cut { syntax: '<length>'; inherits: false; initial-value: 10000px; }


/* ==========================================================================
   2. Themes
   Put data-theme on a section (paper, cream, navy, midnight, burgundy) and
   everything inside picks up the right ink, labels, hairlines and accent.
   The header reads the same attribute to switch its logo and ink.
   ========================================================================== */

[data-theme] {
  background-color: var(--bg);
  color: var(--text);
}
[data-theme="paper"],
[data-theme="cream"] {
  --bg: var(--paper);
  --fg: var(--navy);               /* headings */
  --text: var(--ink);              /* body */
  --text-2: var(--ink-2);          /* secondary body */
  --label: var(--slate);
  --accent: var(--burgundy);       /* rules, marks, fills */
  --accent-text: var(--burgundy);  /* small accent text */
  --hair: rgba(11, 36, 71, .14);
  --hair-2: rgba(11, 36, 71, .34);
  --focus: var(--burgundy);
  --btn-wipe: var(--navy);         /* the primary button's hover fill */
  --mat: var(--paper);
}
[data-theme="cream"] {
  --bg: var(--cream);
  --label: var(--ink-2);           /* slate fails on cream */
  --mat: var(--cream);
}
[data-theme="navy"],
[data-theme="midnight"],
[data-theme="burgundy"] {
  --bg: var(--navy);
  --fg: var(--cream);
  --text: var(--mist);
  --text-2: var(--mist-2);
  --label: var(--steel);
  --accent: var(--rose);
  --accent-text: var(--rose-tint);
  --hair: rgba(242, 233, 216, .14);
  --hair-2: rgba(242, 233, 216, .36);
  --focus: var(--rose-tint);
  --btn-wipe: var(--midnight);
  --mat: var(--navy);
}
[data-theme="midnight"] {
  --bg: var(--midnight);
  --mat: var(--midnight);
}
[data-theme="burgundy"] {
  --bg: var(--burgundy);
  --text: var(--cream);                      /* 7.5:1 */
  --text-2: rgba(242, 233, 216, .86);        /* about 6:1 */
  --label: rgba(242, 233, 216, .82);         /* about 5.6:1 */
  --accent: var(--cream);
  --accent-text: var(--cream);
  --hair: rgba(242, 233, 216, .24);
  --hair-2: rgba(242, 233, 216, .5);
  --focus: var(--cream);
  --mat: var(--burgundy);
}

/* Two adjacent sections of one colour never stack their padding. */
[data-theme="paper"] + [data-theme="paper"],
[data-theme="cream"] + [data-theme="cream"],
[data-theme="navy"] + [data-theme="navy"],
[data-theme="midnight"] + [data-theme="midnight"],
[data-theme="burgundy"] + [data-theme="burgundy"] {
  padding-top: 0;
}


/* ==========================================================================
   3. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scroll-padding-top: calc(var(--header-space) + 16px);
  -webkit-tap-highlight-color: transparent;       /* every control has its own press state (6) */
}
/* Without JavaScript, in-page links glide. With it, site.js glides them itself (6), so the
   browser's own jumps (to a #target on arrival, to a restored position) are never animated and
   never raced by Lenis starting part-way through one. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--f-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p, h1, h2, h3, h4, h5, figure, blockquote, dl, dd, ol, ul, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main { display: block; outline: none; }
[hidden] { display: none !important; }

::selection { background: var(--burgundy); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--focus, var(--burgundy));
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Where an in-page link or a script lands focus on a region (a section, a heading, main), the
   region is not a control, so it carries no ring. */
[tabindex="-1"]:not(a, button, input, select, textarea, [role="tab"]):focus { outline: none; }


/* ==========================================================================
   4. Type
   ========================================================================== */

h1, h2, h3, h4,
.h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 200;
  color: var(--fg, var(--navy));
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; }
h2, .h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.016em; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.16; }
h4 { font-size: clamp(1.3125rem, 1.7vw, 1.5625rem); line-height: 1.2; }
/* PP Eiko Thin under about 28px: no negative tracking, so the hairline strokes keep their room.
   --t-h3 reaches 28px at 1400px; h4 and the smaller display labels never do. */
h3, .h3, h4 { letter-spacing: 0; }
@media (min-width: 1400px) {
  h3, .h3 { letter-spacing: -.012em; }
}
.clause__term, .rv__title, .page-team .person__name, .page-approach .step__name { letter-spacing: 0; }

p, li, dd { text-wrap: pretty; }

/* Kickers and small labels */
.label {
  display: flex;
  align-items: flex-start;         /* a label that wraps keeps its chevron on the first line */
  gap: 12px;
  font: 500 var(--t-label)/1.45 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
  text-wrap: balance;
}
.label--accent { color: var(--accent-text); }
.label .chev { width: 12px; height: 11px; margin-top: calc(.725em - 5.5px); color: var(--accent); }

/* Ledes, captions and quotes: Newsreader italic */
.lede {
  font: italic 300 var(--t-lede)/1.45 var(--f-serif);
  color: var(--text-2);
  max-width: 32em;
  text-wrap: pretty;
}

/* Running text */
.prose { color: var(--text); max-width: 36em; }
.prose p + p { margin-top: 1em; }
.prose p:first-child { color: var(--fg); }

/* Figures: lining, tabular, so columns of numbers align */
.num, .ledger dd, .facts { font-variant-numeric: lining-nums tabular-nums; }

/* Hanging punctuation: the opening quote sits in the margin */
.hang { margin-left: -.42em; }
@supports (hanging-punctuation: first) {
  .hang-auto { hanging-punctuation: first; }
}


/* ==========================================================================
   5. Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--m));
  margin-inline: auto;
  padding-inline: var(--m);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

.section { padding-block: var(--section); }

/* The reading axis, for any page: heading side and reading side */
@media (min-width: 960px) {
  .col-head { grid-column: 1 / 7; }
  .col-read { grid-column: 7 / -1; }
}


/* ==========================================================================
   6. Links, buttons, the chevron
   ========================================================================== */

/* The chevron: 45 degrees, up and right, never distorted. Colour from currentColor. */
.chev {
  width: 12px;
  height: 11px;
  flex: none;
  fill: currentColor;
  overflow: visible;
}

/* Hairline underline: draws in from the left, retracts to the right. */
.u {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size .35s var(--ease);
  padding-bottom: 2px;
}
a:focus-visible .u, a.u:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}
@media (hover: hover) and (pointer: fine) { a:hover .u, a.u:hover {
  background-position: 0 100%;
  background-size: 100% 1px;
} }

/* Two chevrons in a small window: the first steps up and right, the second follows in. */
.chevs {
  position: relative;
  display: inline-block;
  flex: none;
  width: 12px;
  height: 11px;
  overflow: hidden;
  color: var(--accent);
}
.chevs .chev {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .35s var(--ease);
}
.chevs .chev + .chev { transform: translate(-115%, 115%); }
a:focus-visible .chevs .chev:first-child,
button:focus-visible .chevs .chev:first-child,
.is-hover .chevs .chev:first-child { transform: translate(115%, -115%); }
@media (hover: hover) and (pointer: fine) { a:hover .chevs .chev:first-child,
button:hover .chevs .chev:first-child { transform: translate(115%, -115%); } }
a:focus-visible .chevs .chev + .chev,
button:focus-visible .chevs .chev + .chev,
.is-hover .chevs .chev + .chev { transform: none; transition-delay: .07s; }
@media (hover: hover) and (pointer: fine) { a:hover .chevs .chev + .chev,
button:hover .chevs .chev + .chev { transform: none; transition-delay: .07s; } }
.chevs--lg { width: 28px; height: 26px; }

/* Text link with a chevron */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  font: 500 .9375rem/1.3 var(--f-body);
  letter-spacing: .01em;
  color: var(--fg);
  text-decoration: none;
}
.link-arrow .u { background-image: linear-gradient(var(--accent), var(--accent)); }

/* Buttons. "Pitch to us" is burgundy everywhere (cream on burgundy, 7.5:1); on hover navy
   (on light) or midnight (on dark) wipes in from the left and retracts to the right, and the
   chevron steps up and right as a second follows it in. The line button is the secondary. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 24px;
  font: 500 .90625rem/1.2 var(--f-body);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color .22s var(--ease), border-color .22s var(--ease), scale .1s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-wipe, var(--navy));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
@media (hover: hover) and (pointer: fine) { .btn:hover::before {
  transform: scaleX(1);
  transform-origin: 0 50%;
} }
.btn--primary {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--cream);
}
.btn--primary .chevs { color: var(--rose-tint); transition: color .22s var(--ease); }
.btn--primary:focus-visible { border-color: var(--btn-wipe, var(--navy)); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { border-color: var(--btn-wipe, var(--navy)); } }
.btn--primary:focus-visible .chevs { color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover .chevs { color: var(--cream); } }
[data-theme="midnight"] .btn--primary:focus-visible { border-color: var(--hair-2); }
@media (hover: hover) and (pointer: fine) { [data-theme="midnight"] .btn--primary:hover { border-color: var(--hair-2); } }

.btn--line {
  border-color: var(--hair-2, rgba(11, 36, 71, .34));
  color: var(--fg, var(--navy));
}
.btn--line::before { background: var(--fg, var(--navy)); opacity: .07; }
.btn--line:focus-visible { border-color: var(--fg, var(--navy)); }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { border-color: var(--fg, var(--navy)); } }

/* Press: every control answers at once (100ms), on touch as with a mouse. Boxed controls give a
   little under the finger with the independent `scale` property, so it composes with the
   magnetic lean site.js writes to `transform`; their wipe fills at once, in the hover colours.
   Text links draw their underline (or take their hover ink) instead of moving. */
.btn:active, .box:active, .menu-btn:active, .menu-close:active, .seg button:active,
.page-proposal .toggle button:active, .page-proposal .rv__edit:active, .page-proposal .drop:active .drop__btn,
.page-investors .fy-tab:active .fy-tab__year { scale: .98; }
.menu-btn, .menu-close { transition: scale .1s ease-out; }
.btn:active::before, .box:active::before,
.page-proposal .rv__edit:active::before, .page-proposal .drop:active .drop__btn::before {
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition-duration: .12s;
}
.btn--primary:active { border-color: var(--btn-wipe, var(--navy)); }
.btn--primary:active .chevs { color: var(--cream); }
[data-theme="midnight"] .btn--primary:active { border-color: var(--hair-2); }
.btn--line:active { border-color: var(--fg, var(--navy)); }
a:active .u, a.u:active { background-position: 0 100%; background-size: 100% 1px; transition-duration: .1s; }
a:active .chevs .chev:first-child, button:active .chevs .chev:first-child { transform: translate(115%, -115%); }
a:active .chevs .chev + .chev, button:active .chevs .chev + .chev { transform: none; }

/* The two hero actions lean towards the pointer (see site.js: magnetic). */
[data-magnetic] { will-change: transform; }


/* ==========================================================================
   7. Header and reading progress
   Transparent at the top; a backdrop and a hairline once scrolled; tucks away
   on scroll down, returns on scroll up. The logo and ink follow the section
   beneath (data-ink, set by site.js from data-theme): light (paper, cream),
   dark (navy, midnight), burgundy (its own backdrop), and image (a photograph
   under the header: a midnight backdrop dense enough for the links to read over
   the brightest part of any print, and no hairline).
   ========================================================================== */

.site-header {
  --h-fg: var(--navy);
  --h-fg-2: var(--ink-2);
  --h-bg: rgba(247, 245, 240, 0);
  --h-hair: rgba(11, 36, 71, 0);
  --h-box: rgba(11, 36, 71, .3);
  --h-accent: var(--burgundy);
  --focus: var(--burgundy);
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--h-fg);
  /* returning: a quick, soft landing; tucking (below): a quicker exit that accelerates away */
  transition: transform .3s cubic-bezier(.2, .7, .1, 1), color .3s var(--ease), -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease);
}
.js .site-header { position: fixed; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--h-bg);
  border-bottom: 1px solid var(--h-hair);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header[data-ink="dark"],
.site-header[data-ink="burgundy"],
.site-header[data-ink="image"] {
  --h-fg: var(--cream);
  --h-fg-2: var(--mist);
  --h-box: rgba(242, 233, 216, .34);
  --h-accent: var(--rose);
  --focus: var(--rose-tint);                /* 7.8:1 on midnight, 6.7:1 on navy */
}
.site-header[data-ink="burgundy"] { --h-fg-2: var(--cream); --h-accent: var(--cream); --focus: var(--cream); }
.site-header.is-scrolled { --h-bg: var(--paper); --h-hair: rgba(11, 36, 71, .1); }
.site-header.is-scrolled[data-ink="dark"] { --h-bg: var(--midnight); --h-hair: rgba(242, 233, 216, .1); }
.site-header.is-scrolled[data-ink="burgundy"] { --h-bg: var(--burgundy); --h-hair: rgba(242, 233, 216, .18); }
/* Over a photograph: a veil of midnight glass, no hairline. At .74 the links keep 4.5:1 even over
   pure cream; where the browser can, the print beneath is also blurred, so it reads as soft tone
   rather than detail (or a ghost of text) behind the links. The blur sits on the header itself:
   its view-transition-name makes it a backdrop root, so a pseudo-element's blur would see nothing. */
.site-header.is-scrolled[data-ink="image"] {
  --h-bg: rgba(6, 22, 44, .74);
  --h-hair: rgba(242, 233, 216, 0);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header.is-tucked {
  transform: translate3d(0, -101%, 0);
  transition: transform .25s cubic-bezier(.4, 0, 1, 1), color .3s var(--ease), -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

/* The logo: outlined master files only. Two copies cross-fade between light and dark. */
.brand {
  position: relative;
  display: block;
  flex: none;
  width: clamp(112px, 9vw, 130px);          /* never below the 96px minimum */
  aspect-ratio: 4627.57 / 1566;
}
.brand__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .3s var(--ease);
}
.brand__logo--dark { opacity: 0; }
.site-header:not([data-ink="light"]) .brand__logo--light { opacity: 0; }
.site-header:not([data-ink="light"]) .brand__logo--dark { opacity: 1; }
.brand--static .brand__logo { position: static; }

/* Navigation (from 900px) */
.nav { display: none; }
.nav__list, .nav__actions { display: flex; align-items: center; }
.nav__list { gap: clamp(16px, 1.9vw, 32px); }
.nav__actions { gap: 10px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 0 7px;
  font: 500 .84375rem/1.3 var(--f-body);
  letter-spacing: .02em;
  color: var(--h-fg-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .22s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease);
}
.nav__link:focus-visible { color: var(--h-fg); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--h-fg); } }
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; } }
.nav__link[aria-current="page"] { color: var(--h-fg); }
.nav__link[aria-current="page"]::after { background: var(--h-accent); transform: scaleX(1); }

/* Boxed actions in the header */
.box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 15px;
  font: 500 .8125rem/1 var(--f-body);
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--h-fg);
  border: 1px solid var(--h-box);
  transition: color .22s var(--ease), border-color .22s var(--ease), scale .1s ease-out;
}
.box::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--h-fg);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.box:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .box:hover::before { transform: scaleX(1); transform-origin: 0 50%; } }
.box:focus-visible { color: var(--navy); border-color: var(--h-fg); }
@media (hover: hover) and (pointer: fine) { .box:hover { color: var(--navy); border-color: var(--h-fg); } }
.site-header[data-ink="light"] .box:focus-visible { color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .site-header[data-ink="light"] .box:hover { color: var(--cream); } }
.site-header[data-ink="burgundy"] .box:focus-visible { color: var(--burgundy); }
@media (hover: hover) and (pointer: fine) { .site-header[data-ink="burgundy"] .box:hover { color: var(--burgundy); } }
.box--primary { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream); }
.box--primary::before { background: var(--navy); }
.site-header:not([data-ink="light"]) .box--primary::before { background: var(--midnight); }
.box--primary:focus-visible { color: var(--cream) !important; border-color: var(--burgundy); }
@media (hover: hover) and (pointer: fine) { .box--primary:hover { color: var(--cream) !important; border-color: var(--burgundy); } }
.site-header[data-ink="burgundy"] .box--primary { border-color: var(--h-box); }
.box--primary .chevs { color: var(--rose-tint); }
.box--primary:focus-visible .chevs { color: currentColor; }
@media (hover: hover) and (pointer: fine) { .box--primary:hover .chevs { color: currentColor; } }
/* Press (6): the box fills at once, in its hover colours, and the header's links take their ink */
.box:active { color: var(--navy); border-color: var(--h-fg); transition-duration: .1s; }
.site-header[data-ink="light"] .box:active { color: var(--cream); }
.site-header[data-ink="burgundy"] .box:active { color: var(--burgundy); }
.box--primary:active { color: var(--cream) !important; border-color: var(--burgundy); }
.nav__link:active { color: var(--h-fg); transition-duration: .1s; }
.nav__link:active::after { transform: scaleX(1); transform-origin: 0 50%; transition-duration: .1s; }
/* The current page among the boxed actions: its label is underlined, as a current link is. */
.box[aria-current="page"] .box__label {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 3px;
}

/* Menu button (below 900px) */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  font: 500 .8125rem/1 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h-fg);
}
.menu-btn__icon { position: relative; display: block; width: 22px; height: 9px; }
.menu-btn__icon i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { bottom: 0; transform-origin: 100% 50%; transform: scaleX(.64); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover .menu-btn__icon i:last-child { transform: scaleX(1); } }

@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 48px); }
  .menu-btn { display: none; }
}

/* Without JavaScript: the header scrolls with the page and small screens get a plain link row. */
html:not(.js) .menu-btn { display: none; }
@media (max-width: 899.98px) {
  html:not(.js) .site-header { position: relative; height: auto; background: var(--paper); }
  html:not(.js) .site-header__bar { flex-wrap: wrap; row-gap: 6px; padding-block: 16px; }
  html:not(.js) .nav { display: block; width: 100%; }
  html:not(.js) .nav__list, html:not(.js) .nav__actions { flex-wrap: wrap; gap: 4px 18px; }
  html:not(.js) .nav__actions { margin-top: 10px; }
}

/* Reading progress (About, Investors; site.js 12b): a 1px line across the very top. Its ink
   follows the header's: burgundy on light, rose on dark and over prints, cream over burgundy. */
.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-progress);
  height: 1px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: background-color .3s var(--ease);
  will-change: transform;
}
.progress[data-ink="dark"] .progress__bar { background: var(--rose); }
.progress[data-ink="burgundy"] .progress__bar { background: var(--cream); }
html:not(.js) .progress { display: none; }


/* ==========================================================================
   8. Menu (below 900px): a full-screen midnight room
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--cream);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .35s var(--ease-io), visibility 0s linear .35s;     /* site.js hides it after the same .35s */
}
.menu.is-open {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path .5s var(--ease-io), visibility 0s;
}
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--header-h);
}
.menu__bar .brand { width: 112px; }
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  font: 500 .8125rem/1 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
}
.menu-close__x { position: relative; width: 18px; height: 18px; }
.menu-close__x i {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu-close__x i + i { transform: rotate(-45deg); }

.menu__nav { flex: 1 0 auto; padding-top: clamp(12px, 4vh, 40px); }
.menu__item { border-top: 1px solid var(--hair); overflow: hidden; }
.menu__item:last-child { border-bottom: 1px solid var(--hair); }
.menu__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 6px 72px 6px 0;                 /* room on the right for the plate */
  color: var(--cream);
  text-decoration: none;
}
.menu__word {
  font: 200 clamp(1.875rem, 8vw, 3rem)/1.1 var(--f-display);
  letter-spacing: -.012em;
  transition: transform .35s var(--ease), color .22s var(--ease);
}
.menu__link:focus-visible .menu__word { transform: translateX(8px); }
@media (hover: hover) and (pointer: fine) { .menu__link:hover .menu__word { transform: translateX(8px); } }
.menu__link[aria-current="page"] .menu__word { color: var(--rose-tint); }
.menu__link:focus-visible { outline-offset: -2px; }
.menu__link:active .menu__word { color: var(--rose-tint); transition-duration: .1s; }   /* press (6) */

/* Each link reveals a small plate on hover or focus, at the right of its row (so the plate
   never sets the row's height). On touch only the current page's plate shows, and the others
   are never fetched (display: none keeps their lazy images from loading). */
.menu__thumb {
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px;
  height: 48px;
  translate: 0 -50%;
  overflow: hidden;
  background: var(--navy);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .45s var(--ease);
}
.menu__thumb picture { display: block; width: 100%; height: 100%; }
.menu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu__link:focus-visible .menu__thumb { clip-path: inset(0); }
@media (hover: hover) and (pointer: fine) { .menu__link:hover .menu__thumb { clip-path: inset(0); } }
@media (hover: none) {
  .menu__link:not([aria-current]) .menu__thumb { display: none; }
  .menu__link[aria-current="page"] .menu__thumb { clip-path: inset(0); }
}

.menu__foot { flex: none; padding-top: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.menu__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__actions .btn { flex: 1 1 140px; padding-inline: 16px; }
.menu__actions .btn[aria-current="page"] > span:first-child {       /* the current page, as in the header */
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  padding-bottom: 3px;
}
.menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 18px;
  font-size: .90625rem;
  color: var(--mist);
}
.menu__contact a { text-decoration: none; }

/* Menu arrival: rows rise in sequence */
.js:not(.still) .menu__item .menu__link {
  transform: translate3d(0, 105%, 0);
  transition: transform .6s var(--ease);
}
.js:not(.still) .menu.is-open .menu__item .menu__link { transform: none; }
.js:not(.still) .menu.is-open .menu__item:nth-child(1) .menu__link { transition-delay: .08s; }
.js:not(.still) .menu.is-open .menu__item:nth-child(2) .menu__link { transition-delay: .11s; }
.js:not(.still) .menu.is-open .menu__item:nth-child(3) .menu__link { transition-delay: .14s; }
.js:not(.still) .menu.is-open .menu__item:nth-child(4) .menu__link { transition-delay: .17s; }
.js:not(.still) .menu.is-open .menu__item:nth-child(5) .menu__link { transition-delay: .2s; }
.js:not(.still) .menu.is-open .menu__item:nth-child(6) .menu__link { transition-delay: .23s; }
.js:not(.still) .menu__foot { opacity: 0; transition: opacity .3s var(--ease); }
.js:not(.still) .menu.is-open .menu__foot { opacity: 1; transition-delay: .25s; }
@media (min-width: 900px) { .menu { display: none !important; } }
/* While the menu is open the page beneath it holds still (no scroll, no rubber band behind the
   room); its scrollbar's gutter is kept, so a narrow desktop window does not reflow under it. */
html.menu-open { overflow: hidden; scrollbar-gutter: stable; }


/* ==========================================================================
   9. Plates
   A plate is a photograph from the site's one series, matted like a book
   plate, with a numbered caption under a hairline. The files are already
   toned (midnight shadows, neutral grey mid-tones, cream highlights, fine grain;
   see tools/images.mjs), so nothing here or in gl.js tones them again.

   <figure class="plate" data-plate="name" data-cursor="Plate I" [data-gl] [data-drift]>
     <div class="plate__frame ratio-3x2">  the mat: sets the shape (a ratio-* class or the context)
       <div class="plate__clip">          what is visible; develop overlay; WebGL clips to this
         <div class="plate__img">          moved by site.js (drift, passage, grow)
           <picture>                       AVIF, WebP, JPEG; <img data-img="name"> sets the crop
     <figcaption class="caption"><span class="caption__num">Plate I</span><span class="caption__place">...</span>
   ========================================================================== */

.plate { position: relative; margin: 0; }
.plate__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--mat, var(--paper));
}
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-2x3 { aspect-ratio: 2 / 3; }
.plate__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.plate__img { position: absolute; inset: 0; }
.plate[data-drift] .plate__img { inset: -6% 0; will-change: transform; }
/* The drift runs on fine pointers only (site.js 11): elsewhere the print holds still in its mat */
@media not all and (hover: hover) and (pointer: fine) {
  .plate[data-drift] .plate__img { will-change: auto; }
}
.plate picture { display: block; width: 100%; height: 100%; }
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 1.8s var(--ease);
}
/* A slow 1.03 inside the mat, on the plate itself or anywhere in its hover scope ([data-hover-scope], site.js) */
@media (hover: hover) {
  .plate:hover .plate__img img, .plate.is-hover .plate__img img { transform: scale(1.03); }
}
/* Develop overlay: the print fades up from its paper (opaque until the plate arrives; see 15). */
.plate__clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mat, var(--paper));
  opacity: 0;
  pointer-events: none;
}

/* Caption: a hairline with a short accent that extends when the plate is hovered */
.caption {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 14px;
  padding-top: 11px;
}
.caption::before,
.caption::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.caption::after {
  background: var(--accent);
  clip-path: inset(0 calc(100% - 36px) 0 0);
  transition: clip-path 1.2s var(--ease);
}
.plate.is-hover .caption::after { clip-path: inset(0); }
@media (hover: hover) and (pointer: fine) { .plate:hover .caption::after { clip-path: inset(0); } }
.caption__num {
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg);
}
.caption__place {
  font: italic 400 1rem/1.3 var(--f-serif);
  color: var(--text-2);
  text-wrap: balance;
}

/* Focal points: where each print is held when a frame crops it. Bridges and spans are
   never cropped (the Millau plate keeps its own 2:3 shape). Clones (the families stage,
   the menu) carry data-img too, so they crop alike. */
img[data-img="ribbed-hall"] { object-position: 50% 42%; }
img[data-img="chand-baori"] { object-position: 50% 50%; }
img[data-img="ribbed-atrium"] { object-position: 50% 32%; }
img[data-img="museum-san"] { object-position: 54% 50%; }
img[data-img="konark-wheel"] { object-position: 50% 50%; }   /* the file is 3:2 around the whole wheel (tools/images.mjs), so any frame keeps it whole */
img[data-img="brick-vaults"] { object-position: 50% 44%; }
img[data-img="millau"] { object-position: 50% 50%; }
img[data-img="adalaj"] { object-position: 50% 50%; }
img[data-img="spiral-stair"] { object-position: 50% 50%; }
img[data-img="iim-ahmedabad"] { object-position: 50% 50%; }
img[data-img="sea-bridge"] { object-position: 50% 50%; }

/* Cursor companion: only over plates that are links, only on fine pointers (site.js) */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursor);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px 9px 13px;
  background: var(--midnight);
  color: var(--cream);
  font: 500 .65625rem/1 var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  will-change: transform, opacity;
}
.cursor .chev { width: 10px; height: 9px; color: var(--rose); }
.cursor.is-on { opacity: 1; }

/* WebGL layer (assets/gl.js): one fixed canvas above the page, below the headline ink.
   Its size comes from the viewport without the scrollbar (site.js), never from max-width. A
   plate with a live twin keeps its <img> (and its alt) in the page at opacity 0. The DOM
   prints come back for view-transition snapshots (gl-snap) and while the page is scrolled
   natively, by the scrollbar or find-in-page (is-native), which the canvas cannot follow. */
.gl {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-gl);
  max-width: none;
  pointer-events: none;
}
.plate.is-gl .plate__img img { opacity: 0; transform: none !important; }
.plate.is-gl .plate__clip::after { display: none; }
html.gl-snap .gl, html.is-native .gl { visibility: hidden; }
html.gl-snap .plate.is-gl .plate__img img, html.is-native .plate.is-gl .plate__img img { opacity: 1; }


/* ==========================================================================
   10. Ledger: label and value rows under hairlines (facts, terms, filings)
   ========================================================================== */

.ledger { position: relative; }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 20px 0 21px;
}
/* Hairlines are drawn as pseudo-elements so they can draw in (see 15). */
.ledger__row::before,
[data-rules] > li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}
.ledger__row:last-child::after,
[data-rules] > li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}
.ledger dt {
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
  padding-top: .45em;
}
.ledger dd {
  font: 400 clamp(1.1875rem, 1.6vw, 1.4375rem)/1.35 var(--f-body);
  letter-spacing: -.005em;
  color: var(--fg);
}
@media (min-width: 560px) {
  .ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: baseline; }
}


/* ==========================================================================
   11. Forms: base styles (the proposal and contact pages build on these)
   Dark panels by default, as the proposal form sets some colours inline.
   ========================================================================== */

.form { display: grid; gap: 22px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 14px; }
.field { display: grid; gap: 8px; }
.field__label {
  font: 500 var(--t-label)/1.45 var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}
.field__hint { font-size: .84375rem; line-height: 1.5; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: 400 1rem/1.4 var(--f-body);
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: 0;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--label); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .input:hover, .select:hover, .textarea:hover { border-color: var(--fg); } }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--rose) !important; box-shadow: inset 2px 0 0 var(--rose); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--burgundy); flex: none; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hair-2); }
.seg button {
  min-height: 44px;
  padding: 0 18px;
  font: 500 .875rem/1 var(--f-body);
  color: var(--text-2);
  transition: background-color .22s var(--ease), color .22s var(--ease), scale .1s ease-out;
}
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.range { width: 100%; accent-color: var(--burgundy); }
.form__status { min-height: 1.5em; font-size: .90625rem; color: var(--fg); }


/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px) 28px;
  font-size: .9375rem;
}
.footer__top { row-gap: 48px; }
.footer__sig { grid-column: 1 / -1; }
.footer__brand { display: inline-block; }
.footer__brand img { width: 220px; height: auto; }    /* signature lockup: 200px or wider keeps the descriptor legible */
.footer__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "contact contact" "explore office";   /* phones: contact first, across; then two columns */
  gap: 40px var(--g);
}
.footer__col--explore { grid-area: explore; }
.footer__col--contact { grid-area: contact; }
.footer__col--office { grid-area: office; }
.footer__col--contact .footer__list { grid-auto-flow: column; justify-content: start; column-gap: 24px; }
@media (max-width: 419.98px) {
  .footer__col--contact .footer__list { grid-auto-flow: row; }
}
.footer__h { margin-bottom: 18px; }
.footer__list { display: grid; gap: 6px; }
.footer__list a { color: var(--text); text-decoration: none; line-height: 1.7; }
.footer__list a:focus-visible { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .footer__list a:hover { color: var(--fg); } }
.footer__list a[aria-current="page"] { color: var(--fg); }
.footer__list a:active { color: var(--fg); }                    /* press (6) */
.footer__list--contact a { color: var(--fg); }
.footer__address { font-size: .90625rem; line-height: 1.65; color: var(--text-2); max-width: 22em; }
.footer__addr-label {
  display: block;
  margin-bottom: 4px;
  font: 500 var(--t-label)/1.45 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}
.clock { display: grid; gap: 6px; margin-top: 22px; }
.clock__time {
  font: 200 clamp(2.125rem, 3vw, 2.75rem)/1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--fg);
}
.clock__time .clock__colon { transition: opacity .6s var(--ease); }
.clock__time .clock__colon.is-dim { opacity: .35; }       /* one pulse as the minute turns */
html:not(.js) .clock__time { display: none; }              /* without the script there is no time to show */
.clock__place { font: italic 400 .9375rem/1.4 var(--f-serif); color: var(--text-2); }

.footer__base {
  display: grid;
  gap: 14px;
  margin-top: clamp(56px, 7vw, 96px);
}
.footer__cornerstone {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font: 500 var(--t-label)/1.6 var(--f-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
  font-variant-numeric: lining-nums tabular-nums;
}
.footer__cornerstone span { white-space: nowrap; }
.footer__cornerstone span:not(:last-child)::after {      /* the separator trails its item, so a wrapped line never starts with one */
  content: "·";
  padding: 0 .75em;
  color: var(--accent);
}
.footer__statutory { max-width: 62em; font-size: .8125rem; line-height: 1.65; color: var(--text-2); }
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 8px;
  font-size: .875rem;
}
.footer__meta > a:first-child { color: var(--text); }
.footer__top-link { font-size: .875rem; }

@media (min-width: 960px) {
  .footer__sig { grid-column: 1 / 5; }
  .footer__cols { grid-column: 5 / -1; grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); grid-template-areas: "explore contact office"; }
  .footer__col--contact .footer__list { grid-auto-flow: row; }
}
@media (min-width: 1200px) {
  .footer__sig { grid-column: 1 / 6; }
  .footer__cols { grid-column: 7 / -1; }
}
.footer__list--contact a { overflow-wrap: anywhere; }


/* ==========================================================================
   13. Home
   ========================================================================== */

/* ---------- 13.1 Hero: a title page facing its frontispiece ----------
   Phones and tablets: kicker, the plate, then the headline standing on the plate's lower edge
   (its x-height in cream on the print, its descenders in navy on the paper), lede, actions,
   facts. From 960px, the Monograph title page: the headline in three lines and the small type
   in columns 1 to 5, facing a frontispiece in columns 7 to 12 (the reading axis) that starts
   just under the header; the title block is centred against the plate, and the fact ledger's
   rule runs level with the caption's. On desktop with motion the plate then grows (13.2). */

.hero { position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-top: calc(var(--header-space) + 14px);
  padding-bottom: 40px;
  --overlap: .8em;                                 /* phones: the first line stands on the plate's edge */
}
.hero__grid > * { grid-column: 1 / -1; min-width: 0; }

.hero__kicker { grid-row: 1; margin-bottom: 16px; }
.hero__plate { grid-row: 2 / 4; }                          /* with the headline's row: see the caption below */
.hero__title { grid-row: 3; }
.hero__lede { grid-row: 4; margin-top: 18px; }
.hero__actions { grid-row: 5; margin-top: 24px; }
.hero__facts { grid-row: 6; margin-top: 28px; }

.hero__plate { --mat: var(--midnight); }                   /* the frontispiece develops out of the dark */
.hero__plate .plate__frame { aspect-ratio: 4 / 3; }

/* Phones and tablets: the plate's foot is burned in a little, as a printer darkens a print's
   edge, so the cream letters standing on it keep 3:1 over the lit rib bases. */
@media (max-width: 959.98px) {
  .hero__plate .plate__clip::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 32%;
    z-index: 1;
    background: linear-gradient(0deg, rgba(6, 22, 44, .66) 0%, rgba(6, 22, 44, .36) 45%, rgba(6, 22, 44, 0) 100%);
    pointer-events: none;
  }
}

/* Phones and tablets: the caption hangs under the plate's right edge, beside "placed." The plate
   spans the headline's row too (a subgrid), so a caption that wraps to more lines than the
   headline has pushes the lede down rather than running into it. */
.hero__plate {
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
}
.hero__plate .plate__frame { grid-row: 1; }
.hero__plate .caption {
  grid-row: 2;
  justify-self: end;
  align-self: start;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 0;
  max-width: 44%;
  margin-top: calc(var(--t-h1) * 1.02 - var(--overlap) + 12px);   /* level with "placed." */
  text-align: right;
}
.hero__plate .caption::after { left: auto; right: 0; clip-path: inset(0 0 0 calc(100% - 36px)); }
@media (hover: hover) and (pointer: fine) { .hero__plate:hover .caption::after { clip-path: inset(0); } }

/* The headline. Two identical copies in one grid cell: navy on paper, cream on the print.
   Each is clipped at the plate's edge, so the ink changes exactly where the letters cross.
   The lines break at the same words in both copies (the explicit <br>s), and may still wrap
   under a reader's own text spacing. */
.hero__title {
  position: relative;
  z-index: var(--z-over);
  margin-top: calc(-1 * var(--overlap));
  font-family: var(--f-display);
  font-weight: 200;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
  clip-path: inset(var(--overlap) -.3em -.4em -.3em);
}
.hero__title--ink {
  color: var(--cream);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  clip-path: inset(-.3em -.3em calc(100% - var(--overlap)) -.3em);
}
.hero__title .br-wide { display: none; }

/* Phones (owner, 28 Sep 2026): the headline no longer stands on the plate's edge. It starts a
   clear step below the print, entirely in navy, so no line is half cream and half ink. The
   burned-in foot of the print is not needed here. Tablets and desktops are unchanged. */
@media (max-width: 599.98px) {
  .hero__grid { --overlap: 0em; }
  .hero__title--ink { display: none; }
  /* the caption sits under the print, as on every other plate, so it never meets the headline */
  .hero__plate { display: block; grid-row: 2; }
  .hero__plate .caption {
    display: flex; gap: 2px 14px; justify-items: normal; justify-self: auto; max-width: none;
    margin-top: 14px; text-align: left;
  }
  .hero__plate .caption::after { left: 0; right: 0; clip-path: inset(0 calc(100% - 36px) 0 0); }
  .hero__title { margin-top: 26px; }
  .hero__plate .plate__clip::before { content: none; }
}
.hw {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: .12em .05em .22em;
  margin: -.12em -.05em -.22em;
}
.hw__i { display: inline-block; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .btn { flex: 1 1 auto; }

/* The fact ledger: two by two, a hairline between the columns, tabular figures. */
.facts {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 2px 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font: 500 var(--t-label)/1.8 var(--f-body);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--label);
}
.facts li { white-space: nowrap; }
.facts li:nth-child(odd) { padding-right: 18px; }
.facts li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hair); }
@media (max-width: 419.98px) {
  .facts { grid-template-columns: 1fr; }
  .facts li:nth-child(n) { padding: 0; border: 0; }
}
.facts .num { color: var(--fg); }

@media (min-width: 560px) {
  .hero__plate .plate__frame { aspect-ratio: 3 / 2; }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* 12 columns: the title page faces the frontispiece. */
@media (min-width: 960px) {
  .hero { height: clamp(540px, 100svh, 1040px); }
  .hero__grid {
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) auto;
    padding-top: calc(var(--header-space) + clamp(12px, 2.7vh, 24px));
    padding-bottom: clamp(18px, 3.2vh, 34px);
  }
  .hero__kicker { grid-column: 1 / 6; grid-row: 2; margin: 0; }
  .hero__title {
    grid-column: 1 / 6;
    grid-row: 3;
    margin-top: clamp(12px, 2.2vh, 22px);
    /* at rest the plate is clear of the headline; while it grows (13.2) --cut follows its edge */
    clip-path: inset(-.3em calc(100% - var(--cut, 10000px)) -.4em -.3em);
  }
  .hero__title--ink { clip-path: inset(-.3em -.3em -.4em var(--cut, 10000px)); }
  .hero__title .br-wide { display: inline; }
  .hero__lede { grid-column: 1 / 6; grid-row: 4; margin-top: clamp(12px, 2.4vh, 24px); max-width: 25em; }
  .hero__actions { grid-column: 1 / 6; grid-row: 5; margin-top: clamp(18px, 3.4vh, 36px); }
  .hero__facts { grid-column: 1 / 6; grid-row: 7; margin-top: 14px; align-self: start; }

  .hero__plate {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }
  .hero__plate .plate__frame { grid-row: 1 / 7; aspect-ratio: auto; }
  .hero__plate .caption {
    grid-row: 7;
    justify-self: stretch;
    display: flex;
    justify-items: normal;
    gap: 2px 14px;
    max-width: none;
    margin-top: 14px;
    text-align: left;
  }
  .hero__plate .caption::after { left: 0; right: 0; clip-path: inset(0 calc(100% - 36px) 0 0); }
  @media (hover: hover) and (pointer: fine) { .hero__plate:hover .caption::after { clip-path: inset(0); } }
}
/* 960 to 1199px: tighter tracking keeps the two fact columns inside columns 1 to 5. */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .facts { letter-spacing: .12em; }
  .facts li:nth-child(odd) { padding-right: 12px; }
  .facts li:nth-child(even) { padding-left: 12px; }
}


/* ---------- 13.2 The overture: the frontispiece grows into the next section's ground ----------
   Grow mode (html.grow: desktop, fine pointer, motion; decided in the page head before the
   first paint, so nothing moves when it starts). The plate's print lives in a fixed layer,
   clipped to the plate at rest; as the hero leaves, the clip opens to the whole viewport, its
   right and top edges first, and its left edge sweeps across the title page (the headline's
   ink changes as it passes; the small type steps back only once the print reaches it). The
   print then becomes the ground of "Built to last": the heading alone holds on it for a
   breath, and the reading (prose and tenets) arrives on flat navy as the print scrolls away. */

.grow-veil { display: none; }
html.grow .hero__plate .plate__clip {
  position: fixed;
  inset: 0;
  z-index: var(--z-grow);
  clip-path: inset(100%);                            /* site.js sets the real clip on its first frame */
  will-change: clip-path;
}
html.grow .hero__plate .plate__img {
  inset: auto;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
html.grow .grow-veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--navy);
  opacity: 0;
  transform: scale(0);                               /* site.js moves and sizes it with the print (13.2) */
  transform-origin: 0 0;
  will-change: transform, opacity;
  pointer-events: none;
}
html.grow .tenets > .wrap { position: relative; z-index: var(--z-over); }
html.grow .hero__grid.is-fading > [data-reveal] { transition: none; }
html.grow .hero__grid > [data-reveal]:focus-within { opacity: 1 !important; }   /* never fade what has focus */


/* ---------- 13.3 Built to last (navy) ---------- */

.tenets__head { grid-column: 1 / -1; }
.tenets__title { max-width: 11em; }
.tenets__body { grid-column: 1 / -1; margin-top: 36px; }
.tenets__label { margin-top: 44px; }
.tenets__list { position: relative; margin-top: 16px; }
.tenet {
  position: relative;
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  column-gap: var(--g);
  padding: 20px 0 22px;
}
.tenet__num {
  font: 500 1.625rem/1.05 var(--f-display);
  color: var(--rose);                 /* 26px: rose is allowed at 24px and over */
}
.tenet__name { font-size: clamp(1.3125rem, 1.7vw, 1.5625rem); line-height: 1.2; }
.tenet__text { margin-top: 6px; color: var(--text-2); font-size: .96875rem; line-height: 1.6; }
.tenets__more { margin-top: 30px; }

@media (min-width: 960px) {
  .tenets__head { grid-column: 1 / 7; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); }
  .tenets__body { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
  /* Grow mode: the heading's breath on the print. The reading starts a little over a screen
     below the heading, so the heading reaches its sticky place and holds alone on the print
     before the prose and tenets arrive on navy (site.js ends the print where they begin). */
  html.grow .tenets { padding-top: clamp(40px, 6vh, 64px); }
  html.grow .tenets__body { padding-top: calc(108vh - var(--header-h) - 48px); }
}


/* ---------- 13.4 Four families of credit ---------- */

.families__title { grid-column: 1 / -1; }
.families__title h2 { margin-top: 18px; }
.families__lede { grid-column: 1 / -1; margin-top: 20px; }
.families__body { margin-top: clamp(40px, 5.5vw, 80px); }
.families__stage { display: none; }
.families__list { grid-column: 1 / -1; }

.family {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  column-gap: var(--g);
  align-content: start;
  padding: 26px 0 40px;
}
.family::before {                                         /* hairline */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.family::after {                                          /* the active family's accent rule */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
}
.family__num {
  grid-row: 1;
  font: 500 clamp(1.5rem, 2vw, 1.875rem)/1.1 var(--f-display);
  color: var(--accent);
  transition: color .6s var(--ease);
}
.family__name { grid-column: 2; font-size: var(--t-h3); line-height: 1.14; }
.family__link {
  display: inline;
  color: inherit;
  text-decoration: none;
  transition: color .6s var(--ease);
}
.family__link .chevs { margin-left: 12px; vertical-align: .14em; }
.family__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }     /* the whole row is the link */
.family__line { grid-column: 2; margin-top: 10px; max-width: 34em; color: var(--text-2); transition: color .6s var(--ease); }
/* Phones and tablets: each family carries its own plate, in the photograph's own shape */
.family__plate { grid-column: 1 / -1; margin-top: 26px; }
.family__plate--port { max-width: 78%; }
@media (min-width: 560px) {
  .family__plate { grid-column: 2; max-width: 520px; }
  .family__plate--port { max-width: 400px; }
}

@media (min-width: 960px) {
  .families__title { grid-column: 1 / 7; }
  .families__lede { grid-column: 7 / -1; margin-top: 0; align-self: end; padding-bottom: .3em; }

  /* Without JavaScript: each family faces its own plate */
  html:not(.js) .family { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-bottom: 56px; }
  html:not(.js) .family__plate { grid-column: 1 / 6; grid-row: 1 / span 3; margin: 0; max-width: none; }
  html:not(.js) .family__num { grid-column: 7 / 8; }
  html:not(.js) .family__name, html:not(.js) .family__line { grid-column: 8 / -1; }

  /* With JavaScript: one pinned plate on the heading side; the families pass on the reading axis.
     Each family's own plate stays in the page for screen readers (its alt and its caption), out
     of sight; the stage shows the same photographs (same srcset and sizes, so no second download). */
  .js .families__body { align-items: start; }
  .js .families__stage { display: block; grid-column: 1 / 6; grid-row: 1; align-self: stretch; }
  .js .families__list { grid-column: 7 / -1; grid-row: 1; }
  .js .family { min-height: clamp(180px, 30vh, 300px); }
  .js .family__plate {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .js .family:not(.is-active) .family__num { color: var(--slate); }
  .js .family:not(.is-active) .family__link { color: var(--ink-2); }
  .js .family.is-active::after { transform: scaleX(1); }
}

/* The stage: one square plate for four photographs of different shapes (three landscape,
   one portrait); each is held at its own focal point (section 9). */
.stage__pin { position: sticky; top: calc(var(--header-h) + 24px); }
.plate--stage .plate__frame { aspect-ratio: 1 / 1; max-height: calc(100vh - var(--header-h) - 150px); width: 100%; }
.plate--stage .plate__img { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.plate--stage .plate__img.is-shown { opacity: 1; }
.plate--stage.is-gl .plate__img { transition: none; }
.stage__link { display: block; color: inherit; }
.plate--stage .caption { min-height: 2.6em; }
.caption__swap { display: inline-flex; gap: 2px 14px; flex-wrap: wrap; align-items: baseline; }


/* ---------- 13.5 The terms: stated once, as a four-clause ledger (cream) ----------
   The clause ledger (.clauses) is shared: Products sets it on navy, Accessibility and Pitch to us
   use it for their numbered lists (13b). */

.terms { position: relative; }
.terms__head h2 { margin-top: 18px; max-width: 13em; }
.clauses { position: relative; margin-top: 40px; }
.clause {
  position: relative;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  padding: 22px 0 24px;
}
.clause__num { grid-row: 1 / span 2; padding-top: .35em; font: italic 400 1rem/1.4 var(--f-serif); color: var(--accent-text); }
.clause__term {
  font-size: clamp(1.3125rem, 1.7vw, 1.5625rem);
  line-height: 1.2;
  transition: transform .35s var(--ease);
}
.clause__text { color: var(--text-2); font-size: .96875rem; line-height: 1.6; max-width: 30em; }
@media (hover: hover) and (pointer: fine) { .clause:hover .clause__term { transform: translateX(6px); } }
.clause::before { transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s), background-color .3s var(--ease) 0s !important; }
@media (hover: hover) and (pointer: fine) { .clause:hover::before { background-color: var(--accent); } }

@media (min-width: 960px) {
  .terms__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); }
  .clauses { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
  .clause__text { font-size: .9375rem; }
}
/* From 1200px the term and its text share a line; below, the term sits above its text. */
@media (min-width: 1200px) {
  .clause { grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(14px, 1.4vw, 24px); align-items: baseline; }
  .clause__num { grid-row: 1; }
}


/* ---------- 13.6 The house rule: a slow passage ---------- */

.statement { position: relative; }
.statement__pin {
  position: relative;
  z-index: var(--z-veil);          /* sticky makes this a stacking context: keep it (veil, quote) above the canvas */
  display: flex;
  align-items: flex-end;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  overflow: hidden;
  padding-block: 96px 88px;
}
.statement__plate { position: absolute; inset: 0; }
.statement__plate .plate__frame { position: absolute; inset: 0; aspect-ratio: auto; }
.statement__plate .plate__img { inset: -9% 0; will-change: transform; }
.statement__plate .plate__img img { transition: none; transform: none !important; }
.statement__veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(6, 22, 44, .9) 0%, rgba(6, 22, 44, .7) 32%, rgba(6, 22, 44, .12) 62%, rgba(6, 22, 44, 0) 80%),
    linear-gradient(180deg, rgba(6, 22, 44, .45) 0%, rgba(6, 22, 44, 0) 20%);
}
.statement__grid { position: relative; z-index: var(--z-over); }
.statement__quote p {
  max-width: 16.5em;
  font: italic 300 clamp(1.75rem, 3vw, 2.75rem)/1.24 var(--f-serif);
  letter-spacing: -.006em;
  color: var(--cream);
  text-wrap: balance;
}
.statement__by { margin-top: clamp(20px, 2.4vw, 32px); color: var(--label); }
.statement__by .chev { color: var(--rose); }
.statement__caption {
  position: absolute;
  z-index: var(--z-over);
  right: var(--m);
  top: calc(var(--header-h) + 24px);
  margin: 0;
  width: min(300px, 42vw);
}
.statement__caption .caption__num { color: var(--cream); }
.statement__caption .caption__place { color: var(--mist); }

@media (min-width: 960px) {
  /* Landscape windows see a band of this portrait print. The owner asked for its lower half, the
     good half: the arch opening, the lit arcade and the gleaming floor. The quote stands at the
     foot, bottom left, on the shadowed floor under the bottom veil; the caption stays top right on
     the dark pier. */
  .statement__plate img[data-img="brick-vaults"] { object-position: 50% 46%; }
  .statement__pin {
    align-items: flex-end;
    padding-block: calc(var(--header-h) + 24px) clamp(56px, 9vh, 104px);
  }
  .statement.is-passage { height: 150vh; }
  .statement.is-passage .statement__pin { position: sticky; top: 0; height: 100vh; max-height: none; }
  /* The veil settles the left edge, the top and the foot, where the quote and caption stand; the
     lit arcade in the middle of the frame is left alone. */
  .statement__veil {
    background:
      linear-gradient(90deg, rgba(6, 22, 44, .5) 0%, rgba(6, 22, 44, .25) 30%, rgba(6, 22, 44, 0) 45%),
      linear-gradient(0deg, rgba(6, 22, 44, .6) 0%, rgba(6, 22, 44, .3) 22%, rgba(6, 22, 44, 0) 38%),
      linear-gradient(180deg, rgba(6, 22, 44, .35) 0%, rgba(6, 22, 44, 0) 22%);
  }
  .statement__quote { grid-column: 1 / 7; }
  /* The caption faces the quote from the right, at the foot of the frame, on the shadowed floor */
  .statement__caption {
    top: auto;
    bottom: clamp(56px, 9vh, 104px);
    right: max(var(--m), calc((100% - var(--maxw)) / 2));
    width: min(340px, calc((min(100vw - 2 * var(--m), var(--maxw)) - 11 * var(--g)) / 12 * 4 + 3 * var(--g)));
  }
}


/* ---------- 13.7 On the record ---------- */

.record__head { grid-column: 1 / -1; }
.record__head h2 { margin-top: 18px; max-width: 10em; }
.record__text { margin-top: 22px; max-width: 30em; color: var(--text-2); }
.record__ledger { grid-column: 1 / -1; margin-top: 44px; }
.ledger__aside { color: var(--text-2); font-size: .82em; }
.ledger__note {
  display: block;
  margin-top: 12px;
  font: italic 400 1rem/1.45 var(--f-serif);
  color: var(--text-2);
  max-width: 26em;
}
.cin { letter-spacing: .01em; overflow-wrap: anywhere; }

/* Promoter holding: a hairline scale from 0 to 100%; the rise from 2017 to 2026 draws in,
   ending on the chevron. Positions come from data-from / data-to via site.js. */
.holding { display: none; }
.js .holding {
  position: relative;
  display: block;
  height: 14px;
  margin-top: 16px;
  max-width: 420px;
}
.holding > span { position: absolute; top: 7px; height: 1px; }
.holding__track {                         /* the hairline breaks where the chevron lands */
  left: 0; right: 0;
  background: linear-gradient(to right, var(--hair-2) calc(var(--to, 0%) + 1px), transparent calc(var(--to, 0%) + 1px), transparent calc(var(--to, 0%) + 28px), var(--hair-2) calc(var(--to, 0%) + 28px));
}
.holding__base { left: 0; width: var(--from, 0%); height: 1px; background: var(--fg); opacity: .55; }
.holding__rise {
  left: var(--from, 0%);
  width: calc(var(--to, 0%) - var(--from, 0%));
  top: 6px !important;
  height: 3px !important;
  background: var(--fg);
  transform-origin: 0 50%;
}
.holding__tick { left: var(--from, 0%); top: 1px !important; width: 1px; height: 13px !important; background: var(--accent); }
.holding__mark {
  position: absolute;
  top: -3px;
  left: calc(var(--to, 0%) + 6px);
  width: 17px;
  height: 16px;
  color: var(--accent);
}

@media (min-width: 960px) {
  .record__head { grid-column: 1 / 7; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); }
  .record__ledger { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
}


/* ---------- 13.8 Two ways to begin: a burgundy door and a navy door ----------
   The doors (.begin) are shared: Products ends on the burgundy door without a plate, Contact
   with the sea bridge straddling into it (13b).
   The Millau plate straddles the boundary, half on the paper above (which leaves room for
   it, --rise) and half in the burgundy door, so the image sews the two together. From 960px
   the doors are two bands: the burgundy door holds the plate on the heading side and its
   copy on the reading axis; the navy door below keeps the same axis. Each door is one link;
   hovering it draws the underline, steps the chevron and warms the print (gl.js); nothing
   darkens the colour fields. */

.record { padding-bottom: calc(var(--section) + var(--rise)); }

.begin { position: relative; overflow-x: clip; }
.begin__grid { row-gap: 0; }
.begin__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  padding-block: clamp(56px, 6.5vw, 96px);
  background: none;
}
.begin__panel::before {                                  /* the colour field bleeds to the viewport edge */
  content: "";
  position: absolute;
  inset: 0 -100vw;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;                                   /* only the door itself (its link) answers the pointer */
}
.begin__panel--a { padding-top: 0; }

/* Percentages on a grid item resolve against its grid area's width, so the straddle is
   exact: 75% of the plate's width is half its 2:3 height. */
.begin__plate {
  position: relative;
  z-index: 1;
  width: 62%;
  margin-top: calc(62% * -.75);
  margin-bottom: clamp(32px, 4vw, 56px);
  --mat: var(--paper);                                    /* a print on paper: it develops out of its own sheet */
}
.begin__plate .caption__num { color: var(--cream); }
@media (min-width: 560px) {
  .begin__plate { width: 42%; margin-top: calc(42% * -.75); }
}

.begin__copy { max-width: 30em; }
.begin__who { margin-bottom: 16px; }
.begin__title { font-size: clamp(2.125rem, 3.8vw, 3.375rem); line-height: 1.06; }
.begin__link { color: inherit; text-decoration: none; }
.begin__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }     /* the whole door is the link */
.begin__link .u { background-image: linear-gradient(var(--accent), var(--accent)); padding-bottom: .04em; }
.begin__link .chevs { margin-left: .32em; vertical-align: .08em; color: var(--accent); }
.begin__text { margin-top: 16px; max-width: 27em; color: var(--text-2); }
.begin__panel:focus-within .chevs .chev:first-child { transform: translate(115%, -115%); }
@media (hover: hover) and (pointer: fine) { .begin__panel:hover .chevs .chev:first-child { transform: translate(115%, -115%); } }
.begin__panel:focus-within .chevs .chev + .chev { transform: none; transition-delay: .07s; }
@media (hover: hover) and (pointer: fine) { .begin__panel:hover .chevs .chev + .chev { transform: none; transition-delay: .07s; } }
.begin__panel:focus-within .u { background-position: 0 100%; background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .begin__panel:hover .u { background-position: 0 100%; background-size: 100% 1px; } }

@media (min-width: 960px) {
  .begin__panel { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .begin__panel--a { padding-bottom: clamp(56px, 6.5vw, 96px); }
  .begin__plate { grid-column: 1 / 5; grid-row: 1; width: 100%; margin-top: -75%; margin-bottom: 0; }
  .begin__copy { grid-column: 7 / -1; grid-row: 1; }
  .begin__panel--a .begin__copy { padding-top: clamp(56px, 6.5vw, 96px); }
}


/* ==========================================================================
   13b. Pages
   The inner pages are built from Home's system (themes, type, plates, the
   ledger, the clause ledger 13.5, the doors 13.8) and add a few components of
   their own. 13b.1 is shared by several pages; each page's own rules follow,
   scoped to its body class (page-about, page-approach, page-products,
   page-team, page-contact, page-accessibility, page-404, page-investors,
   page-proposal). Their print rules are in 17.

     13b.1  Shared: the chapter title, parts, the pull quote, Next, links in a ledger
     13b.2  The folio: a title page facing its frontispiece (About, Approach)
     13b.3  About
     13b.4  Approach
     13b.5  Products
     13b.6  The opening: a chapter's title page (Team, Contact, Accessibility, 404)
     13b.7  Team
     13b.8  Contact
     13b.9  Accessibility
     13b.10 404
     13b.11 Investors
     13b.12 Pitch to us
   ========================================================================== */


/* ---------- 13b.1 Shared ---------- */

/* The chapter title: an inner page's h1, a step below Home's title page (--t-title, section 1). */
.folio__title,
.opening__title,
.catalogue__title,
.ir-hero__title,
.pitch-hero__title {
  font-size: var(--t-title);
  line-height: 1.1;                /* PP Eiko's long descenders and ascenders need the room: "people" over "decision" touched at 1.04 */
  letter-spacing: -.02em;
}

/* Parts: a heading side that holds while the reading side passes (as Home's terms and record). */
.part__head { align-self: start; }
.part__head h2 { max-width: 12em; }
.part__head .label + h2 { margin-top: 18px; }
.part__body { margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 960px) {
  .part__head { grid-column: 1 / 7; position: sticky; top: calc(var(--header-h) + 48px); }
  .part__body { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
}

/* The pull quote: a burgundy band, type only. Home sets the house rule over a photograph; the
   inner pages give their quote to the accent alone, in Home's quote face and size, the opening
   mark hung in the margin, attributed under it with the chevron. */
.pull__fig { grid-column: 1 / -1; }
.pull__quote p {
  max-width: 20em;
  font: italic 300 clamp(1.75rem, 3vw, 2.75rem)/1.24 var(--f-serif);
  letter-spacing: -.006em;
  color: var(--fg);
  text-wrap: balance;
}
.pull__by { margin-top: clamp(22px, 2.6vw, 36px); }
.pull__by .chev { color: var(--accent); }
@media (min-width: 960px) {
  .pull__fig { grid-column: 1 / 11; }
}

/* Next: the chapter that follows, one pattern on every page: the "Next" kicker and the next
   page's own title on the reading axis (as Home's doors set their copy), and optionally that
   page's print on the heading side, captioned as it is captioned elsewhere. The whole band is
   one link (its title's link covers it, as Home's doors do); hovering or focusing anywhere in it
   draws the underline and steps the chevron. With the print (next--plate; next--port for an
   upright one), the print warms too (data-hover-scope, gl.js), carries the cursor label
   (site.js 12) and morphs into that page's frontispiece. */
.next { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.next__plate { width: 58%; margin-bottom: 28px; }
.next--port .next__plate { width: 46%; }
.next__plate .caption__num { color: var(--accent-text); }
.next__label { margin-bottom: 18px; }
.next__title {
  max-width: 12em;
  font: 200 var(--t-h2)/1.12 var(--f-display);   /* as the chapter titles: room between descenders and ascenders */
  letter-spacing: -.016em;
  color: var(--fg);
  text-wrap: balance;
}
.next__link { color: inherit; text-decoration: none; }
.next__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* the whole band is the link */
.next__link .u { background-image: linear-gradient(var(--accent), var(--accent)); padding-bottom: .04em; }
.next__link .chevs { margin-left: .32em; vertical-align: .08em; }
.next__text { margin-top: 16px; max-width: 30em; color: var(--text-2); }
.next:focus-within .next__link .u { background-position: 0 100%; background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .next:hover .next__link .u { background-position: 0 100%; background-size: 100% 1px; } }
.next:focus-within .chevs .chev:first-child { transform: translate(115%, -115%); }
@media (hover: hover) and (pointer: fine) { .next:hover .chevs .chev:first-child { transform: translate(115%, -115%); } }
.next:focus-within .chevs .chev + .chev { transform: none; transition-delay: .07s; }
@media (hover: hover) and (pointer: fine) { .next:hover .chevs .chev + .chev { transform: none; transition-delay: .07s; } }
@media (min-width: 960px) {
  .next--plate .next__grid { align-items: center; }
  .next__plate { grid-column: 1 / 5; grid-row: 1; width: auto; margin: 0; }
  .next--port .next__plate { grid-column: 1 / 4; width: auto; }
  .next__body { grid-column: 7 / -1; grid-row: 1; }
  .next--plate .next__body { margin-bottom: 1.2em; }   /* level with the print, not with the print and its caption */
}

/* Links inside a ledger: a value that is also a link (an email, a telephone number, a website)
   carries a quiet hairline at rest, so it reads as a link without colour; on hover or focus the
   accent draws over it from the left (the .u underline over a resting rule). */
.ledger a .u,
.ledger button .u {
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--hair-2), var(--hair-2));
  background-position: 100% 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
}
.ledger a:focus-visible .u,
.ledger button:focus-visible .u {
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
}
@media (hover: hover) and (pointer: fine) { .ledger a:hover .u,
.ledger button:hover .u {
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
} }
.ledger a:active .u, .ledger button:active .u { background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; transition-duration: .1s; }
.ledger__link { color: inherit; text-decoration: none; }        /* a value's own link keeps the value's type */
.ledger__sub {                                                   /* a secondary line under a value: a role, a locality */
  display: block;
  margin-top: 6px;
  font-size: .96875rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-2);
}
.ledger__act { display: flex; width: fit-content; margin-top: 8px; padding-block: 4px; }


/* ---------- 13b.2 The folio: a title page facing its frontispiece (About, Approach) ----------
   Home's title-page idiom, quieter: kicker, title and lede on the heading side (columns 1 to 6),
   facing a frontispiece that starts just under the header and ends on the reading axis's right
   edge. The title block is centred against the print; on About a short contents runs on the fact
   line, its rule level with the caption's (Home's fact ledger). No crossing ink, no growing
   plate: those belong to Home. Phones and tablets: the title first, then the print. */

.folio { position: relative; }
.folio__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-top: calc(var(--header-space) + clamp(28px, 7vw, 56px));
  padding-bottom: clamp(56px, 8vw, 96px);
}
.folio__grid > * { grid-column: 1 / -1; min-width: 0; }
.folio__title { margin-top: 18px; max-width: 12em; }
/* The title's two lines are set by hand (the break is part of the composition); each is a mask
   that rises in turn (section 15), the second a beat after the first. */
.folio__title .ln + .ln .ln__i { --i: 1; }
.folio__lede { margin-top: 20px; max-width: 30em; }
.folio__plate { margin-top: 40px; --mat: var(--midnight); }      /* develops out of the dark, as Home's frontispiece does */
.folio__contents { margin-top: 32px; }                           /* About's contents: Home's fact ledger, as links */
/* Links, not facts: each carries the quiet resting hairline of a ledger link (13b.1), which the
   accent draws over on hover and focus. Phones and tablets: rows of about 32px, to tap. */
.folio__contents a {
  display: inline-block;
  padding-block: 6px;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--hair-2), var(--hair-2));
  background-position: 100% 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  background-origin: content-box;
  background-clip: content-box;
  transition: color .22s var(--ease), background-size .35s var(--ease);
}
.folio__contents a:focus-visible {
  color: var(--fg);
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
}
@media (hover: hover) and (pointer: fine) { .folio__contents a:hover {
  color: var(--fg);
  background-position: 0 100%, 0 100%;
  background-size: 100% 1px, 100% 1px;
} }
.folio__contents a:active { color: var(--fg); background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; transition-duration: .1s; }
@media (min-width: 960px) {
  .folio__contents a { margin-block: -6px; }                     /* the same target, on the fact line's own rhythm */
}

@media (min-width: 960px) {
  .folio__grid {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    padding-top: calc(var(--header-space) + clamp(12px, 2.7vh, 24px));
  }
  .folio__head { grid-column: 1 / 7; grid-row: 2; }
  .folio__title { margin-top: clamp(12px, 2.2vh, 22px); }
  .folio__lede { margin-top: clamp(14px, 2.4vh, 24px); max-width: 25em; }
  .folio__plate {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    margin: 0;
  }
  .folio__plate .plate__frame { grid-row: 1 / 4; }
  .folio__plate .caption { grid-row: 4; align-self: start; }
  .folio__contents { grid-column: 1 / 6; grid-row: 4; margin-top: 14px; align-self: start; }
}


/* ---------- 13b.3 About ---------- */

/* The Adalaj print stands portrait. Tablets: at the right, as on the desktop title page. From
   960px it takes the whole first screen, like Home's; its width follows its height (3:4; 60px is
   the caption line), and it starts on column 7, the reading axis, as every first-screen print
   does (Home, Approach, Products, Team, Pitch to us). */
.page-about .folio__plate .plate__frame { aspect-ratio: 4 / 5; }
@media (min-width: 560px) and (max-width: 959.98px) {
  .page-about .folio__plate { justify-self: end; width: 64%; }
  .page-about .folio__plate .plate__frame { aspect-ratio: 3 / 4; }
}
@media (min-width: 960px) {
  .page-about .folio { --folio-h: clamp(560px, 100svh, 1000px); height: var(--folio-h); }
  .page-about .folio__grid { height: 100%; padding-bottom: clamp(18px, 3.2vh, 34px); }
  .page-about .folio__plate {
    justify-self: start;
    width: min(100%, calc((var(--folio-h) - var(--header-space) - clamp(12px, 2.7vh, 24px) - clamp(18px, 3.2vh, 34px) - 60px) * .75));
  }
  .page-about .folio__plate .plate__frame { aspect-ratio: auto; }
}

/* What we hold to (navy): three principles as ledger rows. The numeral and the principle on the
   heading side, its text on the reading axis; hairlines draw in (data-rules). */
.page-about .holds__title { max-width: 10em; }
.page-about .holds__list { position: relative; margin-top: clamp(36px, 4.5vw, 64px); }
.page-about .hold {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  column-gap: var(--g);
  row-gap: 10px;
  padding: 26px 0 30px;
}
.page-about .hold__num {
  grid-row: 1 / span 2;
  font: 500 clamp(1.625rem, 2.2vw, 2rem)/1.05 var(--f-display);
  color: var(--accent);                /* rose at 26px and over */
}
.page-about .hold__name { font-size: var(--t-h3); line-height: 1.16; }
.page-about .hold__text { color: var(--text); max-width: 34em; }
@media (min-width: 960px) {
  .page-about .hold {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: baseline;
    padding: 34px 0 38px;
  }
  .page-about .hold__num { grid-column: 1 / 2; grid-row: 1; }
  .page-about .hold__name { grid-column: 2 / 7; grid-row: 1; }
  .page-about .hold__text { grid-column: 7 / -1; grid-row: 1; }
}

/* What governs a loan (burgundy): About's one statement band (the house rule stays Home's). The
   sentence as a statement across the page, the reasoning on the reading axis. */
.page-about .govern__title { margin-top: 18px; max-width: 17em; }
.page-about .govern__body { margin-top: 32px; }
@media (min-width: 960px) {
  .page-about .govern__label, .page-about .govern__title { grid-column: 1 / 11; }
  .page-about .govern__body { grid-column: 7 / -1; margin-top: clamp(40px, 5vw, 72px); }
}


/* ---------- 13b.4 Approach ----------
   The spiral stair in its own 3:2; the title block centres against it. Then the five steps: a
   numbered sequence on the reading axis, under hairlines. With motion (site.js 12b puts
   .is-sequenced on the section), the step on the reading line is current: its rule turns to the
   accent; the steps before it keep full colour, those after it wait in quieter ink (still AA:
   steel on navy 5.8:1). On the heading side, under the pinned heading, a folio turns to the
   current numeral and a burgundy rule advances by fifths. Nothing is drawn but hairlines. */

.page-approach .folio__plate .plate__frame { aspect-ratio: 3 / 2; }
@media (min-width: 960px) {
  .page-approach .folio__grid { padding-bottom: clamp(56px, 9vh, 104px); }
}

.page-approach .steps__head h2 { margin-top: 18px; max-width: 11em; }
.page-approach .steps__list { position: relative; margin-top: 40px; }
.page-approach .step {
  position: relative;
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  column-gap: var(--g);
  padding: 24px 0 30px;
}
.page-approach .step__mark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
}
.page-approach .step__num {
  font: 500 clamp(1.5rem, 2vw, 1.875rem)/1.1 var(--f-display);
  color: var(--accent);                /* rose at 24px and over */
  transition: color .6s var(--ease);
}
.page-approach .step__name {
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.18;
  transition: color .6s var(--ease);
}
.page-approach .step__text {
  margin-top: 8px;
  max-width: 32em;
  color: var(--text);
  transition: color .6s var(--ease);
}
.page-approach .steps.is-sequenced .step:not(.is-reached) .step__num { color: var(--steel); }
.page-approach .steps.is-sequenced .step:not(.is-reached) .step__name { color: var(--mist-2); }
.page-approach .steps.is-sequenced .step:not(.is-reached) .step__text { color: var(--steel); }
.page-approach .steps.is-sequenced .step.is-current .step__mark { transform: scaleX(1); }

/* The folio on the heading side (desktop, with motion only) */
.page-approach .steps__count { display: none; }
.page-approach .steps__count-label {
  display: block;
  font: 500 var(--t-label)/1.45 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}
.page-approach .steps__count-num {
  display: block;
  height: 1lh;
  margin-top: 6px;
  overflow: hidden;
  font: 200 clamp(2.75rem, 4.2vw, 4rem)/1.1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--fg);
}
.page-approach .steps__strip {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, calc(var(--k, 0) * -1lh), 0);
  transition: transform .9s var(--ease);
}
.page-approach .steps__strip > span { display: block; height: 1lh; }
.page-approach .steps__rule {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 16px;
  background: var(--hair-2);
}
.page-approach .steps__fill {
  position: absolute;
  inset: -1px 0 0;                     /* 2px: the accent reads as the stronger line */
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}

@media (min-width: 960px) {
  .page-approach .steps__head {
    grid-column: 1 / 7;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 48px);
  }
  .page-approach .steps__list { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
  .page-approach .steps.is-sequenced .step { min-height: clamp(150px, 21vh, 200px); }
  .page-approach .steps.is-sequenced .steps__count {
    display: block;
    max-width: 340px;
    margin-top: clamp(32px, 7vh, 72px);
  }
}


/* ---------- 13b.5 Products ----------
   A title page that holds while the four families pass beside it:
     - heading side (columns 1 to 5): kicker, title, lede, then the family index, which stays in
       view (sticky, from 960px) and marks the family on the reading line ("is-active", site.js 12b);
     - reading side (columns 7 to 12): the four families, each opening with its plate, then its
       numeral and name, its line, and its facilities as ledger rows.
   Then Home's clause ledger (13.5) on navy, and Home's burgundy door (13.8) without a plate.
   Phones and tablets: one column; the index is a plain list of contents. */

.page-products .catalogue__grid {
  padding-top: calc(var(--header-space) + clamp(28px, 6vh, 56px));
  padding-bottom: var(--section);
}
.page-products .catalogue__title {
  margin-top: 18px;
  max-width: 7.4em;               /* breaks after "of": "The kinds of / capital we keep." */
}
.page-products .catalogue__lede { margin-top: clamp(18px, 2.6vh, 28px); }
@media (min-width: 960px) {
  .page-products .catalogue__lede { max-width: 24em; }
}

/* The family index: numeral and name under hairlines, like Home's families. With JavaScript,
   from 960px, the family on the reading line is marked: its numeral in burgundy, its name in
   navy, and an accent rule drawn along its hairline; the others step back. Without JavaScript
   all four read at full strength. */
.page-products .findex { margin-top: clamp(40px, 7vh, 64px); }
.page-products .findex__label { margin-bottom: 14px; }
.page-products .findex__list { position: relative; }
.page-products .findex__list::after {                       /* closing hairline */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
}
.page-products .findex__item { position: relative; }
.page-products .findex__item::before {                      /* hairline */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.page-products .findex__link {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 13px 0 14px;
  color: var(--fg);
  text-decoration: none;
}
.page-products .findex__link::before {                      /* the active family's accent rule */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.page-products .findex__num {
  font: 500 1.0625rem/1.2 var(--f-display);
  color: var(--accent);
  transition: color .6s var(--ease);
}
.page-products .findex__name {
  font: 200 clamp(1.25rem, 1.55vw, 1.4375rem)/1.25 var(--f-display);
  letter-spacing: 0;
  transition: transform .35s var(--ease), color .6s var(--ease);
}
.page-products .findex__link .chevs { align-self: center; }
.page-products .findex__link:focus-visible .findex__name { transform: translateX(6px); }
.page-products .findex__link:active .findex__name { color: var(--accent-text); transition-duration: .1s; }   /* press (6) */
@media (hover: hover) and (pointer: fine) { .page-products .findex__link:hover .findex__name { transform: translateX(6px); } }
.page-products .findex__link:focus-visible { outline-offset: -2px; }
@media (min-width: 960px) {
  .page-products .findex.is-live .findex__item:not(.is-active) .findex__num { color: var(--slate); }
  .page-products .findex.is-live .findex__item:not(.is-active) .findex__name { color: var(--ink-2); }
  .page-products .findex.is-live .findex__item.is-active .findex__link::before { transform: scaleX(1); }
}

/* The families. Plates keep the photograph's own shape: three landscape at the full column, the
   atrium upright and narrower (the same 4:5 frame as on Home). */
.page-products .catalogue__families { margin-top: clamp(56px, 12vw, 88px); }
.page-products .chapter { padding-bottom: clamp(64px, 9vw, 128px); }
.page-products .chapter:last-child { padding-bottom: 0; }
.page-products .chapter--port .chapter__plate { max-width: 80%; }
.page-products .chapter__body {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  column-gap: var(--g);
  align-items: baseline;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.page-products .chapter__num {
  grid-row: 1;
  font: 500 clamp(1.5rem, 2vw, 1.875rem)/1.1 var(--f-display);
  color: var(--accent);                /* burgundy on paper; 24px and over */
}
.page-products .chapter__name {
  grid-column: 2;
  font-size: clamp(1.875rem, 2.9vw, 2.625rem);
  line-height: 1.08;
  max-width: 13em;
}
.page-products .chapter__line {
  grid-column: 2;
  margin-top: 14px;
  max-width: 30em;
  font: italic 300 var(--t-lede)/1.45 var(--f-serif);
  color: var(--text-2);
}

/* Facilities: Home's ledger, with the name in the display face over its description in body text
   (one column at every width, so no name breaks against a narrow label column). Hovering a row
   turns its hairline burgundy, as the clauses do. */
.page-products .facilities { grid-column: 2; margin-top: clamp(24px, 2.6vw, 34px); }
.page-products .facilities .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0 20px; }
.page-products .facilities dt {
  padding-top: 0;
  font: 200 clamp(1.25rem, 1.6vw, 1.5rem)/1.2 var(--f-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  transition: transform .35s var(--ease);
}
.page-products .facilities dd {
  font: 400 .96875rem/1.6 var(--f-body);
  letter-spacing: 0;
  color: var(--text-2);
  max-width: 30em;
}
@media (hover: hover) and (pointer: fine) { .page-products .facilities .ledger__row:hover dt { transform: translateX(6px); } }
.page-products .catalogue .facilities > .ledger__row::before {
  transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s), background-color .3s var(--ease) 0s;
}
@media (hover: hover) and (pointer: fine) { .page-products .facilities > .ledger__row:hover::before { background-color: var(--accent); } }

@media (min-width: 560px) {
  .page-products .chapter--port .chapter__plate { max-width: 440px; }
}

/* 12 columns: the heading side holds the title and, below it, the index, which stays in view
   while the families pass on the reading side. */
@media (min-width: 960px) {
  .page-products .catalogue__grid { align-items: start; }
  .page-products .catalogue__side { grid-column: 1 / 6; grid-row: 1; align-self: stretch; }
  /* the first print starts just under the header, as every first-screen print does (13.1) */
  .page-products .catalogue__families { grid-column: 7 / -1; grid-row: 1; margin-top: calc(clamp(12px, 2.7vh, 24px) - clamp(28px, 6vh, 56px)); }
  .page-products .findex { position: sticky; top: calc(var(--header-h) + 40px); }
  .page-products .chapter--port .chapter__plate { max-width: 66%; }
}

/* The door: Home's burgundy door with nothing straddling it, so it keeps its full padding. From
   960px the heading takes the heading side and the sentence the reading side. */
@media (min-width: 960px) {
  .page-products .begin--single .begin__copy {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
    max-width: none;
  }
  .page-products .begin--single .begin__who { grid-column: 1 / 7; grid-row: 1; }
  .page-products .begin--single .begin__title { grid-column: 1 / 7; grid-row: 2; }
  .page-products .begin--single .begin__text { grid-column: 7 / -1; grid-row: 2; margin: 0; padding-bottom: .5em; }
}


/* ---------- 13b.6 The opening: a chapter's title page (Team, Contact, Accessibility, 404) ----------
   Kicker, title and lede on the heading side (columns 1 to 6); its plate, ledger or reading on
   the reading axis (from column 7). */

.opening {
  position: relative;
  padding-top: calc(var(--header-space) + clamp(28px, 6vh, 64px));
  padding-bottom: var(--section);
}
.opening__head { align-self: start; }
.opening__title { margin-top: 18px; max-width: 11em; }
.opening__lede { margin-top: clamp(16px, 2.6vh, 26px); max-width: 25em; }
.opening__body { margin-top: clamp(40px, 8vw, 56px); }
@media (min-width: 960px) {
  .opening__body { margin-top: 0; padding-top: 8px; }
}


/* ---------- 13b.7 Team ---------- */

/* The opening holds on the heading side while the frontispiece and the board pass. */
@media (min-width: 960px) {
  /* held no lower than it opens, so in a short window (1000 x 560) it is not pushed down on arrival */
  .page-team .opening__head { position: sticky; top: calc(var(--header-h) + clamp(28px, 6vh, 48px)); }
}

/* The frontispiece, IIM Ahmedabad, in its own 3:4 (ratio-3x4). From 960px it stands on the
   reading axis and is sized by the window's height, so the title page and the whole plate share
   the first screen (1000 x 560 included). */
@media (min-width: 560px) {
  .page-team .team__plate { max-width: 440px; }
}
@media (min-width: 960px) {
  .page-team .team__plate {
    max-width: none;
    width: min(100%, max(280px, calc((100svh - var(--header-h) - 130px) * .75)));
    /* it starts just under the header, as every first-screen print does (13.1): the opening's
       top padding and the reading side's 8px, less Home's gap */
    margin-top: calc(clamp(12px, 2.7vh, 24px) - clamp(28px, 6vh, 64px) - 8px);
  }
}

/* The board: five name plates, typographic (no portraits). The Managing Director first and
   larger; the four others as a ruled ledger, name, role and qualification on one line. The
   kicker names it on the first screen; its heading is for screen readers. */
.page-team .board { margin-top: clamp(72px, 9vw, 128px); }
.page-team .people { position: relative; }
.page-team .person {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--g);
  row-gap: 4px;
  align-items: baseline;
  padding: 20px 0 22px;
}
.page-team .person__name {
  grid-column: 1 / -1;
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.2;
  transition: transform .35s var(--ease);
}
.page-team .person__role { grid-column: 1; font-size: .96875rem; line-height: 1.5; color: var(--text-2); }
.page-team .person__cred {
  grid-column: 2;
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
  text-align: right;
}
@media (min-width: 560px) {
  .page-team .person { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(4.5em, auto); }
  .page-team .person__name { grid-column: 1; }
  .page-team .person__role { grid-column: 2; }
  .page-team .person__cred { grid-column: 3; }
}
/* The Managing Director: the name at section-heading size, role and qualification beneath */
.page-team .person--lead { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; padding: 26px 0 34px; }
.page-team .person--lead .person__name {
  grid-column: 1 / -1;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -.016em;
}
.page-team .person--lead .person__role { grid-column: 1; font-size: 1.03125rem; }
.page-team .person--lead .person__cred { grid-column: 2; }
/* As Home's clauses: the name leans in and the rule above it takes the accent */
.page-team .person::before { transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s), background-color .3s var(--ease) 0s !important; }
@media (hover: hover) {
  .page-team .person:hover::before { background-color: var(--accent); }
  .page-team .person:hover .person__name { transform: translateX(6px); }
}

/* The offices: Home's ledger, each value with its secondary lines. People's and firms' names
   are in the display face, as on the board above and in Investors' contacts; the lines under
   them stay in Bricolage. Between 960 and 1199px the reading side is too narrow for label and
   value side by side, so the label sits above. */
.page-team .offices dd { overflow-wrap: anywhere; }
.page-team .offices .ledger__name {
  display: block;
  font: 200 var(--t-h3)/1.16 var(--f-display);
  letter-spacing: 0;                              /* -.012em from 1400px, below (section 4) */
  color: var(--fg);
  text-wrap: balance;
}
@media (min-width: 1400px) { .page-team .offices .ledger__name { letter-spacing: -.012em; } }
.page-team .offices .ledger__name + .ledger__sub { margin-top: 10px; }
@media (min-width: 960px) and (max-width: 1199.98px) {
  .page-team .offices .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}


/* ---------- 13b.8 Contact ----------
   The sea bridge straddles the boundary into the door, half on the paper above and half in the
   burgundy (Home's Millau idiom, for a 3:2 print): the paper leaves room for half its height.
   Its width: the whole column on phones (as every landscape plate there), 62% from 560px,
   columns 1 to 6 from 960px. */

.page-contact {
  --door-w: calc(100vw - 2 * var(--m));
  --door-rise: calc(var(--door-w) / 3);
}
@media (min-width: 560px) {
  .page-contact { --door-w: calc((100vw - 2 * var(--m)) * .62); }
}
@media (min-width: 960px) {
  .page-contact { --door-w: calc((min(100vw - 2 * var(--m), var(--maxw)) - var(--g)) / 2); }
}
.page-contact .reach { padding-bottom: calc(var(--section) + var(--door-rise)); }

/* The ledger: each label above its value, so the address keeps its three lines */
.page-contact .reach__ledger .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 24px; }
.page-contact .reach__address { font: inherit; }
.page-contact .reach__address span { display: inline; }
@media (min-width: 420px) {
  .page-contact .reach__address span { display: block; }      /* the address in its three lines once they fit */
}
.page-contact .opening__lede { max-width: 21em; }
.page-contact .reach__acts { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 12px; }
.page-contact .reach__acts .link-arrow { padding-block: 6px; }
.page-contact .reach__copy.is-copied .u { color: var(--accent-text); }

/* The door: Home's .begin, one panel; the plate is 3:2 */
.page-contact .reach__plate { width: 100%; margin-top: calc(100% / -3); }
/* Common questions: the ledger with a question in place of a label */
.faq .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 24px; }
.faq .ledger dt { font: 500 clamp(1.125rem, 1.35vw, 1.3125rem)/1.35 var(--f-body); letter-spacing: -.005em; text-transform: none; color: var(--fg); padding-top: 0; }
.faq .ledger dd { font: 400 clamp(1rem, 1.15vw, 1.125rem)/1.6 var(--f-body); color: var(--text-2); max-width: 38em; }
.faq__title { margin-top: 14px; }
.page-contact .reach__door .begin__link::after { content: none; }   /* only the title leads to Pitch to us; the print is the page's own */
@media (min-width: 560px) {
  .page-contact .reach__plate { width: 62%; margin-top: calc(62% / -3); }
}
@media (min-width: 960px) {
  .page-contact .reach__plate { grid-column: 1 / 7; width: 100%; margin-top: calc(100% / -3); }
}


/* ---------- 13b.9 Accessibility ---------- */

.page-accessibility .a11y__intro { max-width: 29em; }
.page-accessibility .a11y__prose { max-width: 34em; }
.page-accessibility .a11y__ledger { margin-top: 36px; }
.page-accessibility .a11y__scores {
  margin-top: 32px;
  max-width: 34em;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-2);
}
.page-accessibility .a11y__reviewed {
  margin-top: 22px;
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}


/* ---------- 13b.10 404 ----------
   The title page, then (below its title, as its line says) every page of the site as a ruled
   list on the reading axis, level with the line that points to it; Home's frontispiece, small,
   under the line on the heading side, wide enough for its caption to run on one line. */

.page-404 .lost__nav { margin-top: 44px; }
.page-404 .lost__list { position: relative; }
.page-404 .lost__list > li { position: relative; }
.page-404 .lost__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 6px 0;
  color: var(--fg);
  text-decoration: none;
}
.page-404 .lost__link:focus-visible { outline-offset: -2px; }
.page-404 .lost__word {
  font: 200 clamp(1.5rem, 2.1vw, 1.875rem)/1.15 var(--f-display);
  letter-spacing: 0;
  transition: transform .35s var(--ease);
}
.page-404 .lost__link:focus-visible .lost__word { transform: translateX(8px); }
.page-404 .lost__link:active .lost__word { color: var(--accent-text); transition-duration: .1s; }   /* press (6) */
@media (hover: hover) and (pointer: fine) { .page-404 .lost__link:hover .lost__word { transform: translateX(8px); } }
.page-404 .lost__list > li::before { transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s), background-color .3s var(--ease) 0s !important; }
@media (hover: hover) {
  .page-404 .lost__list > li:hover::before { background-color: var(--accent); }
}
.page-404 .lost__plate { margin-top: 56px; max-width: min(320px, 78%); }
@media (min-width: 960px) {
  .page-404 .lost__grid { align-items: start; }
  .page-404 .opening__head { grid-row: 1; }
  .page-404 .lost__lede { grid-column: 1 / 6; grid-row: 2; }
  .page-404 .lost__nav { grid-column: 7 / -1; grid-row: 2 / span 2; margin-top: clamp(16px, 2.6vh, 26px); }
  .page-404 .lost__plate { grid-column: 1 / 7; grid-row: 3; max-width: 420px; margin-top: clamp(36px, 6vh, 56px); }
}


/* ---------- 13b.11 Investors ----------
   Type-led (no photograph, no WebGL): a title page facing the listing record, Alignment on navy,
   the financial years as a tab list (site.js 12b), the standing documents on cream, and the
   investor contacts on navy. Every link, label and statutory sentence is as filed. */

/* Investors (1): Title page
   Phones and tablets: kicker, heading, lede, the listing ledger, the CIN line. From 960px the
   heading holds columns 1 to 6 and the record (lede, ledger, CIN line) reads from column 7. */

.page-investors .ir-hero { padding-top: calc(var(--header-space) + clamp(28px, 6vh, 64px)); }   /* the kicker where every opening's is (13b.6) */
.page-investors .ir-hero__head,
.page-investors .ir-hero__read { grid-column: 1 / -1; }
.page-investors .ir-hero__title { margin-top: 18px; }
.page-investors .ir-hero__read { margin-top: clamp(26px, 5vw, 40px); }
.page-investors .ir-hero__lede { max-width: 30em; }
.page-investors .ir__plate { margin-bottom: clamp(28px, 4vw, 48px); }
.page-investors .ir-snapshot { margin-top: clamp(30px, 3.6vw, 48px); }
.page-investors .ir-hero__note {
  margin-top: 22px;
  max-width: 40em;
  font-size: .84375rem;
  line-height: 1.65;
  color: var(--text-2);
}
@media (min-width: 960px) {
  .page-investors .ir-hero__head { grid-column: 1 / 7; }
  /* the lede's first line sits level with the heading's first line */
  .page-investors .ir-hero__read { grid-column: 7 / -1; margin-top: 0; padding-top: calc(16px + 18px + var(--t-title) * .08); }
}


/* Investors (2): Alignment and On the register (navy)
   Two statements as rows on the reading axis: the label (and, for Alignment, the two holdings
   in display figures over the Home holding scale) on the heading side, the sentence from
   column 7. */

.page-investors .ir-align__head,
.page-investors .ir-align__read { grid-column: 1 / -1; }
.page-investors .ir-align__read { margin-top: 22px; }
.page-investors .ir-align__read p { max-width: 31em; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; }
.page-investors .ir-align__row--register {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--hair);
}

.page-investors .ir-figures { margin-top: 24px; }
.page-investors .ir-figures__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px clamp(18px, 2.4vw, 32px);
}
.page-investors .ir-figures__item { display: inline-grid; gap: 10px; }
.page-investors .ir-figures__value {
  font: 200 var(--t-h2)/1 var(--f-display);
  letter-spacing: -.016em;
  color: var(--fg);
}
.page-investors .ir-figures__item--from .ir-figures__value { color: var(--steel); }   /* 5.8:1 on navy */
.page-investors .ir-figures__year {
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  color: var(--label);
}
.page-investors .ir-figures__to { display: inline-flex; padding-top: calc(var(--t-h2) * .3); }
.page-investors .ir-figures__to .chev { width: 18px; height: 17px; color: var(--accent); }
.page-investors .ir-figures .holding { margin-top: 26px; max-width: 380px; }

@media (min-width: 960px) {
  .page-investors .ir-align__head { grid-column: 1 / 6; }
  .page-investors .ir-align__read { grid-column: 7 / -1; margin-top: 0; }
}


/* Investors (3): Document links
   One quiet row per document, one document per line, in the order filed: its label, its file
   type, and the stepping chevron at the far edge (the house link, site.css 6), so the chevrons
   stand in one column down the ledger. At least 44px tall, so each is easy to tap. */

.page-investors .docs { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-investors .doc {
  display: flex;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 0;
  font: 400 .96875rem/1.4 var(--f-body);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.page-investors .doc__label { min-width: 0; }
.page-investors .doc__label .u {
  background-image: linear-gradient(var(--accent), var(--accent));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* the file type is held to the label's last word (a no-break space), so a long label wraps as one */
.page-investors .doc__type {
  margin-left: .3em;
  font: 500 .71875rem/1 var(--f-body);  /* a format tag beside its link, one step under the label floor */
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--label);
  font-variant-numeric: lining-nums;
}
.page-investors .doc .chevs { margin-left: auto; align-self: center; }


/* Investors (4): Results & filings
   Without JavaScript (and in print) every year is stacked under its own heading; from 960px
   each year is a spread, its heading held on the left while its rows pass on the reading axis.
   Within a year, each category is a ledger row: its label, then its documents. */

.page-investors .filings__title,
.page-investors .filings__intro,
.page-investors .fy-index,
.page-investors .filings__panels,
.page-investors .filings__note { grid-column: 1 / -1; min-width: 0; }
.page-investors .filings__title h2 { margin-top: 18px; max-width: 11em; }
.page-investors .filings__intro { margin-top: 20px; max-width: 30em; color: var(--text-2); }
.page-investors .filings__body { margin-top: clamp(40px, 5.5vw, 80px); }
.page-investors .filings__note {
  margin-top: clamp(36px, 4.5vw, 56px);
  max-width: 44em;
  font-size: .84375rem;
  line-height: 1.65;
  color: var(--text-2);
}

.page-investors .fy + .fy { margin-top: clamp(56px, 7vw, 96px); }
.page-investors .fy__title { margin-bottom: 18px; font-size: var(--t-h3); line-height: 1.16; }
.page-investors .fy__title .num { font-variant-numeric: lining-nums tabular-nums; }
.page-investors .fy__rows { border-bottom: 1px solid var(--hair); }
.page-investors .fy__row {
  display: grid;
  gap: 4px;
  padding: 16px 0 12px;
  border-top: 1px solid var(--hair);
}
.page-investors .fy__cat {
  padding-top: 4px;
  font: 500 var(--t-label)/1.5 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}
.page-investors .fy:focus-visible { outline-offset: 10px; }

@media (min-width: 560px) {
  .page-investors .fy__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--g);
    align-items: start;
    padding-top: 8px;
  }
  .page-investors .fy__cat { padding-top: 14px; }   /* level with the first document's label */
}

@media (min-width: 960px) {
  .page-investors .filings__title { grid-column: 1 / 7; }
  .page-investors .filings__intro { grid-column: 7 / -1; align-self: end; margin-top: 0; padding-bottom: .3em; }
  .page-investors .fy {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--g);
  }
  .page-investors .fy__title {
    grid-column: 1 / 6;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 48px);
    margin: 0;
  }
  .page-investors .fy__rows { grid-column: 7 / -1; }
  .page-investors .filings__note { grid-column: 7 / -1; }
}


/* Investors (5): The year index
   site.js (12b) turns the stacked years into a tab list (.is-tabs on the section): one year
   at a time, the index in hand. Drawn as Products' family index (13b.5), so the site has one
   kind of index: hairline rows, the year in the display face, and the selected year marked by
   an accent rule drawn along its hairline, the year in the accent and the chevron shown; no
   fill. Phones: the six years as a two-column hairline list above the year (three columns from
   560px, one row of six from 720px); from 960px a column on the heading side (the family
   index's columns 1 to 5), held in view while the year's rows pass on the reading axis. */

.page-investors .fy-index__label { margin-bottom: 14px; }
.page-investors .fy-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--g);
}
.page-investors .fy-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0 9px;
  min-height: 48px;
  padding: 12px 0 13px;
  text-align: left;
  color: var(--ink-2);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.page-investors .fy-tab::before,                             /* hairline */
.page-investors .fy-tab::after {                             /* the selected year's accent rule */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.page-investors .fy-tab::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
.page-investors .fy-tab__fy {
  font: 500 var(--t-label)/1 var(--f-body);
  letter-spacing: .18em;
  color: var(--label);
}
.page-investors .fy-tab__year {
  font: 200 clamp(1.25rem, 1.55vw, 1.4375rem)/1.25 var(--f-display);
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform .35s var(--ease), color .3s var(--ease), scale .1s ease-out;
}
.page-investors .fy-tab .chev { display: none; }
@media (hover: hover) and (pointer: fine) { .page-investors .fy-tab:hover { color: var(--fg); } }
.page-investors .fy-tab[aria-selected="true"] { color: var(--accent-text); }            /* 8.3:1 on paper */
.page-investors .fy-tab[aria-selected="true"]::after { transform: scaleX(1); }
.page-investors .fy-tab:focus-visible { outline-offset: -2px; }
.page-investors .fy-tab:active { color: var(--fg); }            /* press (6): the year also gives a little */

.page-investors .filings.is-tabs .fy + .fy { margin-top: 0; }
.page-investors .filings.is-tabs .filings__panels { margin-top: clamp(36px, 5vw, 48px); }

@media (min-width: 560px) {
  .page-investors .fy-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 959.98px) {
  .page-investors .fy-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-investors .fy-tab { flex-direction: column; gap: 4px; }
}

@media (min-width: 960px) {
  .page-investors .filings.is-tabs .fy-index { grid-column: 1 / 6; grid-row: 1; align-self: stretch; }
  .page-investors .filings.is-tabs .filings__panels { grid-column: 7 / -1; grid-row: 1; margin-top: 0; }
  .page-investors .filings.is-tabs .fy { display: block; }
  .page-investors .filings.is-tabs .fy__title { position: static; margin-bottom: 18px; }

  .page-investors .fy-index__pin { position: sticky; top: calc(var(--header-h) + 40px); }
  .page-investors .fy-tabs { grid-template-columns: minmax(0, 1fr); }
  .page-investors .fy-tabs::after {                          /* closing hairline, as the family index */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--hair);
  }
  .page-investors .fy-tab { gap: 12px; min-height: 0; padding: 13px 0 14px; }
  .page-investors .fy-tab .chev {
    display: block;
    align-self: center;
    margin-left: auto;
    color: var(--accent);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity .3s var(--ease), transform .4s var(--ease);
  }
  .page-investors .fy-tab[aria-selected="true"] .chev { opacity: 1; transform: none; transition-delay: .08s; }
  .page-investors .fy-tab:focus-visible .fy-tab__year { transform: translateX(6px); }
  @media (hover: hover) and (pointer: fine) { .page-investors .fy-tab:hover .fy-tab__year { transform: translateX(6px); } }
}


/* Investors (6): Standing documents (cream)
   Governance policies, IEPF & unclaimed dividends, KYC & shareholder forms: each a heading on
   the left (held in view from 960px) and a ledger of documents on the reading axis. The rules
   draw in as the rows arrive (site.css 15, data-rules). */

.page-investors .ir-group + .ir-group { margin-top: clamp(72px, 8.5vw, 128px); }
.page-investors .ir-group__head,
.page-investors .ir-list,
.page-investors .ir-docs__note { grid-column: 1 / -1; }
.page-investors .ir-group__head h2 { margin-top: 18px; max-width: 12.5em; }
.page-investors .ir-list { position: relative; margin-top: 32px; }
.page-investors .ir-list > li { position: relative; }
.page-investors .doc--row { min-height: 56px; padding: 16px 0 15px; font-size: 1rem; line-height: 1.45; }
.page-investors .ir-docs__note {
  margin-top: clamp(56px, 7vw, 96px);
  max-width: 44em;
  font-size: .84375rem;
  line-height: 1.65;
  color: var(--text-2);
}

@media (min-width: 960px) {
  .page-investors .ir-group__head { grid-column: 1 / 7; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); padding-right: var(--g); }
  .page-investors .ir-list { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
  .page-investors .ir-docs__note { grid-column: 7 / -1; }
}


/* Investors (7): Investor contacts (navy) and inline links */

.page-investors .ir-contacts__head,
.page-investors .ir-contacts__list { grid-column: 1 / -1; }
.page-investors .ir-contacts__head h2 { margin-top: 18px; }
.page-investors .ir-contacts__list { position: relative; margin-top: 36px; }
.page-investors .ir-contact { position: relative; padding: 26px 0 30px; }
.page-investors .ir-contact__name {
  margin-top: 12px;
  font: 200 var(--t-h3)/1.16 var(--f-display);
  letter-spacing: 0;                              /* -.012em from 1400px, below (section 4) */
  color: var(--fg);
  text-wrap: balance;
}
@media (min-width: 1400px) { .page-investors .ir-contact__name { letter-spacing: -.012em; } }
.page-investors .ir-contact__lines {
  margin-top: 14px;
  max-width: 30em;
  font-size: .96875rem;
  line-height: 1.75;
  color: var(--text-2);
}
.page-investors .ir-contact__k { color: var(--label); }                  /* 5.8:1 on navy */

@media (min-width: 960px) {
  .page-investors .ir-contacts__head { grid-column: 1 / 7; align-self: start; }
  .page-investors .ir-contacts__list { grid-column: 7 / -1; margin-top: 0; padding-top: 8px; }
}

/* Links inside running text keep a hairline underline at rest (not colour alone); it takes the
   accent on hover and focus. */
.page-investors .ir-inline {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hair-2);
  text-underline-offset: .24em;
  overflow-wrap: anywhere;
  transition: text-decoration-color .22s var(--ease);
}
.page-investors .ir-inline:focus-visible { text-decoration-color: var(--accent); }
.page-investors .ir-inline:active { text-decoration-color: var(--accent); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) { .page-investors .ir-inline:hover { text-decoration-color: var(--accent); } }
.page-investors .ir-inline--out .chev {
  display: inline-block;
  width: 9px;
  height: 8px;
  margin-left: .4em;
  vertical-align: .06em;
  color: var(--accent);
}


/* Investors (8): Motion */

/* A year chosen from the index settles in (site.js 12b adds .is-entering) */
@keyframes ir-fy-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
}
.js:not(.still) .page-investors .fy.is-entering { animation: ir-fy-enter .6s var(--ease) both; }


/* ---------- 13b.12 Pitch to us ----------
   The form, its Review and the Received panel are driven by Part 2 of site.js, carried over
   verbatim from the old site. That code writes a few colours inline for a dark ground (status
   text in cream, review rows in cream and #7E8DA3), so the desk is always midnight. It toggles
   [hidden] on the three steps and [aria-pressed] on the toggles, and sets [aria-invalid] on a
   field it rejects; everything here keys off those, never off inline styles. */

/* Pitch to us (1): Title page
   Phones and tablets: kicker, headline, lede, the action, then the frontispiece at the right
   edge in its own 2:3 shape (a bridge is never cropped). From 960px: the Monograph title page
   of Home, the title block centred on the heading side and the plate on the reading side,
   sized by the window's height so the whole viaduct and its caption always fit the first
   screen (1440 x 900 and 1000 x 560 alike), and starting on column 7, the reading axis, as
   every first-screen print does. */

.page-proposal .pitch-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-top: calc(var(--header-space) + clamp(28px, 7vw, 56px));
  padding-bottom: clamp(56px, 9vw, 88px);
}
.page-proposal .pitch-hero__grid > * { grid-column: 1 / -1; min-width: 0; }

.page-proposal .pitch-hero__title { margin-top: 18px; }
.page-proposal .pitch-hero__br { display: none; }
.page-proposal .pitch-hero__lede { margin-top: 20px; }
.page-proposal .pitch-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.page-proposal .pitch-hero__grid > .pitch-hero__plate {
  --mat: var(--paper);                             /* a print on paper: it develops out of its own sheet */
  grid-column: 5 / -1;                             /* phones: two thirds, to the right edge */
  margin-top: clamp(44px, 9vw, 64px);
}
@media (min-width: 560px) {
  .page-proposal .pitch-hero__grid > .pitch-hero__plate { grid-column: 7 / -1; }   /* on the reading axis */
}

@media (min-width: 960px) {
  .page-proposal .pitch-hero__grid {
    /* the room the plate has: the hero's height (site.css 13.1) less the header, the paddings
       and the caption under the print */
    --pad-t: clamp(12px, 2.7vh, 24px);
    --pad-b: clamp(18px, 3.2vh, 34px);
    --plate-h: calc(clamp(540px, 100svh, 1040px) - var(--header-space) - var(--pad-t) - var(--pad-b) - 48px);
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    padding-top: calc(var(--header-space) + var(--pad-t));
    padding-bottom: var(--pad-b);
  }
  .page-proposal .pitch-hero__kicker { grid-column: 1 / 6; grid-row: 2; }
  .page-proposal .pitch-hero__title { grid-column: 1 / 7; grid-row: 3; margin-top: clamp(12px, 2.2vh, 22px); }
  .page-proposal .pitch-hero__br { display: inline; }
  .page-proposal .pitch-hero__lede { grid-column: 1 / 6; grid-row: 4; margin-top: clamp(12px, 2.4vh, 24px); max-width: 25em; }
  .page-proposal .pitch-hero__actions { grid-column: 1 / 6; grid-row: 5; margin-top: clamp(18px, 3.4vh, 36px); }
  .page-proposal .pitch-hero__grid > .pitch-hero__plate {
    grid-column: 7 / -1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: start;
    width: min(100%, var(--plate-h) * 2 / 3);
    margin: 0;
  }
}


/* Pitch to us (2): What a strong proposal contains
   Home's clause ledger (.clauses, 13.5) on the reading axis; the heading holds on the left. */

.page-proposal .pitch-needs__head h2 { margin-top: 18px; max-width: 11em; }

@media (min-width: 960px) {
  .page-proposal .pitch-needs__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-h) + 48px); }
}


/* Pitch to us (3): The desk
   Three steps share one 12-column grid (a subgrid each): the step's heading block on the left,
   sticky, and its body on the reading axis, under the step indicator. Only one step is ever
   visible ([hidden] is display: none), so the three can occupy the same cells. Phones: the
   heading, the indicator, then the body. */

.page-proposal .desk {
  color-scheme: dark;                              /* native parts (select lists, file, checkbox) in the dark */
  accent-color: var(--rose);
}
.page-proposal .desk__grid { grid-template-rows: auto auto 1fr; }
.page-proposal .desk__step {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
}
.page-proposal .desk__step > * { grid-column: 1 / -1; min-width: 0; }
.page-proposal .desk__head { margin-bottom: clamp(32px, 5vw, 44px); }
.page-proposal .desk__title { margin-top: 18px; max-width: 10em; }
.page-proposal .desk__title:first-child { margin-top: 0; }
.page-proposal .desk__title--received { max-width: 9.5em; }
.page-proposal .desk__note { margin-top: 20px; max-width: 24em; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }

@supports (grid-template-rows: subgrid) {
  .page-proposal .desk__step { grid-row: 1 / 4; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .page-proposal .desk__head { grid-row: 1; }
  .page-proposal .steps { grid-row: 2; }
  .page-proposal .desk__body { grid-row: 3; }
}

@media (min-width: 960px) {
  .page-proposal .desk__head {
    grid-column: 1 / 6;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 48px);
    margin-bottom: 0;
  }
  .page-proposal .desk__body { grid-column: 7 / -1; }
  .page-proposal .steps { grid-column: 7 / -1; }
  @supports (grid-template-rows: subgrid) {
    .page-proposal .steps { grid-row: 1; }
    .page-proposal .desk__head { grid-row: 1 / 4; }
    .page-proposal .desk__body { grid-row: 2 / 4; }
  }
}

/* The step indicator: three numbered steps under a hairline. The current step's rule draws in
   burgundy (rose on the dark), steps behind it keep a brighter hairline. aria-current="step"
   is set by site.js (12b) from whichever step is visible. */
.page-proposal .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(8px, 1.4vw, 20px);
  margin-bottom: clamp(36px, 4.6vw, 56px);
}
.page-proposal .steps__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 14px;
  color: var(--label);
  transition: color .6s var(--ease);
}
.page-proposal .steps__item::before,
.page-proposal .steps__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.page-proposal .steps__item::after {
  top: -.5px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease);
}
.page-proposal .steps__item.is-done::before { background: var(--hair-2); }
.page-proposal .steps__item[aria-current="step"] { color: var(--fg); }
.page-proposal .steps__item[aria-current="step"]::after { transform: scaleX(1); }
.page-proposal .steps__num {
  font: 500 1.0625rem/1 var(--f-display);
  letter-spacing: .02em;
  color: var(--label);
  transition: color .6s var(--ease);
}
.page-proposal .steps__item[aria-current="step"] .steps__num { color: var(--accent-text); }
.page-proposal .steps__name {
  font: 500 var(--t-label)/1.4 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* Pitch to us (4): Fields
   Labels are small tracked capitals; inputs are a line of type over a hairline, and a rose rule
   draws in from the left on focus (the focus indicator; the label also brightens). Placeholders
   are set in Newsreader italic so an example never reads as an answer. Two-up rows are decided
   by the width of the form column itself (a container query), so they stack in a narrow column
   on a small laptop as they do on a phone. */

.page-proposal .fields {
  container: fields / inline-size;
  display: grid;
  gap: clamp(30px, 3vw, 38px);
  position: relative;
}
.page-proposal .fld {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.page-proposal .fld__label {
  font: 500 .8125rem/1.45 var(--f-body);  /* a field name is read before every answer: a step above the label floor */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
  transition: color .22s var(--ease);
}
.page-proposal .fld__opt { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--text-2); }
.page-proposal .fld:focus-within > .fld__label,
.page-proposal .fld:focus-within > .size__head .fld__label { color: var(--fg); }

.page-proposal .fld__input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 8px 0 10px;
  font: 400 1.125rem/1.4 var(--f-body);
  color: var(--fg);
  background-color: transparent;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  background-origin: border-box;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-size .35s var(--ease), border-color .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .page-proposal .fld__input:hover { border-bottom-color: rgba(242, 233, 216, .6); } }
.page-proposal .fld__input:focus,
.page-proposal .fld__input:focus-visible { outline: none; background-size: 100% 2px; }
.page-proposal .fld__input::placeholder {
  font: italic 400 1.125rem/1.4 var(--f-serif);
  color: var(--steel-2);                           /* 5.4:1 on midnight */
  opacity: 1;
}
.page-proposal .fld__area { min-height: 92px; resize: vertical; line-height: 1.55; }

/* Autofill: keep the dark ground and cream ink (the rule then shows as a steady line). */
.page-proposal .fld__input:-webkit-autofill,
.page-proposal .fld__input:-webkit-autofill:hover,
.page-proposal .fld__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  caret-color: var(--cream);
  box-shadow: inset 0 0 0 1000px var(--midnight);
}
.page-proposal .fld__input:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 var(--rose), inset 0 0 0 1000px var(--midnight); }

/* A field the form has rejected: the rule stays drawn, in rose, and the label follows. */
.page-proposal .fld__input[aria-invalid="true"] {
  border-bottom-color: var(--rose);
  box-shadow: none;
  background-image: linear-gradient(var(--rose), var(--rose));
  background-size: 100% 2px;
}
.page-proposal .fld:has([aria-invalid="true"]) > .fld__label { color: var(--rose-tint); }

/* Selects: the same line, a small caret, and a dark list */
.page-proposal .fld__select {
  padding-right: 26px;
  cursor: pointer;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 0 100%, calc(100% - 9px) 52%, calc(100% - 4px) 52%;
  background-size: 0 2px, 5px 5px, 5px 5px;
}
.page-proposal .fld__select:focus { background-size: 100% 2px, 5px 5px, 5px 5px; }
.page-proposal .fld__select[aria-invalid="true"] {
  background-image:
    linear-gradient(var(--rose), var(--rose)),
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 100% 2px, 5px 5px, 5px 5px;
}
.page-proposal .fld__select option { background-color: var(--midnight); color: var(--cream); }

/* Telephone: the dialling code and the number stay siblings in one parent (site.js reads the
   code from input.parentNode.querySelector('select')). */
.page-proposal .fld__tel { display: flex; gap: 14px; min-width: 0; }
.page-proposal .fld__tel .fld__code { flex: 0 0 auto; width: auto; }
.page-proposal .fld__tel input { flex: 1 1 auto; }

/* Hints and the elevator pitch's live count */
.page-proposal .fld__hint { font-size: .8125rem; line-height: 1.5; color: var(--label); max-width: 40em; }
.page-proposal .fld__hint--count { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; max-width: none; }
.page-proposal .fld__count {
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text);
  transition: color .22s var(--ease);
}
.page-proposal .fld--pitch.is-over .fld__input { border-bottom-color: var(--rose); }

/* Two-up rows, decided by the form column's own width */
.page-proposal .pane,
.page-proposal .fld-row { display: grid; gap: clamp(30px, 3vw, 38px); min-width: 0; }
@container fields (min-width: 520px) {
  .page-proposal .fld-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
}

/* The referrer pane: two groups, each named by its legend */
.page-proposal .pane__group {
  display: grid;
  gap: clamp(30px, 3vw, 38px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.page-proposal .pane__group + .pane__group { padding-top: clamp(30px, 3vw, 38px); border-top: 1px solid var(--hair); }
.page-proposal .pane__title {
  float: left;                                     /* a legend in the flow, so the gap below it is the grid's */
  width: 100%;
  padding: 0;
  font: 500 var(--t-label)/1.45 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.page-proposal .pane__note {
  margin-top: calc(-1 * clamp(30px, 3vw, 38px) + 6px);
  font: italic 400 1rem/1.45 var(--f-serif);
  color: var(--text-2);
}


/* Pitch to us (5): Toggles
   The segmented controls as a row of cells divided by hairlines. The pressed cell fills with
   cream from the left (the button's wipe) and carries a small burgundy chevron. The state is
   aria-pressed alone: site.js writes the empty data-on-style / data-off-style strings. */

.page-proposal .toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--hair-2);                       /* the hairlines are the gaps */
  border: 1px solid var(--hair-2);
}
@container fields (min-width: 420px) {
  .page-proposal .toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container fields (min-width: 760px) {
  .page-proposal .toggle--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-proposal .toggle button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 30px 12px 16px;                    /* room at the right for the corner chevron */
  font: 400 .9375rem/1.35 var(--f-body);
  letter-spacing: .005em;
  text-align: left;
  color: var(--text);
  background: var(--bg);
  transition: color .22s var(--ease), scale .1s ease-out;
}
.page-proposal .toggle button::before {           /* the fill */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.page-proposal .toggle button::after {            /* the chevron, in the cell's upper right corner */
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 11px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cg transform='rotate(45 24 22)'%3E%3Cpolygon fill='%237E2D3A' points='24,4 41,33 36,33 24,22 12,33 7,33'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50% / contain;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .page-proposal .toggle button:hover { color: var(--fg); } }
.page-proposal .toggle button[aria-pressed="true"] { color: var(--midnight); font-weight: 500; }
.page-proposal .toggle button[aria-pressed="true"]::before { transform: scaleX(1); transform-origin: 0 50%; }
.page-proposal .toggle button[aria-pressed="true"]::after { opacity: 1; transform: none; transition-delay: .08s; }
.page-proposal .toggle button:focus-visible { z-index: 1; outline-offset: 2px; }


/* Pitch to us (6): Ticket size
   The live figure in the display face; the track in the site's hairline, filled in rose up to
   the value (--pct, set by site.js 12b; 24.24% is the default of 25 on 1 to 100); a cream disc
   for the thumb, ringed in rose-tint when focused from the keyboard. */

.page-proposal .size { gap: 12px; }
.page-proposal .size__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }   /* the label level with its neighbour's */
.page-proposal .size__value {
  font: 200 clamp(1.75rem, 2.4vw, 2.125rem)/1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--fg);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.page-proposal .size__range {
  --pct: 24.24%;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.page-proposal .size__range:focus,
.page-proposal .size__range:focus-visible { outline: none; }
.page-proposal .size__range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--rose) 0 var(--pct), var(--hair-2) var(--pct) 100%);
}
.page-proposal .size__range::-moz-range-track { height: 2px; background: var(--hair-2); }
.page-proposal .size__range::-moz-range-progress { height: 2px; background: var(--rose); }
.page-proposal .size__range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 4px var(--bg);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.page-proposal .size__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 4px var(--bg);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .page-proposal .size__range:hover::-webkit-slider-thumb { transform: scale(1.12); } }
@media (hover: hover) and (pointer: fine) { .page-proposal .size__range:hover::-moz-range-thumb { transform: scale(1.12); } }
.page-proposal .size__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--rose-tint); }
.page-proposal .size__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--rose-tint); }
.page-proposal .size__scale {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  font-size: .78125rem;
  color: var(--label);
  font-variant-numeric: lining-nums tabular-nums;
}


/* Pitch to us (7): The document
   One label, the whole of it a target: click or keyboard (the file input stays in the tab order,
   visually hidden, and the label shows its focus), or drop a file on it (site.js 12b; it only
   sets this same input's files). The chosen file's name and size replace "Upload a document". */

.page-proposal .drop {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  min-height: 92px;
  padding: 20px 20px 20px 22px;
  border: 1px solid var(--hair-2);
  cursor: pointer;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .page-proposal .drop:hover { border-color: rgba(242, 233, 216, .6); } }
.page-proposal .drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.page-proposal .drop.is-over { border-color: var(--rose); background-color: rgba(192, 107, 120, .08); }
.page-proposal .drop:has(input[aria-invalid="true"]) { border-color: var(--rose); }
.page-proposal .drop__mark { width: 12px; height: 11px; color: var(--accent); align-self: start; margin-top: .45em; }
.page-proposal .drop__text { display: grid; gap: 2px; min-width: 0; }
.page-proposal .drop__name {
  font: 400 1.0625rem/1.4 var(--f-body);
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color .22s var(--ease);
}
.page-proposal .drop.is-filled .drop__name { color: var(--fg); }
.page-proposal .drop__or { font: italic 400 .9375rem/1.4 var(--f-serif); color: var(--text-2); }
.page-proposal .drop.is-filled .drop__or { display: none; }
@media (hover: none) {
  .page-proposal .drop__or { display: none; }       /* touch screens pick files; they do not drag them in */
}
.page-proposal .drop__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  font: 500 .8125rem/1 var(--f-body);
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--fg);
  border: 1px solid var(--hair-2);
  transition: color .22s var(--ease), border-color .22s var(--ease), scale .1s ease-out;
}
.page-proposal .drop__btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.page-proposal .drop:focus-within .drop__btn { color: var(--midnight); border-color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .page-proposal .drop:hover .drop__btn { color: var(--midnight); border-color: var(--fg); } }
.page-proposal .drop:focus-within .drop__btn::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .page-proposal .drop:hover .drop__btn::before { transform: scaleX(1); transform-origin: 0 50%; } }
@container fields (max-width: 379.98px) {
  .page-proposal .drop { grid-template-columns: auto minmax(0, 1fr); }
  .page-proposal .drop__btn { grid-column: 2; justify-self: start; margin-top: 6px; }
}


/* Pitch to us (8): Actions, status, a field's own error line, the upload bar
   site.js (Part 2) checks a field when it is left (once something has been typed in it), and on
   Review checks them all: each field it rejects gets its own message under it (.fld__error, named
   by the field's aria-describedby, so a screen reader hears it again on returning to the field),
   the status beside the button reads out the first, and focus goes to the first rejected field.
   Errors are in rose-tint (7.8:1 on midnight) with a rose chevron, never cream. While sending,
   the status names the file's size and a thin bar runs under the button. */

.page-proposal .desk__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 6px;
}
.page-proposal .desk__actions .btn { flex: none; }
.page-proposal .desk__status { flex: 1 1 16em; font-size: .90625rem; line-height: 1.55; color: var(--fg); }
.page-proposal .fld__error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .84375rem;
  line-height: 1.5;
  color: var(--accent-text);
}
.page-proposal .fld__error::before {
  content: "";
  flex: none;
  width: 10px;
  height: 9px;
  margin-top: .42em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cg transform='rotate(45 24 22)'%3E%3Cpolygon fill='%23C06B78' points='24,4 41,33 36,33 24,22 12,33 7,33'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50% / contain;
}
.page-proposal .desk__noscript { font-size: .90625rem; line-height: 1.6; color: var(--text); max-width: 34em; }
.page-proposal .desk__noscript a { color: var(--fg); }

.page-proposal .desk .btn[disabled] { cursor: progress; }
.page-proposal .drop:active .drop__btn,
.page-proposal .rv__edit:active { color: var(--midnight); border-color: var(--fg); transition-duration: .1s; }   /* press (6) */

/* Sending: an indeterminate hairline under the button (site.js adds it; hidden when idle) */
.page-proposal .desk__progress {
  position: relative;
  flex: 1 0 100%;
  height: 2px;
  overflow: hidden;
  background: var(--hair);
}
.page-proposal .desk__progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  background: var(--rose);
  animation: desk-progress 1.4s var(--ease-io) infinite;
}
@keyframes desk-progress {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(320%, 0, 0); }
}
/* Without motion the bar simply stands, half drawn */
.still .page-proposal .desk__progress > span { width: 100%; opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .page-proposal .desk__progress > span { width: 100%; opacity: .5; animation: none; }
}


/* Pitch to us (9): Review
   Each section under a hairline: its name in the display face, Edit at the right, and the
   answers in two columns where the column allows. site.js builds the rows (dt, dd) and colours
   them inline for the dark; the type here only completes them. */

.page-proposal .rv { container: review / inline-size; }
.page-proposal .rv__sec { position: relative; padding: 22px 0 28px; border-top: 1px solid var(--hair); }
.page-proposal .rv__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-proposal .rv__title { font-size: clamp(1.3125rem, 1.7vw, 1.5625rem); line-height: 1.2; }
.page-proposal .rv__edit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 38px;
  padding: 0 16px;
  font: 500 .8125rem/1 var(--f-body);
  letter-spacing: .02em;
  color: var(--fg);
  border: 1px solid var(--hair-2);
  transition: color .22s var(--ease), border-color .22s var(--ease), scale .1s ease-out;
}
.page-proposal .rv__edit::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.page-proposal .rv__edit:focus-visible { color: var(--midnight); border-color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .page-proposal .rv__edit:hover { color: var(--midnight); border-color: var(--fg); } }
.page-proposal .rv__edit:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .page-proposal .rv__edit:hover::before { transform: scaleX(1); transform-origin: 0 50%; } }
.page-proposal .rv__edit[disabled] { opacity: .5; cursor: progress; }
.page-proposal .rv__list { display: grid; gap: 18px 32px; }
@container review (min-width: 460px) {
  .page-proposal .rv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-proposal .rv__list dt { font-family: var(--f-body); font-weight: 500; line-height: 1.45; text-transform: uppercase; }

.page-proposal .consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 14px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.page-proposal .consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--rose);
  cursor: pointer;
}
.page-proposal .consent label { flex: 0 1 auto; max-width: calc(100% - 32px); font-size: .96875rem; line-height: 1.6; color: var(--text); cursor: pointer; }
.page-proposal .consent a { font-size: .96875rem; line-height: 1.6; color: var(--fg); margin-left: 32px; }
@container review (min-width: 460px) {
  .page-proposal .consent a { margin-left: 0; }
}
.page-proposal .turnstile { margin-top: 28px; }
.page-proposal [data-review] .desk__actions { margin-top: 36px; }


/* Pitch to us (10): Received */

.page-proposal .desk__text { max-width: 30em; font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.page-proposal .desk__again { margin-top: 32px; }
.page-proposal [data-success-heading] [data-ref] { font-variant-numeric: lining-nums tabular-nums; }


/* Pitch to us (11): Privacy
   The notice lives inside the form panel as its last row (see below). */

/* Inside the form panel, as its last row: one hairline line under the form, on the reading axis,
   collapsed by default (like the AIF site). The summary reads as a quiet label with a plus that
   turns to a minus; opened, the clauses sit beneath it. Colours follow the panel's dark theme. */
.page-proposal .desk__grid { grid-template-rows: auto auto 1fr auto; }
.page-proposal .desk__privacy { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(40px, 5vw, 56px); min-width: 0; }
@media (min-width: 960px) { .page-proposal .desk__privacy { grid-column: 7 / -1; } }
.page-proposal .pitch-privacy__details { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.page-proposal .pitch-privacy__details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
}
.page-proposal .pitch-privacy__details summary::-webkit-details-marker { display: none; }
.page-proposal .pitch-privacy__summary {
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  transition: color .3s ease;
}
.page-proposal .pitch-privacy__details summary:focus-visible .pitch-privacy__summary { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .page-proposal .pitch-privacy__details summary:hover .pitch-privacy__summary { color: var(--fg); } }
.page-proposal .pitch-privacy__plus { position: relative; flex: 0 0 14px; width: 14px; height: 14px; color: var(--text-2); }
.page-proposal .pitch-privacy__plus::before,
.page-proposal .pitch-privacy__plus::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.page-proposal .pitch-privacy__plus::after { transform: rotate(90deg); }
.page-proposal .pitch-privacy__details[open] .pitch-privacy__plus::after { transform: rotate(0); }
.page-proposal .pitch-privacy__list { display: grid; gap: 10px; padding: 2px 0 24px; }
.page-proposal .pitch-privacy__list li { font-size: .90625rem; line-height: 1.68; color: var(--text-2); }
.page-proposal .pitch-privacy__list strong { font-weight: 500; color: var(--fg); }
.page-proposal .pitch-privacy__list a { color: var(--fg); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .page-proposal .pitch-privacy__plus::before, .page-proposal .pitch-privacy__plus::after { transition: none; }
}


/* Pitch to us (12): Without JavaScript
   The privacy notice is shown by site.js (its consent switch); without the script the page shows
   it anyway, so the page reads in full. Dropping a file needs the script, so its line goes too. */

html:not(.js) .page-proposal #privacy[data-privacy][hidden] { display: block !important; }
html:not(.js) .page-proposal .drop__or { display: none; }


/* ==========================================================================
   14. Utilities and accessibility
   ========================================================================== */

/* Tap areas. Footer and in-text links keep their look; what a finger can hit grows instead:
   an invisible ::before on short single-line links, block padding (which never moves a line)
   on underlined inline links. 24px and up everywhere (WCAG 2.2, 2.5.8); 32px and up on touch,
   where the footer list also opens up. */
.footer__list a, .footer__meta > a.u, dd > a.u { position: relative; }
.footer__list a::before, .footer__meta > a.u::before, dd > a.u::before {
  content: "";
  position: absolute;
  inset: -3px -4px;
}
.page-investors .ir-inline { padding-block: 4px; }
@media (pointer: coarse) {
  .footer__list { gap: 12px; }
  .footer__list a::before, .footer__meta > a.u::before, dd > a.u::before { inset: -6px -6px; }
  .page-investors .ir-inline { padding-block: 8px; }
}

.vh,
.sr-only {                           /* .sr-only: the name the proposal form's file input carries */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: var(--z-skip);
  padding: 12px 16px;
  background: var(--navy);
  color: var(--cream);
  font: 500 .875rem/1 var(--f-body);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus, .skip:focus-visible { transform: none; outline-color: var(--rose-tint); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* Copy to clipboard (the CIN) */
.copy {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;                  /* the hint drops under the value rather than past the column */
  align-items: baseline;
  gap: 0 12px;
  max-width: 100%;
  margin: -4px -6px;
  padding: 4px 6px;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 2px;
  transition: background-color .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .copy:hover { background: rgba(11, 36, 71, .05); } }
.copy__hint {
  -webkit-user-select: none;         /* selecting the sentence copies the CIN, not "Copy" */
  user-select: none;
  font: 500 .71875rem/1 var(--f-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s var(--ease), transform .3s var(--ease);
}
.copy:focus-visible .copy__hint, .copy.is-copied .copy__hint { opacity: 1; transform: none; }
.copy:active { background: rgba(11, 36, 71, .05); transition-duration: .1s; }   /* press (6) */
@media (hover: hover) and (pointer: fine) { .copy:hover .copy__hint { opacity: 1; transform: none; } }
@media (hover: none) { .copy__hint { opacity: 1; transform: none; } }
/* In running text (the CIN line on Investors) the hint rises above the value, so the sentence
   never opens a gap for it. */
.copy--inline { vertical-align: baseline; }
.copy--inline .copy__hint { position: absolute; left: 6px; bottom: calc(100% - 2px); transform: translateY(4px); }
.copy--inline:focus-visible .copy__hint, .copy--inline.is-copied .copy__hint { transform: none; }
@media (hover: hover) and (pointer: fine) { .copy--inline:hover .copy__hint { transform: none; } }


/* Reader preferences beyond motion (motion is 16).
   Reduced transparency: the header over a photograph is solid midnight, with no blur. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled[data-ink="image"] { --h-bg: var(--midnight); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: hairlines at .5 and .8 of their own ink, labels and secondary text in the body
   ink, the header's links at full strength and its glass solid. Same palette, stronger values. */
@media (prefers-contrast: more) {
  [data-theme="paper"], [data-theme="cream"] {
    --hair: rgba(11, 36, 71, .5);
    --hair-2: rgba(11, 36, 71, .8);
    --label: var(--ink);
    --text-2: var(--ink);
  }
  [data-theme="navy"], [data-theme="midnight"] {
    --hair: rgba(242, 233, 216, .5);
    --hair-2: rgba(242, 233, 216, .8);
    --label: var(--mist);
    --text-2: var(--mist);
  }
  [data-theme="burgundy"] {
    --hair: rgba(242, 233, 216, .5);
    --hair-2: rgba(242, 233, 216, .8);
    --label: var(--cream);
    --text-2: var(--cream);
  }
  .site-header, .site-header[data-ink] { --h-fg-2: var(--h-fg); }
  .site-header.is-scrolled { --h-hair: rgba(11, 36, 71, .5); }
  .site-header.is-scrolled[data-ink="dark"], .site-header.is-scrolled[data-ink="burgundy"] { --h-hair: rgba(242, 233, 216, .5); }
  .site-header.is-scrolled[data-ink="image"] { --h-bg: var(--midnight); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-proposal .fld__input::placeholder { color: var(--mist-2); }
}
/* Forced colours (Windows contrast themes): backgrounds become the system canvas, so lines and
   marks drawn as backgrounds would vanish. They are drawn in the system ink instead; the
   selected year, the current step and a pressed toggle take the system highlight; boxed
   controls keep a visible border; underlines drawn as gradients become real underlines. */
@media (forced-colors: active) {
  /* the outlined logo files carry their own colour, so in high contrast they sit on their brand plate to stay legible */
  img[src*="/logo/"], img[src*="wordmark"], img[src*="signature"] { forced-color-adjust:none; background:#F7F5F0; padding:4px 6px; box-sizing:content-box; }
  img[src*="reversed"] { background:#06162C; }
  .menu-btn__icon i, .menu-close__x i, .nav__link::after, .progress__bar,
  .caption::before, .caption::after, .ledger__row::before, .ledger__row:last-child::after,
  [data-rules] > li::before, [data-rules] > li:last-child::after, .family::before, .family::after,
  .page-products .findex__link::before, .page-approach .step__mark, .page-approach .steps__fill,
  .page-proposal .pitch-privacy__plus::before, .page-proposal .pitch-privacy__plus::after,
  .page-proposal .desk__progress > span {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .page-investors .fy-tab::after, .page-proposal .steps__item::after { forced-color-adjust: none; background: Highlight; }
  .btn, .box, .seg, .page-proposal .drop__btn, .page-proposal .rv__edit, .page-proposal .toggle, .page-proposal .drop { border-color: ButtonText; }
  .page-proposal .toggle button[aria-pressed="true"], .seg button[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  a:hover .u, a:focus-visible .u, a:active .u, .ledger a .u, .folio__contents a,
  .begin__panel:focus-within .u, .next:focus-within .next__link .u { text-decoration: underline; text-decoration-thickness: 1px; }
  .page-proposal .fld__input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .page-proposal .fld__input[aria-invalid="true"] { border-bottom-width: 3px; border-bottom-style: double; }
  .page-proposal .size__range { -webkit-appearance: auto; appearance: auto; }
}


/* ==========================================================================
   15. Motion
   Everything here is gated on `.js:not(.still)`. site.js adds `.in` when an
   element arrives (IntersectionObserver); stagger delays come in as --d.
   ========================================================================== */

/* Fade and rise */
.js:not(.still) [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.js:not(.still) [data-reveal].in { opacity: 1; transform: none; }
.js:not(.still) [data-reveal="fade"] { transform: none; }      /* opacity only: it holds a link's whole-block overlay */
/* Rise only: a title page's lede is painted with the first frame and only settles into place, so
   the largest text of a type-led first screen is never held back by the choreography. */
.js:not(.still) [data-reveal="rise"] { opacity: 1; }

/* Headings rise line by line from a mask, with room below the baseline for descenders */
.js:not(.still) [data-split]:not(.is-split) { opacity: 0; }
.ln {
  display: block;
  overflow: hidden;
  padding: .1em .06em .2em;
  margin: -.1em -.06em -.2em;
}
.ln + .ln { margin-top: -.3em; }     /* the masks' room overlaps, so split lines take no more height than the text */
.ln__i { display: block; }
/* Lines set in the markup (a title page's h1): each rises a beat after the one before. */
[data-split] .ln + .ln .ln__i { --i: 1; }
[data-split] .ln + .ln + .ln .ln__i { --i: 2; }
.js:not(.still) [data-split] .ln__i {
  transform: translate3d(0, calc(100% + .35em), 0);           /* clears the mask's room below the baseline */
  transition: transform 1.2s var(--ease) calc(var(--d, 0s) + var(--i, 0) * .1s);
}
.js:not(.still) [data-split].in .ln__i { transform: none; }

/* The hero headline: word masks, grouped into lines per breakpoint */
.js:not(.still) [data-hero-title] .hw__i {
  transform: translate3d(0, calc(100% + .35em), 0);
  transition: transform 1.25s var(--ease) .12s;
}
.js:not(.still) [data-hero-title] .hw:last-child .hw__i { transition-delay: .24s; }   /* the last line, a beat later */
.js:not(.still) [data-hero-title].in .hw__i { transform: none; }

/* Hairlines draw in from the left, in sequence */
.js:not(.still) [data-rules] > *::before,
.js:not(.still) [data-rules] > *:last-child::after {
  transform: scaleX(0);
  transition: transform 1.3s var(--ease) calc(var(--d, 0s) + .1s);
}
.js:not(.still) [data-rules] > .in::before,
.js:not(.still) [data-rules] > .in:last-child::after { transform: scaleX(1); }
.js:not(.still) .family::before { transform: scaleX(0); transition: transform 1.3s var(--ease) var(--d, 0s); }
.js:not(.still) .family.in::before { transform: scaleX(1); }
.js:not(.still) .facts { border-top-color: transparent; background: linear-gradient(var(--hair), var(--hair)) no-repeat 0 0 / 0 1px; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), background-size 1.4s var(--ease) var(--d, 0s); }
.js:not(.still) .facts.in { background-size: 100% 1px; }
.js:not(.still) .caption::before,
.js:not(.still) .caption::after { transform: scaleX(0); transform-origin: 0 50%; }
.js:not(.still) .caption::before { transition: transform 1.4s var(--ease) .3s; }
.js:not(.still) .caption::after { transition: transform 1.4s var(--ease) .3s, clip-path 1.2s var(--ease); }
.js:not(.still) .plate.in .caption::before,
.js:not(.still) .plate.in .caption::after { transform: none; }
.js:not(.still) .hero__plate .caption::before,
.js:not(.still) .hero__plate .caption::after { transform-origin: 100% 50%; }
@media (min-width: 960px) {
  .js:not(.still) .hero__plate .caption::before,
  .js:not(.still) .hero__plate .caption::after { transform-origin: 0 50%; }
}

/* Plates develop: the print fades up from its paper and settles from a slight scale */
.js:not(.still) .plate .plate__clip::after {
  opacity: 1;
  transition: opacity 1.2s var(--ease-soft) var(--d, 0s);
}
.js:not(.still) .plate.in .plate__clip::after { opacity: 0; }
.js:not(.still) .plate:not(.in) .plate__img img { transform: scale(1.06); }
.js:not(.still) .plate .caption__num,
.js:not(.still) .plate .caption__place {
  opacity: 0;
  transition: opacity 1s var(--ease) .5s;
}
.js:not(.still) .plate.in .caption__num,
.js:not(.still) .plate.in .caption__place { opacity: 1; }

/* Rolling figures: each digit rolls up once to its value (site.js builds the strips) */
.roll {
  display: inline-flex;
  vertical-align: top;
  height: 1lh;
  overflow: hidden;
}
.roll__col { display: block; height: 1lh; overflow: hidden; }
.roll__strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.7s var(--ease) calc(var(--d, 0s) + var(--k, 0) * 70ms);
}
.roll__strip > span { display: block; height: 1lh; }
.roll.go .roll__strip { transform: translate3d(0, calc(var(--n, 0) * -1lh), 0); }

/* Holding scale: the rise draws in after the figures */
.js:not(.still) .holding__rise { transform: scaleX(0); transition: transform 1.6s var(--ease) calc(var(--d, 0s) + .7s); }
.js:not(.still) .holding__mark { opacity: 0; transform: translate(-6px, 6px); transition: opacity .8s var(--ease) calc(var(--d, 0s) + 1.3s), transform 1s var(--ease) calc(var(--d, 0s) + 1.3s); }
.js:not(.still) .in .holding__rise { transform: none; }
.js:not(.still) .in .holding__mark { opacity: 1; transform: none; }



/* ==========================================================================
   16. Still mode, reduced motion, Lenis, view transitions
   ========================================================================== */

.still *, .still *::before, .still *::after {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Lenis (smooth wheel scrolling on fine pointers only; touch keeps native scroll) */
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: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Cross-document view transitions: the header holds still, the page fades through (the old page
   leaves before the new one arrives, so two pages never show at once), and a print on screen
   that is the next page's frontispiece morphs into it. Only a page's frontispiece (the plate on
   its first screen) is named from the start; as the page is left, site.js (12b) keeps a name
   only on a print that has its twin on the next page (and on its own frontispiece, for the way
   back), so no print is left hanging over the next page. A group that finds no twin leaves
   and arrives with the page. Named prints carry the class "plate": both snapshots cover the
   morphing box, so two crops of one print never show a seam. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
::view-transition-old(root) { animation: .2s cubic-bezier(.4, 0, 1, 1) both vt-out; }
::view-transition-new(root) { animation: .3s cubic-bezier(0, 0, .2, 1) .15s both vt-in; }
::view-transition-old(*):only-child { animation-duration: .25s; }
::view-transition-new(*):only-child { animation-duration: .3s; animation-delay: .15s; animation-fill-mode: both; }
::view-transition-group(*.plate) { overflow: clip; }
::view-transition-old(*.plate),
::view-transition-new(*.plate) { width: 100%; height: 100%; object-fit: cover; }
.site-header { view-transition-name: site-header; }
:is(.plate--hero, .plate--frontis) .plate__frame { view-transition-class: plate; }
:is(.plate--hero, .plate--frontis)[data-plate="ribbed-hall"] .plate__frame { view-transition-name: plate-ribbed-hall; }
:is(.plate--hero, .plate--frontis)[data-plate="chand-baori"] .plate__frame { view-transition-name: plate-chand-baori; }
:is(.plate--hero, .plate--frontis)[data-plate="adalaj"] .plate__frame { view-transition-name: plate-adalaj; }
:is(.plate--hero, .plate--frontis)[data-plate="spiral-stair"] .plate__frame { view-transition-name: plate-spiral-stair; }
:is(.plate--hero, .plate--frontis)[data-plate="iim-ahmedabad"] .plate__frame { view-transition-name: plate-iim-ahmedabad; }
:is(.plate--hero, .plate--frontis)[data-plate="millau"] .plate__frame { view-transition-name: plate-millau; }
:is(.plate--hero, .plate--frontis)[data-plate="arched-corridor"] .plate__frame { view-transition-name: plate-arched-corridor; }
@media (max-width: 959.98px) {
  .chapter__plate.plate--frontis .plate__frame { view-transition-name: none; }   /* Products: below the title on phones */
}
/* Arriving by a transition, the frontispiece is already developed, so the print lands on a print
   (site.js marks it arrived at once; this covers the frames before it runs). */
html:active-view-transition :is(.plate--hero, .plate--frontis, .is-morph) .plate__clip::after { opacity: 0 !important; transition: none !important; }
html:active-view-transition :is(.plate--hero, .plate--frontis, .is-morph) .plate__img img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* ==========================================================================
   17. Print: every element in its final state, the page in one flow
   (shareholders print the Investors page; this serves every page)
   ========================================================================== */

@media print {
  .js [data-reveal], .js [data-split] .ln__i, .js [data-hero-title] .hw__i,
  .js .plate__clip::after, .js .caption__num, .js .caption__place, .js .caption::before, .js .caption::after,
  .js .family::before, .js [data-rules] > *::before, .js [data-rules] > *:last-child::after {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .plate__clip::after { opacity: 0 !important; }
  .plate.is-gl .plate__img img { opacity: 1 !important; }
  .gl, .cursor, .progress, .skip, .menu, .menu-btn, .grow-veil, .hero__title--ink { display: none !important; }
  .site-header, .js .site-header { position: static !important; transform: none !important; }
  .hero__title { clip-path: none !important; margin-top: 0 !important; }
  html.grow .hero__plate .plate__clip { position: absolute !important; clip-path: none !important; }
  html.grow .hero__plate .plate__img { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; }
  html.grow .tenets__body { padding-top: 0 !important; }
  .hero { height: auto !important; }
  .statement.is-passage { height: auto !important; }
  .statement.is-passage .statement__pin { position: relative !important; height: 70vh !important; }
  .tenets__head, .terms__head, .record__head, .stage__pin { position: static !important; }
  [data-theme] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plate, .statement__pin, .tenet, .clause, .ledger__row, .begin__panel, .footer__top { break-inside: avoid; }
  h1, h2, h3, .label { break-after: avoid; }

  /* The inner pages (13b) */
  .page-about .folio { height: auto !important; }
  .part__head, .opening__head, .page-approach .steps__head, .page-products .findex,
  .page-proposal .pitch-needs__head, .page-proposal .desk__head { position: static !important; }
  .next__link::after { display: none; }
  .page-approach .steps__count, .page-approach .step__mark { display: none !important; }
  .page-approach .steps.is-sequenced .step .step__num,
  .page-approach .steps.is-sequenced .step .step__name,
  .page-approach .steps.is-sequenced .step .step__text { color: inherit !important; }
  .page-approach .steps.is-sequenced .step { min-height: 0 !important; }
  .page-approach .step, .page-about .hold, .pull__fig, .page-team .person, .page-404 .lost__list > li,
  .page-products .chapter__plate, .page-products .chapter__body { break-inside: avoid; }
  /* Investors: every year, one after another, without the index */
  .page-investors .fy[hidden] { display: block !important; }
  .page-investors .fy-index { display: none !important; }
  .page-investors .filings.is-tabs .fy + .fy { margin-top: 40px !important; }
  .page-investors .fy__title, .page-investors .ir-group__head, .page-investors .fy-index__pin { position: static !important; }
  .page-investors .fy__row, .page-investors .ir-list > li, .page-investors .ir-contact { break-inside: avoid; }
  .page-investors .doc .chevs { display: none; }
  /* The promoter holding prints drawn, even if the page is printed before the scale has arrived */
  .js .holding__rise, .js .holding__mark { transform: none !important; opacity: 1 !important; transition: none !important; }
  /* The footer's signature is a lazy image: printed before it is scrolled to, it would leave an
     empty band, so print leaves it out (the statutory line and the cornerstone carry the name) */
  .footer__sig { display: none !important; }
}

/* Phones: the numeral sits on its own line above its heading, and the heading and everything under
   it run flush left, level with the photograph and its caption (as the Approach steps do). */
@media (max-width: 559.98px) {
  .page-products .chapter__body,
  .family,
  .clause,
  .tenet,
  .page-about .hold { grid-template-columns: minmax(0, 1fr); }
  .page-products .chapter__body > *,
  .family > *,
  .clause > *,
  .tenet > *,
  .tenet > div > *,
  .page-about .hold > * { grid-column: 1 / -1; }
  .page-products .chapter__num,
  .family__num,
  .clause__num,
  .tenet__num,
  .page-about .hold__num { grid-row: auto; padding-top: 0; margin-bottom: 6px; }
  .tenet > div { display: contents; }
  .page-products .chapter__line { margin-top: 12px; }
  .family__line { margin-top: 8px; }
}