/* ==========================================================================
   Ashoka Consultancy — main stylesheet
   Sections: 1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Type · 6 Buttons
   7 Glass · 8 Header · 9 Heroes · 10 Home sections · 11 Inner pages
   12 Forms · 13 Footer · 14 Motion · 15 Utilities
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("../fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }

/* 2. Tokens --------------------------------------------------------------- */
:root {
  --paper: #F3EFE6;
  --paper-raised: #FBF9F4;
  --paper-sunk: #E9E3D5;
  --ink: #0F2320;
  --ink-2: #3E4C48;
  --ink-3: #56625E;
  --jade: #2E6B63;
  --jade-deep: #1C4640;
  --jade-soft: #CFE0DA;
  --muga: #B8862B;
  --muga-ink: #7D5816;
  --silt: #CFC6B3;
  --night: #0B1A18;
  --night-2: #12272B;
  --line: rgb(15 35 32 / .14);
  --line-strong: rgb(15 35 32 / .28);
  --line-light: rgb(255 255 255 / .16);

  --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: var(--sans); /* display type is Geist too; kept as an alias */
  --italic: "Newsreader", Georgia, "Times New Roman", serif; /* emphasis only */

  --step--2: .75rem;
  --step--1: .8125rem;
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --step-3: clamp(1.95rem, 1.4rem + 2.2vw, 3.3rem);
  --step-4: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  --step-5: clamp(2.7rem, 1.4rem + 5vw, 5.9rem);

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 3.2vw, 2.5rem);
  --section: clamp(5rem, 11vw, 9.5rem);
  --header-h: 76px;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 640ms;

  --shadow-sm: 0 1px 2px rgb(15 35 32 / .06), 0 4px 12px -6px rgb(15 35 32 / .12);
  --shadow-lg: 0 2px 4px rgb(15 35 32 / .04), 0 24px 56px -24px rgb(15 35 32 / .38);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern", "calt";
  letter-spacing: -.006em;
  hanging-punctuation: first last;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--ph, var(--paper-sunk)); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
em { font-family: var(--italic); font-style: italic; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--jade); color: #fff; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--muga); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* 4. Layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--sunk { background: var(--paper-sunk); }
.section--flush-top { padding-top: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head > :first-child { grid-column: 1 / span 7; }
.section-head > .section-intro { grid-column: 8 / -1; }
@media (max-width: 900px) {
  .section-head > :first-child, .section-head > .section-intro { grid-column: 1 / -1; }
}

/* 5. Type ----------------------------------------------------------------- */
.display, .h1, .h2, .h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; font-feature-settings: "kern", "liga", "calt", "ss01"; }
.display { font-size: var(--step-5); line-height: 1.02; letter-spacing: -.045em; font-weight: 520; }
.h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.042em; font-weight: 520; }
.h2 { font-size: var(--step-3); line-height: 1.06; letter-spacing: -.038em; }
.h3 { font-size: var(--step-2); line-height: 1.18; letter-spacing: -.025em; font-weight: 500; }
.display em, .h1 em, .h2 em, .h3 em { font-family: var(--italic); font-style: italic; color: var(--jade); font-weight: 350; font-size: 1.06em; letter-spacing: -.02em; padding-right: .04em; line-height: 1; }
.on-dark .display em, .on-dark .h1 em, .on-dark .h2 em, .on-dark .h3 em { color: #E2C179; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; letter-spacing: -.003em; }
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); }
.prose p + p { margin-top: 1em; }
.prose { color: var(--ink-2); max-width: 38em; text-wrap: pretty; line-height: 1.7; }

.eyebrow, .label {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.mark { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem .9rem .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .4); font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.6rem; }
.mark-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muga); box-shadow: 0 0 0 3px rgb(184 134 43 / .18); flex: none; }
.on-dark .mark, .mark--light { border-color: rgb(255 255 255 / .18); background: rgb(255 255 255 / .05); color: rgb(243 239 230 / .82); }
.mark-num { font-family: var(--italic); font-style: italic; font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--muga-ink); }
.mark-rule { width: 2.25rem; height: 1px; background: currentColor; opacity: .5; }
.mark--light, .on-dark .mark { color: rgb(243 239 230 / .72); }
.on-dark .mark-num, .mark--light .mark-num { color: #E2C179; }

.num { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; font-weight: 500; }

/* Figure captions — "field notes" */
.caption { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-size: var(--step--1); color: var(--ink-3); margin-top: .85rem; line-height: 1.45; }
.caption-fig { font-family: var(--italic); font-style: italic; color: var(--muga-ink); font-size: .95rem; }
.caption-place { font-weight: 600; color: var(--ink-2); }
.caption--light { color: rgb(255 255 255 / .82); }
.caption--light .caption-place { color: #fff; }
.caption--light .caption-fig { color: #E9CD8A; }

/* 6. Buttons & links ------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .005em; line-height: 1.1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.btn .icon { transition: transform var(--t-med) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--ink:hover { --btn-bg: var(--jade-deep); box-shadow: 0 10px 24px -12px rgb(15 35 32 / .6); }
.btn--jade { --btn-bg: var(--jade); --btn-fg: #fff; }
.btn--jade:hover { --btn-bg: var(--jade-deep); }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--paper:hover { --btn-bg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: rgb(15 35 32 / .06); border-color: var(--ink); }
.btn--glass {
  --btn-fg: var(--ink); background: rgb(251 249 244 / .55); border-color: rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.btn--glass:hover { background: rgb(251 249 244 / .82); }
.on-dark .btn--ghost { --btn-fg: var(--paper); border-color: rgb(255 255 255 / .35); }
.on-dark .btn--ghost:hover { --btn-bg: rgb(255 255 255 / .08); border-color: #fff; }
.btn--sm { min-height: 2.5rem; padding: .55rem 1.1rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: .2rem;
  transition: border-color var(--t-med) var(--ease), gap var(--t-med) var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: .75rem; }
.on-dark .link-arrow { color: var(--paper); border-color: rgb(255 255 255 / .35); }

.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: var(--step--1); font-weight: 500; color: var(--ink-2); background: rgb(255 255 255 / .35);
}
.chip-list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; }

/* 7. Glass ---------------------------------------------------------------- */
.glass {
  position: relative; isolation: isolate;
  background: rgb(251 249 244 / .62);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 18px 40px -18px rgb(15 35 32 / .35);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .05; mix-blend-mode: multiply;
}
.glass--dark {
  background: rgb(11 26 24 / .5);
  border-color: rgb(255 255 255 / .12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 24px 48px -24px rgb(0 0 0 / .6);
  color: var(--paper);
}
.glass--dark::before { mix-blend-mode: screen; opacity: .04; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(251 249 244 / .95); }
  .glass--dark { background: rgb(11 26 24 / .94); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn--glass { background: var(--paper-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass--dark { background: var(--night-2); }
}

/* 8. Header --------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 14px 0 auto; z-index: 100; pointer-events: none;
  view-transition-name: site-header;
}
.nav-capsule {
  pointer-events: auto;
  width: min(100% - 2 * var(--gutter) + 16px, 1220px); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem; height: 62px; padding: 0 8px 0 18px; border-radius: 999px;
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease), transform var(--t-slow) var(--ease);
}
.is-scrolled .nav-capsule { background: rgb(251 249 244 / .8); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 12px 32px -14px rgb(15 35 32 / .38); }
.is-hidden .nav-capsule { transform: translateY(calc(-100% - 20px)); }

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-word { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.brand-sub { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-left: .55rem; border-left: 1px solid var(--line-strong); line-height: 1.1; }
.brand--light { color: var(--paper); }
.brand--light .brand-sub { color: rgb(243 239 230 / .7); border-color: rgb(255 255 255 / .25); }

.nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: .15rem; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .9rem; border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-item.is-open > .nav-link { background: rgb(15 35 32 / .06); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); background: rgb(15 35 32 / .07); }
.has-menu .nav-link { padding-right: .35rem; }
.nav-sub-toggle {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-left: -.1rem; border: 0; border-radius: 999px; background: none; color: var(--ink-3);
}
.nav-sub-toggle .icon { width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease); }
.nav-item.is-open .nav-sub-toggle .icon { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 460px; padding: .6rem; border-radius: 22px;
  background: rgb(251 249 244 / .88);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transform-origin: top center;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.nav-menu::after { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav-item.is-open .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.nav-menu ul { list-style: none; }
.nav-menu li a { display: flex; gap: 1rem; padding: .8rem .9rem; border-radius: 14px; text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.nav-menu li a:hover, .nav-menu li a:focus-visible { background: rgb(15 35 32 / .06); }
.nav-menu-ic { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: rgb(46 107 99 / .1); color: var(--jade); transition: background-color var(--t-fast), color var(--t-fast); }
.nav-menu-ic .icon { width: 1.1rem; height: 1.1rem; }
.nav-menu li a:hover .nav-menu-ic { background: var(--jade); color: #fff; }
.nav-menu-text { display: grid; gap: .1rem; }
.nav-menu-text strong { font-weight: 600; font-size: .98rem; }
.nav-menu-text span { font-size: .85rem; color: var(--ink-3); }
.nav-menu-all { display: flex; justify-content: space-between; align-items: center; margin-top: .35rem; padding: .85rem .9rem; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--jade); }

.menu-btn {
  display: none; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; margin-left: auto;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font-weight: 600; font-size: .9rem;
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  background: rgb(243 239 230 / .9); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2rem;
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu-inner { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: 2.5rem; min-height: 100%; }
.mobile-nav { list-style: none; }
.mobile-nav > li { border-bottom: 1px solid var(--line); }
.mobile-nav > li > a { display: block; padding: .9rem 0; font-family: var(--serif); font-size: clamp(1.9rem, 7vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; }
.mobile-sub { list-style: none; display: grid; gap: .1rem; padding: 0 0 1rem .2rem; }
.mobile-sub a { display: block; padding: .35rem 0; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.mobile-menu-foot { display: grid; gap: 1rem; margin-top: auto; }
.mobile-contact { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; }
.mobile-menu.is-open .mobile-nav > li { animation: rise var(--t-slow) var(--ease) both; }
.mobile-menu.is-open .mobile-nav > li:nth-child(2) { animation-delay: 40ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(3) { animation-delay: 80ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(4) { animation-delay: 120ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(5) { animation-delay: 160ms; }
.mobile-menu.is-open .mobile-nav > li:nth-child(6) { animation-delay: 200ms; }
body.menu-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta + .menu-btn { margin-left: .25rem; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .nav-cta + .menu-btn { margin-left: auto; }
  .brand-sub { display: none; }
  .nav-capsule { height: 56px; }
}

/* 9. Heroes --------------------------------------------------------------- */
.hero {
  position: relative; min-height: max(640px, min(100svh, 1000px)); display: grid; align-items: end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(2rem, 5vw, 3.5rem); isolation: isolate; z-index: 2;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
[data-parallax], [data-parallax] *, .frame, .frame * { overflow-anchor: none; }
/* parallax images are 12% taller than their frame and start centred, so travel never shows an edge */
.record-media .frame img, .tech-bg img, .band-image .frame img { position: relative; top: -6%; height: 112%; }
.hero-slides { position: absolute; left: 0; right: 0; top: -6%; height: 112%; will-change: transform; }
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 50%); transform-origin: 70% 55%; }
.hero-slide.is-active img { animation: kenburns 11s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.09) translateX(-1%); } to { transform: scale(1) translateX(0); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(243 239 230 / .94) 0%, rgb(243 239 230 / .82) 36%, rgb(243 239 230 / .38) 58%, rgb(243 239 230 / 0) 74%),
    linear-gradient(0deg, var(--paper) 0%, rgb(243 239 230 / 0) 26%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 780px; }
/* The pond card floats across the hero's lower edge, leaving the photo's subject clear */
@media (min-width: 901px) {
  .hero .pond-card { position: absolute; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: -4.5rem; width: 360px; z-index: 5; }
  .hero-foot { max-width: calc(100% - 400px); }
}
.hero .display { max-width: 11.5ch; }
.hero-lede { margin-top: 1.75rem; max-width: 34em; color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; }
.hero .btn-row { margin-top: 2.25rem; }
.hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muga); box-shadow: 0 0 0 4px rgb(184 134 43 / .2); }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: 1rem; border-top: 1px solid var(--line); }
.hero-switch { display: flex; gap: .5rem; align-items: center; }
.hs-btn { display: grid; gap: .5rem; min-width: 7.4rem; padding: .35rem 0; border: 0; background: none; text-align: left; color: var(--ink-3); font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; transition: color var(--t-med) var(--ease); }
.hs-btn:hover, .hs-btn[aria-pressed="true"] { color: var(--ink); }
.hs-bar { display: block; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.hs-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hs-toggle { width: 2.1rem; height: 2.1rem; margin-left: .25rem; border-radius: 50%; border: 1px solid var(--line-strong); background: rgb(255 255 255 / .35); display: grid; place-items: center; color: var(--ink); }
.hs-toggle .icon { width: .85rem; height: .85rem; }
.hero-caption { margin: 0; transition: opacity .5s var(--ease); }
.hero-caption.is-swapping { opacity: 0; }
.hero-foot .caption { margin: 0; }
.scroll-cue { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.scroll-cue span { display: block; width: 1px; height: 2rem; background: linear-gradient(var(--ink-3), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }

/* Pond calendar card */
.pond-card { border-radius: var(--r-lg); padding: 1.35rem 1.4rem 1.25rem; width: 100%; justify-self: end; }
.pond-card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.pond-card-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jade); }
.pond-card-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
.pond-card-month { font-family: var(--italic); font-style: italic; color: var(--muga-ink); font-size: 1.05rem; }
.pond-card h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.12; letter-spacing: -.015em; font-weight: 400; }
.pond-card h2, .pond-card p { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.pond-card.is-swapping h2, .pond-card.is-swapping p:not(.pond-legend) { opacity: 0; transform: translateY(6px); }
.farm-tabs { display: flex; gap: .35rem; margin-bottom: .85rem; }
.farm-tabs button { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem .32rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-size: .78rem; font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease); }
.farm-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.farm-tabs .icon { width: .95rem; height: .95rem; }
.pond-card p { margin-top: .6rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.pond-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 1.1rem; }
.pond-track i { height: 6px; border-radius: 3px; background: var(--c, var(--silt)); opacity: .45; position: relative; }
.pond-track i[data-phase="prep"], .pond-track i[data-phase="sow"] { --c: #B7A27A; }
.pond-track i[data-phase="stock"] { --c: #6E9E8F; }
.pond-track i[data-phase="grow"] { --c: var(--jade); }
.pond-track i[data-phase="harvest"] { --c: var(--muga); }
.pond-track i.is-now { opacity: 1; box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3.5px var(--ink); }
.pond-legend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: .45rem; font-size: .66rem; color: var(--ink-3); text-align: center; }
.pond-legend span.is-now { color: var(--ink); font-weight: 700; }
.pond-nav { display: inline-flex; gap: .3rem; align-items: center; }
.pond-nav button { border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.pond-nav button:hover { background: var(--ink); color: var(--paper); }
.pond-nav .icon { width: .85rem; height: .85rem; }
.pond-nav button:first-child .icon { transform: rotate(180deg); }
.pond-card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .85rem; font-weight: 600; color: var(--jade); text-decoration: none; }
.pond-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  /* Photo becomes its own band; the headline rises out of its faded lower edge */
  .hero { display: block; min-height: 0; padding: 0 0 2rem; }
  .hero-media { position: relative; inset: auto; height: clamp(320px, 58svh, 560px); z-index: 0; }
  .hero-slide img { object-position: var(--mpos, 78% 50%); }
  .hero::before { inset: 0 0 auto; height: clamp(320px, 58svh, 560px); z-index: 1; background: linear-gradient(0deg, var(--paper) 0%, rgb(243 239 230 / .7) 13%, rgb(243 239 230 / 0) 36%), linear-gradient(180deg, rgb(243 239 230 / .5) 0%, rgb(243 239 230 / 0) 24%); }
  .hero > .wrap { position: relative; z-index: 2; margin-top: -4rem; }
  .hero-grid { gap: 2rem; }
  .pond-card { justify-self: stretch; max-width: none; }
}

/* Inner page hero */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(4rem, 9vw, 7.5rem)) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.page-hero .h1 { max-width: 16ch; }
.page-hero .lede { margin-top: 1.5rem; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2rem var(--gutter); align-items: end; }
.page-hero-aside { border-left: 1px solid var(--line); padding-left: 1.5rem; display: grid; gap: 1rem; }
.page-hero-contours { position: absolute; right: -8%; top: 8%; width: min(62vw, 820px); aspect-ratio: 16 / 9; color: var(--jade); opacity: .16; pointer-events: none; z-index: -1;
  -webkit-mask: url("../img/contours-wide.svg") center / contain no-repeat; mask: url("../img/contours-wide.svg") center / contain no-repeat; background: currentColor; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; font-size: var(--step--1); color: var(--ink-3); margin-bottom: 1.5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } .page-hero-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; } }

