/* ==========================================================================
   CurStack — base tokens
   ========================================================================== */

:root {
  --charcoal: #111827;
  --gold: #c99a2b;
  --gold-text: #8c6b1e; /* darkened gold — meets 4.5:1 contrast on white for text use; decorative gold (borders, underlines) keeps --gold */
  --white: #ffffff;
  --gray: #6b7280;
  --bg-light: #f7f7f5;
  --border: rgba(17, 24, 39, 0.1);

  /* System font stack — no external font requests. Visually close to Inter
     (same clean grotesque family) while keeping the site free of third-party
     network dependencies. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max-width: 1240px;
  --gutter: 24px;

  --space-section: 128px;
  --space-section-mobile: 72px;

  --radius: 6px;
  --transition: 200ms ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

p {
  margin: 0;
}

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

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

.sr-only {
  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 {
  position: absolute;
  left: 0;
  top: -48px;
  background: var(--charcoal);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

/* Anchor targets land clear of the sticky header instead of underneath it. */
main section[id],
.hero {
  scroll-margin-top: 88px;
}

/* ==========================================================================
   Brand lockup (used in header + footer)
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-emblem {
  flex-shrink: 0;
}

.brand-word {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.site-header .brand-word {
  font-size: 22px;
}

.c-dark {
  color: var(--charcoal);
}

.c-gold {
  color: var(--gold);
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

.primary-nav a {
  text-decoration: none;
  color: var(--charcoal);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}

.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  transition: right 200ms ease;
}

.primary-nav a:not(.nav-cta):hover::after,
.primary-nav a:not(.nav-cta):focus-visible::after,
.primary-nav a:not(.nav-cta).is-active::after {
  right: 0;
}

.primary-nav a.is-active {
  color: var(--gold-text);
}

.nav-cta {
  border: 1px solid var(--charcoal);
  border-radius: var(--radius);
  padding: 10px 18px !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--charcoal);
  color: var(--white);
}

/* Active state stays outlined, not filled — a restrained text/border cue only. */
.nav-cta.is-active {
  color: var(--gold-text);
  border-color: var(--gold-text);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  position: relative;
  transition: transform var(--transition);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -7px;
}

.nav-toggle-bars::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

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

.hero {
  position: relative;
  padding: 56px 0 112px;
  overflow: hidden;
}

/* Purely decorative — a CSS background instead of an <img> so there is no
   alt text to write and nothing that can show a broken-image glyph. */
.hero-watermark {
  position: absolute;
  top: 50%;
  right: -180px;
  transform: translateY(-50%);
  width: 780px;
  height: 780px;
  background-image: url("../assets/img/emblem-hero.webp");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 20px;
}

.hero-title {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.hero-lede {
  font-size: 20px;
  color: var(--charcoal);
  margin-bottom: 16px;
  max-width: 640px;
}

.hero-sub {
  font-size: 17px;
  color: var(--gray);
  margin-bottom: 40px;
  max-width: 620px;
}

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary {
  background: var(--charcoal);
  color: var(--white);
  padding: 14px 26px;
  border: 1px solid var(--charcoal);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #1c2535;
  border-color: var(--gold);
}

.btn-text {
  color: var(--charcoal);
  padding: 4px 0;
  gap: 10px;
  border-bottom: 1px solid var(--gold);
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--gold-text);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--border);
}

.section-narrow .wrap {
  max-width: 640px;
}

.section-narrow p + p {
  margin-top: 16px;
}

/* About runs shorter than the other sections (two short paragraphs), so it
   carries less vertical padding — the whitespace elsewhere stays untouched. */
.section-about {
  padding: 100px 0;
}

.section-kicker {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
}

.section-title {
  font-size: 42px;
  margin-bottom: 20px;
  max-width: 780px;
}

.section-intro {
  font-size: 18px;
  color: var(--gray);
  max-width: 640px;
  margin-bottom: 64px;
}

