/* ==========================================================================
   Eishaan Bharadwaj — Premium Real-Estate Strategist
   Design system: "Deccan Basalt & Brass"
   Single committed dark identity. Every colour painted explicitly.
   ========================================================================== */

:root{
  /* Ground — basalt, cool blue-grey bias (Pune sits on Deccan trap rock) */
  --ink:        #0B0F12;
  --ink-2:      #10161A;
  --ink-3:      #161E23;
  --ink-4:      #1B252B;

  /* Rules — hairlines carry the structure, not boxes */
  --rule:       #212B31;
  --rule-soft:  #182126;
  --rule-bright:#33424A;

  /* Text — paper bone, never pure white */
  --bone:       #E9E5DC;
  --bone-dim:   #B6B1A6;
  --muted:      #98A4AA;   /* lifted so it still reads above --faint, which moved up for contrast */
  --faint:      #7E8A90;   /* was #5A666C — failed WCAG AA at 3.25:1. This is 5.43 / 5.14 / 4.76 on the three grounds. */

  /* Accent — aged brass, desaturated. Spent only on data and one CTA. */
  --brass:      #B98F52;
  --brass-hi:   #D6AE72;
  --brass-lo:   #6E5836;
  --brass-wash: rgba(185,143,82,.10);

  /* Semantic — reserved for movement/state, never decoration */
  --up:         #7BA98F;
  --down:       #C4756A;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.98rem, .95rem + .15vw, 1.06rem);
  --step-1:  clamp(1.18rem, 1.1rem + .35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4.1rem);
  --step-5:  clamp(2.6rem, 1.9rem + 3.4vw, 4.75rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wide: 1280px;
  --measure: 66ch;
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }

::selection{ background: var(--brass); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--brass-hi);
  outline-offset: 3px;
  border-radius: 1px;
}

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

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 0;
  letter-spacing: -.015em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

h1{ font-size: var(--step-5); line-height: 1.02; letter-spacing: -.03em; }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-1); letter-spacing: -.01em; line-height: 1.24; }
h4{ font-size: var(--step-0); font-family: var(--body); font-weight: 600; letter-spacing: 0; }

p{ margin: 0; }

/* Base link. The transition is here rather than on each variant so every
   link on the site eases on hover — inline prose links and footer lists
   included — instead of snapping. .18s is the site's one motion value. */
a{ color: var(--bone); text-decoration-color: var(--brass-lo); text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease; }
a:hover{ text-decoration-color: var(--brass); }

strong{ font-weight: 600; color: var(--bone); }

.prose{ max-width: var(--measure); display: flex; flex-direction: column; gap: 1.1em; color: var(--bone-dim); }
.prose p{ font-size: var(--step-0); }
.prose strong{ color: var(--bone); }

.lede{
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--bone);
  max-width: 30ch;
  text-wrap: balance;
}

/* Eyebrow — a reference label, naming the framework the section belongs to */
.label{
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0;
}
.label::before{
  content: "";
  width: 1.6rem; height: 1px;
  background: var(--brass-lo);
  flex: none;
}
.label--plain::before{ display: none; }
.label--muted{ color: var(--muted); }
.label--muted::before{ background: var(--rule-bright); }

.num{ font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

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

.wrap{ width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

section{ position: relative; }

.band{ padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--rule-soft); }
.band--tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--flush{ border-top: 0; }
.band--raised{ background: var(--ink-2); }

.head{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head p.intro{ max-width: var(--measure); color: var(--bone-dim); }

.split{
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }

.cols{ display: grid; gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.cols--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .cols--3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .cols--3, .cols--2{ grid-template-columns: 1fr; } }

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

.masthead{
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,15,18,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.masthead__in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: 66px;
}

/* min-height, not padding: the wordmark sits in a flex row and extra
   padding would shift the masthead baseline. 24px is the WCAG 2.5.8
   minimum target size — it measured 24x20 before this. */
.wordmark{ display: inline-flex; align-items: baseline; gap: .62rem; text-decoration: none;
  color: var(--bone); min-height: 24px; align-content: center;
  transition: color .18s ease; }
.wordmark:hover .wordmark__name{ color: var(--brass-hi); }
.wordmark__name{ transition: color .18s ease; }
.wordmark__mark{
  font-family: var(--display);
  font-size: 1.28rem;
  font-variation-settings: "WONK" 1;
  letter-spacing: -.05em;
  color: var(--brass);
  line-height: 1;
}
.wordmark__name{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 1;
}
@media (max-width: 480px){ .wordmark__name{ display: none; } }

.nav{ display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem); }
.nav a{
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: .5rem;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.nav a:hover{ color: var(--bone); }
.nav a[aria-current="page"]{ color: var(--brass); border-bottom-color: var(--brass); }

/* The one call to action in the masthead. Deliberately restrained: a brass
   hairline and a wash, not a filled block. A solid button up here would be
   the loudest thing on a page whose argument is that it does not shout —
   and it has to sit beside eight quiet links without flattening them.
   Contrast is carried by the border and the brighter text, both of which
   already pass AA on this ground. */
.nav a.nav__cta{
  color: var(--brass-hi);
  border: 1px solid var(--brass-lo);
  border-radius: 2px;
  padding: .5rem .95rem;
  margin-left: .55rem;
  background: var(--brass-wash);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.nav a.nav__cta:hover{ background: rgba(185,143,82,.18); border-color: var(--brass); color: var(--bone); }
/* aria-current wins over the CTA styling on the contact page itself, so the
   underline convention used by every other nav item still reads. */
.nav a.nav__cta[aria-current="page"]{ background: var(--brass); color: var(--ink); border-color: var(--brass); }

/* The drawer is the mobile equivalent, so the CTA has to survive there too. */
.drawer nav a.nav__cta{
  display: inline-block; color: var(--brass-hi);
  border: 1px solid var(--brass-lo); border-radius: 2px;
  padding: .6rem 1rem; margin-top: .4rem; background: var(--brass-wash);
}

@media (max-width: 1040px){ .nav{ display: none; } }

.nav-toggle{
  display: none;
  background: none; border: 1px solid var(--rule-bright); color: var(--bone);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem .8rem; cursor: pointer; border-radius: 2px;
}
@media (max-width: 1040px){ .nav-toggle{ display: inline-block; } }

.drawer{
  display: none;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-2);
}
.drawer.is-open{ display: block; }
.drawer nav{ display: flex; flex-direction: column; padding-block: .5rem 1.25rem; }
.drawer nav a{
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim); text-decoration: none;
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft);
}
.drawer nav a[aria-current="page"]{ color: var(--brass); }

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

.btn{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  padding: .82rem 1.3rem;
  border: 1px solid var(--brass-lo);
  color: var(--brass-hi);
  background: transparent;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1;
}
.btn:hover{ background: var(--brass-wash); border-color: var(--brass); color: var(--brass-hi); }

