/* avotgroup.com — "ledger" system after column.com.
   Tokens: the owner's Refero export for Column (tokens.json / variables.css / DESIGN.md, 20 Oct 2026),
   cross-checked against our own measurements. Substitutes per DESIGN.md: SuisseIntl → Inter (cv11 single-storey a),
   SuisseIntlMono → JetBrains Mono, SFMono → Fira Code. All copy, data, photography and illustration are AVOT's own. */

:root {
  /* ---- reference tokens ---- */
  --color-indigo-navy: #111a4a;
  --color-midnight-ink: #011821;
  --color-slate-ink: #3b3e47;
  --color-steel: #7c7f88;
  --color-fog: #a9acb6;
  --color-mist: #cbcccf;
  --color-silver-lining: #e3e4e8;
  --color-cloud-canvas: #f6f6f8;
  --color-pure-white: #ffffff;
  --color-charcoal: #232730;
  --color-obsidian: #12161e;
  --color-pure-black: #000000;
  --color-signal-orange: #ec652b;
  --color-peach-glow: #f2936b;
  --color-seafoam-600: #44b48b;
  --color-seafoam-700: #167e6c;
  --color-seafoam-400: #94efb7;
  --color-deep-sea: #023247;
  --color-sky-cyan: #88deeb;
  --color-cobalt-edge: #1e4199;
  --color-ocean-depth: #0c6997;

  --font-suisseintl: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintlmono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-sfmono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-micro: 10px;          --leading-micro: 1.5;
  --text-caption: 12px;        --leading-caption: 1.5;
  --text-body: 16px;           --leading-body: 1.5;
  --text-body-lg: 18px;        --leading-body-lg: 1.33;
  --text-subheading-sm: 20px;  --leading-subheading-sm: 1.1;  --tracking-subheading-sm: -0.01em;
  --text-subheading-lg: 28px;  --leading-subheading-lg: 1.1;  --tracking-subheading-lg: -0.01em;
  --text-heading-sm: 40px;     --leading-heading-sm: 1.1;     --tracking-heading-sm: -0.02em;
  --text-heading: 48px;        --leading-heading: 1.1;        --tracking-heading: -0.02em;
  --text-heading-lg: 52px;     --leading-heading-lg: 1.1;     --tracking-heading-lg: -0.03em;
  --text-display: 60px;        --leading-display: 1;          --tracking-display: -0.01em;

  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
  --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-72: 72px; --spacing-80: 80px;
  --spacing-96: 96px; --spacing-100: 100px; --spacing-144: 144px;
  --page-max-width: 1200px;
  --section-gap: 72px;
  --card-padding: 24px;
  --element-gap: 8px;

  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-subtle: rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset;
  --shadow-subtle-2: rgba(87, 90, 100, 0.12) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-xl: rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px, rgba(0, 0, 0, 0.07) 0px 3px 2px 0px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset;
  --shadow-subtle-5: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  --shadow-subtle-6: rgb(17, 26, 74) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
  --shadow-xl-2: rgba(30, 30, 44, 0.15) 24px 48px 64px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset;
  --shadow-sm: rgba(18, 22, 30, 0.024) 0px 1px 4px 0px, rgba(18, 22, 30, 0.05) 0px 1px 0px 0px, rgba(18, 22, 30, 0.024) 0px 0px 0px 1px;
  --shadow-lg: rgb(255, 255, 255) 0px 0px 20px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset;
  --shadow-subtle-7: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.02) 0px -48px 24px -24px inset, rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  --shadow-sm-2: rgba(0, 0, 0, 0.1) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.25) 0px 1px 1px 0px;
  --shadow-subtle-8: rgb(255, 255, 255) 0px 1px 0px 0px;
  --shadow-subtle-9: rgba(17, 26, 74, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset;
  --shadow-md: rgba(17, 26, 74, 0.05) 0px 8px 16px 0px, rgba(17, 26, 74, 0.05) 0px 4px 8px 0px;

  --surface-page-canvas: #f6f6f8;
  --surface-card-surface: #ffffff;
  --surface-frosted-overlay: #ffffff80;
  --surface-sky-wash: #88deeb;
  --surface-signal-orange-surface: #f2936b;
  --surface-deep-surface: #011821;

  /* ---- semantic aliases used below ---- */
  --bg: var(--surface-page-canvas);
  --white: var(--color-pure-white);
  --ink: var(--color-indigo-navy);
  --ink-2: var(--color-slate-ink);
  --ink-3: var(--color-steel);
  --btn-ink: var(--color-charcoal);
  --line: var(--color-silver-lining);
  --tile: rgba(17, 26, 74, 0.03);
  --chip: rgba(17, 26, 74, 0.045);
  --data: var(--color-seafoam-700);
  --dark: var(--surface-deep-surface);
  --dark-2: #011219;
  --dark-ink: #c1e8ef;
  --sans: var(--font-suisseintl);
  --mono: var(--font-suisseintlmono);
  --code: var(--font-sfmono);
  --gutter: 44px;
  --r: var(--radius-lg);
  --r-lg: var(--radius-xl);
  --sec: var(--spacing-144);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--text-body)/var(--leading-body) var(--sans); font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
