/* Berre's Bil og Båt AS, demo
   Palett hentet fra bygget og lyset i Lofoten:
   skifergrå fasade, mørk sjø, rorbu-rødt, teal fra båtene */

:root{
  --ink:#101F29;
  --ink-2:#1B3542;
  --sea:#153F52;
  --paper:#EDF0F1;
  --paper-2:#FFFFFF;
  --paper-3:#E2E7E9;
  --rorbu:#B3241D;
  --rorbu-dark:#8E1B15;
  --blue:#2C74B8;
  --blue-light:#7FB3E4;
  --teal:#2C74B8;
  --line:rgba(16,31,41,.14);
  --line-light:rgba(255,255,255,.18);
  --muted:#54666F;
  --shadow:0 18px 40px -24px rgba(16,31,41,.45);
  --r:4px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* hidden-attributtet maa slaa gjennom uansett hva elementet ellers
   har av display. Uten !important vinner en vanlig display-regel,
   og elementet blir staaende synlig selv om det er satt hidden. */
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;margin:0;line-height:1.06;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.15rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.9rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}
h4{font-size:1.03rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,32px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--rorbu);outline-offset:2px}

.eyebrow{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rorbu);margin:0 0 .85rem;
}
.eyebrow--light{color:var(--blue-light)}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:.82rem}
.topbar__inner{display:flex;align-items:center;gap:14px;height:38px}
/* min-width:0 er det som faktisk lar teksten krympe i en flex-rad. Uten
   den presser den lange setningen telefonnummeret ut av linja. */
.topbar__item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar__sep{flex:1 1 auto;height:1px;background:rgba(255,255,255,.18)}
/* Nummeret har mellomrom i seg og brot til to linjer paa mobil. Baren er
   38 px hoy, saa den andre linja havnet utenfor. */
/* align-self:stretch gir hele barhoyden som trykkflate paa mobil, uten at
   det ser annerledes ut. Teksten alene var bare 22 px hoy. */
.topbar__tel{
  margin-left:auto;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.03em;
  white-space:nowrap;flex:0 0 auto;align-self:stretch;display:flex;align-items:center;
}
.topbar__tel:hover{color:var(--blue-light)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper-2);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand__logo{width:auto;height:38px}
.brand__text{display:flex;flex-direction:column;line-height:1.15}

.nav{display:flex;align-items:center;gap:22px}
.nav a{
  text-decoration:none;font-weight:600;font-size:.92rem;padding:6px 0;position:relative;color:var(--ink-2);
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--rorbu);transition:right .25s ease}
.nav a:hover::after{right:0}
.nav__cta{
  background:var(--rorbu);color:#fff !important;padding:11px 20px !important;border-radius:var(--r);
  font-family:"Archivo",sans-serif;letter-spacing:.02em;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--rorbu-dark)}

