/* ==========================================================================
   Brisk Advisory — design tokens
   Branding is still being finalised: change colours and fonts here only.
   ========================================================================== */

/* Self-hosted fonts (no third-party requests). Files in assets/fonts/ are the
   latin subsets of Anton v27 and Inter v20 Medium, originally from Google
   Fonts (both licensed under the SIL Open Font License). */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-v27-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colours — exact values sampled from the supplied logo SVG. */
  --brisk-blue: #5271FF;
  --brisk-orange: #FFA857;
  --brisk-violet: #8C52FF;
  --paper: #F8F8F8;
  --ink: #14161F;

  /* Derived colours */
  --card: #FFFFFF;
  --blue-text: #4A66E6;          /* brand blue darkened 10% for small link text — 4.85:1 on white, passes WCAG AA */
  --blue-tint: #EEF1FF;          /* tag / badge wash — 10% brand blue on white */
  --ink-soft: #4A4D59;           /* secondary body text on light surfaces */
  --paper-on-ink: #C9CBD4;       /* secondary text on dark sections */

  /* Type — swappable for a later rebrand */
  /* Fallbacks are heavy/condensed on purpose: if Anton can't load (e.g. the
     page is opened directly as a file://, which blocks CORS font fetches),
     headings drop to a thick condensed system face — Impact/Haettenschweiler
     exist on macOS and Windows — instead of a thin generic sans. */
  --font-display: 'Anton', 'Haettenschweiler', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --text-caption: 0.75rem;       /* 12px */
  --text-body-sm: 0.875rem;      /* 14px */
  --text-body: 1rem;             /* 16px */
  --text-body-lg: 1.125rem;      /* 18px */
  --text-subheading: 1.625rem;   /* 26px */
  --text-heading: 2rem;          /* 32px */
  --text-heading-lg: 3rem;       /* 48px */
  --text-heading-xl: clamp(2.5rem, 6vw, 5rem);     /* up to 80px */
  --text-display: clamp(3.25rem, 7.4vw, 6.75rem);  /* up to 108px */

  /* Radii — triple-radius system: pills / cards / inputs */
  --radius-pill: 800px;
  --radius-card: 40px;
  --radius-input: 100px;
  --radius-small: 16px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 40px;
  --gap: 16px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

/* Drifting halftone dot field across the page canvas */
body::before {
  content: "";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(20, 22, 31, 0.06) 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(80, 112, 248, 0.05) 1.2px, transparent 1.8px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  animation: canvas-drift 90s linear infinite alternate;
}

@keyframes canvas-drift {
  to { transform: translate(56px, 36px); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  html { scroll-behavior: auto; }
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 var(--gap);
  text-wrap: balance;
}

h1 { font-size: var(--text-display); line-height: 0.96; }
h2 { font-size: var(--text-heading-xl); line-height: 1; }
h3 { font-size: var(--text-subheading); line-height: 1.15; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-text); text-underline-offset: 3px; }
a:hover { color: var(--brisk-blue); }

.muted { color: var(--ink-soft); }

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

main > section { padding: calc(var(--section-gap) / 2) 0; }
main > section:first-child { padding-top: 40px; }
main > section:last-child { padding-bottom: var(--section-gap); }

