/* ZBF Limited — shared custom CSS
   Design tokens, motion, small components that aren't worth Tailwind-ifying. */

:root {
  --ink: #0F0F0F;
  --paper: #FAFAF7;
  --paper-shadow: #ECE9DD;
  --stone-100: #EDEBE4;
  --stone-200: #D9D6CC;
  --stone-300: #B7B3A8;
  --stone-400: #8D8A81;
  --stone-500: #5E5C55;
  --stone-600: #3D3B36;
  --ember: #C8102E;
  --ember-600: #A80E27;
  --ember-50: #FDEEF0;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-outsoft: cubic-bezier(0.16, 1, 0.3, 1);

  --rail: 1px solid rgba(15, 15, 15, 0.12);
  --rail-strong: 1px solid rgba(15, 15, 15, 0.28);
}

/* Paper base, Switzer body, off-black ink */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

/* Selection */
::selection { background: var(--ember); color: var(--paper); }

/* Grain overlay — very subtle paper texture. SVG filter, performance-cheap. */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Display headings — General Sans, humanist grotesk with warmth */
.display {
  font-family: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
/* Emphasis word inside a heading — was italic Fraunces; now red accent. */
.display-italic {
  color: var(--ember);
  font-style: normal;
}

/* Eyebrow — small, all-caps, hair-tight spacing */
.eyebrow {
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* Pill label (for "CERTIFIED", date stamps, etc.) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(15, 15, 15, 0.18);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
}
.pill-ember {
  border-color: rgba(200, 16, 46, 0.6);
  color: var(--ember);
  background: var(--ember-50);
}

/* Hairline rule */
.rail-top    { border-top: var(--rail); }
.rail-bottom { border-bottom: var(--rail); }

/* Primary button — ember, layered shadow, spring hover */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 260ms var(--ease-spring), background 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 0 0 rgba(15,15,15,0.1), 0 10px 24px -12px rgba(60,30,20,0.25);
}
.btn:hover { transform: translateY(-1px); background: var(--ember); border-color: var(--ember); box-shadow: 0 1px 0 0 rgba(200,16,46,0.4), 0 16px 36px -14px rgba(200,16,46,0.45); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(15,15,15,0.22);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 10px 24px -12px rgba(15,15,15,0.3); }

.btn-ember {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
  box-shadow: 0 1px 0 0 rgba(200,16,46,0.4), 0 10px 24px -12px rgba(200,16,46,0.4);
}
.btn-ember:hover { background: var(--ember-600); border-color: var(--ember-600); transform: translateY(-1px); }

/* Link underline animation */
.ulink {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
}
.ulink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0; right: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 360ms var(--ease-outsoft);
}
.ulink:hover::after { transform: scaleX(0); transform-origin: right; }
.ulink-static::after { background: rgba(15,15,15,0.35); }

/* Card (for service grid, testimonial grid) — floating surface */
.card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(15, 15, 15, 0.06);
  border-radius: 18px;
  transition: transform 360ms var(--ease-spring), box-shadow 300ms ease, border-color 200ms ease;
  box-shadow: 0 1px 0 0 rgba(15,15,15,0.06), 0 2px 6px -2px rgba(60,30,20,0.06), 0 16px 36px -22px rgba(60,30,20,0.28);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(15,15,15,0.12);
  box-shadow: 0 1px 0 0 rgba(15,15,15,0.08), 0 4px 10px -2px rgba(60,30,20,0.08), 0 28px 52px -22px rgba(60,30,20,0.38);
}

/* Form fields — contact page */
.field {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(15,15,15,0.14);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field::placeholder { color: var(--stone-400); }
.field:focus,
.field:focus-visible {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.15);
}
textarea.field { min-height: 140px; resize: vertical; line-height: 1.6; }
select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5l3 3 3-3' stroke='%235E5C55' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* Stat figures — General Sans bold, tabular */
.figure {
  font-family: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

/* Star rating svg helper */
.stars { letter-spacing: 0.08em; color: var(--ember); }

/* Entrance animations — staggered */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise {
  opacity: 0;
  animation: riseIn 720ms var(--ease-outsoft) forwards;
}
.rise-d1 { animation-delay: 80ms; }
.rise-d2 { animation-delay: 180ms; }
.rise-d3 { animation-delay: 280ms; }
.rise-d4 { animation-delay: 380ms; }
.rise-d5 { animation-delay: 480ms; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise { opacity: 1; }
}

/* Prose defaults for long copy */
.prose-body p + p { margin-top: 1.1em; }
.prose-body p { line-height: 1.7; color: var(--stone-600); font-size: 1.0625rem; }
.prose-body strong { color: var(--ink); font-weight: 600; }

/* Hero oversized-figure */
.hero-mono {
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--stone-500);
}

/* Cert band — natural colour, uniformly sized via fixed container */
.cert-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 96px;
}
.cert-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cert-frame--padded img {
  transform: scale(1.62);
  transform-origin: center;
}
@media (min-width: 768px) {
  .cert-frame { width: 92px; height: 112px; }
}
/* Slim strip variant — compact, used on mobile */
.cert-strip .cert-frame { width: 60px; height: 56px; }
.cert-strip .cert-frame img { transform: none; }

/* Focus visible — global */
*:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 404 page */
.page-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.page-404 main { max-width: 52ch; text-align: left; }
.page-404 h1 {
  font-family: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 1.1rem;
}
.page-404 p { color: var(--stone-500); line-height: 1.6; margin-bottom: 1.6rem; }
.page-404 .eyebrow { font-size: 12px; }