/* ==========================================================================
   Kimura Hamar / style.css
   Håndskrevet. Ingen rammeverk, ingen byggesteg.
   Alle designverdier bor i :root under, som også er fasit for Wix Studio.
   ========================================================================== */

/* --- Fonter, selvhostet ------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Designtokens ------------------------------------------------------- */
:root {
  /* Farge. Rødt er pipettert fra klubbens logo */
  --ink-1000: #07070A;
  --ink-950:  #0D0D12;
  --ink-900:  #14141A;
  --ink-800:  #1D1D25;
  --ink-700:  #2A2A34;
  --ink-600:  #3A3A45;
  --ink-400:  #6E6E80;
  --ink-300:  #9A9AAC;
  --ink-200:  #C3C3D0;
  --ink-100:  #E4E4EC;
  --white:    #FFFFFF;
  --red-500:  #E00024;
  --red-400:  #FF1F45;
  --red-600:  #B8001D;
  --ok:       #3FBF7F;
  --err:      #FF6B7E;

  /* Type */
  --ff-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --ff-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display-xl: clamp(2.75rem, 1.70rem + 4.30vw, 6rem);
  --fs-display-l:  clamp(2.125rem, 1.44rem + 2.81vw, 4.25rem);
  --fs-h1:         clamp(2rem, 1.52rem + 1.98vw, 3.5rem);
  --fs-h2:         clamp(1.625rem, 1.34rem + 1.16vw, 2.5rem);
  --fs-h3:         clamp(1.25rem, 1.15rem + 0.41vw, 1.5625rem);
  --fs-body-l:     clamp(1.0625rem, 1.00rem + 0.25vw, 1.25rem);
  --fs-body:       clamp(1rem, 0.98rem + 0.08vw, 1.0625rem);
  --fs-small:      clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --fs-label:      clamp(0.75rem, 0.74rem + 0.08vw, 0.8125rem);

  /* Rom, 8-punkts */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px; --s-13: 160px;

  --section-y: clamp(4rem, 2.2rem + 7.4vw, 10rem);
  --gutter: 20px;
  --page-x: 20px;
  --maxw: 1280px;
  --maxw-wide: 1440px;

  /* Form */
  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;
  --header-h: 68px;

  /* Bevegelse */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --page-x: 32px; --header-h: 76px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 40px; --page-x: 40px; }
}
@media (min-width: 1600px) {
  :root { --page-x: 48px; }
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
.nav ul, .mobile-nav ul, .footer ul, .ticks, .steps { list-style: none; padding: 0; }
/* height: auto er nødvendig, ellers vinner height-attributtet i HTML og bildet
   klemmes sammen når bredden skaleres ned. */
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

body {
  background: var(--ink-1000);
  color: var(--ink-100);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Typografi ---------------------------------------------------------- */
h1, h2, h3, .display { font-family: var(--ff-display); font-weight: 400; }
/* Et langt norsk ord, som personopplysninger, er bredere enn en smal mobil.
   Det får heller dele seg enn å skyve hele sida sidelengs. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* Linjeavstanden var .94. Da la g-en i «slag» seg for tett inntil linja under,
   og p-en i «spark» kolliderte nesten med B-en i «Bare». Med 1 gaar underlengdene
   klar, og avstanden mellom linjene leses jevn selv om noen linjer mangler dem. */
.display-xl { font-size: var(--fs-display-xl); line-height: 1; letter-spacing: -.025em; color: var(--white); }
.display-l  { font-size: var(--fs-display-l);  line-height: .98; letter-spacing: -.02em;  color: var(--white); }
h1          { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.02em; color: var(--white); }
h2          { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.01em; color: var(--white); }
h3          { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.005em; color: var(--white);
              font-family: var(--ff-body); font-weight: 700; }

p { max-width: 62ch; }
.lead { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-200); }
.muted { color: var(--ink-300); }
.small { font-size: var(--fs-small); }

/* Linjeskift og blanke linjer som skrives i redigeringspanelet skal synes på
   sida. Teksten ligger som ren tekst i HTML-en, så det eneste som trengs er at
   nettleseren ikke slår linjeskiftene sammen til mellomrom. */
.linjer,
p[data-t], li[data-t], dd[data-t], blockquote[data-t], figcaption[data-t] { white-space: pre-line; }

.label {
  font-size: var(--fs-label); line-height: 1.2; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-300);
  font-family: var(--ff-body);
}
.label--red { color: var(--red-400); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--red-400); }