.band-image { position: relative; }
.band-image figure { margin: 0; }
.band-image .frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.band-image .frame img { width: 100%; object-fit: cover; }
@media (max-width: 700px) { .band-image .frame { aspect-ratio: 4 / 3; } }

/* 10. Home sections ------------------------------------------------------- */

/* Statement */
.statement { position: relative; overflow: hidden; }
.statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem var(--gutter); align-items: start; }
.statement-text { font-family: var(--serif); font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.25rem); line-height: 1.16; letter-spacing: -.02em; max-width: 24ch; text-wrap: pretty; }
.statement-text .w { transition: color .5s var(--ease); }
.js .statement-text[data-words] .w { color: rgb(15 35 32 / .52); }
.js .statement-text[data-words] .w.is-lit { color: var(--ink); }
.statement-text em { font-family: var(--italic); font-style: italic; font-weight: 350; color: var(--jade) !important; }
.js .statement-text[data-words] em .w:not(.is-lit) { color: rgb(46 107 99 / .76); }
.statement-text em .w.is-lit { color: var(--jade); }
.principles { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: .75rem; }
.principles li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.principles strong { display: block; font-weight: 600; margin-bottom: .25rem; }
.principles span { color: var(--ink-3); font-size: .93rem; line-height: 1.5; display: block; }
.statement-contours { position: absolute; right: -10%; bottom: -30%; width: 60vw; max-width: 900px; aspect-ratio: 1; color: var(--muga); opacity: .18; pointer-events: none; z-index: -1;
  -webkit-mask: url("../img/contours-square.svg") center / contain no-repeat; mask: url("../img/contours-square.svg") center / contain no-repeat; background: currentColor; }
@media (max-width: 900px) { .statement-grid { grid-template-columns: minmax(0, 1fr); } }

/* Map */
.where-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem var(--gutter); align-items: center; }
.where-copy .h2 { max-width: 13ch; }
.where-copy .prose { margin-top: 1.5rem; }
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; margin-top: 2rem; gap: 2px; }
.segmented button {
  border: 0; background: transparent; border-radius: 999px; padding: .6rem 1.15rem; font-weight: 600; font-size: .9rem; color: var(--ink-2);
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 6px 16px -8px rgb(15 35 32 / .6); }
.facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.facts .num { font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1; display: block; }
.facts .num small { font-size: .5em; letter-spacing: 0; margin-left: .15em; color: var(--ink-3); }
.facts .fact-label { display: block; margin-top: .5rem; font-size: .85rem; line-height: 1.45; color: var(--ink-3); }
.source { margin-top: 1.25rem; font-size: .75rem; color: var(--ink-3); line-height: 1.5; }
.source a { color: inherit; }

.map-panel { position: relative; border-radius: var(--r-lg); padding: clamp(1rem, 2.5vw, 2rem); aspect-ratio: 1 / .92; display: grid; place-items: center; overflow: hidden; }
.map-panel-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 70% 30%, #E4EDE8 0%, var(--paper-sunk) 70%); }
.map-panel-bg::after { content: ""; position: absolute; inset: -10%; background: currentColor; color: var(--jade); opacity: .1;
  -webkit-mask: url("../img/contours-wide.svg") center / cover no-repeat; mask: url("../img/contours-wide.svg") center / cover no-repeat; }
