/* FLOVIA Consulting site stylesheet.
   Full-width bands, one centred content container, 8px spacing scale, light and dark themes.
   No scripts and no external fonts or services. */

:root {
  color-scheme: light dark;

  /* Colour */
  --bg: #f4f8fb;
  --surface: #ffffff;
  --ink: #0d2238;
  --muted: #475c74;
  --brand: #0b5cad;
  --brand-deep: #083a73;
  --accent: #1596b8;
  --line: #d3e1ee;
  --band: #e6f0f9;
  --btn-ink: #ffffff;
  --hero-1: #06203d;
  --hero-2: #0a3f75;
  --on-hero: #ffffff;
  --on-hero-muted: rgba(255, 255, 255, 0.82);
  --foot: #061a31;

  /* Spacing scale (8px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;

  /* Layout */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1440px;
  --radius: 8px;
  --section: clamp(48px, 7vw, 96px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08131f;
    --surface: #0f2236;
    --ink: #e8f1fa;
    --muted: #9db3ca;
    --brand: #5aaaf2;
    --brand-deep: #8cc4f7;
    --accent: #4cc3e0;
    --line: #1d3652;
    --band: #0d2239;
    --btn-ink: #06182b;
    --hero-1: #04152a;
    --hero-2: #07294d;
    --foot: #040f1d;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s6); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
main { flex: 1; }
img, svg { max-width: 100%; }
a { color: var(--brand); }
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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

.skip {
  position: absolute;
  left: var(--s3);
  top: -100px;
  z-index: 10;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
}
.skip:focus { top: var(--s2); }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s5);
  padding-block: var(--s3);
}
.brand { display: block; color: inherit; text-decoration: none; }
.wordmark {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.wordmark span { font-weight: 500; color: var(--ink); }
.expansion {
  display: none;
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}
@media (min-width: 760px) { .expansion { display: block; } }

nav.main { display: flex; flex-wrap: wrap; gap: 0 var(--s1); margin-inline: calc(-1 * var(--s2)); }
nav.main a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
nav.main a:hover { color: var(--brand); }
nav.main a[aria-current="page"] { border-bottom-color: var(--brand); font-weight: 700; }
nav.main a:focus-visible { outline-offset: -3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-hero);
  background: linear-gradient(135deg, var(--hero-1), var(--hero-2));
  padding-block: var(--s6) calc(var(--s6) + 40px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/contours.svg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 32%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 32%, #000 74%);
}
@media (max-width: 719px) { .hero::before { opacity: 0.55; } }
.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(24px, 4vw, 56px);
  fill: var(--bg);
  pointer-events: none;
}
.hero--home { padding-block: var(--s7) calc(var(--s7) + 48px); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s7) calc(var(--s7) + 40px); }
  .hero--home { padding-block: var(--s8) calc(var(--s8) + 32px); }
}

.crumb { margin: 0 0 var(--s4); font-size: 0.92rem; color: var(--on-hero-muted); }
.crumb a { color: var(--on-hero); text-underline-offset: 3px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-hero);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cc3e0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }

.hero h1 {
  margin: var(--s4) 0 var(--s3);
  max-width: 22ch;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero--home h1 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero .lede {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--on-hero-muted);
  text-wrap: pretty;
}
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px var(--s4);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.btn-primary { background: var(--brand); color: var(--btn-ink); }
.btn-secondary { background: transparent; color: var(--brand); }
.btn:hover { filter: brightness(1.08); }
.hero .btn-primary { background: #ffffff; border-color: #ffffff; color: #08305a; }
.hero .btn-secondary { border-color: rgba(255, 255, 255, 0.65); color: #ffffff; }
.hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); filter: none; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section.band { background: var(--band); }
.section:not(.band) + .section:not(.band) { padding-top: 0; }
.section h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.section p { margin: 0 0 var(--s3); max-width: 62ch; color: var(--muted); }

.split { display: grid; gap: var(--s5); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(240px, 1fr) 2.2fr; gap: var(--s7); }
}

.notice {
  max-width: 72ch;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.notice p { margin: 0; color: var(--ink); }

/* Service list: full-width rows */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-list a {
  display: grid;
  gap: var(--s1) var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.svc-list a:hover { background: var(--surface); }
.svc-list a:hover .svc-name { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.svc-list a:focus-visible { outline-offset: -3px; }
.svc-name { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.svc-desc { color: var(--muted); }
@media (min-width: 720px) {
  .svc-list a { grid-template-columns: minmax(220px, 1fr) 1.5fr; align-items: baseline; padding-inline: var(--s3); }
}

/* Contact facts */
.facts { display: grid; gap: var(--s3); margin: 0 0 var(--s5); }
@media (min-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts div { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.facts dt { font-size: 0.9rem; color: var(--muted); }
.facts dd { margin: var(--s1) 0 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }

/* Call to action band */
.cta { display: grid; gap: var(--s4); align-items: center; }
.cta h2 { margin-bottom: var(--s2); }
.cta p { margin: 0; max-width: 52ch; text-wrap: balance; }
@media (min-width: 800px) { .cta { grid-template-columns: 1fr auto; gap: var(--s7); } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--foot);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  padding-block: var(--s7) var(--s4);
}
.site-footer a { color: #ffffff; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline-color: #4cc3e0; }
.footer-grid { display: grid; gap: var(--s6); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s7); } }
.site-footer .wordmark { color: #ffffff; font-size: 1.15rem; }
.site-footer .wordmark span { color: rgba(255, 255, 255, 0.72); }
.site-footer p { margin: var(--s2) 0 0; }
.site-footer h2 { margin: 0 0 var(--s3); font-size: 1rem; font-weight: 700; color: #ffffff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer-base {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
}
.footer-base p { margin: 0; }