/* Herein — landing page.

   Built on the mossend.software design language: Charter for reading, JetBrains
   Mono for the engineer's voice, paper-coloured body sections with a dark band
   for the header, the hero and the closing pitch. The palette itself is this
   product's own — ink blue and slate rather than the pine and gold of the
   parent site — so the two read as related without looking like the same page.
*/

/* ===== FONTS ===== */
@font-face {
  font-family: 'Charter';
  src: url('fonts/Charter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Charter';
  src: url('fonts/Charter-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Charter';
  src: url('fonts/Charter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The attribute has to beat whatever display a class sets, or a hidden element
   in a flex or grid container stays on screen — the browser's own rule for
   [hidden] is the weakest one there is. */
[hidden] {
  display: none !important;
}

/* ===== TOKENS ===== */
:root {
  /* Paper palette — the default background/ink for body sections. */
  --bg: #F8F7F3;
  --bg-alt: #EDEBE4;
  --border: #DEDACF;
  --text: #242B33;
  --text-muted: #56616E;
  --accent: #1D5D89;       /* ink blue — legible as text on paper */
  --accent-dim: #164A6E;   /* deeper, for borders and hover */
  --heading: #171D25;

  /* Dark palette — header band, hero, closing pitch. */
  --dark-bg: #141C27;
  --dark-border: #2B3B4D;
  --dark-text: #EDF1F5;
  --dark-text-muted: #A7B5C4;
  --dark-accent: #74B5D6;
  --dark-accent-dim: #4C8AA8;

  --font-serif: 'Charter', 'XCharter', Georgia, Cambria, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font: var(--font-serif);

  --max-width: 1100px;
  --header-height: 96px;
}

/* ===== BASE ===== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Fine grain over the flat colour, so the paper sections read as stock rather
   than as an empty canvas. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* The header is fixed, so a jump to a section would otherwise park its heading
   underneath it. Every anchor target stops short by the height of the band. */
section[id] {
  scroll-margin-top: var(--header-height);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(20, 28, 39, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dark-border);
  z-index: 100;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The title and its attribution are one block: the product name reads first,
   the parent company sits underneath it rather than beside it. */
.site-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  min-width: 0;
}

/* One short word, so it carries the lockup on weight rather than width — the
   attribution beneath it is the wider of the two and would otherwise dominate. */
.site-title-name {
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--dark-text);
  white-space: nowrap;
}

.site-title-by {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  white-space: nowrap;
}

/* Terminal caret trailing the title — the engineer's voice, one glyph. */
.logo-cursor {
  flex: none;
  width: 2px;
  height: 20px;
  margin-left: 0.5rem;
  background: var(--dark-accent);
  animation: caret-blink 1.15s step-end infinite;
}

@keyframes caret-blink {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-cursor {
    animation: none;
    opacity: 0.75;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-button {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--dark-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.nav-button:hover {
  color: var(--dark-accent);
}

/* Enquire is the page's one job, so it carries the border and the fill on
   hover; Sign in stays quiet next to it. */
.nav-button-primary {
  border-color: var(--dark-accent-dim);
  color: var(--dark-accent);
}

.nav-button-primary:hover {
  color: var(--dark-bg);
  background: var(--dark-accent);
  border-color: var(--dark-accent);
}

/* ===== SHARED PIECES ===== */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-label-centred {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-h {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading);
}

.body-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.body-text + .body-text {
  margin-top: 1rem;
}

.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border);
  transition: text-decoration-color 0.2s;
}

.inline-link:hover {
  text-decoration-color: var(--accent);
}

/* Heading left, prose right — the same two-column reading rhythm the parent
   site uses for its closing section. */
.split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: start;
}

.split-lead {
  padding-right: 3rem;
  border-right: 1px solid var(--border);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .split-lead {
    padding-right: 0;
    padding-bottom: 1.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.cta-button-dark {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 0.85rem 1.85rem;
  border: 1px solid var(--dark-accent-dim);
  border-radius: 4px;
  color: var(--dark-accent);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cta-button-dark:hover {
  color: var(--dark-bg);
  background: var(--dark-accent);
  border-color: var(--dark-accent);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(116, 181, 214, 0.18) 0%, transparent 40%),
    linear-gradient(180deg, rgba(9, 15, 22, 0.05) 0%, rgba(9, 15, 22, 0.5) 60%, var(--dark-bg) 100%),
    var(--dark-bg);
  padding: calc(var(--header-height) + 3.5rem) 0 4rem;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero-statement {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.2;
  color: var(--dark-text);
  max-width: 900px;
  margin-bottom: 1.5rem;
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--dark-text-muted);
  max-width: 760px;
  margin-bottom: 2rem;
}

.hero-audience {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--dark-text-muted);
  max-width: 760px;
  margin: 2.5rem 0 2.25rem;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.hero-secondary-link {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--dark-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.hero-secondary-link:hover {
  color: var(--dark-accent);
}

/* ===== THE THREE APIS ===== */
.step-grid {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  list-style: none;
}

.step-item {
  flex: 1;
  min-width: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dark-accent-dim);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--dark-accent);
}

.step-body {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--dark-text);
  margin-top: 0.5rem;
}

.step-connector {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--dark-accent-dim);
}

@media (max-width: 760px) {
  .step-grid {
    flex-direction: column;
    /* Cross axis is now width, so flex-start would size each rule to its own
       line of text and the three would end at different points. */
    align-items: stretch;
  }

  .step-connector {
    align-self: flex-start;
    margin: -0.25rem 0 -0.25rem 0.25rem;
    transform: rotate(90deg);
  }
}

/* ===== CUSTOMERS ===== */
.customers {
  padding: 4.5rem 0;
  border-bottom: 1px solid var(--border);
}

/* A track twice the width of the visible set, translated by half its width, so
   the second copy lands exactly where the first started and the loop has no
   seam. Faded at both edges so logos arrive and leave rather than pop. */
.partner-wheel {
  overflow: hidden;
  min-width: 0;
  max-width: 980px;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.wheel-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wheel-spin 32s linear infinite;
}

/* Stops under the pointer so a logo can actually be clicked. */
.partner-wheel:hover .wheel-track {
  animation-play-state: paused;
}

/* Masks rather than images: the logo supplies the shape and the page supplies
   the colour, so four wordmarks from four brands read as one set.

   The mask URLs live here rather than in a --logo custom property on the markup
   because a relative url() inside a custom property resolves against the sheet
   that substitutes it, not the document that declares it — which turns
   "public/partners/x.svg" into "/public/public/partners/x.svg" and silently
   masks the element away to nothing. Declared here they resolve against this
   file, exactly like the fonts above. */
.wheel-logo {
  display: block;
  flex: none;
  width: 150px;
  height: 46px;
  margin-right: 4.5rem;
  background-color: var(--text);
  opacity: 0.8;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: opacity 0.2s, background-color 0.2s;
}

.wheel-logo-hyndland    { --logo: url('partners/hyndland-partners.svg'); }
.wheel-logo-glas        { --logo: url('partners/glas.png'); }
.wheel-logo-origination { --logo: url('partners/origination-network.svg'); }
.wheel-logo-wiselaw     { --logo: url('partners/wiselaw.svg'); }

.wheel-logo:hover {
  opacity: 1;
  background-color: var(--accent);
}

@keyframes wheel-spin {
  to {
    transform: translateX(-50%);
  }
}

/* No motion: lay the set out as a static row and drop the duplicates, which
   exist only to make the loop seamless. */
@media (prefers-reduced-motion: reduce) {
  .wheel-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
  }

  .wheel-logo[aria-hidden="true"] {
    display: none;
  }
}

/* ===== SECURITY ===== */
.security {
  padding: 5rem 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

/* The three planes. The middle one is the claim, so it is the one drawn in the
   dark palette — the eye lands on it before reading a word. */
.planes {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 3rem;
}

.plane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.plane-data {
  background: var(--dark-bg);
  border-color: var(--dark-border);
}

.plane-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.plane-data .plane-name {
  color: var(--dark-accent);
}

.plane-role {
  margin: 0.6rem 0 1.1rem;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--heading);
}

.plane-data .plane-role {
  color: var(--dark-text);
}

.plane-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.plane-data .plane-facts {
  color: var(--dark-text-muted);
}

/* A tick for what a plane holds, a cross for what it cannot. The data plane is
   almost all crosses, which is the point being made. */
.plane-facts li {
  display: flex;
  gap: 0.55rem;
}

.plane-facts li::before {
  flex: none;
  font-weight: 700;
}

.plane-facts .has::before {
  content: '\2713';
  color: var(--accent);
}

.plane-facts .hasnt::before {
  content: '\2717';
  color: var(--accent-dim);
}

.plane-data .plane-facts .hasnt::before {
  color: var(--dark-accent);
}

/* Pinned to the foot of the card so it reads as the card's conclusion however
   the three columns end up sizing. */
.plane-lock {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dark-border);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark-accent);
}

