/* tesvero.com v1. Brand tokens from the Tesvero kit (30 Oct 2026). One decorative gold treatment per surface: the hero rule; navigation and ledgers use neutral tokens. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.693b77d4f3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0B1F3A;
  --gold: #C9A227;
  --steel: #2E5C8A;
  --signal: #6AA6FF;
  --graphite: #2B2F36;
  --slate: #6B7280;
  --mist: #EEF1F5;
  --paper: #FFFFFF;
  --night: #0A1424;

  --bg: var(--paper);
  --bg-panel: var(--mist);
  --text: var(--graphite);
  --heading: var(--ink);
  --muted: var(--slate);
  --link: var(--steel);
  --rule: var(--gold);
  --border: #D5DAE2;
  --focus: var(--steel);
  --control-border: var(--slate);
  --ring-inner: var(--paper);
  --ring-outer: var(--steel);
  --button-bg: var(--ink);
  --button-text: var(--paper);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --measure: 66ch;
  --gutter: 16px;
  --space: clamp(1.25rem, 3vw, 2rem);
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--night);
    --bg-panel: #111D31;
    --text: #D7DCE4;
    --heading: #FFFFFF;
    --muted: #9AA3B2;
    --link: var(--signal);
    --border: #243249;
    --focus: var(--signal);
    --control-border: var(--signal);
    --ring-inner: var(--ink);
    --ring-outer: var(--signal);
    --button-bg: #FFFFFF;
    --button-text: var(--ink);
  }
}
:root[data-theme="dark"] {
  --bg: var(--night);
  --bg-panel: #111D31;
  --text: #D7DCE4;
  --heading: #FFFFFF;
  --muted: #9AA3B2;
  --link: var(--signal);
  --border: #243249;
  --focus: var(--signal);
  --control-border: var(--signal);
  --ring-inner: var(--ink);
  --ring-outer: var(--signal);
  --button-bg: #FFFFFF;
  --button-text: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv05", "ss03";
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { color: var(--heading); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 650; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.125rem); }
h3 { font-size: 1.1875rem; }
p, ul, ol, dl { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.25em; }
small, .muted { color: var(--muted); }
hr.rule, .rule { border: 0; height: 2px; width: 56px; background: var(--rule); margin: 0 0 1.25rem; }

.wrap { width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--button-bg); color: var(--button-text); padding: 0.5rem 0.75rem; border-radius: var(--radius); z-index: 100; }
.skip:focus { left: 8px; }
/* The skip link lands below the sticky header by the header's measured height; until the
   script has measured it the header is not sticky, so nothing needs clearing. */
#main { scroll-margin-top: var(--header-h, 0px); }
#main:focus { outline: none; }

/* header. The lockup is 2200 by 720 units with a 190-unit cap height: at 61px
   outer height the capitals reach the kit's 16px minimum, and the 60-unit clear
   space becomes 5px, kept by the padding. On narrow phones the canonical mark
   stands in; the link keeps its accessible name. The SVG is never stretched. */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: static; z-index: 20; }
html.header-measured .site-header { position: sticky; top: 0; }
.bar { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.home { display: inline-flex; align-items: center; margin-right: auto; padding: 5px 0; }
.lockup { height: 61px; width: auto; }
.mark { display: none; height: 32px; width: 32px; }
.lockup-dark, .mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup-light, :root:not([data-theme="light"]) .mark-light { display: none; }
  :root:not([data-theme="light"]) .lockup-dark { display: block; }
}
:root[data-theme="dark"] .lockup-light, :root[data-theme="dark"] .mark-light { display: none; }
:root[data-theme="dark"] .lockup-dark { display: block; }
@media (max-width: 480px) {
  .lockup, .lockup-dark { display: none !important; }
  .mark-light { display: block; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-light { display: none; } :root:not([data-theme="light"]) .mark-dark { display: block; } }
  :root[data-theme="dark"] .mark-light { display: none; }
  :root[data-theme="dark"] .mark-dark { display: block; }
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; max-width: none; }
.site-nav a { color: var(--heading); text-decoration: none; font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--heading); }
.menu-toggle { display: none; }
/* Hidden until its handler is attached: a control that does nothing is worse than none. */
.theme-toggle { visibility: hidden; background: transparent; color: var(--heading); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.875rem; cursor: pointer; }
html.theme-ready .theme-toggle { visibility: visible; }
.theme-toggle:hover { border-color: var(--heading); }
.theme-toggle[aria-pressed="true"] { border-color: var(--heading); box-shadow: inset 0 0 0 1px var(--heading); }
/* The lockup never shrinks below its 61px height and the controls never wrap their labels;
   when the row is too narrow the phone layout takes over instead. */