:focus-visible {
  outline: 3px solid var(--red-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--white); color: var(--ink-1000);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

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

/* --- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page-x); }
.container--wide { max-width: var(--maxw-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--alt { background: var(--ink-950); }
.section--line { border-top: 1px solid var(--ink-700); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--gutter); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head .label { display: block; margin-bottom: var(--s-4); }
.section-head p { margin-top: var(--s-5); }
/* Samme luft under en overskrift som står i en spalte og ikke i et seksjonshode */
h1 + .lead, h2 + .lead { margin-top: var(--s-5); }

/* --- Topplinje ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink-1000) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-700);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--ff-display); font-size: 1rem; letter-spacing: .01em; color: var(--white); }
.brand__sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-300); font-weight: 600; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--s-5); }
.nav a {
  text-decoration: none; font-size: var(--fs-small); font-weight: 600; color: var(--ink-200);
  padding-block: var(--s-2); border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--red-500); }

/* Spesifisiteten må slå .btn, som står lenger ned i arket */
.header .header__cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); font-weight: 700; color: var(--white);
  min-height: 44px; padding: 0 0 0 var(--s-3);
}
.nav-toggle__bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--ink-1000); padding: var(--s-6) var(--page-x) var(--s-9);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li + li { border-top: 1px solid var(--ink-700); }
.mobile-nav a {
  display: block; padding: var(--s-5) 0; text-decoration: none;
  font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: -.01em; color: var(--white);
}
.mobile-nav a[aria-current="page"] { color: var(--red-400); }
.mobile-nav .btn { margin-top: var(--s-7); }
.mobile-nav .btn + .btn { margin-top: var(--s-3); }

/* Språkvelger. Ligger alltid i headeren, også på mobil. En engelsktalende som lander
   på en norsk side skal kunne bytte uten å måtte åpne en meny først. */
.lang {
  display: flex; flex-shrink: 0;
  border: 1px solid var(--ink-700); border-radius: var(--r-pill); overflow: hidden;
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 40px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-300); text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lang a + a { border-left: 1px solid var(--ink-700); }
.lang a:hover { color: var(--white); }
.lang a[aria-current] { background: var(--white); color: var(--ink-1000); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .lang a { min-width: 44px; min-height: 34px; }
  .mobile-nav { display: none !important; }
}

