/* G. Berntsen AS - "Termogrammet".
   The reading field stays achromatic; the iron ramp is confined to the rail,
   the imagery and the isotherm marks. Hard steps, never bloom. */

:root{
  color-scheme:dark;

  /* The iron ramp - raw material, never themed. Both polarities are built from it. */
  --iron-0:#12060F;
  --iron-1:#3A0E52;
  --iron-2:#8E1450;
  --iron-3:#C4231B;
  --iron-4:#D8480F;
  --iron-5:#E89A20;
  --iron-6:#F6D77A;
  --iron-7:#FFF6E4;

  /* The instrument's own chrome. A camera screen is a camera screen in any light,
     so the viewfinder panel does not follow the page theme - only its polarity does. */
  --chrome:#08090B;
  --chrome-fg:#FFF6E4;
  --chrome-data:#E89A20;
  --chrome-line:rgba(255,246,228,.28);
  --chrome-scrim:rgba(8,9,11,.82);

  /* ── WHITE-HOT: the viewfinder. Heat reads at the bright end of the ramp. ─────── */
  /* ground */
  --bg-sunk:#08090B;
  --bg:#0C0E11;
  --surface:#12151A;
  --surface-2:#191D23;
  --surface-3:#2A3038;
  --line:rgba(233,240,247,.11);
  --line-2:rgba(233,240,247,.20);

  /* reading field */
  --fg:#EDF1F5;
  --fg-2:rgba(237,241,245,.76);
  --fg-3:rgba(237,241,245,.60);

  /* accents - the ramp's hot end, because the ground is cold */
  --brand:#D8480F;      /* logo red - graphics, rules and the ramp only */
  --brand-fill:#C4400C; /* the same red, deepened so --on-fill clears AA (5.1:1) */
  --signal:#EE5A1E;     /* text-size red, 5.6:1 on --bg */
  --data:#E89A20;       /* measured values and live state, 9.0:1 on --bg */
  --brand-fill-hi:#AE3708; /* hover deepens rather than brightens: #fff stays at 6.3:1 */
  --on-fill:#FFFFFF;
  --ok:#4FB477;
  --err:#FF6B5A;
  --wash:9%;      /* accent wash strength - paper needs far less than near-black */
  --wash-end:42%;

  /* The legends carry the same 22 isotherm bands thermal.js posterises into - hard
     steps, never a bloom. Generated from the IRON stops above; edit both together. */
  --ramp:linear-gradient(to right,#12060f 0% 4.5455%,#1d0825 4.5455% 9.0909%,#290a3a 9.0909% 13.6364%,#370d4e 13.6364% 18.1818%,#4d0f53 18.1818% 22.7273%,#661155 22.7273% 27.2727%,#811351 27.2727% 31.8182%,#991648 31.8182% 36.3636%,#ae1b39 36.3636% 40.9091%,#bb2027 40.9091% 45.4545%,#c82a19 45.4545% 50%,#d44111 50% 54.5455%,#df5813 54.5455% 59.0909%,#e86f18 59.0909% 63.6364%,#e88b1d 63.6364% 68.1818%,#eba42d 68.1818% 72.7273%,#f0b948 72.7273% 77.2727%,#f4ca64 77.2727% 81.8182%,#f7da82 81.8182% 86.3636%,#f9e5a6 86.3636% 90.9091%,#fceec6 90.9091% 95.4545%,#fff6e4 95.4545% 100%);
  --ramp-v:linear-gradient(to top,#12060f 0% 4.5455%,#1d0825 4.5455% 9.0909%,#290a3a 9.0909% 13.6364%,#370d4e 13.6364% 18.1818%,#4d0f53 18.1818% 22.7273%,#661155 22.7273% 27.2727%,#811351 27.2727% 31.8182%,#991648 31.8182% 36.3636%,#ae1b39 36.3636% 40.9091%,#bb2027 40.9091% 45.4545%,#c82a19 45.4545% 50%,#d44111 50% 54.5455%,#df5813 54.5455% 59.0909%,#e86f18 59.0909% 63.6364%,#e88b1d 63.6364% 68.1818%,#eba42d 68.1818% 72.7273%,#f0b948 72.7273% 77.2727%,#f4ca64 77.2727% 81.8182%,#f7da82 81.8182% 86.3636%,#f9e5a6 86.3636% 90.9091%,#fceec6 90.9091% 95.4545%,#fff6e4 95.4545% 100%);

  /* Fixed type steps. The fluid roles (display, h2, h3, lead, body) carry their own
     clamps; everything else lands on one of these four. --label is the floor. */
  --label:.6875rem;   /* 11px - the legibility floor for tracked micro-labels */
  --t-xs:.8rem;       /* 12.8px - designations, legal line */
  --t-sm:.9rem;       /* 14.4px - helper text, errors, captions, footer address */
  --t-md:1rem;        /* 16px  - controls, inputs, nav, secondary readouts */
  --wrap:78rem;
  --gut:clamp(1.25rem,4vw,3.5rem);

  --step:.32s cubic-bezier(.2,.8,.25,1);
  --theme-step:.45s cubic-bezier(.2,.8,.25,1);
}

/* ── BLACK-HOT: the report. Heat reads at the DARK end, because the ground is paper.
   Not an inversion of the dark theme - the other half of a control real thermal
   cameras ship, which is why the ramp reverses and the hero canvas re-renders. ──── */
[data-theme=light]{
  color-scheme:light;

  --bg-sunk:#EFEAE1;
  --bg:#F7F4EF;
  --surface:#FFFFFF;
  --surface-2:#DED7CC;
  --surface-3:#C7BFB2;
  --line:rgba(21,23,27,.14);
  --line-2:rgba(21,23,27,.26);

  --fg:#15171B;         /* 16.4:1 on paper */
  --fg-2:#3E434B;       /* 9.1:1 */
  --fg-3:#5A616A;       /* 5.7:1 */

  --brand:#D8480F;      /* the logo is the logo in both polarities */
  --brand-fill:#A82F08; /* #fff on it: 6.8:1 */
  --signal:#9C2A06;     /* 7.0:1 on paper */
  --data:#7A1140;       /* the ramp's cold end, 9.7:1 - hot reads dark here */
  --brand-fill-hi:#8A2606;
  --ok:#1C6B3F;
  --err:#B0261A;
  --wash:4.5%;
  --wash-end:66%;

  --ramp:linear-gradient(to right,#fff6e4 0% 4.5455%,#fceec6 4.5455% 9.0909%,#f9e5a6 9.0909% 13.6364%,#f7da82 13.6364% 18.1818%,#f4ca64 18.1818% 22.7273%,#f0b948 22.7273% 27.2727%,#eba42d 27.2727% 31.8182%,#e88b1d 31.8182% 36.3636%,#e86f18 36.3636% 40.9091%,#df5813 40.9091% 45.4545%,#d44111 45.4545% 50%,#c82a19 50% 54.5455%,#bb2027 54.5455% 59.0909%,#ae1b39 59.0909% 63.6364%,#991648 63.6364% 68.1818%,#811351 68.1818% 72.7273%,#661155 72.7273% 77.2727%,#4d0f53 77.2727% 81.8182%,#370d4e 81.8182% 86.3636%,#290a3a 86.3636% 90.9091%,#1d0825 90.9091% 95.4545%,#12060f 95.4545% 100%);
  --ramp-v:linear-gradient(to top,#fff6e4 0% 4.5455%,#fceec6 4.5455% 9.0909%,#f9e5a6 9.0909% 13.6364%,#f7da82 13.6364% 18.1818%,#f4ca64 18.1818% 22.7273%,#f0b948 22.7273% 27.2727%,#eba42d 27.2727% 31.8182%,#e88b1d 31.8182% 36.3636%,#e86f18 36.3636% 40.9091%,#df5813 40.9091% 45.4545%,#d44111 45.4545% 50%,#c82a19 50% 54.5455%,#bb2027 54.5455% 59.0909%,#ae1b39 59.0909% 63.6364%,#991648 63.6364% 68.1818%,#811351 68.1818% 72.7273%,#661155 72.7273% 77.2727%,#4d0f53 77.2727% 81.8182%,#370d4e 81.8182% 86.3636%,#290a3a 86.3636% 90.9091%,#1d0825 90.9091% 95.4545%,#12060f 95.4545% 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1.0625rem,.99rem + .35vw,1.15rem);
  line-height:1.62;
  font-synthesis-weight:none;
}

/* browser surfaces belong to the design too */
::selection{background:var(--brand-fill);color:var(--on-fill)}
:focus-visible{outline:2px solid var(--data);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--surface-2) var(--bg-sunk)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-sunk)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border:3px solid var(--bg-sunk);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--surface-3)}

p,figcaption,li,dd,.lead{text-wrap:pretty}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand-fill);color:var(--on-fill);
  padding:.75rem 1.25rem;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}

