/* =============================================================
   Kait Forester Designs — Design System
   =============================================================

   TOKENS
   Everything below is driven by the custom properties in :root.
   Change a token, not a rule, when you want a global adjustment.

   Spacing  — 8px base scale, --space-1 (4px) … --space-11 (120px)
   Type     — --text-xs … --text-3xl, fluid sizes use clamp()
   Weight   — 400 regular / 500 medium / 700 bold / 900 display
   Color    — semantic names (--color-text, --color-accent, …),
              inverted set under .theme-dark for dark sections
   Border   — --border-hairline (1px) / --border-bold (2px)
   Motion   — --dur-fast/base/slow, single --ease curve
   ============================================================= */

:root {
  /* --- Color: core palette --- */
  --palette-ink: #12110f;
  --palette-ink-2: #2b2823;
  --palette-bone: #f7f4ed;
  --palette-bone-2: #efeadf;
  --palette-accent: #d35f24;
  --palette-accent-dark: #b44d18;
  --palette-gray: #6f6a60;
  --palette-gray-light: #a9a298;
  --palette-white: #ffffff;

  /* --- Color: semantic --- */
  --color-bg: var(--palette-white);
  --color-surface: #f4f2ed;
  --color-text: var(--palette-ink);
  --color-text-muted: var(--palette-gray);
  --color-text-inverse: var(--palette-bone);
  --color-accent: var(--palette-accent);
  --color-accent-hover: var(--palette-accent-dark);
  --color-border: #e4e0d8;
  --color-border-strong: var(--palette-ink);

  /* --- Spacing: 8px base --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 120px;

  /* --- Type --- */
  --font-family: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: clamp(1.15rem, 1.6vw, 1.35rem);
  --text-xl: clamp(1.35rem, 2.2vw, 1.9rem);
  --text-2xl: clamp(1.75rem, 4.6vw, 3.6rem);
  --text-3xl: clamp(1.75rem, 7vw, 5.5rem);
  --text-stat: clamp(2.5rem, 5vw, 4.2rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-display: 900;

  --leading-display: 0.92;
  --leading-tight: 1.2;
  --leading-body: 1.6;

  --tracking-display: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.16em;

  /* --- Border --- */
  --border-hairline: 1px;
  --border-bold: 2px;

  /* --- Layout --- */
  --container: 1280px;
  --gutter: var(--space-7);
  --header-h: 92px;
  --section-y: var(--space-11);

  /* --- Motion --- */
  --dur-fast: 0.3s;
  --dur-base: 0.45s;
  --dur-slow: 0.8s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inverted token set — apply .theme-dark to any section that needs it */
.theme-dark {
  --color-bg: var(--palette-ink);
  --color-surface: var(--palette-ink-2);
  --color-text: var(--palette-bone);
  --color-text-muted: var(--palette-gray-light);
  --color-border: #3a3630;
  --color-border-strong: #3a3630;

  background: var(--color-bg);
  color: var(--color-text);
}

/* =============================================================
   BASE
   ============================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--section-y) 0; }

/* =============================================================
   TYPE
   ============================================================= */

h1, h2, h3 {
  font-weight: var(--weight-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* Small uppercase label — the one repeating "kicker" pattern site-wide */
.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.section-head {
  max-width: 900px;
  margin-bottom: var(--space-9);
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  border: var(--border-bold) solid var(--color-border-strong);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

/* hover fill sweeps up from the bottom; label sits above it */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--color-bg); }
.btn:hover::after { transform: translateY(0); }

.btn:focus-visible {
  outline: var(--border-bold) solid var(--color-accent);
  outline-offset: 3px;
}

.btn .arrow { transition: transform var(--dur-base) var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.btn.filled {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--palette-white);
}

.btn.filled::after { background: var(--palette-ink); }

.btn.filled:hover {
  color: var(--palette-white);
  border-color: var(--palette-ink);
}

/* =============================================================
   HEADER
   ============================================================= */

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: var(--border-bold) solid transparent;
  transition: border-color var(--dur-fast) ease;
}

header.scrolled { border-bottom-color: var(--color-border-strong); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.logo {
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Header carries the real lockup; the footer keeps the type wordmark.
   The asset is a JPEG on white, so multiply drops its box out against the
   white bar instead of leaving a faint off-white rectangle. */
header .logo img {
  height: 70px;
  width: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 780px) {
  header .logo img { height: 56px; }
}

.logo .k { color: var(--color-accent); }
.logo .f { color: var(--color-text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding: var(--space-1) 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: var(--border-bold);
  background: var(--color-accent);
  transition: width var(--dur-fast) var(--ease);
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Contact is pulled out of the link row as the nav's call to action */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-bold) solid var(--color-border-strong);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}

.nav-links a.nav-cta::after { content: none; }

.nav-cta:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.nav-cta.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--palette-white);
}

.nav-cta.active:hover {
  background: var(--color-text);
  border-color: var(--color-text);
}

.nav-cta .arrow { transition: transform var(--dur-base) var(--ease); }
.nav-cta:hover .arrow { transform: translateX(4px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.nav-toggle span {
  width: 26px;
  height: var(--border-bold);
  background: var(--color-text);
}

/* =============================================================
   HERO
   ============================================================= */

.hero { padding: calc(var(--header-h) + var(--space-10)) 0 var(--space-10); }

.hero h1 { margin-bottom: var(--space-8); }

/* each statement gets its own line rather than wrapping mid-sentence */
.hero h1 span { display: block; }

.hero-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  border-top: var(--border-bold) solid var(--color-border-strong);
  padding-top: var(--space-6);
}

.hero-foot p { max-width: 460px; }

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* =============================================================
   SERVICES
   ============================================================= */

/* leading/trailing space comes from the neighbouring sections */
.services { padding: 0; }

.service-row {
  display: grid;
  grid-template-columns: 90px minmax(200px, 1fr) 1.2fr 60px;
  gap: var(--space-5);
  align-items: center;
  border-top: var(--border-hairline) solid var(--color-border);
  padding: var(--space-7) var(--space-5);
  margin: 0 calc(var(--space-5) * -1);
  position: relative;
  transition: background var(--dur-fast) ease;
}

.service-row:last-child {
  border-bottom: var(--border-hairline) solid var(--color-border);
}

.service-row h3 { transition: transform var(--dur-base) var(--ease); }

.service-row:hover { background: var(--color-surface); }

.service-row:hover h3 { transform: translateX(6px); }

.service-row:hover .service-arrow {
  opacity: 1;
  transform: translateX(0);
}

.service-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.service-row p { font-size: var(--text-base); }

.service-arrow {
  font-size: var(--text-lg);
  text-align: right;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

/* =============================================================
   PORTFOLIO
   ============================================================= */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.portfolio-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-slow) var(--ease);
}

.portfolio-item:hover img { transform: scale(1.04); }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 17, 15, 0) 40%, rgba(18, 17, 15, 0.9) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-overlay span {
  display: block;
  color: var(--palette-white);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.portfolio-overlay small {
  display: block;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* placeholder tiles until real screenshots are added */
.portfolio-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-item.placeholder .ph-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  line-height: 2;
  padding: 0 var(--space-5);
}

/* =============================================================
   TEAM / EXPERIENCE
   ============================================================= */

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

.team-copy h2 { margin-bottom: var(--space-5); }

.team-copy p + p { margin-top: var(--space-4); }

.team-copy h3 {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin: var(--space-7) 0 var(--space-4);
}

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

.stat {
  border-top: var(--border-bold) solid var(--color-border);
  padding-top: var(--space-5);
}

.stat-num {
  font-size: var(--text-stat);
  font-weight: var(--weight-display);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

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

.stack-tags span {
  border: var(--border-hairline) solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.stack-tags span:hover {
  border-color: var(--color-accent);
  color: var(--palette-white);
}

/* =============================================================
   CTA BAND
   ============================================================= */

.cta-band {
  background: var(--color-accent);
  color: var(--palette-white);
  text-align: center;
}

.cta-band h2 {
  color: var(--palette-white);
  margin-bottom: var(--space-7);
}

.cta-band .btn {
  border-color: var(--palette-white);
  color: var(--palette-white);
}

.cta-band .btn::after { background: var(--palette-white); }
.cta-band .btn:hover { color: var(--color-accent); }

/* =============================================================
   CONTACT
   ============================================================= */

.contact-hero { padding: calc(var(--header-h) + var(--space-9)) 0 var(--space-8); }

.contact-body { padding: 0; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-9);
  padding-bottom: var(--space-11);
}

.contact-info h3 { margin-bottom: var(--space-4); }

.contact-info > p { margin-bottom: var(--space-7); }

.info-line {
  border-top: var(--border-hairline) solid var(--color-border);
  padding: var(--space-5) 0;
}

.info-line .label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.info-line .value {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.contact-form { display: grid; gap: var(--space-5); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.field input,
.field textarea {
  width: 100%;
  border: var(--border-bold) solid var(--color-border-strong);
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--palette-white);
}

.field textarea { resize: vertical; min-height: 150px; }

.form-status {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  min-height: 20px;
}

.form-status.ok { color: #3f6b45; }
.form-status.err { color: #b5432f; }

/* =============================================================
   FOOTER
   ============================================================= */

footer {
  border-top: var(--border-bold) solid var(--color-border-strong);
  padding: var(--space-7) 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

footer .fine {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =============================================================
   SCROLL REVEAL
   The hidden state applies only when JS is running (html.js), so the
   page renders fully without JavaScript.
   ============================================================= */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1000px) {
  .service-row {
    grid-template-columns: 60px 1fr;
    gap: var(--space-2) var(--space-5);
  }
  .service-row p { grid-column: 2; }
  .service-arrow { display: none; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 780px) {
  :root {
    --header-h: 78px;
    --gutter: var(--space-5);
    --section-y: var(--space-10);
  }
  .hero { padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-9); }
  .hero h1 { margin-bottom: var(--space-6); }
  .hero-foot {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .contact-hero { padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-7); }
  .contact-layout { padding-bottom: var(--space-10); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .portfolio-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .team-stats { gap: var(--space-7) var(--space-5); }
  .form-row { grid-template-columns: 1fr; }
  .service-row {
    padding: var(--space-6) var(--space-4);
    margin: 0 calc(var(--space-4) * -1);
  }
}

/* Mobile nav drawer */
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--color-bg);
  border-bottom: var(--border-bold) solid var(--color-border-strong);
  align-items: flex-start;
  padding: var(--space-5);
  gap: var(--space-5);
}

.nav-links.open .nav-cta { margin-top: var(--space-1); }

/* =============================================================
   REDUCED MOTION
   ============================================================= */

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}