/* SD Service — a light, cool workshop; steel, graphite, the logo's blue and the thumb's yellow.
   Motion grammar v3 (an exploded parts diagram): the first screen is assembled along one axis, part by part, while the
   3D wheel end goes together; headings lift in ratchet steps like a vehicle on a lift; photos are pressed into their
   frame in two strokes; on the bench the wheel end is taken apart by hand. Tokens: --ease-out, --ease-press, --ease-io. */

@font-face { font-family: "Georama"; src: url("fonts/georama.woff2?v=1") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 150%; font-display: swap; }
@font-face { font-family: "Trispace"; src: url("fonts/trispace.woff2?v=1") format("woff2"); font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; }

:root {
  --hall: #edf0f2; --sheet: #ffffff; --steel: #dde2e6; --steel-2: #c6cdd3; --steel-3: #9aa3ab;
  --ink: #111518; --ink-2: #4a535b; --line: rgba(17, 21, 24, .14);
  --blue: #214a98; --blue-2: #2c5fbf; --blue-deep: #17346f; --blue-ink: #0f2552;
  --yellow: #fecc0a;
  --graphite: #14181b; --graphite-2: #1d2226; --graphite-3: #2a3036; --on-dark: #eef1f3; --on-dark-2: #a9b2ba; --blue-on-dark: #9bbaf7;
  --ok: #1f8a57;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1360px;
  --top-h: 84px; --top-hs: 68px; --logo-w: 224px; --logo-ws: 204px; --logo-k: .2357; --logo-base: .7702; --pill-h: 42px; --pill-below: calc(var(--pill-h) / 2 - 5.6px);
  --r: 12px; --r-s: 8px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-press: cubic-bezier(.7, 0, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.3, 1.4, .5, 1);
  --vel: 0;
  --f: "Georama", "Segoe UI", system-ui, sans-serif;
  --mono: "Trispace", ui-monospace, "Cascadia Mono", monospace;
}
@media (max-width: 1179px) { :root { --top-h: 78px; --top-hs: 64px; --logo-w: 210px; --logo-ws: 178px; } }
@media (max-width: 600px) { :root { --top-h: 66px; --top-hs: 58px; --logo-w: 156px; --logo-ws: 134px; } }
@media (max-width: 389px) { :root { --logo-w: 142px; --logo-ws: 126px; } .top__in { gap: 6px !important; } .lang a { padding: 6px 6px !important; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); -webkit-tap-highlight-color: transparent; }   /* no blue tap flash: every control shows its own :active state (user rule 2026-10-05) */
body { margin: 0; background: var(--hall); color: var(--ink); font-family: var(--f); font-stretch: 100%; font-weight: 420; font-size: clamp(16px, .95rem + .2vw, 18px); line-height: 1.55; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); font-stretch: 100%; font-weight: 500; letter-spacing: 0; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--blue); color: #fff; padding: 12px 18px; border-radius: var(--r-s); text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus-visible { top: 12px; }

/* ------------------------------------------------------------------ buttons and links
   Pills. The label rolls up on hover (its copy in data-t slides in from below); the yellow of the logo's thumb is the
   main action, an ink hairline the second one. Buttons do not follow the pointer (user decision, 3 Oct 2026). */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; font: 620 16px/1 var(--f); font-stretch: 110%; letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .2s var(--ease); }
.btn .i { transition: transform .45s var(--ease); }
.btn__t { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; vertical-align: middle; }
.btn__t > span { display: block; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.btn__t::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.btn:hover .btn__t > span, .btn:hover .btn__t::after { transform: translateY(-100%); }
.btn:hover .i { transform: rotate(-8deg) scale(1.08); }
.btn:active { transform: scale(.975); }
.btn--call { background: var(--yellow); color: var(--ink); }
.btn--call:hover { background: var(--ink); color: var(--yellow); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(17, 21, 24, .32); }
.btn--line:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.final .btn--call:hover { background: #fff; color: var(--blue-ink); }
.link { display: inline-flex; align-items: center; gap: .45em; color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .28em; text-decoration-color: var(--yellow); transition: text-decoration-color .25s, color .25s; }
.link .i { transition: transform .35s var(--ease); }
.link:hover { text-decoration-color: var(--blue); }
.link:hover .i { transform: translateX(3px); }

/* ------------------------------------------------------------------ header
   Rule 27–28.10: desktop = logo | links | NO|EN | phone | contact button on one line; below 1180 px the links fold into the
   «Meny» sheet but NO|EN and the phone stay in the bar; phones keep a small logo, NO|EN, a phone icon and «Meny».
   Stuck on scroll: the bar and logo shrink and a soft shade (blur 22 px, never a line) separates it from the page.
   The logo's lettering sits on the text baseline: the image is inline, its bottom margin is pulled up to the baseline of
   "SD SERVICE" (77 % of the logo height), so flex baseline alignment lines everything up. */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h); transition: height .35s var(--ease), background-color .3s, box-shadow .35s; }
