@import url('/styles/fonts.css');

:root {
  /* Color — semantic tokens, not raw hex in components. Monochrome by design
     (confirmed against the Toasty Labs Figma file); --accent exists as a
     named hook, not a color, so no component needs to change if that
     changes later.

     Light theme, matched to the live toastylabs.com: white page, #06070A ink
     (sampled from the production logo SVG and body text). --surface is the
     one raised/inset fill (code blocks, outcome callouts, image placeholders)
     — it replaces the dark theme's #161611. */
  --bg: #ffffff;
  --ink: #06070a;
  --ink-dim: #5c5f66;
  --line: #e6e6e3;
  --surface: #f4f4f2;
  --on-media: #ffffff;  /* text sitting on top of photography (bento scrim) —
                           stays light regardless of page theme */
  --accent: var(--ink);

  /* Type scale — five sizes, each with a specific job. Don't add a sixth
     without a reason; don't hand-roll a clamp() inline in a component. */
  --text-hero: clamp(40px, 8vw, 92px);      /* homepage hero only */
  --text-h1: clamp(28px, 5vw, 44px);        /* standard page headings: about, contact, works index, blog index, 404 */
  --text-h1-article: clamp(26px, 4.5vw, 42px); /* long-title contexts: blog post, case study title */
  --text-h2: clamp(26px, 4vw, 38px);        /* section headings within a page */
  --text-quote: clamp(22px, 3.4vw, 34px);   /* pull-quote treatment */

  /* Layout rhythm */
  --gutter: clamp(20px, 4.6875vw, 60px); /* 60px at 1280px, matching the Arounda case-study grid */
  --radius: 10px;   /* cards, images, inputs */
  --radius-btn: 10px;   /* buttons — matches the live site's CTA */
  --radius-pill: 999px; /* true pill shapes only (scroll cue) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.site-header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .logo { display: flex; align-items: center; }
.site-header .logo-lockup { display: block; height: 30px; width: auto; flex-shrink: 0; }
.site-header nav { display: flex; gap: 24px; margin-right: auto; }
.site-header nav a { color: var(--ink-dim); font-size: 15px; font-weight: 500; }
.site-header nav a:hover { color: var(--ink); }
.site-header .cta {
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
}
.site-header .cta:hover { background: transparent; color: var(--ink); }

@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 16px var(--gutter);
  }
  .site-header .logo-lockup { height: 27px; }
  .site-header nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }
  .site-header nav a { font-size: 14px; }
  .site-header .cta { display: none; }
}

main { min-height: 60vh; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px var(--gutter);
  font-size: 13px;
  color: var(--ink-dim);
}
.footer-top, .footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

/* Scroll-reveal utility — scoped to .js (set by an inline head script) so content
   stays visible by default with no JS, no flash-of-hidden-content. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Marquee (logo strip) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 56px; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}