/* IND-TECH CONSULTANTS — site stylesheet, draft 12 (20 Oct 2026)
   Colour: palette E from the colour review, with Vedant's primary #0F044C (draft 7) in place of the
   navy #304269 for the heroes, headings, navigation and text; white pages; pale blue for bands and
   cards; sky blue for lines and charts; one accent for actions only. The accent is peacock teal
   #0F8287, chosen by Vedant on 18 Oct 2026 (option J of the accent review, after amber gold in draft 8).
   Teal takes white labels (4.6:1) and stands on both the indigo (4.0:1) and white (4.6:1), so buttons
   need no outline; focus rings stay indigo on light backgrounds and white on dark ones. Hover (draft 9,
   Vedant's request): links and menu items show a soft teal highlight instead of an underline.
   Home banner (draft 10, option D of the banner options): the turning word of the headline in light-teal
   italic, and the link in use in the same teal. The light teal (--accent-light) is the accent lightened
   for text on the indigo (same hue and chroma, 8.5:1); it is used only there.
   Experience map (draft 11): Europe drawn larger in its own panel; the five countries in three tints of the map
   blue so that neighbours never share one.
   Industries (draft 12, Vedant's request): bigger icons that move while pointed at or tapped (the gear turns, the car
   drives, the crane sways, the grain bends in the wind, the chip pulses), each opening a text box with what we have
   worked on; the static list under the icons is gone. With less motion the boxes still open, without movement.
   The primary keeps its old variable name, --navy, so that every rule picks up the new primary.
   Type: T6, fonts already on every device: Palatino or Georgia for headings, the system sans for text.
   No web fonts, no third-party requests. */

:root {
  --navy: #0F044C;
  --navy-deep: #0A0335;
  --sky: #91BED4;
  --pale: #D9E8F5;
  --tint: #F3F7FB;
  --white: #FFFFFF;
  --accent: #0F8287;
  --accent-deep: #0D6D71;
  --on-accent: #FFFFFF;
  --accent-light: #5BBFC4;
  --ink: var(--navy);
  --ink-soft: #4B4379;
  --grey: #635C8B;
  --line: #CFDDEA;
  --line-strong: #91BED4;
  --on-navy: #D9E8F5;
  --on-navy-soft: #B9CCE0;
  --map-active: #5D86B0;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --measure: 66ch;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
/* Hover: a soft teal highlight instead of an underline; pale on light backgrounds, deeper on the indigo.
   A text link's own underline fades while the highlight shows. Buttons, cards and icons keep their own hover. */
:root { --hl: rgba(15, 130, 135, .14); }
.hero, .page-hero, .home-hero, .band, .firsts, .site-footer, .tagband { --hl: rgba(15, 130, 135, .62); }
:where(a) { transition: background-color .15s ease, box-shadow .15s ease, text-decoration-color .15s ease; }
@media (hover: hover) {
  :where(a):hover { text-decoration-color: transparent; background-color: var(--hl); box-shadow: 0 0 0 .2em var(--hl); border-radius: .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.btn:hover, .brand:hover, .skip:hover, .sht a:hover, .hh-keys a:hover { box-shadow: none; }
.brand:hover, .skip:hover, .sht a:hover, .hh-keys a:hover { background-color: transparent; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.hero :focus-visible, .page-hero :focus-visible, .band :focus-visible, .site-footer :focus-visible, .home-hero :focus-visible, .tagband :focus-visible { outline-color: var(--white); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.3; }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; line-height: 1.4; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.3em; max-width: var(--measure); }
li { margin-bottom: .45em; }
strong { font-weight: 600; }
.lede { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 55ch; }
.small { font-size: .875rem; line-height: 1.45; color: var(--grey); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--white); padding: .6em 1em; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 88px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 54px; width: auto; }
.nav-toggle { display: none; font-family: var(--sans); font-size: 1rem; font-weight: 600; min-height: 48px; padding: 0 1.1em; background: none; border: 1px solid var(--navy); border-radius: var(--radius); color: var(--navy); cursor: pointer; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem 1.35rem; flex-wrap: wrap; align-items: center; }
.site-nav li { margin: 0; }
.site-nav a { font-family: var(--sans); font-size: .95rem; font-weight: 600; white-space: nowrap; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; border-bottom: 2px solid transparent; position: relative; z-index: 0; }
.site-nav a::before { content: ""; position: absolute; z-index: -1; left: -.6rem; right: -.6rem; top: .55rem; bottom: .55rem; border-radius: 999px; background: var(--hl); opacity: 0; transition: opacity .15s ease; }
.site-nav a:hover { color: var(--navy); background-color: transparent; }
.site-nav a:not([aria-current]):hover { box-shadow: none; }
@media (hover: hover) { .site-nav a:hover::before { opacity: 1; } }
.site-nav a.nav-cta::before { content: none; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.site-nav a.nav-cta { background: var(--accent); color: var(--on-accent); padding: 0 1.15em; border-radius: var(--radius); border-bottom: 0; min-height: 44px; }
.site-nav a.nav-cta:hover { background: var(--accent-deep); color: var(--on-accent); }
.site-nav a.nav-cta[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--navy); }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .site-header .wrap { flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; min-height: 0; }
  .brand img { height: 44px; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding: .4rem 0 1rem; }
  .site-nav a { display: flex; border-bottom: 1px solid var(--line); }
  .site-nav a::before { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--navy); padding-left: .8rem; }
  .site-nav a.nav-cta { justify-content: center; margin-top: .8rem; min-height: 48px; }
}

/* ---------- Heroes: navy bands ---------- */
.hero, .page-hero { background-color: var(--navy); color: var(--on-navy); }
.hero { padding: 4.5rem 0 4rem; background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: center; }
.hero h1, .page-hero h1 { color: var(--white); }
.hero h1 { margin-bottom: .6em; max-width: 16ch; }
.hero .lede, .page-hero .lede { color: var(--on-navy); }
.hero .lede { max-width: 52ch; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.page-hero { padding: 3.75rem 0 3.6rem; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { max-width: 58ch; margin-bottom: 0; }
.page-hero a { color: var(--white); }
.page-hero.has-visual .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4rem; align-items: center; }
.page-hero.wide-visual .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
@media (max-width: 900px) {
  .hero .wrap, .page-hero.has-visual .wrap, .page-hero.wide-visual .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 3rem 0 2.75rem; }
  .page-hero { padding: 2.75rem 0 2.75rem; }
}

/* Hero pictures and drawings (right half of the page heroes) */
.hero-visual { margin: 0; position: relative; width: 100%; max-width: 30rem; justify-self: end; }
.wide-visual .hero-visual { max-width: 37rem; }
.hero-visual .frame { position: relative; }
.hero-visual .frame::after { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(145,190,212,.45); pointer-events: none; }
.hero-visual .frame img { width: 100%; height: auto; }
.hero-visual figcaption { font-size: .85rem; line-height: 1.5; color: var(--on-navy-soft); margin-top: 1.2rem; max-width: 50ch; }
.hero-visual .titleblock { margin: 0; }
.hero-visual .titleblock td { font-size: .92rem; }
@media (max-width: 900px) {
  .hero-visual { justify-self: start; max-width: 34rem; }
  .hero-visual .frame.crop img { aspect-ratio: 16 / 10; object-fit: cover; }
}