/* Åtte menypunkt er akkurat for mye til at knappen får plass på en skjerm
   som er nøyaktig 1024 bred. Litt tettere mellom punktene løser det, og fra
   1200 og oppover er det luft nok til den vanlige avstanden. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav ul { gap: var(--s-4); }
}

@media (max-width: 359px) {
  .header__inner { gap: var(--s-3); }
  .lang a { min-width: 32px; }
  .nav-toggle__ord { display: none; }
  .nav-toggle { padding-left: 0; }
}

/* --- Knapper ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding-inline: var(--s-6);
  font-weight: 700; font-size: 1rem; letter-spacing: .01em; line-height: 1.2;
  text-align: center; text-decoration: none; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red-500); color: var(--white); }
.btn--primary:hover { background: var(--red-400); }
.btn--primary:active { background: var(--red-600); }
.btn--secondary { border-color: var(--ink-700); color: var(--ink-100); }
.btn--secondary:hover { border-color: var(--white); background: var(--ink-900); color: var(--white); }
.btn--ghost { padding-inline: 0; min-height: 0; color: var(--ink-100); text-decoration: underline;
              text-decoration-color: var(--ink-400); }
.btn--ghost:hover { color: var(--white); text-decoration-color: var(--red-400); }
.btn--sm { min-height: 44px; padding-inline: var(--s-5); font-size: var(--fs-small); }
.btn--block { width: 100%; }
@media (min-width: 768px) { .btn { min-height: 56px; } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-1000); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Bildet festes til boksen, ikke til <picture>. Den er en inline-boks, så
   height: 100% hadde ingenting å regne mot, og bildet fikk sin egen høyde: på
   en bred skjerm, eller når noen zoomer ut, ble det høyere enn heroen og rant
   ut under den, uten slør. På en smal ble det for lavt og etterlot en svart stripe. */
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* Mobil: bare et bunn-til-topp slør, slik at fotografiet fortsatt er synlig.
   Sidesløret skrus først på når det finnes bredde til å legge teksten ved siden av. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--ink-1000) 4%, rgba(7,7,10,.78) 34%, rgba(7,7,10,.30) 66%, rgba(7,7,10,.10) 100%);
}
@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(to top, var(--ink-1000) 2%, rgba(7,7,10,.55) 38%, rgba(7,7,10,.15) 70%),
      linear-gradient(to right, rgba(7,7,10,.92) 0%, rgba(7,7,10,.62) 45%, rgba(7,7,10,.12) 100%);
  }
}
/* Sekundærknappen ligger på et fotografi og trenger en ramme som faktisk synes */
.hero .btn--secondary {
  border-color: rgba(255,255,255,.46);
  background: rgba(7,7,10,.42);
  backdrop-filter: blur(3px);
}
.hero .btn--secondary:hover { border-color: var(--white); background: rgba(7,7,10,.72); }
/* Luften over og under følger vindushøyden, slik at heroen får plass under
   menyen også på en lav laptopskjerm. */
.hero__inner {
  min-height: min(78svh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(var(--s-8), 9svh, var(--s-10)) clamp(var(--s-7), 7svh, var(--s-9));
}
.hero__title { margin-block: var(--s-5) 0; }
.hero__title span { display: block; }
.hero p { margin-top: var(--s-5); color: var(--ink-100); max-width: 34rem; }
.hero .btn-row { margin-top: var(--s-7); }
.hero__note { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--ink-300); }
@media (min-width: 768px) {
  .hero__inner {
    min-height: min(84svh, 780px);
    padding-block: clamp(var(--s-8), 8svh, var(--s-12)) clamp(var(--s-7), 7svh, var(--s-11));
  }
}

/* Heroen skal faa plass i vinduet ogsaa naar det er lavt og bredt, altsaa naar
   noen zoomer ut. Da er hoeyden den knappe ressursen, ikke bredden, og en
   overskrift som bare skalerer med vw vokser seg ut av skjermen. */
.hero .display-xl { font-size: min(var(--fs-display-xl), 10svh); }

/* Lave vinduer: en laptop på 1366 x 768, eller en nettleser med mange verktøylinjer.
   Der strammes alt inn et hakk, så knappene og linja under dem er synlige uten rulling. */
@media (max-height: 800px) {
  .hero .display-xl { font-size: min(var(--fs-display-xl), 9svh); }
  .hero__inner { padding-block: clamp(var(--s-6), 6svh, var(--s-10)) clamp(var(--s-6), 5svh, var(--s-8)); }
  .hero .btn-row { margin-top: var(--s-6); }
}
@media (min-width: 1200px) {
  .hero__media img { object-position: 58% 38%; }
}

/* Enkel sidetopp for undersider */
.page-head { padding-block: calc(var(--s-9) + var(--s-4)) var(--s-8); border-bottom: 1px solid var(--ink-700); }
.page-head .label { display: block; margin-bottom: var(--s-4); }
.page-head p { margin-top: var(--s-5); }
@media (min-width: 768px) { .page-head { padding-block: var(--s-12) var(--s-10); } }