.burger{display:none;width:46px;height:40px;background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;padding:10px 11px}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- knapper ---------- */
.btn{
  display:inline-block;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.02em;padding:14px 26px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn--primary{background:var(--rorbu);color:#fff}
.btn--primary:hover{background:var(--rorbu-dark);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--paper-3);transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(1.30) saturate(1.02);
}
/* Sloeret er tyngst til venstre der teksten staar, og slipper bildet fram
   til hoeyre. Det loddrette sloeret er naermest borte paa midten, saa
   bildet skal vaere merkbart lysere enn foer. Maalt fra 360 til 1920 px:
   laveste verdi er 4.92 mot kravet 3.0 for h1, og 5.13 mot 4.5 for
   ingressen. Senker du sloeret mer, ryker ingressen foerst. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(16,31,41,.10) 0%,rgba(16,31,41,.00) 40%,rgba(16,31,41,.10) 80%,rgba(16,31,41,.30) 100%),
    linear-gradient(90deg,rgba(16,31,41,.84) 0%,rgba(16,31,41,.70) 52%,rgba(16,31,41,.12) 86%,rgba(16,31,41,.00) 100%);
}
/* Signaturblaaen (--blue-light) er for moerk til aa staa mot sloeret.
   Maalt paa 360 px laa stikktittelen paa 3.13 mot kravet 4.5, og «og» i
   overskriften paa 2.78 mot kravet 3.0. Begge var altsaa under AA
   allerede foer sloeret ble lettet. Bare i toppbildet bruker vi derfor en
   lysere tone av samme blaa. Baat- og kontaktseksjonen staar uroert.
   Verdien er valgt paa 1024 px, som er det trangeste punktet: der har
   det vannrette sloeret tynnet ut, men det jevne sloeret for smale
   skjermer har ikke slaatt inn enda. Der maaler stikktittelen 4.89. */
.hero .eyebrow--light,.hero__and{color:#E0EEFA}
/* Under 1024 px er tekstspalta nesten like bred som seksjonen, og da
   beskytter den vannrette gradienten ingenting. Da trengs et jevnt slor.
   Bruddpunktet maa staa paa 1024 og ikke 900: maalt paa 960 px falt
   ingressen til 3.84 mot kravet 4.5 da sloeret slo inn foerst paa 900. */
@media (max-width:1024px){
  .hero::after{
    background:linear-gradient(180deg,rgba(16,31,41,.74) 0%,rgba(16,31,41,.64) 40%,rgba(16,31,41,.82) 100%);
  }
}
.hero__inner{padding:clamp(64px,10vw,132px) clamp(18px,4vw,32px) clamp(56px,8vw,104px);max-width:min(100%,var(--wrap))}
.hero h1{max-width:16ch;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero__and{font-weight:500;font-style:normal}
.hero__lead{max-width:56ch;margin-top:1.4rem;font-size:clamp(1rem,1.5vw,1.16rem);color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.9rem}
.hero__meta{
  margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--line-light);
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);
  font-family:"Archivo",sans-serif;font-weight:500;
}

/* ---------- merker ---------- */
.brands{background:var(--paper-2);border-bottom:1px solid var(--line)}
.brands__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;padding:20px 0}
/* To grupper: BilXtra er et verkstedkonsept vi er en del av, resten er
   merker vi er autorisert for. Skillestreken faller bort naar radene
   brytes, for da staar gruppene under hverandre og streken peker feil. */
.brands__gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.brands__gruppe + .brands__gruppe{padding-left:30px;border-left:1px solid var(--line)}
@media (max-width:860px){
  .brands__gruppe + .brands__gruppe{padding-left:0;border-left:0}
}
/* margin:0 maa staa. p arver 1rem bunnmarg, og align-items:center midtstiller
   margin-boksen, ikke teksten, saa etiketten laa 8 px hoyere enn brikkene. */
.brands__label{margin:0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:"Archivo",sans-serif;font-weight:600}
.brands__list{display:flex;flex-wrap:wrap;gap:10px 12px}
.brands__list li{display:flex}
.brands__list a{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.04em;
  color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 13px;background:var(--paper);
  text-decoration:none;transition:border-color .2s,color .2s,background .2s,transform .2s;
}
.brands__list a:hover{border-color:var(--blue);color:var(--blue);background:var(--paper-2);transform:translateY(-1px)}
/* BilXtra staar som logo. Samme luft som tekstbrikkene, og hoyden paa
   logoen er satt slik at brikka blir like hoy som dem: 22 + 14 + 2 = 38 px. */
.brands__merke{display:flex;align-items:center;gap:8px;padding:7px 13px}
.brands__merke img{display:block;height:22px;width:auto}