/* ==========================================================================
   What We Do
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.service h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.service > p {
  color: var(--charcoal);
  margin-bottom: 20px;
}

/* Plain, muted, dot-separated text — reads as a list of examples, not a
   badge/logo wall, and stays clearly secondary to the heading and copy. */
.service-examples {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 13px;
  color: var(--gray);
}

.service-examples li:not(:last-child)::after {
  content: "\00b7";
  margin: 0 8px;
  color: var(--gray);
}

/* ==========================================================================
   Approach
   ========================================================================== */

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.principle {
  padding: 0 28px;
  border-left: 1px solid var(--border);
}

.principle:first-child {
  padding-left: 0;
  border-left: none;
}

.principle h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.principle p {
  color: var(--gray);
  font-size: 15px;
}

/* ==========================================================================
   Philosophy statement
   ========================================================================== */

.philosophy {
  padding: 160px 0;
  text-align: center;
}

.philosophy-statement {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin: 0 auto 24px;
  line-height: 1.25;
}

.philosophy-sub {
  font-size: 20px;
  color: var(--gray);
  max-width: 620px;
  margin: 0 auto;
}

/* ==========================================================================
   Where CurStack fits
   ========================================================================== */

.fit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  max-width: 980px;
}

/* Flexbox (not an absolutely-positioned ::before) so the marker lands at the
   same relative position whether an item wraps to one line or two. */
.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.fit-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 1px;
  margin-top: 13px;
  background: var(--gold);
}

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

.contact {
  background: var(--bg-light);
}

.contact-card {
  border-top: 1px solid var(--border);
  padding-top: 40px;
}

.contact-btn {
  display: inline-flex;
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-tagline {
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 0.04em;
}

.footer-copyright {
  font-size: 13px;
  color: var(--gray);
}

/* ==========================================================================
   404 page
   ========================================================================== */

.error-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px var(--gutter);
}

.error-emblem {
  width: 56px;
  height: 56px;
  margin-bottom: 32px;
}

.error-code {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.error-message {
  font-size: 18px;
  color: var(--gray);
  margin-bottom: 40px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-title {
    font-size: 58px;
  }

  .hero-watermark {
    width: 620px;
    height: 620px;
    right: -220px;
    opacity: 0.045;
  }

  .principles {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .principle:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 860px) {
  :root {
    --space-section: var(--space-section-mobile);
  }

  .section-about {
    padding: 56px 0;
  }

  .header-inner {
    flex-wrap: wrap;
  }

  /* No-JS baseline: the nav stays in normal flow and wraps onto its own row
     below the logo, so every link stays reachable with JavaScript disabled.
     With JS, the rules below (scoped to .js) replace this with the usual
     collapsible dropdown. */
  .primary-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 8px 0 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  .primary-nav a {
    width: 100%;
    padding: 12px 0;
  }

  .nav-cta {
    margin-top: 8px;
    align-self: flex-start;
  }

  .js .primary-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    border-top: none;
    margin-top: 0;
    padding: 12px var(--gutter) 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }

  .js .primary-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .js .nav-toggle {
    display: flex;
  }

  .hero {
    padding: 64px 0 72px;
  }

  .hero-watermark {
    opacity: 0.05;
    width: 480px;
    height: 480px;
    right: -160px;
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-lede {
    font-size: 18px;
  }

  .hero-actions {
    gap: 20px;
  }

  .section-title {
    font-size: 32px;
  }

  .section-intro {
    margin-bottom: 40px;
  }

  .services {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .principles {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .principle {
    padding-left: 0;
    border-left: none;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  .principle:first-child {
    padding-top: 0;
    border-top: none;
  }

  .philosophy {
    padding: 96px 0;
  }

  .philosophy-statement {
    font-size: 30px;
  }

  .philosophy-sub {
    font-size: 17px;
  }

  .fit-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 34px;
  }

  .hero-watermark {
    display: none;
  }
}