/* ── readouts ───────────────────────────────────────────────── */
.mono,.std,.desig dt,.desig dd,.facts dt,.contact__k,.tag,
.cert__desig,.phone__label,.rail__marks span,.legal__facts dt,.legal__n{
  font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}

/* ── type ───────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;
  font-stretch:92%}
.display{font-size:clamp(2.5rem,1.2rem + 5.4vw,5.4rem);font-stretch:88%;letter-spacing:-.035em}
.display em{font-style:normal;color:var(--signal)}
h2{font-size:clamp(1.85rem,1.15rem + 2.5vw,3.1rem)}
h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.15rem);letter-spacing:-.025em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--fg-2);max-width:34ch;line-height:1.5}

/* ── buttons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.35rem;
  font-weight:700;font-size:var(--t-md);letter-spacing:-.01em;text-decoration:none;
  border:1px solid transparent;transition:background var(--step),border-color var(--step),color var(--step),transform var(--step)}
.btn .ic{width:1.15em;height:1.15em;flex:none}
.btn--primary{background:var(--brand-fill);color:var(--on-fill)}
.btn--primary:hover{background:var(--brand-fill-hi)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost:hover{border-color:var(--data);color:var(--data)}
.btn--ghost:active{transform:translateY(1px)}
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.lnk{display:inline-flex;align-items:center;gap:.5rem;color:var(--signal);font-weight:700;
  text-decoration:none;padding-block:.6rem;border-bottom:1px solid transparent;
  transition:border-color var(--step)}
.lnk .ic{width:1.05em;height:1.05em;transition:translate var(--step)}
.lnk:hover{border-color:var(--signal)}
.lnk:hover .ic{translate:.3rem 0}
.lnk:active .ic{translate:.15rem 0}

/* ── nav ────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background var(--step)}
.nav__in{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:4.5rem}
.nav__logo{flex:none;display:block;margin-right:auto;
  width:clamp(9.5rem,17vw,12.5rem);aspect-ratio:560/214;
  background:url(../img/logo-reversed-420.webp) left center/contain no-repeat}
html[data-theme=light] .nav__logo{background-image:url(../img/logo-420.webp)}
.nav__links{display:flex;gap:clamp(.9rem,2vw,1.8rem)}
.nav__links a{text-decoration:none;color:var(--fg-2);font-size:var(--t-md);font-weight:600;
  padding:.4rem 0;border-bottom:2px solid transparent;transition:color var(--step),border-color var(--step)}
.nav__links a:hover{color:var(--fg)}
.nav__links a[aria-current=true]{color:var(--fg);border-color:var(--brand)}
.nav__call{padding:.65rem 1rem;font-size:var(--t-md);background:var(--surface);border-color:var(--line-2);color:var(--fg)}
.nav__call:hover{border-color:var(--data);color:var(--data)}
.nav__burger{display:none;flex:none;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--line-2);
  cursor:pointer;padding:0;place-items:center;gap:5px;flex-direction:column;justify-content:center}
.nav__burger span{display:block;width:1.15rem;height:1.5px;background:var(--fg);transition:transform var(--step),opacity var(--step)}
.nav__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav__mobile{display:none;flex-direction:column;border-top:1px solid var(--line);
  padding:.5rem var(--gut) 1.25rem}
.nav__mobile a{padding:.95rem 0;text-decoration:none;color:var(--fg);font-weight:600;
  border-bottom:1px solid var(--line)}
.nav__mobile-call{margin-top:1rem;background:var(--brand-fill);color:var(--on-fill);text-align:center;
  padding:1rem!important;border:0!important;font-weight:700}

@media (max-width:900px){
  .nav__links,.nav__call{display:none}
  .nav__burger{display:flex}
  .nav__mobile[data-open]{display:flex}
}

/* ── the scale rail (navigation) ────────────────────────────── */
/* Footprint is 3.6rem so it always sits inside the page margin; the label rides
   left of the rail as a chip and only for the active or hovered mark. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rail{position:fixed;right:1.15rem;top:50%;translate:0 -50%;z-index:30;
  display:none;align-items:stretch;gap:.6rem;height:min(56vh,28rem);width:3.6rem}
.rail__ramp{width:6px;flex:none;background:var(--ramp-v);
  border:1px solid var(--line);order:2}
.rail__marks{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;
  justify-content:space-between;order:1}
.rail__marks li{display:flex;justify-content:flex-end}
.rail__marks a{position:relative;display:block;width:1.5rem;height:1.5rem;
  display:grid;place-items:center;text-decoration:none}
.rail__marks a::after{content:"";width:1.5rem;height:1px;background:var(--line-2);
  transform:scaleX(.5);transform-origin:right;
  transition:transform var(--step),background var(--step)}
.rail__lab{position:absolute;right:calc(100% + .35rem);top:50%;translate:0 -50%;
  font-size:var(--label);text-transform:uppercase;color:var(--fg);white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);padding:.28rem .45rem;
  opacity:0;pointer-events:none;transition:opacity var(--step)}
.rail__marks a:hover::after,.rail__marks a:focus-visible::after{transform:scaleX(1);background:var(--fg)}
.rail__marks a:hover .rail__lab,.rail__marks a:focus-visible .rail__lab{opacity:1}
.rail__marks a[aria-current=true]::after{transform:scaleX(1);background:var(--data)}
/* Only where the page margin is wide enough to hold it without touching content. */
@media (min-width:1460px){.rail{display:flex}}