.top.is-solid { --top-h: var(--top-hs); --logo-w: var(--logo-ws); background: color-mix(in srgb, var(--hall) 92%, transparent); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); box-shadow: 0 10px 22px -6px rgba(17, 30, 52, .22); }
.top__in { height: 100%; display: flex; align-items: baseline; gap: 32px; padding-top: calc((var(--top-h) - var(--logo-w) * var(--logo-k) * var(--logo-base) - var(--pill-below)) / 2); transition: padding-top .35s var(--ease); }
.top__logo { flex: none; display: inline-block; width: var(--logo-w); line-height: 0; transition: width .35s var(--ease); }
.top__logo img { display: inline; width: 100%; height: auto; vertical-align: baseline; margin-bottom: calc(var(--logo-w) * var(--logo-k) * (var(--logo-base) - 1)); transition: margin-bottom .35s var(--ease); }
.top__nav { display: flex; align-items: baseline; gap: clamp(22px, 2.4vw, 40px); margin-left: auto; }
.top__nav > a { position: relative; font-weight: 560; font-stretch: 106%; font-size: 17px; text-decoration: none; white-space: nowrap; }
.top__nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top__nav > a:hover::after { transform: scaleX(1); }
.lang { display: inline-flex; align-items: baseline; align-self: baseline; gap: 6px; margin: 0; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .16); font: 600 13px/1 var(--mono); letter-spacing: .04em; }
.lang a { padding: 6px 9px; border-radius: 999px; text-decoration: none; color: var(--ink-2); transition: background-color .25s, color .25s; }
.lang a:hover { color: var(--ink); background: rgba(17, 21, 24, .07); }
.lang a[aria-current] { background: var(--ink); color: var(--yellow); }
.top__nav .top__nav-contact, .top__nav .top__navcall, .top__nav .top__soc, .top__nav .lang--sheet { display: none; }   /* desktop: these live in the sheet only */
.top__call { flex: none; display: inline-block; height: var(--pill-h); padding: 0 4px; color: var(--ink); text-decoration: none; white-space: nowrap; font: 700 17px/var(--pill-h) var(--f); font-stretch: 108%; letter-spacing: .01em; transition: color .3s var(--ease); }
.top__call:hover { color: var(--blue); }
.top__call .i { display: inline-block; vertical-align: -.2em; margin-right: .5em; transition: transform .45s var(--ease); }
.top__call:hover .i { transform: rotate(-12deg); }
.top__cta { flex: none; display: inline-block; height: var(--pill-h); padding: 0 22px; border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; white-space: nowrap; font: 700 16px/var(--pill-h) var(--f); font-stretch: 108%; transition: background-color .3s var(--ease), color .3s var(--ease); }
.top__cta:hover, .top__cta:active { background: var(--ink); color: var(--yellow); }
.top__menu { display: none; }
.top__menu-t { display: inline-grid; }   /* «Meny» gives way to «Lukk» while the bars cross (user rule 2026-10-04, all sites) */
.top__menu-t > span { grid-area: 1 / 1; transition: opacity .3s linear, transform .5s var(--ease-io); }
.top__menu-t .mt-c { opacity: 0; transform: translateY(.5em); }
.top__menu[aria-expanded="true"] .mt-o { opacity: 0; transform: translateY(-.5em); }
.top__menu[aria-expanded="true"] .mt-c { opacity: 1; transform: none; }
.top__bars { display: inline-block; vertical-align: -.1em; margin-right: 9px; position: relative; width: 22px; height: 14px; }
.top__bars i { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .5s var(--ease-io), opacity .25s linear; }
.top__bars i:nth-child(1) { top: 0; } .top__bars i:nth-child(2) { top: 6px; } .top__bars i:nth-child(3) { top: 12px; }
.top__menu[aria-expanded="true"] .top__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.top__menu[aria-expanded="true"] .top__bars i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.top__menu[aria-expanded="true"] .top__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* below 1180 px: the links fold into the sheet; NO|EN and the phone stay in the bar */
@media (max-width: 1179px) {
  .top__in { gap: 14px; }
  .top__cta, .lang--sheet-off { display: none; }
  .lang--bar { margin-left: auto; }
  .top__call { height: var(--pill-h); padding: 0 20px; border-radius: 999px; background: var(--yellow); }
  .top__call:hover { background: var(--ink); color: var(--yellow); }
  .top__menu { display: inline-block; height: var(--pill-h); padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 16px/var(--pill-h) var(--f); white-space: nowrap; cursor: pointer; }
  .top__menu:hover { background: rgba(17, 21, 24, .06); }
  .top__nav { position: fixed; inset: var(--top-h) 0 auto; margin: 0; display: grid; justify-items: start; gap: 0; padding: 8px max(var(--gutter), (100% - var(--wrap)) / 2) 28px; background: var(--hall); box-shadow: 0 18px 30px -18px rgba(17, 21, 24, .35); max-height: calc(100svh - var(--top-h)); overflow-y: auto; }
  .top__nav > a:not(.top__navcall) { justify-self: stretch; padding: 14px 0; font-size: clamp(20px, 1rem + .6vw, 26px); font-stretch: 120%; font-weight: 650; border-bottom: 1px solid var(--line); }
  .top__nav > a::after { display: none; }
  .top__nav > a:not(.top__navcall):hover { color: var(--blue); }
  .top__nav .top__nav-contact { display: block; }
  .top__nav .lang--sheet { display: inline-flex; justify-self: start; margin: 24px 0 0; font-size: 15px; }
  .lang--sheet a { padding: 9px 14px; }
  .top__nav > a.top__navcall { display: inline-flex; align-items: center; gap: 12px; margin: 24px 0 0; min-height: 56px; padding: 0 26px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 20px; font-weight: 700; font-stretch: 108%; text-decoration: none; white-space: nowrap; }
  .top__nav > a.top__navcall:hover, .top__nav > a.top__navcall:active { background: var(--ink); color: var(--yellow); }
  .top__nav > p.top__soc { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; }
  .top__soc a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
  .top__soc a:hover, .top__soc a:active { color: var(--blue); }
  .top__soc .i { width: 22px; height: 22px; }
  .js .top__nav:not(.is-open) { display: none; }
  html:not(.js) .top__nav { position: static; display: flex; flex-wrap: wrap; padding: 0; box-shadow: none; }
}
/* phones: a small logo, NO|EN, the phone as an icon button, «Meny» as an icon */
@media (max-width: 600px) {
  .top__in { gap: 10px; }
  .lang { padding: 2px; font-size: 12px; }
  .lang a { padding: 6px 8px; }
  .top__call { width: var(--pill-h); padding: 0; text-align: center; }
  .top__call .i { margin-right: 0; vertical-align: -.25em; }
  .top__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top__menu { padding: 0 10px; }
  .top__menu-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top__bars { margin-right: 0; }
}

/* ------------------------------------------------------------------ intro: the first screen is assembled along an axis
   Every hero element starts laid out to the right on the line of the title (data-ax = assembly order, the later the
   farther out) and slides home in order; the yellow axis shows the shaft and leaves when the last part is seated. */