html.menu-lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, input, select, textarea, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r); background: var(--ink); color: #fff; font-weight: 500; }
.skip:focus { top: 12px; }
.container { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.nowrap { white-space: nowrap; }

/* ---------- type ---------- */
.h1, .display { font: 600 var(--text-heading-lg)/var(--leading-heading-lg) var(--sans); letter-spacing: var(--tracking-heading-lg); color: var(--ink); text-wrap: balance; }
.h2 { font: 600 var(--text-display)/var(--leading-display) var(--sans); letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance; }
.h3 { font: 600 var(--text-heading)/var(--leading-heading) var(--sans); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.h-state { font: 500 var(--text-subheading-lg)/var(--leading-subheading-lg) var(--sans); letter-spacing: var(--tracking-subheading-lg); color: var(--ink); text-wrap: balance; }
.h-state span { color: rgba(17, 26, 74, 0.42); }
.h4 { font: 500 var(--text-subheading-sm)/var(--leading-subheading-sm) var(--sans); letter-spacing: var(--tracking-subheading-sm); color: var(--ink); }
.h5 { font: 500 var(--text-body)/1.1 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.lead { font: 300 20px/1.4 var(--sans); color: var(--ink); text-wrap: pretty; }
.p { font: 300 var(--text-body)/1.38 var(--sans); color: var(--ink); text-wrap: pretty; }
.p--muted { color: var(--ink-3); }
.small { font: 300 14px/1.43 var(--sans); color: var(--ink); }

/* section label ("tag with dot"): mono caps on a hairline, coloured dot, cursor tick */
.label { --lc: var(--color-seafoam-600); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font: 500 var(--text-caption)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.label::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--lc); }
.label::after { content: ""; flex-shrink: 0; width: 4px; height: 12px; border-radius: 1px; background: currentColor; opacity: 0.25; animation: cursor 1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.label.is-typing::after { animation: none; opacity: 0.5; } /* a steady cursor while the label types itself in */
.label--blue { --lc: var(--color-ocean-depth); }
.label--sea { --lc: var(--color-deep-sea); }
.label--orange { --lc: var(--color-signal-orange); }
.label-row { padding-bottom: var(--spacing-20); margin-bottom: var(--spacing-40); border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--line), var(--line) 70%, transparent) 1; }

/* ---------- buttons: 8px radius always; one filled navy beside one outlined ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 38px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent; font: 500 14px/1 var(--sans); white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn .chev { width: 14px; height: 14px; margin-right: -4px; stroke-width: 2.2; transition: transform 200ms var(--ease-out); }
.btn--primary, .btn--dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-subtle); }
.btn--outline, .btn--soft { padding: 0 32px; background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--glass { height: 36px; padding: 0 16px; background: rgba(255, 255, 255, 0.5); color: var(--btn-ink); border-color: var(--line); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.btn--light { background: #fff; color: var(--dark); box-shadow: var(--shadow-subtle-5); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--dark:hover { background: #1c2862; }
  .btn--outline:hover, .btn--soft:hover { background: rgba(17, 26, 74, 0.05); }
  .btn--glass:hover { background: #fff; }
  .btn--light:hover { background: var(--dark-ink); }
  .btn:hover .chev { transform: translateX(2px); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- header: acctual.com's top bar, measured with REA (owner's request, 21 Oct 2026) ----------
   A frosted card hanging from the top edge: square top corners, 20px bottom corners, rgba(245,245,245,.6) with a
   10px blur and a 1px shadow; 1034px wide and centred (16px from the edges on phones); a 32px announcement line in
   14px/500 blue over a 48px bar (20px in on the left, 8px on the right). Links are 35px pills (12px sides, 16px/500,
   70% ink, 4px apart) right after the logo; the phone is a quiet pill and "Get in touch" a dark 40px pill. */
:root { --hd-ann: 32px; --hd-bar: 48px; --header-h: calc(var(--hd-ann) + var(--hd-bar)); }
.site-header { position: sticky; top: 0; z-index: 60; pointer-events: none; }
.header-card { pointer-events: auto; width: min(1034px, 100%); margin: 0 auto; border-radius: 0 0 20px 20px; background: rgba(245, 245, 245, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; }
.announce { display: flex; align-items: center; justify-content: center; gap: 4px; height: var(--hd-ann); font: 500 14px/24px var(--sans); letter-spacing: -0.02em; color: rgb(0, 152, 242); text-align: center; white-space: nowrap; }
.announce b { font-weight: 500; }
.announce svg { width: 14px; height: 14px; stroke-width: 2; opacity: 0.4; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .announce:hover svg { transform: translateX(2px); } }
.header-bar { position: relative; display: flex; align-items: center; height: var(--hd-bar); padding: 0 8px 0 20px; }
.brand { display: flex; align-items: center; flex-shrink: 0; margin-right: 32px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 4px; }
.nav a, .nav-link { display: inline-flex; align-items: center; height: 35px; padding: 0 12px; border-radius: 100px; font: 500 16px/1 var(--sans); letter-spacing: -0.02em; color: rgba(30, 30, 30, 0.7); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.header-right .nav-link { height: 40px; padding: 0 14px; }
.header-right .btn { height: 40px; padding: 0 18px; border-radius: 100px; background: rgb(13, 17, 27); font: 600 16px/1 var(--sans); letter-spacing: -0.02em; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .header-right .btn:hover { background: rgb(38, 43, 56); } }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .nav-link:hover, .nav__trigger:hover { background: rgba(0, 0, 0, 0.05); color: rgba(30, 30, 30, 0.9); } }

/* "Companies" opens a compact menu under the nav (after Refero: Column's own Products menu — content-width panel,
   14px names, 12px lines; Appwrite — icon tiles under one small mono label). Each company keeps its own emblem
   on a white tile; on hover the row tints and an arrow in the company's colour slides in. */
.nav__trigger { display: inline-flex; align-items: center; gap: 4px; height: 35px; padding: 0 10px 0 12px; border: 0; border-radius: 100px; font: 500 16px/1 var(--sans); letter-spacing: -0.02em; color: rgba(30, 30, 30, 0.7); white-space: nowrap; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.nav__trigger .nav__chev { width: 14px; height: 14px; stroke-width: 2.2; rotate: 90deg; transition: rotate 200ms var(--ease-out); }
.nav__trigger[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); color: rgba(30, 30, 30, 0.9); }
.nav__trigger[aria-expanded="true"] .nav__chev { rotate: -90deg; }
.mega { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; width: min(660px, calc(100vw - 2 * var(--gutter))); translate: 0 0; padding: 8px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px rgba(17, 26, 74, 0.07), 0 16px 36px -10px rgba(17, 26, 74, 0.2), 0 4px 10px -4px rgba(17, 26, 74, 0.08); transform-origin: top center; animation: mega-in 160ms var(--ease-out); }
@keyframes mega-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
.mega__title { padding: 10px 12px 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mega__item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); transition: background-color 160ms ease; }
.mega__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 26, 74, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); transition: box-shadow 160ms ease; }
.mega__ico img { width: auto; height: auto; max-width: 24px; max-height: 24px; }
.mega__ico svg { width: 17px; height: 17px; color: var(--c, var(--ink-3)); stroke-width: 2; }
.mega__txt { min-width: 0; }
.mega__item b { display: block; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.mega__item small { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--sans); color: var(--ink-3); text-wrap: pretty; }
.mega__go { width: 14px; height: 14px; color: var(--c, var(--ink)); stroke-width: 2.2; opacity: 0; translate: -4px 0; transition: opacity 160ms ease, translate 200ms var(--ease-out); }
.mega__item:focus-visible .mega__go { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  .mega__item:hover { background: rgba(17, 26, 74, 0.035); }
  .mega__item:hover .mega__ico { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--ink)) 35%, transparent), 0 1px 2px rgba(0, 0, 0, 0.05); }
  .mega__item:hover .mega__go { opacity: 1; translate: 0 0; }
}
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 4px 0; padding: 12px 8px 6px; border-top: 1px solid var(--line); font: 400 13px/1.3 var(--sans); color: var(--ink-3); }
.mega__foot a { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--ink); }
.mega__foot .chev { width: 13px; height: 13px; stroke-width: 2.2; transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mega__foot a:hover .chev { translate: 2px 0; } }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; margin-right: 6px; place-items: center; border-radius: var(--r); color: var(--ink); }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 50; flex-direction: column; gap: 4px; padding: calc(var(--header-h) + 28px) var(--gutter) calc(32px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; }
.mobile-menu.is-open { display: flex; }
.mobile-menu a:not(.btn) { padding: 10px 0; font: 500 28px/1.15 var(--sans); letter-spacing: -0.02em; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 24px; height: 48px; font-size: 16px; }
.mobile-menu__label { margin: 6px 0 4px; font: 500 var(--text-caption)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mobile-menu a.mobile-menu__sub { padding: 8px 0 8px 14px; font: 500 18px/1.3 var(--sans); letter-spacing: -0.01em; border-bottom: 0; border-left: 2px solid var(--line); }
.mobile-menu a.mobile-menu__sub + a:not(.mobile-menu__sub) { margin-top: 10px; border-top: 1px solid var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + 74px); margin-top: calc(-1 * var(--header-h)); }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(17, 26, 74, 0.13) 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.hero__glow { position: absolute; z-index: 0; top: -60px; left: 50%; width: 1080px; height: 748px; margin-left: -140px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--surface-sky-wash) 22%, transparent) 25%, transparent 70%); pointer-events: none; }
.hero__art { position: absolute; z-index: 1; top: 40px; left: calc(50% - 230px); width: 980px; aspect-ratio: 981 / 639; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 62% 62% at 62% 52%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 62% 52%, #000 55%, transparent 100%); }
.hero__art > img, .hero__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__map { opacity: 0; transition: opacity 400ms ease; }
.hero__art.is-live .hero__map { opacity: 1; }
.hero__art.is-live .hero__fallback { opacity: 0; transition: opacity 400ms ease; }
.hero__fade { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 50%; background: linear-gradient(to right, rgba(246, 246, 248, 0.82) 70%, rgba(246, 246, 248, 0)); pointer-events: none; }
.hero__grid { position: relative; z-index: 3; min-height: 560px; }
.hero__copy { max-width: 540px; padding-top: 72px; }
.trust { animation: slide-in 1600ms var(--ease-out) both; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.8); box-shadow: var(--shadow-subtle-4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 400 var(--text-caption)/1.5 var(--sans); color: var(--color-pure-black); }
.trust svg { width: 15px; height: 15px; color: var(--ink); }
.trust b { font-weight: 600; }
.trust span { color: var(--ink-3); }
.hero .h1 { margin-top: 80px; }
.hero .lead { margin-top: 20px; max-width: 520px; }
.hero .btn-row { margin-top: 28px; }

@keyframes slide-in { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }

/* logo bar: monochrome, 48px apart, no chrome */
/* partner logos in their own colours, drifting right to left; two identical sets make the loop seamless */
.logos { --logo-gap: 64px; position: relative; z-index: 3; padding: 40px 0 44px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; width: max-content; animation: logos var(--dur, 36s) linear infinite; }
.logos__set { display: flex; align-items: center; gap: var(--logo-gap); padding-right: var(--logo-gap); }
.logos img { height: var(--h, 36px); width: auto; max-width: 160px; object-fit: contain; }
@keyframes logos { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .logos:hover .logos__track { animation-play-state: paused; } }

/* ---------- sections ---------- */
.sec { padding: var(--sec) 0 0; }

/* at a glance */
.scale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.scale .h-state { max-width: 520px; }
.scale .p { margin: 24px 0 28px; max-width: 470px; }
.scale__art { position: relative; }
.scale__art svg { width: 100%; height: auto; overflow: visible; }
/* rising dot tails: each column grows up from below in turn */
.tail rect { fill: url(#tail-fade); transform-box: fill-box; transform-origin: top; }
.tail circle { fill: var(--color-seafoam-600); }
.tail .tail__dot2 { opacity: 0.45; }
.tail .tail__lead { fill: var(--ink); stroke: var(--bg); stroke-width: 3; }
.js .scale__art .tail { opacity: 0; }
.js .scale__art.is-in .tail { animation: tail-rise 2000ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.js .scale__art.is-in .tail rect { animation: tail-grow 2000ms var(--ease-out) both; animation-delay: calc(200ms + var(--i) * 45ms); }
@keyframes tail-rise { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes tail-grow { from { scale: 1 0; } to { scale: 1 1; } }
/* stats row: seafoam numbers, no dividers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-48) var(--spacing-32); margin-top: var(--section-gap); }
.stats div { display: flex; flex-direction: column; gap: 6px; }
/* stats come into focus: up, out of a blur, one after another */
.js .stats.reveal, .js .stats.reveal.is-in { opacity: 1; animation: none; }
.js .stats > div { opacity: 0; }
.js .stats.is-in > div { animation: stat-in 1500ms var(--ease-out) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes stat-in { from { opacity: 0; translate: 0 16px; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.stats dt { order: 1; font: 500 var(--text-subheading-lg)/var(--leading-subheading-lg) var(--sans); letter-spacing: var(--tracking-subheading-lg); color: var(--data); font-variant-numeric: tabular-nums; }
.stats dd { order: 2; max-width: 200px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }

/* company index: the six companies as one quiet list on the site's hairlines, beside one photo stage.
   Each row: emblem, full name, one line, the website (a dot in the company's colour) and an arrow. The row under the
   pointer or focus takes its company's colour: a faint wash, a 2px rule drawn along its hairline and the arrow
   filling into a round button in that colour; the stage crossfades to its photo. Rows are a fixed height and the
   list sets the section's height, so switching never changes the size. Touch and narrow screens: no stage, every
   row carries its own small photo. (Replaces .case*, .facts, .tab-ind.) */
.idx { --c: #c2491a; --row: 80px; --back: #eef0f3; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 35%, 410px); gap: 56px; }
.idx__list { margin: 0; padding: 0; list-style: none; }
.idx__row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "mark text end"; align-items: center; column-gap: 16px; min-height: var(--row); padding: 10px 8px 10px 14px; -webkit-tap-highlight-color: transparent; }

/* hairline under every row, and the company-colour rule drawn along it for the active row */
.idx__rule, .idx__hl { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; transform-origin: left center; }
.idx__rule { background: var(--line); }
.idx__hl { z-index: 1; height: 2px; bottom: -0.5px; background: var(--c); transform: scaleX(0); transform-origin: right center; transition: transform 180ms var(--ease-out); }
.idx__row.is-active .idx__hl { transform: scaleX(1); transform-origin: left center; transition-duration: 300ms; }
/* a faint wash of the company colour that fades out to the right, inside the column (no bleed past the label) */
.idx__wash { position: absolute; inset: 0; pointer-events: none; background: var(--c); opacity: 0; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.35) 55%, transparent); mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.35) 55%, transparent); transition: opacity 200ms ease; }
.idx__row.is-active .idx__wash { opacity: 0.07; }

/* the company's own emblem on a small white tile (a line icon in the company colour stands in where there is none) */
.idx__mark { grid-area: mark; forced-color-adjust: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 26, 74, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); }
.idx__mark img { width: auto; height: auto; max-width: 26px; max-height: 26px; }
.idx__mark svg { width: 21px; height: 21px; color: var(--c); stroke-width: 1.9; }

.idx__text { grid-area: text; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idx__name { font: 500 var(--text-subheading-sm)/1.2 var(--sans); letter-spacing: var(--tracking-subheading-sm); color: var(--ink); }
.idx__chev { display: none; }
.idx__nw { white-space: nowrap; }
/* the name is the row's link; its hit area covers the whole row, and the focus ring is drawn on it, inside the column */
.idx__name::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 6px; }
.idx__name:focus-visible { outline: none; }
.idx__name:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; }
.idx__line { font: 400 14px/1.4 var(--sans); color: #656871; }

/* right end: the website link (above the row link) and the arrow */
.idx__end { grid-area: end; display: grid; grid-template-columns: minmax(224px, max-content) 28px; align-items: center; column-gap: 16px; min-width: 0; }
.idx__site { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; padding: 12px 0; font: 400 12px/1 var(--mono); color: #656871; white-space: nowrap; transition: color 150ms ease; }
.idx__site::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.idx__site svg { flex-shrink: 0; width: 12px; height: 12px; stroke-width: 2; transition: transform 200ms var(--ease-out); }
.idx__row.is-active .idx__site { color: var(--ink-2); }
/* the arrow fills into a round button in the company's colour on the active row */
.idx__go { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; color: rgba(17, 26, 74, 0.3); transition: color 150ms ease; }
.idx__go::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: 0; transform: scale(0.5); transition: transform 240ms var(--ease-out), opacity 180ms ease; }
.idx__go svg { position: relative; width: 16px; height: 16px; stroke-width: 2; transform: translateX(-3px); transition: transform 240ms var(--ease-out); }
.idx__row.is-active .idx__go { color: #fff; }
.idx__row.is-active .idx__go::before { opacity: 1; transform: scale(1); }
.idx__row.is-active .idx__go svg { transform: translateX(0); }
.idx__row:active .idx__go svg { transform: translateX(2px); }
.idx__thumb { display: none; }

/* the stage: one photo at a time, its caption under it */
.idx__stage { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.idx__frame { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--r); background: var(--back); }
.idx__frame::after { content: ""; position: absolute; inset: 0; z-index: 99; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 26, 74, 0.06); pointer-events: none; }
/* each photo sits on its own opaque layer, so a render's multiply never blends with the photo underneath mid-crossfade */
.idx__shot { position: absolute; inset: 0; overflow: hidden; background: var(--back); isolation: isolate; opacity: 0; transform: translateY(var(--dy, 0px)) scale(1.03);
  /* leaving: hold still under the incoming photo, then drop out once it has covered */
  transition: opacity 0s linear 300ms, transform 0s linear 300ms; }
.idx__shot.is-on { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
:is(.idx__shot, .idx__thumb) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* renders on white and the poster: shown whole on the shared backing; multiply melts a render's white into it */
:is(.idx__shot, .idx__thumb) img:is(.fit-render, .fit-poster) { inset: auto; top: 50%; left: 50%; width: auto; height: auto; max-width: calc(100% - 44px); max-height: calc(100% - 44px); object-fit: contain; translate: -50% -50%; }
.fit-render { mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
.fit-poster { border-radius: 4px; box-shadow: 0 1px 3px rgba(17, 26, 74, 0.12); }
.idx__cap { display: flex; align-items: center; gap: 8px; height: 18px; margin-top: 12px; overflow: hidden; font: 400 12px/18px var(--mono); color: #656871; white-space: nowrap; opacity: 0; }
.idx__cap.is-on { opacity: 1; transition: opacity 200ms ease; }
.idx__cap::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.idx__cap span { overflow: hidden; text-overflow: ellipsis; }

/* entry, on every visit: rows rise one after another, hairlines draw in, the stage settles, then the first company
   takes its colour. Transitions keyed on .is-in from main.js's reveal-replay, so a later display change (a tablet
   rotating across the breakpoint) can never replay them */
.js .idx :is(.idx__mark, .idx__text, .idx__end, .idx__thumb) { transition: opacity 640ms var(--ease-out), translate 640ms var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.js .idx .idx__rule { transition: transform 900ms var(--ease-out) calc(60ms + var(--i) * 55ms); }
.js .idx .idx__stage { transition: opacity 760ms var(--ease-out) 120ms, translate 760ms var(--ease-out) 120ms; }
.js .idx:not(.is-in) :is(.idx__mark, .idx__text, .idx__end, .idx__thumb, .idx__stage) { opacity: 0; translate: 0 12px; transition: none; }
.js .idx:not(.is-in) .idx__rule { transform: scaleX(0); transition: none; }
.js .idx:not(.is-in) :is(.idx__hl, .idx__wash, .idx__go, .idx__go svg), .js .idx:not(.is-in) .idx__go::before { transition: none; }
.js .idx:not(.is-in) .idx__row.is-active .idx__hl { transform: scaleX(0); }
.js .idx:not(.is-in) .idx__row.is-active .idx__wash { opacity: 0; }
.js .idx:not(.is-in) .idx__row.is-active .idx__go { color: rgba(17, 26, 74, 0.3); }
.js .idx:not(.is-in) .idx__row.is-active .idx__go::before { opacity: 0; transform: scale(0.5); }
.js .idx:not(.is-in) .idx__row.is-active .idx__go svg { transform: translateX(-3px); }
.js .idx.is-first .idx__row.is-active .idx__hl { transition-delay: 420ms; transition-duration: 520ms; }
.js .idx.is-first .idx__row.is-active :is(.idx__wash, .idx__go, .idx__go svg), .js .idx.is-first .idx__row.is-active .idx__go::before { transition-delay: 420ms; }
/* the page's .reveal fade is not used on the block itself (as with .stats): the rows carry their own stagger */
.js .idx.reveal, .js .idx.reveal.is-in { opacity: 1; animation: none; }

@media (hover: hover) and (pointer: fine) {
  .idx__site:hover { color: var(--ink); }
  .idx__site:hover svg { transform: translate(1px, -1px); }
}

/* touch devices, tablets and small laptops: no stage (nothing to hover, or too little room beside the list);
   every row carries its own small photo and a tap opens the company */
@media (max-width: 1179px), (hover: none), (pointer: coarse) {
  .idx { grid-template-columns: minmax(0, 1fr); }
  .idx__stage { display: none; }
  .idx__row { grid-template-columns: 36px minmax(0, 1fr) 128px; grid-template-areas: "mark text thumb" "mark end thumb"; grid-template-rows: auto 1fr; align-items: start; column-gap: 16px; height: auto; padding: 20px 8px 20px 14px; }
  .idx__line { white-space: normal; }
  .idx__end { display: flex; align-self: start; }
  .idx__site:focus-visible { outline-offset: -1px; }
  .idx__site { width: auto; padding: 10px 0 6px; margin-bottom: -6px; }
  .idx__go { display: none; }
  /* the colour stays visible at rest: a chevron in the company's colour after its name */
  .idx__chev { display: inline-block; width: 15px; height: 15px; margin-left: 3px; vertical-align: -1px; color: var(--c); stroke-width: 2.4; }
  .idx__thumb { grid-area: thumb; display: block; position: relative; isolation: isolate; width: 128px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--back); box-shadow: inset 0 0 0 1px rgba(17, 26, 74, 0.06); }
  .idx__thumb img:is(.fit-render, .fit-poster) { max-width: calc(100% - 8px); max-height: calc(100% - 8px); }
  .idx__row.is-active .idx__wash { opacity: 0; }
  .idx__row.is-active .idx__hl { transform: scaleX(0); }
  /* press: the row takes its colour while the finger is down */
  .idx__row:active .idx__wash { opacity: 0.07; transition-duration: 80ms; }
}
@media (max-width: 767px) {
  .idx__row { grid-template-columns: 32px minmax(0, 1fr) 76px; grid-template-areas: "mark text thumb" "mark end end"; column-gap: 12px; padding: 16px 0; }
  .idx__mark { width: 32px; height: 32px; border-radius: 7px; }
  .idx__mark img { max-width: 23px; max-height: 23px; }
  .idx__mark svg { width: 19px; height: 19px; }
  .idx__name { font-size: 17px; line-height: 1.25; }
  .idx__thumb { width: 76px; aspect-ratio: 1; }
}

/* generic chips (company pages) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; max-width: 420px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: var(--radius-full); background: var(--chip); font: 500 var(--text-caption)/1 var(--sans); color: var(--ink); white-space: nowrap; }
.chip svg { width: 14px; height: 14px; color: var(--ink-3); }

/* vet-led: copy + transaction-style report card */
.dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.dev .h-state { max-width: 440px; }
.dev .p { margin: 16px 0 28px; max-width: 470px; }
.dev__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.dev__cols .small { margin-top: 12px; }
/* award (founder section): the awarding body's navy badge (its own artwork, #16134a) beside the citation; one pass of
   light over the badge each time the card comes into view */
.award { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 72px 0 0; overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px rgba(17, 26, 74, 0.07), 0 18px 40px -24px rgba(17, 26, 74, 0.22); }
.award__badge { position: relative; display: grid; place-items: center; overflow: hidden; background: #16134a; }
.award__badge img { display: block; width: 100%; height: auto; }
.award__badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.06) 56%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.js .award.is-in .award__badge::after { animation: award-shine 1400ms cubic-bezier(0.77, 0, 0.175, 1) 500ms both; }
@keyframes award-shine { to { transform: translateX(110%); } }
.award__text { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 40px; }
.award__k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #656871; }
.award__title { font: 500 var(--text-subheading-lg)/1.15 var(--sans); letter-spacing: var(--tracking-subheading-lg); color: var(--ink); text-wrap: balance; }
.award__by { font: 400 14px/1.45 var(--sans); color: #656871; text-wrap: pretty; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.frame { padding: 16px; border-radius: var(--r); background: #eeeff2; border: 1px solid rgba(17, 26, 74, 0.05); box-shadow: var(--shadow-subtle-8); }
.report { padding: 20px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm), var(--shadow-subtle-5); }
.report__big { font: 600 24px/1 var(--sans); letter-spacing: -0.03em; color: var(--color-obsidian); }
/* the review runs as a flow (ledger.js, [data-flow]): Review → Report → Plan. Each step is waiting (clock),
   busy (a turning ring) or done (green check); the bar fills to --p with a glowing head; report lines type in
   while "Report" runs; "Your operation" turns green when the plan is done. Markup ships in the finished state. */
.report__steps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font: 500 var(--text-caption)/1.33 var(--sans); }
.rstep { display: inline-flex; align-items: center; gap: 5px; color: var(--color-fog); transition: color 300ms ease; }
.rstep[data-state="busy"] { color: var(--ink); }
.rstep[data-state="done"] { color: var(--data); }
.rstep__ico { position: relative; display: grid; place-items: center; width: 13px; height: 13px; }
.rstep__ico > * { grid-area: 1 / 1; transition: opacity 250ms ease, scale 300ms var(--ease-out); }
.rstep__ico svg { width: 13px; height: 13px; stroke-width: 2.2; }
.i-busy { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(17, 26, 74, 0.15); border-top-color: var(--color-seafoam-600); animation: spin 800ms linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.rstep:not([data-state="done"]) .i-done, .rstep:not([data-state="wait"]) .i-wait, .rstep:not([data-state="busy"]) .i-busy { opacity: 0; scale: 0.6; }
.report__bar { position: relative; height: 2px; margin: 18px 0 14px; border-radius: 2px; background: var(--line); }
.report__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--color-seafoam-600); transform-origin: left; scale: var(--p, 0) 1; transition: scale 1000ms cubic-bezier(0.65, 0, 0.35, 1); }
.report__head { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-seafoam-600); box-shadow: 0 0 0 4px rgba(68, 180, 139, 0.18), 0 0 12px rgba(68, 180, 139, 0.6); translate: calc(var(--p, 0) * var(--bar-w, 0px)) 0; opacity: 0; transition: translate 1000ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease; }
.report.is-running .report__head { opacity: 1; }
.report.is-resetting .report__fill, .report.is-resetting .report__head, .report.is-resetting .report__to, .report.is-resetting .report__to svg { transition: none; }
.report__ends { display: flex; justify-content: space-between; gap: 12px; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.report__ends small { display: block; font: 400 12px/1.3 var(--sans); color: var(--ink-3); }
.report__to { display: flex; align-items: center; gap: 8px; text-align: right; transition: color 300ms ease; }
.report__to svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: color-mix(in srgb, var(--color-seafoam-600) 14%, transparent); color: var(--data); stroke-width: 2.6; opacity: 0; scale: 0.5; transition: opacity 300ms ease, scale 400ms var(--ease-out); }
.report__to.is-done { color: var(--data); }
.report__to.is-done svg { opacity: 1; scale: 1; }
.report__list { padding: 20px 4px 4px; }
.report__list h3 { font: 400 var(--text-micro)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.report__list ol { margin-top: 12px; counter-reset: ln; }
.report__list li { counter-increment: ln; display: grid; grid-template-columns: 28px 1fr; padding: 2px 0; font: 400 var(--text-caption)/var(--leading-caption) var(--code); color: var(--color-seafoam-700); }
.report__list li::before { content: counter(ln, decimal-leading-zero); color: var(--color-fog); }
.report__list li { transition: opacity 250ms ease, clip-path 450ms steps(18, end); }
.report__list li:not(.is-on) { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 250ms ease, clip-path 0s linear 250ms; }

/* ---------- link tiles (company pages: "More from AVOT Group") ---------- */
.blocks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--element-gap); align-content: start; }
.tile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: var(--r); background: var(--tile); font: 500 var(--text-body)/1.1 var(--sans); color: var(--ink); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .tile:hover { background: rgba(17, 26, 74, 0.065); } }
.tile__ico { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; background: #fff; box-shadow: var(--shadow-subtle-9); color: var(--c, var(--data)); }
.tile__ico svg { width: 17px; height: 17px; }
.tile span:last-child { min-width: 0; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.contact .lead { margin-top: 20px; max-width: 440px; }
.checks { display: grid; gap: 10px; margin-top: 32px; }
.checks li { display: flex; align-items: center; gap: 10px; font: 400 var(--text-body)/1.3 var(--sans); color: var(--ink); }
.checks svg { width: 16px; height: 16px; color: var(--color-seafoam-700); stroke-width: 2.4; flex-shrink: 0; }
.form-card { padding: 32px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px rgba(17, 26, 74, 0.07), 0 18px 40px -24px rgba(17, 26, 74, 0.22); }
.form-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.contact-page { padding-bottom: 0; }
.contact-page .h1 { margin-top: 24px; }
.form-card__head h2, .form-card__head h3 { font: 500 var(--text-subheading-sm)/1.2 var(--sans); letter-spacing: var(--tracking-subheading-sm); color: var(--ink); }
.form-card__head span { font: 400 var(--text-caption)/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.req { color: var(--color-signal-orange); margin-left: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.label-f { display: block; margin-bottom: 6px; font: 500 13px/1.2 var(--sans); color: var(--ink); }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(17, 26, 74, 0.14); border-radius: var(--r); background: #fff; color: var(--ink); font: 400 16px/1.3 var(--sans); transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.input::placeholder, .textarea::placeholder { color: var(--color-fog); }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9acb6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.textarea { min-height: 128px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); background-color: #fff; box-shadow: 0 0 0 3px rgba(17, 26, 74, 0.1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.form-foot .btn { height: 44px; }
.form-foot p { font: 400 13px/1.4 var(--sans); color: var(--ink-3); overflow-wrap: anywhere; }
.form-foot p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-status { margin-top: 14px; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.form-status:empty { display: none; }
.form-status a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* contact page, "Visit us": ledger rows beside a Google map (muted to the site's palette; colour returns on hover) */
.visit__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: stretch; }
.visit__info { display: flex; flex-direction: column; align-items: flex-start; }
.visit__rows { width: 100%; margin-top: 28px; border-top: 1px solid var(--line); }
.visit__rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.visit__rows dt { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #656871; }
.visit__rows dd { font: 400 15px/1.45 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.visit__rows a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17, 26, 74, 0.2); text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .visit__rows a:hover { text-decoration-color: currentColor; } }
.visit__info .btn { margin-top: 28px; }
.visit__map { position: relative; min-height: 440px; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: #eef0f3; }
.visit__map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 26, 74, 0.08); pointer-events: none; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.35) contrast(1.03); transition: filter 400ms ease; }
@media (hover: hover) and (pointer: fine) { .visit__map:hover iframe { filter: none; } }
.form-done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.form-done__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--color-seafoam-600) 14%, transparent); color: var(--color-seafoam-700); }
.form-done__mark svg { width: 22px; height: 22px; stroke-width: 2.4; }
.form-done h3 { font: 600 var(--text-subheading-lg)/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); outline: none; }
.form-done p { font: 300 var(--text-body)/var(--leading-body) var(--sans); color: var(--ink-2); max-width: 440px; }

