* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--hp-paper); color: var(--hp-text); font-family: var(--hp-font-sans); }
a { color: var(--hp-accent); }
a:hover { color: var(--hp-accent-hover); }
img { max-width: 100%; }
::selection { background: var(--hp-champagne); color: var(--hp-ink); }

/* ==================================================================
   RESPONSIV GRUNN
   Inline styles i JSX kan ikke inneholde media queries, så alt som må
   endre seg ved en brytpunkt bor her som klasser. JSX setter klassen,
   CSS eier kolonnene. Brytpunkter:
     1024px  stort nettbrett  — tre kolonner blir to, hovedmenyen blir hamburger
      900px  lite nettbrett   — footer i to kolonner, strammere marger
      760px  mobil            — alt blir én kolonne
      600px  liten mobil      — strammere marger
   ================================================================== */
:root { --hp-page-x: 40px; }
@media (max-width: 900px) { :root { --hp-page-x: 28px; } }
@media (max-width: 600px) { :root { --hp-page-x: 20px; } }

/* ---- Tilgjengelighet ---- */
/* Fokusringen må ha minst 3:1 mot bakgrunnen: mørk messing på lyse flater,
   champagne på mørke (footer, meny, mørke seksjoner). */
:focus-visible { outline: 3px solid var(--hp-focus-ring); outline-offset: 2px; border-radius: 2px; }
.hp-footer :focus-visible, .hp-menu-panel :focus-visible, .hp-hero-film :focus-visible,
.hp-info-card :focus-visible, .hp-live-toggle:focus-visible { outline-color: var(--hp-champagne); }
/* Skjemafeltene setter outline:none inline; ringen skal likevel synes ved tastatur. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hp-focus-ring) !important; outline-offset: 1px;
}
.hp-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp-skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  transform: translateY(-160%); opacity: 0;
  background: var(--hp-ink); color: var(--hp-paper);
  font-family: var(--hp-font-sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  padding: 14px 20px; border-radius: 3px;
  transition: transform 200ms var(--hp-ease), opacity 200ms var(--hp-ease);
}
.hp-skip:focus { transform: translateY(0); opacity: 1; color: var(--hp-paper); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  html { scroll-behavior: auto !important; }
}

/* ---- Header og meny ----
   Logo til venstre, menyen skjøvet til høyre (margin-left:auto), og
   bestillingsknappen helt til høyre. Aktiv side markeres med mørk tekst og
   en messinglinje under; knappen er fylt, så de to aldri ligner hverandre. */
.hp-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--hp-paper);
  background: color-mix(in srgb, var(--hp-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hp-border);
}
.hp-nav-bar { display: flex; align-items: center; gap: 24px; padding: 18px var(--hp-page-x); }
.hp-logo-link { display: flex; align-items: center; flex: 0 0 auto; }
/* Hele logoen (HP over HOLLAND PARK, SVG): like høy som bestillingsknappen, så headeren beholder høyden. */
.hp-logo { height: 42px; width: auto; display: block; }

.hp-desktop-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.hp-nav-link {
  font-family: var(--hp-font-sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  text-decoration: none; color: var(--hp-text-muted);
  padding: 8px 2px; border-bottom: 2px solid transparent;
  transition: color var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease);
}
.hp-nav-link:hover { color: var(--hp-text); border-bottom-color: var(--hp-border-strong); }
.hp-nav-link[aria-current="page"] { color: var(--hp-text); border-bottom-color: var(--hp-brass-text); }

.hp-nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hp-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  font-family: var(--hp-font-sans); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; text-decoration: none;
  padding: 0 20px; border-radius: var(--hp-radius-sm);
  background: var(--hp-ink); color: var(--hp-paper); border: 1px solid var(--hp-ink);
  transition: background-color var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease);
}
.hp-nav-cta:hover { background: var(--hp-espresso); border-color: var(--hp-espresso); color: var(--hp-paper); }

