/* ==========================================================================
   SIT Services design system · base and components
   Vanilla CSS. Class names follow block__element--modifier.
   Uses tokens.css only; no raw colours, sizes or durations below.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  scrollbar-color: var(--color-control) var(--color-bg);
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
address { font-style: normal; }

h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); text-wrap: balance; }
h1, .t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
h2, .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-heading); }
h3, .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-ink-2); max-width: 58ch; text-wrap: pretty; }
.t-small { font-size: var(--fs-small); }
.t-muted { color: var(--color-ink-2); }
.t-meta { font-size: var(--fs-small); color: var(--color-ink-3); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap); }
.section--surface { background: var(--color-surface); }
.section__header { display: grid; gap: var(--space-4); max-width: 720px; margin-bottom: var(--space-8); }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-md); font-weight: var(--fw-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-control); }
.btn--ghost { background: transparent; color: var(--color-accent-text); padding-inline: var(--space-3); }
.btn--on-band { background: var(--color-band-ink); color: var(--brand-navy); }
.btn--outline-on-band { background: transparent; color: var(--color-band-ink); border-color: var(--color-band-ink-2); }
.btn--sm { min-height: var(--tap); padding: 0 var(--space-4); font-size: var(--fs-small); }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
  .btn--secondary:hover { border-color: var(--color-ink); background: var(--color-surface); }
  .btn--ghost:hover { background: var(--color-accent-soft); }
  .btn--on-band:hover { background: var(--color-accent-soft); }
  .btn--outline-on-band:hover { border-color: var(--color-band-ink); background: rgba(255, 255, 255, 0.08); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); margin-left: calc(-1 * var(--space-2)); background: var(--color-logo-plate); border-radius: var(--radius-md); flex: none; }
.logo img { width: 124px; height: auto; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.nav.is-scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--nav-height); }
.nav__links { display: none; align-items: center; gap: var(--space-1); margin-left: auto; }
.nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  color: var(--color-ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.nav__link:hover { color: var(--color-ink); background: var(--color-surface); text-decoration: none; }
.nav__link[aria-current="true"] { color: var(--color-ink); }
.nav__phone { display: none; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__phone:hover { color: var(--color-accent-text); }
.nav__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__tools { margin-left: var(--space-2); }
  .nav__phone { display: inline-flex; }
  .icon-btn.menu-btn { display: none; }
}

/* ---------- Icon button, theme toggle, menu button ---------- */
.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  background: transparent; color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.icon-btn:active { transform: scale(var(--press-scale)); }
.icon-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--color-surface); border-color: var(--color-control); } }

.theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-standard); grid-area: 1 / 1; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-45deg) scale(0.8); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(45deg) scale(0.8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 0; transform: rotate(45deg) scale(0.8); }
}

.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-standard);
}
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { transform: translateY(-6px); }
.menu-btn span::after { transform: translateY(6px); }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* ---------- Mobile menu: a panel that scales from the menu button ---------- */
.mobile-menu {
  position: fixed; top: calc(var(--nav-height) + var(--space-2)); left: var(--gutter); right: var(--gutter); z-index: var(--z-menu);
  display: grid; gap: var(--space-1); padding: var(--space-3);
  background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: scale(0.96); transform-origin: top right; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-4);
  color: var(--color-ink); font-weight: var(--fw-medium); text-decoration: none; border-radius: var(--radius-md);
}
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--color-surface); }
.mobile-menu .btn { margin-top: var(--space-2); }
@media (min-width: 960px) { .mobile-menu { display: none; } }

/* Without JavaScript the menu and theme buttons cannot work, so hide them and
   show the navigation links in the bar instead (wrapping under the logo on
   small screens). The theme still follows the visitor's system setting. */
