/* =============================================
   ALFAVINKEL · style.css
   ============================================= */

/* Fontene ligger lokalt saa besoekende ikke sender IP-adressen sin til
   Google. Variable fonter, latin-utvalg (dekker æøå). Lisens: fonts/OFL-*.txt */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-display-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-display-latin-wght-italic.woff2') format('woff2');
}

:root {
  --dark:   #251605;
  --accent: #C57B57;
  /* --accent gir bare 3.2:1 mot lyst. Disse to holder WCAG AA (4.5:1). */
  --accent-strong: #A05A39; /* bakgrunn bak hvit tekst */
  --accent-ink:    #8E4F31; /* tekst paa lys bunn, og hover for --accent-strong */
  --warm:   #F1AB86;
  --light:  #F7DBA7;
  --steel:  #9CAFB7;
  --white:  #FDFAF5;
  --text:   #2D1E0F;
  --muted:  #7A5C3F;

  --ff-heading: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    0.28s;

  --container: 1160px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Kobber mot den varme kontaktbunnen gir under 3:1, saa der brukes moerk. */
.contact :focus-visible {
  outline-color: var(--dark);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* =============================================
   UTILITY
   ============================================= */
.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* Section labels */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.85rem;
}
.section-label--light {
  color: var(--warm);
}

/* Section headings */
.section-title {
  font-family: var(--ff-heading);
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: 1rem;
}
.section-title--light {
  color: var(--white);
}

/* Centered section header */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  transition: background var(--t) var(--ease),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  min-height: 50px;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent-strong);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(197, 123, 87, 0.38);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.45);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
}

.btn--dark {
  background: var(--dark);
  color: var(--white);
}
.btn--dark:hover {
  background: #3d2510;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 22, 5, 0.3);
}

.btn--full {
  width: 100%;
}
/* =============================================
   HEADER
   ============================================= */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  padding-block: 1.4rem;
  transition: background var(--t) var(--ease),
              padding var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.header.scrolled {
  background: var(--dark);
  padding-block: 0.9rem;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--white);
  font-family: var(--ff-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
/* Nav */
.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.nav__link:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.09);
}

.nav__cta {
  background: var(--accent-strong);
  color: var(--white) !important;
  padding: 0.5rem 1.2rem;
  margin-left: 0.5rem;
}
.nav__cta:hover {
  background: var(--accent-ink) !important;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0.6rem;
  flex-shrink: 0;
}
.hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t) var(--ease),
              opacity var(--t) var(--ease);
  transform-origin: center;
}
.hamburger.open .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  /* Hoeyden var fast, 100svh med min-height 580, og overflow hidden klipte
     det som ikke fikk plass. Paa 320x568 forsvant nedre kant av
     SMS-knappen, og verre for alle som kjoerer stoerre tekst i nettleseren.
     Naa vokser den i stedet. min() beholder taket paa 1000 px som
     max-height ga foer, saa hoeye skjermer ser ut som de gjorde.
     Paddingen oeverst gjoer plass til den faste headeren, og forskjellen
     mellom oeverst og nederst gjenskaper de 70 px teksten sto lavere
     enn midten foer. */
  min-height: min(100svh, 1000px);
  padding-block: 96px 1.6rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}