/* ---------- closer: centred, light, the hero's glow and buttons; a halftone field grows out of the footer ---------- */
.closer { position: relative; isolation: isolate; margin-top: var(--sec); padding-top: 24px; text-align: center; }
.closer__glow { position: absolute; z-index: -1; top: -80px; left: 50%; width: min(1000px, 100%); height: 620px; translate: -50% 0; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--surface-sky-wash) 20%, transparent) 20%, transparent 68%); pointer-events: none; }
.closer__inner { display: flex; flex-direction: column; align-items: center; }
.closer__title { margin-top: 20px; }
.closer__text { max-width: 560px; margin-top: 20px; font: 300 var(--text-body-lg)/var(--leading-body-lg) var(--sans); color: var(--ink-3); text-wrap: balance; }
.closer .btn-row { justify-content: center; margin-top: 32px; }
.closer__call { margin-top: 20px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.closer__call a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(17, 26, 74, 0.25); text-underline-offset: 3px; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .closer__call a:hover { text-decoration-color: currentColor; } }
/* the field: its ends fade into the page and its lowest rows dissolve into the footer below */
.closer__field { position: relative; height: 220px; margin-top: 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.closer__field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* footer: on the page itself, no card (Column's footer); after the closer the field dissolves into it */
.site-footer { padding: 32px 0 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.site-footer--alone { margin-top: var(--sec); padding-top: 64px; border-top: 1px solid; border-image: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent) 1; }
.footer-top { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; }
.footer-logo { display: inline-block; }
.footer-logo img { display: block; height: 40px; width: auto; }
.footer-brand p { max-width: 300px; margin-top: 18px; font: 300 14px/1.5 var(--sans); color: var(--ink-3); text-wrap: pretty; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: space-between; gap: 32px 48px; }
.footer-cols h2 { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.footer-cols ul { margin-top: 14px; }
.footer-cols a, .footer-cols li > span { display: inline-block; padding: 4px 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .footer-cols a:hover { color: var(--ink); } }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-legal p { font: 400 13px/1.5 var(--sans); color: var(--ink-3); }
.footer-legal .footer-note { margin-top: 2px; max-width: 720px; font-size: 12px; opacity: 0.85; }
.footer-note b { font-weight: 500; color: var(--ink-2); }
.footer-end { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.footer-end nav { display: flex; gap: 16px; }
.footer-end nav a { display: inline-block; padding: 4px 0; font: 400 13px/1.5 var(--sans); color: var(--ink-3); transition: color 200ms ease; }
.socials { display: flex; margin-right: -10px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); color: var(--ink-3); transition: color 200ms ease, background-color 200ms ease; }
.socials svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .footer-end nav a:hover { color: var(--ink); }
  .socials a:hover { background: rgba(17, 26, 74, 0.05); color: var(--ink); }
}

/* ---------- company pages ---------- */
.co-hero { position: relative; overflow: clip; padding: calc(var(--header-h) + 72px) 0 0; margin-top: calc(-1 * var(--header-h)); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; font: 400 13px/1.3 var(--sans); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a::after { content: "/"; margin-left: 6px; color: var(--color-mist); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }
.co-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.co-hero .h1 { margin-top: 24px; }
.co-hero .lead { margin-top: 20px; max-width: 500px; }
.co-hero .btn-row { margin-top: 28px; }
.co-hero .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.co-hero .frame .chips { margin-top: 14px; max-width: none; }
.co-hero .frame .chip { background: rgba(255, 255, 255, 0.7); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.pcard { display: flex; flex-direction: column; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.pcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__media--contain img { object-fit: contain; padding: 20px; }
.pcard__media--icon { display: grid; place-items: center; color: var(--c, var(--data)); }
.pcard__media--icon svg { width: 48px; height: 48px; stroke-width: 1.4; }
.pcard__body { display: flex; flex-direction: column; gap: 10px; padding: var(--card-padding); }
.pcard__body .label { align-self: flex-start; }
.pcard__body p { font: 300 14px/1.43 var(--sans); color: var(--ink-2); }
.dark-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 64px; border-radius: var(--r-lg); background: var(--dark) radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.2px) 0 0 / 16px 16px; }
.dark-band small { display: block; margin-bottom: 14px; font: 400 var(--text-caption)/1.4 var(--mono); color: rgba(193, 232, 239, 0.6); }
.dark-band h2 { font: 500 32px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--dark-ink); }
.dark-band p { margin-top: 10px; font: 300 var(--text-body)/1.4 var(--sans); color: rgba(255, 255, 255, 0.78); }
.dark-band .btn { flex-shrink: 0; }

/* ---------- legal + 404 ---------- */
.text-page { padding: 112px 0 0; }
.text-page .container { max-width: calc(760px + var(--gutter) * 2); }
.text-page .badge { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-caption)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.text-page .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-seafoam-600); }
.text-page h1 { margin-top: 24px; }
.text-page .h2 { font-size: var(--text-heading); letter-spacing: -0.03em; line-height: var(--leading-heading); }
.prose { margin-top: 40px; }
.prose p { font: 300 var(--text-body)/1.6 var(--sans); color: var(--ink-2); }
.prose p + p { margin-top: 16px; }
.prose b { color: var(--ink); font-weight: 500; }
.prose a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); overflow-wrap: anywhere; }
.fine { margin-top: 40px; font: 400 13px/1.4 var(--sans); color: var(--ink-3); }
.text-page--center { text-align: center; padding-top: 160px; }
.text-page--center .lead { margin: 20px auto 0; max-width: 460px; }
.text-page--center .btn-row { justify-content: center; margin-top: 32px; }