.plane-link {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 6.5rem;
  text-align: center;
}

.plane-arrow {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent-dim);
}

/* Names what crosses the boundary — the whole reason the planes are separate. */
.plane-link-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .planes {
    flex-direction: column;
  }

  .plane-link {
    flex-direction: row;
    align-self: flex-start;
    width: auto;
    gap: 0.6rem;
    padding-left: 0.5rem;
  }

  .plane-arrow {
    transform: rotate(90deg);
  }
}

/* ===== HOW IT WORKS =====
   Shown rather than described: what you send on the left, what comes back on
   the right, with the same arrow the hero uses between its three steps. */
.how {
  padding: 5rem 0;
  border-bottom: 1px solid var(--border);
}

.how-lead {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Names the agreement type the panels below are worked through with, so the
   credit-specific schema doesn't read as the only one on offer. */
.how-example {
  margin: 1.25rem 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.io-grid {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.io-panel {
  flex: 1;
  min-width: 0;
}

/* Arrow over its label, the same shape the planes above use for what crosses a
   boundary. */
.io-connector {
  flex: 0 0 auto;
  /* Centred on the PDF list rather than on the panel: the JSON block beside it
     is three times as tall, so splitting the difference would leave the arrow
     floating well below both labels. */
  margin-top: 7.5rem;
  width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.io-arrow {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent-dim);
}

.io-connector-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--accent);
}

.io-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 860px) {
  .io-grid {
    flex-direction: column;
    align-items: stretch;
  }

  /* Laid on its side rather than rotated whole, which would take the label with
     it and stand the words on end. */
  .io-connector {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    width: auto;
    gap: 0.6rem;
    margin: 0.75rem 0 0.75rem 0.5rem;
  }

  .io-arrow {
    transform: rotate(90deg);
  }
}

