/* Typeface: IBM Plex Sans, self-hosted (SIL Open Font License 1.1). Chosen 11 September 2026 to replace Poppins, which read as playful; Plex is engineered and calm. Latin and Latin Extended subsets only; Norwegian æøå are in the Latin block. Files in site/assets/fonts/: one variable file per subset (wght 100–700), so every weight shares one download. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext.woff2?v=d160e20920) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin.woff2?v=e2291e842c) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Storevik design system, stage 1. Tokens are global; every rule is scoped to body.v2 so pages not yet converted are untouched. */ :root{--ground:#0B0F14;--surface:#121821;--line:#1E2631;--tx:#F2F4F7;--tx2:#98A1AD; --accent:#F2F4F7;--action:#F2F4F7;--on-action:#0B0F14;--glass:rgba(11,15,20,.72);--outline:#1E2631; --connect:#0BBFDD;--workspace:#FD741E;--secure:#00BF64;--error:#FF7A70} [data-mode=light]{--ground:#ffffff;--surface:#F4F5F7;--line:#E0E0E0;--tx:#060610;--tx2:#555560; --accent:#060610;--action:#060610;--on-action:#ffffff;--glass:rgba(255,255,255,.72);--outline:#C9CDD3; --connect:#0A7080;--workspace:#B54A09;--secure:#007A44;--error:#B3261E} body.v2{background:var(--ground);color:var(--tx);font-family:'IBM Plex Sans',system-ui,sans-serif; font-weight:400;line-height:1.65;font-size:15px} body.v2 .w{max-width:1220px;margin:0 auto;padding-inline:var(--gutter)} body.v2 .label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);font-weight:500;margin:0} /* header, restyled in place */ body.v2 .site-header{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - var(--gutter)*2)); height:64px;padding-inline:20px 12px;gap:28px;border-radius:14px;border:1px solid var(--line); background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 10px 40px rgba(0,0,0,.18);transition:transform .3s var(--ease)} body.v2 .site-header.is-scrolled{box-shadow:0 12px 40px rgba(0,0,0,.24)} /* same height and logo once scrolled (owner, 9 October 2026); only the shadow deepens */ body.v2 .site-header.is-hidden{transform:translate(-50%,calc(-100% - 16px))} /* While a menu is open the bar is solid, so the page or the scrolled menu never shows through the glass (cowboy report 1.1), and so it is for readers who ask for less transparency or more contrast (2.3). */ body.v2 .site-header.menu-is-open,body.v2 .site-header.search-is-open,body.v2 .site-header:has(.services-dropdown[open]){background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){ body.v2 .site-header{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none} } body.v2 .site-header .nav-main{margin-inline:auto} body.v2 .site-header .brand img{width:150px} body.v2 main{padding-top:88px} body.v2 .media-hero{margin-top:-88px} @media(max-width:800px){body.v2 .site-header{top:10px;height:56px;padding-inline:14px 8px;gap:12px;border-radius:12px} body.v2 main{padding-top:78px}body.v2 .media-hero{margin-top:-78px} body.v2 .site-header .brand img{width:132px}} @media(prefers-reduced-motion:reduce){body.v2 .site-header{transition:none}body.v2 .site-header.is-hidden{transform:translateX(-50%)}} body.v2 .brand img{filter:none} body.v2 .nav-main a,body.v2 .services-dropdown summary{font-size:12px;font-weight:400;letter-spacing:.02em; text-transform:none;color:var(--tx2)} body.v2 .nav-main a:hover,body.v2 .services-dropdown summary:hover{color:var(--tx)} body.v2 .nav-main a::after{display:none} body.v2 .header-contact{background:var(--action);color:var(--on-action);border:0;font-weight:600;font-size:13px} /* The services menu, option A (owner, 28 October 2026): IT as a service with its three parts as cards with a coloured top line, then Projects and consulting (Advice and projects until 5 November 2026) with the six areas as short links. The panel is opaque from the first frame (cowboy report, top 1). */ body.v2 .mega-menu{background:var(--surface);border:1px solid var(--line);top:calc(100% + 10px);left:0;right:0;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.28);padding:22px 26px 24px;overscroll-behavior:contain} body.v2 .mega-menu a{color:var(--tx)} body.v2 .mega-menu small{color:var(--tx2)} body.v2 .mega-section+.mega-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} body.v2 .mega-section-head{display:flex;justify-content:space-between;align-items:center;gap:20px} body.v2 .nav-main .mega-title{display:inline-flex;align-items:center;gap:10px;min-height:32px;font-size:16px;font-weight:600} body.v2 .nav-main .mega-all{display:inline-flex;align-items:center;gap:10px;min-height:32px;font-size:13px;color:var(--tx2)} body.v2 .nav-main .mega-all:hover{color:var(--tx)} body.v2 .mega-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px} body.v2 .nav-main a.mega-part{display:block;min-height:0;padding:14px 16px 15px;border:1px solid var(--line);border-top:2px solid var(--part);border-radius:8px;background:var(--ground)} body.v2 .nav-main a.mega-part:hover,body.v2 .nav-main a.mega-part[aria-current]{border-color:var(--tx2);border-top-color:var(--part)} body.v2 .mega-part.part-connect{--part:var(--connect)}body.v2 .mega-part.part-workspace{--part:var(--workspace)}body.v2 .mega-part.part-secure{--part:var(--secure)} body.v2 .mega-part strong{display:block;font-size:16px;font-weight:600} body.v2 .mega-part small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;font-weight:400} body.v2 .mega-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;margin-top:8px} /* the cards' gap, so the columns line up; five areas, three and two */ /* The Cybersecurity menu (10 November 2026): Secure as a card in the first of the parts' three columns, the family's pages beside it. */ body.v2 .mega-security{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} body.v2 .mega-security .mega-part{align-self:start} body.v2 .mega-links{grid-column:2/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;align-content:start} body.v2 .nav-main .mega-links a{display:block;min-height:0;padding:9px 16px 10px} body.v2 .mega-links strong{display:block;font-size:14px;font-weight:500} body.v2 .mega-links small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;font-weight:400} body.v2 .nav-main .mega-links a:hover strong{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)} body.v2 .nav-main .mega-links a[aria-current] strong{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px} body.v2 .nav-main .mega-areas a{display:block;min-height:0;padding:8px 0;font-size:14px;font-weight:500} body.v2 .nav-main .mega-areas a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)} /* The current page (cowboy report 3.3): underlined in the bar, in the menu and in the phone menu, Services when the page is in its menu, and in the phone menu the group that holds it (its words, not the + beside them). */ body.v2 .nav-main>a[aria-current],body.v2 .services-dropdown>summary.is-current,body.v2 .nav-main .mega-title[aria-current], body.v2 .nav-main .mega-all[aria-current],body.v2 .nav-main .mega-areas a[aria-current]{color:var(--tx);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px} body.v2 .mobile-nav-links a[aria-current],body.v2 .mobile-services>summary.is-current>span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px} /* body sections */ body.v2 main section{padding-block:clamp(52px,8vh,96px);border-top:1px solid var(--line)} body.v2 main section:first-child{border-top:0} body.v2 h1{font-size:clamp(36px,4.4vw,60px);line-height:1.06;letter-spacing:-.035em;font-weight:600;margin:16px 0 0;text-transform:none} body.v2 h2{font-size:clamp(27px,3.3vw,44px);line-height:1.12;letter-spacing:-.03em;font-weight:600;margin:14px 0 0;text-transform:none} body.v2 em.a{font-style:normal;color:inherit} body.v2 .meta{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;font-size:12px;color:var(--tx2);padding-block:16px;border-bottom:1px solid var(--line)} body.v2 .hero{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,88px);align-items:end; padding-block:clamp(64px,11vh,124px) clamp(56px,9vh,96px)} body.v2 .hero p.intro{font-size:clamp(15px,1.35vw,18px);color:var(--tx2);margin:0 0 26px;max-width:46ch} body.v2 .hero p.intro a{color:var(--tx);text-decoration:underline;text-underline-offset:3px} body.v2 .btn{display:inline-flex;align-items:center;gap:10px;background:var(--action);color:var(--on-action); font-weight:600;font-size:14px;padding:15px 26px;text-decoration:none;border:0} body.v2 .btn:hover{opacity:.88} body.v2 .quote{display:grid;grid-template-columns:250px 1fr;gap:clamp(26px,5vw,70px)} body.v2 blockquote{margin:0;font-size:clamp(20px,2.5vw,32px);line-height:1.32;letter-spacing:-.02em;font-weight:400} body.v2 .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px} body.v2 .card{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px)} body.v2 .card .num{font-size:11px;letter-spacing:.2em;color:var(--tx2);font-weight:500;margin:0} body.v2 .card h3{font-size:clamp(18px,1.9vw,23px);font-weight:600;letter-spacing:-.015em;margin:12px 0} body.v2 .card p{margin:0;color:var(--tx2);font-size:14px} body.v2 .three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px} body.v2 .layer h3{font-size:19px;font-weight:600;margin:10px 0 14px} body.v2 .layer ul{margin:0;padding:0;list-style:none} body.v2 .layer li{font-size:13.5px;color:var(--tx2);padding:7px 0;border-top:1px solid var(--line)} body.v2 .four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:38px} body.v2 .pillar{border-top:2px solid var(--tx2);padding-top:16px} body.v2 .pillar h3{font-size:16px;font-weight:600;margin:0 0 9px} body.v2 .pillar p{margin:0;font-size:13.5px;color:var(--tx2)} /* A two-line heading no longer pushes its body text down: the pillars share the heading and body row tracks of the .four grid. */ @supports (grid-template-rows:subgrid){@media(min-width:901px){body.v2 .four>.pillar{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}}} body.v2 .marks{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:26px} body.v2 .marks img{max-height:44px;width:auto} body.v2 .inline-link{color:var(--accent);font-size:13px;font-weight:500} body.v2 .footer{background:var(--ground);border-top:1px solid var(--line)} body.v2 .footer a,body.v2 .footer p,body.v2 .footer span{color:var(--tx2)} body.v2 .footer a:hover{color:var(--tx)} body.v2 .mode{border:1px solid var(--line);background:transparent;color:var(--tx2);font-family:inherit;width:40px;height:40px;padding:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:6px;transition:color .2s,border-color .2s,background .2s} body.v2 .mode svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} body.v2 .mode:hover{color:var(--tx);border-color:var(--tx2)} /* Appearance switch (13 October 2026): the round button opens a small menu with Light, Dark and Match device (build.py MODE_TOGGLE). */ body.v2 .mode-switch{position:relative;display:inline-flex} body.v2 .mode-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;display:grid;gap:2px;min-width:200px;padding:6px; background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.28)} body.v2 .mode-menu[hidden]{display:none} body.v2 .mode-option{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:transparent; color:var(--tx2);font:inherit;font-size:14px;line-height:1.3;text-align:left;cursor:pointer;transition:color .2s,background .2s} body.v2 .mode-option:hover{color:var(--tx);background:var(--line)} body.v2 .mode-option:focus-visible{outline:2px solid var(--tx);outline-offset:-2px;color:var(--tx)} body.v2 .mode-option[aria-pressed=true]{color:var(--tx)} body.v2 .mode-option svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} body.v2 .mode-option .mode-check{margin-left:auto;visibility:hidden} body.v2 .mode-option[aria-pressed=true] .mode-check{visibility:visible} body.v2 .mode-float{position:fixed;right:22px;bottom:22px;z-index:60} body.v2 .mode-float .mode{width:46px;height:46px;margin:0;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); color:var(--tx);border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.22)} body.v2 .mode-float .mode-menu{top:auto;bottom:calc(100% + 10px)} body.v2 .mode-float[hidden]{display:none} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){body.v2 .mode-float .mode{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}} /* after its glass, so it wins (PR 5 review) */ /* Draft pages (owner, 10 November 2026): a note fixed in the corner opposite the appearance switch, on every build that includes drafts, so a reader of preview does not take one for a finished page. Monochrome and inverted so it is seen; under the header and the open menu; it never takes a click. The footer that follows it ends with room for it, so the note covers none of the footer's last row (Privacy, Back to top) at the end of the page (review of PR 105). */ body.v2 .draft-note{position:fixed;left:22px;bottom:22px;z-index:48;display:flex;align-items:center;height:46px;margin:0;padding:0 18px;border-radius:23px; background:var(--tx);color:var(--ground);border:1px solid transparent;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.22)} /* the border is its edge in forced colours */ body.v2 .draft-note+.footer::after{content:"";display:block;height:56px} @media print{body.v2 .mode-float,body.v2 .draft-note,body.v2 .draft-note+.footer::after{display:none}} /* Site search (owner, 28 October 2026: in the top menu, in the menu's own style, as on apple.com). The magnifier stands in the bar in the links' colour, before Contact. Its panel is the services menu's panel: the same surface, edge, corners, shadow and opening, under the bar at its full width. A large field, a hairline, then a small caption over the quick links or the results; each row has the menu's arrow and fills on hover (refinement.py search_panel, site.js 'site search'). */ body.v2 .search-toggle{display:none;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0 -12px 0 -6px;padding:0; border:0;border-radius:50%;background:transparent;color:var(--tx2);font:inherit;cursor:pointer} .js body.v2 .search-toggle{display:inline-flex} /* html.js is set in : no button without the script, and no shift when it runs */ body.v2 .search-toggle:hover,body.v2 .search-toggle[aria-expanded=true]{color:var(--tx)} body.v2 .search-glass{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} body.v2 .search-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:calc(100dvh - 104px);overflow:auto;overscroll-behavior:contain; padding:22px 26px 24px;background:var(--surface);color:var(--tx);border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.28);text-align:left} body.v2 .search-panel[hidden]{display:none} body.v2 .search-field{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)} body.v2 .search-field:focus-within{border-bottom-color:var(--tx2)} /* the field's focus mark, with the caret */ body.v2 .search-field .search-glass{flex:none;width:22px;height:22px;color:var(--tx2)} body.v2 .search-input{flex:1;min-width:0;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--tx); font:inherit;font-size:24px;font-weight:500;line-height:normal;letter-spacing:-.01em;-webkit-appearance:none;appearance:none} body.v2 .search-input:focus,body.v2 .search-input:focus-visible{outline:0} body.v2 .search-input::placeholder{color:var(--tx2);opacity:1} body.v2 .search-input::-webkit-search-cancel-button,body.v2 .search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none} body.v2 .search-clear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%; background:var(--line);color:var(--tx2);cursor:pointer} body.v2 .search-clear[hidden]{display:none} body.v2 .search-clear:hover{color:var(--tx)} body.v2 .search-clear:focus-visible{outline:2px solid var(--tx);outline-offset:2px} body.v2 .search-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} body.v2 .search-body{max-width:780px;padding-top:14px} body.v2 .search-message{margin:0 0 12px;font-size:15px;font-weight:500;line-height:1.45;color:var(--tx)} /* «No results for …» over the quick links */ body.v2 .search-message[hidden]{display:none} body.v2 .search-caption{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--tx2)} body.v2 .search-results{display:grid;gap:2px;margin:0 -12px;padding:0;list-style:none} body.v2 .search-results li{margin:0;padding:0} body.v2 .search-link{display:flex;align-items:flex-start;gap:12px;padding:9px 12px;border-radius:8px;color:var(--tx);font-size:15px;font-weight:500;line-height:1.45;text-decoration:none} body.v2 .search-link[aria-current]>span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px} /* the current page, as the menu marks it */ body.v2 .search-link:hover{background:var(--line)} body.v2 .search-link:focus-visible{background:var(--line);outline:2px solid var(--tx);outline-offset:-2px} body.v2 .search-link .icon{flex:none;width:16px;height:16px;margin-top:3px;color:var(--tx2);transition:transform .25s var(--ease)} /* colours never transition (Appearance change, below) */ body.v2 .search-link:hover .icon,body.v2 .search-link:focus-visible .icon{color:var(--tx);transform:translateX(3px)} body.v2 .search-link>span{min-width:0} body.v2 .search-title{display:block} body.v2 .search-where{color:var(--tx2);font-weight:400} body.v2 .search-snippet{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;color:var(--tx2);font-size:13px;font-weight:400;line-height:1.55} body.v2 .search-results mark{background:none;color:var(--tx);font-weight:600} @media(forced-colors:active){ body.v2 .search-results mark{color:CanvasText} /* the system's mark colour on no background vanished on a dark contrast theme */ body.v2 .search-field:focus-within{outline:2px solid transparent;outline-offset:4px} /* a contrast theme draws it; the hairline's change is flattened */ } @media(max-width:800px){ body.v2 .search-panel{max-height:calc(100dvh - 92px);padding:14px 18px 18px} body.v2 .search-input{font-size:19px} /* 16 px or more, so a phone does not zoom in on the field */ body.v2 .search-field .search-glass{width:20px;height:20px} } @media(max-width:900px){body.v2 .hero{grid-template-columns:1fr;gap:34px;align-items:start} body.v2 .quote{grid-template-columns:1fr;gap:16px} body.v2 .two,body.v2 .three{grid-template-columns:1fr} body.v2 .four{grid-template-columns:1fr 1fr}} @media(max-width:560px){body.v2 .four{grid-template-columns:1fr}} /* Reset inherited rules from site.css that the converted page must not pick up. */ body.v2 .hero{min-height:0;height:auto;max-height:none;overflow:visible;background:transparent; isolation:auto;position:static;display:grid;text-align:left} body.v2 .hero h1{text-shadow:none} body.v2 .quote{min-height:0;height:auto;background:transparent;position:static} body.v2 main section{position:static;overflow:visible;min-height:0;height:auto;background:transparent} /* The shipped logo is a white monochrome raster, so it disappears on a light ground. Inverting a monochrome white mark yields the black variant exactly. Interim: the brand pack has proper SVGs (katrine-deling/Sort og hvitt/Logo Source) which should replace this raster and use currentColor. */ [data-mode=light] body.v2 .brand img{filter:invert(1)} /* ---- Converted pages: shared furniture ------------------------------- */ body.v2 .content-width{max-width:1220px;margin:0 auto;padding-inline:var(--gutter)} body.v2 h3{font-weight:600;letter-spacing:-.015em} body.v2 .button{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--tx); border:1px solid var(--line);font-weight:500;font-size:14px;padding:14px 24px;min-width:0} body.v2 .button:hover{border-color:var(--tx2)} body.v2 .button.solid{background:var(--action);color:var(--on-action);border-color:var(--action)} body.v2 .button.solid:hover{opacity:.88} body.v2 .inline-link{color:var(--accent);font-size:13px;font-weight:500} /* Subheroes become typographic. No text over photographs anywhere. */ /* The subhero is static in .v2, so the legacy absolute breadcrumb lost its anchor and floated into the next section. */ /* Panels and groups */ body.v2 .faq{border-top:1px solid var(--line)} body.v2 .faq summary{font-weight:500;padding-block:18px} body.v2 .faq p{color:var(--tx2);font-size:14px} /* Contact */ body.v2 .contact{background:transparent;text-align:left} body.v2 .contact::before{display:none} body.v2 .contact h1,body.v2 .contact h2{text-transform:none;letter-spacing:-.03em} body.v2 .contact p{color:var(--tx2)} body.v2 .contact-form{background:var(--surface);border:1px solid var(--line)} body.v2 .field input,body.v2 .field select,body.v2 .field textarea{background:var(--ground); color:var(--tx);border:1px solid var(--line);font-family:inherit} body.v2 .field label{color:var(--tx2);font-size:13px} /* A field the page or the server found wrong (Q-B05, site.js mark()) stays visibly marked after focus leaves it. */ body.v2 .field [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)} @media(forced-colors:active){body.v2 .field [aria-invalid="true"]:not(:focus){outline:2px dashed CanvasText;outline-offset:2px}} /* Footer */ body.v2 .footer-bottom,body.v2 .footer-meta,body.v2 .footer-meta a{color:var(--tx2);font-size:12px} body.v2 .footer-bottom{border-top:1px solid var(--line)} /* site.css draws it in translucent white, invisible in light mode */ /* ---- P0: mobile navigation must obey the theme ----------------------- site.css hardcodes a near-black overlay and white icon strokes. In light mode that produced dark text on a dark overlay (~1.01:1) and an invisible menu button. Everything below is tokenised. */ /* The root carries the ground and the colour scheme: only the root's reaches the canvas, scrollbars and first paint. HEAD_APPEARANCE (build.py) paints the same two values before this file has loaded, so they must equal --ground above (checked in qa/check_r8_static.py). */ html{background:var(--ground);color-scheme:dark} [data-mode=light]{color-scheme:light} body.v2 .menu-toggle span{background:var(--tx)} body.v2 .mobile-nav{background:var(--ground);color:var(--tx)} body.v2 .mobile-nav a,body.v2 .mobile-nav-links a{color:var(--tx)} body.v2 .mobile-nav small,body.v2 .mobile-nav-bottom a,body.v2 .mobile-nav .slogan{color:var(--tx2)} body.v2 .mobile-services summary{color:var(--tx)} body.v2 .mobile-fallback summary{color:var(--tx2)} body.v2 :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* The appearance control belongs in the header at every width, not inside a menu the visitor must first find. */ @media(max-width:800px){body.v2 .site-header .mode{width:40px;height:40px;margin-right:2px}} body.v2 .h1-sub{display:block;font-size:.42em;line-height:1.2;font-weight:400;color:var(--tx2); letter-spacing:-.02em;margin-top:.42em} body.v2 .hero-actions{display:flex;align-items:center;justify-content:flex-start;gap:26px;flex-wrap:wrap} /* site.css centres .hero-actions for the old homepage hero; text-aligned heroes read left (8 October 2026) */ @media(max-width:650px){body.v2 .hero:not(.media-hero) .hero-actions{align-items:flex-start}} /* site.css stacks them in a column and centres each item */ body.v2 figure{margin:0} body.v2 #compliance .layer li{padding:12px 0;font-size:14px} body.v2 #compliance .layer li strong{color:var(--tx);font-weight:600} /* Review: badges rendered at 44px made their wording unreadable. */ body.v2 .marks{gap:clamp(26px,3.4vw,46px);margin-top:30px;align-items:center} body.v2 .marks img{max-height:64px;max-width:190px;object-fit:contain} @media(max-width:800px){body.v2 .marks{gap:24px}body.v2 .marks img{max-height:50px}} /* ---- Bundle pages (Connect, Workspace, Secure) and the four-family block -- Brochure patterns: labelled sections, hairline cards, technology chips, before/after scenario blocks. New body copy is 15px weight 400. */ body.v2 .lede{color:var(--tx2);font-size:clamp(15px,1.25vw,17px);font-weight:400;max-width:58ch;margin:20px 0 0} body.v2 .after-grid{margin-top:32px} body.v2 .after-grid a:not(.inline-link){color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* a link inside the sentence shows itself (Claude Code Review on PR 94) */ body.v2 .after-grid a:not(.inline-link):hover{text-decoration-thickness:2px} body.v2 .meta a{color:var(--tx2)} body.v2 .meta a:hover{color:var(--tx)} body.v2 .chips{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 0;padding:0;list-style:none} body.v2 .callout{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--tx2);padding:clamp(20px,2.4vw,30px)} body.v2 .callout h3{color:var(--tx);font-size:16px;margin:0 0 9px} body.v2 .callout p{margin:0;font-size:15px;font-weight:400;color:var(--tx2)} body.v2 h2+.callout,body.v2 .lede+.callout{margin-top:clamp(24px,3vw,36px)} /* a callout straight under a section heading sat flush against it (7 October 2026) */ body.v2 .scenarios{display:grid;gap:20px;margin-top:38px} body.v2 .scenario{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--surface)} body.v2 .scenario>h3{grid-column:1/-1;font-size:clamp(19px,2vw,24px);margin:0;padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) 0} body.v2 .scenario>div{padding:clamp(20px,2.4vw,30px);min-width:0} body.v2 .scenario .label{margin-bottom:12px} body.v2 .scenario p{margin:0;font-size:15px;font-weight:400;color:var(--tx2)} body.v2 .scenario .after{border-left:2px solid var(--tx)} body.v2 .scenario .after .label,body.v2 .scenario .after p{color:var(--tx)} body.v2 .scenario .after .label{color:var(--tx)} body.v2 .bundle-strip .layer{display:block;background:var(--surface);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);color:var(--tx);text-decoration:none} body.v2 .bundle-strip .layer:hover{border-color:var(--tx2)} body.v2 .bundle-strip .layer.is-current{border-color:var(--layer,var(--tx2))} body.v2 .bundle-strip .layer>p:not(.tag){margin:0;font-size:14px;font-weight:400;color:var(--tx2)} body.v2 .bundle-strip .inline-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px} body.v2 .card p,body.v2 .pillar p{font-size:15px;font-weight:400} body.v2 .hero .marks{margin-top:34px} body.v2 .family-rows{list-style:none;margin:18px 0 0;padding:0} body.v2 .family-rows li{border-top:1px solid var(--line)} body.v2 .family-rows a{display:block;padding:10px 0;font-size:15px;font-weight:400;color:var(--tx);text-decoration:none} body.v2 .family-rows a:hover{color:var(--accent)} body.v2 .family-rows small{display:block;font-size:12.5px;color:var(--tx2)} @media(max-width:900px){ body.v2 .scenario{grid-template-columns:1fr} body.v2 .scenario .after{border-left:0;border-top:2px solid var(--tx)} body.v2 .bundle-strip{grid-template-columns:1fr} } /* ---- Edition 09: every page in the brochure system ---------------------- */ body.v2 .card .inline-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px} body.v2 .card p a{color:var(--accent)} body.v2 .split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center;margin-top:38px} body.v2 .split h2{font-size:clamp(22px,2.4vw,32px)} body.v2 .split p:not(.label){color:var(--tx2);font-size:15px;font-weight:400;max-width:52ch;margin:16px 0 0} body.v2 .split .inline-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px} body.v2 .split .marks{margin-top:28px} body.v2 .split-photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;object-position:var(--pos,50% 50%);border:1px solid var(--line)} body.v2 .steps{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} body.v2 .steps li{border-top:2px solid var(--tx2);padding-top:16px;scroll-margin-top:96px} body.v2 .steps .num{font-size:11px;letter-spacing:.2em;color:var(--tx2);font-weight:500} body.v2 .steps h3{font-size:19px;margin:10px 0 8px} body.v2 .steps p{margin:0;font-size:15px;font-weight:400;color:var(--tx2)} @media(min-width:901px){body.v2 .steps:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}} /* four steps: 2 x 2, not 3 + 1 */ body.v2 .faqs{margin-top:30px;border-top:1px solid var(--line)} body.v2 .faq-item{border-bottom:1px solid var(--line)} body.v2 .faq-item summary{display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:500;font-size:16px;cursor:pointer;list-style:none} body.v2 .faq-item summary::-webkit-details-marker{display:none} body.v2 .faq-item summary span{color:var(--tx2)} body.v2 .faq-item[open] summary span{transform:rotate(45deg)} body.v2 .faq-item p{margin:0 0 20px;font-size:15px;font-weight:400;color:var(--tx2);max-width:64ch} body.v2 .more-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px} body.v2 .more-card{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;color:var(--tx);text-decoration:none} body.v2 .more-card:hover{border-color:var(--tx2)} body.v2 .more-card strong{display:block;font-weight:600} body.v2 .more-card small{display:block;color:var(--tx2);font-size:13px;text-wrap:balance} body.v2 .more-card>span,body.v2 .ai-flow small{text-wrap:pretty} body.v2 .more-card .icon{flex-shrink:0;align-self:center;color:var(--tx)} @media(min-width:901px){body.v2 .more-links:has(>.more-card:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}} /* four cards: 2 x 2, not 3 + 1 */ body.v2 .section-anchors{display:flex;flex-wrap:wrap;gap:9px;margin-top:-20px;padding-bottom:30px} body.v2 .section-anchors a{font-size:12px;color:var(--tx2);border:1px solid var(--line);padding:7px 13px;background:var(--surface)} body.v2 .section-anchors a:hover{color:var(--tx);border-color:var(--tx2)} body.v2 .family-grid{align-items:start} body.v2 .family-block{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px);scroll-margin-top:96px} body.v2 .family-block h2{font-size:clamp(20px,2vw,26px);line-height:inherit;letter-spacing:-.015em;margin:12px 0} body.v2 .family-block>div>p:not(.label){color:var(--tx2);font-size:15px;font-weight:400;margin:0} body.v2 .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,56px);align-items:start;margin-top:38px} body.v2 .channels{display:grid;gap:20px} body.v2 .channel a{color:var(--tx);font-size:18px;font-weight:500;text-decoration:none;display:inline-block;margin-top:10px} body.v2 .channel a:hover{color:var(--accent)} body.v2 .card.channel p a{font-size:inherit;font-weight:inherit;margin-top:0;text-decoration:underline;text-underline-offset:4px} /* .card .inline-link would otherwise keep its 14px margin */ body.v2 .channel p{margin:8px 0 0} body.v2 .contact-form{padding:clamp(22px,2.6vw,34px);color:var(--tx)} body.v2 .contact-form h2{font-size:clamp(22px,2.2vw,30px);margin:0} body.v2 .contact-form>p{color:var(--tx2);font-size:15px;font-weight:400;margin:12px 0 0} body.v2 .contact-form fieldset{border:0;padding:0;margin:0;min-width:0} body.v2 .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px} body.v2 .field.full{grid-column:1/-1} body.v2 .field label{display:block;margin-bottom:8px;font-size:13px;color:var(--tx2);font-weight:500} body.v2 .field label span{font-weight:400;color:inherit} /* «(optional)»: site.css's old #666 gave 3.1:1 on the dark card (axe, 9 October 2026) */ body.v2 .field input,body.v2 .field select,body.v2 .field textarea{width:100%;min-height:48px;padding:12px;font-size:15px;box-shadow:none} body.v2 .form-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:24px} body.v2 .form-actions .btn{font-family:inherit;cursor:pointer} body.v2 .copy-button{background:transparent;border:1px solid var(--line);color:var(--tx);font-family:inherit;font-size:14px;font-weight:500;padding:14px 24px;cursor:pointer} body.v2 .copy-button:hover{border-color:var(--tx2)} body.v2 .form-note,body.v2 .form-status{font-size:13px;color:var(--tx2);margin:16px 0 0} body.v2 .copy-fallback{width:100%;min-height:140px;margin-top:12px} body.v2 .prose h2{font-size:clamp(20px,2vw,26px);margin-top:36px} body.v2 .prose p{color:var(--tx2);font-size:15px;font-weight:400;max-width:66ch;margin:14px 0 0} body.v2 .prose a{color:var(--accent)} /* Links inside running text are underlined, like .hero p.intro a: colour alone told them apart from the grey text at under 3:1 (axe link-in-text-block, WCAG 1.4.1, 9 October 2026). */ body.v2 .prose a,body.v2 .form-note a{text-decoration:underline;text-underline-offset:3px} body.v2 .scenarios .scenario .label{margin-bottom:12px} /* The AI flow, carried over from the earlier edition, tokenised. */ body.v2 .ai-flow{align-items:stretch} body.v2 .ai-flow>i{align-self:center} body.v2 .ai-flow>div{background:var(--surface);border:1px solid var(--line);color:var(--tx)} body.v2 .ai-flow span{color:var(--tx2);font-size:11px;letter-spacing:.2em} body.v2 .ai-flow strong{color:var(--tx)} body.v2 .ai-flow small{color:var(--tx2)} body.v2 .ai-flow i{color:var(--tx2)} @media(max-width:900px){ body.v2 .split,body.v2 .steps,body.v2 .more-links,body.v2 .contact-grid,body.v2 .form-grid{grid-template-columns:1fr} body.v2 .section-anchors{margin-top:0} } body.v2 .field.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} body.v2 .cf-turnstile{margin-top:20px} /* A long word can exceed a phone width at display sizes; break only when a word cannot fit. */ body.v2 h1,body.v2 h2,body.v2 h3{overflow-wrap:break-word} /* ---- Colour code (owner decision, 11 September 2026) -------------------------- The three brand accents belong to the three bundles and nothing else: cyan = Connect, orange = Workspace, green = Secure. Everything else on the site is monochrome: white on the dark ground, blue-black on the light one. */ body.v2.bundle-connect{--layer:var(--connect)} body.v2.bundle-workspace{--layer:var(--workspace)} body.v2.bundle-secure{--layer:var(--secure)} body.v2.bundle-page .hero .label,body.v2.bundle-page em.a,body.v2.bundle-page .card .num,body.v2.bundle-page .scenario .after .label{color:var(--layer)} body.v2.bundle-page .pillar,body.v2.bundle-page .scenario .after{border-color:var(--layer)} body.v2 .bundle-strip .layer-connect{--layer:var(--connect)} body.v2 .bundle-strip .layer-workspace{--layer:var(--workspace)} body.v2 .bundle-strip .layer-secure{--layer:var(--secure)} body.v2 .bundle-strip .layer{border-top:2px solid var(--layer)} /* the bundle names in a sentence (Services, Ways to work): same rule as above */ /* Six service families: three columns on desktop, two on tablet, one on phones. */ body.v2 .family-grid{grid-template-columns:repeat(3,1fr)} @media(max-width:1000px){body.v2 .family-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){body.v2 .family-grid{grid-template-columns:1fr}} /* ---- Quieter controls (owner feedback, 14 September 2026) ---------------------- Buttons, navigation and inline links in sentence case, 14px, weight 500, 3px radius. Labels keep the small caps. */ body.v2 .btn,body.v2 .button{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;border-radius:3px;padding:13px 22px;min-height:48px;line-height:1.2} body.v2 .btn .icon,body.v2 .button .icon{width:16px;height:16px} body.v2 .inline-link{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;gap:10px;min-height:40px;padding-block:6px;line-height:1.3} body.v2 .inline-link .icon{width:16px;height:16px} body.v2 .inline-link:hover{text-decoration:underline;text-underline-offset:5px} body.v2 .nav-main a,body.v2 .services-dropdown summary{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none} body.v2 .header-contact{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;border-radius:3px;padding:10px 16px;min-height:40px} body.v2 .header-contact .icon{width:14px;height:14px} body.v2 .mobile-nav-links a,body.v2 .mobile-nav-links>a{font-size:clamp(24px,6vw,34px);font-weight:500;text-transform:none;letter-spacing:-.02em} /* The mobile menu mirrors option A (28 October 2026): the two groups read at the size of the other items, with no rules between. */ body.v2 .mobile-services{border-bottom:0} body.v2 .mobile-services>summary{font-size:clamp(24px,6vw,34px);font-weight:500;text-transform:none;letter-spacing:-.02em;line-height:1.3;padding:12px 0} body.v2 .mobile-services>summary::after{font-weight:400;color:var(--tx2)} body.v2 .mobile-services>div{padding:0 0 10px 2px} body.v2 .mobile-nav-links>a{padding:12px 0;margin-bottom:0} /* the same step as the two groups (PR 5 review) */ /* ---- Homepage (14 September 2026): the two landing-page tracks merged ------------ Owner-supplied hero media in a split hero, six families in a calm grid, the customer and partner strip, the day/night bridge band, the drawing of the three parts, the editorial closing. site.css still carries the geometry of the R8 components used here; these rules undo the body.v2 resets for them and put their colours on the theme tokens. */ body.v2 .hero.media-hero{position:relative;display:block;min-height:560px;height:84svh;max-height:900px;overflow:hidden;isolation:isolate; background:#11181e;color:#fff;padding:0;text-align:center;grid-template-columns:none} body.v2 .hero-stage{display:contents} body.v2 .hero-media{position:absolute;inset:0;z-index:-3;background:#26333a;overflow:hidden} body.v2 .hero-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:44% 50%;border:0} /* Hero motion (owner, 9 October 2026): the still drifts slowly sideways instead of the 12 s video loop. Lateral only, 30 s period (design-direction: no zoom or vertical sway); the fixed 1.05 scale gives the drift room. site.js sets is-moving (not under reduced motion) and is-paused (the hero button, off screen, background tab). will-change (26 October 2026) gives each still its own compositor layer before the drift starts and while it is paused, so pausing and resuming never re-rasterise it (see build.py, hero_poster). */ @keyframes hero-drift{from{transform:scale(1.05) translateX(-1.5%)}to{transform:scale(1.05) translateX(1.5%)}} body.v2 .hero-media .hero-poster{transform:scale(1.05)} body.v2 .hero.is-moving .hero-poster{animation:hero-drift 15s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden} /* Firefox shimmer (A10, 27 October 2026): on a DPR-1 screen 1920 px or wider Firefox swapped two renderings of different sharpness several times a second while the drift ran, because it downscaled the 960 px file into the ~640 px frame (Gecko's downscale-during-decode). The fix is the file: srcset now offers 640/800/1280 px, no larger than the drawn picture (build.py hero_set). backface-visibility keeps the still on its own layer (owner's step 3; measured, it changes nothing on its own), and on screens wider than 2560 px the still holds still, as under reduced motion (site.js does the same and hides the button). */ @media(min-width:2561px){body.v2 .hero.is-moving .hero-poster{animation:none}} body.v2 .hero.is-moving.is-paused .hero-poster{animation-play-state:paused} body.v2 .media-hero .hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#000a 0%,#0006 28%,#0007 52%,#0005 74%,#000c 100%),radial-gradient(ellipse at 50% 48%,#0008,transparent 68%)} body.v2 .media-hero .hero-content{position:relative;z-index:2;width:min(1040px,calc(100% - var(--gutter)*2));margin:auto;padding:clamp(110px,16vh,170px) 0 110px} body.v2 .media-hero .label{color:#e6e6e6;margin-bottom:20px} body.v2 .media-hero h1{color:#fff;font-size:clamp(38px,5vw,68px);font-weight:600;line-height:1.06;letter-spacing:-.035em;text-transform:none;text-wrap:balance;margin:0 auto;max-width:16ch;text-shadow:0 2px 24px #0006} body.v2 .media-hero .hero-intro{color:#f1f1f1;font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:560px;margin:22px auto 0;text-shadow:0 1px 12px #0007} body.v2 .media-hero .hero-actions{justify-content:center;margin-top:30px;gap:14px} body.v2 .media-hero .btn{background:#fff;color:#060610} body.v2 .media-hero .btn:hover{background:#e6e6e6;opacity:1} body.v2 .media-hero .hero-toolbar{position:absolute;left:auto;right:var(--gutter);bottom:24px;top:auto;z-index:3;display:flex;justify-content:flex-end} body.v2 .media-hero #hero-motion{width:40px;height:40px;min-width:40px;color:#fff;border:1px solid #ffffff55;background:#0003;opacity:.8;cursor:pointer;border-radius:3px} body.v2 .media-hero #hero-motion:hover,body.v2 .media-hero #hero-motion:focus-visible{opacity:1} @media(min-width:1100px){ body.v2 .hero.media-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(40px,5vw,96px);overflow:visible; height:auto;min-height:0;max-height:none;padding:calc(88px + clamp(48px,7vh,104px)) max(var(--gutter),calc((100% - 1240px)/2)) clamp(56px,7vh,96px);background:var(--ground);color:var(--tx);text-align:left} /* inside the header's 1240 px frame on wide screens (owner, 9 October 2026) */ body.v2 .media-hero .hero-content{order:1;grid-area:1/1;margin:0;padding:0;width:auto;max-width:560px;justify-self:start;text-align:left} body.v2 .media-hero h1{margin-inline:0} body.v2 .media-hero .hero-intro{margin-inline:0} body.v2 .media-hero .label{color:var(--tx2)} body.v2 .media-hero h1{color:var(--tx);font-size:clamp(38px,3.4vw,58px);margin:0;text-shadow:none} body.v2 .media-hero .hero-intro{color:var(--tx2);margin:20px 0 0;max-width:520px;text-shadow:none} body.v2 .media-hero .hero-actions{justify-content:flex-start;margin-top:28px} body.v2 .media-hero .btn{background:var(--action);color:var(--on-action)} body.v2 .media-hero .btn:hover{opacity:.88;background:var(--action)} body.v2 .hero-stage{display:block;position:relative;order:2;grid-area:1/2;width:100%;max-width:960px;justify-self:end} body.v2 .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:16/9;width:100%;height:auto;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px #0006} body.v2 .hero-poster{object-position:50% 50%} body.v2 .media-hero .hero-shade{display:none} body.v2 .media-hero .hero-toolbar{position:absolute;left:auto;right:14px;bottom:14px}} @media(max-width:650px){body.v2 .hero.media-hero{height:100svh;min-height:600px;max-height:860px} body.v2 .media-hero .hero-content{padding:90px 0 110px} body.v2 .media-hero h1{font-size:clamp(31px,8.6vw,44px);line-height:1.12} body.v2 .media-hero .hero-intro{font-size:15px} body.v2 .hero-poster{object-position:40% 50%}} /* A portrait phone (build.py HERO_PHONE) shows the hero as a framed 4:5 picture with the copy below it, like the framed desktop hero, so the office and the harbour are both in view (owner, 27 October 2026: «4:5-utsnitt på telefon … ikke et beskåret bredformat»). The serves the 4:5 crop (render_assets.cjs CROPS); the