/* Fonts, reset, and the shared primitives every page uses. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/glacial-indifference-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Glacial Indifference';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/glacial-indifference-700.woff2') format('woff2');
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--deep-forest);
  color: var(--warm-cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
}

::selection { background: var(--pistachio); color: var(--deep-forest); }

a { text-decoration: none; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--pistachio);
  outline-offset: 3px;
  border-radius: 2px;
}

[data-theme] {
  background-color: var(--surface);
  color: var(--text);
}

section[data-theme], footer[data-theme] {
  padding: clamp(64px, 8vw, 96px) var(--pad-x);
}

/* Display type */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text);
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--pistachio);
}
.display-xl { font-size: var(--display-xl); line-height: 1.04; }
.display-lg { font-size: var(--display-lg); }
.display-md { font-size: var(--display-md); line-height: 1.1; }

/* Eyebrow labels, with the diamond motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-eyebrow);
  font-weight: 400;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--pistachio);
}
.eyebrow.muted { color: var(--text-faint); }
.eyebrow .diamond {
  width: 6px;
  height: 6px;
  background: var(--pistachio);
  transform: rotate(45deg);
  flex: none;
}

.lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 470px;
}

/* Buttons. Pill shape, three variants. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 13px 28px;
  border: 1.5px solid transparent;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  cursor: pointer;
}
.btn-solid {
  background-color: var(--pistachio);
  border-color: var(--pistachio);
  color: var(--deep-forest);
}
.btn-solid:hover { opacity: 0.88; }
.btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  color: var(--text);
}
.btn-ghost:hover { border-color: currentColor; }
.btn .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Inline arrow links (service cards, work cards) */
.card-link {
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--pistachio) 78%, var(--warm-charcoal));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card-link .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.card-link:hover .arrow { transform: translateX(4px); }

/* Hairline row lists (benefits, deliverables) */
.row-list { display: flex; flex-direction: column; gap: 12px; }
.row-item {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: border-color 0.2s var(--ease);
}
.row-item:hover { border-color: var(--text-faint); }
.row-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.row-item:hover h3 { color: var(--pistachio); }
.row-item p { font-size: 15px; color: var(--text-muted); }

/* Framed visual cards on service pages */
.visual-frame {
  background: #ECEAE1;
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-frame);
  padding: 20px;
}
.visual-frame svg { width: 100%; height: auto; border-radius: 10px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

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

@media (max-width: 768px) {
  .row-item { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
}