@keyframes heroZoom {
  to { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(37, 22, 5, 0.84) 0%,
    rgba(37, 22, 5, 0.52) 55%,
    rgba(37, 22, 5, 0.72) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  animation: fadeUp 0.85s var(--ease) 0.15s both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  font-family: var(--ff-heading);
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  font-weight: 700;
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.hero__subtitle {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--warm);
  margin-bottom: 1.75rem;
}

.hero__sub {
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 2.5rem;
  max-width: 460px;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =============================================
   ABOUT
   ============================================= */
.about {
  background: var(--light);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.about__inner {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.about__image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  aspect-ratio: 4 / 5;
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform 0.65s var(--ease);
}
.about__image-wrap:hover .about__img {
  transform: scale(1.03);
}

/* Clip overflow on hover zoom */
.about__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.about__badge {
  position: absolute;
  bottom: 2rem;
  right: -1.25rem;
  background: var(--accent-strong);
  color: var(--white);
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 10px 30px rgba(197, 123, 87, 0.38);
  z-index: 2;
}
.about__badge-name {
  display: block;
  font-family: var(--ff-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.about__content {
  padding-block: 1rem;
}

.about__lead {
  font-family: var(--ff-heading);
  font-size: 1.18rem;
  font-style: italic;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.about__body {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 1.8rem;
}

.about__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.about__list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
}
.about__list-item svg {
  color: var(--accent);
  flex-shrink: 0;
  background: rgba(197, 123, 87, 0.12);
  border-radius: 50%;
  padding: 3px;
  width: 24px;
  height: 24px;
}

/* =============================================
   SERVICES
   ============================================= */
.services {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: #FDFAF5;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.service-card {
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(197, 123, 87, 0.14);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 18px 48px rgba(37, 22, 5, 0.08);
}

.service-card__media {
  display: block;
  aspect-ratio: 4 / 3;
}
.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__media--top img {
  object-position: center top;
}

.service-card__title {
  padding: 1.1rem 1.35rem 1.25rem;
  font-family: var(--ff-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dark);
}

.services__more {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--muted);
}

/* =============================================
   GALLERY
   ============================================= */
.gallery {
  background: var(--dark);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 240px 240px 240px;
  gap: 0.875rem;
}

/* Explicit placement for asymmetric 7-bilde layout */
.gallery__item:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; }
.gallery__item:nth-child(2) { grid-column: 2;     grid-row: 1; }
.gallery__item:nth-child(3) { grid-column: 3;     grid-row: 1; }
.gallery__item:nth-child(4) { grid-column: 2;     grid-row: 2; }
.gallery__item:nth-child(5) { grid-column: 3;     grid-row: 2; }
.gallery__item:nth-child(6) { grid-column: 1;     grid-row: 3; }
.gallery__item:nth-child(7) { grid-column: 2 / 4; grid-row: 3; }

.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}
.gallery__item:hover img {
  transform: scale(1.07);
}

/* Lyskasse: klikk paa et prosjektbilde aapner det stort, med pil
   frem/tilbake. Ingen tekst, bare bildene. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 2, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: min(88vw, 1100px);
  max-height: 86vh;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background var(--t) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__close {
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox__nav--prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* =============================================
   CONTACT
   ============================================= */
.contact {
  background: var(--warm);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.contact__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.contact .section-title {
  color: var(--dark);
}
/* Paa den varme bunnen trengs en moerkere tone for 4.5:1. */
.contact .section-label {
  color: #6B3720;
}

.contact__intro {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(37, 22, 5, 0.78);
  margin: 0 auto 1.25rem;
  max-width: 460px;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 340px;
  margin: 0.75rem auto 0;
}

.contact__detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  color: var(--dark);
  text-align: left;
  transition: background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.contact__detail-item:hover {
  background: rgba(255, 255, 255, 0.65);
  transform: translateY(-2px);
}

.contact__detail-icon {
  width: 38px;
  height: 38px;
  background: var(--white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.contact__detail-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(37, 22, 5, 0.7);
  margin-bottom: 0.15rem;
}
.contact__detail-value {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--dark);
  padding-block: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.footer__logo {
  color: var(--white);
  opacity: 0.9;
  transition: opacity var(--t);
}
.footer__logo:hover {
  opacity: 1;
}

.footer__tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.2rem;
}

.footer__info {
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.6rem;
}

.footer__copy {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.4rem;
}

.footer__info a,
.footer__copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__info a:hover,
.footer__copy a:hover {
  color: var(--white);
}

/* =============================================
   PERSONVERN-SIDEN
   ============================================= */
.legal {
  /* 72px er hoeyden paa den faste headeren i scrolled-tilstand. */
  padding-block: calc(72px + clamp(2.5rem, 6vw, 4rem)) clamp(4rem, 9vw, 6rem);
}
.legal__inner {
  max-width: 720px;
}
.legal h2 {
  font-family: var(--ff-heading);
  font-size: 1.35rem;
  color: var(--dark);
  margin: 2.25rem 0 0.6rem;
}
.legal p {
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.legal a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__updated {
  color: var(--muted);
  font-size: 0.9rem;
}
.legal__back {
  font-size: 0.9rem;
}

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
/* Fade-inn krever .js paa <html>. Uten JavaScript sto tjenestekortene,
   galleriet og kontaktinfoen paa opacity 0 for alltid, altsaa blankt. */
.js .service-card,
.js .gallery__item,
.js .contact__detail-item,
.js .about__content,
.js .about__image-wrap {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease),
              transform 0.55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .service-card,
  .js .gallery__item,
  .js .contact__detail-item,
  .js .about__content,
  .js .about__image-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.service-card.is-visible,
.gallery__item.is-visible,
.contact__detail-item.is-visible,
.about__content.is-visible,
.about__image-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   RESPONSIVE — TABLET (max 960px)
   ============================================= */
@media (max-width: 960px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about__image-wrap {
    aspect-ratio: 16 / 9;
    max-height: 420px;
  }
  .about__badge {
    right: 1rem;
    bottom: 1.5rem;
  }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 220px 220px 220px 220px 220px;
  }
  .gallery__item:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; }
  .gallery__item:nth-child(2) { grid-column: 2;     grid-row: 1; }
  .gallery__item:nth-child(3) { grid-column: 2;     grid-row: 2; }
  .gallery__item:nth-child(4) { grid-column: 1;     grid-row: 3; }
  .gallery__item:nth-child(5) { grid-column: 2;     grid-row: 3; }
  .gallery__item:nth-child(6) { grid-column: 1;     grid-row: 4; }
  .gallery__item:nth-child(7) { grid-column: 2;     grid-row: 4 / 6; }
}

/* =============================================
   RESPONSIVE — MOBILE (max 640px)
   ============================================= */
@media (max-width: 640px) {
  /* Show hamburger, hide desktop nav */
  .hamburger {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: min(310px, 85vw);
    background: var(--dark);
    padding: 5rem 1.75rem 2rem;
    transition: right var(--t) var(--ease);
    z-index: 199;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
  }
  .nav.open {
    right: 0;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .nav__link {
    font-size: 1.15rem;
    padding: 0.75rem 1rem;
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .nav__cta {
    margin-left: 0;
    margin-top: 0.75rem;
    text-align: center;
    justify-content: center;
    display: flex;
  }

  /* Hero */
  .hero__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }
  .hero__actions .btn {
    width: 100%;
  }

  /* About */
  .about__image-wrap {
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }
  .about__badge {
    right: 0.5rem;
    bottom: 1rem;
  }

  /* Services */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .service-card__title {
    padding: 0.8rem 0.9rem 0.9rem;
    font-size: 1rem;
  }

  /* Gallery */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 220px);
  }

  .gallery__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  /* Lightbox */
  .lightbox__close,
  .lightbox__nav {
    width: 38px;
    height: 38px;
  }
  .lightbox__close {
    top: 1rem;
    right: 1rem;
  }
  .lightbox__nav--prev {
    left: 0.5rem;
  }
  .lightbox__nav--next {
    right: 0.5rem;
  }
}

/* =============================================
   RESPONSIVE — SMALL (max 400px)
   ============================================= */
@media (max-width: 400px) {
  .about__badge-name {
    font-size: 1.15rem;
  }
}

/* =============================================
   TILLEGG TIL TEKSTVERSJONEN
   Fire smaa regler. Designet er ellers uendret.
   ============================================= */

/* 1. <picture> er inline som standard, og da faller hoeyden sammen naar
      bildet ligger i en beholder som styrer stoerrelsen selv. */
.hero__media picture,
.about__image-wrap picture,
.gallery__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3. Bildetekst under galleriet. Foer- og etter-bildet trenger en
      forklaring, ellers er det bare to hus. */
.gallery__caption {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
}

/* 4. Logoen. Ordmerket i header, hele merket i footer. Begge er hvite med
      moerk kontur, og begge staar paa moerk bunn. Bildene er eksportert
      4x og 2x av visningsstoerrelsen, saa de er skarpe paa retina.
      .logo beholder display flex for vertikal sentrering. */
.logo__img {
  height: 33px;
  width: auto;
}

.footer__logo-img {
  width: 240px;
  height: auto;
}

/* 5. Dedikert foer og etter. Samme radius og samme gap som galleriet, saa
      de to blokkene leses som én seksjon. Ingen slider: begge bildene er
      synlige samtidig, og etikettene staar fast uten hover. */
.beforeafter {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.beforeafter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.beforeafter__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.beforeafter__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.65s var(--ease);
}
.beforeafter__item:hover img {
  transform: scale(1.04);
}

.beforeafter__tag {
  position: absolute;
  left: 1.35rem;
  bottom: 1.25rem;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  text-shadow: 0 1px 12px rgba(37, 22, 5, 0.9);
}

/* 7. Tilbakemeldinger. Arver kortutseendet fra .service-card: hvit flate,
      samme ramme, samme radius, samme loeft paa hover. */
.reviews {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--white);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1.5px solid rgba(197, 123, 87, 0.14);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.review:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 18px 48px rgba(37, 22, 5, 0.08);
}

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--accent);
}