/* ── hero / viewfinder ──────────────────────────────────────── */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,8vw,7rem);border-bottom:1px solid var(--line)}
.hero__grid{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto;
  display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}

.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.desig{display:flex;flex-wrap:wrap;gap:0;margin:2.5rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.desig>div{padding:.15rem 1.15rem .15rem 0;margin-right:1.15rem;border-right:1px solid var(--line)}
.desig>div:last-child{border-right:0;margin-right:0}
.desig dt{margin:0;font-size:var(--label);text-transform:uppercase;color:var(--fg-3)}
.desig dd{margin:.15rem 0 0;font-size:var(--t-md);font-weight:600;color:var(--data)}

/* Registering --wipe makes the seam a real animatable length, so the opening sweep is a CSS
   transition rather than a script loop: it cannot strand half-way, and the reduced-motion
   block below already neutralises it. */
@property --wipe{syntax:"<percentage>";inherits:true;initial-value:46%}
.finder{margin:0}
.finder[data-sweep]{transition:--wipe 1.15s cubic-bezier(.16,1,.3,1)}
.finder__box{position:relative;overflow:hidden;background:var(--chrome);
  border:1px solid var(--line-2);aspect-ratio:16/9}
.finder__box img{width:100%;height:100%;object-fit:cover}
.finder__box canvas{position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 0 0 var(--wipe,46%));image-rendering:auto}
.finder__seam{position:absolute;top:0;bottom:0;left:var(--wipe,46%);width:2px;
  background:var(--chrome-fg);opacity:.9;pointer-events:none}