/* ---------- reveal (keyframes, so press feedback and hover transitions stay untouched) ---------- */
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: rise 700ms var(--ease-out) both; }
.js .reveal.d1.is-in { animation-delay: 60ms; }
.js .reveal.d2.is-in { animation-delay: 120ms; }
.js .reveal.d3.is-in { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 0; } to { opacity: 1; } }
  .js .reveal.is-in { animation-duration: 300ms; }
  /* keep the gentle fades, drop the travel, loops and blinking */
  .trust { animation: fade 300ms ease both; }
  .label::after, .js .award.is-in .award__badge::after { animation: none; }
  /* still logos: one set, wrapped and centred */
  .logos { -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; width: auto; }
  .logos__set { flex-wrap: wrap; justify-content: center; row-gap: 24px; padding-right: 0; width: 100%; }
  .logos__set[aria-hidden] { display: none; }
  .js .scale__art.is-in .tail, .js .scale__art.is-in .tail rect, .js .stats.is-in > div { animation: fade 300ms ease both; }
  /* farm review: ledger.js leaves it finished and still; nothing slides or spins */
  .report__fill, .report__head { transition: none; }
  .i-busy { animation: none; }
  /* company index: no travel or scaling; plain fades */
  .js .idx :is(.idx__mark, .idx__text, .idx__end, .idx__thumb), .js .idx .idx__stage { transition: opacity 300ms ease; transition-delay: 0ms; }
  .js .idx:not(.is-in) :is(.idx__mark, .idx__text, .idx__end, .idx__thumb, .idx__stage) { translate: none; }
  .js .idx .idx__rule, .js .idx:not(.is-in) .idx__rule { transform: none; transition: none; }
  .idx__hl, .idx__row.is-active .idx__hl, .js .idx:not(.is-in) .idx__row.is-active .idx__hl { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .idx__row.is-active .idx__hl { opacity: 1; }
  .js .idx:not(.is-in) .idx__row.is-active .idx__hl { opacity: 0; }
  .js .idx.is-first .idx__row.is-active :is(.idx__hl, .idx__wash, .idx__go, .idx__go svg), .js .idx.is-first .idx__row.is-active .idx__go::before { transition-delay: 0ms; }
  .idx__go::before, .idx__row.is-active .idx__go::before, .js .idx:not(.is-in) .idx__row.is-active .idx__go::before { transform: none; }
  .idx__go svg, .idx__row.is-active .idx__go svg, .idx__row:active .idx__go svg, .js .idx:not(.is-in) .idx__row.is-active .idx__go svg { transform: none; }
  .idx__shot, .idx__shot.is-on { transform: none; }
  .idx__shot.is-on { transition: opacity 200ms ease; }
  /* touch and narrow screens draw no active rule (as without reduced motion) */
  @media (max-width: 1179px), (hover: none), (pointer: coarse) { .idx__row.is-active .idx__hl { opacity: 0; } }
}

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .footer-top { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1199px) {
  :root { --gutter: 32px; }
  .hero .h1 { font-size: 44px; }
  .hero .lead { max-width: 420px; font-size: 18px; }
  .logos { --logo-gap: 48px; }
}