.btn--solid{ background: var(--brass); border-color: var(--brass); color: #14100A; font-weight: 500; }
.btn--solid:hover{ background: var(--brass-hi); border-color: var(--brass-hi); color: #14100A; }

.btn--ghost{ border-color: var(--rule-bright); color: var(--bone-dim); }
.btn--ghost:hover{ border-color: var(--bone-dim); color: var(--bone); background: transparent; }

.btn--sm{ padding: .6rem .9rem; font-size: .68rem; }

.btn-row{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.arrow-link{
  font-family: var(--mono); font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--brass-lo); padding-bottom: .3rem;
  transition: gap .18s ease, border-color .18s ease;
}
.arrow-link:hover{ gap: .85rem; border-bottom-color: var(--brass); }

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

.hero{ padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height: 1px; background: var(--rule-soft);
}
.hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
@media (max-width: 980px){ .hero__grid{ grid-template-columns: 1fr; align-items: start; } }

.hero h1 em{
  font-style: normal;
  color: var(--brass);
  font-variation-settings: "WONK" 1, "SOFT" 0;
}
.hero__sub{
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--bone-dim);
  font-size: var(--step-1);
  line-height: 1.5;
}
.hero__meta{
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule-soft);
}
.hero__meta div{ display: flex; flex-direction: column; gap: .35rem; }
.hero__meta dt, .hero__meta .k{
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.hero__meta dd, .hero__meta .v{ margin: 0; font-size: .9rem; color: var(--bone-dim); }

/* Live market strip — the strategist's price sheet, in the hero */
.ticker{
  border: 1px solid var(--rule);
  background: var(--ink-2);
  border-radius: 2px;
}
.ticker__hd{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.ticker__hd h3{
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-dim); font-weight: 500;
}
.ticker__hd span{ font-family: var(--mono); font-size: .63rem; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.ticker__row{
  display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  gap: 1rem; align-items: baseline;
  padding: .72rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.ticker__row:last-of-type{ border-bottom: 0; }
.ticker__name{ font-size: .88rem; color: var(--bone); }
.ticker__px{ font-family: var(--mono); font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--bone); }
.ticker__ch{ font-family: var(--mono); font-size: .76rem; font-variant-numeric: tabular-nums; min-width: 4.6ch; text-align: right; }
.up{ color: var(--up); }
.down{ color: var(--down); }
.ticker__ft{
  padding: .8rem 1.1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .62rem; line-height: 1.5; color: var(--faint); letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Editorial pieces
   -------------------------------------------------------------------------- */

.cell{ background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .85rem; }
.cols--raised .cell{ background: var(--ink-2); }
.cell__k{ font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.cell h3{ color: var(--bone); }
.cell p{ color: var(--muted); font-size: .93rem; line-height: 1.6; }
.cell ul{ margin: 0; padding-left: 1.05rem; color: var(--muted); font-size: .89rem; display: flex; flex-direction: column; gap: .35rem; }
.cell ul li::marker{ color: var(--brass-lo); }

/* A numbered sequence — used ONLY where order genuinely carries meaning */
.seq{ display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); }
.seq__item{
  display: grid; grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
@media (max-width: 780px){
  .seq__item{ grid-template-columns: 3rem minmax(0,1fr); }
  .seq__item .seq__body{ grid-column: 2; }
}
.seq__n{ font-family: var(--mono); font-size: .75rem; color: var(--brass-lo); letter-spacing: .1em; padding-top: .28rem; font-variant-numeric: tabular-nums; }
.seq__t{ font-family: var(--display); font-size: var(--step-1); color: var(--bone); line-height: 1.22; font-variation-settings: "WONK" 1; }
.seq__body{ color: var(--muted); font-size: .93rem; line-height: 1.62; }
.seq__body strong{ color: var(--bone-dim); font-weight: 500; }

/* Data tables — the price sheet */
.table-scroll{ overflow-x: auto; border: 1px solid var(--rule); border-radius: 2px; background: var(--ink-2); }
table.data{
  width: 100%; border-collapse: collapse; min-width: 720px;
  font-variant-numeric: tabular-nums;
}
table.data caption{
  text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-dim);
}
table.data th{
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.data th.sortable{ cursor: pointer; user-select: none; }
table.data th.sortable:hover{ color: var(--bone-dim); }
table.data th[aria-sort="ascending"], table.data th[aria-sort="descending"]{ color: var(--brass); }
table.data th.sortable::after{ content: " ⇅"; opacity: .4; }
table.data th[aria-sort="ascending"]::after{ content: " ↑"; opacity: 1; }
table.data th[aria-sort="descending"]::after{ content: " ↓"; opacity: 1; }
table.data td{
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule-soft);
  font-size: .87rem; color: var(--bone-dim);
}
table.data tbody tr:last-child td{ border-bottom: 0; }
table.data tbody tr:hover td{ background: var(--ink-3); }
table.data td.n{ font-family: var(--mono); color: var(--bone); }
table.data td .locality{ color: var(--bone); font-weight: 500; }
table.data td .sub{ display: block; font-size: .74rem; color: var(--faint); margin-top: .15rem; }

/* Chart */
.figure{ border: 1px solid var(--rule); background: var(--ink-2); border-radius: 2px; overflow: hidden; }
.figure__hd{ padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); display:flex; flex-direction: column; gap:.4rem; }
.figure__hd h3{ font-size: var(--step-1); color: var(--bone); }
.figure__hd p{ font-size: .84rem; color: var(--muted); max-width: 60ch; }
.figure__body{ padding: 1.25rem; overflow-x: auto; }
.figure figcaption{
  padding: .85rem 1.25rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .63rem; color: var(--faint); line-height: 1.55;
}

/* Scorecard — EB Capital Safety Filter */
.filter{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 19rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px){ .filter{ grid-template-columns: 1fr; } }

.checks{ border-top: 1px solid var(--rule-soft); }
.check{
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: 1rem; align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.check input{
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem; margin: .22rem 0 0;
  border: 1px solid var(--rule-bright); border-radius: 1px;
  background: transparent; cursor: pointer; flex: none;
  display: grid; place-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.check input::after{
  content: ""; width: .5rem; height: .5rem; transform: scale(0);
  background: var(--ink); transition: transform .12s ease;
  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 22%, 84% 8%, 39% 68%);
}
.check input:checked{ background: var(--brass); border-color: var(--brass); }
.check input:checked::after{ transform: scale(1.6); }
.check__t{ font-size: .93rem; color: var(--bone); line-height: 1.45; }
.check__d{ display: block; font-size: .8rem; color: var(--muted); margin-top: .3rem; line-height: 1.5; }
.check:hover .check__t{ color: var(--bone); }

.score{ border: 1px solid var(--rule); background: var(--ink-2); border-radius: 2px; position: sticky; top: 86px; }
.score__hd{ padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.score__body{ padding: 1.5rem 1.15rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.score__n{ font-family: var(--display); font-size: 3.6rem; line-height: .9; color: var(--brass); font-variation-settings: "WONK" 1; font-variant-numeric: tabular-nums; }
.score__n small{ font-size: 1.25rem; color: var(--faint); }
.score__bar{ width: 100%; height: 3px; background: var(--ink-4); overflow: hidden; }
.score__fill{ height: 100%; width: 0%; background: var(--brass); transition: width .3s ease; }
.score__verdict{ font-size: .9rem; color: var(--bone-dim); line-height: 1.55; }
.score__verdict b{ color: var(--bone); font-weight: 600; display: block; margin-bottom: .3rem; font-family: var(--display); font-size: 1.1rem; }
.score__ft{ padding: 1rem 1.15rem; border-top: 1px solid var(--rule); }

/* Testimonials */
.quotes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.quote{ background: var(--ink); padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 1.1rem; justify-content: space-between; }
.quote p{ font-family: var(--display); font-size: var(--step-1); line-height: 1.38; color: var(--bone); font-weight: 300; font-variation-settings: "WONK" 0; }
.quote cite{ font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); font-style: normal; }

/* Pull statement */
.statement{
  font-family: var(--display); font-weight: 300;
  font-size: var(--step-3); line-height: 1.22; letter-spacing: -.02em;
  color: var(--bone); max-width: 24ch; text-wrap: balance;
}
.statement em{ font-style: normal; color: var(--brass); }

/* Definition rows */
.rows{ border-top: 1px solid var(--rule-soft); }
.row{
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
@media (max-width: 700px){ .row{ grid-template-columns: 1fr; gap: .5rem; } }
.row dt, .row .row__k{ font-size: .95rem; color: var(--bone); font-weight: 500; margin: 0; }
.row dd, .row .row__v{ margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* Catalyst list sits in a narrow rail — the year needs only its own width */
[data-chart-events] .row{
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .95rem;
  align-items: start;
}
[data-chart-events] .row__k{ color: var(--brass); font-size: .8rem; padding-top: .1rem; }
[data-chart-events] .row__v{ font-size: .88rem; line-height: 1.5; }

/* CTA band */
.cta{ background: var(--ink-2); border-top: 1px solid var(--rule); }
.cta__in{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 820px){ .cta__in{ grid-template-columns: 1fr; } }
.cta h2{ font-size: var(--step-2); max-width: 20ch; }
.cta p{ color: var(--muted); max-width: 44ch; margin-top: .85rem; font-size: .93rem; }

/* Form */
.form{ display: flex; flex-direction: column; gap: 1.35rem; max-width: 34rem; }
.field{ display: flex; flex-direction: column; gap: .5rem; }
.field label{ cursor: pointer; transition: color .18s ease; font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea{
  font-family: var(--body); font-size: .95rem; color: var(--bone);
  background: var(--ink-2); border: 1px solid var(--rule);
  padding: .8rem .9rem; border-radius: 2px;
  width: 100%;
  transition: border-color .18s ease;
}
/* Pointer focus keeps the quiet border treatment; keyboard focus gets the
   same 2px brass ring every other control on the site uses. Removing the
   outline here left keyboard users unable to see which field they were in,
   on the enquiry form — WCAG 2.4.7 and 2.4.11. */
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass-lo); }
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible){ outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline: 2px solid var(--brass-hi); outline-offset: 2px; border-color: var(--brass-lo);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--faint); }
.field textarea{ resize: vertical; min-height: 6.5rem; }
.field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option{ background: var(--ink-2); color: var(--bone); }
.field-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 560px){ .field-2{ grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- proof --
   The credibility band under the hero. Four checkable facts, each with the
   link that lets you check it — which is the whole argument, so the link is
   part of the content rather than a decoration.

   Deliberately quiet: a hairline top and bottom, no cards, no shadows, no
   icons. Loud trust badges read as compensation. Four columns on desktop,
   two on tablet, one on phone; every cell keeps its own reading measure so
   nothing goes ragged at the breakpoints. */
.proof{ border-block: 1px solid var(--rule-soft); background: var(--ink-2); }
.proof .wrap{ padding-block: clamp(2rem, 4vw, 3.1rem); }
.proof__grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(4, 1fr);
}
.proof__grid > li{
  display: flex; flex-direction: column; gap: .55rem;
  border-left: 1px solid var(--rule); padding-left: 1.1rem;
  max-width: 34ch;
}
.proof__k{
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass);
}
.proof__v{ font-size: .95rem; line-height: 1.5; color: var(--bone); margin: 0; }
.proof__a{
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--rule-bright); align-self: flex-start;
  padding-block: .3rem;                      /* 24px target, WCAG 2.5.8 */
  transition: color .18s ease, border-color .18s ease;
}
.proof__a:hover{ color: var(--brass-hi); border-bottom-color: var(--brass); }

@media (max-width: 1040px){
  .proof__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .proof__grid{ grid-template-columns: 1fr; }
}

/* Single-field sign-up: label above, input and button on one line. Wraps to
   stacked below 30rem so the button never gets squeezed to an icon. */
.form--inline{ flex-direction: row; align-items: flex-end; gap: .8rem; flex-wrap: wrap; max-width: 34rem; }
.form--inline .field{ flex: 1 1 15rem; }
.form--inline .btn{ flex: 0 0 auto; }
@media (max-width: 30rem){
  .form--inline{ flex-direction: column; align-items: stretch; }
  .form--inline .btn{ width: 100%; }
}

.form__note{ font-size: .78rem; color: var(--faint); line-height: 1.55; }
.form__note a{ color: var(--muted); }

/* Contact rail */
.rail{ display: flex; flex-direction: column; gap: 1.6rem; }
.rail__item{ display: flex; flex-direction: column; gap: .3rem; }
.rail__k{ font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rail__v{ font-size: .98rem; color: var(--bone); text-decoration: none;
  transition: color .18s ease; }
.rail__v:hover{ color: var(--brass-hi); }

/* Footer */
.foot{ border-top: 1px solid var(--rule); background: var(--ink); padding-block: clamp(2.5rem, 5vw, 3.75rem) 2rem; }
.foot__grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .8fr)); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px){ .foot__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .foot__grid{ grid-template-columns: 1fr; } }
.foot h4{ font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 1rem; }
.foot ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.foot a{ color: var(--muted); text-decoration: none; font-size: .88rem; }
.foot a:hover{ color: var(--bone); }
.foot__brand p{ color: var(--muted); font-size: .88rem; max-width: 34ch; margin-top: 1rem; line-height: 1.6; }
.social{ display: flex; gap: .6rem; margin-top: 1.35rem; }
.social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--muted); transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.social a:hover{ color: var(--brass-hi); border-color: var(--brass-lo); background: var(--brass-wash); }
.social svg{ width: 17px; height: 17px; display: block; }