.map-svg { width: 100%; height: 100%; overflow: visible; }
.map-rest { fill: #DCD3C1; stroke: #DCD3C1; stroke-width: 1; stroke-linejoin: round; transition: fill var(--t-slow) var(--ease); }
.map-state { fill: #BFD5CC; stroke: var(--paper-raised); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--t-med) var(--ease); }
.map-state:hover { fill: #A9C8BC; }
.map-assam { fill: var(--jade); }
.map-assam:hover { fill: var(--jade-deep); }
.map-pin { cursor: pointer; }
.map-pin circle { transform-box: fill-box; transform-origin: center; transform: scale(var(--pin-k, 1)); transition: transform var(--t-slow) var(--ease); }
.map-pin-dot { fill: var(--muga); stroke: var(--paper-raised); stroke-width: .8; }
.map-pin-halo { fill: var(--muga); opacity: .22; animation: halo 2.8s var(--ease) infinite; }
.map-pin.is-active .map-pin-dot { fill: var(--ink); }
.map-pin:nth-child(3n+1) .map-pin-halo { animation-delay: .6s; }
.map-pin:nth-child(3n+2) .map-pin-halo { animation-delay: 1.3s; }
.map-tip {
  position: absolute; z-index: 3; pointer-events: none; padding: .55rem .8rem; border-radius: 12px; font-size: .8rem; line-height: 1.35; max-width: 220px;
  background: var(--ink); color: var(--paper); opacity: 0; transform: translate(-50%, calc(-100% - 12px)) scale(.96); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.map-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.map-tip strong { display: block; font-weight: 600; }
.map-legend { position: absolute; left: 1.25rem; bottom: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .75rem; color: var(--ink-3); }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.map-places { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin-top: 1.25rem; }
.map-places button { border: 1px solid var(--line); background: rgb(255 255 255 / .4); border-radius: 999px; padding: .35rem .75rem; font-size: .8rem; color: var(--ink-2); transition: background-color var(--t-fast), border-color var(--t-fast); }
.map-places button:hover, .map-places button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.map-places button[hidden] { display: none; }
@media (max-width: 960px) { .where-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; } .facts .fact-label { margin-top: 0; } }

/* Services explorer */
.explorer { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--gutter); align-items: stretch; }
.explorer-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.explorer-tab {
  position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 .5rem; text-align: left; align-items: baseline;
  padding: 1.35rem .5rem 1.35rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-3);
  transition: color var(--t-med) var(--ease);
}
.explorer-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--jade); transition: width var(--t-slow) var(--ease); }
.explorer-tab[aria-selected="true"] { color: var(--ink); }
.explorer-tab[aria-selected="true"]::after { width: 100%; opacity: .35; }
.explorer-tab:hover { color: var(--ink); }
.explorer-tab { grid-template-columns: 3rem 1fr; align-items: center; }
.explorer-tab-ic { grid-row: span 2; align-self: start; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink-3); transition: all var(--t-med) var(--ease); }
.explorer-tab-ic .icon { width: 1.15rem; height: 1.15rem; }
.explorer-tab[aria-selected="true"] .explorer-tab-ic { background: var(--jade); border-color: var(--jade); color: #fff; box-shadow: 0 8px 18px -8px rgb(46 107 99 / .7); }
.explorer-tab:hover .explorer-tab-ic { border-color: var(--ink); color: var(--ink); }
.explorer-tab-timer { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--muga); transform: scaleX(0); transform-origin: left; z-index: 1; }
.explorer-tab-name { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.015em; }
.explorer-tab-line { grid-column: 2; font-size: .88rem; margin-top: .35rem; color: var(--ink-3); }
.explorer-cta { margin-top: 2rem; }

.explorer-panel { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 620px; isolation: isolate; color: var(--ink); }
.explorer-panel[hidden] { display: none; }
.explorer-panel.is-entering { animation: panel-in var(--t-slow) var(--ease) both; }
.explorer-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.explorer-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 26 24 / 0) 30%, rgb(11 26 24 / .45) 100%); }
.explorer-info { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; max-width: 520px; border-radius: 22px; padding: 1.5rem 1.5rem 1.35rem; }
.explorer-info .h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.explorer-info .h3 em { color: var(--jade); }
.explorer-info .chip-list { margin-top: 1rem; }
.explorer-info .chip { background: rgb(255 255 255 / .45); }
.explorer-points { list-style: none; margin-top: 1rem; display: grid; gap: .45rem; font-size: .92rem; color: var(--ink-2); }
.explorer-points li { display: flex; gap: .6rem; }
.explorer-points .icon { color: var(--jade); margin-top: .2rem; width: 1rem; height: 1rem; }
.explorer-info .link-arrow { margin-top: 1.25rem; }
.explorer-visual { position: absolute; top: 1rem; right: 1rem; width: min(290px, 44%); border-radius: 20px; padding: 1rem 1.1rem; font-size: .8rem; }
@media (max-width: 960px) {
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-tabs { flex-direction: row; overflow-x: auto; border-top: 0; gap: .5rem; scrollbar-width: none; padding-bottom: .25rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
  .explorer-tabs::-webkit-scrollbar { display: none; }
  .explorer-tab { flex: none; display: flex; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; scroll-snap-align: start; }
  .explorer-tab::after { display: none; }
  .explorer-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .explorer-tab-ic { width: 1.6rem; height: 1.6rem; border: 0; }
  .explorer-tab[aria-selected="true"] .explorer-tab-ic { background: transparent; box-shadow: none; color: #E2C179; }
  .explorer-tab-timer { display: none; }
  .explorer-tab-name { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
  .explorer-tab-line { display: none; }
  .explorer-cta { display: none; }
  .explorer-panel { min-height: 0; display: flex; flex-direction: column; }
  .explorer-panel[hidden] { display: none; }
  .explorer-panel > img { position: relative; height: 300px; }
  .explorer-panel::after { display: none; }
  .explorer-info { position: relative; inset: auto; max-width: none; margin: -3rem .75rem .75rem; }
  .explorer-visual { top: .75rem; right: .75rem; width: min(240px, 62%); }
}
@media (max-width: 560px) { .explorer-visual { display: none; } }

/* Signature visuals inside explorer / service pages */
.viz-label { display: flex; justify-content: space-between; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; }
.viz-title { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; margin-bottom: .75rem; }
.viz-rows { display: grid; gap: 0; }
.viz-rows div { display: flex; justify-content: space-between; gap: .75rem; padding: .38rem 0; border-top: 1px solid var(--line); }
.viz-rows dt { color: var(--ink-3); }
.viz-rows dd { margin: 0; font-weight: 600; }
.viz-stamp { margin-top: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; background: rgb(46 107 99 / .12); color: var(--jade-deep); font-weight: 600; font-size: .72rem; }
.viz-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; height: 110px; padding-bottom: .25rem; border-bottom: 1px solid var(--line-strong); }
.viz-bar { display: grid; gap: .3rem; align-items: end; height: 100%; grid-template-rows: 1fr auto; }
.viz-bar-fills { display: flex; gap: 3px; align-items: end; height: 100%; }
.viz-bar-fills i { flex: 1; border-radius: 4px 4px 1px 1px; height: var(--h); background: var(--jade); transform-origin: bottom; transform: scaleY(var(--grow, 1)); transition: transform 1s var(--ease); }
.viz-bar-fills i + i { background: var(--silt); }
.viz-bar-val { font-size: .7rem; font-weight: 600; text-align: center; }
.viz-axis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .35rem; font-size: .68rem; color: var(--ink-3); text-align: center; }
.viz-key { display: flex; gap: .9rem; margin-top: .6rem; font-size: .7rem; color: var(--ink-3); }
.viz-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .3rem; background: var(--jade); }
.viz-key i.c { background: var(--silt); }
.viz-sensor { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.viz-sensor div { padding: .55rem .6rem; border-radius: 12px; background: rgb(255 255 255 / .45); border: 1px solid rgb(255 255 255 / .6); }
.viz-sensor dt { font-size: .66rem; color: var(--ink-3); letter-spacing: .04em; }
.viz-sensor dd { margin: .1rem 0 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.viz-sensor dd small { font-family: var(--sans); font-size: .62rem; color: var(--ink-3); margin-left: .2rem; }
.viz-status { margin-top: .6rem; display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--ink-2); }
.viz-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3F9C72; animation: pulse 1.6s ease-in-out infinite; }
.viz-plan > svg { width: 100%; height: auto; }
.viz-plan rect.p { fill: rgb(46 107 99 / .22); stroke: var(--jade); stroke-width: 1; }
.viz-plan rect.b { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.viz-plan text { font-family: var(--sans); font-size: 9px; fill: var(--ink-2); font-weight: 600; }
.glass--dark .viz-label, .glass--dark .viz-rows dt, .glass--dark .viz-sensor dt { color: rgb(243 239 230 / .65); }
.glass--dark .viz-sensor div { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .1); }
.glass--dark .viz-sensor dd small { color: rgb(243 239 230 / .6); }
.glass--dark .viz-status { color: rgb(243 239 230 / .8); }

