/* =========================================================
   Northern Spy Designs — styles.css
   Dark, plain CSS, no build step. Palette lives in :root.
   ========================================================= */

:root {
  --bg:        #0a0d12;
  --bg-soft:   #0e131a;
  --bg-card:   #111821;
  --line:      #1c2633;
  --line-soft: #151d28;

  --text:      #e7edf5;
  --muted:     #93a1b5;
  --muted-2:   #7d8a9c;   /* 5.3:1 on --bg-soft — WCAG AA for small text */
  --field-line:#5a6b83;   /* ≥3:1 against the input and the form — WCAG 1.4.11 */

  --accent:    #22d3ee;
  --accent-dk: #0b3a44;
  --danger:    #f43f5e;

  --radius:    6px;
  --maxw:      1140px;

  --font:      'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Skip link: hidden until focused with the keyboard. */
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: .6rem 1rem; border-radius: var(--radius);
  background: var(--accent); color: #031417; font-weight: 600;
}
.skip:focus { top: 1rem; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Background ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

/* ---------- Layout ---------- */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line-soft); }



/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem;
  font-family: inherit; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--accent); color: #031417; }
.btn--primary:hover { background: #67e8f9; }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.is-scrolled { background: rgba(10,13,18,.85); border-bottom-color: var(--line-soft); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); }
.brand__mark { flex-shrink: 0; }
.brand__name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.brand__sub { font-weight: 400; color: var(--muted); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a { font-size: .93rem; color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__links a.btn { color: var(--text); padding: .55rem 1.1rem; }
.nav__links a.btn:hover { color: var(--accent); }


/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - 72px); display: flex; align-items: center; padding: 4rem 0; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__mark { width: clamp(9rem, 26vw, 16rem); height: auto; color: var(--text); margin-bottom: 2rem; }
.hero__title {
  font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 600;
  line-height: 1.05; letter-spacing: -.035em; margin-bottom: 1rem;
}
.hero__lede { font-size: clamp(1rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 44rem; margin-bottom: 2.5rem; text-wrap: balance; }
.hero__cta { display: flex; justify-content: center; }

/* ---------- Clients ---------- */
/* A logo strip. The three marks have very different proportions — an 8:1
   wordmark, a 2.4:1 display face and a near-square stacked script — so no
   single dimension sizes them all well. Each logo therefore carries two sizes,
   set inline in the markup, and the layout picks the one that fits:
     --w  share of the column, used by the phone stack (one per row)
     --h  multiple of --logo-size, used by the three-across row
   The source PNGs are cropped to their alpha bounding box, so each layout box
   IS the visible mark — without that, baked-in transparent padding throws the
   row off centre. All three sit slightly dimmed at rest so no one brand colour
   dominates. */
.clients { text-align: center; }
.clients__label {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
/* Phones: one logo per row, sized by WIDTH (--w). In a single column the eye
   compares how wide each mark is, so the height-matched optical sizing that
   suits a row makes the 8:1 wordmark look enormous beside the compact stacked
   mark. Sizing by width evens them out; the stacked mark stays narrower but
   gains height, which reads as deliberate rather than undersized. */
.clients__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.75rem, 7vw, 2.75rem);
}
.clients__item { width: 100%; }
.clients__link { display: block; width: 100%; padding: .5rem; border-radius: var(--radius); }
.clients__logo { width: var(--w); height: auto; margin-inline: auto; }

/* Tablet and up, once three across fits: anchor the MIDDLE logo to the page
   centre line rather than centring the row as a block — centring the row as a
   whole puts the middle logo off-centre whenever the outer two differ in
   width, which they do. A 1fr auto 1fr grid keeps the centre column centred
   and gives the outer two equal space, so each sits evenly between the middle
   logo and its margin. Breakpoint is below iPad-mini portrait (744px).
   Here logos size by HEIGHT (--h, a multiple of --logo-size, which is the
   middle logo's height). --logo-size grows with the viewport but is capped, so
   the widest mark always clears the centre column. */
@media (min-width: 640px) {
  .clients__list {
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    column-gap: 0;   /* the 1fr cells already supply the spacing; any gap here
                        would shift the outer logos off their half-centres */
  }
  .clients { --logo-size: clamp(3.2rem, 1.15rem + 5.32vw, 6rem); }
  .clients__item, .clients__link { width: auto; }
  .clients__logo { width: auto; height: calc(var(--logo-size) * var(--h)); }
}

.clients__logo {
  max-width: 100%; object-fit: contain;
  opacity: .82;
  transition: opacity .25s var(--ease);
}
.clients__link:hover .clients__logo,
.clients__link:focus-visible .clients__logo { opacity: 1; }

/* ---------- Contact ---------- */
.section--contact { background: var(--bg-soft); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__intro h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; margin-bottom: 1rem; }
.contact__lede { color: var(--muted); margin-bottom: 1.75rem; max-width: 30rem; }
.contact__mail { font-family: var(--mono); font-size: .95rem; color: var(--accent); border-bottom: 1px solid var(--accent-dk); padding-bottom: 2px; }
.contact__mail:hover { border-color: var(--accent); }

/* ---------- Form ---------- */
.form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: clamp(1.5rem, 4vw, 2rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .86rem; font-weight: 500; margin-bottom: .45rem; }
.field .opt { color: var(--muted-2); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: .75rem .85rem; background: var(--bg-soft); border: 1px solid var(--field-line);
  border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: .95rem;
  transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field__error { display: block; min-height: 1rem; margin-top: .35rem; font-size: .8rem; color: var(--danger); }

/* Honeypot — visually hidden but not display:none (bots skip those) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { width: 100%; margin-top: .25rem; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { min-height: 1.4rem; margin-top: 1rem; font-size: .9rem; text-align: center; }
.form__status.is-ok { color: var(--accent); }
.form__status.is-err { color: var(--danger); }
.form__note { margin-top: .75rem; font-size: .8rem; color: var(--muted); text-align: center; }
.form__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 2rem 0; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.footer .brand__name { font-size: .95rem; }
.footer__mail { font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.footer__mail:hover { color: var(--accent); }
.footer__copy { color: var(--muted-2); font-size: .85rem; }

/* ---------- Reveal on scroll ---------- */
/* Only hide content when JavaScript can reveal it again. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Footer links + legal pages ---------- */
.footer__links { display: flex; gap: 1.25rem; font-size: .85rem; }
.footer__links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__links a:hover { color: var(--accent); }

.legal { padding: clamp(3rem, 7vw, 5rem) 0; }
.legal .container { max-width: 46rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; margin-bottom: .5rem; }
.legal .updated { color: var(--muted); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 .6rem; }
.legal p, .legal li { color: var(--muted); margin-bottom: .8rem; }
.legal ul { padding-left: 1.25rem; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--text); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .brand__sub { display: none; }
  .contact { grid-template-columns: 1fr; }
}