/* --- Tekstside: personvern ---------------------------------------------- */
.tekstside { max-width: 44rem; }
.tekstside h2 { font-size: var(--fs-h3); margin-top: var(--s-9); }
.tekstside h2:first-child { margin-top: 0; }
.tekstside p { margin-top: var(--s-4); color: var(--ink-200); }
.tekstside .small { margin-top: var(--s-9); color: var(--ink-300); }

/* --- Sesongstripe ------------------------------------------------------- */
.notice {
  background: var(--red-500); color: var(--white);
}
.notice__inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
}
.notice__tag {
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: var(--s-1) var(--s-3); border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-pill);
}
.notice p { margin: 0; font-weight: 600; max-width: none; }
.notice a { color: var(--white); font-weight: 700; }

/* --- Kort --------------------------------------------------------------- */
.card {
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md);
  padding: var(--s-6); height: 100%;
  display: flex; flex-direction: column;
}
.card > h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-200); }
.card__foot { margin-top: auto; padding-top: var(--s-5); }

.media-card {
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.media-card:hover { border-color: var(--ink-400); transform: translateY(-2px); }
.media-card__img { aspect-ratio: 4 / 3; overflow: hidden; }
/* Bildene i kortene har ulike opprinnelige formater. Forholdet settes derfor
   på selve bildet, ikke bare på boksen rundt, ellers får hvert kort høyden
   til sitt eget bilde og en rad med kort står ujevnt. */
.media-card__img picture { display: block; }
.media-card__img img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-card__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.media-card__body h3 { margin-bottom: var(--s-3); }
.media-card__body p { color: var(--ink-200); }
.media-card__foot { margin-top: auto; padding-top: var(--s-5); }

.tag {
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border: 1px solid;
}
.tag--gi { border-color: var(--ink-200); color: var(--white); }
.tag--nogi { border-color: var(--ink-400); color: var(--ink-200); }
.tag--open { border-color: var(--red-500); color: var(--red-400); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }

/* --- Punktliste med hake ------------------------------------------------ */
.ticks { list-style: none; }
.ticks li { position: relative; padding-left: var(--s-6); }
.ticks li + li { margin-top: var(--s-3); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 6px; border-left: 2px solid var(--red-400); border-bottom: 2px solid var(--red-400);
  transform: rotate(-45deg);
}

/* --- Faktarad ----------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
.facts__n { font-family: var(--ff-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
            line-height: 1; letter-spacing: -.03em; color: var(--white); }
.facts__l { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-300); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* --- Timeplan ----------------------------------------------------------- */
.filters { margin-bottom: var(--s-6); }
.filters > .label { display: block; margin-bottom: var(--s-3); }
.filters__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  border: 1px solid var(--ink-700); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); font-size: var(--fs-small); font-weight: 600; color: var(--ink-200);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--ink-400); color: var(--white); }
.chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--ink-1000); }

.sched { margin-top: var(--s-6); }
.sched caption { text-align: left; font-size: var(--fs-small); color: var(--ink-300); padding-bottom: var(--s-4); }
.sched__day { border-top: 1px solid var(--ink-700); padding-top: var(--s-5); margin-top: var(--s-5); }
.sched__day:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.sched__dayname { font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--white); margin-bottom: var(--s-4); }
.sched__row {
  display: grid; grid-template-columns: 4.75rem 1fr; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--ink-700); border-radius: var(--r-md);
  background: var(--ink-900);
}
.sched__row + .sched__row { margin-top: var(--s-3); }
.sched__time { font-family: var(--ff-display); font-size: 1.125rem; color: var(--white); letter-spacing: -.01em; }
.sched__slutt {
  display: block; margin-top: var(--s-1);
  font-family: var(--ff-body); font-size: var(--fs-small); letter-spacing: 0; color: var(--ink-300);
}
.sched__name { display: block; font-weight: 700; color: var(--white); }
.sched__meta { display: block; font-size: var(--fs-small); color: var(--ink-300); margin-top: var(--s-1); }
.sched__row .tag { margin-top: var(--s-3); }
.sched__row[hidden] { display: none; }
.sched__more {
  display: inline-block; margin-top: var(--s-3);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-100);
  text-decoration: underline; text-decoration-color: var(--ink-400);
  text-underline-offset: .22em; padding: var(--s-1) 0;
}
.sched__more:hover { color: var(--white); text-decoration-color: var(--red-400); }
.sched__row .tag + .sched__more { margin-left: var(--s-4); }

