/* ==========================================================================
   HandyWeb · Blåkopi
   Tokens og komponenter. Én kilde til sannhet for nettside, landingssider,
   tilbud og alt annet som bygges i Blåkopi-retningen.

   Bruk:  <link rel="stylesheet" href="Brand/blaakopi.css">
   Guide: Brand/HandyWeb-Blaakopi.html   Annonser: meta ads/Blaakopi-kampanje/
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");

:root{
  /* ---- Farger ---- */
  --bk-natt:#0b2340;        /* hovedflate, tekst på lys bunn */
  --bk-dyp:#123d6b;         /* kort og felt på mørk bunn */
  --bk-blekk:#1f5fa8;       /* strek og lenker på lys bunn. 5,7:1 på papir */
  --bk-linje:#9fc2ea;       /* hjelpestrek, etiketter. 8,6:1 på natt */
  --bk-papir:#eef2f7;       /* lys sideflate */
  --bk-hvit:#ffffff;
  --bk-sig:#ff7a1a;         /* signal. Flate og tekst på mørk bunn (6,1:1) */
  --bk-sig-tekst:#b0480a;   /* signal som TEKST på lys bunn (4,95:1 på papir) */
  --bk-skygge:#06162b;      /* hard skygge, ingen blur */
  --bk-ok:#1c7c4a;
  --bk-feil:#b3321f;

  /* ---- Tekstfarger ---- */
  --bk-tekst:#0b2340;
  --bk-tekst-dempet:#4b6380;   /* 5,5:1 på papir */
  --bk-tekst-lys:#c9dcf2;      /* 11,3:1 på natt */

  /* ---- Fonter ---- */
  --bk-font-head:"Space Grotesk",system-ui,sans-serif;
  --bk-font-body:"IBM Plex Sans",system-ui,sans-serif;
  --bk-font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* ---- Typeskala ---- */
  --bk-display:clamp(44px,6.4vw,86px);
  --bk-h1:clamp(36px,5vw,64px);
  --bk-h2:clamp(30px,3.6vw,46px);
  --bk-h3:clamp(22px,2.2vw,28px);
  --bk-h4:20px;
  --bk-ingress:clamp(18px,1.6vw,21px);
  --bk-brod:17px;
  --bk-liten:15px;
  --bk-etikett:12px;            /* mono, versaler, +.12em */
  --bk-tett:-.045em;            /* sporing på overskrifter */
  --bk-luft-head:1.02;
  --bk-luft-brod:1.6;

  /* ---- Avstand (8-punkt) ---- */
  --bk-4:4px;  --bk-8:8px;   --bk-12:12px; --bk-16:16px; --bk-24:24px;
  --bk-32:32px; --bk-48:48px; --bk-64:64px; --bk-96:96px; --bk-128:128px;
  --bk-seksjon:clamp(64px,8vw,112px);
  --bk-container:1180px;

  /* ---- Form ---- */
  --bk-radius-sm:4px;
  --bk-radius:10px;
  --bk-radius-lg:16px;
  --bk-radius-pill:999px;
  --bk-strek:1.5px;          /* hjelpestrek */
  --bk-strek-tykk:2.5px;     /* ramme rundt komponenter */
  --bk-hard:8px 8px 0 var(--bk-skygge);        /* hard skygge på mørk bunn */
  --bk-hard-lys:8px 8px 0 var(--bk-linje);     /* hard skygge på lys bunn */

  /* ---- Rutenett ---- */
  --bk-rute:80px;
  --bk-rute-liten:16px;

  /* ---- Bevegelse ---- */
  --bk-rask:160ms;
  --bk-normal:240ms;
  --bk-rolig:420ms;
  --bk-kurve:cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   Flater
   ========================================================================== */
.bk-rutenett{
  background-color:var(--bk-natt);
  background-image:
    linear-gradient(rgba(159,194,234,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,194,234,.13) 1px,transparent 1px),
    linear-gradient(rgba(159,194,234,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,194,234,.055) 1px,transparent 1px);
  background-size:var(--bk-rute) var(--bk-rute),var(--bk-rute) var(--bk-rute),
                  var(--bk-rute-liten) var(--bk-rute-liten),var(--bk-rute-liten) var(--bk-rute-liten);
  color:var(--bk-hvit);
}
.bk-rutenett-lys{
  background-color:var(--bk-papir);
  background-image:
    linear-gradient(rgba(31,95,168,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,95,168,.10) 1px,transparent 1px),
    linear-gradient(rgba(31,95,168,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,95,168,.04) 1px,transparent 1px);
  background-size:var(--bk-rute) var(--bk-rute),var(--bk-rute) var(--bk-rute),
                  var(--bk-rute-liten) var(--bk-rute-liten),var(--bk-rute-liten) var(--bk-rute-liten);
  color:var(--bk-tekst);
}
.bk-papir{background:var(--bk-papir);color:var(--bk-tekst)}
.bk-hvitflate{background:var(--bk-hvit);color:var(--bk-tekst)}