.hv { display: block; width: 100%; height: auto; overflow: visible; }
.hv text { font-family: var(--sans); }
.hv .tx { fill: var(--on-navy); }
.hv .sb { fill: var(--on-navy-soft); }
.hv .lb { font-size: 15px; font-weight: 600; }
.hv .sm { font-size: 13px; }
.hv .sm2 { font-size: 11px; }
.hv .cap { letter-spacing: .14em; font-size: 11.5px; }
.hv .ln { fill: none; stroke: var(--sky); stroke-width: 1.5; }
.hv .dash { stroke-dasharray: 4 5; opacity: .75; }
.hv .dot-o { fill: none; stroke: var(--sky); stroke-width: 1.5; }
.hv .dot-m { fill: var(--sky); opacity: .8; }
.hv .dot-s { fill: var(--pale); }
.hv .dot-y { fill: var(--white); stroke: var(--accent); stroke-width: 3.5; }
.hv .chk { fill: none; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hv .stuck { fill: rgba(255,255,255,.07); }
.hv .cv { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hv .stuckline { stroke: var(--on-navy-soft); stroke-dasharray: 1 7; }
.hv .after { stroke-width: 3.5; }
.hv .mk { fill: var(--navy); stroke: var(--pale); stroke-width: 1.5; }
.hv .mkn { fill: var(--white); font-size: 12px; font-weight: 600; }
.hv .mkn.sm2 { font-size: 10.5px; }
.hv .area { fill: rgba(217,232,245,.18); stroke: var(--white); stroke-width: 2; }
.hv .bar { fill: var(--sky); }
.hv .goal { fill: var(--white); stroke: var(--accent); stroke-width: 3; }
@media (max-width: 600px) { .hv .lb { font-size: 16px; } .hv .sm { font-size: 14px; } }

/* The archive photograph on the Experience page, with a drawing-style balloon */
.archive .plate { position: relative; }
.archive .plate img { width: 100%; height: auto; }
.archive .balloon-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.balloon-layer .leader { stroke: var(--white); stroke-width: 3; fill: none; }
.balloon-layer .bl { fill: var(--white); stroke: var(--navy); stroke-width: 3; }
.balloon-layer .bln { fill: var(--navy); font: 600 34px var(--sans); }
.archive .plate-label { position: absolute; left: 0; bottom: 0; background: var(--navy); color: var(--on-navy); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; line-height: 1.4; }
.bl-inline { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; border-radius: 50%; border: 1.5px solid currentColor; font-size: .8em; font-weight: 600; margin-right: .45em; vertical-align: .05em; }

/* ---------- Title block: the engineering-drawing device that anchors the identity ---------- */
.titleblock { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--sans); font-size: .85rem; border: 2px solid var(--navy); background: var(--white); }
.titleblock col.k { width: 19%; } .titleblock col.v { width: 31%; }
.titleblock th, .titleblock td { border: 1px solid var(--line-strong); padding: .55em .75em; text-align: left; vertical-align: top; }
.titleblock th { font-weight: 400; color: var(--grey); }
.titleblock td { color: var(--navy); font-family: var(--serif); font-size: .97rem; overflow-wrap: anywhere; line-height: 1.45; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: .5em 1.4em; border-radius: var(--radius); text-decoration: none; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
.btn.secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn.secondary:hover { background: var(--tint); color: var(--navy); }
.hero .btn.secondary, .page-hero .btn.secondary, .band .btn.secondary, .home-hero .btn.secondary { color: var(--white); border-color: rgba(255,255,255,.75); }
.hero .btn.secondary:hover, .page-hero .btn.secondary:hover, .band .btn.secondary:hover, .home-hero .btn.secondary:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ---------- Sheet sections: narrow heading column, wide content column ---------- */
.sheet { border-top: 1px solid var(--line); padding: 4rem 0; }
.page-hero + .sheet, .photo-band + .sheet, .hero + .sheet { border-top: 0; }
.sheet .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; }
.sheet-head { position: sticky; top: 1.5rem; align-self: start; }
.sheet-head h2 { margin-bottom: .4em; }
.sheet-head p { font-size: .95rem; line-height: 1.55; color: var(--grey); max-width: 32ch; }
.sheet-body > :first-child { margin-top: 0; }
.sheet-body, .sheet-head { min-width: 0; }
@media (max-width: 900px) { .sheet .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .sheet-head { position: static; } .sheet { padding: 2.75rem 0; } }

/* Situations list */
.situations { list-style: none; padding: 0; margin: 0; max-width: none; }
.situations li { border-top: 1px solid var(--line); padding: 1.3rem 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 2rem; }
.situations li:last-child { border-bottom: 1px solid var(--line); }
.situations h3 { margin: 0; font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); }
.situations p { margin: 0; }
@media (max-width: 700px) { .situations li { grid-template-columns: minmax(0, 1fr); gap: .4rem; } }

/* Work pillars: lettered because ITC letters them (A, B, C), with an icon each */
.pillars { list-style: none; padding: 0; margin: 0; max-width: none; }
.pillars li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4.75rem; gap: 1rem 1.6rem; padding: 1.5rem 0; border-top: 1px solid var(--line); margin: 0; }
.pillars li:last-child { border-bottom: 1px solid var(--line); }
.pillars .letter { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--navy); }
.pillars h3 { margin: .15rem 0 .4rem; }
.pillars p { margin-bottom: .6em; }
.pillars a.more { font-size: .95rem; font-weight: 600; }
.pillars .pic { width: 4.5rem; justify-self: end; margin-top: .1rem; }
@media (max-width: 600px) { .pillars li { grid-template-columns: 2.2rem minmax(0, 1fr) 3rem; gap: .8rem; } .pillars .pic { width: 3rem; } }

/* Navy band */
.band { background: var(--navy); color: var(--on-navy); padding: 4.5rem 0; }
.band h2 { color: var(--white); max-width: 22ch; }
.band .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; }
.band ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.band li { border-top: 1px solid rgba(255,255,255,.18); padding: 1rem 0; margin: 0; }
.band li:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.band li strong { color: var(--white); display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: .2em; }
.band a { color: var(--white); }
@media (max-width: 900px) { .band .wrap { grid-template-columns: minmax(0, 1fr); } .band { padding: 3rem 0; } }

/* Proof strip */
.proof { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); background: var(--white); }
.proof li { padding: 1.4rem 1.5rem; margin: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof li:nth-child(even) { border-right: 0; }
.proof li:nth-last-child(-n+2) { border-bottom: 0; }
.proof .figure { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--navy); margin-bottom: .35em; }
.proof .what { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; display: block; }
@media (max-width: 480px) { .proof { grid-template-columns: minmax(0, 1fr); } .proof li { border-right: 0; border-bottom: 1px solid var(--line); } .proof li:last-child { border-bottom: 0; } }

/* Callout */
.callout { border-left: 3px solid var(--navy); background: var(--tint); padding: 1rem 1.2rem 1rem 1.4rem; margin: 2rem 0; max-width: var(--measure); }
.callout p:last-child { margin-bottom: 0; }

/* Founder */
.founder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.founder img { width: 200px; border: 1px solid var(--line); background: var(--white); padding: 4px; }
@media (max-width: 700px) { .founder { grid-template-columns: minmax(0, 1fr); } .founder img { width: 160px; } }

/* Steps: numbered only where the content is a sequence */
.steps { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); margin: 0; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; color: var(--navy); }
.steps h3 { margin: .1rem 0 .35rem; font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); }
.steps p { margin-bottom: .5em; }
.steps .result { font-size: .95rem; color: var(--ink-soft); }

/* Definition-style lists */
.deflist { margin: 0; max-width: none; }
.deflist + p { margin-top: 1.4rem; }
.deflist dt { font-weight: 600; margin-top: 1.1rem; scroll-margin-top: 1rem; }
.deflist dd { margin: .2rem 0 0; max-width: var(--measure); }