@media (max-width: 1023px) {
  .visit__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .visit__map { min-height: 360px; }
  .closer__field { height: 180px; }
  :root { --gutter: 24px; --sec: var(--spacing-96); }
  .nav, .mega, .header-right .btn, .header-right .nav-link { display: none; }
  .menu-btn { display: grid; }
  .brand img { height: 28px; }
  .hero { padding-top: var(--header-h); }
  .hero__glow { left: 50%; top: 0; margin-left: -540px; }
  .hero__art { position: relative; top: 0; left: 50%; width: 820px; margin: 0 0 0 -500px; }
  .hero__fade { display: none; }
  .hero__grid { min-height: 0; }
  .hero__copy { max-width: 640px; padding-top: 8px; }
  .hero .h1 { margin-top: 32px; font-size: var(--text-heading-sm); letter-spacing: var(--tracking-heading-sm); }
  .logos { --logo-gap: 40px; }
  .scale, .dev, .contact, .co-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .scale__art { max-width: 560px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 56px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dark-band { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
  .co-hero { padding-top: calc(var(--header-h) + 40px); }
}

@media (max-width: 767px) {
  .visit__map { min-height: 300px; }
  .award { grid-template-columns: 128px minmax(0, 1fr); margin-top: 48px; }
  .award__text { gap: 8px; padding: 20px; }
  .award__title { font-size: 20px; }
  .award__by { font-size: 13px; }
  .visit__rows div { grid-template-columns: 80px minmax(0, 1fr); }
  :root { --gutter: 16px; --sec: var(--section-gap); }
  .h1, .display { font-size: 32px; letter-spacing: -0.01em; }
  .h2 { font-size: var(--text-heading-sm); }
  .h3, .text-page .h2 { font-size: 32px; }
  .h-state { font-size: 24px; }
  .lead { font-size: var(--text-body-lg); }
  .announce b { display: none; }
  .hero__art { width: 640px; margin-left: -390px; }
  .hero .h1 { font-size: 32px; letter-spacing: -0.01em; }
  .hero .btn-row { flex-direction: column; }
  .hero .btn-row .btn, .closer .btn { width: 100%; }
  .btn, .btn--glass { height: 44px; }
  .logos { --logo-gap: 36px; padding: 32px 0; }
  .logos img { max-width: 120px; height: calc(var(--h, 36px) * 0.8); }
  .label-row { margin-bottom: 32px; }
  .stats dt { font-size: 24px; }
  .dev__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .blocks__grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 24px 20px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .closer__glow { height: 520px; }
  .closer__text { font-size: var(--text-body); }
  .closer__hours { display: block; margin-top: 2px; }
  .closer__sep { display: none; }
  .closer__field { height: 140px; margin-top: 48px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-cols > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; margin-top: 48px; }
  .footer-end { width: 100%; justify-content: space-between; }
  .scale__art text { font-size: 14px; }
  .scale__art .cap { font-size: 14px; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .dark-band { padding: 32px 20px; }
  .dark-band h2 { font-size: 26px; }
  .text-page { padding-top: 72px; }
  .text-page--center { padding-top: 96px; }
}

@media (max-width: 380px) {
  .award { grid-template-columns: 96px minmax(0, 1fr); }
  .award__text { padding: 16px; }
  .award__title { font-size: 18px; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
}