.finder__ticks i{position:absolute;width:1.15rem;height:1.15rem;border:2px solid color-mix(in srgb,var(--chrome-fg) 80%,transparent);pointer-events:none}
.finder__ticks i:nth-child(1){top:.7rem;left:.7rem;border-right:0;border-bottom:0}
.finder__ticks i:nth-child(2){top:.7rem;right:.7rem;border-left:0;border-bottom:0}
.finder__ticks i:nth-child(3){bottom:.7rem;left:.7rem;border-right:0;border-top:0}
.finder__ticks i:nth-child(4){bottom:.7rem;right:.7rem;border-left:0;border-top:0}
.finder__hud{position:absolute;top:1.9rem;left:1.9rem;display:flex;gap:.4rem;flex-wrap:wrap;pointer-events:none}
.tag{font-size:var(--label);text-transform:uppercase;background:var(--chrome-scrim);color:var(--chrome-fg);
  padding:.32rem .5rem;border:1px solid var(--chrome-line)}
.tag--dim{color:var(--chrome-data);border-color:color-mix(in srgb,var(--chrome-data) 40%,transparent)}
.finder__scale{position:absolute;right:1.9rem;bottom:1.75rem;display:flex;align-items:center;
  gap:.5rem;pointer-events:none;font-family:"Azeret Mono",monospace;font-size:var(--label);
  text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-fg);
  background:var(--chrome-scrim);padding:.35rem .55rem;
  border:1px solid color-mix(in srgb,var(--chrome-fg) 20%,transparent)}
.finder__ramp{width:clamp(3.5rem,9vw,6.5rem);height:.5rem;background:var(--ramp)}
.finder__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.finder__handle{position:absolute;top:50%;left:var(--wipe,46%);translate:-50% -50%;
  width:2.6rem;height:2.6rem;display:grid;place-items:center;background:var(--chrome);
  border:1px solid var(--chrome-fg);pointer-events:none}
.finder__handle svg{width:1.3rem;height:1.3rem;fill:none;stroke:var(--chrome-fg);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.finder__range:focus-visible+.finder__handle{outline:2px solid var(--data);outline-offset:3px}
.finder figcaption{margin-top:.9rem;font-size:var(--t-md);line-height:1.55;color:var(--fg-2);max-width:52ch}

/* Below the two-column breakpoint the FIRST VIEWPORT promise only holds if the instrument
   itself is above the fold, so the text block dissolves and the finder takes third place. */
@media (max-width:959.98px){
  .hero__grid{gap:0}
  .hero__text{display:contents}
  .hero__text .display{order:1;margin-bottom:1rem}
  .hero__text .lead{order:2;margin-bottom:0}
  .finder{order:3;margin-top:clamp(2.1rem,7vw,2.75rem)}
  .hero__actions{order:4;margin-top:clamp(1.75rem,5vw,2.5rem)}
  .desig{order:5}
}

/* ── bands ──────────────────────────────────────────────────── */
.band{padding-block:clamp(3.5rem,8vw,7rem) clamp(2.75rem,5vw,4.25rem);border-bottom:1px solid var(--line)}
.band__head{display:grid;gap:1.5rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
/* The band head is the whole band when a section carries no table or grid under it. */
.band__head:last-child{margin-bottom:0}
@media (min-width:900px){.band__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}}
.band__head p{color:var(--fg-2);margin:0;max-width:62ch}

.std{font-size:var(--t-xs);color:var(--data)}
.nb{white-space:nowrap}

/* ── certification ──────────────────────────────────────────── */
.cert{padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--line);background:var(--bg-sunk)}
.cert__head{display:grid;gap:1.5rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
@media (min-width:900px){.cert__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}}
.cert__head p{color:var(--fg-2);margin:0;max-width:62ch}
/* Nemko-linja. Kunden ba om at sertifiseringsorganet kom tydelig fram, og det er
   et annet slag opplysning enn radene under: de sier hva sertifikatet dekker,
   denne sier hvem som har utstedt det. Derfor står den utenfor lista, under
   overskrifta, med signalfargen og en tykkere strek over - det eneste stedet i
   seksjonen som har en. Radgapet i hodet må ned samtidig, ellers henger linja
   4 rem under tittelen og leser som en ny bolk. */
@media (min-width:900px){.cert__head{row-gap:clamp(1.5rem,2.5vw,2.25rem)}}
/* p.cert__by, ikke .cert__by: linja ER en <p>, og `.cert__head p` over har et
   typeselektor. En naken klasse taper mot den, så bredden og margen herfra ble
   aldri brukt - elementet arvet 62ch fra avsnittsregelen i stedet. */