html:not(.js) .nav__tools { display: none; }
@media (max-width: 959px) {
  html:not(.js) .nav { position: static; }
  html:not(.js) .nav__inner { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2); }
  html:not(.js) .nav__links { display: flex; flex-wrap: wrap; width: 100%; margin-left: calc(-1 * var(--space-3)); }
}

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface-raised); color: var(--color-ink);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.card__icon { width: 28px; height: 28px; color: var(--color-accent-text); margin-bottom: var(--space-2); }
.card__icon svg { width: 100%; height: 100%; }
.card__text { color: var(--color-ink-2); }
.card__link {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3);
  color: var(--color-accent-text); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none;
}
.card__link svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
/* The whole card is clickable through its link; the link stays the only focus stop. */
.card--interactive .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--interactive {
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out);
}
.card--interactive:active { transform: scale(0.99); }
.card--interactive:focus-within { border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .card--interactive:hover { transform: translateY(var(--lift)); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
  .card--interactive:hover .card__link svg { transform: translateX(3px); }
}

/* Tile: a quieter, borderless card for supporting points. On a surfaced section use .tile--on-surface. */
.tile { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); }
.tile--on-surface { background: var(--color-bg); }
.tile__mark { width: 24px; height: 24px; color: var(--color-accent-text); }
.tile p { color: var(--color-ink-2); }

/* Tag */
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); background: var(--color-accent-soft); color: var(--color-accent-text); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-medium); }

/* ---------- Band: the dark call-to-action section ---------- */
.band {
  display: grid; gap: var(--space-5); align-items: center;
  padding: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
  background: var(--color-band); color: var(--color-band-ink); border-radius: var(--radius-xl);
}
.band h2 { color: var(--color-band-ink); }
.band p { color: var(--color-band-ink-2); max-width: 52ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.band :focus-visible { outline-color: var(--color-band-ink); }
@media (min-width: 900px) { .band { grid-template-columns: minmax(0, 1.4fr) auto; } }

/* ---------- Definition list for contact details ---------- */
.info-list { display: grid; gap: var(--space-5); }
.info-list dt { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink-3); }
.info-list dd { margin-top: var(--space-1); font-size: var(--fs-lead); color: var(--color-ink); }
.info-list a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink); text-decoration-color: var(--color-control); }
.info-list a:hover { color: var(--color-accent-text); text-decoration-color: currentColor; }

/* ---------- Forms ---------- */
.form-panel { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 4vw, var(--space-7)); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink); }
.field__optional { font-weight: var(--fw-regular); color: var(--color-ink-3); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); color: var(--color-ink);
  border: 1px solid var(--color-control); border-radius: var(--radius-md);
  font-size: var(--fs-body); /* 17px: stops iOS zooming on focus */
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: var(--space-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23566381' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 18px;
}
.input::placeholder, .textarea::placeholder { color: var(--color-ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-small); color: var(--color-danger); }
.field__error[hidden] { display: none; }
.field.is-highlighted .select { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.form-note { font-size: var(--fs-small); color: var(--color-ink-3); }
.form-note.is-success { color: var(--color-success); }
.form-note.is-error { color: var(--color-danger); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--space-8) var(--space-6); background: var(--color-surface); border-top: 1px solid var(--color-border); }
.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; } }
.footer h2 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: var(--space-3); }
.footer p, .footer address span { color: var(--color-ink-2); }
.footer ul { display: grid; gap: var(--space-1); }
.footer address { display: grid; gap: var(--space-1); }
.footer a:not(.logo) { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-2); text-decoration: none; }
.footer a:not(.logo):hover { color: var(--color-accent-text); text-decoration: underline; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--fs-small); color: var(--color-ink-3); }

/* ---------- Motion: entrances ----------
   Content is visible without script. With script, blocks marked .reveal rise
   16px and fade in once as they enter, children staggered by --i. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; }
  .card--interactive:active { transform: none; }
  .theme-toggle .icon-sun, .theme-toggle .icon-moon, .menu-btn span, .menu-btn span::before, .menu-btn span::after { transition-property: opacity, background-color; }
  /* The menu fades in place instead of scaling from its button. */
  .mobile-menu { transform: none; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .mobile-menu.is-open { transition-delay: 0s; }
}