/* --- Modal for timebeskrivelse ------------------------------------------ */
.modal {
  width: min(38rem, calc(100vw - 2 * var(--page-x)));
  max-height: min(84svh, 44rem);
  padding: 0; border: 1px solid var(--ink-700); border-radius: var(--r-md);
  background: var(--ink-900); color: var(--ink-100);
  overflow: auto;
}
.modal::backdrop { background: rgba(7, 7, 10, .82); }
.modal__inner { padding: var(--s-6); }
.modal__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  margin-bottom: var(--s-4);
}
.modal h2 { font-size: var(--fs-h3); font-family: var(--ff-body); font-weight: 700; }
.modal__meta { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-300); }
.modal__close {
  flex-shrink: 0; width: 40px; height: 40px; margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0;
  border-radius: var(--r-sm); color: var(--ink-200); font-size: 1.5rem; line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { background: var(--ink-800); color: var(--white); }
.modal__body p { color: var(--ink-200); }
.modal__body p + p { margin-top: var(--s-4); }
.modal__body .tag-row { margin: 0 0 var(--s-5); }
.modal__foot { margin-top: var(--s-6); }
@media (min-width: 768px) { .modal__inner { padding: var(--s-8); } }
.sched__empty { color: var(--ink-300); font-size: var(--fs-small); padding: var(--s-5) 0; }

@media (min-width: 768px) {
  .sched__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
  .sched__day { border-top: 0; padding-top: 0; margin-top: 0; }
}
@media (min-width: 1200px) {
  .sched__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pristabell --------------------------------------------------------- */
.price-card {
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md);
  padding: var(--s-6); height: 100%; display: flex; flex-direction: column;
}
.price-card--feature { border-color: var(--red-500); }
.price-card__flag {
  align-self: flex-start; margin-bottom: var(--s-4);
  background: var(--red-500); color: var(--white); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.price-card__amount {
  font-family: var(--ff-display); font-size: clamp(2.25rem, 1.8rem + 1.9vw, 3rem);
  line-height: 1; letter-spacing: -.03em; color: var(--white); margin-top: var(--s-4);
}
.price-card__per { font-size: var(--fs-small); color: var(--ink-300); margin-top: var(--s-2); }
.price-card ul { margin-top: var(--s-5); margin-bottom: var(--s-6); }
.price-card .btn { margin-top: auto; }

.rate-table { margin-top: var(--s-6); font-size: var(--fs-small); }
.rate-table caption { text-align: left; color: var(--ink-300); padding-bottom: var(--s-4); }
.rate-table th, .rate-table td { text-align: left; padding: var(--s-4); border-top: 1px solid var(--ink-700); }
.rate-table thead th { color: var(--white); font-weight: 700; border-top: 0; }
.rate-table tbody th { font-weight: 700; color: var(--white); }
.rate-table td { color: var(--ink-200); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 32rem; }
.table-hint { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-300); }
@media (min-width: 768px) { .table-hint { display: none; } }

/* --- Instruktørkort ----------------------------------------------------- */
.person { background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md); overflow: hidden;
          height: 100%; display: flex; flex-direction: column; }
