@charset "utf-8";
/* ------------------------------------------------------------------
   Alienstech
   Palette, type and components. The accent is a label tape amber, taken
   from the cable labels and warning placards in a server room, and it is
   used for roughly one tenth of any page. Exactly one solid accent button
   is visible in any single viewport.
   ------------------------------------------------------------------ */

/* Fonts, vendored locally. No CDN, no build step. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Both hues are lifted straight from the logo. #3A79BE is the blue at the
     pure end of the mark's gradient, #4BAA42 is the alien head, the single most
     common colour in the file.

     Three shades are derived from the blue rather than picked: #3A79BE behind
     white text measures 4.51 to 1 against a 4.5 requirement, which passes by a
     hundredth and would break on any future nudge. Buttons use the same hue
     nine points darker. The logo blue still does the visible work on borders,
     underlines and focus rings.

     Green is a marking colour only. At 2.95 to 1 on white it cannot carry text,
     so it appears as rules, ticks and underlines, never as a word. On the navy
     hero it drops to 4.07, so the tint takes over there. */
  --ink:        #12293C;
  --navy:       #1B3858;
  --navy-2:     #23496F;
  --accent:        #3A79BE;
  --accent-strong: #2F639B;
  --accent-deep:   #264F7C;
  --accent-light:  #94B8DE;
  --green:         #4BAA42;
  --green-strong:  #47A33E;
  --green-light:   #9FD69A;
  --blue:       #3A79BE;
  --blue-ink:   #264F7C;
  --surface:    #F1F5F9;
  --paper:      #FFFFFF;
  --line:       #D3DEE8;
  --muted:      #47596B;
  --on-navy:    #E8F0F7;
  --on-navy-muted: #A9C3D8;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(14,27,41,.06), 0 8px 24px -16px rgba(14,27,41,.35);
  color-scheme: light;
}

/* ------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; } /* backstop only, not the fix */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
table { border-collapse: collapse; width: 100%; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-strong); color: #FFFFFF; padding: .75rem 1.25rem;
  font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ layout */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--surface { background: var(--surface); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: var(--on-navy); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head p { color: var(--muted); font-size: 1.125rem; margin-bottom: 0; }
.section--navy .section-head p { color: var(--on-navy-muted); }

.grid { display: grid; gap: var(--gap); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------- the label, signature */
/* A printed cable label: mono, uppercase, tracked out, amber left rule. */

.label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 1rem;
  padding-left: .7rem;
  border-left: 3px solid var(--green);
  line-height: 1.4;
}
.label--onnavy { color: var(--green-light); border-left-color: var(--green); }
.label--plain { border-left-color: var(--line); color: var(--muted); }

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  padding: .85rem 1.4rem;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }

/* The single solid accent action. One per viewport, never two. */
.btn-accent { background: var(--accent-strong); color: #FFFFFF; border-color: var(--accent-strong); }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #FFFFFF; }

/* Every secondary action is the outline version of the same accent. */
.btn-outline { background: transparent; color: var(--blue-ink); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(233,240,247,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* Header action. Outline rather than filled, so the one solid button in any
   viewport stays the one in the hero or the closing band. */
.btn-outline-accent { background: transparent; color: var(--accent-deep); border-color: var(--accent); }
.btn-outline-accent:hover { background: var(--accent-strong); color: #FFFFFF; border-color: var(--accent-strong); }
.btn-sm { padding: .6rem 1rem; font-size: .9rem; min-height: 44px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* The solid action on a dark blue surface. A blue button on a blue hero
   separates from its background by only 1.5 to 1, which makes the single most
   important control on the page nearly invisible. On dark surfaces it inverts:
   white fill, deep blue label, 8.2 to 1 against the hero behind it. It is
   still the only filled button in the viewport. */
.hero .btn-accent,
.cta-band .btn-accent {
  background: #FFFFFF;
  color: var(--accent-deep);
  border-color: #FFFFFF;
}
.hero .btn-accent:hover,
.cta-band .btn-accent:hover {
  background: var(--accent-light);
  color: var(--ink);
  border-color: var(--accent-light);
}


/* ------------------------------------------------------------ header */
/* White, because the logo carries its own blue and two blues stacked on top
   of each other fought with one another. White also means the mark sits on
   the background it was drawn for, with no box around it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
  padding: .5rem clamp(1rem, 4vw, 2rem);
  max-width: var(--wrap);
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--accent-deep); }
.brand img { display: block; height: 52px; width: auto; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .96rem;
  font-weight: 600;
  padding: .55rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--surface); color: var(--ink); }
/* Existing clients rather than prospects, so it sits apart from the rest of
   the nav and is marked as leaving the site. */
.site-nav .nav-external {
  margin-left: .5rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.site-nav .nav-external::after {
  content: "\2197";
  font-size: .85em;
  color: var(--accent);
  line-height: 1;
}
.site-nav .nav-external:hover { background: transparent; color: var(--accent-deep); }
.site-nav .nav-external:hover::after { color: var(--accent-deep); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--green-strong); }
.header-cta { margin-left: .5rem; }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid #8494A5;
  color: var(--ink);
  border-radius: 7px;
  padding: .5rem .7rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.nav-toggle:hover { background: var(--surface); }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .45rem; }
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .5rem 0 1rem;
    border-top: 1px solid var(--line);
  }
  .site-header .bar { flex-wrap: wrap; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem .6rem; font-size: 1.05rem; }
  /* Stacked in the drawer, so the vertical divider becomes a horizontal one. */
  .site-nav .nav-external {
    margin: .25rem 0 0;
    padding-left: .6rem;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: .8rem;
  }
  .header-cta { margin: .5rem 0 0; width: 100%; }
  .brand img { height: 42px; }
}

/* -------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--accent-deep) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  /* Faint schematic grid, drawn in CSS so there is no image to load. */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(233,240,247,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,240,247,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(16,38,58,.94) 0%, rgba(20,48,72,.88) 46%, rgba(43,92,130,.72) 100%); }
.hero-inner { padding: clamp(3.25rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem); max-width: 44rem; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 .nowrap { white-space: nowrap; }
.hero-sub { font-size: clamp(1.05rem, 2.1vw, 1.3rem); color: var(--on-navy); margin-bottom: 1.9rem; max-width: 38rem; }
.hero .btn-row { margin-bottom: 1.5rem; }
.hero-note { font-family: var(--mono); font-size: .78rem; letter-spacing: .07em; color: var(--on-navy-muted); text-transform: uppercase; }
.hero-note b { color: var(--accent-light); font-weight: 600; }

.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.page-head h1 { margin-bottom: .5rem; }
.page-head .lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 46rem; margin: 0; }

/* ------------------------------------------------------------- cards */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--muted); margin-bottom: 1rem; }
.card .more { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--blue-ink); }
.card .more::after { content: " \2192"; }
.card .more:hover { color: var(--ink); }
.card--link { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card--link:hover { border-color: #A9C0D6; box-shadow: var(--shadow); transform: translateY(-2px); }
.section--surface .card { background: var(--paper); }

.benefit {
  border-top: 2px solid var(--green);
  padding-top: 1.1rem;
  min-width: 0;
}
.benefit h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.benefit p { color: var(--muted); margin: 0; font-size: 1rem; }
.section--navy .benefit p { color: var(--on-navy-muted); }

/* --------------------------------------------------------- checklist */

.check { list-style: none; padding: 0; margin: 0; }
.check li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
}
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--green);
}
.problems { list-style: none; padding: 0; margin: 0; }
.problems li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
  color: var(--muted);
}
.problems li::before {
  content: "";
  position: absolute; left: .2rem; top: .5em;
  width: 9px; height: 9px;
  border: 2px solid #9AAABB;
  border-radius: 50%;
}

/* ------------------------------------------------------------- steps */
/* Numbered because this genuinely is a sequence: each step depends on
   the one before it. */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent-deep);
  letter-spacing: .05em;
  padding-top: .15rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); margin: 0; }
.section--navy .step { border-color: rgba(255,255,255,.14); }
.section--navy .step::before { color: var(--accent-light); }
.section--navy .step p { color: var(--on-navy-muted); }
@media (max-width: 560px) {
  .step { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; }
}