.hp-menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--hp-border-strong); border-radius: var(--hp-radius-sm);
  color: var(--hp-text); cursor: pointer;
}
@media (max-width: 1180px) { .hp-desktop-nav { gap: 18px; } .hp-nav-link { letter-spacing: .1em; } }
@media (max-width: 1024px) {
  .hp-nav-bar { padding: 12px var(--hp-page-x); gap: 16px; }
  .hp-desktop-nav { display: none; }
  .hp-nav-actions { margin-left: auto; }
  .hp-menu-btn { display: inline-flex; }
  .hp-logo { height: 39px; }   /* SVG-en er tett beskåret: 39 px gir 111 px bredde og plass ved 360 px */
}
@media (max-width: 380px) { .hp-nav-cta { padding: 0 14px; letter-spacing: .1em; font-size: 11.5px; } }
@media (max-width: 359px) { .hp-logo { height: 30px; } }   /* monogrammet (se <picture> i headeren) */

.hp-menu-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--hp-ink);
  display: flex; flex-direction: column;
  padding: 12px var(--hp-page-x) 40px; overflow-y: auto;
}
.hp-menu-top { display: flex; align-items: center; justify-content: space-between; }
.hp-menu-logo { height: 29px; width: auto; display: block; }
.hp-menu-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--hp-border-on-dark); border-radius: var(--hp-radius-sm);
  color: var(--hp-paper); cursor: pointer;
}
.hp-menu-nav { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--hp-border-on-dark); }
.hp-menu-link {
  display: flex; align-items: center; gap: 14px; min-height: 58px;
  font-family: var(--hp-font-display); font-size: 26px; color: var(--hp-text-on-dark);
  text-decoration: none; border-bottom: 1px solid var(--hp-border-on-dark);
}
.hp-menu-link:hover { color: var(--hp-paper); }
.hp-menu-link[aria-current="page"] { color: var(--hp-champagne); }
.hp-menu-link[aria-current="page"]::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.hp-menu-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 28px;
  font-family: var(--hp-font-sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; text-decoration: none;
  background: var(--hp-champagne); color: var(--hp-ink); border-radius: var(--hp-radius-sm);
}
.hp-menu-cta:hover { background: var(--hp-paper); color: var(--hp-ink); }
.hp-menu-contact { margin-top: auto; padding-top: 36px; }
.hp-menu-contact a {
  display: block; font-family: var(--hp-font-sans); font-size: 15px; letter-spacing: .04em;
  color: var(--hp-text-on-dark-muted); text-decoration: none; padding: 6px 0;
}
.hp-menu-contact a:hover { color: var(--hp-paper); }

/* ---- Seksjonsrammer ---- */
.hp-section { padding: var(--hp-section-y) var(--hp-page-x); }
.hp-container { max-width: var(--hp-content-max); margin: 0 auto; }
/* Containere som har sidemargen (--hp-page-x) som egen padding: toppmenyen
   og teksten over hero-bildene. Uten dette ble innholdet deres 40 px smalere
   på hver side enn resten av siden på skjermer bredere enn 1320 px, så
   logoen og hero-overskriften sto innenfor venstrekanten til alt annet. */
.hp-nav-bar.hp-container, .hp-hero-film-copy.hp-container, .hp-case-hero > .hp-container {
  max-width: calc(var(--hp-content-max) + 2 * var(--hp-page-x));
}
.hp-narrow { max-width: var(--hp-narrow-max); margin: 0 auto; }
/* Lesespalte som står venstrestilt i .hp-container, på linje med sidetittelen. */
/* 700 px gir 60–80 tegn per linje i brødteksten (920 px ga rundt 130). */
.hp-prose { max-width: 700px; }
/* Headeren ligger i dokumentflyten (sticky), så båndet trenger bare vanlig
   luft over tittelen — ikke plass til en header som ligger oppå. */
