/* Self-hosted Inter and Inter Tight, latin subset, from Google Fonts (OFL). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/InterTight-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/InterTight-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Clarivus360 design tokens and base. Source of truth: docs/03_design/ART-DIRECTION-v1.md
   Every draft links this file first, then its own styles.css. Do not redefine these; extend them. */

:root {
  /* Official palette (brandbook p20) */
  --c360-navy: #0B183D;
  --c360-blue: #12385C;
  --c360-steel: #7C97B2;
  --c360-teal: #1EA5A6;

  /* Neutrals (defined by the web build) */
  --c360-paper: #F7F9FB;
  --c360-white: #FFFFFF;
  --c360-ink: #0B183D;
  --c360-text: #2E3A4F;
  --c360-muted: #5F6B7E;
  --c360-line: #DCE3EA;
  --c360-teal-ink: #117A7B;
  --c360-steel-tint: #E9EEF4;

  /* The only gradient allowed: a rule or underline */
  --c360-rule-gradient: linear-gradient(90deg, var(--c360-navy), var(--c360-teal));

  /* Type */
  --font-display: "Inter Tight", "Inter", Arial, "Helvetica Neue", sans-serif;
  --font-text: "Inter", Arial, "Helvetica Neue", sans-serif;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* Layout */
  --container: 1200px;
  --gutter: 40px;
  --section-pad: 128px;
  --radius: 12px;
  --radius-hero: 24px;
  --nav-h: 72px;
}

@media (max-width: 1023px) {
  :root { --gutter: 32px; --section-pad: 96px; }
}
@media (max-width: 639px) {
  :root { --gutter: 20px; --section-pad: 72px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c360-paper);
  color: var(--c360-text);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--c360-teal); outline-offset: 3px; border-radius: 4px; }

/* Skip link */
.skip-link { position: absolute; left: var(--s-4); top: -100px; background: var(--c360-navy); color: #fff; padding: var(--s-3) var(--s-4); border-radius: 999px; z-index: 100; }
.skip-link:focus { top: var(--s-4); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 639px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* Surfaces */
.surface-white { background: var(--c360-white); }
.surface-paper { background: var(--c360-paper); }
.surface-navy { background: var(--c360-navy); color: #fff; }
.surface-navy h1, .surface-navy h2, .surface-navy h3 { color: #fff; }
.surface-navy .muted, .surface-navy .small { color: var(--c360-steel); }
.surface-slate { background: var(--c360-blue); color: #fff; }
.surface-slate h2, .surface-slate h3 { color: #fff; }

/* Type roles */
h1, h2, h3, .display-1, .display-2, .h2, .h3 { font-family: var(--font-display); color: var(--c360-ink); text-wrap: balance; }
.display-1 { font-weight: 600; font-size: 72px; line-height: 1.02; letter-spacing: -0.025em; }
.display-2 { font-weight: 500; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.015em; }
.h3 { font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: 22px; line-height: 1.45; }
.body { font-size: 18px; line-height: 1.6; }
.small { font-size: 15px; line-height: 1.5; }
.muted { color: var(--c360-muted); }
.eyebrow { font-family: var(--font-text); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c360-teal-ink); }
.surface-navy .eyebrow, .surface-slate .eyebrow { color: var(--c360-teal); }
.stat { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c360-ink); }
.pullquote { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 40px; line-height: 1.15; letter-spacing: -0.015em; color: var(--c360-ink); }
.measure { max-width: 64ch; }

@media (max-width: 639px) {
  .display-1 { font-size: 42px; }
  .display-2 { font-size: 34px; }
  .h2 { font-size: 30px; }
  .h3 { font-size: 22px; }
  .lead { font-size: 19px; }
  body, .body { font-size: 17px; }
  .stat { font-size: 44px; }
  .pullquote { font-size: 28px; }
  .eyebrow { font-size: 12px; }
}

/* Section head */
.section-head { max-width: 760px; }
.section-head .eyebrow + .h2, .section-head .eyebrow + h2 { margin-top: var(--s-4); }
.section-head .h2 + .lead, .section-head h2 + .lead { margin-top: var(--s-6); }
.section-head + * { margin-top: var(--s-12); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 16px 28px; border-radius: 999px; font-family: var(--font-text); font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; }
.btn-primary { background: var(--c360-teal); color: var(--c360-navy); border-color: var(--c360-teal); }
.btn-primary:hover { background: var(--c360-navy); color: #fff; border-color: var(--c360-navy); }
.btn-secondary { background: transparent; color: var(--c360-navy); border-color: var(--c360-navy); }
.btn-secondary:hover { background: var(--c360-navy); color: #fff; }
.surface-navy .btn-secondary, .surface-slate .btn-secondary { color: #fff; border-color: #fff; }
.surface-navy .btn-secondary:hover, .surface-slate .btn-secondary:hover { background: #fff; color: var(--c360-navy); }
.surface-navy .btn-primary:hover { background: #fff; color: var(--c360-navy); border-color: #fff; }
@media (max-width: 639px) { .btn { width: 100%; } }

/* Text link */
.link { color: var(--c360-navy); text-decoration: underline; text-decoration-color: var(--c360-teal-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 500; }
.link:hover { text-decoration-thickness: 2px; }
.surface-navy .link, .surface-slate .link { color: #fff; text-decoration-color: var(--c360-teal); }

/* Hairlines and the one gradient rule */
.hairline { border: 0; border-top: 1px solid var(--c360-line); margin: 0; }
.rule-gradient { height: 2px; background: var(--c360-rule-gradient); border: 0; }

/* Cards */
.card { background: var(--c360-white); border: 1px solid var(--c360-line); border-radius: var(--radius); padding: var(--s-8); transition: box-shadow 160ms ease; }
.card:hover { box-shadow: 0 1px 2px rgb(11 24 61 / 6%); }
.surface-white .card { background: var(--c360-paper); }
.surface-navy .card { background: var(--c360-blue); border-color: rgb(255 255 255 / 12%); color: #fff; }
.card .h3 + p, .card h3 + p { margin-top: var(--s-3); }

/* Dot marker */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c360-teal); }
.dot-steel { background: var(--c360-steel); }
.dot-navy { background: var(--c360-navy); }

/* Images as windows */
.window { border-radius: var(--radius); overflow: hidden; background: var(--c360-steel-tint); }
.window-hero { border-radius: var(--radius-hero); }
.window img { width: 100%; height: 100%; object-fit: cover; }

/* Headshot */
.headshot { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--c360-steel-tint); }
.headshot img { width: 92.6%; height: 92.6%; border-radius: 50%; }

/* FAQ */
.faq details { border-top: 1px solid var(--c360-line); }
.faq details:last-child { border-bottom: 1px solid var(--c360-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: var(--s-6) 0; font-family: var(--font-text); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--c360-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--c360-navy), var(--c360-navy)) center / 14px 2px no-repeat,
  linear-gradient(var(--c360-navy), var(--c360-navy)) center / 2px 14px no-repeat; transition: transform 160ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 var(--s-6); max-width: 64ch; }
@media (max-width: 639px) { .faq summary { font-size: 18px; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Visually hidden */
.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; }