/* --------------------------------------------------------------- faq */

.faq-group { margin-bottom: 2.75rem; }
.qa {
  border-top: 1px solid var(--line);
}
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  position: absolute;
  right: .35rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--accent-deep);
  line-height: 1;
}
.qa[open] summary::after { content: "\2013"; }
.qa .answer { padding: 0 2.5rem 1.35rem 0; color: var(--muted); }
.qa .answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- prose */

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; }
.prose ul li, .prose ol li { color: var(--muted); }
.prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--green);
  color: var(--ink);
  font-size: 1.1rem;
}
.prose table { margin-bottom: 1.5rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------- image placeholder */

.ph {
  display: block;
  position: relative;
  width: 100%;
  padding-top: var(--ph-ratio, 60%);
  background:
    repeating-linear-gradient(135deg, #E6ECF3 0 10px, #EEF3F8 10px 20px);
  border: 1px dashed #B9C8D8;
  border-radius: var(--radius);
  overflow: hidden;
}
.ph-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4A5B6E;
  text-align: center;
  line-height: 1.9;
}
.ph-note b { color: var(--blue-ink); font-size: .84rem; }

.media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.media-frame img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------- cta */

.cta-band { background: var(--navy); color: #fff; }
.cta-band .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; max-width: 30ch; }
.cta-band p { color: var(--on-navy-muted); margin: 0; max-width: 44ch; }

/* ------------------------------------------------------------ footer */

.site-footer { background: var(--ink); color: var(--on-navy-muted); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; font-size: .96rem; }
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h3 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-light);
  font-weight: 600;
  margin-bottom: .9rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-brand { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.03em; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .88rem;
}

/* ------------------------------------------------------------- forms */

.field { margin-bottom: 1.2rem; min-width: 0; }
.field > label, .field-label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .35rem;
}
.field .hint { display: block; color: var(--muted); font-size: .88rem; margin-bottom: .45rem; }
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=number], input[type=date], input[type=search],
select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #8494A5;
  border-radius: 8px;
  padding: .7rem .8rem;
  min-height: 46px;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
.field--error input, .field--error textarea, .field--error select { border-color: #B03A2E; }
.field .error { color: #8E2D22; font-size: .9rem; margin-top: .3rem; display: block; font-weight: 600; }
.checkline { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .9rem; }
.checkline input { margin-top: .35rem; width: 18px; height: 18px; flex: none; }
.checkline label { font-weight: 600; }
.hp { position: absolute !important; left: -9999px !important; }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow);
  min-width: 0;
}

.notice {
  border-left: 4px solid var(--blue);
  background: #EEF4FA;
  padding: .9rem 1.1rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.notice--warn { border-left-color: #A66F08; background: #FDF5E3; }
.notice--error { border-left-color: #B03A2E; background: #FBECEA; }
.notice--ok { border-left-color: #1E7A4C; background: #E9F5EE; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-family: var(--display); }

/* -------------------------------------------------------- small bits */

.meta-line { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}
.pill--on { background: #E9F5EE; border-color: #B6DCC6; color: #14603A; }
.pill--off { background: #F4F0E4; border-color: #E0D4B0; color: #6B5710; }
.crumbs { font-size: .9rem; color: var(--muted); padding: 1rem 0 0; }
.crumbs a { color: var(--muted); }
.crumbs span { padding: 0 .4rem; }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.mb0 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .btn { display: none !important; }
  body { color: #000; }
}

/* Native file inputs are unstyled by default and end up well under the
   44px minimum tap height on a phone. */
input[type=file] {
  width: 100%;
  min-height: 46px;
  padding: .6rem .7rem;
  background: var(--paper);
  border: 1px dashed #8494A5;
  border-radius: 8px;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--muted);
  cursor: pointer;
}
input[type=file]:hover { border-color: var(--blue); }
input[type=file]::file-selector-button {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--blue-ink);
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: 7px;
  padding: .45rem .9rem;
  margin-right: .75rem;
  min-height: 36px;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--blue); color: #fff; }