/* ==========================================================================
   MARKETINGFIRE - site.css
   Design system inherited from FIREGROUP HOLDING (paper/ink, hairline grid,
   dark gradient hero, masked type reveals). Extended with navigation,
   editorial content components and forms.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#FAF9F7;
  --ink:#0F1012;
  --ink-soft:#6B6D72;
  --line:#E4E3E0;
  --cobalt:#2A3EFF;
  --coral:#E8461F;
  --teal:#14C7A5;
  --violet:#8B3CFF;
  --night:#050308;
  --header-h:72px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  line-height:1.6;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html{scroll-behavior:auto;}
}
a{color:inherit; text-decoration:none;}
h1, h2, h3, h4, p, li, dd, dt, th, td, figcaption, summary, label{
  overflow-wrap:break-word; word-wrap:break-word;
}
.block h3, .row-title, .lede, h1{ hyphens:auto; -webkit-hyphens:auto; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--cobalt); outline-offset:3px;
}
img{max-width:100%; height:auto;}

main{ overflow-x:hidden; }
@supports (overflow: clip){ main{ overflow-x:clip; } }

.wrap{max-width:1320px; margin:0 auto; padding:0 40px;}
@media (max-width:720px){
  :root{ --header-h:62px; }
  .wrap{padding:0 20px;}
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- hairline vertical grid ---------- */
.grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  max-width:1320px; margin:0 auto; padding:0 40px;
  display:flex;
  --gl: rgba(15,16,18,0.08);
}
.grid-lines span{ flex:1; border-right:1px solid var(--gl); height:100%; }
.grid-lines span:last-child{ border-right:none; }
.grid-lines.on-dark{ --gl: rgba(255,255,255,0.16); }
@media (max-width:720px){ .grid-lines{ display:none; } }

/* ---------- header ---------- */
.site-header{
  position:fixed; position:-webkit-sticky; position:fixed;
  top:0; left:0; right:0; z-index:100;
  height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center;
  color:#fff;
  transition:background 320ms ease, color 320ms ease, border-color 320ms ease;
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  background:var(--paper);
  color:var(--ink);
  border-bottom-color:var(--line);
}
/* Menü offen: Leiste bleibt lesbar über dem dunklen Panel. */
.site-header.nav-open,
.site-header.nav-open.is-solid{
  background:transparent; color:#fff; border-bottom-color:transparent;
}
.header-inner{
  width:100%; max-width:1320px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (max-width:720px){ .header-inner{ padding:0 20px; } }
.wordmark{
  font-weight:700; font-size:19px; letter-spacing:0.01em; white-space:nowrap;
}
.wordmark b{ font-weight:700; }
.nav{ display:flex; align-items:center; font-size:15px; font-weight:600; }
.nav > a + a{ margin-left:30px; }
.nav a{ position:relative; padding:4px 0; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 280ms cubic-bezier(.22,.9,.28,1);
}
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .nav-cta{
  border:1px solid currentColor; border-radius:999px; padding:9px 18px;
  transition:background 260ms ease, color 260ms ease;
}
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:currentColor; }
.nav .nav-cta:hover span{ color:var(--paper); }
.site-header.is-solid .nav .nav-cta:hover span{ color:var(--paper); }
.nav-toggle{
  display:none; background:none; border:0; color:inherit; cursor:pointer;
  font:inherit; font-weight:600; font-size:16px;
  align-items:center; min-height:44px; padding:0 0 0 12px;
}
.nav-toggle .nav-label{ margin-left:10px; }
.nav-toggle .bars{ display:block; width:22px; height:12px; position:relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor;
  transition:transform 280ms cubic-bezier(.22,.9,.28,1), opacity 200ms ease;
}
.nav-toggle .bars::before{ top:0; }
.nav-toggle .bars::after{ bottom:0; }
.nav-toggle[aria-expanded="true"] .bars::before{ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-5px) rotate(-45deg); }
@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0; z-index:110; min-height:100vh; background:var(--night); color:#fff;
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:calc(env(safe-area-inset-top, 0px) + var(--header-h) + 12px) 24px 32px;
    font-size:28px; font-weight:700; overflow-y:auto;
    transform:translateY(-100%); transition:transform 420ms cubic-bezier(.22,.9,.28,1);
  }
  @supports (min-height: 100dvh){ .nav{ min-height:100dvh; } }
  .nav[data-open="true"]{ transform:translateY(0); }
  .nav > a + a{ margin-left:0; }
  .nav a{ padding:10px 0; }
  .nav .nav-cta{ margin-top:16px; font-size:20px; }
  .nav-toggle{ position:relative; z-index:120; }
}

/* ---------- hero (dark, animated gradient artwork) ---------- */
.hero-dark{
  background:var(--night); color:#fff; position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 40px) 0 100px;
}
.hero-dark.hero-sub{ min-height:62vh; padding-bottom:64px; }
.hero-dark .wrap{ position:relative; z-index:2; width:100%; }
.hero-bg{ position:absolute; inset:-10%; z-index:0; animation:hue-cycle 8s linear infinite; }
@keyframes hue-cycle{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
.hero-bg span{
  position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:0.85; filter:blur(6px);
}
.blob-1{ width:60vmax; height:60vmax; left:-10%; top:-10%; background:radial-gradient(circle, #8B3CFF 0%, transparent 70%); animation:drift1 12s ease-in-out infinite; }
.blob-2{ width:55vmax; height:55vmax; right:-12%; top:10%; background:radial-gradient(circle, #FF3CAC 0%, transparent 70%); animation:drift2 14s ease-in-out infinite; }
.blob-3{ width:50vmax; height:50vmax; left:20%; bottom:-18%; background:radial-gradient(circle, #14C7A5 0%, transparent 70%); animation:drift3 16s ease-in-out infinite; }
.blob-4{ width:40vmax; height:40vmax; right:10%; bottom:-10%; background:radial-gradient(circle, #2DE0B0 0%, transparent 70%); animation:drift4 13s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(8%,10%) scale(1.2); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-10%,8%) scale(1.15); } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6%,-8%) scale(1.25); } }
@keyframes drift4{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-8%,-6%) scale(1.18); } }
@media (max-width:720px){
  .blob-1, .blob-2, .blob-3, .blob-4{ width:130vmax; height:130vmax; }
  .hero-dark{ min-height:88vh; padding-bottom:72px; }
  .hero-dark.hero-sub{ min-height:52vh; }
}
.hero-kicker{
  margin:0 0 20px; font-size:14px; font-weight:600; letter-spacing:0.04em;
  color:rgba(255,255,255,0.68); opacity:0; transform:translateY(8px);
}
.js .hero-kicker{ animation:up 600ms cubic-bezier(.22,.9,.28,1) forwards; animation-delay:60ms; }
h1{
  position:relative; z-index:1;
  margin:0; font-weight:700; color:#fff;
  font-size:clamp(32px, 6vw, 76px);
  line-height:1.06; letter-spacing:-0.015em;
}
.hero-sub h1{ font-size:clamp(30px, 4.6vw, 58px); }
h1 .line{ overflow:hidden; display:block; }
h1 .line span{ display:block; white-space:nowrap; transform:translateY(108%) skewY(2deg); }
@media (max-width:720px){ h1 .line span{ white-space:normal; } }
.js h1 .line span{ animation:reveal 850ms cubic-bezier(.22,.9,.28,1) forwards; }
.js h1 .line:nth-child(1) span{ animation-delay:120ms; }
.js h1 .line:nth-child(2) span{ animation-delay:230ms; }
.js h1 .line:nth-child(3) span{ animation-delay:340ms; }
.js h1 .line:nth-child(4) span{ animation-delay:450ms; }
@keyframes reveal{ to{ transform:translateY(0) skewY(0); } }
@keyframes up{ to{ opacity:1; transform:translateY(0); } }
.hero-note{
  margin:28px 0 0; max-width:60ch; font-size:clamp(16px,1.5vw,20px); line-height:1.55;
  color:rgba(255,255,255,0.74); opacity:0; transform:translateY(8px);
}
.js .hero-note{ animation:up 700ms cubic-bezier(.22,.9,.28,1) forwards; animation-delay:520ms; }
html:not(.js) .hero-note{ opacity:1; transform:none; }

/* ---------- reveal utilities ---------- */
.reveal-mask{ overflow:hidden; }
.reveal-mask > *{ display:block; transform:translateY(115%); transition:transform 850ms cubic-bezier(.22,.9,.28,1); }
.reveal-mask.in-view > *{ transform:translateY(0); }
.fade-up{ opacity:0; transform:translateY(14px); transition:opacity 700ms ease, transform 700ms cubic-bezier(.22,.9,.28,1); }
.fade-up.in-view{ opacity:1; transform:translateY(0); }
html:not(.js) .reveal-mask > *{ transform:none; }
html:not(.js) .fade-up{ opacity:1; transform:none; }

/* ---------- generic sections ---------- */
#story{ position:relative; }
.band{ position:relative; padding:88px 0; }
.band-tight{ padding:56px 0; }
.band-dark{ background:var(--night); color:#fff; padding:112px 0; position:relative; overflow:hidden; }
.band-paper{ background:var(--paper-2); }
.band > .wrap{ position:relative; z-index:2; }

/* Two plain bands in a row share one gap. A band with its own background
   keeps full padding on both edges, and so does the band that follows it. */
.band + .band{ padding-top:0; }
.band-paper + .band, .band-dark + .band{ padding-top:88px; }
.band.band-paper, .band.band-dark{ padding-top:112px; padding-bottom:112px; }

@media (max-width:720px){
  .band{ padding:56px 0; }
  .band-dark{ padding:72px 0; }
  .band-paper + .band, .band-dark + .band{ padding-top:56px; }
  .band.band-paper, .band.band-dark{ padding-top:72px; padding-bottom:72px; }
}

.lede{
  max-width:24ch; font-size:clamp(26px, 3.6vw, 44px); font-weight:600;
  line-height:1.18; letter-spacing:-0.01em; margin:0;
}
.lede-wide{ max-width:34ch; }
h2{
  margin:0 0 28px; font-weight:700; letter-spacing:-0.015em; line-height:1.1;
  font-size:clamp(26px, 3.2vw, 40px);
}
h3{
  margin:0 0 12px; font-weight:700; letter-spacing:-0.01em; line-height:1.2;
  font-size:clamp(19px, 1.7vw, 23px);
}
h4{ margin:0 0 8px; font-size:17px; font-weight:700; }
p{ margin:0 0 18px; }
.section-label{
  margin:0 0 40px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:14px; font-weight:600; letter-spacing:0.04em; color:var(--ink-soft);
}
.band-dark .section-label{ border-bottom-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.6); }

/* No stacked hairlines: when a bordered list follows the label directly,
   the label's rule is the only line. */
.section-label + .rows,
.section-label + .steps,
.section-label + .faq{ border-top:0; }
.section-label:has(+ .rows),
.section-label:has(+ .steps),
.section-label:has(+ .faq){ margin-bottom:22px; }
/* For boxed grids the box draws its own edge, so the label drops its rule. */
.section-label.is-flush{ border-bottom:0; padding-bottom:0; margin-bottom:26px; }
.measure{ max-width:70ch; }
.measure-narrow{ max-width:58ch; }
.soft{ color:var(--ink-soft); }
.band-dark .soft{ color:rgba(255,255,255,0.7); }

/* ---------- hairline rows (signature component) ---------- */
.rows{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rows li{ border-bottom:1px solid var(--line); }
.row-link{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:24px;
  padding:26px 0;
  transition:color 320ms cubic-bezier(.22,.9,.28,1);
}
.row-text{ display:block; }
.row-title{
  display:block;
  font-weight:700; letter-spacing:-0.015em; line-height:1.15;
  font-size:clamp(21px, 2.6vw, 34px);
}
.row-desc{
  display:block; margin:14px 0 0; color:var(--ink-soft);
  max-width:58ch; font-size:16px; line-height:1.55;
}
.row-meta{ display:block; font-size:14px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.row-link:hover{ color:var(--cobalt); }
.row-link:hover .row-desc, .row-link:hover .row-meta{ color:var(--cobalt); }
.rows.on-dark{ border-top-color:rgba(255,255,255,0.18); }
.rows.on-dark li{ border-bottom-color:rgba(255,255,255,0.18); }
.rows.on-dark .row-desc, .rows.on-dark .row-meta{ color:rgba(255,255,255,0.66); }
.rows.on-dark .row-link:hover{ color:var(--teal); }
.rows.on-dark .row-link:hover .row-desc, .rows.on-dark .row-link:hover .row-meta{ color:var(--teal); }
@media (max-width:600px){
  .row-link{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- two-column editorial split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
.split-even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .split, .split-even{ grid-template-columns:1fr; gap:32px; } }
.sticky-side{ position:sticky; top:calc(var(--header-h) + 32px); }
@media (max-width:900px){ .sticky-side{ position:static; } }

/* ---------- blocks ---------- */
/* Fixed column counts: auto-fit left empty grey cells at some widths. */
.blocks{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
@media (max-width:1080px){ .blocks{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:680px){ .blocks{ grid-template-columns:minmax(0,1fr); } }
.block{ background:var(--paper); padding:28px; }
.block p:last-child{ margin-bottom:0; }
.block-num{ font-size:14px; font-weight:600; color:var(--cobalt); margin:0 0 10px; }

/* ---------- figure: gradient artwork ---------- */
.visual{ margin:0 0 48px; }
.visual-art{
  position:relative; display:block; width:100%; height:auto;
  background:var(--night); border:1px solid var(--night);
}
.visual figcaption{
  margin:14px 0 0; font-size:15px; line-height:1.55; color:var(--ink-soft);
  max-width:64ch;
}
.band-dark .visual figcaption{ color:rgba(255,255,255,0.66); }

/* ---------- process steps (real sequence) ---------- */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.steps > li{
  counter-increment:step; border-bottom:1px solid var(--line); padding:26px 0;
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; align-items:start;
}
.steps > li::before{
  content:counter(step, decimal-leading-zero);
  font-size:15px; font-weight:600; color:var(--cobalt); padding-top:4px;
}
.steps p{ margin:8px 0 0; color:var(--ink-soft); max-width:64ch; }
@media (max-width:600px){ .steps > li{ grid-template-columns:40px minmax(0,1fr); gap:14px; } }

/* ---------- comparison table ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:16px; min-width:560px; }
caption{ text-align:left; color:var(--ink-soft); font-size:14px; padding-bottom:12px; }
th, td{ text-align:left; vertical-align:top; padding:16px 20px 16px 0; border-bottom:1px solid var(--line); }
thead th{ font-size:14px; font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--ink); }
tbody th{ font-weight:700; width:24%; }
.band-dark th, .band-dark td{ border-bottom-color:rgba(255,255,255,0.18); }
.band-dark thead th{ border-bottom-color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.6); }

/* ---------- lists ---------- */
.ticks{ list-style:none; margin:0 0 18px; padding:0; }
.ticks li{ position:relative; padding:0 0 12px 26px; }
.ticks li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:10px;
  border-left:2px solid var(--cobalt); border-bottom:2px solid var(--cobalt);
  transform:rotate(-45deg);
}
.plain-list{ padding-left:22px; margin:0 0 18px; }
.plain-list li{ padding-bottom:10px; }

/* ---------- code ---------- */
code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.9em; background:var(--paper-2); border:1px solid var(--line);
  padding:2px 5px; word-break:break-word;
}
pre{
  margin:0 0 22px; padding:18px 20px; background:var(--night); color:#fff;
  overflow-x:auto; font-size:14px; line-height:1.65; max-width:100%;
}
pre code{ background:none; border:0; padding:0; color:inherit; font-size:inherit; }
.band-dark code{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }

/* ---------- answer box: kurze, zitierfaehige Antwort ---------- */
.answer{
  border:1px solid var(--ink); padding:26px 28px; margin:0 0 36px; max-width:70ch;
}
.answer h2, .answer h3{
  margin:0 0 12px; font-size:14px; font-weight:600; letter-spacing:0.04em;
  color:var(--ink-soft);
}
.answer p{ font-size:clamp(17px,1.8vw,20px); line-height:1.5; }
.answer p:last-child{ margin-bottom:0; }

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--cobalt); padding:4px 0 4px 24px; margin:32px 0;
  max-width:68ch;
}
.callout p:last-child{ margin-bottom:0; }
.callout-coral{ border-left-color:var(--coral); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-weight:700; font-size:clamp(17px,1.7vw,21px); letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:32px; width:11px; height:11px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); transition:transform 280ms cubic-bezier(.22,.9,.28,1);
}
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq summary:hover{ color:var(--cobalt); }
.faq summary:hover::after{ border-color:var(--cobalt); }
.faq .faq-body{ padding:0 0 24px; max-width:70ch; color:var(--ink-soft); }
.faq .faq-body p:last-child{ margin-bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-weight:700; font-size:16px;
  padding:15px 28px; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:background 260ms ease, color 260ms ease, border-color 260ms ease;
  cursor:pointer;
}
.btn:hover{ background:var(--cobalt); border-color:var(--cobalt); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.band-dark .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.band-dark .btn:hover{ background:var(--teal); border-color:var(--teal); color:var(--night); }
.band-dark .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.band-dark .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.textlink{ font-weight:700; border-bottom:1px solid currentColor; }
.textlink:hover{ color:var(--cobalt); }

/* ---------- prose (articles) ---------- */
.prose{ max-width:72ch; }
.prose h2{ margin:56px 0 18px; font-size:clamp(23px,2.4vw,30px); }
.prose h3{ margin:36px 0 10px; }
.prose ul, .prose ol{ padding-left:22px; margin:0 0 20px; }
.prose li{ padding-bottom:10px; }
.prose > p:first-child{ font-size:clamp(19px,2vw,23px); line-height:1.5; font-weight:500; }
.article-meta{ font-size:14px; color:var(--ink-soft); margin:0 0 8px; }
.breadcrumb{ font-size:14px; color:rgba(255,255,255,0.6); margin:0 0 22px; }
.breadcrumb a:hover{ color:#fff; border-bottom:1px solid currentColor; }

/* ---------- forms ---------- */
.form{ display:grid; gap:22px; max-width:620px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:15px; font-weight:600; }
.field .hint{ font-size:14px; color:var(--ink-soft); }
input, textarea, select{
  font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-bottom:1px solid var(--ink);
  border-radius:0; padding:14px 16px; width:100%;
}
textarea{ min-height:150px; resize:vertical; }
input:focus, textarea:focus, select:focus{ border-color:var(--cobalt); }
.form-status{ font-size:15px; font-weight:600; min-height:22px; }
.form-status[data-state="error"]{ color:var(--coral); }
.form-status[data-state="ok"]{ color:var(--cobalt); }
.checkline{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); }
.checkline input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; }

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

/* ---------- contact facts ---------- */
.facts{ margin:0; }
.facts dt{ font-size:14px; font-weight:600; color:var(--ink-soft); margin-top:22px; }
.facts dd{ margin:4px 0 0; font-size:19px; font-weight:600; }
.facts dd a:hover{ color:var(--cobalt); }

/* ---------- footer ---------- */
footer{ background:var(--night); color:#fff; padding:96px 0 56px; position:relative; overflow:hidden; }
footer .wrap{ position:relative; z-index:2; }
.footer-intro{ font-size:20px; line-height:1.55; color:rgba(255,255,255,0.72); max-width:70ch; margin:0 0 120px; }
.footer-main{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.footer-wordmark{ font-size:32px; font-weight:700; letter-spacing:-0.005em; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; font-size:19px; line-height:1.6; color:rgba(255,255,255,0.72); }
.footer-cols a{ color:#fff; }
.footer-cols a:hover{ color:var(--teal); }
.footer-nav{ display:flex; gap:28px; flex-wrap:wrap; font-size:15px; font-weight:600;
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.6); }
.footer-nav a:hover{ color:#fff; }
@media (max-width:720px){
  .footer-intro{ margin-bottom:64px; font-size:18px; }
  .footer-cols{ gap:28px; font-size:17px; }
}