.hero__title { position: relative; }
/* without JS (html.fx dropped after 2.6 s) everything stays in place; with JS the Web Animations in app.js run it */
.fx .hero [data-ax] { animation: ax-in 1.15s var(--ease-out) calc(var(--ax) * .07s) backwards; }
.fx .hero [data-ax="1"] { --ax: 1; } .fx .hero [data-ax="2"] { --ax: 2; } .fx .hero [data-ax="3"] { --ax: 3; }
.fx .hero [data-ax="4"] { --ax: 4; } .fx .hero [data-ax="5"] { --ax: 5; } .fx .hero [data-ax="6"] { --ax: 6; }
@keyframes ax-in { 0% { transform: translateX(calc(1.2vw + var(--ax) * .9vw)); } 100% { transform: none; } }   /* visible from the first frame: only small moves */
@media (max-width: 599px) { @keyframes ax-in { 0% { transform: translateX(calc(1vw + var(--ax) * .8vw)); } 100% { transform: none; } } }
.stage__flow { overflow-x: clip; }   /* parts laid out to the right and the axis never widen the page */
/* phones and portrait tablets: the wheel end gets its own room under the header, above the title (scene and poster share it) */
@media (max-width: 899px) and (orientation: portrait) {
  .hero { padding-top: calc(var(--top-h) + 31svh + 4px) !important; }
  .stage .stage__poster { inset: auto 0 auto 0; top: calc(var(--top-h) + .5svh); height: 30svh; object-fit: contain; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }   /* the shadow fades instead of being cut by the picture edge */
}

