:root{
  /* Palette taken from the Supvisor logo: the mark's gradient runs
     indigo #1E49CE to cyan #1688C7, the wordmark is #0063BC, and the
     charcoal is #35383B. The cyan end is too light to carry small text,
     so it is reserved for graphics and gradient fills. */
  --bg:#F2F4F9;
  --surface:#FFFFFF;
  --tint:#E6EAF4;
  --ink:#262B30;
  --muted:#56626B;
  --line:#D5DAE6;

  --brand:#0063BC;        /* primary actions, prices, emphasis */
  --brand-deep:#141C33;   /* dark sections */
  --brand-lift:#004E96;   /* hover */
  --brand-soft:#5E7392;   /* quiet labels */

  --accent:#1E49CE;       /* eyebrows and small accent text */
  --accent-vivid:#1688C7; /* logo cyan — brackets and marks only */
  --accent-bg:#E3E9FB;

  --grad:linear-gradient(120deg,#1E49CE 0%,#1073B8 100%);

  --display:'Familjen Grotesk',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;

  --wrap:1120px;
  --r:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.025em;margin:0}
p{margin:0 0 1.05em}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:760px}
section{padding:100px 0}
.tinted{background:var(--tint)}
.dark{background:var(--brand-deep);color:#DEE4F0}
.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:#B9C3D4}
.dark .eyebrow{color:#7FC4F0}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
h2.big{font-size:clamp(30px,4.1vw,46px);max-width:20ch;margin-bottom:18px}
.lede{font-size:19px;color:var(--muted);max-width:62ch;margin-bottom:42px}
.dark .lede{color:#AEBACE}

.btn{
  display:inline-block;font-family:var(--body);font-size:15.5px;font-weight:600;
  text-decoration:none;padding:15px 28px;border-radius:6px;cursor:pointer;
  background:var(--brand);color:#fff;border:1.5px solid var(--brand);
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--brand-lift);border-color:var(--brand-lift)}
.btn-ghost{background:transparent;color:var(--brand)}
.btn-ghost:hover{background:rgba(30,73,206,.07);color:var(--brand)}
.btn-light{background:#fff;color:var(--brand-deep);border-color:#fff}
.btn-light:hover{background:#DEE4F0;border-color:#DEE4F0;color:var(--brand-deep)}
.btn:focus-visible,select:focus-visible,.tab:focus-visible,a:focus-visible,button:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

/* bracket device */
.brk{position:relative}
.brk::before,.brk::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
  border-color:var(--accent-vivid);border-style:solid;
}
.brk::before{top:0;left:0;border-width:2px 0 0 2px}
.brk::after{bottom:0;right:0;border-width:0 2px 2px 0}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(242,244,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:30px;height:70px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;flex:0 1 auto}
.brand img{height:30px;width:auto;display:block}
.brand:focus-visible{outline-offset:5px}
footer .brand img{height:28px}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:15.5px;font-weight:500}
.nav-cta{padding:11px 20px;font-size:14.5px;white-space:nowrap;flex:none}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--brand)}
.burger{display:none;margin-left:auto;flex:none;white-space:nowrap;background:none;border:1.5px solid var(--line);border-radius:6px;padding:9px 12px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);font-family:var(--body)}
.mobile-menu{display:none;border-bottom:1px solid var(--line);background:var(--bg)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 32px;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu .mobile-cta{
  border-bottom:0;background:var(--grad);color:#fff;font-weight:600;
  margin:14px 24px 20px;padding:15px 20px;border-radius:999px;text-align:center;
}

/* hero */
.hero{padding:96px 0 0}
.hero-frame{padding:40px 34px;max-width:880px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(38px,6vw,66px);max-width:17ch;margin:0 auto 22px;letter-spacing:-.035em;line-height:1.04}
.hero p{font-size:20px;color:var(--muted);max-width:50ch;margin-left:auto;margin-right:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;justify-content:center}
.hero-sub{font-size:15.5px;color:var(--muted);margin-top:18px}

/* proof strip */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fact{background:var(--surface);padding:24px 24px}
.fact b{display:block;font-family:var(--display);font-size:23px;font-weight:600;margin-bottom:3px}
.fact span{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}

/* scenarios */

/* checker */
.scan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px}
.scan-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.field label{display:block;font-size:14.5px;font-weight:600;margin-bottom:8px}
.field select{
  width:100%;font-family:var(--body);font-size:16px;padding:14px;
  border:1.5px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);
}
.scan-out{margin-top:30px;padding:28px 26px 26px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.scan-out[hidden]{display:none}
.tag{display:inline-block;font-size:13px;font-weight:600;padding:6px 13px;border-radius:5px;background:var(--accent-bg);color:#143C8C;margin-bottom:18px}
.tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.tab{font-family:var(--body);font-size:15px;font-weight:600;padding:10px 18px;border-radius:6px;border:1.5px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pane[hidden]{display:none}
.pane h4{font-size:20px;margin-bottom:11px}
.pane p{font-size:16.5px;color:var(--muted)}
.pane ul{padding-left:19px;color:var(--muted);font-size:16px;margin:0 0 16px}
.pane li{margin-bottom:5px}
.small{font-size:14.5px;color:var(--muted);line-height:1.6}
.scan-next{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* timeline */
.tl{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
.tl-row{display:grid;grid-template-columns:180px 1fr auto;gap:24px;padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.12);align-items:center}
.tl-row:last-child{border-bottom:none}
.tl-row.now{background:rgba(255,255,255,.05)}
.tl-date{font-weight:600;font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.tl-what{font-size:16px;color:#B9C3D4}
.pill{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:5px;white-space:nowrap}
.pill-now{background:#6FBEF2;color:#06203A}
.pill-soon{background:rgba(111,190,242,.20);color:#B9D3EE}
.pill-later{background:rgba(255,255,255,.09);color:#9AAAC4}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.svc-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;display:flex;flex-direction:column}
.svc-col.lead{border-color:var(--brand);border-width:1.5px}
.svc-tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:14px}
.svc-col h3{font-size:22px;margin-bottom:10px}
.svc-col>p{font-size:16px;color:var(--muted)}
.svc-col ul{margin:0 0 22px;padding-left:19px;color:var(--muted);font-size:15.5px}
.svc-col li{margin-bottom:6px}
.svc-price{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:18px;font-weight:600;color:var(--brand);font-family:var(--display)}
.svc-price em{display:block;font-style:normal;font-weight:400;font-size:14.5px;color:var(--muted);margin-top:4px;font-family:var(--body)}

.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px}
.week{background:var(--surface);padding:22px 20px}
.week .n{color:var(--accent);font-weight:600;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;display:block;margin-bottom:9px}
.week h4{font-size:17px;margin-bottom:6px}
.week p{font-size:15px;color:var(--muted);margin:0}
.svc-note{font-size:15px;color:var(--muted);margin-top:20px}

/* before after */
.ba{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ba-head{display:grid;grid-template-columns:1fr 1fr;background:var(--tint);border-bottom:1px solid var(--line)}
.ba-head div{padding:15px 26px;font-family:var(--display);font-weight:600;font-size:15px}
.ba-head div:first-child{color:var(--muted);border-right:1px solid var(--line)}
.ba-head div:last-child{color:var(--brand)}
.ba-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.ba-row:last-child{border-bottom:none}
.ba-row div{padding:19px 26px;font-size:16.5px}
.ba-row div:first-child{color:var(--muted);border-right:1px solid var(--line)}

/* split */
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.split-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.split-col.ours{border-color:var(--brand);border-width:1.5px}
.split-col .who{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:12px}
.split-col h4{font-size:17.5px;margin-bottom:12px}
.split-col ul{margin:0;padding-left:18px;color:var(--muted);font-size:15.5px}
.split-col li{margin-bottom:6px}

/* practice */
.prac{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.pull{font-family:var(--display);font-size:clamp(23px,3vw,30px);line-height:1.28;font-weight:600;color:var(--brand);margin:28px 0;padding-left:22px;border-left:3px solid var(--accent)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:22px 0;font-family:var(--display);font-weight:600;font-size:19px;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--accent);font-weight:500;flex:none}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 24px;font-size:16.5px;color:var(--muted);max-width:72ch}
.faq .a p:last-child{margin-bottom:0}

/* contact */
.cta-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.cta-in h2{font-size:clamp(31px,4.2vw,48px);max-width:16ch;margin-bottom:18px}
.cta-in>div>p{font-size:18.5px}
.partner-note{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.partner-note h4{font-size:18px;margin-bottom:8px}
.partner-note p{font-size:16px}

.fwd{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:26px 24px}
.fwd h4{font-size:17.5px;margin-bottom:7px}
.fwd>p{font-size:15px}
.fwd-box{background:rgba(0,0,0,.22);border-radius:6px;padding:18px;font-size:14.5px;line-height:1.7;color:#C2CDE0;white-space:pre-wrap;max-height:220px;overflow-y:auto}
.fwd-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.copied{font-size:14px;color:#7FC4F0;font-weight:600;opacity:0;transition:opacity .3s}
.copied.on{opacity:1}

/* footer */
footer{background:var(--tint);padding:52px 0 40px;font-size:15.5px;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot-col h5{font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink);margin:0 0 12px}
.foot-col a{display:block;text-decoration:none;margin-bottom:8px}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:14px}
.ph{color:var(--accent)}

.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------------
 * Imagery
 * Every <img> carries data-fallback; main.js swaps in the local SVG
 * artwork if the photograph fails to load, so no slot can break.
 * ------------------------------------------------------------- */

.figure-band{
  margin:0 0 34px;position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:21/9;background:var(--tint);
}
.figure-band img{width:100%;height:100%;object-fit:cover;display:block}
.figure-band figcaption{
  position:absolute;left:0;bottom:0;max-width:80%;
  background:rgba(20,28,51,.88);color:#DEE4F0;
  font-size:14.5px;padding:11px 18px;border-radius:0 var(--r) 0 0;
}

.prac-media{
  margin:0 0 26px;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:var(--tint);
}
.prac-media img{width:100%;height:100%;object-fit:cover;display:block}

.has-photo{position:relative;overflow:hidden}
.has-photo .bgphoto{position:absolute;inset:0;z-index:0}
.has-photo .bgphoto img{width:100%;height:100%;object-fit:cover;opacity:.30;filter:grayscale(.35)}
.has-photo .bgphoto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,51,.97) 30%,rgba(20,28,51,.72) 100%);
}
.has-photo>.wrap{position:relative;z-index:1}

@media(max-width:940px){
  .figure-band{aspect-ratio:16/9}
}
@media(max-width:660px){
  .figure-band figcaption{position:static;max-width:none;border-radius:0}
  .figure-band{aspect-ratio:auto}
  .figure-band img{aspect-ratio:16/10}
}

@media(max-width:940px){
  .svc,.split,.prac{grid-template-columns:1fr}
  .facts-in,.weeks,  .scan-fields,.cta-in{grid-template-columns:1fr}
  .cta-in{gap:38px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:block}
  .nav-in{gap:16px;height:64px}
  .tl-row{grid-template-columns:1fr;gap:7px}
  .foot-top{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
  .hero-frame{padding:26px 0 26px 24px}
}
@media(max-width:660px){
  .brand img{height:26px}
  .burger{padding:8px 11px;font-size:14.5px}
  .ba-head,.ba-row{grid-template-columns:1fr}
  .ba-head div:first-child,.ba-row div:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .wrap{padding:0 22px}
  .hero{padding:60px 0 52px}
  .scan{padding:26px 22px}
  .foot-top{grid-template-columns:1fr}
  body{font-size:16.5px}
  .brk::before,.brk::after{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------
 * Skip link — visible only when focused by keyboard
 * ------------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:12px 20px;
  border-radius:0 0 6px 0;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------
 * Legal pages (imprint, privacy) and 404
 * ------------------------------------------------------------- */
.doc{padding:64px 0 96px}
.doc h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:14px}
.doc .updated{font-size:14.5px;color:var(--muted);margin-bottom:40px}
.doc h2{font-size:23px;margin:40px 0 12px}
.doc h3{font-size:18px;margin:26px 0 8px}
.doc p,.doc li{font-size:16.5px;color:var(--muted)}
.doc ul{padding-left:20px;margin:0 0 1.05em}
.doc li{margin-bottom:6px}
.doc a{color:var(--brand)}
.doc .box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:0 0 32px;
}
.doc .box p:last-child{margin-bottom:0}
.doc dl{margin:0}
.doc dt{font-weight:600;color:var(--ink);margin-top:14px}
.doc dd{margin:2px 0 0;color:var(--muted)}
.doc .back{display:inline-block;margin-top:44px;font-weight:600;text-decoration:none;color:var(--brand)}

.error-page{padding:120px 0;text-align:center}
.error-page .code{font-family:var(--display);font-size:76px;font-weight:600;color:var(--brand);letter-spacing:-.04em;line-height:1}
.error-page h1{font-size:clamp(26px,3.4vw,36px);margin:14px 0 12px}
.error-page p{color:var(--muted);max-width:48ch;margin:0 auto 30px}

/* recognition list — folded in from the old scenarios section */
.recog{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;max-width:64ch}
.recog li{
  position:relative;padding-left:30px;font-size:17.5px;color:var(--ink);
}
.recog li::before{
  content:"";position:absolute;left:0;top:11px;width:14px;height:2px;
  background:var(--accent-vivid);
}

/* hero: one action, the second offered as a plain link */
.btn-lg{padding:16px 30px;font-size:17px}
.hero-sub a{color:var(--brand);font-weight:600}

/* founding-client offer — sits under the service ladder */
.founding{
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;
  margin-top:34px;padding:32px 34px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  border-left:3px solid var(--accent-vivid);
  box-shadow:0 1px 2px rgba(38,43,48,.04),0 18px 40px -28px rgba(38,43,48,.4);
}
.founding-tag{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);background:var(--accent-bg);border-radius:999px;padding:9px 15px;
  display:inline-block;line-height:1.3;
}
.founding-body h3{font-size:24px;margin-bottom:12px}
.founding-body p{font-size:16.5px;color:var(--muted);margin-bottom:14px;max-width:62ch}
.founding-body .btn{margin-top:8px}
@media(max-width:820px){
  .founding{grid-template-columns:1fr;gap:18px;padding:26px 22px}
}

/* full-bleed photograph directly under the centred hero */
.hero-band{
  margin:64px 0 0;position:relative;overflow:hidden;
  aspect-ratio:16/4.4;background:var(--brand-deep);
}
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hero-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(38,43,48,.10),inset 0 -1px 0 rgba(38,43,48,.10);
}
@media(max-width:940px){
  .hero{padding-top:64px}
  .hero-frame{padding:32px 20px}
  .hero-band{margin-top:44px;aspect-ratio:16/6}
}