/* ───────────────────────────────────────────────────────────
   webdesign.css — kun for webdesign.html.
   Delt designsystem (font, farger, header, footer, seksjons-
   overskrifter, demo-CTA) ligger i sider.css og må lastes først.

   Layouten her er bevisst en annen enn tjenester.html: der er
   heroen delt i to med et register til høyre, her er alt sentrert
   rundt ett budskap og et nettleservindu som forsvinner ut av
   bunnen på flaten. Resten av siden er holdt så enkel som mulig —
   få seksjoner, korte setninger, ingen tabeller å tyde.
   ─────────────────────────────────────────────────────────── */

/* Skallet til heroen ligger i sider.css. Her er bare objektet den viser. */

/* ═══ Nettleservinduet i heroen ═══ */
.wd-mock { border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -2px 0 rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.6); }
.wd-bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: #eeeeec; }
.wd-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(10,10,10,.16); }
.wd-url { margin-left: 12px; background: #fff; border-radius: 999px; padding: 5px 14px; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: rgba(10,10,10,.5); }
.wd-page { padding: 18px 20px 26px; }
.wd-nav { display: flex; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(10,10,10,.07); }
.wd-logo { width: 46px; height: 8px; border-radius: 3px; background: #0a0a0a; }
.wd-cta { margin-left: auto; width: 54px; height: 18px; border-radius: 999px; background: var(--lime); }
.wd-hero { display: grid; grid-template-columns: 1fr .8fr; gap: 22px; align-items: center; padding: 22px 0; }
.wd-hero b { display: block; height: 12px; border-radius: 4px; background: rgba(10,10,10,.82); margin-bottom: 8px; }
.wd-hero b.s { width: 72%; }
.wd-btn { display: block; width: 84px; height: 22px; border-radius: 999px; background: #0a0a0a; margin-top: 16px; }
.wd-img { height: 92px; border-radius: 9px; background: linear-gradient(135deg,#f1f1ef,#e4e6df); }
.wd-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
.wd-cards span { height: 46px; border-radius: 8px; background: #f4f4f2; }
.wd-cards span:nth-child(2) { background: rgba(212,255,61,.4); }



/* ═══════════════════════════════════════════════════════════
   ENKELT FORKLART — tre korte kort
   ═══════════════════════════════════════════════════════════ */
.why { background: #fff; padding: 130px 0 110px; }
.wy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}
.wy-card {
  border-radius: 18px;
  padding: 34px 32px 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background: #f1f1ef;
  color: #0a0a0a;
}
.wy-card.is-lime { background: var(--lime); }
.wy-card.is-dark { background: #0d0d0d; color: #fff; }
.wy-n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  opacity: 0.45;
  margin-bottom: auto;
}
.wy-card h3 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 30px 0 12px;
  color: inherit;
}
.wy-card p { font-size: 16.5px; line-height: 1.62; opacity: 0.74; }

@media (max-width: 900px) {
  .why { padding: 90px 0 70px; }
  .wy-grid { grid-template-columns: 1fr; }
  .wy-card { min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════
   INKLUDERT — enkel avkryssingsliste + prislapp
   ═══════════════════════════════════════════════════════════ */
.incl { background: #fff; padding: 20px 0 120px; }
.in-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 64px;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
.in-group { padding: 30px 0; border-top: 1px solid rgba(10,10,10,0.12); }
.in-group:first-child { padding-top: 0; border-top: 0; }
.in-group:last-child { padding-bottom: 0; }
.in-group h3 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.45);
  margin-bottom: 20px;
}
.in-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.in-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(10,10,10,0.82);
}
.in-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lime);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Prislappen følger med når man scroller gjennom lista */
.in-price {
  position: sticky;
  top: 28px;
  background: #0d0d0d;
  color: #fff;
  border-radius: 20px;
  padding: 34px 32px 30px;
}
.in-price-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}
.in-price-amount {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
}
.in-price-amount .kr { font-size: 0.46em; }
.in-price-sub {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}
.in-price-rule { height: 1px; background: rgba(255,255,255,0.13); margin: 24px 0; }
.in-price-rows { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.in-price-rows li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: rgba(255,255,255,0.72);
}
.in-price-rows li span:last-child { color: #fff; font-weight: 600; white-space: nowrap; }
.in-price-btn {
  --cap: 40px;
  --pad: 6px;
  gap: 16px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
}
.in-price-fine {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.42);
}

@media (max-width: 980px) {
  .incl { padding: 0 0 90px; }
  .in-grid { grid-template-columns: 1fr; gap: 44px; }
  .in-price { position: static; }
}
@media (max-width: 560px) {
  .in-list { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   SLIK FOREGÅR DET — fire steg på en linje
   ═══════════════════════════════════════════════════════════ */
.steps { background: #fff; padding: 20px 0 130px; }
.st-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 24px;
}
.st-step { padding-top: 26px; border-top: 1.5px solid rgba(10,10,10,0.14); position: relative; }
/* Prikken markerer starten på hvert steg langs linja */
.st-step::before {
  content: "";
  position: absolute;
  top: -5.5px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0a0a0a;
}
.st-step:first-child::before { background: var(--lime); box-shadow: 0 0 0 4px rgba(212,255,61,0.35); }
.st-when {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.42);
  margin-bottom: 16px;
}
.st-step h3 {
  font-size: 21.5px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #0a0a0a;
}
.st-step p { font-size: 16px; line-height: 1.6; color: rgba(10,10,10,0.66); }

@media (max-width: 900px) {
  .steps { padding: 0 0 90px; }
  .st-track { grid-template-columns: 1fr; gap: 0; }
  .st-step { padding: 24px 0 26px; }
  .st-step:last-child { padding-bottom: 0; }
}


/* ═══════════════════════════════════════════════════════════
   HERO — merkevarens blå flate i stedet for landskapsfoto
   Lofoten-bildet hadde ingen kobling til webdesign, og med
   grayscale(.55) + brightness(.62) i .ph-img pluss et sort slør
   oppå ble det uansett grå graut. På en side som selger nettsider
   er nettleservinduet produktbildet — flaten bak skal løfte det,
   ikke konkurrere med det. Samme gradient som forsidens hero, så
   de to sidene kjennes som samme nettsted.
   Sparer samtidig 452 kB på det som var LCP-elementet.
   ═══════════════════════════════════════════════════════════ */
.photo-hero.ph-split {
  background:
    radial-gradient(115% 85% at 76% 14%, rgba(150,205,242,0.5) 0%, transparent 58%),
    linear-gradient(118deg, #0a4a92 0%, #0f5fb4 32%, #2b82cc 62%, #6cb0dd 100%);
}
/* Sløret trengs fortsatt, men bare som dybde i bunnen så det hvite
   nettleservinduet skiller seg fra flaten. Ikke som mørklegging. */
.ph-split .ph-veil {
  background: linear-gradient(180deg,
    transparent 0%, transparent 48%,
    rgba(4,30,64,0.26) 78%, rgba(4,30,64,0.52) 100%);
}
/* Sto på 0.55 hvit mot en midtgrå flate og var nesten uleselig. */
.ph-split .ph-kicker { color: rgba(255,255,255,0.75); }
/* Fotoet fylte tomrommet over tittelen visuelt. På en ren flate ble
   det bare dødt blått — heroen strammes tilsvarende inn. */
.photo-hero.ph-split { min-height: min(74vh, 720px); }
.ph-split .ph-body { padding-bottom: 210px; }


/* Ingressen under hero-tittelen sto på 15.5px fra sider.css — for spinkel
   under en 56px overskrift. Overstyres kun for denne siden. */
.ph-split .ph-lead {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
}

@media (max-width: 900px) {
  /* Nettleservinduet skjules på mobil, og fotoet er borte. Da sto den
     reserverte hero-høyden igjen som et tomt blått felt over tittelen. */
  .photo-hero.ph-split { min-height: 0; }
  /* sider.css setter «.ph-body { padding: … !important }» på under 560px.
     Uten !important her blir toppluften spist av den. */
  .ph-split .ph-body { padding: 92px 24px 44px !important; }
}
@media (max-width: 560px) {
  .ph-split .ph-body { padding: 78px 18px 38px !important; }
}