/* Frontmatter Digital — tokens from GW Brand Kit */
:root {
  --midnight: #0e131a;
  --surface: #161d26;
  --offwhite: #eef1f4;
  --slate: #679dd4;
  --sky: #a6c8ee;
  /* Tertiary: reserved, very rarely used. Not referenced anywhere on the site today. */
  --rust: #e1755a;

  /* Slate leads; sky supports */
  --accent: var(--slate);
  --accent-2: var(--sky);

  --fg: var(--offwhite);
  --fg-muted: rgba(238, 241, 244, 0.72);
  --line: rgba(238, 241, 244, 0.1);

  --accent-rgb: 103, 157, 212;

  /* Motion (measured on emailvelocity.com) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1100px;
  --gutter: 20px;
  --section-y: 80px;
  --nav-h: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-y: 112px; --nav-h: 84px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; --section-y: 128px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--midnight);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, dl, dd, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--offwhite); color: var(--midnight);
  padding: 8px 16px; font-weight: 500;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--midnight);
  font-family: var(--font-body);
  font-size: 16px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  transition: all 0.3s var(--ease);
}
.btn:focus-visible { box-shadow: 0 0 40px 0 rgba(var(--accent-rgb), 0.45); }
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 40px 0 rgba(var(--accent-rgb), 0.45);
  }
}
.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 15px; }

/* ---------- Tag / pill (brand kit pattern) ---------- */
.tag {
  display: inline-block;
  background: var(--accent);
  color: var(--midnight);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 5px 10px;
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 20px;
}

.hero__title, .section__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-wrap: balance;
}
.section__title { font-size: clamp(36px, 7vw, 60px); max-width: 16ch; }
.section__lead {
  margin-top: 20px;
  font-size: 18px;
  color: var(--fg-muted);
  max-width: 52ch;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(14, 19, 26, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter);
  max-width: 1440px; margin-inline: auto;
}
.nav__logo img { height: 40px; width: auto; }
@media (min-width: 768px) { .nav__logo img { height: 48px; } }

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 72px;
  text-align: center;
}
@media (min-width: 768px) {
  .hero { padding-top: calc(var(--nav-h) + 120px); padding-bottom: 96px; }
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__title { font-size: clamp(40px, 8.4vw, 88px); max-width: 15ch; }
.hero__lead {
  margin-top: 24px; margin-bottom: 40px;
  max-width: 560px;
  font-size: 18px;
  color: var(--fg-muted);
}
@media (min-width: 768px) { .hero__lead { font-size: 20px; } }

/* ---------- Marquee (track holds two identical groups, so -50% loops seamlessly) ---------- */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 18px;
}
.marquee__track {
  display: flex; width: max-content;
  animation: vMarquee 40s linear infinite;
  will-change: transform;
}
@keyframes vMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__group li {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg);
  padding-inline: 28px;
  white-space: nowrap;
}
.marquee__group li.marquee__star { color: var(--accent-2); padding-inline: 0; font-size: 18px; }
@media (min-width: 768px) { .marquee__group li { font-size: 28px; padding-inline: 32px; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section__head { margin-bottom: 56px; }
@media (min-width: 768px) { .section__head { margin-bottom: 72px; } }

.split { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
}

/* ---------- Services ---------- */
.services {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service {
  position: relative;
  background: var(--midnight);
  padding: 36px 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  transition: background-color 0.5s var(--ease);
}
@media (min-width: 768px) { .service { padding: 48px 40px; } }
/* Accent line that draws in along the bottom edge on hover */
.service::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.service__num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--fg-muted); letter-spacing: 0.08em;
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.service .tag { transition: box-shadow 0.5s var(--ease); }
.service__title {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 26px; line-height: 1.05;
}
.service p { color: var(--fg-muted); }
.service__list {
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: grid; gap: 12px;
}
.service__list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px; line-height: 1.55;
}
.service__list li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  transition: transform 0.3s var(--ease);
}
@media (hover: hover) {
  .service:hover { background: var(--surface); }
  .service:hover::after { transform: scaleX(1); }
  .service:hover .service__num { transform: translateX(4px); color: var(--accent); }
  .service:hover .tag { box-shadow: 0 0 20px 0 rgba(var(--accent-rgb), 0.25); }
  .service:hover .service__list li::before { transform: translateX(4px); }
}
.service p.service__outcome {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-2);
}