.hp-page-band { padding: 80px var(--hp-page-x) 64px; }
@media (max-width: 900px) { .hp-page-band { padding: 60px var(--hp-page-x) 48px; } }
@media (max-width: 600px) { .hp-page-band { padding: 44px var(--hp-page-x) 40px; } }
.hp-band-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hp-space-5); }
.hp-band-title {
  margin: 0; font-family: var(--hp-font-display); font-weight: 500;
  font-size: var(--hp-text-h2); line-height: var(--hp-leading-snug);
  letter-spacing: var(--hp-tracking-tight); color: var(--hp-text);
}
/* «Personvernerklæring» er for langt for de smaleste telefonene (320 px). */
@media (max-width: 340px) { .hp-band-title { font-size: 2rem; } }
.hp-band-intro {
  margin: 0; max-width: 58ch; font-family: var(--hp-font-sans); font-weight: 300;
  font-size: var(--hp-text-md); line-height: var(--hp-leading-relaxed); color: var(--hp-text-muted);
}

/* ---- Rutenett ---- */
.hp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hp-grid-services { gap: 0 40px; }
/* Tjenestesiden har åtte kort: fire kolonner gir to jevne rader på bred skjerm. */
@media (min-width: 1100px) { .hp-grid-3.hp-grid-services-4 { grid-template-columns: repeat(4, 1fr); } }
/* Forsidens tre tjenester står på én rad helt ned til mobil (ellers 2 + 1 på nettbrett). */
@media (min-width: 761px) and (max-width: 1024px) { .hp-grid-3.hp-grid-trio { grid-template-columns: repeat(3, 1fr); gap: 0 28px; } }
.hp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (min-width: 761px) { .hp-grid-3.hp-grid-pair { grid-template-columns: repeat(2, 1fr); } }
.hp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hp-split-wide { grid-template-columns: 1.2fr 1fr; }
.hp-split-top { align-items: start; gap: 64px; }
.hp-case-meta { display: grid; grid-template-columns: 200px 1fr; gap: 56px; }
.hp-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hp-btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.hp-info-card { padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 44px); }

@media (max-width: 1024px) {
  .hp-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hp-split, .hp-split-wide { gap: 44px; }
  .hp-split-top { gap: 48px; }
  .hp-case-meta { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .hp-grid-3, .hp-gallery,
  .hp-split, .hp-split-wide, .hp-split-top, .hp-form-2 { grid-template-columns: 1fr; }
  .hp-grid-3 { gap: 36px; }
  .hp-grid-services { gap: 0; }
  .hp-gallery { gap: 16px; }
  .hp-split, .hp-split-wide, .hp-split-top { gap: 36px; }
  .hp-gallery > * { grid-column: auto !important; }
}

/* ---- Forsidens hero: lifestyle-film med budskap og CTA ----
   Filmen ligger under den lyse headeren og fyller nesten hele første
   skjermbilde. Rubrikk, ingress og knapper ligger nederst til venstre på en
   mørk gradient, så de er lesbare mot både lyse og mørke rom. */
.hp-hero-film {
  position: relative; overflow: hidden; background: var(--hp-ink);
  display: flex; align-items: flex-end;
  min-height: 560px; height: 82vh; height: calc(100svh - 72px); max-height: 900px;
}
.hp-hero-film-media { position: absolute !important; inset: 0; }
.hp-hero-film-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(28,28,26,.78) 0%, rgba(28,28,26,.42) 45%, rgba(28,28,26,.18) 75%, rgba(28,28,26,.3) 100%),
    linear-gradient(to right, rgba(28,28,26,.55), rgba(28,28,26,.2) 45%, rgba(28,28,26,0) 70%);
}
.hp-hero-film-copy {
  position: relative; width: 100%;
  padding: 0 var(--hp-page-x) clamp(48px, 9vh, 96px);
}
.hp-hero-title {
  margin: 20px 0 22px; max-width: 14ch;
  font-family: var(--hp-font-display); font-weight: 500;
  font-size: var(--hp-text-h1); line-height: 1.03; letter-spacing: -0.01em;
  color: var(--hp-paper);
}
.hp-hero-title em { font-style: italic; font-weight: 400; }
.hp-hero-lead {
  margin: 0 0 32px; max-width: 44ch;
  font-family: var(--hp-font-sans); font-weight: 300;
  font-size: clamp(1.0625rem, .95rem + .6vw, var(--hp-text-lead)); line-height: 1.55;
  color: var(--hp-text-on-dark);
}
@media (max-width: 1024px) { .hp-hero-film { height: calc(100svh - 68px); } }
@media (max-width: 760px) {
  /* Teksten dekker mer av bildet på mobil, så dempingen går høyere opp. */
  .hp-hero-film-shade {
    background: linear-gradient(to top, rgba(28,28,26,.85) 0%, rgba(28,28,26,.6) 50%, rgba(28,28,26,.2) 80%, rgba(28,28,26,.3) 100%);
  }
  .hp-hero-film { height: auto; max-height: none; min-height: 520px; min-height: calc(100svh - 68px); }
  .hp-hero-film-copy { padding-top: 120px; padding-bottom: 44px; }
  .hp-hero-title { font-size: clamp(2.6rem, 1.8rem + 4vw, 3.4rem); }
}