/* ===== PDF LIST GRAPHIC ===== */
.pdf-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdf-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* The folded corner is the whole document glyph: a small square with the top
   right cut away by a triangle in the section's own background colour. */
.pdf-badge {
  flex: none;
  position: relative;
  width: 26px;
  height: 32px;
  background: var(--accent);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.pdf-badge::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 0 9px 9px;
  border-style: solid;
  border-color: transparent transparent var(--accent-dim) transparent;
}

.pdf-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* The list carries on past what is drawn, so the last row is an ellipsis with
   the document glyph left blank rather than a fourth invented filename. */
.pdf-row-more {
  background: transparent;
  border-style: dashed;
}

.pdf-row-more .pdf-badge {
  background: transparent;
  border: 1px dashed var(--border);
}

.pdf-row-more .pdf-badge::after {
  display: none;
}

.pdf-row-more .pdf-name {
  color: var(--text-muted);
}

/* ===== JSON GRAPHIC ===== */
.json-block {
  padding: 1.25rem 1.35rem;
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--dark-text);
  tab-size: 2;
}

.json-block .k { color: var(--dark-accent); }
.json-block .s { color: #C9E3A8; }
.json-block .n { color: #E8C07A; }
.json-block .p { color: var(--dark-text-muted); }
.json-block .e { color: var(--dark-text-muted); }

.how-sub {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
}

/* ===== WHY US ===== */
.why {
  padding: 5rem 0;
  background: var(--bg-alt);
}

/* ===== BESPOKE ===== */
.bespoke {
  background: var(--dark-bg);
  padding: 5rem 0;
}

.bespoke-h {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-text);
}

.bespoke-lead {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-accent);
}