p.cert__by{grid-column:1;margin:0;align-self:start;display:grid;gap:.3rem;
  padding-top:1.1rem;border-top:2px solid var(--signal);
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);font-weight:800;letter-spacing:-.02em;
  color:var(--signal);line-height:1.1}
.cert__by-k{font-size:var(--t-xs);font-weight:500;color:var(--data);
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4}
.cert__by-d{font-size:var(--t-xs);font-weight:500;color:var(--fg-2);
  letter-spacing:.02em;line-height:1.4;margin-top:.15rem}
/* Sertifiseringsveggen. Ikke en tabell: et felt av hårstreker der hvert felt er ett
   sertifikat. Nummeret leder, fordi det er det folk leter etter; navnet er trukket ut
   av setningen og satt som overskrift; definisjonen er nede der den hører hjemme. */
.cert__list{margin:0;display:grid;border-block:1px solid var(--line)}
.cert__row{display:grid;gap:.85rem;padding-block:clamp(1.5rem,3vw,2.15rem);
  border-top:1px solid var(--line)}
.cert__row:first-child{border-top:0}
/* Readout-sporingen på .06em er satt for 11px-etiketter. På 16px blir den luftig og
   river «NEK 405-1» fra hverandre; designasjonen skal lese som én enhet. */
.cert__desig{margin:0;font-size:var(--t-md);font-weight:600;color:var(--data);
  letter-spacing:.02em;display:flex;align-items:baseline;gap:.6rem .9rem;flex-wrap:wrap}
.cert__who{font-size:var(--label);text-transform:uppercase;color:var(--fg-3);
  letter-spacing:.09em;margin-left:auto}
.cert__def{margin:0;color:var(--fg-2);max-width:46ch}
.cert__name{display:block;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);font-weight:800;
  line-height:1.06;letter-spacing:-.025em;color:var(--fg);margin-bottom:.5rem;
  font-variation-settings:"wdth" 92}
@media (min-width:760px){
  .cert__list{grid-template-columns:1fr 1fr}
  .cert__row:nth-child(2n+1){padding-right:clamp(1.75rem,3.5vw,3rem)}
  .cert__row:nth-child(2n){padding-left:clamp(1.75rem,3.5vw,3rem);
    border-left:1px solid var(--line)}
  .cert__row:nth-child(2){border-top:0}
}

/* ── about ──────────────────────────────────────────────────── */
.about{padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--line)}
.about__grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.about__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.about__text h2{margin-bottom:1.4rem}
.about__text p{color:var(--fg-2);max-width:58ch}
.facts{margin:0;align-self:start;border-top:1px solid var(--line-2)}
.facts>div{display:grid;gap:.15rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.facts dt{margin:0;font-size:var(--label);text-transform:uppercase;color:var(--fg-3)}
.facts dd{margin:0;font-weight:600}

/* ── contact: two honest paths, side by side ────────────────── */
.contact{padding-block:clamp(3.5rem,8vw,6rem);border-top:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) var(--wash),transparent),transparent var(--wash-end)),var(--bg-sunk)}
.contact__head{max-width:52ch;margin-bottom:clamp(2.25rem,5vw,3.25rem)}
.contact h2{margin-bottom:1.1rem}
.contact__lead{color:var(--fg-2);margin:0}
.contact__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:940px){.contact__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

.phone{display:inline-grid;gap:.35rem;text-decoration:none;
  border-bottom:2px solid transparent;transition:border-color var(--step)}
.phone:hover{border-color:var(--brand)}
.phone__label{font-size:var(--label);text-transform:uppercase;color:var(--fg-3)}
.phone__num{font-size:clamp(2.4rem,1.1rem + 4.2vw,3.6rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;font-stretch:88%}
.contact__list{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line-2)}
.contact__list li{display:grid;gap:.28rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.contact__list .ic{width:1.3rem;height:1.3rem;color:var(--signal);margin-bottom:.3rem}
.contact__k{font-size:var(--label);text-transform:uppercase;color:var(--fg-3)}
.contact__list a,.contact__list li > span:last-child{font-weight:600}
.contact__list a{color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--line-2);justify-self:start;padding-block:.55rem;
  transition:border-color var(--step),color var(--step);overflow-wrap:anywhere}
.contact__list a:hover{color:var(--data);border-color:var(--data)}

/* ── the form ───────────────────────────────────────────────── */
.form{background:var(--surface);border:1px solid var(--line-2);
  padding:clamp(1.5rem,3.5vw,2.5rem);display:grid;gap:1.35rem}
.form__title{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);margin:0}
.field{display:grid;gap:.5rem}
.field-row{display:grid;gap:1.35rem}
@media (min-width:520px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-size:var(--label);text-transform:uppercase;letter-spacing:.06em;
  font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg-2)}
.field__opt{text-transform:none;letter-spacing:.02em;color:var(--fg-3);font-weight:400}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--t-md);color:var(--fg);background:var(--bg);width:100%;
  border:1px solid var(--line-2);border-radius:0;padding:.85rem .9rem;
  transition:border-color var(--step),background var(--step)}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.55}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--fg-3)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--data)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--data);outline-offset:2px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
