@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #11251e;
  --ink-2: #17352b;
  --forest: #0b4435;
  --forest-2: #165c48;
  --mint: #8ed8bd;
  --mint-pale: #e3f3ec;
  --orange: #f06432;
  --orange-dark: #d64a19;
  --cream: #f2f0e8;
  --paper: #fff;
  --white: #fff;
  --sage: #819087;
  --line: rgba(17, 37, 30, .14);
  --shadow-sm: 0 10px 30px rgba(12, 40, 31, .08);
  --shadow-lg: 0 30px 80px rgba(7, 31, 23, .18);
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --max: 1240px;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.04em; line-height: 1.04; }
h1 { font-size: clamp(2.5rem, 4vw, 4.5rem); }
h2 { font-size: clamp(1.65rem, 2.35vw, 2.65rem); }
h3 { font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
em { color: var(--orange); font-style: normal; }

.skip-link { background: var(--white); left: 1rem; padding: .75rem 1rem; position: fixed; top: -5rem; z-index: 1000; }
.skip-link:focus { top: 1rem; }
.svg-sprite { height: 0; position: absolute; width: 0; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.eyebrow { align-items: center; color: var(--forest-2); display: flex; font-size: .75rem; font-weight: 800; gap: .65rem; letter-spacing: .14em; margin-bottom: 1.3rem; text-transform: uppercase; }
.eyebrow span { background: var(--orange); border-radius: 99px; height: 8px; width: 8px; }
.eyebrow-light { color: var(--mint); }
.eyebrow-label { color: var(--orange); display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; margin-bottom: .3rem; text-transform: uppercase; }
.section { padding: 7rem max(4vw, calc((100vw - var(--max)) / 2)); }
.section-light { background: var(--paper); }
.section-cream { background: var(--cream); }
.section-dark, .section-ink { color: var(--white); }
.button { align-items: center; border: 1px solid transparent; border-radius: 9px; display: inline-flex; font-weight: 700; gap: 1rem; justify-content: center; min-height: 52px; padding: .82rem 1.3rem; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: .65rem 1.1rem; }
.button-orange { background: var(--orange); color: var(--white); }
.button-orange:hover { background: var(--orange-dark); }
.button-ghost { border-color: rgba(255,255,255,.28); color: var(--white); }
.button-ghost:hover { background: rgba(255,255,255,.08); }
.button-white { background: var(--white); color: var(--ink); }
.button-outline { border-color: var(--line); color: var(--ink); }
.arrow-link { align-items: center; display: inline-flex; font-weight: 700; gap: .75rem; }
.arrow-link span, .expertise-links span { color: var(--orange); font-size: 1.2em; transition: transform .2s; }
.arrow-link:hover span, .expertise-links a:hover span { transform: translateX(4px); }