/* Track record */
.record-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem var(--gutter); align-items: start; }
.record-media { position: sticky; top: calc(var(--header-h) + 2rem); }
.record-media .frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.record-media .frame img { width: 100%; object-fit: cover; }
.metrics { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin-top: 2.5rem; }
.metrics li { padding: 1.6rem 0 1.8rem; border-top: 1px solid var(--line-strong); }
.metrics .num { display: block; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.25rem); line-height: 1; letter-spacing: -.035em; }
.metrics .num .affix { color: var(--jade); }
.metrics p { margin-top: .6rem; color: var(--ink-3); font-size: .95rem; max-width: 22ch; }
@media (max-width: 900px) { .record-grid { grid-template-columns: minmax(0, 1fr); } .record-media { position: relative; top: 0; } .record-media .frame { aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .metrics .num { font-size: 2.1rem; } .metrics p { font-size: .85rem; } }

/* Process */
.process { position: relative; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; list-style: none; }
.process-line { position: absolute; left: 0; right: 0; top: 1.35rem; height: 1px; background: var(--line-strong); }
.process-line i { position: absolute; inset: 0; background: var(--jade); transform-origin: left; transform: scaleX(var(--p, 0)); height: 2px; top: -.5px; }
.process-step { position: relative; }
.process-btn { display: grid; gap: .5rem; width: 100%; padding: 0 1rem 1rem 0; border: 0; background: none; text-align: left; color: var(--ink-3); transition: color var(--t-med) var(--ease); }
.process-btn:hover, .process-btn[aria-selected="true"] { color: var(--ink); }
.process-dot .icon { width: 1.2rem; height: 1.2rem; }
.process-ticks { display: flex; gap: 4px; margin-bottom: .8rem; }
.process-ticks i { width: 20px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background-color var(--t-med) var(--ease); }
.process-ticks i.is-on { background: var(--jade); }
.process-dot { position: relative; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-2); transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.process-step.is-past .process-dot { border-color: var(--jade); color: var(--jade); }
.process-btn[aria-selected="true"] .process-dot { background: var(--jade); border-color: var(--jade); color: #fff; transform: scale(1.08); }
.process-name { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); letter-spacing: -.015em; line-height: 1.1; margin-top: .9rem; color: inherit; }
.process-line-txt { font-size: .9rem; line-height: 1.45; color: var(--ink-3); }
.process-detail { margin-top: 2.5rem; border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr); gap: 1.5rem var(--gutter); align-items: start; background: var(--paper-raised); border: 1px solid var(--line); }
.process-detail[hidden] { display: none; }
.process-detail .h3 { font-size: var(--step-2); }
.process-detail .label { margin-bottom: .5rem; display: block; }
.process-out { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.process-out .icon { color: var(--muga-ink); margin-top: .15rem; }
.js .process-detail.is-entering > * { animation: rise var(--t-slow) var(--ease) both; }
.js .process-detail.is-entering > *:nth-child(2) { animation-delay: 60ms; }
.js .process-detail.is-entering > *:nth-child(3) { animation-delay: 120ms; }
@media (max-width: 960px) {
  .process-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .process-line { left: 1.35rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process-line i { transform-origin: top; transform: scaleY(var(--p, 0)); width: 2px; height: auto; left: -.5px; top: 0; }
  .process-btn { grid-template-columns: 2.7rem 1fr; column-gap: 1rem; padding: 0 0 1.75rem; align-items: start; }
  .process-dot { grid-row: span 2; }
  .process-name { margin-top: .35rem; }
  .process-detail { display: none !important; }
  .process-step .process-more { display: block; }
}
.process-more { display: none; grid-column: 2; margin: -1rem 0 1.75rem 3.7rem; font-size: .92rem; color: var(--ink-2); }
.process-more strong { color: var(--ink); }

/* Technology — dark section */
.on-dark { color: var(--paper); }
.on-dark .prose, .on-dark .lede { color: rgb(243 239 230 / .78); }
.tech { background: var(--night); overflow: hidden; isolation: isolate; }
.tech-bg { position: absolute; inset: 0; z-index: -1; }
.tech-bg img { width: 100%; object-fit: cover; opacity: .32; filter: saturate(.8); }
.tech-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgb(11 26 24 / .7) 30%, rgb(11 26 24 / .82) 70%, var(--night) 100%), linear-gradient(90deg, var(--night) 0%, rgb(11 26 24 / .2) 60%); }
.tech-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem var(--gutter); align-items: center; }
.tech-list { list-style: none; margin-top: 2.5rem; border-top: 1px solid var(--line-light); }
.tech-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .25rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-light); }
.tech-ic { grid-row: span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .18); color: #E2C179; transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.tech-ic .icon { width: 1.15rem; height: 1.15rem; }
.tech-list li:hover .tech-ic { transform: rotate(-8deg) scale(1.08); background: rgb(226 193 121 / .14); }
.tech-list strong { font-weight: 600; font-size: 1.05rem; }
.tech-list p { grid-column: 2; color: rgb(243 239 230 / .72); font-size: .94rem; line-height: 1.55; }
@media (max-width: 960px) { .tech-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {     }

.sdg-old { margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: 2.5rem; border-top: 1px solid var(--line-light); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--gutter); }
/* Audiences */
.who-list { list-style: none; border-top: 1px solid var(--line-strong); }
.who-row { border-bottom: 1px solid var(--line); }
.who-link { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr) 2.5rem; gap: 1rem var(--gutter); align-items: center; padding: 1.6rem .25rem; text-decoration: none; position: relative; transition: background-color var(--t-med) var(--ease), padding var(--t-med) var(--ease); border-radius: 14px; }
.who-link:hover { background: rgb(251 249 244 / .75); padding-inline: 1rem; }
.who-name { font-weight: 600; font-size: 1.02rem; }
.who-q { font-family: var(--italic); font-style: italic; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.who-a { color: var(--ink-3); font-size: .92rem; line-height: 1.5; }
.who-go { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.who-link:hover .who-go { background: var(--ink); color: var(--paper); transform: rotate(-45deg); }
@media (max-width: 960px) {
  .who-link { grid-template-columns: 1fr 2.5rem; gap: .5rem 1rem; }
  .who-name { grid-column: 1; }
  .who-q, .who-a { grid-column: 1; }
  .who-go { grid-column: 2; grid-row: 1 / span 3; }
}

/* Case cards */
.case-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); }
.case-grid--home .case-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.case-grid--home .case-card:nth-child(n+2) { grid-column: span 5; }
.case-grid--home .case-card:nth-child(1) .case-media { aspect-ratio: 4 / 3.4; }
.case-grid--all .case-card { grid-column: span 4; }
.case-card { position: relative; display: flex; flex-direction: column; }
.case-card[hidden] { display: none; }
.case-media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.case-card:hover .case-media img { transform: scale(1.045); }
.case-tag { position: absolute; left: .75rem; top: .75rem; padding: .35rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.case-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: 1.1rem; font-size: var(--step--1); color: var(--ink-3); }
.case-meta span + span::before { content: "·"; margin-right: .75rem; }
.case-title { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.16; letter-spacing: -.015em; margin-top: .45rem; }
.case-grid--home .case-card:nth-child(1) .case-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); }
.case-title a { text-decoration: none; }
.case-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.case-card:hover .case-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.case-result { display: flex; gap: .9rem; align-items: baseline; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.case-result .num { font-size: 1.6rem; line-height: 1; color: var(--jade); white-space: nowrap; }
.case-result span { font-size: .85rem; color: var(--ink-3); line-height: 1.4; }
.case-dek { margin-top: .6rem; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 960px) {
  .case-grid--home .case-card:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .case-grid--all .case-card { grid-column: span 6; }
}
@media (max-width: 620px) { .case-grid--all .case-card { grid-column: 1 / -1; } }

/* CTA band */
.cta-band { position: relative; background: var(--jade-deep); color: var(--paper); overflow: hidden; isolation: isolate; padding-block: clamp(4.5rem, 10vw, 8rem); }
.cta-band::before { content: ""; position: absolute; inset: -20% -10% -20% 30%; z-index: -1; background: #fff; opacity: .09;
  -webkit-mask: url("../img/contours-wide.svg") center / contain no-repeat; mask: url("../img/contours-wide.svg") center / contain no-repeat; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 120% at 85% 0%, #2B6259 0%, transparent 60%); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem var(--gutter); align-items: end; }
.cta-band .h2 { font-size: var(--step-4); max-width: 13ch; }
.cta-band .h2 em { color: #E2C179; }
.cta-routes { list-style: none; display: grid; gap: .75rem; }
.cta-route { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: 1.2rem 1.35rem; border-radius: 20px; text-decoration: none; transition: background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.cta-route:hover { background: rgb(255 255 255 / .12); transform: translateX(4px); }
.cta-route strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; }
.cta-route span { grid-column: 1; font-size: .88rem; color: rgb(243 239 230 / .72); }
.cta-route .icon { grid-column: 2; grid-row: 1 / span 2; width: 1.4rem; height: 1.4rem; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }

/* 11. Inner pages --------------------------------------------------------- */

/* Service overview rows */
.pillar { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2rem var(--gutter); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.pillar:nth-child(even) .pillar-media { order: 2; }
.pillar-media { position: relative; }
.pillar-media .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; isolation: isolate; }
.pillar-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.pillar-media .explorer-visual { top: auto; bottom: 1rem; right: 1rem; }
.pillar-num { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--italic); font-style: italic; color: var(--muga-ink); font-size: 1.2rem; }
.pillar-num .icon { width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 50%; background: var(--jade-soft); color: var(--jade-deep); }
.pillar .h2 { margin-top: .5rem; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); }
.pillar .prose { margin-top: 1.1rem; }
.pillar-items { list-style: none; columns: 2; column-gap: 1.5rem; margin-top: 1.5rem; font-size: .92rem; color: var(--ink-2); }
.pillar-items li { break-inside: avoid; padding: .45rem 0; border-top: 1px solid var(--line); }
.pillar .btn-row { margin-top: 1.75rem; }
@media (max-width: 900px) { .pillar { grid-template-columns: minmax(0, 1fr); } .pillar:nth-child(even) .pillar-media { order: 0; } }
@media (max-width: 520px) { .pillar-items { columns: 1; } }

/* Fit finder */
.finder { border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem var(--gutter); background: var(--paper-raised); border: 1px solid var(--line); }
.finder-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.finder-options button { border: 1px solid var(--line-strong); background: transparent; border-radius: 999px; padding: .55rem 1rem; font-weight: 500; font-size: .9rem; transition: all var(--t-fast) var(--ease); }
.finder-options button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.finder-result { border-left: 1px solid var(--line); padding-left: var(--gutter); }
.finder-q { font-family: var(--italic); font-style: italic; font-size: var(--step-2); line-height: 1.25; }
.finder-a { margin-top: .75rem; color: var(--ink-2); }
.finder-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
@media (max-width: 900px) { .finder { grid-template-columns: minmax(0, 1fr); } .finder-result { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; } }

/* Service detail */
.svc-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem var(--gutter); }
.svc-for h2 { margin-bottom: .9rem; }
.svc-items { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); counter-reset: item; }
.svc-items li { display: grid; grid-template-columns: 2.75rem 1fr; gap: .2rem 1rem; padding: 1.6rem 0; border-top: 1px solid var(--line-strong); counter-increment: item; }
.svc-items li::before { content: ""; width: 1.7rem; height: 1.7rem; margin-top: .2rem; border-radius: 50%; background: var(--jade-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%231C4640' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 58% no-repeat; }
.svc-items h3 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; }
.svc-items p { grid-column: 2; color: var(--ink-2); font-size: .96rem; margin-top: .35rem; }
@media (max-width: 800px) { .svc-intro, .svc-items { grid-template-columns: minmax(0, 1fr); } }

.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-raised); }
.study-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .93rem; }
.study-table th, .study-table td { text-align: left; vertical-align: top; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.study-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-sunk); }
.study-table tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.2; width: 22%; }
.study-table td { color: var(--ink-2); }
.study-table td.dur { white-space: nowrap; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.study-table tbody tr { transition: background-color var(--t-fast); }
.study-table tbody tr:hover { background: rgb(46 107 99 / .05); }
.study-table tbody tr:last-child > * { border-bottom: 0; }

.trio { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.trio li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.trio h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .5rem; }
.trio p { color: var(--ink-2); font-size: .96rem; }
.on-dark .trio li { border-color: #E2C179; }
.on-dark .trio p { color: rgb(243 239 230 / .78); }
@media (max-width: 800px) { .trio { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 3.4rem; }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--jade); background: radial-gradient(circle, var(--jade) 0 22%, transparent 24%); }
.steps li:last-child::before { background: var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 50% no-repeat; }
.steps li::after { content: ""; position: absolute; top: 1.25rem; left: 3.25rem; right: -1rem; height: 1px; background: var(--line-strong); }
.steps li:last-child::after { display: none; }
.steps h3 { font-weight: 600; font-size: 1.05rem; }
.steps p { margin-top: .4rem; color: var(--ink-3); font-size: .93rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .steps li::after { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.deliverables { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.deliverables li { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.1rem; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--line); font-weight: 500; font-size: .95rem; }
.deliverables .icon { color: var(--jade); width: 1.4rem; height: 1.4rem; }

.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.35rem 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 1.4rem; height: 1.4rem; transition: transform var(--t-med) var(--ease); color: var(--jade); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .faq-a { padding: 0 3rem 1.5rem 0; color: var(--ink-2); max-width: 46em; }
.faq details[open] .faq-a { animation: rise var(--t-med) var(--ease) both; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--gutter); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Asset management: eligibility + models */
.checker { border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.checker-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; margin-top: 1.25rem; }
.checker input { flex: 1 1 140px; min-height: 3.25rem; padding: .7rem 1rem; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper-raised); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.checker select { min-height: 3.25rem; padding: .7rem 2.2rem .7rem 1rem; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230F2320' stroke-width='1.6'/%3E%3C/svg%3E") right .75rem center / 1rem no-repeat; appearance: none; font-weight: 600; }
.checker-out { margin-top: 1.25rem; min-height: 3.5rem; font-size: 1rem; color: var(--ink-2); }
.checker-out strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); line-height: 1.2; margin-bottom: .25rem; }
.checker-out.is-yes strong { color: var(--jade); }
.checker-gauge { position: relative; height: 8px; border-radius: 4px; background: var(--paper-sunk); margin-top: 1.25rem; overflow: hidden; }
.checker-gauge i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(90deg, var(--silt), var(--jade)); border-radius: 4px; transition: width var(--t-slow) var(--ease); }
.checker-gauge b { position: absolute; top: -4px; bottom: -4px; left: 40%; width: 2px; background: var(--ink); }
.checker-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-3); margin-top: .4rem; }
.checker-scale span:nth-child(2) { position: relative; left: -10%; font-weight: 600; color: var(--ink); }
.models { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.models li { padding: 1.5rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-raised); }
.models h3 { font-family: var(--serif); font-size: 1.5rem; }
.models p { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 700px) { .models { grid-template-columns: minmax(0, 1fr); } }