/* The error state is carried by a rule, a colour AND the message - never colour alone. */
.field[data-invalid] input,.field[data-invalid] textarea,.field[data-invalid] select{
  border-color:var(--err);background:color-mix(in srgb,var(--err) 7%,var(--bg))}
.field__err{margin:0;font-size:var(--t-sm);line-height:1.45;color:var(--err)}
.field__hint{margin:0;font-size:var(--t-sm);line-height:1.45;color:var(--fg-3)}

.select{position:relative;display:grid}
.select select{appearance:none;padding-right:2.75rem;cursor:pointer}
.select__ic{position:absolute;right:.9rem;top:50%;translate:0 -50%;width:1.35rem;height:1.35rem;
  pointer-events:none;fill:none;stroke:var(--fg-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.form__send{justify-self:start;justify-content:center;min-width:14rem;position:relative}
.form__send[disabled]{opacity:.62;cursor:progress}
.form__spin{display:none;animation:spin .9s linear infinite}
.form__send[data-busy] .form__spin{display:block}
@keyframes spin{to{rotate:360deg}}
.form__status{margin:0;padding:.9rem 1rem;font-size:var(--t-md);line-height:1.5;color:var(--fg);
  border:1px solid var(--line-2);background:var(--bg)}
.form__status[data-tone=ok]{border-color:color-mix(in srgb,var(--ok) 55%,transparent);
  background:color-mix(in srgb,var(--ok) 9%,var(--bg))}
.form__status[data-tone=err]{border-color:color-mix(in srgb,var(--err) 55%,transparent);
  background:color-mix(in srgb,var(--err) 9%,var(--bg))}
.form__status a{color:inherit;font-weight:700}
.form__note{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--fg-3)}

/* ── footer ─────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,3.5rem);background:var(--bg)}
.foot__in{display:grid;gap:1.25rem}
@media (min-width:820px){.foot__in{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2.5rem}}
.foot__logo{width:9.5rem;aspect-ratio:560/214;
  background:url(../img/logo-reversed-420.webp) left center/contain no-repeat}
html[data-theme=light] .foot__logo{background-image:url(../img/logo-420.webp)}
.foot__addr{margin:0;font-size:var(--t-sm);color:var(--fg-3);line-height:1.9}
/* Inline links in a block of text are exempt from the target-size minimum, but a footer
   phone number is a thing people actually tap on a phone. inline-block plus block padding
   takes these from 17px to a usable box; the two sit side by side on their own line, so
   the enlarged boxes never overlap each other. The line-height above pays for the height. */
.foot__addr a{display:inline-block;padding-block:.55rem;
  color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.foot__addr a:hover{color:var(--data);border-color:var(--data)}
/* Flex gap, not a margin on each link: a margin travels with a link that wraps to its
   own line and leaves it indented. */
.foot__legal{margin:0;font-size:var(--t-xs);color:var(--fg-3);
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.1rem}
.foot__legal a{display:inline-block;padding-block:.55rem;
  color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.foot__legal a:hover,.foot__legal a[aria-current=page]{color:var(--data);border-color:var(--data)}
.form__note a{color:var(--fg-2);text-decoration-color:var(--line-2);text-underline-offset:.2em}
.form__note a:hover{color:var(--data);text-decoration-color:var(--data)}

/* ── privacy statement (personvern.html) ────────────────────── */
/* A Read page in the same world. There is no hero here, so the fixed bar is on the page
   ground from the start (data-stuck in the markup) and the page pays for its height. */
.legal{padding-block:calc(5rem + clamp(2.75rem,6vw,4.5rem)) clamp(3.5rem,8vw,7rem)}
.legal__in{display:grid;gap:clamp(2.25rem,5vw,3.5rem)}
.legal__head{display:grid;gap:1.25rem;padding-bottom:clamp(2.25rem,5vw,3.5rem);
  border-bottom:1px solid var(--line-2)}
.legal__head h1{font-size:clamp(1.85rem,1.15rem + 2.5vw,3.1rem)}
.legal__lead{margin:0;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;
  color:var(--fg-2);max-width:48ch}
.legal__facts{margin:.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  border-top:1px solid var(--line)}
.legal__facts>div{display:grid;gap:.15rem;padding:.9rem 1.5rem .9rem 0;border-bottom:1px solid var(--line)}
.legal__facts dt{margin:0;font-size:var(--label);text-transform:uppercase;color:var(--fg-3)}
.legal__facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* The contents list is the way into a legal page: people come for one section. */
.legal__toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  column-gap:1.25rem;border-top:1px solid var(--line)}
.legal__toc a{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 0;
  border-bottom:1px solid var(--line);color:var(--fg-2);text-decoration:none;
  font-size:var(--t-sm);line-height:1.35}
.legal__toc a:hover{color:var(--fg)}
.legal__n{flex:none;min-width:1.5rem;font-size:var(--t-sm);font-weight:600;color:var(--data);
  letter-spacing:.02em}

.legal__body{max-width:44rem}
.legal__sec{padding-block:clamp(1.75rem,3.5vw,2.5rem);border-top:1px solid var(--line)}
.legal__sec:first-child{border-top:0;padding-top:0}
.legal__sec h2{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);letter-spacing:-.025em}
.legal__sec p,.legal__sec li,.legal__sec dd{color:var(--fg-2)}
.legal__sec p{max-width:64ch}
.legal__sec p:last-child,.legal__sec dl:last-child,.legal__sec ul:last-child{margin-bottom:0}
.legal__sec a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2)}
.legal__sec a:hover{color:var(--data);border-color:var(--data)}