/* ---- Intro: bilde + Carolines sitat ---- */
.hp-intro-media { aspect-ratio: 4 / 5; border-radius: var(--hp-radius-xs); }
.hp-intro-quote {
  margin: 8px 0 0; font-family: var(--hp-font-display); font-weight: 400;
  font-size: var(--hp-text-h3); line-height: 1.3; letter-spacing: -0.01em; color: var(--hp-text);
}
.hp-intro-by {
  margin: 28px 0 0; font-family: var(--hp-font-sans); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--hp-brass-text);
}
@media (max-width: 760px) { .hp-intro-media { aspect-ratio: 4 / 3; } }

.hp-case-hero { height: 78vh; min-height: 520px; }
/* Prosjektgalleri: bildene vises i sitt eget format, uten beskjæring.
   Stående bilder i tre kolonner, liggende i to. */
.hp-shots { display: grid; gap: 24px; }
.hp-shots-tall { grid-template-columns: repeat(3, 1fr); }
.hp-shots-wide { grid-template-columns: repeat(2, 1fr); }
.hp-shot { overflow: hidden; border-radius: 2px; background: var(--hp-cream); }
.hp-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) { .hp-shots-tall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .hp-shots { gap: 16px; }
  .hp-shots-tall, .hp-shots-wide { grid-template-columns: 1fr; }
  .hp-shots .hp-shot { grid-column: auto !important; }
}
/* Prosjektfilm med spill av-knapp */
.hp-film { position: relative; aspect-ratio: 16 / 9; background: var(--hp-ink); border-radius: 2px; overflow: hidden; }
.hp-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-film-tall { aspect-ratio: 9 / 16; max-width: 420px; }
.hp-film-play {
  position: absolute; inset: 0; width: 100%; border: 0; margin: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(to top, rgba(28,28,26,.55), rgba(28,28,26,.2));
  color: var(--hp-paper); font-family: var(--hp-font-sans); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
  transition: background-color var(--hp-dur) var(--hp-ease);
}
.hp-film-play[hidden] { display: none; }
.hp-film-play svg {
  box-sizing: content-box; padding: 24px 22px 24px 26px; border-radius: 999px;
  border: 1px solid rgba(243,238,230,.7); background: rgba(28,28,26,.35);
  transition: background-color var(--hp-dur) var(--hp-ease), transform var(--hp-dur) var(--hp-ease);
}
.hp-film-play:hover svg { background: rgba(28,28,26,.6); transform: scale(1.05); }
.hp-film-play:focus-visible { outline: 3px solid var(--hp-champagne); outline-offset: -6px; }
@media (max-width: 760px) { .hp-film-play svg { padding: 16px 14px 16px 18px; width: 20px; height: 20px; } }