/* ==========================================================================
   Typografi
   ========================================================================== */
.bk-body{font-family:var(--bk-font-body);font-size:var(--bk-brod);line-height:var(--bk-luft-brod);-webkit-font-smoothing:antialiased}
.bk-display,.bk-h1,.bk-h2,.bk-h3{font-family:var(--bk-font-head);font-weight:700;letter-spacing:var(--bk-tett);line-height:var(--bk-luft-head);margin:0}
.bk-display{font-size:var(--bk-display)}
.bk-h1{font-size:var(--bk-h1)}
.bk-h2{font-size:var(--bk-h2)}
.bk-h3{font-size:var(--bk-h3);letter-spacing:-.03em;line-height:1.15}
.bk-h4{font:700 var(--bk-h4)/1.25 var(--bk-font-head);letter-spacing:-.02em;margin:0}
/* Ett oransje fokus per flate. Bruk <em> i overskriften. */
.bk-display em,.bk-h1 em,.bk-h2 em,.bk-h3 em{font-style:normal;color:var(--bk-sig)}
.bk-rutenett-lys .bk-display em,.bk-rutenett-lys .bk-h1 em,.bk-rutenett-lys .bk-h2 em,
.bk-papir .bk-display em,.bk-papir .bk-h1 em,.bk-papir .bk-h2 em,
.bk-hvitflate .bk-h2 em,.bk-hvitflate .bk-h3 em{color:var(--bk-sig-tekst)}
.bk-ingress{font-size:var(--bk-ingress);line-height:1.5;color:var(--bk-tekst-dempet);margin:0}
.bk-rutenett .bk-ingress{color:var(--bk-tekst-lys)}
.bk-etikett{font:500 var(--bk-etikett)/1 var(--bk-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bk-blekk);display:inline-flex;align-items:center;gap:12px}
.bk-rutenett .bk-etikett{color:var(--bk-linje)}
.bk-etikett::before{content:"";width:28px;border-top:var(--bk-strek) solid currentColor}
.bk-mono{font-family:var(--bk-font-mono);letter-spacing:.06em}
.bk-dempet{color:var(--bk-tekst-dempet)}
.bk-rutenett .bk-dempet{color:var(--bk-tekst-lys)}

/* ==========================================================================
   Oppsett
   ========================================================================== */