/* ---------- About me ---------- */
.prose { margin-top: 28px; margin-bottom: 40px; display: grid; gap: 20px; max-width: 54ch; }
.prose p { color: var(--fg-muted); }

.profile {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px;
}
@media (min-width: 768px) { .profile { padding: 36px; } }
.profile__avatar {
  flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--midnight);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 18px;
  object-fit: cover;
}
.profile__body { min-width: 0; }
.profile__name { font-size: 19px; font-weight: 500; line-height: 1.3; }
.profile__role { color: var(--fg-muted); }
.profile__meta {
  margin-top: 2px;
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-2);
}
.profile__bio {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted); font-size: 16px;
}

/* ---------- Sound like you? ---------- */
.fit-list { border-top: 1px solid var(--line); }
.fit-list__item {
  position: relative;
  padding: 24px 20px 24px 52px;
  border-bottom: 1px solid var(--line);
  font-size: 19px; line-height: 1.5;
  transition: background-color 0.3s var(--ease);
}
@media (min-width: 768px) { .fit-list__item { font-size: 21px; padding-block: 28px; } }
.fit-list__item::before {
  content: "→";
  position: absolute; left: 20px; top: 24px;
  color: var(--accent);
  font-family: var(--font-mono);
  transition: transform 0.3s var(--ease);
}
@media (min-width: 768px) { .fit-list__item::before { top: 28px; } }
@media (hover: hover) {
  .fit-list__item:hover { background: var(--midnight); }
  .fit-list__item:hover::before { transform: translateX(4px); }
}
.fit-list__item strong { font-weight: 500; color: var(--accent); }

/* ---------- Proof: public examples ---------- */
.examples + .examples { margin-top: 64px; }
.examples__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 24px; line-height: 1.1;
}
.examples__grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .examples__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.example {
  background: var(--surface);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 768px) { .example { padding: 36px 32px; } }
.example__meta {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-2);
}
.example__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 22px; line-height: 1.1;
}
.example p:not(.example__meta) { color: var(--fg-muted); font-size: 16px; }
.example__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.example__avatars { display: flex; flex-shrink: 0; }
.example__avatars img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  background: var(--midnight);
}
.example__avatars img + img { margin-left: -14px; }
.example__head .example__meta { margin-bottom: 4px; }
.example__shot {
  margin: auto 0 0;
  padding-top: 12px;
}
.example__shot img { width: 100%; height: auto; }
/* ---------- Scheduler ---------- */
.scheduler {
  background: var(--offwhite);
  border: 1px solid var(--line);
  padding: 8px;
}
@media (min-width: 768px) { .scheduler { padding: 16px; } }
.scheduler iframe { display: block; width: 100%; height: 760px; }
@media (min-width: 900px) { .scheduler iframe { height: 640px; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 40px; }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.footer__inner img { width: 40px; height: 40px; }
.footer__line { color: var(--fg-muted); font-size: 15px; }
.footer__copy {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-muted);
  width: 100%;
}
@media (min-width: 768px) { .footer__copy { width: auto; margin-left: auto; } }

/* ---------- Scroll reveal ----------
   Hidden state only applies once JS has tagged <html class="js">, so content is never lost.
   Stagger delays are set inline by script.js. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
/* Elements that also transition their background on hover need one combined declaration */
html.js .service.reveal {
  transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal), background-color 0.5s var(--ease);
}
html.js .fit-list__item.reveal {
  transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal), background-color 0.3s var(--ease);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .btn, .service, .service::after, .service__num, .service .tag,
  .service__list li::before, .fit-list__item, .fit-list__item::before { transition: none; }
  .btn:hover { transform: none; }
  .service:hover .service__num,
  .service:hover .service__list li::before,
  .fit-list__item:hover::before { transform: none; }
}