/* G. Berntsen AS - "Termogrammet", UTKAST 2.
   ─────────────────────────────────────────────────────────────────────────────
   An alternative composition of the same site. It loads AFTER assets/css/site.css
   and only overrides layout, so every colour, type step and component here is the
   one the real page already uses; this file cannot invent a second design system.

   Three things move:
     1. The viewfinder stops being a panel beside the headline and becomes the whole
        first viewport. The headline sits on it.
     2. The navigation is centred, with the wordmark on the left and the phone number
        and the contact action on the right.
     3. The five services are one visible list, framed by building and situation.

   The consequence of (1) is that the first viewport is now the instrument's own
   chrome rather than the page ground - so the type on it uses --chrome-fg, which is
   deliberately outside the theme. A camera screen is a camera screen in any light,
   and text over a photograph cannot flip to dark ink just because the page did. */

:root{
  /* The hot end of the ramp at text weight, for the one emphasised word in the
     headline. Fixed rather than themed, for the same reason as --chrome-fg. */
  --chrome-signal:#EE5A1E;
}

/* ── navigation: wordmark left, menu centred, booking right ─────────────────── */
/* The bar rides over the hero with no ground of its own until the hero is behind
   you; then it takes the page ground. data-stuck is set from v2.js. */
.v2 .nav{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background var(--step),border-color var(--step)}
.v2 .nav[data-stuck]{background:color-mix(in srgb,var(--bg) 86%,transparent);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.v2 .nav__in{position:relative;display:flex;align-items:center;gap:.75rem;min-height:5rem}
.v2 .nav__logo{margin-right:auto;width:clamp(8.5rem,14vw,11rem)}
/* Absolute so the menu is centred on the viewport, not on whatever is left over
   between the wordmark and the button - the whole point of this layout. */
.v2 .nav__links{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap}

.v2 .nav__book{padding:.65rem 1rem;font-size:var(--t-md);background:var(--surface);
  border-color:var(--line-2);color:var(--fg)}
.v2 .nav__book:hover{border-color:var(--data);color:var(--data)}
.v2 .nav__book .ic{width:1em;height:1em}
/* The phone number is in the bar at every width and every scroll position (PRODUCT.md,
   principle 2). On desktop it is a quiet link beside the contact button; below the
   breakpoint where the menu collapses it becomes the one filled button in the bar. */
.v2 .nav__call{display:inline-flex;padding:.65rem .5rem;font-size:var(--t-md);gap:.5rem;
  background:transparent;border-color:transparent;color:var(--fg)}
.v2 .nav__call:hover{color:var(--data)}
.v2 .nav__call .ic{width:1.05em;height:1.05em}
.v2 .nav__call,.v2 .nav__book{min-height:2.75rem}

/* Over the hero everything in the bar belongs to the instrument, not to the theme. */
.v2 .nav:not([data-stuck]) .nav__logo{background-image:url(../img/logo-reversed-420.webp)}
.v2 .nav:not([data-stuck]) .nav__links a{color:color-mix(in srgb,var(--chrome-fg) 84%,transparent)}
.v2 .nav:not([data-stuck]) .nav__links a:hover,
.v2 .nav:not([data-stuck]) .nav__links a[aria-current=true]{color:var(--chrome-fg)}
.v2 .nav:not([data-stuck]) .nav__links a[aria-current=true]{border-color:var(--chrome-signal)}
.v2 .nav:not([data-stuck]) .nav__book{background:color-mix(in srgb,#08090B 28%,transparent);
  border-color:color-mix(in srgb,var(--chrome-fg) 52%,transparent);color:var(--chrome-fg)}
.v2 .nav:not([data-stuck]) .nav__book:hover{border-color:var(--chrome-fg);
  background:color-mix(in srgb,var(--chrome-fg) 14%,transparent)}
.v2 .nav:not([data-stuck]) .nav__call{color:var(--chrome-fg)}
.v2 .nav:not([data-stuck]) .nav__burger{border-color:color-mix(in srgb,var(--chrome-fg) 52%,transparent)}
.v2 .nav:not([data-stuck]) .nav__burger span{background:var(--chrome-fg)}

.v2 .nav__mobile{background:var(--bg)}

/* The centred menu needs more clear space than the old left-aligned one, so it
   collapses earlier. The booking action stays visible next to the burger: it is
   the reason this layout exists. */
@media (max-width:1300px){
  .v2 .nav__links{display:none}
  .v2 .nav__burger{display:flex}
}
/* Phone and tablet: the visible action in the bar is the phone call. Booking is one tap
   away in the menu. */
@media (max-width:1100px){
  .v2 .nav__book{display:none}
  .v2 .nav__call{padding:.6rem 1rem;background:var(--brand-fill);color:var(--on-fill)}
  .v2 .nav__call:hover{background:var(--brand-fill-hi);color:var(--on-fill)}
  .v2 .nav:not([data-stuck]) .nav__call{background:#C4400C;color:#FFF;
    border-color:color-mix(in srgb,var(--chrome-fg) 50%,transparent)}
  .v2 .nav:not([data-stuck]) .nav__call:hover{background:#AE3708;border-color:var(--chrome-fg)}
}
/* The label stays down to the narrowest phone rather than collapsing to a bare
   arrow: an arrow alone has no accessible name and no meaning, and there is room
   for the words if the wordmark and the padding give some back. */
@media (max-width:430px){
  .v2 .nav__logo{width:6.75rem}
  .v2 .nav__in{gap:.4rem;min-height:4.5rem}
  .v2 .nav__call{padding:.6rem .7rem;font-size:var(--t-sm);gap:.4rem}
  .v2 .nav__call .ic{width:1em;height:1em}
}
@media (max-width:350px){
  .v2 .nav__logo{width:5.75rem}
  .v2 .nav__call .ic{display:none}
}

/* ── hero: the viewfinder IS the first viewport ─────────────────────────────── */
.v2 .hero{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:6rem 0 24vh;border-bottom:0;overflow:clip;isolation:isolate}
.v2 .hero .finder{position:absolute;inset:0;margin:0;display:block}
.v2 .hero .finder__box{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border:0}
.v2 .hero .finder__box img{width:100%;height:100%;object-fit:cover}

/* Type over a photograph has to be paid for. The linear pass grounds the top and
   bottom edges; the ellipse is centred on the headline block and does the work
   there. Behind the words the two together sit at ~0.85, which holds --chrome-fg
   above 4.5:1 against anything in this frame, including the ramp's hot end when
   the thermal side is dragged across. */
.v2 .hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(112% 74% at 50% 42%, rgba(8,9,11,.74) 0%, rgba(8,9,11,.34) 62%, rgba(8,9,11,0) 100%),
    linear-gradient(180deg, rgba(8,9,11,.74) 0%, rgba(8,9,11,.40) 24%, rgba(8,9,11,.44) 60%, rgba(8,9,11,.88) 100%)}

/* The drag lives in a band across the lower third, so the centred call to action
   above it is clickable and the two never compete for the same pixels. */
.v2 .hero .finder__range{inset:64% 0 12%;width:100%;height:auto}
/* The handle follows the seam but never leaves the frame: at the edges the seam can sit in
   the margin while the handle stays whole and still straddles it. */
.v2 .hero .finder__handle{top:76%;left:clamp(1.4rem,var(--wipe,46%),calc(100% - 1.4rem))}
.v2 .hero .finder__hud{top:6.5rem;left:var(--gut)}
.v2 .hero .finder__scale{right:var(--gut);bottom:4.5rem}
.v2 .hero .finder__ticks i{width:1.4rem;height:1.4rem}
.v2 .hero .finder__ticks i:nth-child(1){top:5.9rem;left:1.1rem}
.v2 .hero .finder__ticks i:nth-child(2){top:5.9rem;right:1.1rem}
.v2 .hero .finder__ticks i:nth-child(3){bottom:1.1rem;left:1.1rem}
.v2 .hero .finder__ticks i:nth-child(4){bottom:1.1rem;right:1.1rem}
.v2 .hero .finder figcaption{position:absolute;left:50%;bottom:1.15rem;translate:-50% 0;
  width:min(100% - var(--gut)*2,52rem);margin:0;text-align:center;
  font-size:var(--t-sm);line-height:1.5;color:color-mix(in srgb,var(--chrome-fg) 78%,transparent)}

.v2 .hero__over{position:relative;z-index:5;text-align:center;pointer-events:none;
  width:min(100% - var(--gut)*2,58rem);color:var(--chrome-fg)}
.v2 .hero__over a,.v2 .hero__over button{pointer-events:auto}
.v2 .hero__over .display em{color:var(--chrome-signal)}
.v2 .hero__over .lead{margin:1.4rem auto 0;max-width:46ch;
  color:color-mix(in srgb,var(--chrome-fg) 88%,transparent)}
.v2 .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:clamp(1.75rem,4vw,2.4rem)}
/* Both hero buttons carry a visible edge. On this ground a filled button alone has
   only a 1.9:1 boundary against the scrim, which is under the 3:1 a control needs
   to be identifiable as one. */
.v2 .hero__actions .btn--primary{border-color:color-mix(in srgb,var(--chrome-fg) 50%,transparent);
  background:#C4400C;color:#FFF}
.v2 .hero__actions .btn--primary:hover{background:#AE3708;border-color:var(--chrome-fg)}
.btn--onchrome{border-color:color-mix(in srgb,var(--chrome-fg) 50%,transparent);
  color:var(--chrome-fg);background:color-mix(in srgb,#08090B 30%,transparent)}
.btn--onchrome:hover{border-color:var(--chrome-fg);
  background:color-mix(in srgb,var(--chrome-fg) 14%,transparent)}
.btn--onchrome:active{transform:translateY(1px)}
.v2 .hero__desig{margin:clamp(1.6rem,4vw,2.2rem) 0 0;
  font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:var(--label);text-transform:uppercase;
  letter-spacing:.16em;color:color-mix(in srgb,var(--chrome-fg) 74%,transparent)}

/* The fixed rail sits over the hero too, and its themed greys vanish on that
   ground in the light polarity. While the hero owns the viewport it borrows the
   instrument's chrome, exactly like the bar above it. */
html[data-over-hero] .rail__ramp{border-color:color-mix(in srgb,var(--chrome-fg) 22%,transparent)}
html[data-over-hero] .rail__marks a::after{background:color-mix(in srgb,var(--chrome-fg) 48%,transparent)}
html[data-over-hero] .rail__marks a:hover::after{background:var(--chrome-fg)}
html[data-over-hero] .rail__marks a[aria-current=true]::after{background:var(--chrome-data)}
html[data-over-hero] .rail__lab{background:#08090B;color:var(--chrome-fg);
  border-color:color-mix(in srgb,var(--chrome-fg) 28%,transparent)}

@media (max-width:900px){
  .v2 .hero{padding:5.5rem 0 26vh}
  .v2 .hero .finder__scale{display:none}
  .v2 .hero .finder__hud{top:5.6rem}
  .v2 .hero .finder__ticks{display:none}
}
@media (max-width:640px){
  /* On a phone the text block is ~27rem tall, more than a centred grid leaves between
     the fixed labels above it and the drag band below it. Centring pushed it into both:
     on a 667px screen the labels printed over the headline and the handle over the
     designations. So the block starts under the labels, the drag controls are pinned to
     the bottom edge, and on a short phone the hero grows past one screen instead of
     letting them collide. */
  .v2 .hero{place-items:start center;padding:9rem 0 11.5rem}
  /* The seam rests at the middle of the frame, so both readings are in the first screen:
     photograph left, thermogram right. It used to rest in the right margin to keep it out
     of the text, which left the thermal view invisible on a phone - the one place the
     instrument most needs to show itself. The scrim keeps the type readable over either
     side; the type sits above the seam. Set before thermal.js runs so nothing flashes. */
  .v2 .hero .finder{--wipe:50%}
  /* A portrait crop of a 16:9 frame shows about a quarter of it. Centred, that quarter was
     the van's grille; this keeps the person in the photograph half and the van's front in
     the thermal half. The plate is blurred in the file itself (hero-anon-*). */
  .v2 .hero .finder__box img{object-position:32% 50%}
  .v2 .hero .finder__hud{top:5.25rem}
  .v2 .hero .finder__range{inset:auto 0 4.5rem;height:6rem}
  .v2 .hero .finder__handle{top:calc(100% - 7.5rem)}
  .v2 .hero .finder figcaption{bottom:.9rem;font-size:var(--t-xs);line-height:1.45}
  .v2 .hero__actions .btn{width:100%;justify-content:center}
}
/* A phone on its side is wider than 640px but only ~375-430px tall, so it gets the
   centred layout and the same collision, worse: the labels over the headline and the
   drag band across both buttons. Same answer as portrait, sized for the taller bar. */
@media (orientation:landscape) and (max-height:560px){
  .v2 .hero{place-items:start center;padding:9.5rem 0 11.5rem}
  .v2 .hero .finder{--wipe:50%}
  .v2 .hero .finder__range{inset:auto 0 4.5rem;height:6rem}
  .v2 .hero .finder__handle{top:calc(100% - 7.5rem)}
}

/* ── section heads: left-aligned on the wide grid ──────────────────────────── */
/* Section heads use the two-column head from site.css: heading on the left, prose on the
   right, both left-aligned on the page's own edge. Centred prose gave the eye no left
   edge to come back to on a long paragraph. Only the hero, which carries a short
   headline over a photograph, stays centred. */
.v2 .band__head p + p{margin-top:1.1rem}
@media (min-width:900px){
  .v2 .band__head{row-gap:0}
  .v2 .band__head>h2{grid-row:1 / span 2;align-self:start}
  .v2 .band__head>p{grid-column:2}
}
.v2 .contact__head{max-width:56ch}

/* ── services: one visible list, framed by the building ────────────────────── */
/* Five rows, all in the page at once. Each row is a photograph and the text beside it;
   the heading is the building or the situation, the designation line the standard that
   applies. On a phone the photograph becomes a thumbnail beside the heading so five rows
   stay a scan, not five screens. */
.v2 .svcs{padding-block:clamp(3.5rem,8vw,7rem);border-top:1px solid var(--line)}
.v2 .svcs__head{margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.svcl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.svcl__row{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);border-bottom:1px solid var(--line)}
.svcl__media{position:relative;overflow:hidden;aspect-ratio:3/2;
  background:var(--bg-sunk);border:1px solid var(--line-2)}
.svcl__media img{width:100%;height:100%;object-fit:cover;
  transition:scale .6s cubic-bezier(.2,.8,.25,1)}
.svcl__row:hover .svcl__media img{scale:1.025}
/* Selge bolig has no photograph of its own. Rather than repeat another row's image, the
   cell carries the standard as a readout over the ramp legend: the instrument's own
   grammar, and no claim about a picture. */
.svcl__media--type{display:grid;align-content:space-between;padding:clamp(1rem,2vw,1.4rem)}
.svcl__tile-std{font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);
  font-weight:600;letter-spacing:.02em;color:var(--data)}
.svcl__tile-ramp{display:block;height:.5rem;background:var(--ramp)}
.svcl__body h3{margin:0}
.svcl__std{margin:.7rem 0 0;font-family:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:var(--t-xs);font-weight:500;color:var(--data);
  letter-spacing:.07em;text-transform:uppercase;line-height:1.4}
.svcl__txt{margin:1rem 0 .5rem;color:var(--fg-2);max-width:60ch}
@media (max-width:640px){
  .svcl__row{grid-template-columns:5.5rem minmax(0,1fr);column-gap:1rem;row-gap:0}
  .svcl__body{display:contents}
  .svcl__media{grid-row:1 / span 2;aspect-ratio:1}
  .svcl__body h3{grid-column:2;align-self:end;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem)}
  .svcl__std{grid-column:2;align-self:start}
  .svcl__txt,.svcl__body .lnk{grid-column:1 / -1}
  .svcl__txt{margin-top:1.1rem}
  /* The readout tile cannot hold a full designation at thumbnail size, and the row
     already prints it beside the heading - so on a phone the tile keeps only the ramp. */
  .svcl__tile-std{display:none}
  .svcl__media--type{align-content:end;padding:.75rem}
}
@media (prefers-reduced-motion:reduce){.svcl__media img,.svcl__row:hover .svcl__media img{transition:none;scale:1}}

/* ── motion preferences ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .btn--onchrome:active{transform:none}
}

/* ?capture=1 only: a viewport-height hero makes a full-page screenshot useless,
   because the window has to be 5000px tall to hold the rest of the page and the
   hero then grows to 5000px with it. Capture mode caps it at a plausible desktop
   height so the sections below can be reviewed from evidence. Nothing a visitor
   ever loads is affected. */
html[data-capture] .v2 .hero{min-height:min(100svh,52rem);padding-bottom:min(24vh,13rem)}