/* Industries: icon index above the list */
/* Industries (draft 12): buttons with a moving icon and a text box. JS sets .is-open; without JS, hover and focus open it. */
.ind-hint { font-size: .9rem; color: var(--grey); margin: 0 0 .6rem; }
.ind-hint .t-touch { display: none; }
@media (hover: none) { .ind-hint .t-point { display: none; } .ind-hint .t-touch { display: inline; } }
.ind-icons { list-style: none; padding: 0 0 1rem; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; border-bottom: 1px solid var(--line); position: relative; }
.ind { margin: 0; position: relative; }
.ind.is-open { z-index: 30; }
.ind-btn { -webkit-appearance: none; appearance: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .9rem .3rem .75rem; margin: 0; border: 0; border-radius: var(--radius); background: transparent; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.25; color: var(--navy); text-align: center; cursor: pointer; min-height: 48px; transition: background-color .2s ease; }
.ind-btn:hover, .ind.is-open .ind-btn { background: var(--tint); }
.ind-ic { position: relative; display: block; width: 5.25rem; }
.ind-ic .ic { transform-origin: 50% 50%; }
.ind.is-open .ic .f, html:not(.js) .ind:hover .ic .f { fill: var(--accent); opacity: .32; }
/* the motions, while the box is open */
@keyframes ind-spin { to { transform: rotate(360deg); } }
@keyframes ind-drive { 0%, 100% { transform: translate(-5%, 0); } 25% { transform: translate(0, -2.5%); } 50% { transform: translate(6%, 0); } 75% { transform: translate(0, -1.5%); } }
@keyframes ind-lines { 0% { opacity: 0; transform: translateX(30%); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-40%); } }
@keyframes ind-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes ind-wind { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(7deg); } }
@keyframes ind-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ind-blink { 0%, 100% { opacity: .32; } 50% { opacity: .75; } }
.ind[data-anim="spin"].is-open .ic, html:not(.js) .ind[data-anim="spin"]:hover .ic { animation: ind-spin 3.2s linear infinite; }
.ind[data-anim="drive"].is-open .ic, html:not(.js) .ind[data-anim="drive"]:hover .ic { animation: ind-drive 1.3s ease-in-out infinite; }
.ind[data-anim="drive"] .ind-ic::before { content: ""; position: absolute; left: -16%; top: 38%; width: 26%; height: 22%; opacity: 0; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--accent), var(--accent)) 40% 50% / 60% 3px no-repeat, linear-gradient(var(--accent), var(--accent)) 10% 100% / 80% 3px no-repeat; }
.ind[data-anim="drive"].is-open .ind-ic::before, html:not(.js) .ind[data-anim="drive"]:hover .ind-ic::before { animation: ind-lines .65s linear infinite; }
.ind[data-anim="sway"] .ic { transform-origin: 30% 86%; }
.ind[data-anim="sway"].is-open .ic, html:not(.js) .ind[data-anim="sway"]:hover .ic { animation: ind-sway 2.2s ease-in-out infinite; }
.ind[data-anim="wind"] .ic { transform-origin: 50% 92%; }
.ind[data-anim="wind"].is-open .ic, html:not(.js) .ind[data-anim="wind"]:hover .ic { animation: ind-wind 1.9s ease-in-out infinite; }
.ind[data-anim="pulse"].is-open .ic, html:not(.js) .ind[data-anim="pulse"]:hover .ic { animation: ind-pulse 1.1s ease-in-out infinite; }
.ind[data-anim="pulse"].is-open .ic .f, html:not(.js) .ind[data-anim="pulse"]:hover .ic .f { animation: ind-blink 1.1s ease-in-out infinite; }
/* the text box: grows out of the icon; its pointer stands over the icon (JS sets --cx and the left edge) */
.ind-pop { position: absolute; top: calc(100% + 12px); left: 0; width: min(26rem, calc(100vw - 2rem)); z-index: 2; background: var(--white); color: var(--ink); text-align: left;
  border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: .85rem 1.1rem 1rem;
  box-shadow: 0 16px 36px rgba(15, 4, 76, .16), 0 2px 6px rgba(15, 4, 76, .08);
  visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.94); transform-origin: var(--cx, 2.6rem) 0; pointer-events: none;
  transition: opacity .2s ease, transform .34s cubic-bezier(.2, .9, .25, 1.15), visibility 0s linear .34s; }
.ind-pop::before { content: ""; position: absolute; bottom: 100%; left: var(--cx, 2.6rem); margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--accent); }
/* where each box sits before JS places it exactly (and without JS): left, centre or right of its icon, never past the row */
.ind:nth-child(3) .ind-pop { left: calc(50% - min(13rem, 50vw - 1rem)); transform-origin: var(--cx, 50%) 0; }
.ind:nth-child(3) .ind-pop::before { left: var(--cx, 50%); }
.ind:nth-child(n+4) .ind-pop { left: auto; right: 0; transform-origin: var(--cx, calc(100% - 2.6rem)) 0; }
.ind:nth-child(n+4) .ind-pop::before { left: var(--cx, calc(100% - 2.6rem)); }
.ind-pop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 15px; }   /* a bridge, so the pointer can move into the box */
.ind.is-open .ind-pop, html:not(.js) .ind:hover .ind-pop, html:not(.js) .ind:focus-within .ind-pop {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .34s cubic-bezier(.2, .9, .25, 1.15), visibility 0s; }
.ind-pop-h { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--navy); margin: 0 0 .55rem; max-width: none; }
.ind-items { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: .35rem .4rem; }
.ind-items li { margin: 0; font-size: .84rem; line-height: 1.35; padding: .28rem .55rem; background: var(--tint); border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
@keyframes ind-chip { from { opacity: 0; transform: translateY(6px); } }
.ind.is-open .ind-items li, html:not(.js) .ind:hover .ind-items li { animation: ind-chip .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(90ms + var(--i) * 45ms); }
@media (max-width: 600px) {
  .ind-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem .4rem; }
  .ind-ic { width: 3.9rem; }
  .ind-btn { font-size: .8rem; padding: .6rem .2rem .55rem; }
  .ind:nth-child(3n+1) .ind-pop { left: 0; right: auto; transform-origin: var(--cx, 2.6rem) 0; }
  .ind:nth-child(3n+1) .ind-pop::before { left: var(--cx, 2.6rem); }
  .ind:nth-child(3n+2) .ind-pop { left: calc(50% - min(13rem, 50vw - 1rem)); right: auto; transform-origin: var(--cx, 50%) 0; }
  .ind:nth-child(3n+2) .ind-pop::before { left: var(--cx, 50%); }
  .ind:nth-child(3n) .ind-pop { left: auto; right: 0; transform-origin: var(--cx, calc(100% - 2.6rem)) 0; }
  .ind:nth-child(3n) .ind-pop::before { left: var(--cx, calc(100% - 2.6rem)); }
}
@media print { .ind-pop { display: none; } }

