/* =====================================================
   TALVIKA TECHNOLOGIES — consulting.talvika.com
   Mobile-first. No framework, no build step.

   Contents:
     1.  Fonts
     2.  Design tokens
     3.  Reset and base
     4.  Layout primitives
     5.  Shared components (overline, button, link)
     6.  Header
     7.  Hero
     8.  Sections
     9.  Practice cards
     10. Approach principles
     11. About / person
     12. Waitlist
     13. Footer
     14. Legal pages (privacy, terms)
     15. Responsive breakpoints
     16. Reduced motion
   ===================================================== */


/* =====================================================
   1. FONTS
   Self-hosted so the site makes no third-party requests.
   DM Sans ships as a variable font, so one file serves
   the full 500–600 weight range we use.
   ===================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/dm-sans-var.woff2') format('woff2');
}

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

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


/* =====================================================
   2. DESIGN TOKENS
   Single source of truth for the brand. Any future
   component work should consume these rather than
   hard-coding values.
   ===================================================== */

:root {
  /* --- Backgrounds --- */
  --color-bg: #FAFAF7;              /* Near-white with warm tint */
  --color-bg-subtle: #F5F1E8;       /* Warm off-white for section backgrounds */
  --color-surface: #FFFFFF;         /* Pure white for cards */

  /* --- Brand --- */
  --color-brand: #1B3A4B;           /* Deep navy-teal — primary anchor */
  --color-brand-dark: #12293A;      /* Darker variant for hover states */
  --color-secondary: #3A4A3C;       /* Muted forest green — sparingly */
  --color-accent: #C87A3A;          /* Burnt copper — highlights only */

  /* Copper is not legible as text on the near-white page background
     (2.9:1). This darker variant is used wherever the accent appears
     as text, and clears WCAG AA at 4.6:1. */
  --color-accent-text: #A55A1E;

  /* Copper also fails AA as small text on the navy panel (3.6:1).
     This lightened variant is used for the overline there, at 4.9:1. */
  --color-accent-on-brand: #DE9757;

  /* --- Text --- */
  --color-text: #1F1F1F;            /* Warm charcoal (not pure black) */
  --color-text-muted: #5A5F5C;      /* Cool muted grey for secondary text */
  --color-text-inverse: #FAFAF7;    /* For dark backgrounds */

  /* --- Structure --- */
  --color-border: #E8E6DF;          /* Subtle warm grey */
  --color-border-strong: #D4CFC1;   /* Slightly stronger for emphasis */

  /* --- Font families --- */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale --- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px — mobile body */
  --text-md: 1.0625rem;  /* 17px — desktop body */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3.5rem;    /* 56px */
  --text-5xl: 4.5rem;    /* 72px — hero */

  /* Fluid sizes for the two largest headings. These scale smoothly
     between breakpoints rather than jumping, which keeps the hero
     readable at 375px without a cramped step change. */
  --text-hero: clamp(2.25rem, 1.35rem + 4.2vw, 3.75rem);     /* 36px → 60px */
  --text-section: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);   /* 28px → 40px */

  /* --- Line heights --- */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Structure --- */
  --radius: 4px;
  --width-prose: 640px;
  --width-wide: 1080px;
  --header-height: 60px;
}


/* =====================================================
   3. RESET AND BASE
   ===================================================== */

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

html {
  /* Offsets in-page anchor jumps so the sticky header
     does not cover the target heading. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-brand);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* A single, clearly visible focus treatment for every
   interactive element, for keyboard navigation. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Reverse the focus ring on the dark waitlist panel so it
   stays visible against the navy background. */
.section--brand a:focus-visible {
  outline-color: var(--color-bg);
}

/* Visually hidden but available to screen readers */
.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;
}

/* Skip link — hidden until focused by keyboard */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* =====================================================
   4. LAYOUT PRIMITIVES
   ===================================================== */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--wide {
  max-width: calc(var(--width-wide) + (var(--space-4) * 2));
}

.container--prose {
  max-width: calc(var(--width-prose) + (var(--space-4) * 2));
}


/* =====================================================
   5. SHARED COMPONENTS
   ===================================================== */

/* Small uppercase label sitting above a heading. The only
   place uppercase is used anywhere on the site. */