.bespoke-list {
  margin: 2rem 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.bespoke-list li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--dark-accent-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--dark-text);
}

@media (max-width: 760px) {
  .bespoke-list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.bespoke-body {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--dark-text-muted);
}

.bespoke-body + .bespoke-body {
  margin-top: 0.85rem;
}

.bespoke-cta-wrap {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--dark-border);
  text-align: center;
}

/* ===== FORMS =====
   Both the enquiry page and the sign in page are nothing but their form: paper
   stock for legibility, a single column, and no second thing to click besides
   the header's way back. */
.form-page {
  padding: calc(var(--header-height) + 4rem) 0 5rem;
}

.container-narrow {
  max-width: 720px;
}

.form-lead {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.form-h {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading);
}

.enquiry-form {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 640px;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

/* Set apart from the label so a glance down the form separates what must be
   answered from what need not be. */
.field-optional {
  margin-left: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 400;
  color: var(--text-muted);
}

.field-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-input::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 93, 137, 0.14);
}

.field-input-invalid {
  border-color: #A8402F;
}

.field-input-invalid:focus {
  border-color: #A8402F;
  box-shadow: 0 0 0 3px rgba(168, 64, 47, 0.14);
}

.field-textarea {
  resize: vertical;
  min-height: 7rem;
}

/* The native arrow is drawn by the platform and matches none of the above, so
   it is removed and replaced with one in the page's own palette. */
.select-wrap {
  position: relative;
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field-select:invalid {
  color: var(--text-muted);
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.85rem;
  color: var(--accent);
}

.field-error {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #A8402F;
}

/* Off-screen rather than display:none — a field that is not rendered at all is
   one the bots this catches will skip too. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

/* The one dark control on a paper page, so it reads as the end of the form. */
.form-actions .cta-button-dark {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
  cursor: pointer;
}

.form-actions .cta-button-dark:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

.form-actions .cta-button-dark:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.form-error-summary {
  padding: 0.85rem 1rem;
  border: 1px solid #A8402F;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #A8402F;
}

.form-error-summary a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* What the form is replaced by once it has been sent. The way back is filled
   like the submit button it stands in for; the outlined treatment the dark
   sections use would all but vanish on paper. */
.form-sent .cta-button-dark {
  margin-top: 2rem;
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

.form-sent .cta-button-dark:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

/* ===== SIGN IN ===== */
.signin-page {
  padding: calc(var(--header-height) + 5rem) 0 6rem;
}

.container-signin {
  max-width: 520px;
}

/* The Show control sits inside the field, so the text needs room to run past
   the last character without disappearing underneath it. */
.password-wrap {
  position: relative;
}

.password-wrap .field-input {
  padding-right: 4.5rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  padding: 0.3rem 0.5rem;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.password-toggle:hover {
  color: var(--accent-dim);
  background: var(--bg-alt);
}

/* One button and nothing beside it, so the row that holds a note on the enquiry
   form would otherwise leave a gap where the note is not. */
.form-actions-stacked {
  display: block;
}

.signin-alt {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .signin-page {
    padding: calc(var(--header-height) + 3rem) 0 4rem;
  }
}

/* ===== FOOTER ===== */
.footer {
  margin-top: auto;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--accent-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  :root {
    --header-height: 84px;
  }

  .container {
    padding: 0 1rem;
  }

  .header-inner {
    padding: 0 1rem;
    gap: 0.5rem;
  }

  .site-title-name {
    font-size: 1.15rem;
  }

  .site-title-by {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .nav-button {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
  }

  .customers,
  .security,
  .how,
  .why,
  .bespoke {
    padding: 3.5rem 0;
  }
}