.bk-wrap{max-width:var(--bk-container);margin:0 auto;padding:0 clamp(16px,3.5vw,40px)}
.bk-seksjonsflate{padding:var(--bk-seksjon) 0}
.bk-rad{display:grid;gap:var(--bk-24)}
.bk-rad-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bk-rad-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bk-rad-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){.bk-rad-3,.bk-rad-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bk-rad-2,.bk-rad-3,.bk-rad-4{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Knapper
   ========================================================================== */
.bk-knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 18px/1 var(--bk-font-head);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  padding:18px 26px;border-radius:var(--bk-radius);border:var(--bk-strek-tykk) solid transparent;
  transition:transform var(--bk-rask) var(--bk-kurve),background var(--bk-rask),color var(--bk-rask)}
.bk-knapp:hover{transform:translateY(-2px)}
.bk-knapp:focus-visible{outline:3px solid var(--bk-sig);outline-offset:3px}
.bk-knapp-primar{background:var(--bk-sig);color:var(--bk-natt)}          /* 6,1:1 */
.bk-knapp-primar:hover{background:#ff8c38}
.bk-knapp-sekundar{background:transparent;color:var(--bk-hvit);border-color:var(--bk-linje)}
.bk-knapp-sekundar:hover{background:rgba(159,194,234,.14)}
.bk-papir .bk-knapp-sekundar,.bk-rutenett-lys .bk-knapp-sekundar,.bk-hvitflate .bk-knapp-sekundar{color:var(--bk-natt);border-color:var(--bk-blekk)}
.bk-papir .bk-knapp-sekundar:hover,.bk-rutenett-lys .bk-knapp-sekundar:hover{background:rgba(31,95,168,.08)}
.bk-knapp-liten{padding:13px 18px;font-size:16px}

/* ==========================================================================
   Merke, piller og etiketter
   ========================================================================== */
.bk-merke{display:inline-flex;align-items:center;gap:12px;border:2.5px solid var(--bk-sig);
  padding:11px 16px 11px 13px;font:600 14px/1 var(--bk-font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bk-hvit);background:rgba(11,35,64,.75)}
.bk-merke::before{content:"";width:12px;height:12px;background:var(--bk-sig)}
.bk-papir .bk-merke,.bk-rutenett-lys .bk-merke,.bk-hvitflate .bk-merke{color:var(--bk-natt);background:var(--bk-hvit)}
.bk-pille{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--bk-font-mono);letter-spacing:.04em;
  border:var(--bk-strek) solid var(--bk-linje);border-radius:var(--bk-radius-pill);padding:12px 16px;color:var(--bk-hvit)}
.bk-papir .bk-pille,.bk-rutenett-lys .bk-pille,.bk-hvitflate .bk-pille{color:var(--bk-natt);border-color:var(--bk-blekk)}

/* ==========================================================================
   Kort
   ========================================================================== */
.bk-kort{background:var(--bk-hvit);border:var(--bk-strek-tykk) solid var(--bk-natt);border-radius:var(--bk-radius-lg);
  padding:var(--bk-32);color:var(--bk-tekst);min-width:0}
.bk-kort-hard{box-shadow:var(--bk-hard-lys)}
.bk-kort-mork{background:var(--bk-dyp);border-color:rgba(159,194,234,.4);color:var(--bk-hvit)}
.bk-kort-mork .bk-dempet{color:var(--bk-tekst-lys)}
.bk-kort-flat{background:transparent;border:var(--bk-strek) solid rgba(159,194,234,.35)}

/* ==========================================================================
   Blåkopi-elementene: målelinje, revisjon, snitt, tittelfelt, stempel
   ========================================================================== */
.bk-mal{position:relative;height:40px;color:var(--bk-linje)}
.bk-mal::before{content:"";position:absolute;left:0;right:0;top:19px;border-top:2px solid currentColor}
.bk-mal::after{content:"";position:absolute;left:0;right:0;top:9px;height:22px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.bk-mal span{position:absolute;left:50%;top:5px;transform:translateX(-50%);padding:0 14px;
  font:500 13px/30px var(--bk-font-mono);letter-spacing:.1em;white-space:nowrap;background:var(--bk-natt)}
.bk-papir .bk-mal,.bk-rutenett-lys .bk-mal{color:var(--bk-blekk)}
.bk-papir .bk-mal span{background:var(--bk-papir)}
.bk-rutenett-lys .bk-mal span{background:var(--bk-papir)}
.bk-hvitflate .bk-mal span{background:var(--bk-hvit)}
/* målelinje inne i et mørkt kort, uansett hvilken flate kortet står på */
.bk-kort-mork .bk-mal{color:var(--bk-linje)}
.bk-kort-mork .bk-mal span{background:var(--bk-dyp)}
.bk-mal{width:100%;align-self:stretch}

.bk-rev-svg{width:52px;height:46px;flex:none}   /* revisjonstrekant, inline SVG */

.bk-tittelfelt{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  border:2px solid var(--bk-linje);font:500 12px/1.3 var(--bk-font-mono);letter-spacing:.06em;color:var(--bk-linje);background:rgba(11,35,64,.7)}
.bk-tittelfelt > *{padding:9px 12px;border-right:1px solid rgba(159,194,234,.4);border-bottom:1px solid rgba(159,194,234,.4);min-width:0}
.bk-tittelfelt .bk-v{color:var(--bk-hvit)}
.bk-tittelfelt .bk-full{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.bk-papir .bk-tittelfelt,.bk-rutenett-lys .bk-tittelfelt,.bk-hvitflate .bk-tittelfelt{color:var(--bk-blekk);background:var(--bk-hvit);border-color:var(--bk-blekk)}
.bk-papir .bk-tittelfelt .bk-v,.bk-rutenett-lys .bk-tittelfelt .bk-v,.bk-hvitflate .bk-tittelfelt .bk-v{color:var(--bk-natt)}

.bk-stempel{display:inline-block;border:4px solid var(--bk-sig);outline:2px solid var(--bk-sig);outline-offset:5px;
  color:var(--bk-sig);font:700 20px/1.15 var(--bk-font-head);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 20px;text-align:center;border-radius:8px;transform:rotate(-6deg)}
.bk-stempel small{display:block;font:500 12px/1.5 var(--bk-font-mono);letter-spacing:.12em}
.bk-papir .bk-stempel,.bk-rutenett-lys .bk-stempel,.bk-hvitflate .bk-stempel{color:var(--bk-sig-tekst);border-color:var(--bk-sig-tekst);outline-color:var(--bk-sig-tekst)}

/* Strektegninger. Brukes på inline SVG. */
.bk-strektegning .w{stroke:var(--bk-hvit);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bk-strektegning .l{stroke:var(--bk-linje);stroke-width:2;fill:none;stroke-linecap:round}
.bk-strektegning .d{stroke:var(--bk-linje);stroke-width:1.8;stroke-dasharray:7 7;fill:none}
.bk-strektegning .o{fill:var(--bk-sig)}
.bk-strektegning .os{stroke:var(--bk-sig);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bk-strektegning .ofl{fill:rgba(255,122,26,.16);stroke:var(--bk-sig);stroke-width:3}
.bk-strektegning .t{font:500 13px var(--bk-font-mono);fill:var(--bk-linje);letter-spacing:.08em}
.bk-strektegning .bg{fill:var(--bk-natt)}
.bk-papir .bk-strektegning .w,.bk-rutenett-lys .bk-strektegning .w,.bk-hvitflate .bk-strektegning .w{stroke:var(--bk-natt)}
.bk-papir .bk-strektegning .l,.bk-papir .bk-strektegning .d,
.bk-rutenett-lys .bk-strektegning .l,.bk-rutenett-lys .bk-strektegning .d,
.bk-hvitflate .bk-strektegning .l,.bk-hvitflate .bk-strektegning .d{stroke:var(--bk-blekk)}
.bk-papir .bk-strektegning .t,.bk-rutenett-lys .bk-strektegning .t,.bk-hvitflate .bk-strektegning .t{fill:var(--bk-blekk)}
.bk-papir .bk-strektegning .bg,.bk-rutenett-lys .bk-strektegning .bg{fill:var(--bk-papir)}
.bk-hvitflate .bk-strektegning .bg{fill:var(--bk-hvit)}

/* ==========================================================================
   Skjema
   ========================================================================== */
.bk-felt{width:100%;font:400 18px/1.4 var(--bk-font-body);color:var(--bk-hvit);
  background:rgba(11,35,64,.5);border:2px solid rgba(159,194,234,.45);border-radius:var(--bk-radius);
  padding:18px 18px;transition:border-color var(--bk-rask),background var(--bk-rask)}
.bk-felt::placeholder{color:rgba(201,220,242,.55)}
.bk-felt:focus{outline:none;border-color:var(--bk-sig);background:rgba(11,35,64,.75)}
.bk-felt:focus-visible{outline:3px solid rgba(255,122,26,.35);outline-offset:2px}
.bk-felt[aria-invalid="true"]{border-color:var(--bk-feil)}
.bk-papir .bk-felt,.bk-hvitflate .bk-felt{color:var(--bk-natt);background:var(--bk-hvit);border-color:var(--bk-blekk)}
.bk-feltnavn{display:block;font:500 12px/1 var(--bk-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bk-linje);margin-bottom:10px}
.bk-papir .bk-feltnavn,.bk-hvitflate .bk-feltnavn{color:var(--bk-blekk)}
.bk-valg{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  font:500 18px/1.35 var(--bk-font-body);color:var(--bk-hvit);
  background:rgba(11,35,64,.5);border:2px solid rgba(159,194,234,.4);border-radius:var(--bk-radius);
  padding:18px 20px;transition:border-color var(--bk-rask),background var(--bk-rask),transform var(--bk-rask)}
.bk-valg:hover{border-color:var(--bk-linje);transform:translateX(3px)}
.bk-valg[aria-pressed="true"],.bk-valg.bk-valgt{border-color:var(--bk-sig);background:rgba(255,122,26,.14)}
.bk-valg .bk-nr{font:500 13px/1 var(--bk-font-mono);color:var(--bk-linje);letter-spacing:.08em}
.bk-feilmelding{color:#ffb39f;font:500 14px/1.4 var(--bk-font-body);margin-top:10px}
.bk-papir .bk-feilmelding,.bk-hvitflate .bk-feilmelding{color:var(--bk-feil)}

/* ==========================================================================
   Bevegelse
   ========================================================================== */
.bk-inn{opacity:0;transform:translateY(16px);transition:opacity var(--bk-rolig) var(--bk-kurve),transform var(--bk-rolig) var(--bk-kurve)}
.bk-inn.bk-synlig{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .bk-inn{opacity:1;transform:none;transition:none}
  .bk-knapp:hover,.bk-valg:hover{transform:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   Foto: duotone i nattblått, rutenett oppå
   ========================================================================== */
.bk-foto{position:relative;overflow:hidden;background:var(--bk-natt);border-radius:var(--bk-radius-lg)}
.bk-foto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.12) brightness(1.1);mix-blend-mode:screen;opacity:.85}
.bk-foto::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(159,194,234,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(159,194,234,.14) 1px,transparent 1px);
  background-size:24px 24px}