/* Fabrastra: brand tokens from the brand kit (02-brand/fabrastra-brand-kit.md) */
@font-face { font-family: "Sora"; src: url("../fonts/sora-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/sora-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --midnight: #0F1A33;
  --midnight-2: #16233F;
  --gold: #F2A93B;
  --parchment: #F6F2EA;
  --ink: #121826;
  --steel: #5B6B82;
  --nebula: #2D55D6;
  --line: #DDD6C8;
  --on-dark-muted: #B8C0CE;
  --measure: 38rem;
  --wrap: 72rem;
  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--parchment); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--nebula); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--midnight); padding: .6rem 1rem; z-index: 10; font-weight: 600; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

/* ---------- header ---------- */
.site-head { background: var(--midnight); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; }
.site-head .brand img { height: 2.25rem; width: auto; }
.site-nav { display: flex; gap: 1.75rem; }
.site-nav a { color: var(--parchment); text-decoration: none; font-weight: 500; font-size: .975rem; }
.site-nav a:hover { color: var(--gold); }
@media (max-width: 40rem) { .site-nav a:not(.nav-contact) { display: none; } }

/* ---------- hero: the star chart ---------- */
.hero { background: var(--midnight); color: var(--parchment); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7rem); }
.hero h1 { font: 600 clamp(2.3rem, 5.2vw, 4.1rem)/1.08 var(--display); letter-spacing: -0.025em; margin: 0 0 1.5rem; max-width: 15ch; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--on-dark-muted); max-width: 34rem; margin: 0 0 2.25rem; }
.chart { width: 100%; max-width: 30rem; justify-self: end; }
.chart .grid line { stroke: var(--parchment); stroke-opacity: .07; }
.chart .ring { fill: none; stroke: var(--parchment); stroke-opacity: .08; }
.chart .faint { fill: var(--parchment); opacity: .35; }
.chart .edge { stroke: var(--parchment); stroke-width: 1.4; stroke-linecap: round; stroke-opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart .node { fill: var(--parchment); }
.chart .spark { fill: var(--gold); transform-origin: 306px 118px; }
.chart .ember { fill: var(--gold); }


@media (prefers-reduced-motion: no-preference) {
  .chart .edge { stroke-dashoffset: 1; animation: draw .9s cubic-bezier(.6,.1,.3,1) forwards; }
  .chart .edge:nth-of-type(2) { animation-delay: .55s; }
  .chart .edge:nth-of-type(3) { animation-delay: .95s; }
  .chart .edge:nth-of-type(4) { animation-delay: 1.3s; }
  .chart .spark { opacity: 0; transform: scale(.4); animation: ignite .7s 2.05s cubic-bezier(.2,1.4,.4,1) forwards; }
  .chart .ember { opacity: 0; animation: fade .5s 2.5s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ignite { to { opacity: 1; transform: scale(1); } }
@keyframes fade { to { opacity: 1; } }

@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .chart { justify-self: start; max-width: 20rem; order: -1; }

}

/* ---------- buttons ---------- */
.button { display: inline-block; background: var(--gold); color: var(--midnight); font: 600 1rem/1 var(--body); padding: 1rem 1.4rem; border-radius: .35rem; text-decoration: none; }
.button:hover { background: #F7BC5E; text-decoration: none; }
.text-link { color: var(--parchment); margin-left: 1.25rem; font-weight: 500; }

/* ---------- sections ---------- */
.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band + .band { border-top: 1px solid var(--line); }
.band h2 { font: 600 clamp(1.75rem, 3.2vw, 2.4rem)/1.15 var(--display); letter-spacing: -0.015em; margin: 0 0 1rem; max-width: 22ch; }
.lede { color: var(--steel); max-width: var(--measure); margin: 0 0 3rem; font-size: 1.125rem; }

/* What we do: a ruled definition list, not cards */
.offers { margin: 0; display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr); border-top: 2px solid var(--midnight); }
.offers dt, .offers dd { padding-block: 1.75rem; border-bottom: 1px solid var(--line); margin: 0; }
.offers dt { font: 600 1.3rem/1.3 var(--display); color: var(--midnight); padding-right: 2rem; }
.offers dd p { margin: 0 0 .75rem; max-width: var(--measure); }
.offers dd ul { margin: 0; padding-left: 1.1rem; color: var(--steel); }
.offers dd li { margin: .2rem 0; }
@media (max-width: 44rem) {
  .offers { grid-template-columns: 1fr; }
  .offers dt { border-bottom: 0; padding-bottom: .25rem; }
  .offers dd { padding-top: .25rem; }
}

/* How we work: a genuine sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 3.25rem; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; font: 600 1rem/2.25rem var(--display); width: 2.25rem; height: 2.25rem; text-align: center; border-radius: 50%; background: var(--midnight); color: var(--parchment); }
.steps li:last-child::before { background: var(--gold); color: var(--midnight); }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.125rem; left: 3rem; right: -1.5rem; border-top: 1px dashed var(--steel); opacity: .5; }
.steps h3 { font: 600 1.2rem/1.3 var(--display); margin: 0 0 .5rem; color: var(--midnight); }
.steps p { margin: 0; color: var(--steel); }
@media (max-width: 44rem) {
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .steps li:not(:last-child)::after { display: none; }
}

/* Principles: the three words as type */
.principles { background: var(--midnight); color: var(--parchment); }
.principles h2 { color: var(--parchment); }
.principles .lede { color: var(--on-dark-muted); }
.words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.words h3 { font: 600 clamp(2rem, 4vw, 3rem)/1 var(--display); letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--parchment); }
.words div:last-child h3 { color: var(--gold); }
.words p { margin: 0; color: var(--on-dark-muted); max-width: 22rem; }
@media (max-width: 44rem) { .words { grid-template-columns: 1fr; } }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.contact .lede { margin-bottom: 0; }
.contact-actions { justify-self: start; }
.contact-actions p { margin: 1rem 0 0; color: var(--steel); font-size: .95rem; }
@media (max-width: 44rem) { .contact .wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot { background: var(--midnight); color: var(--on-dark-muted); font-size: .9rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-block: 2rem; }
.site-foot a { color: var(--parchment); }
.site-foot p { margin: 0; }

/* ---------- plain pages (privacy, 404) ---------- */
.page { padding-block: clamp(3rem, 7vw, 5rem); }
.page h1 { font: 600 clamp(2rem, 4vw, 2.75rem)/1.15 var(--display); margin: 0 0 1.5rem; color: var(--midnight); }
.page h2 { font: 600 1.25rem/1.3 var(--display); margin: 2.25rem 0 .5rem; color: var(--midnight); }
.page p, .page li { max-width: var(--measure); }
.page .updated { color: var(--steel); }

@media (max-width: 40rem) {
  .text-link { display: table; margin: 1.25rem 0 0; }
}