/* Product strip (value addition) */
.products { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem var(--gutter); align-items: center; }
.products-media { display: grid; grid-template-columns: 1fr 1.3fr; gap: .75rem; }
.products-media .frame { border-radius: var(--r-md); overflow: hidden; }
.products-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.products-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.products-list li { padding: 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-raised); }
.products-list strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.products-list span { font-size: .85rem; color: var(--ink-3); }
@media (max-width: 900px) { .products { grid-template-columns: minmax(0, 1fr); } }

/* Work filters */
.filters { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-bottom: 2.5rem; padding: .9rem 1rem; border-radius: 999px; position: sticky; top: calc(var(--header-h) + 6px); z-index: 20; }
.filter-group { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.filter-group .label { margin-right: .35rem; }
.filter-btn { border: 1px solid transparent; background: transparent; border-radius: 999px; padding: .45rem .85rem; font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: all var(--t-fast) var(--ease); }
.filter-btn:hover { border-color: var(--line-strong); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filter-count { margin-left: auto; font-size: .85rem; color: var(--ink-3); }
.empty-state { padding: 3rem 0; text-align: center; color: var(--ink-3); }
@media (max-width: 800px) { .filters { border-radius: 22px; position: relative; top: 0; } .filter-count { margin-left: 0; } }

/* Case detail */
.case-hero .h1 { max-width: 20ch; font-size: clamp(2.3rem, 1.6rem + 3vw, 4.25rem); }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem var(--gutter); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.case-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.case-facts dd { margin: .3rem 0 0; font-weight: 500; }
.results { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.results li { padding-top: 1.25rem; border-top: 2px solid var(--jade); }
.results .num { display: block; font-size: clamp(2.1rem, 1.5rem + 2vw, 3.25rem); line-height: 1; color: var(--ink); }
.results p { margin-top: .6rem; color: var(--ink-3); font-size: .95rem; }
.case-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--gutter); }
.case-body + .case-body { margin-top: clamp(3rem, 6vw, 4.5rem); }
.case-body h2 { font-family: var(--serif); font-size: var(--step-2); }
.case-steps { list-style: none; counter-reset: s; display: grid; gap: 0; }
.case-steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.case-steps li::before { content: ""; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; background: var(--jade-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%231C4640' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 58% no-repeat; }
.case-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.case-next .label { display: block; margin-bottom: .35rem; }
.case-next .h3 { transition: color var(--t-fast); }
.case-next:hover .h3 { color: var(--jade); }
.case-next .who-go { transition: all var(--t-med) var(--ease); }
.case-next:hover .who-go { background: var(--ink); color: var(--paper); }
.placeholder-note { font-size: .78rem; color: var(--ink-3); border: 1px dashed var(--line-strong); padding: .6rem .85rem; border-radius: 10px; display: inline-block; }
@media (max-width: 800px) { .case-facts { grid-template-columns: 1fr 1fr; } .results, .case-body { grid-template-columns: minmax(0, 1fr); } }

/* About */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem var(--gutter); align-items: start; }
.story-media { display: grid; gap: .75rem; }
.story-media .frame { border-radius: var(--r-lg); overflow: hidden; }
.story-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.story .prose { font-size: var(--step-1); line-height: 1.6; max-width: 34em; }
.story .prose p:first-child::first-line { font-weight: 600; color: var(--ink); }
.pullquote { position: relative; margin: 2.5rem 0 0; padding: 1.5rem 0 0 1.5rem; border-left: 2px solid var(--muga); font-family: var(--italic); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--ink); max-width: 26em; }
.disciplines { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); }
.disciplines li { padding: 1.4rem 0; border-top: 1px solid var(--line-strong); }
.disciplines h3 { font-family: var(--serif); font-size: 1.4rem; }
.disciplines p { margin-top: .35rem; color: var(--ink-3); font-size: .94rem; }
.languages { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.languages li { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); padding: .2rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.institutions { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.institutions li { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-raised); font-size: .93rem; color: var(--ink-2); }
.institutions strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .2rem; }
.disciplines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } .disciplines, .disciplines--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .disciplines { grid-template-columns: minmax(0, 1fr); } }

/* Calendar (approach page) */
.calendar { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.calendar button { width: 100%; border: 0; padding: .7rem 0 .6rem; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink-2); font-size: .78rem; font-weight: 600; letter-spacing: .04em; position: relative; transition: background-color var(--t-fast); }
.calendar button::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 4px; height: 3px; border-radius: 2px; background: var(--c); }
.calendar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.calendar [data-phase="prep"], .calendar [data-phase="sow"] { --c: #B7A27A; }
.cal-switch { margin: 0 0 1rem; }
.cal-switch .icon { width: 1rem; height: 1rem; vertical-align: -3px; }
.calendar [data-phase="stock"] { --c: #6E9E8F; }
.calendar [data-phase="grow"] { --c: var(--jade); }
.calendar [data-phase="harvest"] { --c: var(--muga); }
.calendar-detail { margin-top: 1.25rem; border-radius: var(--r-md); padding: 1.5rem; background: var(--paper-raised); border: 1px solid var(--line); display: grid; grid-template-columns: 12rem 1fr; gap: 1rem 2rem; }
.calendar-detail .h3 { font-size: 1.6rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1rem; font-size: .8rem; color: var(--ink-3); }
.calendar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
@media (max-width: 700px) { .calendar { grid-template-columns: repeat(6, 1fr); } .calendar-detail { grid-template-columns: minmax(0, 1fr); } }

.timeline { list-style: none; counter-reset: t; }
.timeline > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.2fr); gap: 1rem var(--gutter); padding: 2rem 0; border-top: 1px solid var(--line-strong); counter-increment: t; align-items: start; }
.timeline-name { display: flex; gap: 1rem; align-items: center; }
.timeline-ic { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: #fff; }
.timeline-ic .icon { width: 1.25rem; height: 1.25rem; }
.timeline-name h3 { font-family: var(--serif); font-size: var(--step-3); line-height: 1; letter-spacing: -.02em; }
.timeline p { color: var(--ink-2); }
.timeline .process-out { font-size: .95rem; }
@media (max-width: 900px) { .timeline > li { grid-template-columns: minmax(0, 1fr); } }

.models-3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.models-3 li { padding: 1.75rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper-raised); display: flex; flex-direction: column; gap: .6rem; }
.models-3 h3 { font-family: var(--serif); font-size: 1.6rem; }
.models-3 p { color: var(--ink-2); font-size: .95rem; }
.models-3 .small { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .models-3 { grid-template-columns: minmax(0, 1fr); } }