/* Icons: Phosphor duotone (MIT) and ITC's own, drawn to the same weight */
.ic { display: block; width: 100%; height: auto; }
.ic .p { fill: var(--navy); }
.ic .f { fill: var(--sky); opacity: .55; }
.ic .f2 { opacity: .85; }
.ic .s { fill: none; stroke: var(--navy); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.ic .s24 { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic .dot { fill: var(--navy); }

/* Drawings on white sheets */
.dv { display: block; width: 100%; max-width: 21rem; height: auto; margin: 1.4rem 0 .5rem; }
.dv text { font-family: var(--sans); }
.dv .card { fill: var(--white); stroke: var(--sky); stroke-width: 1.5; }
.dv .card2 { fill: var(--pale); stroke: var(--sky); stroke-width: 1; }
.dv .stripe { fill: var(--navy); }
.dv .co { fill: var(--navy); font-size: 17px; font-weight: 700; letter-spacing: .14em; }
.dv .g { fill: var(--grey); font-size: 12.5px; }
.dv .itc { fill: var(--navy); font-family: var(--serif); font-size: 16px; }
.dv .rule { stroke: var(--line); stroke-width: 1; }
.dv-caption { font-size: .85rem; line-height: 1.5; color: var(--grey); max-width: 32ch; }

/* Two-column plain grid */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
@media (max-width: 700px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* Short reference list (Partnerships) */
.reflist { list-style: none; padding: 0; margin: 0 0 1rem; max-width: none; }
.reflist li { border-top: 1px solid var(--line); padding: .9rem 0; margin: 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .3rem 1.5rem; }
.reflist li:last-child { border-bottom: 1px solid var(--line); }
.reflist b { font-weight: 600; }
@media (max-width: 600px) { .reflist li { grid-template-columns: minmax(0, 1fr); } }

/* Contact block */
.contact-card { border: 2px solid var(--navy); background: var(--white); padding: 1.6rem 1.8rem; max-width: 36rem; }
.contact-card p { margin-bottom: .6em; }
.contact-card .big { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; overflow-wrap: anywhere; }
.contact-card .big a { text-decoration: none; }
.contact-card .mail { font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; overflow-wrap: anywhere; }
.contact-card .big.mail { font-size: 1.25rem; }
.contact-card .mail a { text-decoration: none; }
.prose .bio li { margin-bottom: .5em; }

/* CTA section */
.cta { padding: 4.5rem 0; background: var(--pale); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2rem 4rem; align-items: center; }
.cta h2 { max-width: 20ch; }
.cta .small { color: var(--ink-soft); }
@media (max-width: 900px) { .cta .wrap { grid-template-columns: minmax(0, 1fr); } .cta { padding: 3rem 0; } }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy); padding: 3rem 0 2.5rem; font-size: .92rem; line-height: 1.6; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 2rem 3rem; }
.site-footer img { height: 34px; width: auto; margin-bottom: 1rem; opacity: .95; }
.site-footer p { margin: 0 0 .5em; max-width: 40ch; }
.site-footer a { color: var(--white); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35em; }
.site-footer .tagline { font-family: var(--serif); font-style: italic; color: var(--white); font-size: 1.1rem; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.2rem; margin-top: .5rem; color: var(--on-navy-soft); font-size: .85rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
@media (max-width: 900px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Content pages */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.65rem); }
.prose h3 { margin-top: 1.6rem; }
.note { font-size: .9rem; color: var(--grey); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; max-width: var(--measure); }

/* Title block on narrow screens: each row becomes label/value pairs */
@media (max-width: 700px) {
  .titleblock, .titleblock tbody { display: block; }
  .titleblock colgroup { display: none; }
  .titleblock tr { display: grid; grid-template-columns: 34% 1fr; }
  .titleblock th, .titleblock td { display: block; border-width: 0 0 1px 0; }
  .titleblock th { border-right: 1px solid var(--line-strong); }
  .titleblock tr:last-child th, .titleblock tr:last-child td { border-bottom: 0; }
  .titleblock tr:last-child th:nth-child(1), .titleblock tr:last-child td:nth-child(2) { border-bottom: 1px solid var(--line-strong); }
}

/* ---------- Interactive tools ---------- */
.tool { border: 2px solid var(--navy); background: var(--white); padding: 1.6rem 1.8rem 1.4rem; max-width: none; }
.tool h3 { margin-top: 0; }
.tool .lead { font-size: .95rem; color: var(--ink-soft); max-width: 60ch; }
.tool fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.tool legend { font-weight: 600; font-size: .95rem; margin-bottom: .55rem; padding: 0; color: var(--navy); }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices label { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-size: .95rem; line-height: 1.3; padding: .4em 1em; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--tint); cursor: pointer; color: var(--navy); }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices label:hover { border-color: var(--navy); }
.choices input:checked + span { color: var(--white); }
.choices label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.choices label:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.tool-result { border-left: 3px solid var(--navy); padding: .2rem 0 .2rem 1.3rem; margin-top: 1.4rem; }
.tool-result[hidden] { display: none; }
.tool-result h4 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 .4em; }
.tool-result p { margin-bottom: .7em; }
.tool-result .label { font-size: .82rem; color: var(--grey); display: block; margin-bottom: .15em; }
.tool-result .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.tool .fine { font-size: .85rem; color: var(--grey); margin: 1.2rem 0 0; max-width: 60ch; }
.tool-reset { font-family: var(--sans); font-size: .9rem; background: none; border: 0; padding: .55em 0; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: .15em; transition: background-color .15s ease, box-shadow .15s ease, text-decoration-color .15s ease; }
@media (hover: hover) { .tool-reset:hover { color: var(--navy); text-decoration-color: transparent; background-color: var(--hl); box-shadow: 0 0 0 .2em var(--hl); } }

/* Checklists (growth, seller, buyer) */
.checklist { list-style: none; padding: 0; margin: 0; max-width: none; }
.checklist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.2rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--line); margin: 0; }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist .area { font-size: .8rem; color: var(--grey); display: block; }
.checklist .yn { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.checklist .yn label { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; padding: 0 .95em; cursor: pointer; background: var(--tint); border-right: 1px solid var(--line-strong); }
.checklist .yn label:last-child { border-right: 0; }
.checklist .yn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checklist .yn label:has(input:checked) { background: var(--navy); color: var(--white); }
.checklist .yn label:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: -3px; }
@media (max-width: 600px) { .checklist li { grid-template-columns: minmax(0, 1fr); } }
.meter { height: 8px; background: var(--pale); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin: .6rem 0 1rem; max-width: 24rem; }
.meter span { display: block; height: 100%; background: var(--navy); width: 0; transition: width .4s ease; }

/* Composer */
.composer { display: grid; gap: 1rem; max-width: 40rem; }
.composer label { font-size: .95rem; font-weight: 600; display: block; margin-bottom: .3rem; }
.composer input[type=text], .composer input[type=email], .composer input[type=tel], .composer select, .composer textarea { width: 100%; font-family: var(--sans); font-size: 1rem; min-height: 48px; padding: .6em .7em; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--navy); }
.composer textarea { min-height: 6.5em; resize: vertical; }
.composer .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .composer .row { grid-template-columns: minmax(0, 1fr); } }
.composer .preview { font-size: .92rem; white-space: pre-wrap; background: var(--tint); border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius); color: var(--ink-soft); }
.composer .ok { font-size: .9rem; color: var(--navy); min-height: 1.3em; }
.composer .actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.composer-label { font-size: .95rem; font-weight: 600; display: block; margin-bottom: .3rem; }