/* Referanseprosjekter på tjenestesidene */
.hp-refs { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hp-border); }
.hp-refs-head { font-family: var(--hp-font-sans); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--hp-brass-text); margin: 0 0 12px; }
.hp-refs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hp-refs li { font-family: var(--hp-font-sans); font-weight: 300; font-size: var(--hp-text-base); line-height: 1.5; }
@media (max-width: 760px) { .hp-case-hero { height: 64vh; min-height: 400px; } }

/* ---- Footer ---- */
.hp-footer { background: var(--hp-ink); color: var(--hp-text-on-dark); padding: 80px var(--hp-page-x) 40px; }
.hp-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; align-items: start; }
.hp-foot-mark { height: 81px; width: auto; margin-bottom: 24px; }   /* SVG, tett beskåret */
.hp-foot-tagline {
  margin: 0; max-width: 30ch; font-family: var(--hp-font-display); font-style: italic;
  font-size: 22px; line-height: 1.4; color: var(--hp-champagne);
}
.hp-foot-head {
  margin: 0 0 18px; font-family: var(--hp-font-sans); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--hp-champagne);
}
.hp-foot-link, .hp-foot-text {
  font-family: var(--hp-font-sans); font-size: 14px; letter-spacing: .02em;
  color: var(--hp-text-on-dark-muted);
}
.hp-foot-link { display: block; text-decoration: none; padding: 5px 0; }
.hp-foot-link:hover { color: var(--hp-paper); }
.hp-foot-text { margin: 0 0 10px; }
.hp-foot-ig { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.hp-foot-bottom a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hp-foot-bottom a:hover { color: var(--hp-paper); }
.hp-foot-bottom {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hp-border-on-dark);
  font-family: var(--hp-font-sans); font-size: 12px; letter-spacing: .08em; color: var(--hp-text-on-dark-muted);
}
@media (max-width: 900px) {
  .hp-foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hp-foot-brand { grid-column: 1 / -1; }
  .hp-foot-mark { height: 64px; }
}
@media (max-width: 600px) {
  .hp-footer { padding: 64px var(--hp-page-x) 32px; }
  .hp-foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .hp-foot-bottom { flex-direction: column; gap: 8px; }
}

/* ---- Rader med navn til venstre og pris/tid til høyre ---- */
.hp-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* ---- Dag- og kveldsbilder (se kveld.js) ----
   Kveldsbildet vises etter solnedgang i Tønsberg; uten skript vises dagbildet. */
.hp-dk-kveld { display: none !important; }
html.hp-kveld .hp-dk-kveld { display: block !important; }
html.hp-kveld .hp-dk-dag { display: none !important; }

/* ---- Ofte stilte spørsmål (Boligstyling) ----
   Samme linjerte rader som prislisten. Pluss-tegnet blir minus når svaret er åpent. */
.hp-faq-list { margin-top: 40px; border-top: 1px solid var(--hp-border-strong); }
.hp-faq { border-bottom: 1px solid var(--hp-border-strong); }
.hp-faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; cursor: pointer;
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary:focus-visible { outline: 2px solid var(--hp-brass-text); outline-offset: 4px; }
.hp-faq-q { margin: 0; font-family: var(--hp-font-display); font-weight: 500; font-size: var(--hp-text-h5); line-height: 1.3; color: var(--hp-text); }
.hp-faq-mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; color: var(--hp-brass-text); }
.hp-faq-mark::before, .hp-faq-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.hp-faq-mark::after { transform: rotate(90deg); transition: transform var(--hp-dur) var(--hp-ease); }
.hp-faq[open] .hp-faq-mark::after { transform: rotate(0deg); }