/* 12. Contact & forms ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem var(--gutter); align-items: start; }
.contact-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
.contact-direct { list-style: none; display: grid; gap: .6rem; margin-top: 2rem; }
.contact-direct a, .contact-direct span.row { display: grid; grid-template-columns: 2.75rem 1fr; gap: .1rem 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--line); background: var(--paper-raised); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-med) var(--ease); }
.contact-direct a:hover { border-color: var(--ink); transform: translateX(3px); }
.contact-direct .ic { grid-row: span 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper-sunk); color: var(--jade); }
.contact-direct strong { font-weight: 600; }
.contact-direct small { color: var(--ink-3); font-size: .82rem; }
.next-steps { list-style: none; counter-reset: n; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; color: var(--ink-2); }
.next-steps li::before { content: ""; width: 8px; height: 8px; margin: .55rem 0 0 .3rem; border-radius: 50%; background: var(--muga); box-shadow: 0 0 0 4px rgb(184 134 43 / .16); }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-aside { position: static; } }

.enquiry-shell { position: relative; border-radius: 30px; padding: 6px; isolation: isolate; overflow: hidden; }
.enquiry-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jade-deep); }
.enquiry-shell::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .12;
  -webkit-mask: url("../img/contours-square.svg") 120% 30% / 90% no-repeat; mask: url("../img/contours-square.svg") 120% 30% / 90% no-repeat; }
.enquiry { border-radius: 26px; padding: clamp(1.25rem, 3vw, 2.25rem); background: rgb(251 249 244 / .9); }
.enquiry-progress { display: flex; gap: .4rem; margin-bottom: 1.75rem; }
.enquiry-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.enquiry-progress span::after { content: ""; position: absolute; inset: 0; background: var(--jade); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.enquiry-progress span.is-done::after { transform: scaleX(1); }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset + .fieldset { margin-top: 2.25rem; }
.fieldset legend { padding: 0; font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; letter-spacing: -.01em; margin-bottom: .35rem; }
.fieldset .hint { color: var(--ink-3); font-size: .9rem; margin-bottom: 1.1rem; }
.js .enquiry[data-stepped] .fieldset:not(.is-current) { display: none; }
.js .enquiry[data-stepped] .fieldset.is-current { animation: rise var(--t-slow) var(--ease) both; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice label { display: grid; gap: .15rem; height: 100%; padding: 1rem 1.1rem 1rem 3rem; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--paper-raised); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); position: relative; }
.choice label::before { content: ""; position: absolute; left: 1.1rem; top: 1.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: all var(--t-fast); }
.choice label strong { font-weight: 600; }
.choice label span { font-size: .83rem; color: var(--ink-3); line-height: 1.4; }
.choice input:hover + label { border-color: var(--ink); }
.choice input:checked + label { border-color: var(--jade); background: #EEF4F1; box-shadow: 0 0 0 1px var(--jade); }
.choice input:checked + label::before { border-color: var(--jade); background: var(--jade); box-shadow: inset 0 0 0 3px #EEF4F1; }
.choice input:focus-visible + label { outline: 2px solid var(--jade); outline-offset: 2px; }
.choice-grid--chips { display: flex; flex-wrap: wrap; }
.choice-grid--chips .choice label { padding: .6rem 1rem .6rem 2.4rem; border-radius: 999px; }
.choice-grid--chips .choice label::before { left: .85rem; top: 50%; transform: translateY(-50%); width: .95rem; height: .95rem; }
@media (max-width: 560px) { .choice-grid { grid-template-columns: minmax(0, 1fr); } }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; }
.field label .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3.1rem; padding: .75rem 1rem; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper-raised);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); font-size: 1rem;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgb(46 107 99 / .18); }
.field [aria-invalid="true"] { border-color: #A23B2A; box-shadow: 0 0 0 3px rgb(162 59 42 / .12); }
.field-error { font-size: .82rem; color: #8E3222; min-height: 0; }
.field-error:empty { display: none; }
@media (max-width: 560px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--ink-3); margin-top: 1.25rem; }
.consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--jade); flex: none; }
.enquiry-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.enquiry-step-count { font-size: .82rem; color: var(--ink-3); }
.form-status { margin-top: 1rem; font-size: .92rem; }
.form-status.is-error { color: #8E3222; }
.enquiry-done { text-align: left; padding: 1rem 0; }
.enquiry-done .icon-wrap { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: #fff; margin-bottom: 1.5rem; }
.enquiry-done .icon-wrap .icon { width: 1.6rem; height: 1.6rem; }
.no-js-only { display: none; }
html:not(.js) .no-js-only { display: block; }
html:not(.js) .js-only { display: none; }

/* 13. Footer -------------------------------------------------------------- */
.site-footer { position: relative; background: var(--night); color: rgb(243 239 230 / .78); padding: clamp(4rem, 8vw, 6rem) 0 2rem; overflow: hidden; isolation: isolate; font-size: .94rem; }
.footer-contours { position: absolute; right: -15%; top: -30%; width: 70vw; max-width: 1100px; aspect-ratio: 16 / 9; z-index: -1; background: #fff; opacity: .05;
  -webkit-mask: url("../img/contours-wide.svg") center / contain no-repeat; mask: url("../img/contours-wide.svg") center / contain no-repeat; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: 2.5rem var(--gutter); }
.footer-brand p { margin-top: 1.25rem; max-width: 30ch; line-height: 1.6; }
.footer-h { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(243 239 230 / .55); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: grid; gap: .55rem; }
.footer-col a { text-decoration: none; color: rgb(243 239 230 / .88); transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-contact a, .footer-contact span { display: inline-flex; gap: .6rem; align-items: flex-start; }
.footer-contact .icon { margin-top: .2rem; color: #E2C179; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-light); font-size: .82rem; color: rgb(243 239 230 / .6); }
.footer-base a { color: inherit; }
.footer-coords { font-family: var(--italic); font-style: italic; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* 14. Motion -------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes halo { 0% { transform: scale(calc(var(--pin-k, 1) * .6)); opacity: .45; } 70%, 100% { transform: scale(calc(var(--pin-k, 1) * 1.9)); opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round var(--r-lg)); transition: clip-path 1.2s var(--ease); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r-lg)); }

.hero-copy > * { animation: rise 1s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 90ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.hero-copy > :nth-child(4) { animation-delay: 270ms; }
.hero .pond-card { animation: rise 1s var(--ease) 420ms both; }
.hero-media { animation: settle 2.2s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .js .statement-text[data-words] .w { color: inherit; }
  .hero-media img, [data-parallax] { transform: none !important; }
  @view-transition { navigation: none; }
}

/* 15. Utilities ----------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; } .mt-5 { margin-top: 4rem; }
.center { text-align: center; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

@media print {
  .site-header, .mobile-menu, .cta-band, .site-footer, .hero-media, .tech-bg { display: none !important; }
  body { background: #fff; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   16. Interaction & demonstration components
   ========================================================================== */

/* Word-by-word heading reveal (JS wraps words; without JS headings show normally) */
.split-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .16em .16em .04em; margin: 0 -.16em -.16em -.04em; }
.split-i { display: inline-block; transform-origin: left bottom; transition: transform 1.05s var(--ease); transition-delay: calc(var(--wi, 0) * 38ms + var(--wd, 0ms)); }
.js .is-split:not(.is-in) .split-i { transform: translate3d(0, 108%, 0) rotate(2deg); }
.js [data-split="load"]:not(.is-split) { opacity: 0; animation: split-fallback 0s linear 1.6s forwards; }
@keyframes split-fallback { to { opacity: 1; } }

/* Pointer spotlight on cards */
[data-spot] { --mx: 50%; --my: 50%; }
.cta-route[data-spot], .who-link[data-spot] { position: relative; overflow: hidden; }
.cta-route[data-spot]::after, .who-link[data-spot]::after, .case-card[data-spot] .case-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(360px circle at var(--mx) var(--my), rgb(255 255 255 / .18), transparent 55%);
}
.who-link[data-spot]::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(46 107 99 / .09), transparent 55%); }
.cta-route[data-spot]:hover::after, .who-link[data-spot]:hover::after, .case-card[data-spot]:hover .case-media::after { opacity: 1; }

/* Contour lines that draw themselves */
.statement-contours.is-live { -webkit-mask: none; mask: none; background: none; opacity: .5; }
.statement-contours svg { width: 100%; height: 100%; overflow: visible; }
.statement-contours svg path { stroke: currentColor; stroke-width: 1.1; stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); transition: stroke-dashoffset 2.6s var(--ease); transition-delay: calc(var(--k, 0) * 110ms); }
.statement-contours.is-drawn svg path { stroke-dashoffset: 0; }

