/* ===========================================================================
   Diva Creative, Base
   Reset, typography, layout primitives, accessibility, print.
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
/* Grid + flex children that contain text need min-width:0 to wrap, otherwise
   a long word can force the column wider than the row. This is the most
   common cause of "text popping out of containers". */
.cs-section--split > *,
.cs-results__stats > *,
.lp-cs-grid > *,
.stat-row > *,
.values-grid > *,
.svc-block > *,
.case-grid > *,
.service-grid > *,
.approach > *,
.lp-cs__metrics > *,
.story-columns > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p { overflow-wrap: break-word; hyphens: none; -webkit-hyphens: none; }
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  text-wrap: balance;
}

/* Big-display elements should never hyphenate or break mid-word. */
.stat__num,
.approach__num,
.lp-cs__metric strong,
.cs-pull,
.service-card__num,
.svc-block__num,
.fvs-card__mark,
.manifesto__lead,
.hero__title,
.cs-hero h1,
.cta-banner h2 {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
button { cursor: pointer; border: 0; background: none; padding: 0; }

a {
  color: var(--text-accent);
  text-decoration-color: rgba(8, 101, 115, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--diva-teal);
  color: var(--diva-cream);
}

/* --- Typography --------------------------------------------------------- */
/* The brand sets everything in Jost. Big display copy uses weight 700-800
   with very tight tracking; smaller heads use 700. */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
h1, .h1 { font-weight: 800; }
h2, .h2 { font-weight: 700; }

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-tighter); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 42ch;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  display: inline-block;
}

.eyebrow--on-dark  { color: var(--diva-peach); }
.eyebrow--on-teal  { color: var(--diva-peach); }

p { max-width: 65ch; line-height: var(--lh-body); }
.muted { color: var(--text-muted); }

ul, ol { padding-left: 1.2em; }
ul li, ol li { margin-bottom: var(--space-2); }

/* --- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.container--wide   { max-width: var(--content-wide); }
.container--reading{ max-width: var(--reading-max); }

.section {
  padding-block: var(--section-pad);
}
.section--tight { padding-block: clamp(40px, 6vw, 80px); }

.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-7); }

.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --- Backgrounds -------------------------------------------------------- */
.bg-cream     { background: var(--diva-cream);    color: var(--text-primary); }
.bg-paper     { background: var(--diva-paper);    color: var(--text-primary); }
.bg-dark      { background: var(--diva-charcoal); color: var(--text-on-dark-soft); }
.bg-teal      { background: var(--diva-teal-deep); color: var(--text-on-teal); }
.bg-teal-deep { background: var(--diva-teal-deep);color: var(--text-on-teal); }
.bg-peach     { background: var(--diva-peach-soft); color: var(--text-primary); }

.bg-dark  h1, .bg-dark  h2, .bg-dark  h3, .bg-dark  h4,
.bg-teal  h1, .bg-teal  h2, .bg-teal  h3, .bg-teal  h4,
.bg-teal-deep h1, .bg-teal-deep h2, .bg-teal-deep h3, .bg-teal-deep h4 {
  color: var(--diva-peach);
}
.bg-dark  p, .bg-teal p, .bg-teal-deep p { color: inherit; max-width: 60ch; }
.bg-dark  a:not(.btn), .bg-teal a:not(.btn), .bg-teal-deep a:not(.btn) {
  color: var(--diva-peach);
}
.bg-dark  :focus-visible, .bg-teal :focus-visible, .bg-teal-deep :focus-visible {
  box-shadow: var(--focus-ring-on-dark);
}
.bg-dark  hr, .bg-teal hr, .bg-teal-deep hr { border-color: var(--border-on-dark); }

/* --- Skip link & screen reader ------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  background: var(--diva-charcoal);
  color: var(--diva-peach);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease-out-quart);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-3); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .btn, form { display: none; }
  body { background: white; color: black; }
}