.legal__ul{list-style:none;margin:0 0 1.1em;padding:0;display:grid;gap:.55rem}
.legal__ul li{position:relative;padding-left:1.35rem;max-width:62ch}
.legal__ul li::before{content:"";position:absolute;left:0;top:.7em;width:.4rem;height:.4rem;
  background:var(--brand)}
.legal__dl{margin:0 0 1.1em;display:grid;border-top:1px solid var(--line)}
.legal__dl>div{display:grid;gap:.2rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.legal__dl dt{margin:0;font-weight:600;color:var(--fg)}
.legal__dl dd{margin:0}
@media (min-width:640px){
  .legal__dl>div{grid-template-columns:11rem minmax(0,1fr);column-gap:1.5rem;align-items:baseline}
}
@media (min-width:960px){
  .legal__in{grid-template-columns:14rem minmax(0,1fr);column-gap:clamp(3rem,6vw,5.5rem)}
  .legal__head{grid-column:1/-1}
  .legal__toc{position:sticky;top:6.5rem;align-self:start}
  .legal__toc ol{grid-template-columns:1fr}
}

/* Switching polarity is a deliberate act, so the grounds cross rather than cut. The
   attribute is set for the length of the switch only, so nothing carries a paint-time
   transition it does not need. */
html[data-switching] *,
html[data-switching] *::before,
html[data-switching] *::after{
  transition:background-color var(--theme-step),background-image var(--theme-step),
             border-color var(--theme-step),color var(--theme-step),
             fill var(--theme-step),stroke var(--theme-step)!important;
}
/* Two raster wordmarks cannot cross-fade into each other, so the logo swaps cleanly
   instead of being dragged through an interpolation the engine cannot perform. */
html[data-switching] .nav__logo,
html[data-switching] .foot__logo{transition:none!important}

/* ── the one authored entrance ──────────────────────────────── */
.reveal{opacity:0;translate:0 1.15rem;transition:opacity .75s cubic-bezier(.16,1,.3,1),translate .75s cubic-bezier(.16,1,.3,1)}
.reveal[data-in]{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:0;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  /* Zeroing the duration still lets a press jump the element to its new transform in
     one frame, which is exactly the sudden movement this preference asks us to drop.
     The states stay reachable; only the displacement goes. */
  .btn--primary:active,.btn--ghost:active{transform:none}
  .lnk:hover .ic,.lnk:active .ic{translate:0}
}

/* ── narrow-screen corrections ──────────────────────────────── */
@media (max-width:640px){
  .finder__hud{top:1.5rem;left:1.5rem;gap:.3rem}
  .tag{font-size:var(--label);padding:.26rem .4rem;letter-spacing:.04em}
  .finder__scale{right:1.4rem;bottom:1.3rem;font-size:var(--label);padding:.3rem .45rem;gap:.4rem}
  .finder__ramp{width:3rem;height:.42rem}
  .finder__handle{width:2.2rem;height:2.2rem}
  .desig{gap:.35rem 0}
  .desig>div{flex:1 1 7.5rem;padding-right:.9rem;margin-right:.9rem}
  .desig>div:nth-child(2n){border-right:0;margin-right:0}
  /* The whole designation is one atom and fits: min-content here is 252px inside 350px. */
  .std{font-size:var(--label)}
}
@media (max-width:380px){
  .phone__num{font-size:2.15rem}
}

/* ── capture mode (?capture=1): settle motion, drop the fixed rail ────── */
html[data-capture] .reveal{opacity:1!important;translate:0!important;transition:none!important}
html[data-capture=""] .rail{display:none!important}

/* ── consent banner (consent.js) ────────────────────────────── */
/* A card in the corner, not a wall: the page stays readable and usable behind it. The two
   answers are the same size, the same style and side by side - refusing costs exactly what
   accepting does, which is what Datatilsynet asks of a consent. */
.cc{position:fixed;z-index:60;left:var(--gut);bottom:var(--gut);width:min(100% - var(--gut)*2,30rem);
  display:grid;gap:.95rem;padding:clamp(1.25rem,3vw,1.6rem);
  background:var(--surface);color:var(--fg);border:1px solid var(--line-2);border-top:2px solid var(--brand);
  animation:cc-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes cc-in{from{opacity:0;translate:0 1rem}}
.cc__k{margin:0;font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--data)}
.cc__p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--fg-2)}
.cc__now{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--fg)}
.cc__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cc__btn{justify-content:center;padding:.8rem 1rem;font-family:inherit;cursor:pointer;
  background:var(--bg);border-color:var(--line-2);color:var(--fg)}