/* ---- Leverandørlogoer på Butikk-siden ---- */
/* Ni kort: tre kolonner gir tre jevne rader. */
.hp-supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-supplier-card {
  border: 1px solid var(--hp-border-strong); border-radius: 2px; background: var(--hp-paper);
  min-height: 132px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: center;
}
/* --hp-logo-w settes inline per logo (optisk bredde i % av kortet);
   --hp-logo-scale løfter alle logoene samlet på smale skjermer. */
.hp-supplier-card img {
  display: block; height: auto; max-width: 100%; opacity: .92;
  width: calc(var(--hp-logo-w, 60%) * var(--hp-logo-scale, 1));
}
.hp-supplier-more {
  font-family: var(--hp-font-display); font-size: 24px; font-style: italic;
  letter-spacing: .04em; color: var(--hp-text-soft); text-align: center; line-height: 1.2;
}
/* Kort som lenker til leverandørens nettsted */
a.hp-supplier-card { transition: border-color var(--hp-dur) var(--hp-ease), background-color var(--hp-dur) var(--hp-ease); }
a.hp-supplier-card:hover { border-color: var(--hp-brass); background: var(--hp-cream); }
a.hp-supplier-card:hover img { opacity: 1; }

/* ---- Lenke i løpende tekst ---- */
.hp-text-link { color: var(--hp-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hp-text-link:hover { color: var(--hp-text); }
@media (max-width: 1024px) { .hp-supplier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .hp-supplier-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; --hp-logo-scale: 1.18; }
  .hp-supplier-card { min-height: 104px; padding: 14px 12px; }
  .hp-supplier-more { font-size: 19px; }
}
/* ==================================================================
   INTERAKTION UTAN REACT
   I det interaktive kittet bytter komponentene utseende via React-state
   (onMouseEnter). Den statiske siden har ingen React, så de samme
   overgangene ligger her i CSS. Reglene må bruke !important fordi
   komponentene setter grunntilstanden som inline style.
   ================================================================== */

[hidden] { display: none !important; }

/* ---- Knapper ---- */
.hp-btn[data-variant="primary"]:hover { background: var(--hp-espresso) !important; border-color: var(--hp-espresso) !important; }
.hp-btn[data-variant="primary"][data-ondark="true"]:hover { background: var(--hp-paper) !important; border-color: var(--hp-paper) !important; }
.hp-btn[data-variant="secondary"]:hover { background: var(--hp-ink) !important; color: var(--hp-paper) !important; border-color: var(--hp-ink) !important; }
.hp-btn[data-variant="secondary"][data-ondark="true"]:hover { background: var(--hp-champagne) !important; color: var(--hp-ink) !important; border-color: var(--hp-champagne) !important; }
.hp-btn[data-variant="ghost"]:hover { color: var(--hp-clay) !important; }
.hp-btn[data-variant="ghost"][data-ondark="true"]:hover { color: var(--hp-paper) !important; }

/* ---- Prosjektkort: rolig bildezoom, mørkere bunn, lengre messinglinje ---- */
.hp-card > div:first-child > span:first-of-type { transition: opacity var(--hp-dur) var(--hp-ease); }
.hp-card:hover > div:first-child > span:first-of-type { opacity: 1 !important; }
.hp-card:hover img { transform: scale(1.05) !important; }
.hp-card > div:last-child > span { transition: width var(--hp-dur) var(--hp-ease); }
/* Samme lengder som streken ved «Les mer» på tjenestekortene: 18 px i ro,
   28 px ved hover (designsystemets ProjectCard har 24 og 48 inline). */
.hp-card > div:last-child > span { width: 18px !important; background: var(--hp-accent) !important; }
.hp-card:hover > div:last-child > span { width: 28px !important; }
/* Samme pilspiss og samme farge (--hp-accent) som på tjenestekortene. */
.hp-card > div:last-child > span { position: relative; }
.hp-card > div:last-child > span::after {
  content: ''; position: absolute; right: -1px; top: -4px; width: 6px; height: 9px;
  background: var(--hp-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 100% 50%; transform: scaleX(0); opacity: 0;
  transition: transform var(--hp-dur) var(--hp-ease), opacity var(--hp-dur) var(--hp-ease);
}
.hp-card:hover > div:last-child > span::after, .hp-card:focus-visible > div:last-child > span::after { transform: none; opacity: 1; }
.hp-card:focus-visible > div:last-child > span { width: 28px !important; }
@media (prefers-reduced-motion: reduce) { .hp-card > div:last-child > span, .hp-card > div:last-child > span::after { transition: none; } }

/* ---- Tjenestekort ---- */
.hp-service:hover { background: var(--hp-cream) !important; }
.hp-service[data-ondark="true"]:hover { background: rgba(237,230,218,0.04) !important; }
.hp-service a span { transition: width var(--hp-dur) var(--hp-ease); }
.hp-service:hover a span { width: 28px !important; }
/* Pilspiss som vokser fram i enden av streken når den forlenges, som tegn
   på at lenken tar deg videre. Spissen er én vinkelform (SVG-maske) med
   spisst hjørne. Boksen er 9 px høy og står 4 px over streken, altså med
   hele piksler fra samme utgangspunkt som streken: da avrundes de likt og
   spissen ligger alltid midt på streken. Den stikker 1 px forbi strekens
   ende, så den rette enden på streken dekkes og ikke gir et kantet hjørne. */
.hp-service a span { position: relative; }
.hp-service a span::after {
  content: ''; position: absolute; right: -1px; top: -4px; width: 6px; height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-miterlimit='10'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 100% 50%; transform: scaleX(0); opacity: 0;
  transition: transform var(--hp-dur) var(--hp-ease), opacity var(--hp-dur) var(--hp-ease);
}
.hp-service:hover a span::after, .hp-service a:focus-visible span::after { transform: none; opacity: 1; }
.hp-service a:focus-visible span { width: 28px !important; }
@media (prefers-reduced-motion: reduce) { .hp-service a span, .hp-service a span::after { transition: none; } }
/* Hele kortet er klikkbart: «Les mer»-lenken strekkes ut over kortet, så
   det fortsatt bare er én lenke per kort for tastatur og skjermleser. */
/* Teksten i kortet står på linje med seksjonens overskrift og kortets
   toppstrek (designsystemets ServiceCard har 24 px sidepadding, som skjøv
   teksten inn). Hover-bakgrunnen får i stedet luft med en skygge i samme
   farge, 20 px ut på hver side, uten å flytte noe. */
.hp-service { position: relative; cursor: pointer; padding-left: 0 !important; padding-right: 0 !important; }
.hp-service:hover { box-shadow: -20px 0 0 var(--hp-cream), 20px 0 0 var(--hp-cream); }
.hp-service[data-ondark="true"]:hover { box-shadow: -20px 0 0 rgba(237,230,218,0.04), 20px 0 0 rgba(237,230,218,0.04); }
.hp-service a::after { content: ''; position: absolute; inset: 0; }
.hp-service a:focus-visible { outline: none; }
.hp-service:has(a:focus-visible) { outline: 3px solid var(--hp-focus-ring); outline-offset: 2px; }

/* ---- Filterknapper på Portefølje ----
   Ekte <button>-elementer (tastatur og aria-pressed gratis); taggen inni er
   bare utseendet. */
.hp-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hp-filter { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 999px; font: inherit; }
.hp-filter .hp-tag { min-height: 36px; padding-left: 16px !important; padding-right: 16px !important; }
.hp-tag[data-active="true"] { background: var(--hp-ink) !important; color: var(--hp-paper) !important; border-color: var(--hp-ink) !important; }
/* Taggen som var aktiv ved bygging har mørk bakgrunn inline; når filteret
   byttes må den tilbake til hvilestilen. */
.hp-tag[data-active="false"] { background: var(--hp-cream) !important; color: var(--hp-text-muted) !important; border-color: transparent !important; }
.hp-tag[data-active="false"]:hover { border-color: var(--hp-border-strong) !important; }

/* Uten JavaScript vises alle prosjektene, som er riktig utgangspunkt. */
.hp-card[data-hidden="true"] { display: none !important; }

/* ---------- Levende bilder (videoloop over stillbilde) ----------
   Videoen ligger over stillbildet og tones inn når den spiller. site.js
   toner den ut rett før slutten og starter på nytt, så loopen er sømløs.
   Uten JavaScript, på mobil og med redusert bevegelse vises stillbildet. */
.hp-live { opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.hp-live.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hp-live { display: none; } }

/* ---- Pauseknapp for videoloopene (WCAG 2.2.2) ----
   Vises bare når site.js faktisk spiller av en film. */
.hp-live-toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(28,28,26,.55); color: var(--hp-paper);
  border: 1px solid rgba(237,230,218,.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color var(--hp-dur) var(--hp-ease);
}
.hp-live-toggle:hover { background: rgba(28,28,26,.8); }
.hp-live-toggle .hp-ico-play { display: none; }
.hp-live-toggle[data-paused="true"] .hp-ico-play { display: block; }
.hp-live-toggle[data-paused="true"] .hp-ico-pause { display: none; }
/* På forsiden ligger filmen bak teksten; knappen legges i høyre hjørne av
   innholdsbredden i stedet for helt ute i kanten. */
.hp-hero-film .hp-live-toggle { right: var(--hp-page-x); bottom: 24px; }

/* ==================================================================
   KONTRAST FOR DESIGNSYSTEMETS KOMPONENTER
   Eyebrows, stjerner for påkrevde felt og tjenestenumre bruker messing
   (#A98F5F) som tekst på lys bakgrunn — bare 2,7:1. Komponentene kommer
   ferdigbygget fra designsystemet med fargen inline, så det statiske
   bygget bytter til den mørke messingtonen her. Selektoren treffer bare
   egenskapen «color» (ikke border-color/background).
   ================================================================== */
[style^="color:var(--hp-brass)"],
[style*=";color:var(--hp-brass)"] { color: var(--hp-brass-text) !important; }

/* ---- Skjema ---- */
.hp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hp-legend {
  padding: 0; margin-bottom: 12px; font-family: var(--hp-font-sans); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--hp-text-muted);
}
.hp-req { color: var(--hp-brass-text); }
/* Felt som serveren avviste (merket av site.js med aria-invalid). */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #9B3B2E !important; box-shadow: 0 0 0 1px #9B3B2E !important;
}
.hp-fieldset[aria-invalid="true"] .hp-legend { color: #9B3B2E; }
#hp-skjema-feil:focus { outline: 2px solid var(--hp-focus-ring); outline-offset: 2px; }

/* ---- Takk-sider ---- */
.hp-thanks { padding: 8px 0 24px; }
.hp-thanks-head {
  margin: 0 0 22px; font-family: var(--hp-font-display); font-weight: 500;
  font-size: var(--hp-text-h4); color: var(--hp-text);
}

/* ---- Kontaktkortet: klikkbar telefon, e-post og Instagram ---- */
.hp-info-link {
  font-family: var(--hp-font-sans); font-size: 14.5px; color: var(--hp-text-on-dark);
  text-decoration: underline; text-decoration-color: var(--hp-border-on-dark); text-underline-offset: 4px;
}
.hp-info-link:hover { color: var(--hp-champagne); text-decoration-color: currentColor; }

/* ---- Avkrysningsboks ----
   Designsystemets Checkbox har appearance:none og tegner avkrysset tilstand med
   React (onChange). Det statiske bygget har ikke React, så uten denne regelen
   ble boksen avkrysset uten at det syntes (Book befaring, okt. 2026).
   !important trengs fordi bakgrunnen står inline på elementet. */
input[type="checkbox"]:checked {
  background: var(--hp-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23F5F0E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat !important;
  border-color: var(--hp-ink) !important;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--hp-brass); outline-offset: 2px; }