/* ---------- Network map ---------- */
.mapwrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.5rem 2.5rem; align-items: start; }
@media (max-width: 900px) { .mapwrap { grid-template-columns: minmax(0, 1fr); } }
.netmap { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--tint); }
.netmap .grat { fill: none; stroke: #DCE6F0; stroke-width: .6; }
.netmap .c { fill: #DEE7F0; stroke: var(--white); stroke-width: .7; }
.netmap .c-de, .netmap .c-ch, .netmap .c-at, .netmap .c-fr, .netmap .c-nl, .netmap .c-jp, .netmap .c-ca { fill: var(--sky); cursor: pointer; transition: fill .2s; }
.netmap .c-in { fill: var(--navy); }
/* Draft 11: Europe in its own panel, larger; neighbours never share a tint (sky, a teal tint and a periwinkle tint, all
   light enough for the navy pins and labels), with wider white borders between them. */
.netmap .c.t2 { fill: #8DC9CA; }
.netmap .c.t3 { fill: #A2B1D1; }
.netmap .inset-eu .c[data-c] { stroke-width: 1.4; }
.netmap .c.is-active { fill: var(--map-active); }
.netmap .arc { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .55; transition: opacity .2s, stroke-width .2s; }
.netmap .arc.is-active { opacity: 1; stroke: var(--navy); stroke-width: 2.6; stroke-dasharray: none; }
.netmap .pin circle { fill: var(--navy); stroke: var(--white); stroke-width: 2; cursor: pointer; }
.netmap .pin.is-active circle { fill: var(--accent); stroke: var(--navy); r: 7; }
.netmap .pin text { font: 600 15px var(--sans); fill: var(--navy); pointer-events: none; }
@media (max-width: 600px) { .netmap .pin text { display: none; } }
.netmap .inset-bg { fill: var(--tint); }
.netmap .inset-frame { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.netmap .inset-label { font: 600 13px var(--sans); fill: var(--grey); letter-spacing: .04em; text-transform: uppercase; }
.maplegend { list-style: none; padding: 0; margin: 0; max-width: none; }
.maplegend li { margin: 0; border-top: 1px solid var(--line); }
.maplegend li:last-child { border-bottom: 1px solid var(--line); }
.maplegend button { width: 100%; min-height: 48px; text-align: left; background: none; border: 0; padding: .7rem .4rem; font-family: var(--serif); font-size: 1.05rem; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.maplegend button .n { font-family: var(--sans); font-size: .82rem; color: var(--grey); text-align: right; }
.maplegend li.is-active button::before { content: ""; display: inline-block; width: .5rem; height: .5rem; background: var(--accent); box-shadow: 0 0 0 1.5px var(--navy); border-radius: 50%; margin-right: .5rem; vertical-align: middle; flex: none; align-self: center; }
.maplegend .names { display: none; font-size: .9rem; color: var(--ink-soft); padding: 0 .4rem .9rem; line-height: 1.55; }
.maplegend li.is-active .names { display: block; }
.maplegend .in-note { font-size: .9rem; color: var(--ink-soft); padding: .75rem .4rem; line-height: 1.5; }

/* ---------- Timeline ---------- */
.tl { list-style: none; padding: 0; margin: 0; max-width: none; position: relative; border-left: 2px solid var(--sky); margin-left: .5rem; }
.tl li { margin: 0; padding: 0 0 1.3rem 1.6rem; position: relative; }
.tl li::before { content: ""; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); border: 2px solid var(--white); box-sizing: border-box; }
.tl .year { font-size: .85rem; font-weight: 600; color: var(--navy); display: block; margin-bottom: .1em; }
.tl .what { display: block; max-width: 56ch; }

/* Sticky heads should not overlap the draft banner on short screens */
@media (max-height: 700px) { .sheet-head { position: static; } }

/* Map section spans the full width */
.mapsection .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.mapsection .sheet-head { position: static; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: .5rem 4rem; align-items: end; }
.mapsection .sheet-head p { max-width: 50ch; margin: 0 0 .3rem; }
@media (max-width: 900px) { .mapsection .sheet-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sketches ---------- */
.sketchwrap { margin: 1.5rem 0 1.5rem; max-width: none; }
.sketchscroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); background: var(--white); padding: .6rem; }
.sketch { display: block; width: 100%; min-width: 560px; height: auto; }
.sketch text { font-family: var(--serif); fill: var(--navy); }
.sketch .lb { font-size: 16px; }
.sketch .lb.hl { fill: var(--navy); font-weight: 700; }
.sketch .sm { font-size: 14px; fill: var(--ink-soft); }
.sketch .sm.hl { fill: var(--navy); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.sketch .ax { font-family: var(--sans); font-size: 13px; fill: var(--grey); }
.sketch .nt { font-family: var(--sans); font-size: 13px; fill: var(--grey); }
.sketchwrap figcaption { font-size: .875rem; line-height: 1.5; color: var(--grey); margin-top: .5rem; max-width: 60ch; }
.situations .sketchwrap { grid-column: 1 / -1; }

/* Picture credits (privacy page) */
.credits { font-size: .9rem; color: var(--ink-soft); }
.credits li { margin-bottom: .3em; }

/* ---------- Seven ways in: one slider (draft 7, option C; Home and Partnerships) ---------- */
.ways-wrap { margin: 1.4rem 0 1rem; max-width: none; }
.wslide { border: 1px solid var(--line); background: var(--white); padding: 1.4rem 1.5rem 1.3rem; }
.ws-control { display: none; }
.wslide.js .ws-control { display: block; }
.ws-q { display: block; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; margin: 0 0 1rem; color: var(--navy); }
.ws-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; --p: calc((var(--v, 1) - 1) / 6 * 100%); }
.ws-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--navy) 0, var(--navy) var(--p), var(--pale) var(--p), var(--pale) 100%); }
.ws-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--pale); }
.ws-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--navy); }
.ws-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--white); border: 3px solid var(--navy); box-shadow: 0 2px 8px rgba(15,4,76,.25); transition: transform .15s; }
.ws-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--navy); box-shadow: 0 2px 8px rgba(15,4,76,.25); }
.ws-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ws-range:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 4px; }
.ws-ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--grey); margin: .2rem 0 .7rem; }
.ws-ticks { list-style: none; padding: 0; margin: 0 0 .3rem; max-width: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-left: calc(17.5px - 100% / 12); margin-right: calc(17.5px - 100% / 12); }
.ws-ticks li { margin: 0; text-align: center; min-width: 0; }
.ws-ticks button { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; background: none; border: 0; padding: .2rem .1rem .3rem; font: inherit; color: var(--grey); cursor: pointer; }
.wt-n { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: .8rem; font-weight: 600; color: var(--navy); background: var(--white); transition: background-color .25s, color .25s, border-color .25s; }
.wt-name { font-size: .74rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.ws-ticks button:hover .wt-n { border-color: var(--navy); }
.ws-ticks button.on .wt-n { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ws-ticks button.on .wt-name { color: var(--navy); }
.ws-ticks button.past .wt-n { border-color: var(--navy); }
.ws-panel { border-top: 2px solid var(--navy); margin-top: .9rem; padding-top: 1.1rem; }
.wslide:not(.js) .ws-panel { border-top: 0; margin-top: 0; padding-top: 0; }
.way-detail + .way-detail { margin-top: 1.4rem; }
.wslide.js .way-detail + .way-detail { margin-top: 0; }
.wslide.js .way-detail:not([hidden]) { animation: ws-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ws-in { from { opacity: 0; transform: translateY(8px); } }
.way-detail h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin: 0 0 .75rem; display: flex; align-items: baseline; gap: .6rem; }
.way-dn { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--sans); font-size: .85rem; font-weight: 600; flex: none; transform: translateY(-.1rem); }
.way-meters { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin: 0 0 .9rem; }
.mtr { display: grid; gap: .3rem; font-size: .8rem; color: var(--grey); }
.mtr b { font-weight: 600; }
.mtr .seg { display: flex; gap: 3px; }
.mtr .seg i { width: 1.7rem; height: .5rem; border-radius: 2px; background: var(--pale); transition: background-color .3s; }
.mtr .seg i.on { background: var(--navy); }
.wslide.js .way-detail:not([hidden]) .mtr .seg i.on { animation: seg-on .5s ease both; }
.mtr .seg i:nth-child(2) { animation-delay: .06s !important; } .mtr .seg i:nth-child(3) { animation-delay: .12s !important; }
.mtr .seg i:nth-child(4) { animation-delay: .18s !important; } .mtr .seg i:nth-child(5) { animation-delay: .24s !important; }
@keyframes seg-on { from { background: var(--pale); } }
.way-detail p { margin: 0 0 .6rem; }
.way-detail .more { font-weight: 600; font-size: .95rem; }
.ways-note { font-size: .875rem; line-height: 1.5; color: var(--grey); margin: .6rem 0 0; max-width: 64ch; }
@media (max-width: 640px) {
  .wslide { padding: 1.1rem 1rem 1rem; }
  .wt-name { display: none; }
}

/* ---------- Experience hero: the CHEMIX photograph framed, with a museum label (draft 7, option B) ---------- */
.museum { max-width: 37rem; }
.mus-mount { background: var(--white); padding: 22px; box-shadow: 0 16px 34px rgba(4,1,24,.5), 0 3px 8px rgba(4,1,24,.3); outline: 1px solid rgba(15,4,76,.28); outline-offset: -12px; }
.mus-mount img { display: block; width: 100%; height: auto; }
.page-hero .museum figcaption.mus-label { position: relative; width: min(17rem, 78%); margin: -2.6rem -.7rem 0 auto; background: #FBFAF5; color: var(--navy); padding: .8rem 1rem .85rem; font-size: .8rem; line-height: 1.5; box-shadow: 0 10px 22px rgba(4,1,24,.42); max-width: none; }
.mus-label b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.04rem; line-height: 1.3; margin-bottom: .25rem; color: var(--navy); }
.page-hero .mus-label mark.tc { border-bottom-color: #7A3FA6; }
.page-hero .mus-label mark.tc::after { color: #7A3FA6; }
@media (max-width: 640px) { .mus-mount { padding: 12px; outline-offset: -7px; } .page-hero .museum figcaption.mus-label { margin: -1.4rem -.3rem 0 auto; width: 86%; } }

/* ======================================================================
   Home, draft 7: a living blueprint in the hero, the site as a set of sheets, firsts in India,
   the figures as dimensions, the seven ways as a slider. All motion stops for visitors who ask
   their system for less motion, and the hero has its own pause button.
   ====================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Hero ---------- */
.home-hero { position: relative; overflow: hidden; background-color: var(--navy); color: var(--on-navy);
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top; }
.hh-wrap { max-width: 1140px; margin: 0 auto; padding: 3.6rem 1.5rem 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 2rem; align-items: end; }
.hh-text { align-self: start; padding: .6rem 0 6.4rem; position: relative; z-index: 2; }
.hh-eyebrow { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-soft); margin: 0 0 1.1rem; }
.home-hero h1 { color: var(--white); font-size: clamp(2.35rem, 1.5rem + 3.1vw, 3.85rem); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 .55em; max-width: none; }
.rot { display: block; position: relative; height: 1.12em; }
.rot > span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }
.rot > span:not(.on) { opacity: 0; transform: translateY(.45em); }
.rot > span.out { opacity: 0; transform: translateY(-.45em); }
.rot > span .hl { color: var(--accent-light); font-style: italic; padding-right: .04em; }
.home-hero .lede { color: var(--on-navy); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 40ch; margin-bottom: 1.4rem; }
.hh-keys { list-style: none; margin: 0 0 1.7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; max-width: none; }
.hh-keys li { margin: 0; }
.hh-keys a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--white); text-decoration: none; font-weight: 600; font-size: .98rem; border-bottom: 2px solid transparent; transition: color .35s ease; }
.hh-keys a .n { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); font-size: .82rem; transition: border-color .35s ease, color .35s ease; }
.hh-keys a:hover { color: var(--white); }
/* Home banner (draft 10, option D of the banner options, chosen by Vedant on 18 Oct 2026): no underline. The turning
   word of the headline is set in light-teal italic (above); the link in use takes the same teal for its name and its
   ring, so that link and word read together. Keyboard focus counts as in use, and so does pointing, where it exists. */