.cc__btn:hover{border-color:var(--data);color:var(--data)}
.cc__btn:active{transform:translateY(1px)}
.cc__more{justify-self:start;font-size:var(--t-sm);color:var(--fg-2);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-block:.35rem}
.cc__more:hover{color:var(--data);border-color:var(--data)}
@media (max-width:520px){
  .cc{left:0;right:0;bottom:0;width:auto;border-inline:0;border-bottom:0;
    padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
}
.foot__btn{display:inline-block;padding:.55rem 0;font:inherit;cursor:pointer;background:none;
  border:0;border-bottom:1px solid var(--line-2);color:var(--fg-2)}
.foot__btn:hover{color:var(--data);border-color:var(--data)}
.cc[hidden],[data-cc-open][hidden]{display:none!important}
html[data-capture] .cc{display:none!important}

/* the booking form's honeypot: off-screen, never display:none, which some bots skip */
.form__trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── service and area pages (tjenester, /brann-og-slukkeanlegg, /mo-i-rana …) ──
   Read pages in the same world as personvern.html: same fixed bar on the page ground,
   same .legal column. Generated by tools/build-pages.py - edit the data there. */
.foot__nav{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:1.1rem;
  font-size:var(--t-xs);padding-top:1.1rem;border-top:1px solid var(--line)}
.foot__nav a{display:inline-block;padding-block:.55rem;color:var(--fg-2);text-decoration:none;
  border-bottom:1px solid var(--line-2)}
.foot__nav a:hover,.foot__nav a[aria-current=page]{color:var(--data);border-color:var(--data)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .6rem;
  font-size:var(--t-sm);color:var(--fg-3)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--line-2)}
.crumbs a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--line-2);
  display:inline-block;padding-block:.35rem}
.crumbs a:hover{color:var(--data);border-color:var(--data)}
.page__std{margin:0;font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--data)}
.page__media{margin:0;max-width:44rem}
.page__media img{display:block;width:100%;height:auto}
.page__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.page__cta .btn{min-height:2.75rem}
.page__list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.page__list li{border-bottom:1px solid var(--line)}
.page__list a{display:grid;gap:.15rem;padding:1rem 0;text-decoration:none;color:var(--fg)}
.page__list a:hover b{color:var(--data)}
.page__list b{font-weight:700}
.page__list span{color:var(--fg-2);font-size:var(--t-sm)}
.legal__sec .page__list a{border-bottom:0}
/* No table of contents on these pages. On a service page the left column is an aside:
   the photograph (when there is one) and the facts under it, held at the top while the
   text scrolls, so the column never runs empty below a small image. Without a photograph
   (avhending) the facts alone take the column. Below the two-column breakpoint the aside
   sits between the header and the text, full width. */
.page__aside{display:grid;gap:1.5rem;align-content:start}
.page__aside .legal__facts{margin:0}
@media (min-width:960px){
  .page .legal__in{grid-template-columns:minmax(0,1fr)}
  .page--aside .legal__in{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}
  .page .legal__head{grid-column:1/-1}
  .page--aside .page__aside{position:sticky;top:6.5rem;align-self:start}
  .page--aside .page__aside .legal__facts{grid-template-columns:1fr}
  .page--aside .page__media{max-width:none}
}
.crumbs [aria-current=page]{display:inline-block;padding-block:.35rem;color:var(--fg-3)}
.legal__sec .page__cta{margin-block:.25rem 1.1rem}

/* ── fagartikler (/fagartikler, /fagartikler/…) ──────────────────────────────────
   Same .legal column as the service pages. Generated by tools/build-pages.py. */
.legal__sec h3{margin:1.6rem 0 .5rem;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.3;
  letter-spacing:-.015em}
.legal__sec h2+h3{margin-top:0}
.page__quote{margin:0 0 1.1em;padding:.15rem 0 .15rem 1.25rem;border-left:1px solid var(--brand);max-width:62ch}
.page__quote p{margin:0 0 .4rem;color:var(--fg)}
.page__quote footer{font-size:var(--t-sm);color:var(--fg-3)}
.page__src{font-size:var(--t-sm)}
.page__src li{max-width:none}

/* Inline links inside fact lists (the phone number on /personvern and /mo-i-rana) are a
   line of text tall, ~20px. An invisible pseudo-element extends the hit area to ~46px
   without moving the text, the underline or the row. The rows carry .9rem of padding,
   so neighbouring targets never overlap. */
.legal__facts dd a,.legal__dl dd a{position:relative}
.legal__facts dd a::after,.legal__dl dd a::after{content:"";position:absolute;inset:-.7rem -.35rem}
/* On a phone the page CTAs stack full width, the same as the hero's, instead of two
   buttons of unrelated widths. */
@media (max-width:640px){.page__cta .btn{width:100%;justify-content:center}}
/* Without a photograph the facts open the aside; below the two-column breakpoint the
   header's own rule is directly above them, so the list's top rule would double it. */
@media (max-width:959.98px){.page__aside>.legal__facts:first-child{border-top:0;margin-top:-1rem}}