.home, .lang-switch, .theme-toggle { flex-shrink: 0; white-space: nowrap; }
.site-nav a { white-space: nowrap; }
/* The language link is a plain link, so it works without any script; it leads to the
   same page in the other language and is styled to sit beside the theme control. */
.lang-switch { color: var(--heading); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.875rem; }
.lang-switch:hover { border-color: var(--heading); }

/* Phone navigation sits in the header's flow (the bar wraps and the header grows),
   so no fixed header height is assumed. The list is visible until site.js has
   attached the menu handlers and added the menu-ready class; only then does the
   toggle appear and the list collapse. A theme script that runs without the
   interaction script changes nothing here. The breakpoint is where the full lockup,
   the Spanish navigation (the longer of the two), the language link and the theme
   control still fit on one row without shrinking the lockup (measured at 901px). */
@media (max-width: 900px) {
  .bar { flex-wrap: wrap; }
  .site-nav { order: 3; flex-basis: 100%; }
  html.menu-ready .menu-toggle { display: inline-block; background: transparent; color: var(--heading); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.875rem; cursor: pointer; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.25rem 0 0.75rem; }
  html.menu-ready .site-nav ul { display: none; }
  html.menu-ready .site-nav.open ul { display: flex; }
  .site-nav a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--heading); }
}

/* sections */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero p.lead { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--text); max-width: 42ch; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 0.75rem; }
.section { padding: var(--space) 0 calc(var(--space) * 1.5); }
.section + .section { border-top: 1px solid var(--border); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid > * { margin: 0; }
.panel { background: var(--bg-panel); border-radius: var(--radius); padding: 1.25rem 1.25rem 1rem; }
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; max-width: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 0.15rem; }
.steps h3 { margin-bottom: 0.25rem; }
.steps p { margin: 0; }
.ledger { border-left: 2px solid var(--border); padding-left: 1rem; }
.ledger dt { font-weight: 600; color: var(--heading); }
.ledger dd { margin: 0 0 0.75rem; }
.example { margin-top: 1.5rem; max-width: var(--measure); }
.example .eyebrow { color: var(--text); }
.example .ledger { border-left: 0; padding-left: 0; }
.example .ledger dt { margin-top: 0.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.button { display: inline-block; background: var(--button-bg); color: var(--button-text); text-decoration: none; padding: 0.7rem 1.1rem; border-radius: var(--radius); font-weight: 600; }
.button:hover { opacity: 0.92; }
/* A two-colour ring on filled buttons: an inner separator in the page colour, an outer ring that contrasts with it. */
.button:focus-visible { outline: 3px solid var(--ring-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ring-inner); }
.button.secondary { background: transparent; color: var(--heading); border: 1px solid var(--heading); }
table { border-collapse: collapse; width: 100%; max-width: 820px; margin-bottom: 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--heading); font-weight: 600; }

/* contact form */
form.contact { max-width: 560px; }
label { display: block; font-weight: 600; color: var(--heading); margin: 1rem 0 0.35rem; }
input, textarea, select { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--control-border); border-radius: var(--radius); padding: 0.6rem 0.7rem; }
textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form-note { font-size: 0.9rem; color: var(--muted); }

/* footer */
.site-footer { margin-top: calc(var(--space) * 2); border-top: 1px solid var(--border); background: var(--bg-panel); padding: 2rem 0 1.5rem; font-size: 0.95rem; }
.foot { display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr 1fr; }
.foot p { margin: 0 0 0.5rem; max-width: 46ch; }
.foot-name { font-weight: 600; color: var(--heading); }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.foot-base { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text); font-size: 0.875rem; }
.foot-base p { margin: 0; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } }