/* Kvantlys - "Light Scale" brand system, "Project" register.
   Tokens are edited here and nowhere else. Never introduce a new colour:
   every colour has to encode something. */

/* Fonts. Files go in /fonts. Until they are there the stack falls back to system fonts. */
@font-face{
  font-family:"JBM";
  src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"JBM";
  src:url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight:500; font-display:swap;
}

:root{
  /* The palette is a scale of light intensity, not a set of nice colours */
  --graphite:#12161A;
  --violet:#2E2A5A;   /* zero on the scale, deficit */
  --petrol:#0E5C63;   /* main accent, working minimum */
  --amber:#F2A100;    /* light itself, hot end of the scale */
  --paper:#F2F4F5;    /* cold paper, never cream */
  --moss:#5C7A5A;
  --ink-blekk:#16233A;
  --tint:#D7E4E5;

  /* Roles, light theme */
  --bg:#F2F4F5;
  --panel:#FBFCFC;
  --ink:#16233A;
  --ink-soft:#5A686E;
  --ink-faint:#8A979C;
  --rule:rgba(14,92,99,.20);
  --rule-soft:rgba(14,92,99,.10);
  --accent:#0E5C63;
  --hot:#C87F00;

  --max:920px;
  --mono:"JBM",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12161A; --panel:#171C21;
    --ink:#E9EDEF; --ink-soft:#9BA9AF; --ink-faint:#6B787E;
    --rule:rgba(233,237,239,.16); --rule-soft:rgba(233,237,239,.08);
    --accent:#4CA6AE; --hot:#F2A100;
  }
}
:root[data-theme="dark"]{
  --bg:#12161A; --panel:#171C21;
  --ink:#E9EDEF; --ink-soft:#9BA9AF; --ink-faint:#6B787E;
  --rule:rgba(233,237,239,.16); --rule-soft:rgba(233,237,239,.08);
  --accent:#4CA6AE; --hot:#F2A100;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Square corners, no radii. One pixel borders. */
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* Labels: uppercase, letterspaced, monospace */
.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* Numbers are always tabular, unit separated by a space */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

/* Amber rule: exactly one bright accent per carrier */
.amberline{height:3px;width:56px;background:var(--amber);border:0;margin:0}

header.site{padding:40px 0 0}
/* Wordmark left, language switch right, on one line */
.head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.wordmark{
  font-family:var(--sans);
  font-size:26px;
  font-weight:600;
  letter-spacing:.01em;
  margin:0;
}
/* "lys" set in amber: the word for light is coloured by light itself.
   A deliberate exception to the one-amber-accent-per-carrier rule. */
.wordmark .lys{color:var(--amber);font-style:normal}
.byline{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:6px 0 0;
}

/* Navigation. Hidden on the front page, switched on once the inner pages exist. */
nav.main{margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--rule-soft)}
nav.main ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;list-style:none}
nav.main a{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
nav.main a:hover{color:var(--accent);border-bottom-color:var(--accent)}
nav.main a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--amber)}

.todo{
  border:1px dashed var(--rule);
  padding:14px 16px;
  margin:16px 0 0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-faint);
}

.hero{padding:48px 0 8px}
.hero h1{
  font-size:clamp(28px,5vw,42px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:18px 0 0;
  max-width:16ch;
}
.promise{
  font-size:clamp(17px,2.4vw,20px);
  color:var(--ink-soft);
  margin:14px 0 0;
  max-width:44ch;
}

section{padding:40px 0}
section h2{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.005em;
  margin:14px 0 0;
}
p{margin:14px 0 0;max-width:62ch}
.lead{font-size:17px}
.soft{color:var(--ink-soft)}
.faint{color:var(--ink-faint);font-size:13.5px}

.quote{
  border-left:2px solid var(--accent);
  padding:2px 0 2px 18px;
  margin:22px 0 0;
  max-width:56ch;
  color:var(--ink-soft);
  font-size:16.5px;
}

/* Service table: three columns, service / when / what you get.
   Square corners, one pixel borders, collapses into cards on narrow screens. */
.svc{margin:24px 0 0}
.svc-head,.svc-row{
  display:grid;
  grid-template-columns:1.45fr 1fr 1fr;
  gap:0 30px;
}
.svc-head{
  padding:0 0 9px;
  border-bottom:1px solid var(--rule);
}
.svc-head span{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.svc-row{
  padding:17px 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:start;
}
.svc-row .t b{
  display:block;
  font-weight:600;
  font-size:16px;
  line-height:1.35;
}
.svc-row .t i{
  display:block;
  font-style:normal;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-faint);
  margin-top:5px;
}
.svc-row .w{font-size:14.5px;line-height:1.5;color:var(--accent)}
.svc-row .g{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

@media (max-width:720px){
  .svc-head{display:none}
  .svc-row{grid-template-columns:1fr;gap:10px 0;padding:18px 0}
  .svc-row .w::before,.svc-row .g::before{
    display:block;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:3px;
  }
  .svc-row .w::before{content:"Når"}
  .svc-row .g::before{content:"Du får"}
}

/* Plain list: one row per item, no bullets, no rounding */
.list{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-soft)}
.list li{
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--rule-soft);
}
.list .no{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-faint);
  min-width:2.5em;
}
.list .nm{font-weight:500;flex:1 1 16ch}
.list .dsc{color:var(--ink-soft);font-size:14.5px;flex:1 1 24ch}
/* Trigger line, "when you need this": recognition, not a description of the service */
.list .trg{
  flex:0 0 100%;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:var(--accent);
  margin-top:7px;
  padding-left:calc(2.5em + 16px);
}
@media (max-width:560px){.list .trg{padding-left:0}}

/* Panel for "not available yet" blocks */
.panel{
  background:var(--panel);
  border:1px solid var(--rule-soft);
  padding:22px;
  margin:20px 0 0;
}

/* Scale bar: the central image of the brand system */
.scale{margin:26px 0 0}
.scalebar{
  height:12px;
  background:linear-gradient(90deg,#2E2A5A 0%,#0E5C63 34%,#F2A100 72%,#F2F4F5 100%);
  border:1px solid var(--rule-soft);
}
.scaleticks{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-faint);
}

/* CTA and inquiry form.
   The form posts to a Pages Function at /api/henvendelse, which forwards it as
   email. No inquiry list is stored anywhere. */
.cta{
  display:inline-block;
  margin:22px 0 0;
  padding:13px 26px;
  background:var(--accent);
  color:var(--paper);
  border:1px solid var(--accent);
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
}
.cta:hover{background:transparent;color:var(--accent)}
.cta:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cta-lg{padding:15px 30px;font-size:16px}
/* Heading and button on one line, equal columns.
   The button sits at the start of the right column, near the middle of the line,
   rather than flying off to the right edge. */
.hero-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:22px 32px;
  align-items:center;
  margin-top:18px;
}
.hero-row h1{margin:0}
.hero-cta{justify-self:start}
@media (max-width:760px){
  .hero-row{grid-template-columns:1fr;gap:20px}
}

/* Language switch: plain letters, no chips, no frames */
.lang{display:flex;align-items:baseline;gap:0}
.lang button{
  background:none;
  border:0;
  padding:2px 0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--ink-faint);
}
.lang button:hover{color:var(--accent)}
.lang button[aria-pressed="true"]{color:var(--accent);font-weight:500}
.lang button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.lang .sep{
  padding:0 9px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--rule);
  user-select:none;
}

/* Bilingual: both versions live in the markup, the unused one is hidden by CSS.
   Without JavaScript the page stays Norwegian and fully readable. */
t-no,t-en{display:inline}
html[data-lang="en"] t-no{display:none}
html[data-lang="nb"] t-en{display:none}
html:not([data-lang]) t-en{display:none}

dialog.req{
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  padding:0;
  border:1px solid var(--rule);
  background:var(--panel);
  color:var(--ink);
  overflow:auto;
}
dialog.req::backdrop{background:rgba(18,22,26,.62)}
.req-in{padding:26px}
.req-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.req-top h2{margin:0;font-size:20px;font-weight:600}
.req-x{
  background:none;border:0;padding:6px 10px;margin-right:2px;cursor:pointer;
  font-family:var(--mono);font-size:16px;line-height:1;color:var(--ink-faint);
}
.req-x:hover{color:var(--accent)}
.req-note{margin:10px 0 0;font-size:14px;color:var(--ink-soft);max-width:none}

.f{margin:18px 0 0}
.f label{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.f input,.f select,.f textarea{
  width:100%;
  padding:11px 12px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
}
.f textarea{min-height:110px;resize:vertical}
/* Drop the native select arrow and draw our own, inset from the edge.
   A data URI cannot read a CSS variable, hence a separate icon for the dark theme. */
.f select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235A686E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:11px 7px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .f select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239BA9AF' stroke-width='1.5'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239BA9AF' stroke-width='1.5'/%3E%3C/svg%3E");
}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--accent)}
.f .hint{margin:6px 0 0;font-size:12.5px;color:var(--ink-faint)}
.f .err{margin:6px 0 0;font-size:12.5px;color:var(--hot);display:none}
.f.bad input,.f.bad textarea{border-color:var(--hot)}
.f.bad .err{display:block}
/* Honeypot: invisible to people, filled in by scripts */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.req-send{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.req-fallback{font-size:13.5px;color:var(--ink-soft)}
.req-fallback a{color:var(--accent)}
.req-msg{margin:14px 0 0;font-size:14px;line-height:1.5;max-width:none;min-height:1px}
.req-msg.ok{color:var(--accent);font-weight:600}
.req-msg.bad{color:var(--hot)}
.req-legal{
  margin:24px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule-soft);
  font-size:12px;
  line-height:1.7;
  color:var(--ink-faint);
}
.req-legal p{margin:0 0 9px;max-width:none;font-size:12px}
.req-legal p:last-child{margin-bottom:0}
.req-legal a{color:var(--ink-soft)}

footer.site{padding:44px 0 56px;border-top:1px solid var(--rule);margin-top:20px}
.contact{display:flex;flex-wrap:wrap;gap:10px 34px;margin:18px 0 0}
.contact a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact a:hover{border-bottom-color:var(--accent)}
.legal{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--ink-faint);
  margin:26px 0 0;
  line-height:1.75;
  max-width:70ch;
}
.legal .num{font-size:11.5px}

@media (max-width:560px){
  .wrap{padding:0 18px}
  header.site{padding-top:28px}
  .hero{padding:32px 0 4px}
  section{padding:30px 0}
}