.home-hero[data-k="1"] .hh-keys a[data-k="1"], .home-hero[data-k="2"] .hh-keys a[data-k="2"], .home-hero[data-k="3"] .hh-keys a[data-k="3"], .hh-keys a:focus-visible { color: var(--accent-light); }
.home-hero[data-k="1"] .hh-keys a[data-k="1"] .n, .home-hero[data-k="2"] .hh-keys a[data-k="2"] .n, .home-hero[data-k="3"] .hh-keys a[data-k="3"] .n, .hh-keys a:focus-visible .n { border-color: var(--accent-light); color: var(--accent-light); }
@media (hover: hover) { .hh-keys a:hover { color: var(--accent-light); } .hh-keys a:hover .n { border-color: var(--accent-light); color: var(--accent-light); } }
.hh-draw { align-self: end; margin: 0 calc(-1 * max(0px, (100vw - 1140px) / 2)) 0 -8rem; position: relative; z-index: 1; }
.hh-pause { position: absolute; left: max(1.2rem, calc((100vw - 1140px) / 2 + 1.2rem)); bottom: .55rem; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .3rem; background: none; border: 0; color: var(--on-navy-soft); font: 600 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hh-pause:hover { color: var(--white); }
.hh-pause i { display: inline-block; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.home-hero.is-paused .hh-pause i { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
@media (max-width: 1000px) {
  .hh-wrap { grid-template-columns: minmax(0, 1fr); padding-top: 2.8rem; }
  .hh-text { padding-bottom: .8rem; }
  .hh-draw { margin: 0 -1.5rem; padding-bottom: 2.6rem; }
}

/* The drawing. Every line is drawn in once (stroke-dashoffset), then the parts move. */
.hh-svg { display: block; width: 100%; max-width: 880px; margin-left: auto; height: auto; overflow: visible; }
@media (min-width: 1001px) and (max-width: 1139px) { .hh-draw { margin-left: 0; } }
.hh-svg .k1 { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hh-svg .k2 { fill: none; stroke: var(--sky); stroke-width: 1.2; stroke-linecap: round; }
.hh-svg .k3 { fill: none; stroke: var(--sky); stroke-width: .9; opacity: .8; }
.hh-svg .k1.fl, .hh-svg .k2.fl { fill: rgba(255,255,255,.05); }
.hh-svg .k3.gl { fill: rgba(145,190,212,.2); }
.hh-svg .hatch { opacity: .5; }
.hh-svg .cab { stroke-width: .9; opacity: .9; }
.hh-svg .plan { stroke-dasharray: 5 4; opacity: .9; }
.hh-svg .tx { fill: var(--on-navy-soft); font: 600 11px var(--sans); letter-spacing: .18em; }
.hh-svg .dimt { fill: var(--on-navy); font-size: 10.5px; letter-spacing: .2em; }
.hh-svg .gl-narrow { display: none; }
.hh-svg .arrh { fill: var(--sky); }
.hh-svg .whl { fill: var(--navy); stroke: #FFFFFF; stroke-width: 1.3; }
.hh-svg .ld { fill: none; stroke: #FFFFFF; stroke-width: 1.1; }
.hh-svg .ldot { fill: #FFFFFF; }
.hh-svg .bl { fill: var(--navy); stroke: #FFFFFF; stroke-width: 1.6; transition: fill .4s, stroke .4s; }
.hh-svg .bn { fill: #FFFFFF; font: 600 14px var(--sans); pointer-events: none; }
.hh-svg a.hb { cursor: pointer; }
.hh-svg a.hb:hover .bl { stroke: var(--accent); }
.hh-svg .hg { transition: opacity .6s ease; }
.home-hero[data-k="1"] .hb1 .bl, .home-hero[data-k="2"] .hb2 .bl, .home-hero[data-k="3"] .hb3 .bl { fill: var(--accent); stroke: var(--accent); }
.home-hero[data-k="1"] .hb1 .bn, .home-hero[data-k="2"] .hb2 .bn, .home-hero[data-k="3"] .hb3 .bn { fill: var(--on-accent); }
.home-hero[data-k="1"] .g2, .home-hero[data-k="1"] .g3,
.home-hero[data-k="2"] .g1, .home-hero[data-k="2"] .g3,
.home-hero[data-k="3"] .g1, .home-hero[data-k="3"] .g2 { opacity: .5; }

/* draw-in: the resting state is the finished drawing, so with motion switched off nothing is missing */
.hh-svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hh-svg .hg [pathLength] { animation: hh-draw 1.7s cubic-bezier(.45,.1,.2,1) var(--d, 0s) both; }
.hh-svg .hg .fl, .hh-svg .hg .gl { animation: hh-draw 1.7s cubic-bezier(.45,.1,.2,1) var(--d, 0s) both, hh-fill .9s ease calc(var(--d, 0s) + 1s) both; }
.hh-svg .hgl text, .hh-svg .g1 text { animation: hh-fade .8s ease calc(var(--d, 0s) + .6s) both; }
.hh-svg .arrh { animation: hh-fade .6s ease 1.6s both; }
.hh-svg .hb .ld { animation: hh-draw .6s ease 2.1s both; }
.hh-svg .hb .ldot { animation: hh-fade .3s ease 2.5s both; }
.hh-svg .hb .bh { transform-box: fill-box; transform-origin: center; animation: hh-pop .55s cubic-bezier(.3,1.5,.5,1) 2.3s both; }
.hh-svg .hb2 .bh { animation-delay: 2.45s; } .hh-svg .hb3 .bh { animation-delay: 2.6s; }
@keyframes hh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hh-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes hh-fade { from { opacity: 0; } }
@keyframes hh-pop { from { opacity: 0; transform: scale(.3); } }

/* the moving parts: water, the lorry over the bridge, the crane and the extension it builds */
.hh-svg .wave { stroke-dasharray: 16 12; animation: hh-wave 7s linear infinite; }
@keyframes hh-wave { to { stroke-dashoffset: -56; } }
.hh-svg .lorry { transform: translateX(372px); animation: hh-lorry 13s linear 2.8s infinite both; }
@keyframes hh-lorry { 0% { transform: translateX(150px); opacity: 0; } 6% { opacity: 1; } 76% { opacity: 1; } 82%, 100% { transform: translateX(560px); opacity: 0; } }
.hh-svg .trolley { animation: hh-trolley 11s ease-in-out 2.8s infinite both; }
@keyframes hh-trolley { 0%, 8% { transform: translateX(0); } 30%, 72% { transform: translateX(82px); } 94%, 100% { transform: translateX(0); } }
.hh-svg .rope { transform-box: fill-box; transform-origin: 50% 0; animation: hh-rope 11s ease-in-out 2.8s infinite both; }
@keyframes hh-rope { 0%, 32% { transform: scaleY(1); } 46%, 58% { transform: scaleY(1.658); } 70%, 100% { transform: scaleY(1); } }
.hh-svg .load { animation: hh-load 11s ease-in-out 2.8s infinite both; }
@keyframes hh-load { 0%, 32% { transform: translateY(0); } 46%, 58% { transform: translateY(50px); opacity: 1; } 60% { opacity: 0; } 68% { transform: translateY(0); opacity: 0; } 74%, 100% { opacity: 1; } }
.hh-svg .rise { animation: hh-rise 22s ease-in-out 2.8s infinite both; }
@keyframes hh-rise { 0% { transform: translateY(92px); } 56%, 100% { transform: translateY(0); } }
.hh-svg .built { animation: hh-built 22s linear 2.8s infinite both; }
@keyframes hh-built { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.home-hero.is-paused *, .home-hero.is-off * { animation-play-state: paused !important; }
@media (max-width: 640px) {
  .hh-svg .k1 { stroke-width: 2.2; } .hh-svg .k2 { stroke-width: 1.7; } .hh-svg .k3 { stroke-width: 1.3; }
  .hh-svg .tx { font-size: 19px; letter-spacing: .12em; } .hh-svg .dimt { font-size: 17px; }
  .hh-svg .gl-wide { display: none; } .hh-svg .gl-narrow { display: inline; }
  .hh-eyebrow { font-size: .7rem; letter-spacing: .1em; }
  .hh-svg .bl { stroke-width: 2.2; } .hh-svg .bn { font-size: 19px; }
}
.hh-svg .plan { animation: hh-fade .9s ease 1.9s both; }
.hh-svg .tr-in { animation: hh-fade .7s ease 2s both; }

/* ---------- Start from where you are: the site as a set of drawing sheets ---------- */
.sheets-sec { background: var(--tint); padding: 4.2rem 0 4.6rem; border-bottom: 1px solid var(--line); }
.ss-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.8rem; }
.ss-head h2 { margin: 0; }
.ss-who { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ss-q { font-size: .9rem; color: var(--grey); margin-right: .2rem; }
.ss-who button { font: 600 .92rem var(--sans); min-height: 44px; padding: 0 1rem; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.ss-who button:hover { border-color: var(--navy); }
.ss-who button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.sheets { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.6rem; }
.sht { margin: 0; transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.sht a { display: flex; flex-direction: column; gap: .85rem; height: 100%; text-decoration: none; color: var(--ink); }
.sht-paper { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 1.6 / 1; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(15,4,76,.06), 0 8px 18px rgba(15,4,76,.07);
  background-image: linear-gradient(var(--white), var(--white)), repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 25%), repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 33.333%);
  background-clip: content-box, border-box, border-box; padding: 9px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.sht-paper::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--navy); pointer-events: none; }
.sht-pic { display: flex; align-items: center; justify-content: center; padding: 1rem 1rem .4rem; min-height: 0; }
.sht-pic .ic { width: auto; height: 100%; max-height: 6.4rem; aspect-ratio: 1; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.sht-tb { display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1.5px solid var(--navy); margin: 0 1.5px 1.5px; position: relative; }
.sht-no { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); padding: .55rem .7rem; border-right: 1px solid var(--line-strong); align-self: stretch; display: flex; align-items: center; }
.sht-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; padding: .5rem .75rem; color: var(--navy); }
.sht-line { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); padding: 0 .2rem; max-width: 40ch; }
.sht a:hover .sht-paper, .sht a:focus-visible .sht-paper { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(15,4,76,.08), 0 18px 32px rgba(15,4,76,.16); }
.sht a:hover .sht-pic .ic, .sht a:focus-visible .sht-pic .ic { transform: scale(1.08); }
.sht-name { transition: background-color .15s ease; }
.sht a:focus-visible .sht-name { background-color: var(--hl); }
@media (hover: hover) { .sht a:hover .sht-name { background-color: var(--hl); } }
.sht a:focus-visible { outline: none; }
.sht a:focus-visible .sht-paper { outline: 3px solid var(--navy); outline-offset: 4px; }
.sheets[data-who="out"] .sht[data-for="in"], .sheets[data-who="in"] .sht[data-for="out"] { opacity: .38; filter: grayscale(1); transform: scale(.97); }
.js .sheets .sht { opacity: 0; transform: translateY(26px) rotate(calc((var(--n) - 3.5) * .8deg)); }
.js .sheets.in .sht { opacity: 1; transform: none; transition-delay: calc(var(--n) * 70ms); }
.js .sheets.in[data-who="out"] .sht[data-for="in"], .js .sheets.in[data-who="in"] .sht[data-for="out"] { opacity: .38; transform: scale(.97); transition-delay: 0s; }
.js .sheets.in.shown .sht { transition-delay: 0s; }
@media (max-width: 900px) { .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; } }
@media (max-width: 560px) {
  .sheets { grid-template-columns: minmax(0, 1fr); }
  .sht a { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .sht-paper { aspect-ratio: 1.2 / 1; }
  .sht-pic { padding: .5rem .4rem .2rem; } .sht-pic .ic { max-height: 3.3rem; }
  .sht-tb { grid-template-columns: minmax(0, 1fr); }
  .sht-no { font-size: .58rem; padding: .22rem .4rem .1rem; border-right: 0; }
  .sht-name { font-size: .98rem; padding: 0 .4rem .3rem; }
  .sht-line { font-size: .9rem; }
  .sheets-sec { padding: 3rem 0; }
}

/* ---------- The tagline over the factory floor ---------- */
.tagband { position: relative; margin: 0; overflow: hidden; background: var(--navy); height: clamp(220px, 30vw, 420px); }
.tagband img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 50% 55%; }
.tagband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,4,76,.82) 0%, rgba(15,4,76,.45) 55%, rgba(15,4,76,.15) 100%); }
.tagband figcaption { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.tg { font-family: var(--serif); font-style: italic; color: var(--white); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.12; max-width: 14ch; text-wrap: balance; }

/* ---------- Since 1984: the figures, dimensioned ---------- */
.figs { padding: 4.4rem 0 4rem; }
.figs h2 { margin-bottom: 2rem; }
.figs-list { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.2rem; }
.figs-list li { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.dim { position: relative; display: block; height: 18px; margin-bottom: .6rem; }
.dim::before, .dim::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grey); }
.dim::before { left: 0; } .dim::after { right: 0; }
.dim i { position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: var(--navy); transform-origin: 50% 50%; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.dim i::before, .dim i::after { content: ""; position: absolute; top: -4px; border: 4.5px solid transparent; }
.dim i::before { left: 0; border-right: 9px solid var(--navy); border-left: 0; }
.dim i::after { right: 0; border-left: 9px solid var(--navy); border-right: 0; }
.js .figs .dim i { transform: scaleX(0); }
.js .figs.in .dim i { transform: scaleX(1); }
.fig { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem); line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: .45rem; }
.fig-l { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.figs-more { margin: 2rem 0 0; font-weight: 600; }
@media (max-width: 900px) { .figs { padding: 3rem 0; } }
@media (max-width: 600px) { .figs-list { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

/* ---------- Firsts in India: three drawings that move ---------- */
.firsts { background: var(--navy); color: var(--on-navy); padding: 4.4rem 0 4rem; }
.fi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 2rem; }
.fi-head h2 { color: var(--white); margin: 0; }
.fi-head p { margin: 0; color: var(--on-navy-soft); }
.fi-list { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; counter-reset: fi; }
.fi { margin: 0; background: var(--white); color: var(--ink); padding: 0 0 1.3rem; display: flex; flex-direction: column; counter-increment: fi; }
.fi-pic { background: var(--white); border-bottom: 1px solid var(--line); padding: .8rem .6rem .2rem; position: relative; }
.fi-pic::before { content: counter(fi); position: absolute; left: .8rem; top: .8rem; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1.5px solid var(--navy); font: 600 .85rem var(--sans); color: var(--navy); }
.fi-co { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin: 1.1rem 1.3rem .35rem; }
.fi h3 { margin: 0 1.3rem .45rem; font-size: 1.3rem; }
.fi p:last-child { margin: 0 1.3rem; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.fi-more { margin: 1.8rem 0 0; font-weight: 600; }
.fi-more a { color: var(--white); }
@media (max-width: 900px) {
  .fi-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(16rem, 82%); overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .6rem; margin-right: -1.5rem; padding-right: 1.5rem; scrollbar-width: thin; }
  .fi { scroll-snap-align: start; }
  .firsts { padding: 3rem 0; }
}
.fd { display: block; width: 100%; height: auto; }
.fd .f1 { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fd .f2 { fill: none; stroke: var(--sky); stroke-width: 1.4; stroke-linecap: round; }
.fd .f3 { fill: none; stroke: var(--grey); stroke-width: .9; opacity: .55; }
.fd .f1.ff { fill: rgba(145,190,212,.28); }
.fd .dsh { stroke-dasharray: 4 4; }
.fd .fx { fill: var(--grey); font: 600 9.5px var(--sans); letter-spacing: .16em; }
.fd .fi-coat { fill: var(--sky); transform-box: fill-box; transform-origin: 50% 100%; animation: fi-coat 9s ease-in-out infinite both; }
@keyframes fi-coat { 0% { transform: scaleY(.04); } 80%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.04); } }
.fd .sp { fill: var(--navy); animation: fi-spray 1.5s linear var(--sd) infinite both; }
@keyframes fi-spray { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(20px, var(--sy)); opacity: 0; } }
.fd .fi-trol { animation: fi-trol 9s ease-in-out infinite both; }
@keyframes fi-trol { 0%, 10% { transform: translateX(0); } 45%, 60% { transform: translateX(110px); } 95%, 100% { transform: translateX(0); } }
.fd .fi-rope { transform-box: fill-box; transform-origin: 50% 0; animation: fi-rope 9s ease-in-out infinite both; }
@keyframes fi-rope { 0%, 10% { transform: scaleY(1); } 25%, 80% { transform: scaleY(.5); } 95%, 100% { transform: scaleY(1); } }
.fd .fi-load { animation: fi-load 9s ease-in-out infinite both; }
@keyframes fi-load { 0%, 10% { transform: translateY(0); } 25%, 80% { transform: translateY(-22px); } 95%, 100% { transform: translateY(0); } }
.fd .fi-blow { transform-box: fill-box; transform-origin: 50% 0; animation: fi-blow 6s cubic-bezier(.3,.7,.3,1) infinite both; }
@keyframes fi-blow { 0%, 12% { transform: scale(.3, .82); } 42%, 86% { transform: scale(1, 1); } 100% { transform: scale(.3, .82); } }
.fd .rod { animation: fi-rod 6s ease-in-out infinite both; }
@keyframes fi-rod { 0%, 8% { transform: translateY(0); } 30%, 40% { transform: translateY(100px); } 52%, 100% { transform: translateY(0); } }
.firsts.is-off *, .figs.is-off * { animation-play-state: paused !important; }

/* ---------- Who you will be working with, and a way to write ---------- */
.meet { background: var(--pale); padding: 4.2rem 0; }
.meet .wrap { display: grid; grid-template-columns: 11rem minmax(0, 5fr) minmax(0, 5fr); gap: 1.5rem 3rem; align-items: center; }
.meet-p { margin: 0; }
.meet-p img { width: 11rem; border: 1px solid var(--line-strong); background: var(--white); padding: 4px; }
.meet-p figcaption { font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; margin-top: .6rem; color: var(--navy); }
.meet-p figcaption span { display: block; font-family: var(--sans); font-size: .82rem; color: var(--grey); margin-top: .15rem; }
.meet-q .q { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.25; color: var(--navy); margin: 0 0 .8rem; max-width: 22ch; }
.meet-q p { font-size: .98rem; color: var(--ink-soft); }
.meet-cta { border-left: 2px solid var(--navy); padding-left: 2rem; }
.meet-cta h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-bottom: .4em; }
.meet-cta p { font-size: .98rem; color: var(--ink-soft); }
@media (max-width: 900px) { .meet .wrap { grid-template-columns: 8rem minmax(0, 1fr); } .meet-p img { width: 8rem; } .meet-cta { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 2px solid var(--navy); padding-top: 1.5rem; } .meet { padding: 3rem 0; } }
@media (max-width: 480px) { .meet .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- reveal on scroll (only when the script runs) ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Contact hero, draft 7 (option A): Detail A, Pune ---------- */
.cdet { max-width: 33rem; }
.cd { display: block; width: 100%; height: auto; overflow: visible; }
.cd .cd-land { fill: rgba(255,255,255,.07); stroke: var(--sky); stroke-width: 1; stroke-linejoin: round; }
.cd .cd-a { fill: none; stroke: #FFFFFF; stroke-width: 1.6; }
.cd .cd-al, .cd .cd-lab { fill: var(--on-navy-soft); font: 600 11px var(--sans); letter-spacing: .18em; }
.cd .cd-al { fill: #FFFFFF; font-size: 13px; }
.cd .cd-ld { fill: none; stroke: #FFFFFF; stroke-width: 1.1; stroke-dasharray: 1; }
.cd .cd-ring { fill: none; stroke: #FFFFFF; stroke-width: 1.6; }
.cd .cd-sea { fill: none; stroke: var(--sky); stroke-width: .8; stroke-dasharray: 6 6; opacity: .45; }
.cd .cd-land2 { fill: #1E1561; stroke: #FFFFFF; stroke-width: 1.2; stroke-linejoin: round; }
.cd .cd-grat { fill: none; stroke: var(--sky); stroke-width: .7; stroke-dasharray: 3 4; opacity: .55; }
.cd .cd-sea-t { fill: var(--sky); font: italic 13px var(--serif); letter-spacing: .04em; }
.cd .cd-city { fill: var(--navy); stroke: #FFFFFF; stroke-width: 1.5; }
.cd .cd-ct { fill: var(--on-navy); font: 600 12px var(--sans); }
.cd .cd-tick { stroke: var(--sky); stroke-width: 1; }
.cd .cd-tk { fill: var(--on-navy-soft); font: 10px var(--sans); letter-spacing: .04em; }
.cd .cd-pin { fill: var(--accent); stroke: #FFFFFF; stroke-width: 2; }
.cd .cd-pulse { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cd-pulse 2.6s ease-out 2.2s infinite both; }
@keyframes cd-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.cd .cd-pt { fill: #FFFFFF; font: 600 15px var(--sans); }
.cd .cd-ps { fill: var(--on-navy-soft); font: 600 9.5px var(--sans); letter-spacing: .14em; }
.cd .cd-na { fill: #FFFFFF; }
.cd .cd-sb1 { fill: #FFFFFF; } .cd .cd-sb2 { fill: none; stroke: #FFFFFF; stroke-width: 1; }
.cd [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; animation: hh-draw 1.6s cubic-bezier(.45,.1,.2,1) both; }
.cd .cd-land { animation: hh-draw 2s cubic-bezier(.45,.1,.2,1) both, hh-fill .8s ease 1s both; }
.cd .cd-a { animation-delay: .9s; } .cd .cd-ld { animation-delay: 1.3s; animation-duration: .7s; } .cd .cd-ring { animation-delay: 1.6s; }
.cd .cd-in, .cd .cd-pune, .cd .cd-tick, .cd .cd-tk, .cd .cd-north, .cd .cd-scale, .cd text { animation: hh-fade .8s ease 2s both; }
.cd .cd-ov text { animation-delay: .8s; } .cd .cd-al { animation-delay: 1.1s; }
.cdet figcaption { font-size: .85rem; color: var(--on-navy-soft); margin-top: .9rem; max-width: 46ch; }
@media (max-width: 640px) { .cd .cd-tk { font-size: 12px; } .cd .cd-ct { font-size: 14px; } .cd .cd-pt { font-size: 17px; } .cd .cd-ps { font-size: 11px; } }

.nw { white-space: nowrap; }
.hh-pause[hidden] { display: none; }
@media print { .js .sheets .sht, .js .rv { opacity: 1 !important; transform: none !important; } .js .figs .dim i { transform: none !important; } }