/* =====================================================================
   Concept Folie — design system / styles.css
   Mobile-first. Fluid typography. Tap targets ≥44px. Body ≥16px.
   Self-hosted font slot reserved (none loaded by default; system stack used).
   ===================================================================== */

/* --- Design tokens ------------------------------------------------- */
:root {
  /* Brand */
  --cf-blue:        #0015FF;
  --cf-yellow:      #FFE900;
  --cf-black:       #000000;
  --cf-white:       #FFFFFF;
  --cf-cream:       #FAFAF6;          /* warm off-white canvas */
  --cf-cream-2:     #EFEBE3;          /* deeper cream, alternate sections */
  --cf-charcoal:    #0E0E0E;

  /* Editorial accents (used sparingly inside case studies) */
  --cf-coral:       #E94B3C;
  --cf-violet:      #7E5BD3;
  --cf-forest:      #2E8E5C;
  --cf-sun:         #F5C237;

  /* Surfaces */
  --bg:             var(--cf-cream);
  --bg-invert:      var(--cf-charcoal);
  --bg-brand:       var(--cf-blue);
  --fg:             #111111;
  --fg-muted:       #4A4A4A;
  --fg-soft:        #6E6E6E;
  --fg-invert:      var(--cf-cream);
  --rule:           rgba(0,0,0,.12);
  --rule-strong:    rgba(0,0,0,.32);

  /* Type — fluid scale via clamp(min, fluid, max) */
  --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);          /* 14→16 */
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.125rem);        /* 16→18  body */
  --step-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);        /* 18→22 */
  --step-2:  clamp(1.375rem, 1.20rem + 0.9vw, 1.875rem);        /* 22→30 */
  --step-3:  clamp(1.75rem,  1.40rem + 1.8vw, 2.625rem);        /* 28→42 */
  --step-4:  clamp(2.25rem,  1.60rem + 3.3vw, 3.75rem);         /* 36→60 */
  --step-5:  clamp(2.75rem,  1.80rem + 4.8vw, 5rem);            /* 44→80 hero */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  /* Layout */
  --container:     min(94rem, 100% - 2rem);   /* default container */
  --measure:       66ch;                      /* readable line length */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --tap:           44px;                      /* min hit target */

  /* Motion */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --dur-fast:      120ms;
  --dur:           220ms;
  --dur-slow:      420ms;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
  --shadow-2: 0 4px 14px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.10);
}

/* --- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family:
    /* slot for self-hosted woff2 — drop here if added later, e.g. "Inter", */
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
picture { display: block; }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 2rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Headings */
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--step-5); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p, ul, ol, dl, blockquote { margin: 0 0 1rem; max-width: var(--measure); }

/* Links */
a {
  color: var(--cf-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--cf-charcoal); }