.overline {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.overline--centred {
  text-align: center;
}

/* Editorial line breaks in headings. Suppressed on narrow
   screens, where natural wrapping reads better than breaks
   chosen for a wide column. */
.br-wide {
  display: none;
}

.button {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  border-radius: var(--radius);
  transition: background-color 0.18s ease;
}

.button:hover {
  text-decoration: none;
}

.button--primary {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
}

.button--primary:hover {
  background-color: var(--color-brand-dark);
}

/* Warm charcoal rather than brand navy on the copper fill:
   navy on copper is only 3.6:1, charcoal reaches 4.95:1. */
.button--accent {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.button--accent:hover {
  background-color: #D98F52;
}

/* Text-only secondary action */
.link-arrow {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-brand);
}


/* =====================================================
   6. HEADER
   Sticky, minimal: wordmark and a single waitlist anchor.
   ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
  max-width: calc(var(--width-wide) + (var(--space-4) * 2));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wordmark__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Two-tier lockup. Uppercase and letterspaced here only — this is the
   brand mark, not running text, where the site stays sentence case.
   text-transform keeps the accessible name in normal case. */
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.wordmark__sub {
  margin-top: 3px;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.header-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.header-link:hover {
  color: var(--color-brand);
}


/* =====================================================
   7. HERO
   ===================================================== */

.hero {
  position: relative;
  padding-block: var(--space-20) var(--space-16);
  background-color: var(--color-bg);
}

/* Oversized brand motif, bled off the right edge at very low opacity.
   Purely decorative: hidden below 1024px so it never competes with the
   headline on smaller screens. */
.hero__motif {
  display: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero__heading {
  max-width: 960px;
  font-size: var(--text-hero);
  margin-bottom: var(--space-8);
}

.hero__subheading {
  max-width: var(--width-prose);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.hero__caption {
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}


/* =====================================================
   8. SECTIONS
   Shared vertical rhythm and background variants.
   ===================================================== */

.section {
  padding-block: var(--space-16);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

.section--brand {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  padding-block: var(--space-20);
}

.section--brand .section__heading {
  color: var(--color-text-inverse);
}

.section--brand .overline {
  color: var(--color-accent-on-brand);
}

.section__heading {
  font-size: var(--text-section);
  margin-bottom: var(--space-6);
}

.section__heading--centred {
  text-align: center;
}

.section__intro {
  max-width: 720px;
  margin-bottom: var(--space-12);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}


/* =====================================================
   9. PRACTICE CARDS
   Single column on mobile, three-up from 1024px.
   ===================================================== */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.card {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* Decorative numeral — hidden from screen readers in the
   markup, since it carries no meaning when read aloud. */
.card__number {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--color-accent-text);
}

.card__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.card__body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}


/* =====================================================
   10. APPROACH PRINCIPLES
   ===================================================== */

.principles {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.principle__heading {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  font-weight: 500;
}

.principle__body {
  font-size: var(--text-md);
  line-height: 1.7;
}


/* =====================================================
   11. ABOUT / THE PERSON
   Two columns from 1024px: text left, expertise tags right.
   ===================================================== */

.about {
  display: grid;
  gap: var(--space-12);
}

.about__body {
  margin-bottom: var(--space-6);
  font-size: var(--text-md);
  line-height: 1.7;
}

.about__caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tag {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* =====================================================
   12. WAITLIST
   The primary call to action. Email only — no form backend.
   ===================================================== */

.waitlist__body {
  margin-bottom: var(--space-6);
  font-size: var(--text-md);
  line-height: 1.7;
  text-align: center;
  /* Near-white at slightly reduced strength, kept well
     above AA contrast on the navy panel. */
  color: #E6E7E2;
}

.waitlist__action {
  margin-block: var(--space-8);
  text-align: center;
}

.waitlist__caption {
  font-size: var(--text-sm);
  text-align: center;
  color: #C9CCC6;
}

.waitlist__link {
  color: var(--color-text-inverse);
  text-decoration: underline;
}


/* =====================================================
   13. FOOTER
   ===================================================== */

.site-footer {
  padding-block: var(--space-12);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__columns {
  display: grid;
  gap: var(--space-8);
}

.footer__column p {
  margin-bottom: var(--space-2);
}

.footer__name {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-brand);
}

.footer__brands-label {
  margin-top: var(--space-4);
}

.footer__brands li {
  margin-bottom: var(--space-2);
}

.footer__brands li::before {
  content: "\2022";
  margin-right: var(--space-2);
  color: var(--color-border-strong);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.footer__legal {
  display: flex;
  gap: var(--space-2);
}


/* =====================================================
   14. LEGAL PAGES
   Shared prose styling for privacy.html and terms.html.
   ===================================================== */

.legal__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-section);
}

.legal__updated {
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legal p {
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

.legal h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  font-weight: 500;
}

.legal a {
  text-decoration: underline;
}

.legal__back {
  margin-top: var(--space-12);
  font-weight: 500;
}


/* =====================================================
   15. RESPONSIVE BREAKPOINTS
   Mobile-first: each block layers on top of the last.
   ===================================================== */

/* --- 640px: small tablets --- */
@media (min-width: 40em) {
  .container {
    padding-inline: var(--space-6);
  }

  .site-header__inner {
    padding-inline: var(--space-6);
  }

  .footer__bottom {
    justify-content: space-between;
  }
}

/* --- 768px: tablets --- */
@media (min-width: 48em) {
  body {
    font-size: var(--text-md);
  }

  .hero {
    padding-block: var(--space-24) var(--space-20);
  }

  .section {
    padding-block: var(--space-20);
  }

  .br-wide {
    display: inline;
  }
  .footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* --- 1024px: desktop. Multi-column layouts engage here. --- */
@media (min-width: 64em) {
  :root {
    --header-height: 72px;
  }

  .container {
    padding-inline: var(--space-8);
  }

  .site-header__inner {
    padding-inline: var(--space-6);
  }


  .hero {
    padding-block: var(--space-32) var(--space-24);
  }

  .hero__motif {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--space-16);
    width: 360px;
    height: 360px;
    transform: translateY(-50%);
    opacity: 0.07;
    pointer-events: none;
  }


  .section {
    padding-block: var(--space-24);
  }

  .section--brand {
    padding-block: var(--space-32);
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    padding: var(--space-10);
  }

  .about {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  /* Tags stack vertically alongside the text column */
  .about__aside .tags {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- 1280px: wide desktop --- */
@media (min-width: 80em) {
  .container {
    padding-inline: 0;
  }
}


/* =====================================================
   16. REDUCED MOTION
   Honour the OS-level preference. The site has only hover
   transitions, but they are removed here regardless.
   ===================================================== */

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

  .card:hover {
    transform: none;
  }
}