.section-label {
  display: inline-block;
  background: var(--blue-tint);
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.dotted-rule {
  border: none;
  border-top: 1.5px dotted var(--ink);
  margin: 0;
}

.rule-orange {
  border: none;
  border-top: 3px solid var(--brisk-orange);
  width: 72px;
  margin: 0 0 24px;
}

/* ==========================================================================
   Buttons — pill shapes only, never rectangular
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--brisk-orange);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
}
.btn-primary:hover { background: var(--brisk-blue); color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-card);
  padding: 14px 28px;
}
.btn-secondary:hover { border-color: var(--brisk-blue); color: var(--blue-text); }

.btn-secondary.on-dark {
  color: #fff;
  border-color: #fff;
}
.btn-secondary.on-dark:hover { border-color: var(--brisk-orange); color: var(--brisk-orange); }

/* ==========================================================================
   Nav — sticky pill container
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 16px 0;
  transition: padding 0.35s ease;
}

.nav-pill {
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 10px 12px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;
  margin: 0 auto;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease, gap 0.35s ease;
}

.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 64px; width: auto; transition: height 0.3s ease; }

/* Scrolled state: the bar compresses into a compact centred pill */
.site-header.scrolled { padding: 10px 0; }
.site-header.scrolled .nav-pill { max-width: 880px; padding: 7px 8px 7px 14px; gap: 10px; }
.site-header.scrolled .nav-logo img { height: 46px; }
.site-header.scrolled .nav-links a { padding: 6px 10px; }
.site-header.scrolled .nav-cta { padding: 10px 20px; }

@media (prefers-reduced-motion: reduce) {
  .site-header, .nav-pill, .nav-logo img { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.nav-links a:hover { color: var(--blue-text); }
.nav-links a[aria-current="page"] { background: var(--blue-tint); }

.nav-cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 24px;
    right: 24px;
    background: var(--card);
    border-radius: var(--radius-card);
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; }
  .nav-pill { position: relative; }
  .nav-toggle { display: inline-block; }
  .nav-cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-top: 48px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: stretch;
}

.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--brisk-blue); }

.hero-sub {
  font-size: var(--text-body-lg);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Halftone artwork — the signature motif, generated in the Brisk palette */
.hero-art {
  width: 100%;
  height: auto;
  align-self: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
}

/* ==========================================================================
   Stat cards
   ========================================================================== */

.stat-intro { max-width: 52em; margin-bottom: 32px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.stat-card {
  background: var(--brisk-orange);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: 32px var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 12px;
}

.stat-card .stat-label { font-size: var(--text-body-sm); line-height: 1.35; }

.stat-card.stat-blue { background: var(--brisk-blue); color: #fff; }

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-card { min-height: 160px; }
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat-card { min-height: 0; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-soft); }

.card-grid {
  display: grid;
  gap: var(--gap);
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
}

.tag {
  display: inline-block;
  background: var(--blue-tint);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

a.card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
a.card-link .card { height: 100%; transition: outline-color 0.15s ease; outline: 1.5px solid transparent; }
a.card-link:hover .card { outline-color: var(--brisk-blue); }
a.card-link .more { color: var(--blue-text); font-size: var(--text-body-sm); }

.section-head { margin-bottom: 32px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { max-width: 46em; color: var(--ink-soft); }

/* ==========================================================================
   Chip lists (Capability page)
   ========================================================================== */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: var(--text-body-sm);
  font-weight: 500;
}

/* ==========================================================================
   Dark sections (CTA band, contact form)
   ========================================================================== */

.dark-band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 64px var(--card-padding);
}

.dark-band h2 { color: #fff; }
.dark-band p { color: var(--paper-on-ink); }
.dark-band a:not(.btn) { color: var(--brisk-orange); }

.cta-band { text-align: center; }
.cta-band p { max-width: 36em; margin: 0 auto 28px; font-size: var(--text-body-lg); }

/* ==========================================================================
   Forms — pill inputs on dark surfaces only
   ========================================================================== */

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-size: var(--text-body-sm);
  margin-bottom: 8px;
  color: var(--paper-on-ink);
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 1.5px solid #fff;
  border-radius: var(--radius-input);
  padding: 16px 24px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
}

.form-field textarea {
  border-radius: var(--radius-card);
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brisk-orange);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

/* ==========================================================================
   Contact layout
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-direct .big-email {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  word-break: break-all;
  color: var(--ink);
  text-decoration: none;
}
.contact-direct .big-email:hover { color: var(--blue-text); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--paper-on-ink);
  padding: 56px 0 40px;
  margin-top: var(--section-gap);
}

.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.site-footer .tagline {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  letter-spacing: 0.02em;
  color: #fff;
}

.site-footer .footer-rule {
  border: none;
  border-top: 1.5px dotted rgba(255, 255, 255, 0.35);
  margin: 0 0 24px;
}

.site-footer .legal {
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--brisk-orange); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  z-index: 200;
}
.skip-link:focus { left: 24px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--brisk-blue);
  outline-offset: 2px;
}

/* Scroll reveal — applied by JS only, so content is never hidden without it */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}