.person__img { aspect-ratio: 3 / 2; background: var(--ink-800); }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
/* Mangler vi portrett, lager vi en tilsiktet typografisk flate i stedet for en
   stripete "bilde mangler"-boks. */
.person__ph {
  width: 100%; height: 100%; margin: 0; max-width: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--ink-800); border-bottom: 1px solid var(--ink-700);
}
.person__ph b {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2.75rem, 1.6rem + 4vw, 4rem); line-height: 1; letter-spacing: -.04em;
  color: var(--ink-600);
}
.person__ph span {
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400);
}
@media (min-width: 768px) { .person__img { aspect-ratio: 4 / 5; } }
.person__body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.person__rank { margin-top: var(--s-2); }
.person__role { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ink-300); }
.person__body p { margin-top: var(--s-4); color: var(--ink-200); }
.person details { margin-top: var(--s-5); }
.person summary { cursor: pointer; font-weight: 700; font-size: var(--fs-small); color: var(--white); }
.person details ul { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-200); }
.person details li + li { margin-top: var(--s-2); }

/* --- Sitatblokk --------------------------------------------------------- */
.quote { border-left: 3px solid var(--red-500); padding-left: var(--s-5); }
.quote blockquote { font-size: var(--fs-body-l); color: var(--ink-100); }
.quote figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-300); }

/* --- Split: bilde + tekst ----------------------------------------------- */
.split { display: grid; gap: var(--s-8); align-items: center; }
.split__media img { width: 100%; border-radius: var(--r-md); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
  .split--flip .split__media { order: 2; }
}

/* --- Fullbredde fotobånd ------------------------------------------------ */
.band { position: relative; }
.band img { width: 100%; height: clamp(320px, 42vw, 520px); object-fit: cover; object-position: center 42%; }
.band__cap { padding-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-300); }

/* --- Galleri ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); aspect-ratio: 4/3; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

/* --- Galleri ------------------------------------------------------------ */
/* Tallet må bestå kontrastkravet både på mørk chip og på hvit, valgt chip */
.chip__n { color: var(--ink-300); font-weight: 400; margin-left: var(--s-1); }
.chip[aria-pressed="true"] .chip__n { color: var(--ink-600); }

.galleri {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
}
.galleri__item {
  display: block; padding: 0; border: 0; border-radius: var(--r-sm);
  overflow: hidden; background: var(--ink-900); cursor: zoom-in;
  aspect-ratio: 1; position: relative;
}
.galleri__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.galleri__item:hover img { transform: scale(1.04); }
.galleri__item[hidden] { display: none; }
@media (min-width: 560px) { .galleri { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
@media (min-width: 900px) { .galleri { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .galleri { grid-template-columns: repeat(5, 1fr); } }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}
.lightbox::backdrop { background: rgba(7, 7, 10, .94); }
.lightbox__img {
  position: absolute; inset: 0; margin: auto;
  max-width: calc(100vw - 2 * var(--s-6)); max-height: calc(100svh - 8rem);
  width: auto; height: auto; border-radius: var(--r-sm);
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-pill);
  background: rgba(20, 20, 26, .85); color: var(--ink-100);
  border: 1px solid var(--ink-700); line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--ink-800); color: var(--white); }
.lightbox__close { top: var(--s-4); right: var(--s-4); font-size: 1.75rem; }
.lightbox__nav { top: 50%; margin-top: -26px; font-size: 2rem; }
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: var(--s-5); margin: 0 auto; max-width: none;
  text-align: center; font-size: var(--fs-small); color: var(--ink-300);
}
@media (max-width: 559px) {
  .lightbox__nav { width: 44px; height: 44px; margin-top: -22px; font-size: 1.5rem; }
  .lightbox__nav--prev { left: var(--s-2); }
  .lightbox__nav--next { right: var(--s-2); }
}