.review__text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
}

.review__by {
  margin-top: auto;
  font-size: 0.88rem;
  color: var(--muted);
}
.review__by strong {
  color: var(--dark);
  font-weight: 600;
}

/* Merkelappen skal vaere umulig aa overse, saa ingen eksempelomtale gaar i
      trykken ved et uhell. Hele regelen slettes med de siste klammene. */
.review__flag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 1px 7px;
  border-radius: 3px;
  background: #ffe680;
  color: #4a3400;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.reviews__link {
  margin-top: 2rem;
  font-size: 0.92rem;
}
.reviews__link a {
  color: var(--accent-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(197, 123, 87, 0.4);
  padding-bottom: 1px;
}
.reviews__link a:hover {
  border-bottom-color: var(--accent);
}

/* 6. Mobil for de nye komponentene. Maa staa her, etter basisreglene over,
      og ikke oppe i det store 640-blokken. Like spesifikke regler avgjoeres
      av rekkefoelgen i fila, og tillegget ligger sist. */
@media (max-width: 640px) {
  /* Side ved side gir 126 px per bilde paa en liten telefon, og da ser man
     ingen forskjell. Stablet blir hvert bilde like bredt som skjermen. */
  .beforeafter__grid {
    grid-template-columns: 1fr;
  }
  .beforeafter {
    margin-top: 2rem;
  }
  .footer__logo-img {
    width: 200px;
  }
  .reviews__grid {
    grid-template-columns: 1fr;
  }
}

/* 9. Hopp til innhold. Usynlig til den faar tastaturfokus. Ligger foerst i
      DOM-en, saa den som navigerer med tab slipper aa gaa gjennom menyen
      paa hver eneste side. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 300;
  padding: 0.8rem 1.25rem;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
}

/* 10. Hero-animasjonene var ikke gated paa prefers-reduced-motion. Den som
       har slaatt av bevegelse i systemet fikk likevel bade innsvevingen av
       teksten og en 14 sekunders zoom paa bakgrunnsbildet.
       Merk fill-mode «both» paa fadeUp: starter animasjonen aldri, staar
       teksten paa opacity 0. Her settes hvilestillingen eksplisitt. */
@media (prefers-reduced-motion: reduce) {
  .hero__content {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__img {
    animation: none;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

@media (min-width: 641px) and (max-width: 960px) {
  /* To kort i bredden, det tredje under. Tre kort paa 960 px blir for smale
     til at omtalene er behagelige aa lese. */
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}