.foot__legal{
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--faint); line-height: 1.7;
}
.foot__legal p{ max-width: 78ch; }

/* Floating WhatsApp */
.wa-fab{
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--brass); color: #14100A;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding: .8rem 1.1rem; border-radius: 2px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: background .18s ease, transform .18s ease;
}
.wa-fab:hover{ background: var(--brass-hi); transform: translateY(-1px); color: #14100A; }
.wa-fab svg{ width: 15px; height: 15px; flex: none; }
@media (max-width: 560px){ .wa-fab span{ display: none; } .wa-fab{ padding: .85rem; } }

/* Page opener for inner pages */
.opener{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule-soft); }
.opener h1{ font-size: var(--step-4); max-width: 18ch; }
.opener .lede{ margin-top: 1.5rem; font-size: var(--step-1); max-width: 52ch; color: var(--bone-dim); font-family: var(--body); font-weight: 400; line-height: 1.6; }

.skip{
  transition: left .18s ease, top .18s ease;
  position: absolute; left: -9999px; top: 0;
  background: var(--brass); color: var(--ink); padding: .7rem 1rem;
  font-family: var(--mono); font-size: .72rem; z-index: 100; text-decoration: none;
}
.skip:focus{ left: var(--gutter); top: .5rem; }

/* --------------------------------------------------------------------------
   Imagery
   -------------------------------------------------------------------------- */

img{ border-style: none; }

.ph{ position: relative; overflow: hidden; background: var(--ink-3); }
.ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ph > svg{ width: 100%; height: 100%; display: block; }
.ph--16x9{ aspect-ratio: 16 / 9; }
.ph--4x5{ aspect-ratio: 4 / 5; }
.ph--21x9{ aspect-ratio: 21 / 9; }
@media (max-width: 640px){ .ph--21x9{ aspect-ratio: 16 / 10; } }

/* Cinematic hero */
.hero--plate{
  position: relative;
  min-height: min(74vh, 720px);
  display: flex; align-items: flex-end;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__bg{ position: absolute; inset: 0; z-index: 0; }
.hero__bg img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,15,18,.94) 0%, rgba(11,15,18,.80) 38%, rgba(11,15,18,.42) 68%, rgba(11,15,18,.34) 100%),
    linear-gradient(to top, rgba(11,15,18,.96) 0%, rgba(11,15,18,.30) 42%, rgba(11,15,18,.34) 100%);
}
.hero--plate > .wrap{ position: relative; z-index: 1; width: 100%; }
.hero--plate h1{ max-width: 17ch; }
.hero--plate .hero__sub{ max-width: 48ch; }