/* ------------------------------------------------------------------ headings: the lift */
.steps__card, .works__head, .oe__head, .brands .wrap, .shop__info, .news__head, .cat__head, .gal, .final__call { container-type: inline-size; }
.h2, [data-lift] { --fs: clamp(2.05rem, 1.25rem + 3.1vw, 4.35rem); font-weight: 780; font-stretch: 132%; font-size: min(var(--fs), calc(100cqi * var(--cqf, 1) / var(--lw, 1))); line-height: 1.04; letter-spacing: -.012em; color: var(--blue); text-wrap: balance; }
[data-lift] .w, [data-lift-line] { display: inline-block; overflow: clip; overflow-clip-margin: .08em; padding: .16em .02em .12em; margin: -.16em -.02em -.12em; vertical-align: top; }
[data-lift] .w > span, [data-lift-line] > span { display: inline-block; }
.fx [data-lift]:not(.in) .w > span, .fx [data-lift-line]:not(.in) > span { transform: translateY(112%); }
.fx [data-lift].in .w > span, .fx [data-lift-line].in > span { animation: lift 1s var(--d, 0s) both; }
@keyframes lift {
  0% { transform: translateY(112%); animation-timing-function: cubic-bezier(.25, .9, .3, 1); }
  20% { transform: translateY(66%); }
  29% { transform: translateY(66%); animation-timing-function: cubic-bezier(.25, .9, .3, 1); }
  49% { transform: translateY(28%); }
  58% { transform: translateY(28%); animation-timing-function: cubic-bezier(.3, .9, .35, 1); }
  82% { transform: translateY(-5%); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { transform: translateY(0); }
}

/* ------------------------------------------------------------------ photos: pressed into the frame
   Two strokes, like a bearing pressed onto a shaft: a fast slide to 88 %, a short hold, a hard final press; the picture
   inside travels against the frame and settles from 1.08 to 1. The mask is gone once the photo is seated. */
[data-press] { position: relative; overflow: hidden; background: var(--steel); }
[data-press] img { filter: saturate(.86) contrast(1.05) brightness(1.01); }   /* one grade for the client's mixed photos */
.fx [data-press]:not(.in) img { clip-path: inset(0 0 0 7%); transform: translateX(5%) scale(1.04); }
.fx [data-press].in:not(.is-set) img { animation: press 1.15s var(--d, 0s) both, press-img 1.15s var(--d, 0s) both; }
@keyframes press {
  0% { clip-path: inset(0 0 0 7%); animation-timing-function: var(--ease-out); }
  52% { clip-path: inset(0 0 0 1.6%); }
  64% { clip-path: inset(0 0 0 1.6%); animation-timing-function: var(--ease-press); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes press-img {
  0% { transform: translateX(5%) scale(1.04); animation-timing-function: var(--ease-out); }
  52% { transform: translateX(1.2%) scale(1.015); }
  64% { transform: translateX(1.2%) scale(1.015); animation-timing-function: var(--ease-press); }
  100% { transform: none; }
}

/* ------------------------------------------------------------------ stage: hero + wheel end taken apart */
.stage { position: relative; }
.stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage__media { position: absolute; inset: 0; }
.stage__poster, .stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__poster { object-fit: cover; object-position: center; transition: opacity .6s var(--ease); }
.stage__canvas { opacity: 0; transition: opacity .6s var(--ease); touch-action: pan-y; }
.stage.is-3d .stage__canvas { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .stage__canvas.is-dragging { cursor: grabbing; }
.fx .stage__poster { --ax: 3.5; animation: ax-in 1.3s var(--ease-out) .2s backwards; }   /* the poster is one of the parts of the first screen */
.stage.is-3d .stage__canvas { opacity: 1; }
.stage.is-3d .stage__poster { opacity: 0; }
.tags { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tags__lines { position: absolute; inset: 0; overflow: visible; }
.tags__lines line { stroke: rgba(17, 21, 24, .42); stroke-width: 1; }
.tags__lines circle { fill: #fff; stroke: rgba(17, 21, 24, .55); stroke-width: 1.2; }
.tags__lines .is-on line { stroke: var(--ink); stroke-width: 1.6; }
.tags__lines .is-on circle { fill: var(--yellow); stroke: var(--ink); }
.tag { position: absolute; left: 0; top: 0; margin: -13px 0 0 -22px; width: 44px; display: flex; justify-content: center; will-change: transform, opacity; }
.tag b { display: block; padding: 6px 8px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 13px/1 var(--mono); box-shadow: 0 0 0 1px rgba(17, 21, 24, .16), 0 6px 14px -8px rgba(17, 30, 52, .45); }
.tag.is-on b { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 16px -6px rgba(17, 21, 24, .45); }
.stage__flow { position: relative; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.hero__col, .bench__index, .bench__card { pointer-events: auto; }
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: var(--top-h); padding-bottom: 6vh; }
.hero__col { width: min(54%, 760px); container-type: inline-size; }
.hero__title { display: flex; flex-direction: column; color: var(--blue); font-weight: 860; font-stretch: 150%; text-transform: uppercase; letter-spacing: -.012em; line-height: .9; margin-bottom: .55em; }
.hero__title .ln { display: block; white-space: nowrap; }
.hero__title .ln--1 { font-size: calc(100cqi / var(--w1) * .985); }
.hero__title .ln--2 { font-size: calc(100cqi / var(--w2) * .985); color: var(--ink); }
.hero__trade { display: flex; align-items: center; flex-wrap: wrap; margin-top: .9em; font-family: var(--mono); font-stretch: 112%; font-weight: 600; font-size: clamp(12.5px, .55rem + .62vw, 19px); line-height: 1.2; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; flex-wrap: nowrap; }
.hero__trade i { width: .5em; height: .5em; margin: 0 .7em; flex: none; background: var(--yellow); }
@media (max-width: 399px) { .hero__trade { letter-spacing: .03em; } .hero__trade i { margin: 0 .5em; } }
.hero__lead { max-width: 34em; font-size: clamp(17px, 1rem + .35vw, 21px); color: var(--ink); margin-bottom: 1.4em; }
.hero__act { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-bottom: 18px; }
.open { display: inline-flex; align-items: center; gap: .6em; margin: 0; font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink-2); }
.open__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--steel-3); box-shadow: 0 0 0 3px rgba(154, 163, 171, .25); }
.open.is-open .open__dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(31, 138, 87, .2); animation: pulse 2.4s ease-in-out 3; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(31, 138, 87, 0); } }
/* the bench: on wide screens the index (heading, lead, parts 01–05) on the left and the scene on the right, with the
   chosen part's card and the axis slider under the parts; both columns end on one line. app.js frames the scene into
   the space above the card (setBenchFrame) */
.bench { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--top-h) + 3vh) 0 4vh; }
.bench__panel { flex: 1; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: clamp(40px, 6vw, 112px); align-items: end; }
.bench__index { max-width: 540px; container-type: inline-size; }
.bench__index [data-lift] { --fs: clamp(2.05rem, 1rem + 3.2vw, 4.6rem); }
.bench__lead { font-size: clamp(16px, .95rem + .2vw, 18px); color: var(--ink-2); margin: .9em 0 1.7em; max-width: 30em; }
.bench__parts { display: grid; gap: 4px; }
.bench__card { min-width: 0; }
.bench__seat { width: 100%; aspect-ratio: 3 / 2; max-height: calc(100svh - var(--top-h) - 400px); min-height: 230px; margin-bottom: 18px; }   /* the room of the laid-out unit (app.js frames the scene into it) */
.bpart__b { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 13px 14px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); font: 650 clamp(17px, .9rem + .5vw, 24px)/1.15 var(--f); font-stretch: 118%; text-align: left; cursor: pointer; }   /* the chosen part switches in the same frame as its card and position number */
.bpart__n { font: 600 14px/1 var(--mono); color: var(--steel-3); letter-spacing: .04em; }
.bpart__b:hover { background: rgba(17, 21, 24, .06); }
.bpart__b[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bpart__b[aria-pressed="true"] .bpart__n { color: var(--yellow); }
.bench__descs { display: grid; }
.bdesc + .bdesc { margin-top: 28px; }
.js .bdesc { grid-area: 1 / 1; margin: 0; }   /* all cards share one cell: the card keeps the height of the longest, nothing below it jumps */
.js .bdesc:not(.is-on) { visibility: hidden; }
.bdesc__t { display: flex; align-items: baseline; gap: 12px; font-weight: 760; font-stretch: 126%; font-size: clamp(21px, 1rem + .9vw, 28px); line-height: 1.08; margin-bottom: 14px; }
.bdesc__n { display: inline-grid; place-items: center; min-width: 2.2em; height: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--yellow); font: 600 15px/1 var(--mono); color: var(--ink); align-self: center; }
.bdesc p { color: var(--ink-2); margin-bottom: 1em; font-size: clamp(16px, .95rem + .25vw, 19px); max-width: 32em; }
.js .bdesc.is-on .bdesc__t { animation: card-in .35s var(--ease-out) both; }
@keyframes card-in { from { transform: translateX(10px); } }
.bench__axis { display: none; align-items: center; gap: 14px; margin-top: 30px; font: 600 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.stage.is-3d .bench__axis { display: flex; }
.bench__axis input { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; accent-color: var(--ink); cursor: grab; -webkit-appearance: none; appearance: none; }
.bench__axis input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--ink) var(--ap, 0%), rgba(17, 21, 24, .22) var(--ap, 0%)); }
.bench__axis input::-moz-range-track { height: 2px; background: rgba(17, 21, 24, .22); }
.bench__axis input::-moz-range-progress { height: 2px; background: var(--ink); }
.bench__axis input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.bench__axis input::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
@media (max-width: 899px) {
  .hero { align-items: flex-start; padding-top: calc(var(--top-h) + 2.5vh); }
  .hero__col { width: 100%; }
  .bench { align-items: flex-end; padding: 46svh 0 4svh; }
  .bench__panel { display: block; flex: none; width: 100%; pointer-events: auto; padding: 20px 18px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 48px -28px rgba(17, 30, 52, .35); }
  .bench__index { max-width: none; }
  .bench__index [data-lift] { --fs: clamp(1.8rem, 1.2rem + 3vw, 2.5rem); }
  .bench__lead { margin: .6em 0 1em; }
  .bench__card { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .bench__seat { display: none; }
  .bdesc__t { margin-bottom: 8px; }
  .bdesc p { margin-bottom: .7em; }
  .bench__axis { margin-top: 16px; }
  .bench__parts { display: flex; flex-wrap: wrap; gap: 6px; }
  .bench__parts li { flex: 1 1 auto; }
  .bpart__b { justify-content: center; padding: 10px 10px; font-size: 15px; font-stretch: 108%; box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .16); border-radius: 999px; }
}
@media (max-width: 599px) {   /* phones: one row of position numbers; the name is in the card below (and in the button's accessible name) */
  .bench { padding-top: 40svh; }
  .bench__lead { font-size: 15px; line-height: 1.5; }
  .bench__parts { flex-wrap: nowrap; }
  .bpart__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bpart__b { padding: 11px 0; }
  .bpart__n { font-size: 15px; color: var(--ink); }
  .bdesc__t { font-size: 22px; }
}

/* ------------------------------------------------------------------ 404: a page that is not on the shelf
   The big code sits on the yellow axis like the first screen and the parts slide home in assembly order. */
.nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--top-h) + 5vh) 0 9vh; overflow-x: clip; }
.nf__in { container-type: inline-size; }
.nf__code { position: relative; margin: 0 0 .1em; color: var(--blue); font-weight: 880; font-stretch: 150%; line-height: .9; letter-spacing: -.02em; font-size: clamp(96px, 19cqi, 230px); }
.nf__code span { position: relative; }
.nf__t { margin: 0 0 .45em; max-width: 18em; color: var(--ink); font-weight: 780; font-stretch: 132%; font-size: clamp(1.7rem, 1rem + 2.4vw, 3.2rem); line-height: 1.05; text-wrap: balance; }
.nf__p { max-width: 34em; margin: 0 0 1.5em; color: var(--ink-2); font-size: clamp(17px, 1rem + .3vw, 20px); }
.nf__act { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.nf__lang + .nf__lang { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
html.js[lang="en"] .nf__lang[data-nf="nb"], html.js[lang="nb"] .nf__lang[data-nf="en"] { display: none; }
html.js .nf__lang + .nf__lang { margin-top: 0; padding-top: 0; border-top: 0; }
.nf__phone { display: inline-block; margin-top: clamp(36px, 5vw, 64px); color: var(--ink); text-decoration: none; font-weight: 880; font-stretch: 150%; line-height: .95; letter-spacing: -.02em; white-space: nowrap; font-size: min(84px, calc(100cqi / var(--wp, 7.4) * .98)); transition: color .25s; }
.nf__phone:hover { color: var(--blue); }
.fx .nf [data-ax] { animation: ax-in 1.15s var(--ease-out) calc(var(--ax) * .07s) backwards; }
.fx .nf [data-ax="1"] { --ax: 1; } .fx .nf [data-ax="2"] { --ax: 2; } .fx .nf [data-ax="3"] { --ax: 3; } .fx .nf [data-ax="4"] { --ax: 4; } .fx .nf [data-ax="5"] { --ax: 5; }

/* pressing: the control answers in place (fill or colour), instead of the browser's tap flash */
.btn--call:active, .top__call:active { background: var(--ink); color: var(--yellow); }
.final .btn--call:active { background: #fff; color: var(--blue-ink); }
.btn--line:active { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.top__menu:active, .lang a:active { background: rgba(17, 21, 24, .1); }
.top__nav a:active, .foot__nav a:active, .work__head:active { color: var(--blue); }
.bpart__b:active { background: rgba(17, 21, 24, .12); }
.bpart__b[aria-pressed="true"]:active { background: #2b3238; }
.seg label:active span { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ works */
.works { background: var(--sheet); padding: clamp(64px, 7vw, 108px) 0 clamp(48px, 5vw, 80px); position: relative; z-index: 1; }
.works__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
.works__head { display: grid; grid-template-columns: minmax(0, 1fr) 52%; column-gap: 24px; align-items: end; }   /* the columns of the list and the photo below: the lead starts on the photo's edge */
.works__head [data-lift] { --cqf: .46; }
.works__aside { display: grid; gap: 20px; justify-items: start; max-width: 34em; }
@media (max-width: 899px) { .works__head [data-lift] { --cqf: 1; } }
.works__head p { margin: 0; font-size: clamp(17px, 1rem + .2vw, 20px); color: var(--ink-2); }
.works__list { position: relative; padding-right: calc(52% + 24px); counter-reset: w; }
.work { border-top: 1px solid var(--line); padding: 22px 0 24px; }
.work:last-child { border-bottom: 1px solid var(--line); }
.work__head { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 700 clamp(21px, 1rem + .7vw, 28px)/1.15 var(--f); font-stretch: 118%; text-align: left; cursor: pointer; transition: color .25s; }
.work__n { flex: none; width: 44px; text-align: center; padding: 3px 0; border-radius: 999px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--steel-3); transition: color .25s, background-color .25s; }
.work__d { margin: 10px 0 0 60px; color: var(--ink-2); max-width: 32em; }
.work__head:hover, .work.is-on .work__head { color: var(--blue); }
.work.is-on .work__n { color: var(--ink); background: var(--yellow); }
.work__ph { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; margin: 0; border-radius: var(--r); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.work__ph img { width: 100%; height: 100%; object-fit: cover; }
.work.is-on .work__ph { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); z-index: 1; }
.work:nth-child(3) .work__ph img { object-position: 50% 40%; }
@media (max-width: 479px) { .work__head { font-size: 19px; font-stretch: 104%; } }   /* the longest title (Overhaling av bremsecalipere) stays on one line on phones */
@media (max-width: 389px) { .work__head { font-size: 17.5px; font-stretch: 100%; } }
@media (max-width: 899px) {
  .works__head { grid-template-columns: minmax(0, 1fr); }
  .works__list { padding-right: 0; }
  .work__ph { position: relative; inset: auto; width: auto; aspect-ratio: 4 / 3; margin: 16px 0 0; opacity: 1; visibility: visible; }
  .work__d { margin-left: 0; }
}

/* ------------------------------------------------------------------ OE search: a steel band with a moving sheen */
.oe { position: relative; padding: clamp(72px, 9vw, 140px) 0; background: var(--steel); overflow: hidden; isolation: isolate; }
.oe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .55) 53%, rgba(255, 255, 255, 0) 70%); background-size: 240% 100%; background-position: calc((1 - var(--sx, .35)) * 100%) 0; transition: background-position .6s var(--ease); }
.oe__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.oe__head p { margin-top: .8em; font-size: clamp(17px, 1rem + .2vw, 20px); }
/* the latest offers from the shop's Facebook: name, OE number (fills the search), price excl. VAT */
.oe__side { min-width: 0; }
.offers { margin-top: clamp(40px, 5vw, 72px); }
.offers__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-weight: 760; font-stretch: 126%; font-size: clamp(20px, 1rem + .6vw, 26px); }
.offers__h span { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.offers__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 clamp(20px, 2.5vw, 40px); }
.offers__list li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "t" "oe"; row-gap: 4px; align-content: start; padding: 20px 0 18px; border-top: 2px solid var(--ink); }
.offer__t { grid-area: t; font-weight: 600; }
.offer__oe { grid-area: oe; justify-self: start; padding: 0; border: 0; background: none; color: var(--blue); font: 500 14px/1.5 var(--mono); text-align: left; cursor: pointer; }
button.offer__oe:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.offer__p { grid-area: p; font-weight: 800; font-stretch: 126%; font-size: clamp(26px, 1.4rem + .8vw, 38px); line-height: 1; white-space: nowrap; }
.offers__fb { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--ink); font-weight: 600; text-decoration: none; }
.offers__fb:hover { color: var(--blue); }
.offers__fb .i { width: 20px; height: 20px; }
.oe__label { display: block; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.oe__field { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 18px 0 20px; background: var(--sheet); border-radius: var(--r); box-shadow: inset 0 2px 0 rgba(17, 21, 24, .06), 0 0 0 1px rgba(17, 21, 24, .12), 0 20px 40px -26px rgba(17, 30, 52, .45); transition: box-shadow .2s; }
.oe__field:focus-within { box-shadow: inset 0 2px 0 rgba(17, 21, 24, .06), 0 0 0 3px var(--blue), 0 20px 40px -26px rgba(17, 30, 52, .45); }
.oe__field > .i { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.oe__field input { flex: 1; min-width: 0; height: 74px; border: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-stretch: 108%; font-weight: 600; font-size: clamp(22px, 1rem + 1.7vw, 38px); letter-spacing: .02em; caret-color: var(--ink); outline: none; }
.oe__field input::placeholder { color: #9aa3ab; font-weight: 400; }
.oe__field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.oe__count { flex: none; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.oe__results { margin-top: 14px; display: grid; gap: 8px; }
.oe__results:empty { display: none; }
.hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 16px 14px 18px; background: rgba(255, 255, 255, .78); border-radius: var(--r-s); box-shadow: 0 0 0 1px rgba(17, 21, 24, .08); animation: hit .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes hit { from { opacity: 0; transform: translateY(10px); } }
.hit__t { font-weight: 650; font-stretch: 108%; line-height: 1.25; }
.hit__m { grid-column: 1; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.hit__m mark { background: var(--yellow); color: var(--ink); padding: 0 .2em; border-radius: 3px; font-family: var(--mono); font-weight: 600; }
.hit .btn { grid-row: 1 / span 2; grid-column: 2; min-height: 44px; padding: 0 14px; font-size: 15px; }
.hit--none { grid-template-columns: minmax(0, 1fr); }
.hit--none .btn { grid-row: auto; grid-column: 1; justify-self: start; }
.oe__go { margin-top: 16px; }
.js .oe__go { display: none; }
@media (max-width: 899px) { .oe__grid { grid-template-columns: minmax(0, 1fr); } .oe__field { min-height: 64px; } .oe__field input { height: 62px; } }
@media (max-width: 599px) { .hit { grid-template-columns: minmax(0, 1fr); } .hit .btn { grid-row: auto; grid-column: 1; justify-self: start; } .oe__count { display: none; } }

/* ------------------------------------------------------------------ brands: rails that run with the scroll speed */
.brands { background: var(--graphite); color: var(--on-dark); padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 110px); overflow: hidden; }
.brands [data-lift] { color: var(--on-dark); margin-bottom: clamp(28px, 4vw, 52px); }
.brands__rails { position: relative; }
.rail { margin-top: clamp(14px, 2vw, 26px); transform: translate3d(0, calc(var(--vel) * -34px), 0); }
.rail--rev { transform: translate3d(0, calc(var(--vel) * 34px), 0); }
.brands__axis { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: calc(clamp(14px, 2vw, 26px) / 2); background: var(--yellow); transform: scaleX(var(--vel)); opacity: min(1, calc(var(--vel) * 3)); pointer-events: none; }
.rail__label { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto 6px; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.rail__view { overflow: hidden; }
.rail__track { display: flex; width: max-content; will-change: transform; }
.rail__set { display: flex; align-items: center; flex: none; }
.rail__w { font-weight: 820; font-stretch: 112%; font-size: clamp(44px, 2rem + 5.2vw, 128px); line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; padding: 0 .08em; }
.rail--rev .rail__w { color: #7d8893; font-weight: 640; }
.rail__sep { width: .32em; height: .32em; margin: 0 .5em; flex: none; border-radius: 50%; background: var(--yellow); font-size: clamp(44px, 2rem + 5.2vw, 128px); }
.rail--rev .rail__sep { width: .22em; height: .22em; border-radius: 0; background: var(--yellow); }
html:not(.js) .rail__view { overflow-x: auto; }

/* ------------------------------------------------------------------ shop */
.shop { padding: clamp(72px, 10vw, 150px) 0; background: var(--hall); }
/* the shop: the whole interior photo across the page, then three columns of facts under it (not photo-left / text-right) */
.shop__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.shop__main { position: relative; margin: 0; border-radius: var(--r); aspect-ratio: 2 / 1; min-height: 300px; }
.shop__main img { object-position: 50% 62%; }
.shop__info { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.shop__info [data-lift] { --cqf: .31; }   /* the heading sits in the first of three columns: its container is the whole row */
.shop__c2 .hours { margin-top: 0; }
.shop__c3 .shop__links { margin-top: 0; }
.shop__facade { width: 100%; max-width: none; aspect-ratio: 4 / 3; overflow: hidden; }
.shop__facade img { height: 100%; aspect-ratio: auto; }
@media (max-width: 899px) { .shop__info [data-lift] { --cqf: 1; } .shop__main { aspect-ratio: 4 / 3; } .shop__info { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } .shop__facade { max-width: 360px; } }
.shop__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop__info p { font-size: clamp(17px, 1rem + .2vw, 20px); margin-top: .8em; }
.shop__info p a { color: var(--blue); font-weight: 600; }
.hours { margin: 1.4em 0 .9em; display: grid; gap: 0; border-top: 1px solid var(--line); }
.hours__r { display: flex; justify-content: flex-start; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.hours__r dt { width: 9.5em; color: var(--ink-2); }
.hours__r dd { margin: 0; font-family: var(--mono); font-weight: 600; }
.hours__r.is-today { box-shadow: inset 5px 0 0 var(--yellow); padding-left: 14px; }
.hours__r.is-today dt, .hours__r.is-today dd { color: var(--ink); }
.hours__r.is-today dt::after { content: " · i dag"; font-weight: 500; }
:lang(en) .hours__r.is-today dt::after { content: " · today"; }
.shop__links { margin: 22px 0 26px; display: grid; gap: 12px; }
.shop__links .i { color: var(--ink); }
.shop__facade { margin: 0; width: min(100%, 300px); border-radius: var(--r-s); }
.shop__facade img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) { .shop__grid { grid-template-columns: minmax(0, 1fr); } .shop__main { min-height: 0; aspect-ratio: 16 / 10; } .shop__info { order: -1; } }

/* ------------------------------------------------------------------ news */
.news { background: var(--sheet); padding: clamp(72px, 9vw, 140px) 0; }
.news__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.news__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; }
.news__list { display: grid; }
.news__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: clamp(20px, 2.5vw, 32px); }
.note { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.note--0 { grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-content: start; }
.note__ph { margin: 0; border-radius: var(--r); background: var(--hall); }
.note__ph img { width: 100%; height: auto; }
.note--0 .note__ph { aspect-ratio: 4 / 3; }
.note--0 .note__ph img { height: 100%; object-fit: cover; object-position: 50% 60%; }
.note--1 .note__ph, .note--2 .note__ph { aspect-ratio: 3 / 4; }
.note--1 .note__ph, .note--2 .note__ph { background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .08); padding: 10px; }
.note--1 .note__ph img, .note--2 .note__ph img { height: 100%; object-fit: contain; }
/* news on the home page: dated rows; the flyer is a small preview that grows under the pointer */
.nrow { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 88px; gap: clamp(16px, 3vw, 48px); align-items: center; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.nrow:first-child { border-top: 0; }
.nrow__d { font: 600 15px/1.2 var(--mono); letter-spacing: .03em; color: var(--ink-2); text-transform: uppercase; }
.nrow__tx { display: grid; gap: 6px; }
.nrow__t { font-weight: 740; font-stretch: 124%; font-size: clamp(21px, 1rem + 1vw, 34px); line-height: 1.1; transition: color .25s; }
.nrow__p { color: var(--ink-2); max-width: 44em; }
.nrow__ph { position: relative; width: 88px; height: 88px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .1); transition: transform .45s var(--ease), box-shadow .3s; transform-origin: right center; z-index: 1; }
.nrow__ph img { width: 100%; height: 100%; object-fit: contain; }
.nrow:hover .nrow__t, .nrow:focus-visible .nrow__t { color: var(--blue); }
@media (hover: hover) { .nrow:hover .nrow__ph { transform: scale(2.6); box-shadow: 0 18px 40px -12px rgba(17, 30, 52, .45); z-index: 3; } }
@media (max-width: 699px) { .nrow { grid-template-columns: minmax(0, 1fr) 72px; } .nrow__d { grid-column: 1 / -1; } .nrow__ph { width: 72px; height: 72px; } }
.note__date { margin: 0 0 6px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.note__t { font-weight: 720; font-stretch: 120%; font-size: clamp(20px, 1rem + .6vw, 26px); line-height: 1.15; margin-bottom: 8px; }
.note__tx p:last-child { color: var(--ink-2); }
@media (max-width: 899px) { .news__grid { grid-template-columns: minmax(0, 1fr); } .note--0 { grid-row: auto; } }
@media (max-width: 479px) { .note { grid-template-columns: minmax(0, 1fr); } .note--1 .note__ph, .note--2 .note__ph { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------ final: the big phone on the brand field */
.final { background: var(--blue); color: #fff; padding: clamp(72px, 9vw, 140px) 0; position: relative; overflow: hidden; }
.final :focus-visible { outline-color: var(--yellow); }
.final__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.final__call { container-type: inline-size; display: flex; flex-direction: column; }
.final [data-lift] { --fs: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); color: #fff; }
.final__phone { display: block; margin: .42em 0 .35em; color: #fff; text-decoration: none; font-weight: 880; font-stretch: 150%; line-height: .95; letter-spacing: -.02em; font-size: calc(100cqi / var(--wp, 7.4) * .98); white-space: nowrap; transition: color .25s; }
.final__phone:hover { color: var(--yellow); }
.final__alt { display: grid; gap: 10px; margin: 8px 0 22px; font-size: 18px; flex: 1 1 auto; align-content: space-between; max-height: 300px; }   /* the rows spread so the column ends with the form, without a hole above the hours */
.final__alt li { display: flex; align-items: center; gap: 12px; }
.final__alt .i { color: #c9d8f6; }
.final__alt a { color: #fff; text-underline-offset: .2em; }
.final .open { color: #dbe5f8; margin-top: auto; }
/* the parts still life (Codex) closes the block like a counter under both columns */
.final__art { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 88px); }
.final__art img { width: min(100%, 860px); height: auto; }
.final .open__dot { background: #b8c6e2; }
.final .open.is-open .open__dot { background: #6be3a4; }
/* the form stands on the blue field itself: mono labels, hairline fields, the chosen topic in the logo's yellow */
.final__form { display: flex; flex-direction: column; gap: 26px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: 12px; font: 600 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9d8f6; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); font-weight: 600; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg label:hover span { box-shadow: inset 0 0 0 1.5px #fff; }
.seg input:checked + span { background: var(--yellow); color: var(--ink); box-shadow: none; }
.seg input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 32px; }
.fld { display: flex; flex-direction: column; gap: 2px; }
.fld > span { font: 600 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9d8f6; }
.fld input, .fld textarea { width: 100%; min-height: 46px; padding: 8px 0 9px; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .42); border-radius: 0; background: transparent; color: #fff; font: 500 19px/1.35 var(--f); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.fld input:hover, .fld textarea:hover { border-bottom-color: rgba(255, 255, 255, .75); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-bottom-color: var(--yellow); box-shadow: 0 1.5px 0 var(--yellow); }
.fld input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 60px var(--blue) inset; caret-color: #fff; }
.fld[aria-invalid="true"] input, .fld input[aria-invalid="true"] { border-bottom-color: #ffb4a8; box-shadow: 0 1.5px 0 #ffb4a8; }
.fld--grow { flex: 1; }
.fld--grow textarea { flex: 1; resize: vertical; min-height: 92px; }
.final__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.final__msg { margin: 0; font-weight: 600; color: #dbe5f8; }
@media (max-width: 899px) { .final__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .row2 { grid-template-columns: minmax(0, 1fr); } .final__alt { font-size: 16px; } }

/* ------------------------------------------------------------------ footer: one centred composition */
.foot { background: var(--graphite); color: var(--on-dark); }
.foot__in { display: grid; justify-items: center; gap: 22px; padding: 46px 0 34px; text-align: center; }
.foot__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 18px 44px; }
.foot__logo { display: inline-block; width: 200px; line-height: 0; }
.foot__logo img { display: inline; width: 100%; height: auto; vertical-align: baseline; margin-bottom: calc(200px * var(--logo-k) * (var(--logo-base) - 1)); }   /* the wordmark on the links' baseline */
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.foot__nav a { color: var(--on-dark); text-decoration: none; font-weight: 520; }
.foot__soc { display: inline-flex; align-items: center; gap: 8px; }
.foot__soc .i { width: 18px; height: 18px; }
.foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.foot .lang { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); margin: 0; }
.foot .lang a { color: var(--on-dark-2); }
.foot .lang a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.foot .lang a[aria-current] { background: var(--yellow); color: var(--ink); }
.foot :focus-visible { outline-color: var(--yellow); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding-top: 22px; width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; color: var(--on-dark-2); }
.foot__legal span { padding: 2px 16px; border-left: 1px solid rgba(255, 255, 255, .2); white-space: nowrap; }
.foot__legal span:first-child { border-left: 0; }
.foot__legal a { color: var(--on-dark); }
@media (max-width: 899px) { .foot__legal { flex-direction: column; align-items: center; gap: 4px; } .foot__legal span { border-left: 0; } }
@media (max-width: 599px) { .foot__nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 12px 16px; } }

/* ------------------------------------------------------------------ inner pages */
.page { padding-top: var(--top-h); }
.cat, .feed, .ret { padding: clamp(40px, 6vw, 90px) 0 clamp(64px, 8vw, 120px); }
.cat__head { max-width: 900px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.cat__head h1 { --fs: clamp(2.4rem, 1.3rem + 4.4vw, 5.6rem); }
.cat__head p { margin-top: .8em; font-size: clamp(17px, 1rem + .25vw, 20px); color: var(--ink-2); max-width: 46em; }
.cat__tools { position: sticky; top: var(--top-h); z-index: 5; padding: 14px 0 12px; background: var(--hall); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .16); font: 560 15px var(--f); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s, transform .25s var(--spring); }
.chip span { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip.is-on { background: var(--ink); color: var(--yellow); box-shadow: none; }
.chip.is-on span { color: #f3e7a9; }
.parts { display: grid; gap: 10px; margin-top: 10px; }
.part { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px 24px; align-items: start; padding: 18px; background: var(--sheet); border-radius: var(--r); box-shadow: 0 1px 0 rgba(17, 21, 24, .06); }
.part__ph { margin: 0; width: 132px; aspect-ratio: 1; border-radius: var(--r-s); background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(17, 21, 24, .06); }
.part__ph img { width: 100%; height: 100%; object-fit: contain; }
.part__cat { margin: 0 0 4px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.part__t { font-weight: 700; font-stretch: 112%; font-size: clamp(19px, 1rem + .3vw, 22px); line-height: 1.2; margin-bottom: 4px; }
.part__art { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.part__specs { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; }
.part__specs div { display: flex; gap: 6px; min-width: 0; }
.part__specs dt { color: var(--ink-2); }
.part__specs dt::after { content: ":"; }
.part__specs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.part__desc { flex-basis: 100%; }
.part__codes { font-size: 13.5px; color: var(--ink-2); }
.part__codes-h { margin: 0 0 2px; font-weight: 600; color: var(--ink); }
.part__codes p { margin: 0; overflow-wrap: anywhere; }
.part__codes summary { cursor: pointer; color: var(--blue); font-weight: 600; margin-top: 4px; }
.part__ask { align-self: center; min-height: 46px; padding: 0 16px; font-size: 15px; }
.part.is-hidden, .fx .part.is-more { display: none; }
.parts__more { margin-top: 18px; }
html:not(.fx) .parts__more { display: none; }
.parts__none { margin: 24px 0; font-size: 18px; }
.cat__more { margin-top: 28px; font-size: 18px; }
@media (max-width: 699px) { .part { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; } .part__ph { width: 88px; } .part__ask { grid-column: 1 / -1; justify-self: start; } }

.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.post { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; padding: 16px; background: var(--sheet); border-radius: var(--r); }
.post__ph { display: block; border-radius: var(--r-s); background: var(--hall); aspect-ratio: 3 / 4; cursor: zoom-in; }
.post__ph img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.post__ph:hover img { transform: scale(1.03); }
.post__t { font-weight: 720; font-stretch: 116%; font-size: clamp(19px, 1rem + .4vw, 23px); line-height: 1.18; margin-bottom: 8px; }
.post__tx p:last-child { color: var(--ink-2); margin: 0; }
.gal { margin-top: clamp(56px, 7vw, 100px); }
.gal [data-lift] { --fs: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); margin-bottom: 24px; }
.gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gal__i { display: block; border-radius: var(--r-s); aspect-ratio: 4 / 3; cursor: zoom-in; }
.gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal__i:hover img { transform: scale(1.04); }
@media (max-width: 899px) { .posts { grid-template-columns: minmax(0, 1fr); } .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .post { grid-template-columns: minmax(0, 1fr); } .post__ph { aspect-ratio: 4 / 3; } }
.zoom { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.zoom::backdrop { background: rgba(10, 12, 14, .86); }
.zoom img { max-width: min(1200px, 94vw); max-height: 88vh; width: auto; height: auto; border-radius: var(--r-s); }
.zoom__x { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }

.ret__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.ret__head { grid-column: 1 / -1; }
.rule { padding: 22px 0; border-top: 1px solid var(--line); }
.rule__t { font-weight: 740; font-stretch: 124%; font-size: clamp(22px, 1rem + .8vw, 30px); color: var(--blue); margin-bottom: 10px; }
.rule p { max-width: 40em; }
.need { position: sticky; top: calc(var(--top-h) + 20px); padding: clamp(22px, 3vw, 32px); background: var(--sheet); border-radius: var(--r); box-shadow: 0 24px 48px -32px rgba(17, 30, 52, .4); }
.need__h { font-weight: 740; font-stretch: 120%; font-size: clamp(21px, 1rem + .6vw, 26px); margin-bottom: 16px; }
.need__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 16px 20px; margin-bottom: 22px; }
.need__g h3 { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.need__g li { padding: 3px 0; }
@media (max-width: 899px) { .ret__grid { grid-template-columns: minmax(0, 1fr); } .need { position: static; } }
.ret__credit { margin-top: 2em; font: 500 13px/1.5 var(--mono); color: var(--ink-2); }
.ret__credit a { color: inherit; }