a:focus-visible {
  outline: 3px solid var(--cf-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout primitives -------------------------------------------- */
.container { width: var(--container); margin-inline: auto; }
.section   { padding-block: clamp(3rem, 4vw + 2rem, 7rem); }

.section--cream    { background: var(--cf-cream); }
.section--cream-2  { background: var(--cf-cream-2); }
.section--charcoal {
  background: var(--cf-charcoal);
  color: var(--fg-invert);
}
.section--charcoal a { color: var(--cf-yellow); }
.section--brand    {
  background: var(--cf-blue);
  color: var(--cf-cream);
}
.section--brand h1,
.section--brand h2,
.section--brand h3 { color: var(--cf-cream); }
.section--brand a { color: var(--cf-cream); }
.section--brand .btn {
  background: var(--cf-cream);
  color: var(--cf-blue);
  border-color: var(--cf-cream);
}
.section--brand .btn:hover {
  background: transparent;
  color: var(--cf-cream);
  border-color: var(--cf-cream);
}

/* Grid helpers (mobile-first single column) */
.grid { display: grid; gap: 2rem; }

/* --- Header / nav -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,250,246,.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  width: var(--container); margin-inline: auto;
  min-height: 64px;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 500; letter-spacing: .04em;
  text-decoration: none; color: var(--cf-black);
  min-height: var(--tap);
  padding-inline: 4px;
}
.brand-mark img { height: 44px; width: auto; }
.site-header { min-height: 80px; }
.site-header__inner { min-height: 80px; }
.site-footer .brand-mark img { height: 56px; }

.nav-toggle {
  appearance: none; background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 10px 14px;
  min-height: var(--tap); min-width: var(--tap);
}
.nav-toggle[aria-expanded="true"] { background: var(--cf-black); color: var(--cf-cream); }

.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cf-cream); border-bottom: 1px solid var(--rule);
  padding: 1rem;
}
.site-nav[data-open="true"] { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.site-nav a {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: .5rem .75rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--cf-black);
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  background: var(--cf-black); color: var(--cf-yellow);
}

@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; position: static; padding: 0; background: transparent; border: 0; }
  .site-nav ul { display: flex; gap: .5rem; align-items: center; }
  .site-nav a { padding: .5rem 1rem; }
}

/* --- Hero ---------------------------------------------------------- */
.hero {
  padding-block: clamp(4rem, 6vw + 2rem, 9rem);
  background: var(--cf-cream);
  border-bottom: 1px solid var(--rule);
}
.hero__eyebrow {
  display: inline-block;
  background: var(--cf-blue); color: var(--cf-yellow);
  padding: .35rem .75rem; border-radius: 999px;
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
}
.hero__title { margin-top: 1.25rem; max-width: 22ch; }
.hero__lede  { color: var(--fg-muted); font-size: var(--step-1); max-width: 50ch; }

/* --- Buttons / CTA ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap);
  padding: .75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none; font-weight: 500;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--cf-blue); color: var(--cf-yellow); border-color: var(--cf-blue);
}
.btn--primary:hover { background: var(--cf-yellow); border-color: var(--cf-blue); color: var(--cf-blue); }
.btn--ghost { background: transparent; color: var(--cf-blue); border-color: var(--cf-blue); }
.btn--ghost:hover { background: var(--cf-blue); color: var(--cf-yellow); }
.btn:active { transform: translateY(1px); }

/* --- Cards (case studies) ----------------------------------------- */
.case-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .case-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--cf-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--cf-black);
}
.case-card__media { aspect-ratio: 16/10; background: var(--cf-cream-2); }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; }
.case-card__body { padding: 1rem 1.25rem 1.25rem; }
.case-card__tag {
  display: inline-block; font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
}
.case-card__title { font-size: var(--step-2); margin: .25rem 0 .25rem; }
.case-card__meta  { color: var(--fg-soft); font-size: var(--step--1); }

/* --- Logo strip ---------------------------------------------------- */
.logos {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 40rem) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 72rem) { .logos { grid-template-columns: repeat(6, 1fr); } }
.logos img { height: 28px; width: auto; opacity: .72; filter: grayscale(1); margin-inline: auto; }
.logos img:hover { opacity: 1; filter: none; }

/* --- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--cf-charcoal);
  color: var(--cf-cream);
  padding-block: clamp(3rem, 5vw, 5rem);
}
.site-footer a { color: var(--cf-yellow); text-decoration-color: rgba(255,233,0,.4); }
.site-footer a:hover { color: var(--cf-cream); text-decoration-color: var(--cf-cream); }
.site-footer strong { color: var(--cf-yellow); }
.site-footer .brand-mark { color: var(--cf-cream); }
.site-footer__grid {
  display: grid; gap: 2rem;
}
@media (min-width: 56rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.site-footer__small { font-size: var(--step--1); opacity: .8; margin-top: 2rem; }

/* --- Forms --------------------------------------------------------- */
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.field input, .field textarea {
  min-height: var(--tap);
  padding: .75rem .9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--cf-white);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--cf-blue);
  outline-offset: 1px;
  border-color: var(--cf-blue);
}

/* --- Skip link ----------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--cf-yellow); color: var(--cf-black);
  padding: .75rem 1rem; z-index: 100;
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid var(--cf-black); }

/* --- Utility ------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.text-center { text-align: center; }
.flow > * + * { margin-top: 1rem; }
.flow-lg > * + * { margin-top: 2rem; }

/* --- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print --------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}