/* Apex Insurance Brokers — single stylesheet.
   Default palette: paper (cream / near-black / red).
   Theme overrides for ink, forest, oxblood, harbour as body.theme-{id}.
   All colours driven from CSS variables. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('fonts/Montserrat-Variable.woff2') format('woff2-variations'),
       url('fonts/Montserrat-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fraunces-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
       url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

/* ====================================================================
   :root = PAPER palette (canvas default). All other themes are body.theme-*.
   Every component reads from these variables — no hardcoded colours.
   ==================================================================== */
:root {
  --bg:           #F4F4F1;
  --bg-soft:      #ECECE7;
  --paper:        #FAFAF7;
  --ink:          #111216;
  --ink-2:        #4A4A4F;
  --ink-3:        #76767B;
  --rule:         #DCDCD8;
  --rule-soft:    rgba(17, 18, 22, 0.10);
  --accent:       #D92A20;
  --accent-2:     #B21C14;
  --accent-soft:  rgba(217, 42, 32, 0.10);
  --shadow-accent-rgb: 217, 42, 32;
  --footer-bg:    #15161A;
  --footer-ink:   #F4F4F1;
  --footer-ink-2: #C2C2BD;
  --footer-ink-3: #8A8A87;
  --footer-rule:  rgba(244, 244, 241, 0.12);

  --serif:    'Fraunces', Georgia, serif;
  --sans:     'Inter', -apple-system, system-ui, sans-serif;
  --display:  'Montserrat', 'Inter', -apple-system, system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter:   clamp(20px, 3vw, 48px);
  --maxw:     100%;
}

body.theme-ink {
  --bg:           #17140F;
  --bg-soft:      #1F1C17;
  --paper:        #1A1714;
  --ink:          #F1EADB;
  --ink-2:        #C9C0AE;
  --ink-3:        #8A8273;
  --rule:         #2C2823;
  --rule-soft:    rgba(241, 234, 219, 0.14);
  --accent:       #E8A58A;
  --accent-2:     #D17A57;
  --accent-soft:  rgba(232, 165, 138, 0.15);
  --shadow-accent-rgb: 232, 165, 138;
}

body.theme-forest {
  --bg:           #0F1A12;
  --bg-soft:      #182519;
  --paper:        #12190F;
  --ink:          #E8F0E2;
  --ink-2:        #BCCCB0;
  --ink-3:        #7D8C73;
  --rule:         #2A3528;
  --rule-soft:    rgba(232, 240, 226, 0.14);
  --accent:       #6CBE5E;
  --accent-2:     #4D9542;
  --accent-soft:  rgba(108, 190, 94, 0.15);
  --shadow-accent-rgb: 108, 190, 94;
}

body.theme-oxblood {
  --bg:           #1A0F0F;
  --bg-soft:      #261515;
  --paper:        #1F1212;
  --ink:          #F0E6E0;
  --ink-2:        #C9B5AC;
  --ink-3:        #8A7770;
  --rule:         #3A2222;
  --rule-soft:    rgba(240, 230, 224, 0.14);
  --accent:       #C44545;
  --accent-2:     #9C2828;
  --accent-soft:  rgba(196, 69, 69, 0.15);
  --shadow-accent-rgb: 196, 69, 69;
}

body.theme-harbour {
  --bg:           #F2F4F5;
  --bg-soft:      #E2E6EA;
  --paper:        #FAFBFC;
  --ink:          #0F1A22;
  --ink-2:        #3B4A55;
  --ink-3:        #6A7782;
  --rule:         #C8D0D8;
  --rule-soft:    rgba(15, 26, 34, 0.10);
  --accent:       #C2602A;
  --accent-2:     #964915;
  --accent-soft:  rgba(194, 96, 42, 0.10);
  --shadow-accent-rgb: 194, 96, 42;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.display-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.num-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.body-lg { font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.body    { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.small   { font-size: 13px; color: var(--ink-3); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.rule { height: 1px; background: var(--rule); width: 100%; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; padding: 18px 0;
  border-top: 1px solid var(--rule);
  position: relative;
}
.section-head::before {
  content: '';
  position: absolute;
  top: -7px; right: 0;
  width: 34px; height: 14px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2034%2014'%3E%3Ccircle%20cx%3D'5'%20cy%3D'9'%20r%3D'4'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'4.5'%20r%3D'4'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'9'%20r%3D'4'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2034%2014'%3E%3Ccircle%20cx%3D'5'%20cy%3D'9'%20r%3D'4'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'4.5'%20r%3D'4'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'9'%20r%3D'4'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  pointer-events: none;
}
.section-head .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-3); flex-shrink: 0; }
.section-head .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.section-head .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 999px;
  transition: background 200ms ease, transform 200ms ease;
}
.btn:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-accent { background: var(--accent); color: #FFFFFF; }
.btn-accent:hover { background: var(--accent-2); color: #FFFFFF; }
.btn .arrow { display: inline-block; transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field input, .field textarea, .field select {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans); font-size: 15px;
  border-radius: 4px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
}
.field-error { color: var(--accent); font-size: 13px; }
.honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Utility ---------- */
.hide-mobile { }
@media (max-width: 760px) {
  .hide-mobile { display: none !important; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 600ms ease both; }

html { scrollbar-color: var(--ink-3) var(--bg); }