/* ---------- kunngjoring oeverst ---------- */
.kunngjoring{background:var(--rorbu);color:#fff}
.kunngjoring__inn{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px 16px;padding:8px 0;
}
.kunngjoring__tekst{margin:0;font-size:.86rem;line-height:1.45;text-align:center}
/* Aarstallet er en detalj, ikke budskapet. Paa smale skjermer kostet det
   en hel linje i stripa, saa det staar bare naar det er plass. */
.kunngjoring__mer{display:none}
@media (min-width:760px){
  .kunngjoring__mer{display:inline}
}
.kunngjoring__tekst strong{font-family:"Archivo",sans-serif;font-weight:700}
.kunngjoring__lenke{
  color:#fff;font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.55);padding:4px 0 2px;
}
.kunngjoring__lenke:hover{border-bottom-color:#fff}

/* ---------- seksjonshoder ---------- */
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4vw,52px)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head__lead{margin-top:1rem;color:var(--muted);font-size:1.05rem}

/* ---------- split ---------- */
.split{padding:clamp(56px,8vw,100px) 0}
.split__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.track{background:var(--paper-2);padding:clamp(26px,3.4vw,44px)}
.track--bat{background:var(--ink);color:rgba(255,255,255,.88)}
.track__tag{
  font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem;
}
.track--bat .track__tag{color:var(--blue-light)}
.track h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.track--bat h3{color:#fff}
.track__list{margin:1.8rem 0 0;display:grid;gap:1.35rem}
.track__list li{padding-left:18px;border-left:3px solid var(--rorbu)}
.track--bat .track__list li{border-left-color:var(--teal)}
.track__list h4{margin-bottom:.25rem}
.track--bat .track__list h4{color:#fff}
.track__list p{margin:0;font-size:.95rem;color:var(--muted)}
.track--bat .track__list p{color:rgba(255,255,255,.72)}
.track__link{
  display:inline-block;margin-top:1.8rem;font-family:"Archivo",sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--rorbu);padding-bottom:3px;
}
.track--bat .track__link{border-bottom-color:var(--teal);color:#fff}

/* ---------- feature (bil) ---------- */
.feature{background:var(--paper-2);padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.feature__text h2,.about__text h2,.waterline h2,.contact__info h2{margin-bottom:1.2rem}
.ticks{margin:1.6rem 0 2rem;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:28px;font-size:.98rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--rorbu);
}
.feature__media{display:grid;gap:16px}
.shot{margin:0;box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{font-size:.83rem;color:var(--muted);padding-top:.6rem}
.shot--placeholder{box-shadow:none}

.ph{
  border:2px dashed rgba(16,31,41,.28);background:
    repeating-linear-gradient(135deg,rgba(16,31,41,.035) 0 12px,transparent 12px 24px);
  min-height:210px;display:grid;align-content:center;justify-items:center;gap:6px;text-align:center;padding:24px;
}
.ph__label{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.86rem}
.ph__hint{font-size:.84rem;color:var(--muted);max-width:34ch}

/* ---------- vannlinje (båt) ---------- */
.waterline{position:relative;isolation:isolate;background:var(--sea);color:#fff;overflow:hidden}
.waterline__media{position:absolute;inset:0;z-index:-2}
.waterline__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 60%;
  filter:brightness(1.1) saturate(1.03);
}
.waterline::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,26,35,.88) 0%,rgba(11,26,35,.76) 48%,rgba(11,26,35,.3) 100%);
}
.waterline__inner{padding:clamp(60px,8vw,110px) clamp(18px,4vw,32px)}
.waterline__text{max-width:64ch}
.waterline h2{color:#fff;max-width:18ch}
.waterline p{color:rgba(255,255,255,.86)}
.waterline__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:2rem 0}
.wcard{background:rgba(255,255,255,.08);border:1px solid var(--line-light);padding:18px;border-radius:var(--r);backdrop-filter:blur(3px)}
.wcard h3{font-size:1.02rem;color:#fff;margin-bottom:.35rem}
.wcard p{margin:0;font-size:.9rem;color:rgba(255,255,255,.74)}

/* ---------- galleri ---------- */
.gallery{padding:clamp(56px,8vw,100px) 0;background:var(--paper)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.gitem{margin:0;background:var(--paper-2);box-shadow:var(--shadow);display:flex;flex-direction:column}
.gitem img{width:100%;height:240px;object-fit:cover;flex:none}
.gitem--ph{box-shadow:none;background:transparent}
.gitem--ph .ph{flex:1;min-height:240px}

/* ---------- om oss ---------- */
.about{background:var(--paper-2);padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.about__media{margin:0;box-shadow:var(--shadow)}
.about__media img{width:100%;height:100%;object-fit:cover}
.facts{display:flex;flex-wrap:wrap;gap:26px 40px;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.fact{display:flex;flex-direction:column}
.fact__num{font-family:"Archivo",sans-serif;font-weight:800;font-size:2.1rem;letter-spacing:-.03em;line-height:1}
.fact__lab{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}

/* ---------- anmeldelser ---------- */
.reviews{padding:clamp(56px,8vw,100px) 0;background:var(--paper)}
.rating{margin-top:1rem;color:var(--muted)}
.rating__stars{color:#E0A400;letter-spacing:.08em}
.slider{position:relative}
.slider__viewport{overflow:hidden}
.slider__track{display:flex;gap:18px;transition:transform .45s cubic-bezier(.4,.1,.2,1);touch-action:pan-y}
.rcard{
  flex:0 0 calc((100% - 36px)/3);background:var(--paper-2);border:1px solid var(--line);
  border-top:3px solid var(--rorbu);padding:26px;display:flex;flex-direction:column;justify-content:space-between;
}
.rcard p{font-size:1rem}
.rcard__by{font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slider__nav{display:flex;gap:10px;justify-content:center;margin-top:26px}
.sbtn{
  width:46px;height:46px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer;
  font-size:1.1rem;border-radius:var(--r);transition:background .2s,color .2s;
}
.sbtn:hover{background:var(--ink);color:#fff}

/* ---------- kontakt ---------- */
.contact{background:var(--ink);color:#fff;padding:clamp(56px,8vw,100px) 0}
.contact__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px)}
.contact h2{color:#fff}
.cinfo{display:grid;gap:1rem;margin:1.8rem 0 2rem}
.cinfo>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding-bottom:1rem;border-bottom:1px solid var(--line-light)}
.cinfo dt{font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA9B4}
.cinfo dd{margin:0}
.cinfo a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.map__frame{border:1px solid var(--line-light);height:260px;overflow:hidden}
.map__frame iframe{width:100%;height:292px;border:0;display:block;filter:grayscale(.25)}
.map__credit{font-size:.74rem;color:#8FA9B4;margin:.5rem 0 0}

.cform{background:var(--paper-2);color:var(--ink);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)}
.cform h3{margin-bottom:.4rem}
.cform__note{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem}
.field{display:grid;gap:6px;margin-bottom:1rem}
.field label{font-family:"Archivo",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);width:100%;
}
.field textarea{resize:vertical}
.cform .btn{width:100%;margin-top:.4rem}
.cform__demo{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;text-align:center}
/* Fella skal vaere usynlig for folk, men staa i skjemaet for roboter.
   Derfor flyttes den ut av bildet i stedet for display:none, som er
   lettere for en robot aa oppdage og hoppe over. */
.cform__felle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__svar{margin:.9rem 0 0;font-size:.9rem;padding:10px 12px;border-radius:var(--r);line-height:1.5}
.cform__svar--ok{background:#E7F1EC;color:#14543a;border-left:3px solid #1F6B45}
.cform__svar--feil{background:#FBECEB;color:var(--rorbu-dark);border-left:3px solid var(--rorbu)}

/* ---------- footer ---------- */
.site-footer{background:#0B1A23;color:rgba(255,255,255,.72);padding:clamp(42px,6vw,66px) 0 24px;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer__logo{width:auto;height:34px;margin-bottom:1rem}
.site-footer h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA9B4;margin-bottom:.8rem}
.site-footer ul{display:grid;gap:.5rem}
.site-footer a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.site-footer a:hover{color:#fff}
.footer__org{font-size:.85rem;color:rgba(255,255,255,.55)}
.footer__bottom .credit{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.footer__bottom .credit:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.footer__bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:36px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:rgba(255,255,255,.5);
}

/* ---------- kampanjer ---------- */
.kampanjer{background:var(--paper-2);padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--line)}
.kampanjer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.kampanje{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--rorbu);border-radius:var(--r);overflow:hidden;
}
.kampanje__bilde{margin:0;background:var(--paper-3)}
.kampanje__bilde img{width:100%;height:200px;object-fit:cover}
.kampanje__inn{padding:24px;display:flex;flex-direction:column;flex:1}
.kampanje h3{margin-bottom:.5rem}
.kampanje p{color:var(--muted);font-size:.97rem}
.kampanje__frist{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rorbu);margin:0 0 .6rem;
}
.kampanje .btn{align-self:flex-start;margin-top:auto}

/* ---------- Norboat og opptak ---------- */
.godkjent{background:var(--paper);padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--line)}
.godkjent__grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.godkjent__logo{width:100%;max-width:300px;height:auto}
.godkjent__tekst .ticks{margin-bottom:1.4rem}

/* ---------- til salgs ---------- */
.forsalg{background:var(--paper-2);padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.forsalg__blokk + .forsalg__blokk{margin-top:clamp(44px,6vw,76px)}
/* nowrap med vilje. Med wrap brot "Nye og brukte motorer" til to linjer
   mens "Nye og brukte baater" ble staaende paa en, og de to blokkene fikk
   ulik hoyde. Under 560 px stables begge likt i stedet. */
.forsalg__hode{
  display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.forsalg__hode h3{font-size:clamp(1.35rem,2.4vw,1.85rem);min-width:0}
.forsalg__hode .track__link{margin-top:0;flex:0 0 auto;white-space:nowrap}
@media (max-width:560px){
  .forsalg__hode{flex-direction:column;align-items:flex-start;gap:10px}
}
.forsalg__tom{
  border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--muted);margin:0;
}
.kortrad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.vare{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s;
}
.vare:hover{border-color:var(--blue);transform:translateY(-2px)}
.vare__bilde{position:relative;margin:0;background:var(--paper-3);aspect-ratio:4/3;overflow:hidden}
.vare__bilde img{width:100%;height:100%;object-fit:cover}
.vare__bilde button{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.vare__bilde .ph{min-height:0;height:100%;border:0;border-bottom:1px solid var(--line)}
.vare__antall{
  position:absolute;right:8px;bottom:8px;background:rgba(16,31,41,.82);color:#fff;
  font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  padding:4px 9px;border-radius:var(--r);
}
.vare__inn{padding:20px;display:flex;flex-direction:column;flex:1}
.vare__merke{
  align-self:flex-start;font-family:"Archivo",sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--muted);
  padding:4px 9px;border-radius:var(--r);margin:0 0 .7rem;
}
.vare__merke--ny{background:var(--blue)}
.vare__merke--solgt{background:var(--ink)}
.vare__merke--reservert{background:var(--rorbu)}
.vare h4{font-size:1.08rem;margin-bottom:.6rem}
.vare__fakta{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 .9rem}
.vare__fakta li{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:var(--r);padding:3px 8px;
}
.vare__tekst{font-size:.93rem;color:var(--muted);margin:0 0 1rem;white-space:pre-line}
.vare__pris{
  margin:auto 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.01em;
}
.vare__pris small{
  display:block;font-family:"Karla",sans-serif;font-weight:400;font-size:.8rem;
  color:var(--muted);letter-spacing:0;margin-top:.2rem;
}
.vare--solgt .vare__bilde img{filter:grayscale(1) opacity(.6)}

/* ---------- leverandoerer ---------- */
.utstyr{background:var(--paper);padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--line)}
.leverandorer{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.leverandorer a{
  display:grid;gap:.3rem;align-content:start;height:100%;text-decoration:none;background:var(--paper-2);
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r);
  padding:24px;transition:border-color .2s,transform .2s;
}
.leverandorer a:hover{border-color:var(--blue);transform:translateY(-2px)}
.leverandorer__navn{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.01em}
.leverandorer__hva{color:var(--muted);font-size:.93rem}
.leverandorer__url{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--blue);margin-top:.4rem;
}

/* ---------- priser ---------- */
.priser{background:var(--paper-2);padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--line)}
.pristabell{width:100%;border-collapse:collapse;font-size:.98rem}
.pristabell th{
  text-align:left;font-family:"Archivo",sans-serif;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:2px solid var(--line);
}
.pristabell th:last-child,.pristabell td:last-child{text-align:right;white-space:nowrap}
.pristabell td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pristabell td:last-child{font-family:"Archivo",sans-serif;font-weight:700}
.pristabell small{display:block;color:var(--muted);font-size:.85rem;margin-top:.2rem}

/* ---------- galleritekst ---------- */
.gitem figcaption{padding:12px 14px;font-size:.86rem;color:var(--muted)}

/* ---------- bildevisning ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(8,16,22,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,5vw,56px);
}
.lightbox__bilde{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox__lukk,.lightbox__pil{
  position:absolute;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  color:#fff;cursor:pointer;font-size:1.4rem;line-height:1;width:48px;height:48px;
  border-radius:var(--r);transition:background .2s;
}
.lightbox__lukk:hover,.lightbox__pil:hover{background:rgba(255,255,255,.28)}
.lightbox__lukk{top:16px;right:16px;font-size:1.8rem}
.lightbox__pil--forrige{left:12px;top:50%;transform:translateY(-50%)}
.lightbox__pil--neste{right:12px;top:50%;transform:translateY(-50%)}
.lightbox--enkelt .lightbox__pil{display:none}

/* ---------- reveal ---------- */
/* Innfellingen er scopet til .js, som settes av et inline-skript i <head>.
   Uten JavaScript staar alt innhold synlig. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- responsivt ---------- */
@media (max-width:1024px){
  /* Naar teksten begynner aa naa ut i den lyse hoeyresiden av bildet,
     maa sloret opp igjen for aa holde kontrasten over AA. */
  .waterline::after{
    background:linear-gradient(100deg,rgba(11,26,35,.92) 0%,rgba(11,26,35,.86) 46%,rgba(11,26,35,.66) 100%);
  }
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .rcard{flex:0 0 calc((100% - 18px)/2)}
  .kortrad{grid-template-columns:repeat(2,1fr)}
  .leverandorer{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--paper-2);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;display:none;box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px clamp(18px,4vw,32px);border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav__cta{margin:14px clamp(18px,4vw,32px) 0;text-align:center}
  .site-header__inner{position:relative}
  .split__grid,.feature__grid,.about__grid,.contact__grid{grid-template-columns:1fr}
  .godkjent__grid{grid-template-columns:1fr;justify-items:start}
  .godkjent__logo{max-width:240px}
  .about__media{order:-1}
  .waterline__cards{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  h1{font-size:clamp(1.85rem,7.6vw,2.7rem)}
  .hero__inner{padding-top:52px;padding-bottom:52px}
  .hero h1{max-width:22ch}
  .hero__lead{font-size:1rem}
  .hero__meta{font-size:.76rem;letter-spacing:.04em}
  .hero__actions .btn{flex:1 1 100%;text-align:center}
  .topbar__item--hide{display:none}
  .gallery__grid{grid-template-columns:1fr}
  .kortrad{grid-template-columns:1fr}
  .leverandorer{grid-template-columns:1fr}
  .rcard{flex:0 0 100%}
  .cinfo>div{grid-template-columns:1fr;gap:2px}
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  h1{font-size:1.62rem;line-height:1.12}
  h2{font-size:1.45rem}
  .hero__inner{padding-left:16px;padding-right:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .brand__logo{height:26px}
  .track{padding:22px}
  .fact__num{font-size:1.7rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.topbar,.kunngjoring,.slider__nav,.cform,.lightbox{display:none}
  body{background:#fff}
}