/* Market ribbon — the price sheet as a strip under the hero */
.ribbon{ border-bottom: 1px solid var(--rule-soft); background: var(--ink-2); }
.ribbon__in{ display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: thin; }
.ribbon__lead{
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  padding: .9rem clamp(1rem, 2vw, 1.5rem) .9rem 0;
  border-right: 1px solid var(--rule); flex: none;
}
.ribbon__lead b{ font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.ribbon__lead span{ font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.ribbon__item{
  display: flex; flex-direction: column; gap: .28rem; justify-content: center;
  padding: .9rem clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--rule-soft); flex: none; min-width: 8.5rem;
}
.ribbon__item:last-child{ border-right: 0; }
.ribbon__name{ display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--bone-dim); white-space: nowrap; }
.ribbon__px{ display: flex; align-items: baseline; gap: .5rem; }
.ribbon__px b{ font-family: var(--mono); font-size: .95rem; color: var(--bone); font-weight: 500; font-variant-numeric: tabular-nums; }
.ribbon__px span{ font-family: var(--mono); font-size: .7rem; font-variant-numeric: tabular-nums; }

/* Full-bleed image plate between sections */
.plate{ position: relative; border-block: 1px solid var(--rule-soft); }
.plate__img{ position: relative; }
.plate__img::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,15,18,.92) 0%, rgba(11,15,18,.25) 55%, rgba(11,15,18,.15) 100%);
}
.plate__cap{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.plate__cap h2{ font-size: var(--step-2); max-width: 22ch; }
.plate__cap p{ margin-top: .75rem; color: var(--bone-dim); font-size: .95rem; max-width: 52ch; }

/* Image beside prose */
.duo{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.duo--rev > .duo__media{ order: 2; }
.duo__media{ border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
/* Media fills the row rather than floating in dead space beside taller copy */
.duo__media > .ph{ height: 100%; aspect-ratio: auto; min-height: 22rem; }
@media (max-width: 860px){
  .duo{ grid-template-columns: 1fr; }
  .duo--rev > .duo__media{ order: 0; }
  .duo__media > .ph{ aspect-ratio: 16 / 9; min-height: 0; height: auto; }
}

/* Card media — modifier only, so plain .cell keeps its own padding */
.cell--media{ padding: 0; overflow: hidden; gap: 0; }
.cell--media .cell__media{ border-bottom: 1px solid var(--rule-soft); }
.cell--media .cell__media img{ transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.cell--media:hover .cell__media img{ transform: scale(1.035); }
.cell--media .cell__body{
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  display: flex; flex-direction: column; gap: .8rem;
}
.cell__eyebrow{ display: flex; align-items: center; gap: .6rem; }
.cell__eyebrow .cell__icon{ margin: 0; color: var(--brass); line-height: 0; }
.cell__eyebrow .cell__icon svg{ width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce){ .cell--media:hover .cell__media img{ transform: none; } }

/* Portrait gallery */
.gallery{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
@media (max-width: 820px){ .gallery{ grid-template-columns: 1fr 1fr; } .gallery > :last-child{ grid-column: 1 / -1; } }
@media (max-width: 520px){ .gallery{ grid-template-columns: 1fr; } .gallery > :last-child{ grid-column: auto; } }
.gallery figure{ margin: 0; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--ink-2); }
.gallery figcaption{ padding: .8rem 1rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; color: var(--faint); line-height: 1.5; }

/* Thesis columns with a photo above the argument */
.thesis__col--media{ padding: 0; gap: 0; }
.thesis__col--media .thesis__body{
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.thesis__col--media .thesis__media{ border-bottom: 1px solid var(--rule-soft); }

/* Brand marks — Acrementum lockup, Nautical Neuron crest */
.lockup{ display: block; }
.lockup img{ height: auto; width: auto; max-width: 100%; }
.lockup--acrementum img{ max-height: 3.1rem; }
@media (max-width: 560px){ .lockup--acrementum img{ max-height: 2.4rem; } }

.entities{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
@media (max-width: 640px){ .entities{ grid-template-columns: 1fr; } }
.entity{
  background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.15rem;
}
/* Fixed mark height so both columns' copy starts on the same baseline */
.entity__mark{ display: flex; align-items: center; height: 5.4rem; }
.entity__mark img{ width: auto; }
.entity__mark--acrementum img{ max-height: 2.7rem; max-width: 100%; }
.entity__mark--crest img{ max-height: 5.4rem; opacity: .95; }
.entity h3{ color: var(--bone); }
.entity p{ color: var(--muted); font-size: .92rem; line-height: 1.62; }
.entity__k{ font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }

/* A face beside the ask */
.cta--face .cta__in{ grid-template-columns: auto minmax(0,1fr) auto; }
@media (max-width: 980px){ .cta--face .cta__in{ grid-template-columns: auto minmax(0,1fr); } }
@media (max-width: 640px){ .cta--face .cta__in{ grid-template-columns: 1fr; } }
.cta__face{
  width: clamp(6rem, 10vw, 9rem); aspect-ratio: 1;
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; flex: none;
}
.cta__face img{ width: 100%; height: 100%; object-fit: cover; }

/* Imagery disclosure */
.imgnote{
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em;
  color: var(--faint); line-height: 1.6; max-width: 80ch;
}

/* --------------------------------------------------------------------------
   Figures — authored SVG carries the analytical weight on this site
   -------------------------------------------------------------------------- */

.figure--plate{ background: var(--ink-2); }
.figure__body--flush{ padding: 0; }
.figure__body--flush svg{ width: 100%; height: auto; }

/* Full-bleed map band: the site's signature asset */
.mapband{ padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-soft); }
.mapband__frame{
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border-radius: 2px;
  overflow: hidden;
}
.mapband__hd{
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between;
}
.mapband__hd h2{ font-size: var(--step-2); }
.mapband__hd p{ font-size: .84rem; color: var(--muted); }
.mapband__body{ padding: clamp(.75rem, 2vw, 1.5rem); overflow-x: auto; }
.mapband__body svg{ min-width: 680px; }

/* Region tokens — the validated categorical set */
.r-pune{ color: #C99A4E; }
.r-mum{ color: #8E9BE8; }
.r-tm{ color: #5BBF8F; }
.dot{ width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.region{
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
td .region{ font-size: .6rem; }

/* Icons in the vertical cells */
.cell__icon{ color: var(--brass); display: block; margin-bottom: .15rem; }
.cell__icon svg{ display: block; }

/* Two theses, side by side */
.thesis{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
@media (max-width: 780px){ .thesis{ grid-template-columns: 1fr; } }
.thesis__col{ background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; }
.thesis__tag{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
}
.thesis__col h3{ font-size: var(--step-2); }
.thesis__figs{ display: flex; flex-wrap: wrap; gap: .9rem 1.75rem; padding-block: .35rem; }
.thesis__fig{ display: flex; flex-direction: column; gap: .2rem; }
.thesis__fig b{ font-family: var(--mono); font-size: 1.35rem; color: var(--bone); font-weight: 500; font-variant-numeric: tabular-nums; }
.thesis__fig span{ font-family: var(--mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); }
.thesis__col p{ color: var(--muted); font-size: .93rem; line-height: 1.62; }
.thesis__col p strong{ color: var(--bone-dim); font-weight: 500; }

/* Coverage tiers */
.tierlist{ display: flex; flex-direction: column; gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.tier{ background: var(--ink); padding: clamp(1.25rem, 2.5vw, 1.85rem) 0; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0,1fr); gap: clamp(1rem,3vw,2.5rem); align-items: start; }
@media (max-width: 760px){ .tier{ grid-template-columns: 1fr; gap: .75rem; } }
.tier__k{ display: flex; flex-direction: column; gap: .4rem; }
.tier__k b{ font-family: var(--display); font-size: var(--step-1); color: var(--bone); font-weight: 400; font-variation-settings: "WONK" 1; }
.tier__places{ display: flex; flex-wrap: wrap; gap: .5rem; }
.tier__place{
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rule); background: var(--ink-2);
  padding: .4rem .7rem; border-radius: 2px;
  font-size: .82rem; color: var(--bone-dim);
}
.tier p{ color: var(--muted); font-size: .92rem; line-height: 1.6; margin-top: .6rem; }

.badge{
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: .35rem .6rem; border-radius: 2px;
}
.badge b{ color: var(--brass); font-weight: 500; }

/* ==========================================================================
   SEO release — breadcrumbs, evidence blocks, accountability, calculator
   Added with the directory-route migration. Everything here is token-driven
   like the rest of the sheet: change --brass and it all follows.
   ========================================================================== */

/* Breadcrumbs — a visible trail, matched by BreadcrumbList structured data.
   Structured data must describe what a reader can actually see. */
.crumbs{ border-bottom: 1px solid var(--rule-soft); background: var(--ink-2); }
.crumbs .wrap{
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  padding-block: .8rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
}
/* Breadcrumb links measured 30x19 — under the 24px minimum on the short
   axis. Vertical padding rather than a min-height, so the hit area grows
   without the row getting taller than its own line box. */
.crumbs a{ color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent;
  display: inline-block; padding-block: .28rem; }
/* Hover feedback should ease in, not snap — the site uses .18s everywhere. */
.crumbs a{ transition: color .18s ease, border-color .18s ease; }
.crumbs a:hover{ color: var(--bone-dim); border-bottom-color: var(--rule-bright); }
.crumbs i{ color: var(--faint); font-style: normal; }
.crumbs [aria-current="page"]{ color: var(--brass); }

/* The one-line answer at the top of a guide. Playbook: give the important
   question a direct answer first, then the evidence. */
.verdict{
  margin-top: 1.75rem; max-width: var(--measure);
  border-left: 2px solid var(--brass); padding: .9rem 0 .9rem 1.25rem;
  color: var(--bone-dim); font-size: var(--step-0); line-height: 1.6;
}
.verdict strong{ color: var(--bone); font-weight: 500; }
.verdict em{ color: var(--brass-hi); font-style: normal; }

.meta{
  margin-top: 1.5rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
.meta a{ color: var(--muted); }

/* An aside that qualifies the data above it. Used a lot, on purpose. */
.note{
  margin-top: 1.5rem; max-width: 78ch;
  color: var(--muted); font-size: .88rem; line-height: 1.66;
  border-top: 1px solid var(--rule-soft); padding-top: 1rem;
}
.note strong{ color: var(--bone-dim); font-weight: 500; }
.note em{ color: var(--bone-dim); font-style: italic; }

/* The coverage-depth statement on the Mumbai hub. Deliberately prominent:
   under-claiming is the point of the block, so it should not read as
   small print. */
.disclosure{
  border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  background: var(--ink-2); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.disclosure h2{ font-size: var(--step-1); margin-bottom: .9rem; }
.disclosure p{ color: var(--muted); font-size: .93rem; line-height: 1.68; max-width: 82ch; }
.disclosure p + p{ margin-top: .8rem; }
.disclosure strong{ color: var(--bone); font-weight: 500; }

/* Accountability block: author, sources, review trigger, disclosures. */
.byline__h{ font-size: var(--step-1); margin-bottom: 1.4rem; }
.byline dl{ display: flex; flex-direction: column; gap: 1px; background: var(--rule-soft); border-block: 1px solid var(--rule-soft); }
.byline dl > div{
  background: var(--ink); padding: 1rem 0;
  display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(.75rem, 3vw, 2rem);
}
@media (max-width: 760px){ .byline dl > div{ grid-template-columns: 1fr; gap: .3rem; } }
.byline dt{
  font-family: var(--mono); font-size: .66rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint); padding-top: .18rem;
}
.byline dd{ margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.62; }
.byline dd a{ color: var(--bone-dim); }

/* Statutory quotation. Distinct from .quote, which is a testimonial card. */
.statute{
  margin: 0; border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  background: var(--ink-2); padding: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 80ch;
}
.statute p{
  font-family: var(--display); font-size: var(--step-1); line-height: 1.55;
  color: var(--bone); font-weight: 300; font-variation-settings: "WONK" 0;
}
.statute strong{ color: var(--brass-hi); font-weight: 400; }
.statute footer{
  margin-top: 1.1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}

.formula{
  font-family: var(--mono); font-size: .84rem; color: var(--brass-hi);
  background: var(--ink-3); border: 1px solid var(--rule);
  padding: .7rem .85rem; border-radius: 2px; margin: .35rem 0 .9rem;
  overflow-x: auto;
}

/* A card that states an absence rather than an offer. */
.cell--quiet{ opacity: .78; }
.cell--quiet:hover{ opacity: 1; }

.muted{ color: var(--muted); }
table.data td.muted{ color: var(--faint); font-size: .84rem; }
table.data td.up{ color: var(--up); font-family: var(--mono); }
table.data td.down{ color: var(--down); font-family: var(--mono); }
table.data th[scope="row"]{ color: var(--bone); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .92rem; }

/* ------------------------------------------------------------ calculator -- */
.calc{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px){ .calc{ grid-template-columns: 1fr; } }

.calc__inputs{ display: flex; flex-direction: column; gap: 1.75rem; }
.calc fieldset{ border: 0; border-top: 1px solid var(--rule); padding: 0; margin: 0; }
.calc legend{
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass); padding-right: .8rem;
}
.calc fieldset{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem 1.5rem; padding-top: 1.1rem; }
.calc legend{ grid-column: 1 / -1; }
.calc label{ display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; color: var(--bone-dim); }
.calc label span{ font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.calc input{
  background: var(--ink-2); border: 1px solid var(--rule); color: var(--bone);
  font-family: var(--mono); font-size: .95rem; padding: .6rem .7rem; border-radius: 2px;
  width: 100%; -moz-appearance: textfield;
}
.calc input:focus-visible{ outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass-lo); }

.calc__out{ border: 1px solid var(--rule); background: var(--ink-2); position: sticky; top: 5.5rem; }
@media (max-width: 900px){ .calc__out{ position: static; } }
.calc__pair{ display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.calc__metric{ padding: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.calc__metric + .calc__metric{ border-left: 1px solid var(--rule); }
.calc__metric--lead{ background: var(--brass-wash); }
.calc__k{ font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.calc__v{ font-family: var(--mono); font-size: 1.7rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.calc__metric--lead .calc__v{ color: var(--brass-hi); }
.calc__note{ font-size: .68rem; color: var(--faint); line-height: 1.4; }
.calc__rows{ margin: 0; padding: .35rem 1.1rem; display: flex; flex-direction: column; }
.calc__rows > div{ display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); }
.calc__rows > div:last-child{ border-bottom: 0; }
.calc__rows dt{ font-size: .78rem; color: var(--muted); }
.calc__rows dd{ margin: 0; font-family: var(--mono); font-size: .82rem; color: var(--bone-dim); font-variant-numeric: tabular-nums; text-align: right; }
.calc__ft{ padding: 1.1rem; border-top: 1px solid var(--rule); }
.calc__ft .btn{ width: 100%; justify-content: center; }

/* Tier chips are links now that the city and locality pages exist. */
a.tier__place{ text-decoration: none; transition: border-color .18s ease, color .18s ease; }
a.tier__place:hover{ border-color: var(--brass-lo); color: var(--bone); }

/* ==========================================================================
   DEPTH & MOTION LAYER
   Everything below is presentational only — it moves and lights what is
   already in the HTML, and never gates content behind a script. Three rules
   held throughout:
     1. Only transform and opacity animate. No layout, no paint thrash.
     2. Every start state is also a valid resting state, so if JS never runs
        the page is complete and readable. No opacity:0 without a fallback.
     3. prefers-reduced-motion turns all of it off, at the bottom of the file.
   The `js` class is set on <html> by site.js before first paint.
   ========================================================================== */

/* ------------------------------------------------------ reveal on scroll -- */
/* Applied only under .js, so a no-JS reader sees finished, visible content. */
.js [data-reveal]{opacity:1;transform:none;}

/* A hairline that draws itself in as its section arrives. */
.js .head::before,
.js .opener::after{
  content: ""; display: block; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s cubic-bezier(.22,.61,.36,1) .1s;
  margin-bottom: 1.4rem; max-width: 5.5rem;
}
.js .opener::after{ margin-top: 2rem; margin-bottom: 0; }
.js .head.is-in::before,
.js .opener.is-in::after{ transform: scaleX(1); }

/* --------------------------------------------------------- scroll rail -- */
.readbar{
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
.readbar span{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi));
  transform: scaleX(0); transform-origin: left center;
}

/* ------------------------------------------------------------- hero 3d -- */
/* The plate becomes three planes at different depths: the photograph sits
   furthest back and drifts slowest, the copy nearest and drifts fastest.
   Pointer adds a couple of degrees of tilt — enough to read as depth,
   not enough to be a gimmick. */
.js .hero--plate{ perspective: 1400px; perspective-origin: 50% 40%; }
.js .hero--plate .hero__bg{
  transform: translate3d(0, var(--pY, 0px), 0) scale(var(--pS, 1.08))
             rotateX(var(--tX, 0deg)) rotateY(var(--tY, 0deg));
  transform-origin: 50% 45%;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.js .hero--plate > .wrap{
  transform: translate3d(0, var(--cY, 0px), 0)
             rotateX(calc(var(--tX, 0deg) * -0.45)) rotateY(calc(var(--tY, 0deg) * -0.45));
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* A soft brass horizon that only exists to give the plate a floor. */
.js .hero--plate::before{
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  height: 1px; background: linear-gradient(90deg, transparent, var(--brass-lo) 30%, var(--brass-lo) 70%, transparent);
  opacity: .7;
}

/* -------------------------------------------------------- parallax media -- */
/* The image is drawn taller than its frame and slides inside it. Because the
   frame keeps its aspect-ratio box, nothing shifts — CLS stays at zero. */
.js [data-parallax]{ overflow: hidden; }
.js [data-parallax] img{
  transform: translate3d(0, var(--mY, 0px), 0) scale(1.16);
  will-change: transform;
}

/* ------------------------------------------------------------ tilt cards -- */
.js .cell, .js .tier, .js .thesis__col{
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s ease, background-color .45s ease;
}
.js [data-tilt]{ perspective: 900px; }
.js [data-tilt] > .cell:hover,
.js [data-tilt] > .tier:hover{
  transform: translate3d(0,0,26px) rotateX(var(--rX, 0deg)) rotateY(var(--rY, 0deg));
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.85),
              0 0 0 1px var(--rule-bright) inset;
  background-color: var(--ink-2);
  z-index: 2;
}
/* A specular sweep that follows the cursor across the card face. */
.js [data-tilt] > .cell{ position: relative; }
.js [data-tilt] > .cell::before{
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(38rem 38rem at var(--gx, 50%) var(--gy, 50%),
              var(--brass-wash), transparent 55%);
}
.js [data-tilt] > .cell:hover::before{ opacity: 1; }

/* ----------------------------------------------------------- the corridor -- */
/* Tall track, sticky stage. The five chapters are a plain ordered list, so
   with no JS they read as a stack under the map — which is why the fallback
   needs no special case. */
.cscene{ border-block: 1px solid var(--rule-soft); background: var(--ink-2); }
.cscene__track{ position: relative; }
.js .cscene__track{ height: 460vh; }

.cscene__stage{ padding-block: clamp(2rem, 5vw, 3.5rem); }
.js .cscene__stage{
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(4.5rem, 9vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}

.cscene__viewport{ position: relative; }
.js .cscene__viewport{
  height: 100%; display: flex; align-items: center;
  perspective: 1200px; perspective-origin: 50% 50%;
  /* The camera pushes to nearly 2x, so the scene has to be clipped to its
     own column — without this the map slides under the chapter copy. */
  overflow: hidden;
  border-inline: 1px solid var(--rule-soft);
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(185,143,82,.05), transparent 60%),
    var(--ink);
}
/* Corner ticks: the frame reads as an instrument, not a cropped picture. */
.js .cscene__viewport::before,
.js .cscene__viewport::after{
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 3;
  border: 1px solid var(--brass-lo); pointer-events: none; opacity: .8;
}
.js .cscene__viewport::before{ top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.js .cscene__viewport::after{ bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cscene__scene{ width: 100%; transform-origin: 50% 50%; }
.js .cscene__scene{
  transform-style: preserve-3d;
  transform: translate3d(var(--camX, 0px), var(--camY, 0px), 0) scale(var(--camS, 1))
             rotateY(var(--camRY, 0deg)) rotateX(var(--camRX, 0deg));
  transition: transform .55s cubic-bezier(.3,.7,.3,1);
  will-change: transform;
}
.cscene__svg{ width: 100%; height: auto; max-height: 82vh; }

/* Layers separate in Z. depth 0 sits back, depth 4 sits forward. */
.js .cscene__layer{
  transform: translate3d(calc(var(--depth) * var(--pxX, 0px)),
                         calc(var(--depth) * var(--pxY, 0px)), 0);
  transition: transform .6s cubic-bezier(.3,.7,.3,1);
}
/* Non-active regions recede rather than vanish — the corridor must stay
   legible as a whole even while one part of it is being discussed. */
.js .cscene__ch{ opacity: .28; transition: opacity .6s ease; }
.js .cscene[data-active="all"] .cscene__ch{ opacity: 1; }
.js .cscene__ch.is-lit{ opacity: 1; }

.cscene__pulse{ opacity: 0; }
.js .is-lit .cscene__pulse{ opacity: .9; animation: cs-run 2.6s linear infinite; }
@keyframes cs-run{ from{ stroke-dashoffset: 320; } to{ stroke-dashoffset: 0; } }

.cscene__panels{ position: relative; display: flex; align-items: center; gap: 1.5rem; }
/* A scrim so the chapter copy is legible whatever the camera is doing
   behind it — the map is decoration here, the words are not. Bounded insets
   and a min-width guard, because on the stacked mobile layout the stage is
   overflow:visible and a bleeding scrim would widen the page. */
@media (min-width: 901px){
  .js .cscene__panels::before{
    content: ""; position: absolute; inset: -2.5rem -2.5rem -2.5rem -3rem;
    background: linear-gradient(90deg, transparent, var(--ink-2) 3.5rem);
    pointer-events: none; z-index: 0;
  }
}
.js .cscene__panels > *{ position: relative; z-index: 1; }
.cscene__chapters{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.5rem);
}
.js .cscene__chapters{ display: grid; gap: 0; }
.js .cscene__chapter{
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transform: translate3d(0, 26px, 0);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1), visibility .5s;
}
.js .cscene__chapter.is-on{ opacity: 1; visibility: visible; transform: none; }

.cscene__k{
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
}
.cscene__chapter h3{
  font-family: var(--display); font-size: var(--step-2); font-weight: 300;
  color: var(--bone); margin-top: .9rem; max-width: 20ch;
  font-variation-settings: "WONK" 1;
}
.cscene__chapter p{
  margin-top: 1rem; color: var(--muted); font-size: .95rem;
  line-height: 1.68; max-width: 44ch;
}
.cscene__chapter p b{ color: var(--brass-hi); font-weight: 500; }
.cscene__chapter .arrow-link{ margin-top: 1.25rem; display: inline-block; }

.cscene__rail{ display: none; }
.js .cscene__rail{
  display: block; width: 2px; align-self: stretch; margin-block: 14%;
  background: var(--rule); position: relative; flex: none; order: -1;
}
.js .cscene__rail span{
  position: absolute; inset: 0 0 auto 0; height: 20%;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass-lo));
  transform: translateY(var(--railY, 0%));
  transition: transform .55s cubic-bezier(.3,.7,.3,1);
}

/* Below the two-column breakpoint the camera work stops being legible, so
   the stage un-sticks and the chapters go back to being a readable stack. */
@media (max-width: 900px){
  .js .cscene__track{ height: auto; }
  .js .cscene__stage{
    position: static; height: auto; grid-template-columns: 1fr;
    overflow: visible; padding-block: clamp(2rem, 6vw, 3rem);
  }
  .js .cscene__scene{ transform: none; }
  .js .cscene__layer{ transform: none; }
  .js .cscene__ch{ opacity: 1; }
  .js .cscene__chapters{ display: flex; gap: 2.25rem; }
  .js .cscene__chapter{
    opacity: 1; visibility: visible; transform: none;
    border-left: 2px solid var(--rule); padding-left: 1.25rem;
  }
  .js .cscene__chapter.is-on{ border-left-color: var(--brass); }
  .js .cscene__rail{ display: none; }
  .cscene__svg{ max-height: none; }
}

/* --------------------------------------------------------- counting nums -- */
.num[data-count]{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- figure depth -- */
.js .figure--plate{
  transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease;
}
.js .figure--plate.is-in{ box-shadow: 0 30px 70px -40px rgba(0,0,0,.9); }

/* ======================================================================
   FIGURE, TABLE AND CHROME MOTION — second pass
   The site argues with data, so the data is what should move. Everything
   here animates only after its own figure enters view, and every element's
   resting state is its finished state.
   ====================================================================== */

/* Figures start collapsed — a bar at scaleX(0) is a blank chart — so each
   mark carries its own CSS failsafe that resolves it to the finished state
   after 4s whether or not the observer ever arrived. The animation targets
   the marks directly, because no stylesheet can add the .is-in class the
   normal path depends on. */
.js .fx:not(.is-in) .fx-bar{ animation: ff-scale-x 1ms linear 4s forwards; }
.js .fx:not(.is-in) .fx-wipe,
.js .fx:not(.is-in) .fx-rule{ animation: ff-scale-y 1ms linear 4s forwards; }
.js .fx:not(.is-in) .fx-dot{ animation: ff-pop 1ms linear 4s forwards; }
.js .fx:not(.is-in) .fx-late,
.js .fx:not(.is-in) .fx-area{ animation: ff-fade 1ms linear 4s forwards; }
.js .fx:not(.is-in) .fx-draw,
.js .fx:not(.is-in) .fx-line{ animation: ff-draw 1ms linear 4s forwards; }
@keyframes ff-scale-x{ to{ transform: scaleX(1); } }
@keyframes ff-scale-y{ to{ transform: scaleY(1); } }
@keyframes ff-pop{ to{ transform: scale(1); opacity: 1; } }
@keyframes ff-fade{ to{ opacity: 1; } }
@keyframes ff-draw{ to{ stroke-dashoffset: 0; } }
/* Table rows start faded; same guarantee. */
.js [data-lens]:not(.is-in) tbody tr{ animation: ff-row 1ms linear 4s forwards; }
@keyframes ff-row{ to{ opacity: 1; transform: none; } }

/* ---------------------------------------------------------- svg figures -- */
/* transform-box: fill-box lets an SVG child scale about its own edge rather
   than the viewBox origin — without it every bar grows from the top left. */
.js .fx .fx-bar{
  transform: scaleX(0); transform-box: fill-box; transform-origin: left center;
  transition: transform .85s cubic-bezier(.16,.84,.34,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .fx.is-in .fx-bar{ transform: scaleX(1); }

.js .fx .fx-wipe{
  transform: scaleY(0); transform-box: fill-box; transform-origin: top center;
  transition: transform .7s cubic-bezier(.16,.84,.34,1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.js .fx.is-in .fx-wipe{ transform: scaleY(1); }

.js .fx .fx-dot{
  transform: scale(0); transform-box: fill-box; transform-origin: center;
  opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  transition-delay: calc(var(--i, 0) * 85ms + 120ms);
}
.js .fx.is-in .fx-dot{ transform: scale(1); opacity: 1; }

.js .fx .fx-late{
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: calc(var(--i, 0) * 70ms + 460ms);
}
.js .fx.is-in .fx-late{ opacity: 1; }

/* A stroked path drawing itself. --len is the path length, set where the
   figure is authored, so no JS measurement is needed at runtime. */
.js .fx .fx-draw{
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1) .2s;
}
.js .fx.is-in .fx-draw{ stroke-dashoffset: 0; }

/* --------------------------------------------------- the Kharadi chart -- */
/* The line draws left to right; the shaded area fades up behind it; the
   catalyst rules drop from the line to the axis; the dots land last, so the
   chart assembles in the order the argument is made. */
.js .fx .fx-line{
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.1s cubic-bezier(.33,.75,.35,1) .15s;
}
.js .fx.is-in .fx-line{ stroke-dashoffset: 0; }

.js .fx .fx-area{ opacity: 0; transition: opacity 1.1s ease .8s; }
.js .fx.is-in .fx-area{ opacity: 1; }

.js .fx .fx-rule{
  transform: scaleY(0); transform-box: fill-box; transform-origin: top center;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 200ms + 900ms);
}
.js .fx.is-in .fx-rule{ transform: scaleY(1); }

/* ----------------------------------------------------- the Market Lens -- */
.js [data-lens] tbody tr{
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-lens].is-in tbody tr{ opacity: 1; transform: none; }
/* Once a sort has run, rows are positioned by the FLIP script and must not
   carry the entry transition any more, or the two fight each other. */
.js [data-lens].is-sorted tbody tr{ opacity: 1; transform: none; transition-delay: 0s; }
[data-lens] th.sortable{ position: relative; }
[data-lens] th.sortable::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
[data-lens] th.sortable:hover::before,
[data-lens] th[aria-sort]::before{ transform: scaleX(1); }

/* --------------------------------------------------------- live ticker -- */
/* Two identical runs translating -50% loop with no seam and no per-frame JS.
   Paused on hover and on keyboard focus, so a reader can actually read it. */
.ribbon__win{ overflow: hidden; flex: 1 1 auto; min-width: 0; }
.ribbon__track{ display: flex; width: max-content; }
.ribbon__run{ display: flex; }
.js .ribbon__track{ animation: ticker 44s linear infinite; }
.ribbon:hover .ribbon__track,
.ribbon__win:focus-within .ribbon__track{ animation-play-state: paused; }
@keyframes ticker{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
/* Fade the ends so items enter and leave rather than being chopped. */
.js .ribbon__win{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* ------------------------------------------------------------ masthead -- */
.masthead{
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              background-color .45s ease, box-shadow .45s ease,
              padding-block .45s ease, border-color .45s ease;
}
.js .masthead.is-condensed{
  background: rgba(11, 15, 18, .88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule);
  box-shadow: 0 12px 34px -26px rgba(0,0,0,.95);
}
.js .masthead.is-condensed .masthead__in{ padding-block: .55rem; }
.masthead__in{ transition: padding-block .45s cubic-bezier(.22,.61,.36,1); }
.js .masthead.is-condensed .wordmark__name{
  opacity: 1; max-width: 22rem; transform: none;
}
.wordmark__name{
  transition: opacity .35s ease, max-width .45s ease, transform .45s ease;
  max-width: 22rem; white-space: nowrap; overflow: hidden;
}
.js .masthead.is-away{ transform: none; }

/* ------------------------------------------------------- score verdict -- */
/* The card is banded by result so the colour states the verdict before the
   sentence does. Bands are the site's existing semantic tokens, not new hues. */
.score{ transition: border-color .5s ease, box-shadow .5s ease; }
.score__fill{ transition: width .6s cubic-bezier(.22,.61,.36,1), background-color .5s ease; }
.score[data-band="clear"]{ border-color: color-mix(in srgb, var(--up) 55%, var(--rule)); }
.score[data-band="clear"] .score__fill{ background: var(--up); }
.score[data-band="conditional"] .score__fill{ background: var(--brass-hi); }
.score[data-band="risk"] .score__fill{ background: var(--brass); }
.score[data-band="stop"] .score__fill{ background: var(--down); }
.score__n{ transition: color .5s ease; }
.score[data-band="clear"] .score__n{ color: var(--up); }
.score[data-band="stop"] .score__n{ color: var(--down); }

/* The tick draws itself when a check is made. */
.check__t{ position: relative; }
.check input[type="checkbox"]{ transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.check input[type="checkbox"]:checked{ transform: scale(1.12); }
.check input[type="checkbox"]:checked + .check__t{ color: var(--bone); }
.check__t{ transition: color .3s ease; }

/* ------------------------------------------------------- image reveals -- */
/* DELIBERATELY NONE. An earlier version wiped photographs in behind a
   clip-path as they entered view. It looked good and it was wrong: the
   start state was invisible, so any page where the observer fired late —
   notably the hash-routed preview, where a page switches from display:none
   to visible — showed empty frames where the pictures should be. Images are
   content, and content never gets an entrance that can fail. The parallax
   drift below stays, because its failure state is simply "no drift". */

/* -------------------------------------------------- page transitions -- */
/* Cross-document view transitions where the browser has them; everywhere
   else this rule is simply ignored and navigation is a normal page load. */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vt-out .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation: vt-in .34s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out{ to{ opacity: 0; } }
@keyframes vt-in{ from{ opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------ micro-interactions -- */
/* A light sweeps across the solid button once on hover. */
.btn--solid{ position: relative; overflow: hidden; }
.btn--solid::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn--solid:hover::after{ transition: transform .75s cubic-bezier(.3,.7,.3,1); transform: translateX(120%); }

.arrow-link{ display: inline-block; }
.arrow-link{ transition: color .25s ease; }
.js .arrow-link:hover{ color: var(--brass-hi); }

/* The emphasised word in a pull-quote gets its rule drawn under it. */
.statement em{ position: relative; }
.js .statement em::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  transition: transform .8s cubic-bezier(.22,.61,.36,1) .35s;
}
.js [data-reveal].is-in .statement em::after,
.js .statement.is-in em::after{ transform: scaleX(1); }

/* The numbered sequence gets a spine that fills as the reader descends it. */
.seq{ position: relative; }
.js .seq::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(var(--brass), var(--brass));
  transform: scaleY(var(--seqp, 0)); transform-origin: top center;
  transition: transform .3s linear;
}

/* ------------------------------------------------------- reduced motion -- */
/* One block, at the end, so it wins. Everything above resolves to its
   finished state: visible, untransformed, static. */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .head::before, .js .opener::after{ transform: scaleX(1) !important; transition: none !important; }
  .js .hero--plate .hero__bg,
  .js .hero--plate > .wrap,
  .js [data-parallax] img,
  .js .cscene__scene,
  .js .cscene__layer{ transform: none !important; transition: none !important; }
  .js [data-parallax] img{ transform: none !important; }
  .js [data-tilt] > .cell:hover, .js [data-tilt] > .tier:hover{ transform: none !important; }
  .js .cscene__track{ height: auto !important; }
  .js .cscene__stage{ position: static !important; height: auto !important; overflow: visible !important; }
  .js .cscene__chapters{ display: flex !important; gap: 2.25rem !important; }
  .js .cscene__chapter{ opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .js .cscene__ch{ opacity: 1 !important; }
  .js .is-lit .cscene__pulse{ animation: none !important; opacity: 0 !important; }
  .readbar span{ display: none; }

  /* Second-pass motion, all resolved to its finished state. Figures are
     drawn complete, the ticker stands still, the masthead never moves. */
  .js .fx .fx-bar, .js .fx .fx-wipe, .js .fx .fx-dot, .js .fx .fx-rule{
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
  .js .fx .fx-late, .js .fx .fx-area{ opacity: 1 !important; transition: none !important; }
  .js .fx .fx-draw, .js .fx .fx-line{
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important;
  }
  .js [data-lens] tbody tr{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .ribbon__track{ animation: none !important; }
  .js .ribbon__win{ -webkit-mask-image: none !important; mask-image: none !important; overflow-x: auto; }
  .js .masthead.is-away{ transform: none !important; }
  .js .masthead, .js .masthead__in, .wordmark__name{ transition: none !important; }
  .js .masthead.is-condensed .wordmark__name{ opacity: 1 !important; max-width: 22rem !important; transform: none !important; }
  .js .ph.fx, .js .plate__img.fx, .js .duo__media.fx, .js .cell__media.fx{
    clip-path: none !important; transition: none !important;
  }
  .btn--solid::after{ display: none !important; }
  .js .statement em::after{ transform: scaleX(1) !important; transition: none !important; }
  .js .seq::before{ transform: scaleY(1) !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation: none !important; }
}

/* The stage that the reader has reached comes forward; the rest wait. */
.js .seq__item{ transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.js .seq__item .seq__n{ transition: color .45s ease; }
.js .seq__item.is-on .seq__n{ color: var(--brass-hi); }
@media (prefers-reduced-motion: reduce){
  .js .seq__item{ transition: none !important; }
}

/* ---------------------------------------------------------- send status -- */
/* Confirmation and, when a browser blocks the new tab, the recovery link.
   An enquiry must never fail without the visitor being told. */
.handoff{
  margin-top: 1rem; padding: .8rem 1rem; border-radius: 2px;
  font-size: .88rem; line-height: 1.6;
  border: 1px solid var(--rule); background: var(--ink-2); color: var(--muted);
}
.handoff a{ color: var(--brass-hi); }
.handoff[data-ok="1"]{ border-left: 2px solid var(--up); }
.handoff[data-ok="0"]{ border-left: 2px solid var(--down); color: var(--bone-dim); }

/* Shown only when scripting is off, where the composer cannot run. */
.noscript{
  border: 1px solid var(--rule); border-left: 2px solid var(--brass);
  background: var(--ink-2); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
  color: var(--bone-dim); font-size: .92rem; line-height: 1.65;
}
.noscript a{ color: var(--brass-hi); }


/* --------------------------------------------------- audit corrections -- */
/* Footer navigation is a list, not inline prose, so the 24px minimum target
   applies. Was ~16px. */
.foot ul li a{ display: inline-block; padding-block: .32rem; }
.foot ul{ gap: .1rem; }
/* The six vertical icons repeat the heading beside them; hidden rather than
   labelled, so a screen reader is not told the same thing twice. */
.cell__icon svg{ pointer-events: none; }