/* --- Trinn / prosess ---------------------------------------------------- */
.steps { counter-reset: step; }
.steps > li { position: relative; padding-left: 3.5rem; }
.steps > li + li { margin-top: var(--s-7); }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.15em;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border: 1px solid var(--red-500); color: var(--red-400); border-radius: var(--r-pill);
  font-family: var(--ff-display); font-size: 1rem;
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p { color: var(--ink-200); }

/* --- Spørsmål og svar --------------------------------------------------- */
.faq { border-top: 1px solid var(--ink-700); }
.faq > details { border-bottom: 1px solid var(--ink-700); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-5) var(--s-8) var(--s-5) 0;
  font-weight: 700; color: var(--white); position: relative; font-size: var(--fs-body-l);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: var(--s-2); top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--red-400); border-bottom: 2px solid var(--red-400);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding-bottom: var(--s-6); }
.faq p { color: var(--ink-200); }
.faq p + p { margin-top: var(--s-4); }

/* --- Skjema ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-100); }
.field .req { color: var(--red-400); }
.field input, .field select, .field textarea {
  min-height: 52px; padding: var(--s-3) var(--s-4);
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-sm);
  color: var(--ink-100); width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 132px; padding-top: var(--s-4); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-400); }
.field .hint { font-size: var(--fs-small); color: var(--ink-300); }
.field .error { font-size: var(--fs-small); color: var(--err); min-height: 0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--err); }
.form__note { font-size: var(--fs-small); color: var(--ink-300); }
.form__status { border-radius: var(--r-sm); padding: var(--s-4); font-size: var(--fs-small); }
.form__status[data-state="ok"] { border: 1px solid var(--ok); color: var(--ok); }
.form__status[data-state="err"] { border: 1px solid var(--err); color: var(--err); }
.form__status:empty { display: none; }
@media (min-width: 768px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

/* --- Kontaktdetaljer ---------------------------------------------------- */
.contact-list { font-size: var(--fs-body); }
.contact-list dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
                   color: var(--ink-300); font-weight: 700; }
.contact-list dd { margin-top: var(--s-2); color: var(--ink-100); }
.contact-list dd a { font-weight: 600; }
.contact-list > div + div { margin-top: var(--s-5); }

.map-frame { border: 1px solid var(--ink-700); border-radius: var(--r-md); overflow: hidden; background: var(--ink-900); }
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --- Avsluttende CTA ---------------------------------------------------- */
/* Båndet nederst på hver side har bare knappene igjen. Det er en avslutning,
   ikke en seksjon, så det får lav høyde og knappene står midt i. */
.cta-band {
  background: var(--ink-950); border-block: 1px solid var(--ink-700);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.cta-band .btn-row { justify-content: center; }

/* --- Bunn --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--ink-700); padding-block: var(--s-10) var(--s-8); }
.footer__grid { display: grid; gap: var(--s-8); }
.footer h2 { font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-300); font-weight: 700; margin-bottom: var(--s-4); }
.footer ul li + li { margin-top: var(--s-3); }
.footer a { text-decoration: none; color: var(--ink-200); font-size: var(--fs-small); }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer address { font-style: normal; color: var(--ink-200); font-size: var(--fs-small); line-height: 1.8; }
.footer__legal {
  margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--ink-700);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: var(--fs-small); color: var(--ink-300);
}
.footer__legal p { margin: 0; max-width: none; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

/* --- Scroll-avdekking --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.no-js .reveal { opacity: 1; transform: none; }

/* --- Redusert bevegelse ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn:active { transform: none; }
  .media-card:hover { transform: none; }
}

/* --- Utskrift ----------------------------------------------------------- */
@media print {
  .header, .mobile-nav, .hero__media, .hero__scrim, .cta-band, .notice { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .display-xl, .display-l { color: #000; }
  .sched__row { border-color: #999; background: #fff; }
  .sched__time, .sched__name { color: #000; }
}