/* In-the-field ribbon */
.ribbon { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; border-block: 1px solid var(--line); background: var(--paper-raised); overflow: hidden; }
.ribbon-label { flex: none; display: flex; gap: .55rem; align-items: center; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jade); white-space: nowrap; }
.ribbon-live { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px rgb(46 107 99 / .15); animation: pulse 2s ease-in-out infinite; }
.ribbon-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ribbon-move { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.ribbon:hover .ribbon-move, .ribbon:focus-within .ribbon-move { animation-play-state: paused; }
.ribbon-list { display: flex; list-style: none; }
.ribbon-list li { position: relative; display: flex; gap: .6rem; align-items: baseline; padding: 0 2rem; white-space: nowrap; font-size: .9rem; color: var(--ink-2); }
.ribbon-list li::after { content: ""; position: absolute; right: 0; top: 55%; width: 4px; height: 4px; border-radius: 50%; background: var(--muga); transform: translate(50%, -50%); }
.ribbon-list strong { font-family: var(--serif); font-weight: 450; font-size: 1.08rem; color: var(--ink); letter-spacing: -.01em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .ribbon { flex-direction: column; align-items: stretch; gap: .6rem; } .ribbon-label { padding-left: var(--gutter); } }

/* Practice areas: expanding panels */
.practice-row { display: flex; gap: .75rem; height: clamp(540px, 64vh, 660px); }
.practice { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; color: #fff; background: var(--night); transition: flex-grow .9s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); }
.practice.is-open { flex-grow: 3.8; }
.practice-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.12); transition: transform 1.6s var(--ease), filter .8s var(--ease); filter: saturate(.75) brightness(.9); }
.practice.is-open .practice-img { transform: scale(1); filter: none; }
.practice:not(.is-open):hover .practice-img { transform: scale(1.06); filter: saturate(.95); }
.practice::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 26 24 / .5) 0%, rgb(11 26 24 / .2) 30%, rgb(11 26 24 / .55) 62%, rgb(11 26 24 / .92) 100%); transition: opacity .6s; }
.practice-h { margin: 0; }
.practice-trigger { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1rem + .9vw, 1.9rem); line-height: 1.08; letter-spacing: -.015em; }
.practice.is-open .practice-trigger { inset: 0 0 auto 0; flex-direction: row; align-items: center; justify-content: flex-start; cursor: default; }
.practice-ic { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--t-med), transform var(--t-med) var(--ease); }
.practice-ic .icon { width: 1.35rem; height: 1.35rem; }
.practice:not(.is-open):hover .practice-ic { background: rgb(226 193 121 / .35); transform: scale(1.08); }
.practice:not(.is-open) .practice-name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.practice-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.6rem 1.7rem; max-width: 620px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .45s var(--ease), transform .8s var(--ease); visibility: hidden; }
.practice.is-open .practice-body { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: .28s; }
.practice-line { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); line-height: 1.3; letter-spacing: -.01em; }
.practice-stat { display: flex; gap: .9rem; align-items: baseline; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .22); }
.practice-stat .num { font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); line-height: 1; color: #E9CD8A; white-space: nowrap; }
.practice-stat span:last-child { font-size: .86rem; color: rgb(255 255 255 / .82); line-height: 1.4; }
.practice-work { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.25rem; margin-top: 1rem; font-size: .88rem; color: rgb(255 255 255 / .92); }
.practice-work li { display: flex; gap: .45rem; }
.practice-work .icon { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; color: #E9CD8A; }
.practice .link-arrow { margin-top: 1.25rem; color: #fff; border-color: rgb(255 255 255 / .4); }
@media (max-width: 900px) {
  .practice-row { flex-direction: column; height: auto; }
  .practice { flex: none; height: 5.6rem; transition: height .8s var(--ease); }
  .practice.is-open { height: 34rem; }
  .practice-trigger { flex-direction: row; align-items: center; justify-content: flex-start; }
  .practice:not(.is-open) .practice-name { writing-mode: horizontal-tb; transform: none; }
  .practice-work { grid-template-columns: 1fr; }
}

/* Yield-gap demonstration */
.yieldgap { background: var(--paper-sunk); overflow: hidden; }
.yield-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem var(--gutter); align-items: center; }
.yield-controls { display: grid; gap: 1.6rem; margin-top: 2rem; }
.yield-controls .segmented { margin-top: 0; flex-wrap: wrap; }
.yield-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; font-size: .92rem; margin-bottom: .7rem; }
.yield-field output { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--jade); font-variant-numeric: tabular-nums; }
.yield-area { display: flex; gap: .75rem; align-items: center; }
.yield-area input { flex: 1; }
.yield-area select { min-height: 2.6rem; padding: .4rem 2rem .4rem .85rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230F2320' stroke-width='1.6'/%3E%3C/svg%3E") right .6rem center / .9rem no-repeat; appearance: none; font-weight: 600; font-size: .88rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --fill: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--jade) var(--fill), rgb(15 35 32 / .14) var(--fill)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(15 35 32 / .14); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--jade); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--ink); box-shadow: 0 4px 10px -3px rgb(15 35 32 / .5); transition: transform var(--t-fast) var(--ease); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--ink); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(46 107 99 / .35); }
.yield-stage { position: relative; min-height: 600px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; display: grid; align-items: end; padding: clamp(.9rem, 2.4vw, 1.75rem); }
.yield-bgs { position: absolute; inset: 0; z-index: -1; background: var(--night); }
.yield-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.yield-bg.is-on { opacity: 1; }
.yield-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s var(--ease); }
.yield-bg.is-on img { transform: scale(1); }
.yield-card { width: min(100%, 470px); margin-left: auto; border-radius: 22px; padding: 1.5rem 1.5rem 1.35rem; background: rgb(251 249 244 / .78); }
.yield-bars { display: grid; gap: .85rem; margin-top: 1rem; }
.yield-bar { display: grid; grid-template-columns: 8.5rem 1fr 4.6rem; gap: .75rem; align-items: center; font-size: .84rem; }
.yield-bar-l { color: var(--ink-2); }
.yield-track { height: 12px; border-radius: 6px; background: rgb(15 35 32 / .1); overflow: hidden; }
.yield-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: #A99B7F; transition: width 1s var(--ease); }
.yield-bar.is-good .yield-track i { background: linear-gradient(90deg, var(--jade), #5FA79A); }
.yield-bar-v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.yield-result { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.yield-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.yield-big .num { font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.6rem); line-height: 1; color: var(--ink); letter-spacing: -.035em; }
.yield-big small { font-size: .9rem; color: var(--ink-3); }
.yield-sub { margin-top: .3rem; color: var(--jade-deep); font-weight: 600; font-size: .92rem; }
.yield-levers { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.yield-levers li { padding: .3rem .7rem; border-radius: 999px; background: rgb(46 107 99 / .1); color: var(--jade-deep); font-size: .78rem; font-weight: 600; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.yield-note { margin-top: .9rem; font-size: .74rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 960px) { .yield-grid { grid-template-columns: minmax(0, 1fr); } .yield-stage { min-height: 520px; } }
@media (max-width: 520px) { .yield-bar { grid-template-columns: 6.5rem 1fr 4rem; } }

/* Reduced motion for this block */
@media (prefers-reduced-motion: reduce) {
  .split-i { transform: none !important; }
  .js [data-split="load"]:not(.is-split) { opacity: 1; animation: none; }
  .ribbon-move { animation: none; }
  .ribbon-track { overflow-x: auto; }
  .statement-contours svg path { stroke-dashoffset: 0; }
}
.js .practice[data-reveal] { transition: flex-grow .9s var(--ease), height .8s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); transition-delay: 0s, 0s, calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms); }
.js .map-svg .map-pin { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--pi, 0) * 55ms); }
.js .map-svg.is-in .map-pin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .map-svg .map-pin { opacity: 1; } }
.statement-contours.is-live { opacity: .3; }

.timeline-name h3 { font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem); }
.segmented button { display: inline-flex; align-items: center; gap: .4rem; }
.segmented button .icon { width: 1rem; height: 1rem; }

/* ==========================================================================
   17. Integrated farm demo
   ========================================================================== */
.tech-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tech-list--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 0; }
.tech-list--row li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line-light); padding-top: 1.4rem; }
.tech-list--row .tech-ic { grid-row: auto; margin-bottom: .6rem; }
.tech-list--row p { grid-column: 1; }
@media (max-width: 900px) { .tech-list--row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tech-list--row { grid-template-columns: minmax(0, 1fr); } }

.fd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; padding: .5rem; border-radius: 28px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); }
.fd-stage { position: relative; aspect-ratio: 2688 / 1520; border-radius: 22px; overflow: hidden; isolation: isolate; background: #1b2a24; }
.fd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.fd[data-mode="integrated"] .fd-photo { filter: saturate(1.05) brightness(.82); }
.fd[data-mode="separate"] .fd-photo { filter: saturate(.55) brightness(.72); }
.fd.has-focus .fd-photo { filter: saturate(.7) brightness(.6); }
.fd-flows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fd-line { fill: none; stroke-width: .55; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset 1.4s var(--ease), opacity .5s var(--ease), stroke-width .3s; transition-delay: calc(var(--i) * 110ms); vector-effect: non-scaling-stroke; }
.fd-flow--nutrients { color: #E9C77E; } .fd-flow--water { color: #8FD3E6; } .fd-flow--feed { color: #A8DB86; }
.fd-line { stroke: currentColor; stroke-width: 2.2; }
.fd-dot { fill: currentColor; opacity: 0; transition: opacity .4s; }
.fd[data-mode="integrated"] .fd-line { stroke-dashoffset: 0; opacity: .9; }
.fd[data-mode="integrated"] .fd-dot { opacity: 1; transition-delay: 1.2s; }
.fd.has-focus .fd-flow:not(.is-lit) .fd-line { opacity: .12; transition-delay: 0s; }
.fd.has-focus .fd-flow:not(.is-lit) .fd-dot { opacity: 0; transition-delay: 0s; }
.fd.has-focus .fd-flow.is-lit .fd-line { stroke-width: 3.2; opacity: 1; stroke-dashoffset: 0; transition-delay: 0s; }
.fd.has-focus .fd-flow.is-lit .fd-dot { opacity: 1; transition-delay: 0s; }

.fd-spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(11 26 24 / .55); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); color: #fff; font: 500 .8rem/1.15 var(--sans); text-align: left; cursor: pointer; white-space: nowrap; z-index: 2;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease), opacity .4s var(--ease); }
.fd-spot::before { content: ""; position: absolute; left: .3rem; top: 50%; width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%; border: 1.5px solid rgb(233 199 126 / .8); animation: fd-ping 2.6s var(--ease) infinite; pointer-events: none; }
.fd-ic { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #F3EFE6; color: var(--jade-deep); }
.fd-ic .icon { width: 1.1rem; height: 1.1rem; }
.fd-lab { display: grid; }
.fd-alone { font-size: .68rem; font-weight: 500; color: #F1B9A6; max-height: 1.2em; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; }
.fd[data-mode="integrated"] .fd-alone { max-height: 0; opacity: 0; }
.fd-spot:hover, .fd-spot:focus-visible { background: rgb(11 26 24 / .8); border-color: #E9C77E; transform: translate(-50%, -50%) scale(1.05); }
.fd-spot[aria-pressed="true"] { background: #F3EFE6; color: var(--ink); border-color: #F3EFE6; transform: translate(-50%, -50%) scale(1.08); }
.fd-spot[aria-pressed="true"] .fd-ic { background: var(--jade); color: #fff; }
.fd-spot[aria-pressed="true"]::before { animation: none; opacity: 0; }
.fd.has-focus .fd-spot:not([aria-pressed="true"]):not(.is-near) { opacity: .45; }
.fd-spot:focus-visible { outline: 2px solid #E9C77E; outline-offset: 3px; }
@keyframes fd-ping { 0% { transform: scale(.9); opacity: .9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

.fd-legend { position: absolute; left: .9rem; bottom: .8rem; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; z-index: 1; opacity: 0; transition: opacity .6s var(--ease) .8s; }
.fd[data-mode="integrated"] .fd-legend { opacity: 1; }
.fd-key { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; background: rgb(11 26 24 / .6); color: #fff; font-size: .7rem; font-weight: 500; }
.fd-key::before { content: ""; width: 14px; height: 2.5px; border-radius: 2px; background: currentColor; }
.fd-key--nutrients::before { background: #E9C77E; } .fd-key--water::before { background: #8FD3E6; } .fd-key--feed::before { background: #A8DB86; }

.fd-panel { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem 1.2rem 1.2rem; border-radius: 22px; background: rgb(243 239 230 / .06); border: 1px solid rgb(255 255 255 / .1); }
.fd-modes { margin: 0; align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.fd-modes button { justify-content: center; color: rgb(243 239 230 / .75); }
.fd-modes button[aria-pressed="true"] { background: #F3EFE6; color: var(--ink); }
.fd-body { min-height: 13.5rem; }
.fd-view { animation: rise .5s var(--ease) both; }
.fd-title { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; color: #fff; }
.fd-title-ic { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--jade); color: #fff; flex: none; }
.fd-title-ic .icon { width: 1.15rem; height: 1.15rem; }
.fd-text { margin-top: .6rem; font-size: .92rem; line-height: 1.55; color: rgb(243 239 230 / .78); }
.fd-io { display: grid; gap: .9rem; margin-top: 1rem; }
.fd-io .label { color: rgb(243 239 230 / .55); margin-bottom: .35rem; }
.fd-io ul { list-style: none; display: grid; gap: .35rem; }
.fd-io li { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; line-height: 1.4; color: rgb(243 239 230 / .9); }
.fd-io li::before { content: ""; flex: none; width: 10px; height: 2.5px; border-radius: 2px; transform: translateY(-3px); background: var(--c, #E9C77E); }
.fd-io li.is-empty { color: rgb(243 239 230 / .5); }
.fd-io li.is-empty::before { background: rgb(255 255 255 / .25); }
.fd-meters { display: grid; gap: .55rem; margin: 0; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .1); }
.fd-meter { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fd-meter dt { font-size: .8rem; color: rgb(243 239 230 / .75); }
.fd-meter dd { margin: 0; display: flex; gap: 4px; }
.fd-meter i { width: 16px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .12); transition: background-color .5s var(--ease); }
.fd[data-mode="separate"] .fd-meter i:nth-child(-n + 5) { background: rgb(255 255 255 / .12); }
.fd-meter i.is-on { background: #E9C77E; }
.fd-meter:last-child i.is-on { background: #A8DB86; }
.fd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.fd-actions .btn .icon { width: .9rem; height: .9rem; }
.fd.is-touring [data-fd-tour] { background: var(--muga); color: var(--ink); }

@media (max-width: 1080px) { .fd { grid-template-columns: minmax(0, 1fr); } .fd-body { min-height: 0; } }
@media (max-width: 700px) {
  .fd-spot { padding: .2rem; gap: 0; }
  .fd-lab { display: none; }
  .fd-ic { width: 1.8rem; height: 1.8rem; }
  .fd-spot::before { width: 1.8rem; height: 1.8rem; margin-top: -.9rem; left: .2rem; }
  .fd-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fd-dot { display: none; } .fd-spot::before { animation: none; } }

/* ==========================================================================
   18. SDG board
   ========================================================================== */
.sdg-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sdg-board { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.sdg-feature { --c: var(--jade); position: sticky; top: calc(var(--header-h) + 1.25rem); padding: .45rem; border-radius: 30px; background: rgb(15 35 32 / .04); border: 1px solid var(--line); }
.sdg-feature-in { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, 2.4vw, 1.9rem); border-radius: 24px; background: var(--paper-raised); box-shadow: inset 0 1px 0 #fff, 0 20px 40px -28px rgb(15 35 32 / .35); min-height: 28rem; }
.sdg-feature-in::before { content: ""; position: absolute; right: -35%; top: -45%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 68%); transition: background .6s var(--ease); pointer-events: none; }
.sdg-feature-in > * { position: relative; }
.sdg-feature-top { display: flex; gap: 1.1rem; align-items: center; }
.sdg-badge { flex: none; position: relative; width: 6.25rem; aspect-ratio: 1; border-radius: 14px; background: var(--c); color: #fff; transition: background-color .5s var(--ease); box-shadow: 0 16px 28px -18px color-mix(in srgb, var(--c) 90%, black); }
.sdg-badge-n { position: absolute; left: .55rem; top: .35rem; font-weight: 700; font-size: 1.35rem; letter-spacing: -.04em; line-height: 1; }
.sdg-badge .sdg-pic { position: absolute; left: 18%; top: 24%; width: 64%; height: 64%; }
.sdg-feature-name { min-width: 0; }
.sdg-goal { font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }
.sdg-feature-name h3 { margin-top: .15rem; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.sdg-how { font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 36rem; }
.sdg-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.sdg-sub { font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .55rem; }
.sdg-sub span { color: var(--ink-3); font-weight: 500; }
.sdg-measures { list-style: none; display: grid; gap: .45rem; }
.sdg-measures li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; line-height: 1.4; color: var(--ink-2); }
.sdg-measures .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; padding: .15rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 70%, black); }
.sdg-work { list-style: none; display: grid; gap: .5rem; }
.sdg-work a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .85rem; align-items: center; padding: .4rem; border-radius: 14px; text-decoration: none; background: var(--paper); border: 1px solid var(--line); transition: border-color var(--t-fast), transform var(--t-med) var(--ease); }
.sdg-work a:hover { border-color: var(--c); transform: translateX(3px); }
.sdg-work img { width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 10px; }
.sdg-work strong { display: block; font-size: .88rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sdg-work small { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ink-3); }
.sdg-feature-foot { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.sdg-timer { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sdg-timer i { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.sdg-nav { display: flex; gap: .35rem; }
.sdg-nav button { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.sdg-nav button:hover { background: var(--ink); color: var(--paper); }
.sdg-nav button:active { transform: scale(.95); }
.sdg-nav button:first-child .icon { transform: rotate(180deg); }
.sdg-feature.is-swapping .sdg-badge { animation: sdg-pop .7s var(--ease); }
.sdg-feature.is-swapping .sdg-feature-name, .sdg-feature.is-swapping .sdg-how, .sdg-feature.is-swapping .sdg-cols { animation: rise .55s var(--ease) both; }
.sdg-feature.is-swapping .sdg-how { animation-delay: 50ms; }
.sdg-feature.is-swapping .sdg-cols { animation-delay: 110ms; }
@keyframes sdg-pop { 0% { transform: scale(.75) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.05) rotate(1deg); opacity: 1; } 100% { transform: none; } }

.sdg-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, .8vw, 10px); perspective: 1400px; }
.sdg-tile { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; background: var(--c); color: #fff; cursor: pointer; font: inherit; overflow: visible;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s var(--ease), opacity .7s var(--ease); }
.sdg-num { position: absolute; left: 10%; top: 7%; font-weight: 700; font-size: clamp(.95rem, .6rem + .9vw, 1.45rem); letter-spacing: -.05em; line-height: 1; }
.sdg-tile .sdg-pic { position: absolute; left: 20%; top: 26%; width: 60%; height: 60%; transition: transform .6s var(--ease); }
.sdg-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: .4rem .65rem; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: .74rem; font-weight: 500; line-height: 1.25; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); z-index: 5; }
.sdg-tile:hover .sdg-tip, .sdg-tile:focus-visible .sdg-tip { opacity: 1; transform: translate(-50%, 0); }
button.sdg-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 26px -16px color-mix(in srgb, var(--c) 85%, black); z-index: 4; }
button.sdg-tile:hover .sdg-pic { transform: scale(1.08); }
.sdg-tile[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c), 0 18px 30px -16px color-mix(in srgb, var(--c) 85%, black); z-index: 3; }
.sdg-tile[aria-pressed="true"] .sdg-pic { animation: sdg-bob 2.4s ease-in-out infinite; }
.sdg-tile.is-muted { filter: grayscale(1) opacity(.24); cursor: default; }
.sdg-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@keyframes sdg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
.js .sdg-mosaic:not(.is-in) .sdg-tile { opacity: 0; transform: rotateX(-70deg) translateY(10px); }
.js .sdg-mosaic .sdg-tile { transition-delay: calc(var(--i, 0) * 30ms); transform-origin: 50% 0; }
.sdg-mosaic.is-done .sdg-tile { transition-delay: 0s; }
.sdg-sum { aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 12px; border: 1px dashed var(--line-strong); }
.sdg-sum .num { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.3rem); line-height: 1; color: var(--jade); }
.sdg-sum span:last-child { font-size: .72rem; color: var(--ink-3); margin-top: .2rem; }
.sdg-note { margin-top: 1rem; font-size: .78rem; line-height: 1.5; color: var(--ink-3); max-width: 42rem; }
@media (max-width: 960px) {
  .sdg-board { grid-template-columns: minmax(0, 1fr); }
  .sdg-feature { position: relative; top: 0; }
  .sdg-feature-in { min-height: 0; }
}
@media (max-width: 520px) { .sdg-mosaic { gap: 5px; } .sdg-tile { border-radius: 8px; } .sdg-tip { display: none; } .sdg-badge { width: 4.75rem; } }
@media (prefers-reduced-motion: reduce) { .js .sdg-mosaic:not(.is-in) .sdg-tile { opacity: 1; transform: none; } }
.langs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); }
.langs-h { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .9rem; }
.languages { gap: .45rem; }
.languages li { font-family: var(--sans); font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; padding: .35rem 1rem; background: var(--paper-raised); border-color: var(--line); }
.languages--soft li { background: transparent; color: var(--ink-2); font-weight: 400; }
@media (max-width: 800px) { .langs { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   19. Taste pass: stacked section heads, restrained labels, calmer hero
   ========================================================================== */
.section-head { display: block; max-width: 48rem; }
.section-head > .section-intro { margin-top: 1.1rem; max-width: 40rem; }
.section-head .h2 + .section-intro, .section-head > div + .section-intro { margin-top: 1.1rem; }
.mark { padding: .38rem .8rem; gap: 0; font-size: .7rem; letter-spacing: .12em; }
.mark-dot, .ribbon-live, .hero-eyebrow .dot { display: none; }
.pond-card-live::before { display: none; }
.hero-eyebrow { margin-bottom: 1.4rem; font-size: .74rem; letter-spacing: .1em; }
.hero .display { max-width: 16.5ch; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem); line-height: 1.04; }
.hero .display em { font-size: 1.08em; }
.hero-lede { max-width: 30rem; margin-top: 1.4rem; }
.yield-track { background: none; }
.yield-track i { height: 8px; margin-top: 2px; }
.case-meta span:first-child { color: var(--jade); font-weight: 500; }
/* italic clearance inside split headlines: the reveal mask must not crop the
   right-hand overhang of the Newsreader italic, nor its descenders */
.split-w { padding-bottom: .2em; margin-bottom: -.2em; }
.split-w:has(em), em .split-w { padding-right: .3em; margin-right: -.3em; }
/* The reveal mask is an inline-block, so words are bottom-aligned rather than
   baseline-aligned, and Newsreader italic (shorter descenders than Geist) lands high.
   Nudge it back onto the roman baseline. The value is a fraction of the italic's own
   size, so it holds at every breakpoint; layout and line spacing are untouched. */
em .split-w { position: relative; top: .099em; }
.hero .display em .split-w { top: .11em; }
.display em, .h1 em, .h2 em, .h3 em { padding-right: .08em; }
.statement-text em, .who-q, .explorer-tab-name em { padding-right: .06em; margin-right: -.06em; }
.statement-text { font-weight: 450; letter-spacing: -.03em; line-height: 1.18; }
.brand-word { font-weight: 600; letter-spacing: -.035em; }
.mobile-nav > li > a { font-weight: 500; letter-spacing: -.035em; }
.metrics .num { font-weight: 500; }
.case-title, .h3, .svc-items h3, .trio h3, .models h3, .models-3 h3, .disciplines h3, .faq summary, .timeline-name h3 { font-weight: 500; letter-spacing: -.025em; }
.fd-line { vector-effect: none; stroke-width: .34; }
.fd.has-focus .fd-flow.is-lit .fd-line { stroke-width: .5; }
.fd-dot { filter: drop-shadow(0 0 .4px rgb(0 0 0 / .6)); }
.fd[data-mode="integrated"] .fd-alone { display: none; }