/* ==========================================================================
   rentelligent.com
   --------------------------------------------------------------------------
   Built on the Rentelligent / Husleie.no design system (tokens, buttons,
   focus, radius, cards, badges). The design system is written for the
   product; a marketing site also needs a larger type scale, long-form text
   and section layouts. Those additions are marked [PROPOSED].

   Plain CSS, no build step. Sections, top to bottom:
   fonts · tokens · base · layout · type · buttons · badges · header ·
   mobile menu · footer · components (alphabetical) · page sections ·
   motion · print
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

/* Inter 4, variable (weight + optical size), self-hosted. SIL OFL 1.1. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin.woff2) 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;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) 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;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* design system: brand */
  --c-primary:          #00aa73;
  --c-primary-dark:     #009162;   /* button border, never a hover colour */
  --c-primary-light:    #e5f7f1;
  --c-secondary:        #0a1f44;   /* navy */
  --c-secondary-dark:   #0f192b;

  /* design system: surfaces and text */
  --c-background:       #ffffff;
  --c-card:             #fafafb;
  --c-muted:            #f5f6f8;
  --c-border:           #eef0f3;
  --c-border-dark:      #e0e2e4;
  --c-accent:           #0a1f440d; /* 5% navy, the universal hover wash */
  --c-foreground:       #090a0b;
  --c-muted-foreground: #707782;
  --c-success:          #0b6f4c;
  --c-success-bg:       #d9f7e8;
  --c-info:             #1951b4;
  --grey-300: #eef0f3; --grey-400: #e6e9ee; --grey-500: #e0e2e4; --grey-700: #bdc0c6;

  /* site roles */
  --ink:       var(--c-secondary);          /* headings and body copy */
  --ink-soft:  #3d4b66;                     /* [PROPOSED] lead text on tinted bands; navy at 80% on white, 9.6:1 */
  --ink-meta:  var(--c-muted-foreground);   /* dates, labels; 4.6:1 on white */
  --on-navy:   #ffffff;
  --on-navy-soft: #c4ccda;                  /* [PROPOSED] secondary text on navy, 9.5:1 */
  --band-mint: var(--c-primary-light);
  --tile:      var(--grey-300);             /* flat tiles that are not cards */

  /* design system: spacing (steps 5+ compress on phones) */
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px;
  --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 56px;
  /* [PROPOSED] section rhythm for a marketing page */
  --section: clamp(72px, 9vw, 128px);
  --section-sm: clamp(48px, 6vw, 80px);

  /* design system: radius ladder, nothing else */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;

  /* design system: type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --lh-tight: 1.1; --lh-normal: 1.4;
  --lh-prose: 1.6;                          /* [PROPOSED] paragraphs longer than one line */
  /* [PROPOSED] marketing display sizes; the design system stops at 40px (H1) */
  --text-hero:  clamp(44px, 6.6vw, 92px);
  --text-page:  clamp(40px, 5.2vw, 68px);
  --text-h2:    clamp(26px, 3.4vw, 40px);
  --text-h3:    24px;
  --text-h4:    20px;
  --text-lead:  clamp(17px, 1.4vw, 20px);
  --text-body:  16px;
  --text-sm:    14px;
  --text-xs:    12px;

  /* design system: focus, motion, effects */
  --focus: 3px solid var(--c-info);
  --motion-fast: 120ms; --motion-normal: 180ms; --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-button: inset 0 2px 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 2px 0 rgba(0, 0, 0, .17);
  --shadow-button-secondary: inset 0 0 1px 0 rgba(0, 0, 0, .28), inset 0 2px 2px 0 #0e3b8b, inset 0 -2px 2px 0 rgba(0, 0, 0, .33);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .08);
  --shadow-float: 0 2px 4px rgba(10, 31, 68, .04), 0 18px 44px rgba(10, 31, 68, .10); /* [PROPOSED] menus, frames */

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;
}

@media (max-width: 768px) {
  :root {
    --space-5: 14px; --space-6: 16px; --space-7: 18px; --space-8: 24px; --space-9: 32px; --space-10: 40px;
    --header-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-normal: 0ms; --motion-slow: 0ms; }
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
/* the hidden attribute always wins over a component's display value */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--c-background);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--lh-prose);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); line-height: var(--lh-tight); text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
dl, dd { margin: 0; }

a { color: inherit; }
/* links inside running text: navy, with the brand green as the underline */
.prose a, .link {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--c-primary);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--motion-fast) var(--ease-in-out);
}
.prose a:hover, .link:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-primary-light); color: var(--c-secondary); }

.skip-link {
  position: absolute; z-index: 100; top: 8px; left: 8px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--c-secondary); color: #fff; font-weight: var(--fw-semibold); text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon { width: 16px; height: 16px; flex: none; }

/* ----------------------------------------------------------------- layout */

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section--sm { padding-block: var(--section-sm); }
/* two plain white sections in a row share one gap; a section after a coloured band keeps its own */
.section:not([class*='band']) + .section:not([class*='band']) { padding-top: 0; }
.band-mint { background: var(--band-mint); }
.band-grey { background: var(--c-muted); }
.band-navy { background: var(--c-secondary); color: var(--on-navy-soft); }
.band-navy :is(h2, h3, h4) { color: var(--on-navy); }

.section-head { display: grid; gap: var(--space-5); max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--split { max-width: none; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } }

.split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.1fr .9fr; }
  .split--flip > :first-child { order: 2; }
}
.split > *, .grid > * { min-width: 0; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-top: var(--space-5); }
.mt-0 { margin-top: 0 !important; }

/* ------------------------------------------------------------------- type */

.t-hero  { font-size: var(--text-hero); line-height: 1; }
.t-page  { font-size: var(--text-page); line-height: 1.04; }
.t-h2    { font-size: var(--text-h2); }
.t-h3    { font-size: var(--text-h3); }
.t-h4    { font-size: var(--text-h4); line-height: 1.25; }
.lead    { font-size: var(--text-lead); line-height: 1.55; max-width: 52ch; }
.band-mint .lead { color: var(--ink-soft); }
.band-navy .lead { color: var(--on-navy-soft); }
.meta    { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--ink-meta); }
.eyebrow { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--c-success); }
.measure { max-width: 60ch; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-9); font-size: var(--text-h3); }
.prose h3 { margin-top: var(--space-8); font-size: var(--text-h4); line-height: 1.25; }
.prose ul { display: grid; gap: var(--space-3); list-style: none; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--c-primary); }
.prose strong { font-weight: var(--fw-semibold); }

/* the green line drawn under one word of a headline */
.mark { position: relative; display: inline-block; color: var(--c-primary); white-space: nowrap; }
.mark__line { position: absolute; left: -.02em; bottom: -.12em; width: 104%; height: .18em; overflow: visible; pointer-events: none; }
.mark__line path { fill: none; stroke: var(--c-primary); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mark--draw .mark__line { clip-path: inset(-60% 100% -60% 0); animation: mark-draw 900ms var(--ease-in-out) 300ms forwards; }
@keyframes mark-draw { to { clip-path: inset(-60% 0 -60% 0); } }

/* ---------------------------------------------------------------- buttons */
/* Design system rule 1: 40px or 32px tall, radius 8. Rule 2: each variant
   has its own hover. Rule 3: each filled variant has its own bevel. */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 11px 16px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; font-weight: var(--fw-semibold); line-height: 16px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-in-out), background-image var(--motion-fast) var(--ease-in-out),
              border-color var(--motion-fast) var(--ease-in-out), opacity var(--motion-fast) var(--ease-in-out);
}
.btn .icon { transition: transform var(--motion-normal) var(--ease-out); }
.btn:hover .icon--nudge { transform: translateX(3px); }

.btn--primary { background-color: var(--c-primary); border-color: var(--c-primary-dark); color: #fff; box-shadow: var(--shadow-button); }
.btn--primary:hover { background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)); }

.btn--secondary { background-color: var(--c-secondary); border-color: var(--c-secondary-dark); color: #fff; box-shadow: var(--shadow-button-secondary); }
.btn--secondary:hover { opacity: .8; }

.btn--outline { background-color: var(--c-background); border-color: var(--c-border-dark); color: var(--c-secondary-dark); }
.btn--outline:hover { background-color: var(--c-accent); }
.band-mint .btn--outline { background-color: rgba(255, 255, 255, .7); }

.btn--ghost { background: transparent; color: var(--c-secondary-dark); }
.btn--ghost:hover { background-color: var(--c-accent); }

/* on navy: white outline, the wash lightens instead of darkening */
.btn--on-navy { background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn--on-navy:hover { background-color: rgba(255, 255, 255, .08); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 480px) { .btn-row--stack { flex-direction: column; } .btn-row--stack .btn { width: 100%; } }

/* "Read more" style text link with an arrow that travels 4px (hero-card rule) */
.more {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 20px; color: var(--ink); text-decoration: none;
}
.more .icon { transition: transform var(--motion-normal) var(--ease-out); }
a.more:hover .icon, a:hover > .more .icon, a:hover .more .icon { transform: translateX(4px); }
a.more:hover { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.band-navy .more { color: #fff; }

/* ----------------------------------------------------------------- badges */
/* design system badge: line-height 1, symmetric padding, no fixed height */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 5px var(--space-3); border: 1px solid transparent; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; vertical-align: middle;
}
.badge--success { background: var(--c-success-bg); border-color: var(--c-success-bg); color: var(--c-success); }
.badge--neutral { background: var(--grey-300); border-color: var(--grey-300); color: #4b5260; }
.badge--draft   { background: transparent; border-color: var(--c-border-dark); color: var(--c-muted-foreground); }
.badge--on-navy { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; /* solid: a backdrop-filter here would trap the fixed phone menu inside the header */
  transition: box-shadow var(--motion-normal) var(--ease-in-out);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--c-border); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-secondary); text-decoration: none; }
.logo svg { width: auto; height: 24px; aspect-ratio: 390 / 53; }
@media (max-width: 979px) { .site-header .logo svg { height: 21px; } }
.logo--light { color: #fff; }

.nav { display: none; }
@media (min-width: 980px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-in-out);
}
.nav__link:hover { background: var(--c-accent); }
.nav__link[aria-current='page'], .nav__link.is-section { background: var(--c-accent); }
.nav__chev { width: 12px; height: 12px; opacity: .7; transition: rotate var(--motion-normal) var(--ease-out); }
.nav__cta { margin-left: var(--space-3); }

/* dropdown: drops 8px into place after a 120ms intent delay; a bridge keeps it
   open while the pointer travels down to it. Menus stay shut right after a
   click, until the pointer moves (site.js adds .menus-rest). */
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 2;
  display: grid; gap: 2px; min-width: 248px; padding: var(--space-3); list-style: none;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-float);
  visibility: hidden; opacity: 0; translate: 0 -8px; pointer-events: none;
  transition: opacity var(--motion-normal) var(--ease-out), translate var(--motion-normal) var(--ease-out), visibility 0s linear var(--motion-normal);
}
.nav__menu::before { content: ''; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto;
  transition: opacity 220ms var(--ease-out) 120ms, translate 220ms var(--ease-out) 120ms, visibility 0s linear 120ms;
}
.nav__item--has-menu:hover .nav__chev, .nav__item--has-menu:focus-within .nav__chev { rotate: 180deg; }
.menus-rest .nav__item--has-menu:hover .nav__menu { visibility: hidden; opacity: 0; translate: 0 -8px; pointer-events: none; transition: none; }
.menus-rest .nav__item--has-menu:hover .nav__chev { rotate: 0deg; }
.menus-rest .nav__link:hover { background: none; }

.nav__menu a {
  display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-in-out);
}
.nav__menu a:hover, .nav__menu a[aria-current='page'] { background: var(--c-accent); }
.nav__menu .nav__all { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--c-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--c-success); font-weight: var(--fw-semibold); }

/* menu button, phones and tablets */
.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: -10px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink);
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
@media (hover: hover) { .nav-toggle:hover { background: var(--c-accent); } }
/* hamburger to X in two steps: bars meet in the middle, then turn */
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-toggle__bars { position: relative; transition: background-color 0s 140ms; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0;
  transition: translate 160ms var(--ease-in-out) 140ms, rotate 160ms var(--ease-in-out);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background-color: transparent; transition-delay: 0s; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before,
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transition: translate 160ms var(--ease-in-out), rotate 160ms var(--ease-in-out) 140ms; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { translate: 0 6px; rotate: 45deg; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { translate: 0 -6px; rotate: -45deg; }

/* ------------------------------------------------------------ mobile menu */
/* fills the screen under the bar, slides in from the right; not rendered while closed */

.mobile-nav {
  position: fixed; z-index: 49; inset: var(--header-h) 0 0 0;
  overflow-y: auto; overscroll-behavior: contain; background: #fff;
  translate: 100% 0; transition: translate var(--motion-slow) var(--ease-out);
}
.mobile-nav.is-open { translate: 0 0; }
@media (min-width: 980px) { .mobile-nav { display: none; } }
body.nav-open { overflow: hidden; }

.mnav { display: grid; padding: var(--space-3) var(--gutter) calc(var(--space-9) + env(safe-area-inset-bottom, 0px)); }
.mnav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 68px;
  padding: 0; border: 0; border-bottom: 1px solid var(--c-border); background: none; cursor: pointer;
  font-size: 24px; font-weight: var(--fw-semibold); line-height: 1.15; color: var(--ink); text-align: left; text-decoration: none;
}
.mnav__row .icon { width: 18px; height: 18px; }
.mnav__row[aria-expanded='true'] { border-bottom-color: transparent; }
.mnav__row[aria-expanded='true'] .icon { rotate: 180deg; }
.mnav__row .icon { transition: rotate 260ms var(--ease-out); }
.mnav__row[aria-current='page'] { color: var(--c-success); }
.mnav__sub { display: grid; overflow: hidden; padding-bottom: var(--space-4); border-bottom: 1px solid var(--c-border); }
.mnav__sub a { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 18px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; }
.mnav__sub a[aria-current='page'] { color: var(--c-success); }
.mnav__cta { margin-top: var(--space-8); }
.mnav__cta .btn { width: 100%; }

/* ----------------------------------------------------------------- footer */

.site-footer { overflow-x: clip; padding-top: clamp(56px, 6vw, 80px); background: var(--c-secondary); color: var(--on-navy-soft); }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__brand { display: grid; gap: var(--space-6); align-content: start; }
@media (min-width: 640px) and (max-width: 979px) { .footer__brand { grid-column: 1 / -1; } }
.footer__tagline { font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.3; color: #fff; }
.footer__address { font-size: 15px; line-height: 1.7; }
.footer__address a { color: #fff; text-decoration: none; }
.footer__address a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__social { display: flex; gap: var(--space-3); list-style: none; }
.footer__social a { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: var(--radius-sm); color: #fff; }
.footer__social a:hover { background: rgba(255, 255, 255, .08); }
.footer__social img { width: 24px; height: 24px; }
.footer__heading { margin-bottom: var(--space-4); font-size: 15px; font-weight: var(--fw-semibold); color: #fff; }
.footer__col ul { display: grid; gap: 2px; list-style: none; }
.footer__col a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 36px; font-size: 15px; color: var(--on-navy-soft); text-decoration: none; transition: color var(--motion-fast) var(--ease-in-out); }
.footer__col a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
/* the wave line from the old site, with the Viking ship in the middle */
.footer__wave {
  display: grid; place-items: center; height: 32px; margin: 56px calc(50% - 50vw) 0;
  background: url(../img/graphics/footer-wave.svg) repeat-x center 21px / 28.889px 10px;
}
.footer__wave img { width: 41px; height: 32px; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  font-size: 14px; color: var(--on-navy-soft);
}
.footer__base span.nowrap { white-space: nowrap; }
@media (max-width: 639px) { .footer__base .sep { display: none; } .footer__base p span.nowrap { display: block; } }
.footer__made { display: inline-flex; align-items: center; gap: var(--space-3); }

/* ------------------------------------------------------------- components */

/* browser and phone frames around product screenshots */
.browser { overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-float); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--c-border); background: var(--c-card); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-500); }
.browser__bar span { min-width: 0; margin-left: 12px; padding: 2px 12px; overflow: hidden; border-radius: var(--radius-xs); background: #fff; font-size: 12px; line-height: 18px; color: var(--ink-meta); text-overflow: ellipsis; white-space: nowrap; }
.browser img { width: 100%; }

.phone { aspect-ratio: 9 / 19.5; padding: 6px; border-radius: 17% / 8%; background: var(--c-secondary); box-shadow: var(--shadow-float); }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 14% / 6.5%; background: #f9fafb; }
.phone__screen::before { content: ''; position: absolute; z-index: 1; top: 3%; left: 50%; width: 32%; height: 3.2%; border-radius: 99px; background: var(--c-secondary); translate: -50% 0; }
.phone__screen img { width: 100%; padding-top: 16%; background: #fff; }

/* a product scene: browser on a tinted stage, optionally with a phone in front */
.stage { position: relative; padding: clamp(20px, 4vw, 56px); border-radius: var(--radius-xl); background: var(--c-muted); }
.stage--mint { background: var(--band-mint); }
.stage--navy { background: var(--c-secondary); }
.stage--with-phone { padding-right: clamp(24px, 15vw, 210px); }
.stage .phone { position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(-32px, -2vw, -16px); width: clamp(116px, 16vw, 220px); }
@media (max-width: 639px) {
  .stage--with-phone { padding-right: clamp(20px, 4vw, 56px); padding-bottom: 140px; }
  .stage .phone { width: 116px; }
}

/* cards: design system surface, hover changes background AND border together */
.card {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7);
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none;
  transition: background-color var(--motion-normal) var(--ease-in-out), border-color var(--motion-normal) var(--ease-in-out);
}
a.card:hover { background-color: var(--c-accent); border-color: var(--c-border-dark); }
.card h3 { font-size: var(--text-h4); line-height: 1.25; }
.card p { font-size: 15px; line-height: 1.55; }
.card .more { margin-top: auto; padding-top: var(--space-5); }
.card--white { background: #fff; }

/* the "New" marker next to Kontrakt.no */
.new { margin-left: var(--space-3); }

/* fact list: label left, value right */
.facts { display: grid; }
.facts > div { display: grid; gap: 2px; padding: var(--space-5) 0; border-bottom: 1px solid var(--c-border); }
.facts > div:first-child { padding-top: 0; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: var(--text-sm); color: var(--ink-meta); }
.facts dd { font-weight: var(--fw-medium); }
@media (min-width: 620px) { .facts > div { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; } }

/* flag next to a name */
.flag { display: inline-block; width: 18px; height: auto; aspect-ratio: 4 / 3; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 31, 68, .1); vertical-align: -1px; }

/* house: a photo cut as a house with a pitched roof */
.house { aspect-ratio: 1 / 1.05; overflow: hidden; clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); background: var(--c-muted); }
.house img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 60%; }

/* list rows with a top rule, used for jobs, press items and reports */
.rows { list-style: none; border-top: 1px solid var(--c-border); }
.row { display: grid; gap: var(--space-2) var(--space-7); padding: var(--space-6) 0; border-bottom: 1px solid var(--c-border); }
.row__title { font-size: 18px; font-weight: var(--fw-semibold); line-height: 1.3; }
a.row { color: var(--ink); text-decoration: none; transition: background-color var(--motion-fast) var(--ease-in-out); }
a.row:hover .row__title { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.row .icon { transition: transform var(--motion-normal) var(--ease-out); }
a.row:hover .icon { transform: translateX(4px); }
.row--job { grid-template-columns: 1fr 20px; align-items: center; }
.row--job .row__tags { grid-column: 1; }
.row--job > .icon { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 720px) {
  .row--job { grid-template-columns: 1fr auto 20px; }
  .row--job .row__tags { grid-column: auto; }
  .row--job > .icon { grid-column: auto; grid-row: auto; }
  .row--news { grid-template-columns: 120px 1fr; align-items: baseline; }
}
.row__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row p { margin-top: var(--space-1); font-size: 15px; line-height: 1.55; color: var(--ink); }

/* stats: number over label, divided by thin rules */
.stats { display: flex; flex-wrap: wrap; row-gap: var(--space-7); }
.stats > div { padding-inline: clamp(18px, 2.6vw, 36px); border-left: 1px solid var(--c-border-dark); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dt { order: 2; font-size: 15px; line-height: 1.4; color: var(--ink-meta); }
.stats dd { font-size: clamp(28px, 2.8vw, 36px); font-weight: var(--fw-semibold); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats > div { display: flex; flex-direction: column; gap: 2px; }
/* on navy, four across */
.stat-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
@media (min-width: 860px) { .stat-band { grid-template-columns: repeat(3, 1fr); } }
.stat-band > div { display: flex; flex-direction: column-reverse; gap: var(--space-2); padding: 0 var(--space-7); border-left: 1px solid rgba(255, 255, 255, .16); }
.stat-band dd { font-size: clamp(32px, 3.6vw, 48px); font-weight: var(--fw-semibold); line-height: 1.05; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.stat-band dt { font-size: 15px; line-height: 1.4; color: var(--on-navy-soft); }
@media (max-width: 480px) { .stat-band > div { padding: 0 var(--space-4); } .stat-band dd { font-size: clamp(24px, 7.4vw, 32px); } .stat-band dt { font-size: 14px; } }

/* timeline: one line, dots, alternating sides on wide screens */
.timeline { position: relative; display: grid; list-style: none; }
.timeline::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 7px; width: 2px; background: var(--c-border-dark); }
.timeline li { position: relative; padding: 0 0 var(--space-8) 40px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; top: 6px; left: 0; width: 16px; height: 16px; border: 3px solid var(--c-primary); border-radius: 50%; background: #fff; }
.timeline time { display: block; margin-bottom: 2px; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--c-success); }
.timeline p { font-weight: var(--fw-medium); line-height: 1.45; }
@media (min-width: 860px) {
  .timeline::before { left: 50%; translate: -1px 0; }
  .timeline li { width: 50%; padding: 0 48px var(--space-8) 0; text-align: right; }
  .timeline li::before { left: auto; right: -8px; }
  .timeline li:nth-child(even) { margin-left: 50%; padding: 0 0 var(--space-8) 48px; text-align: left; }
  .timeline li:nth-child(even)::before { left: -8px; right: auto; }
}

/* values: a navy rule above each, no boxes */
.values { display: grid; gap: var(--space-8) var(--space-8); }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value { padding-top: var(--space-6); border-top: 2px solid var(--c-secondary); }
.value h3 { font-size: var(--text-h4); }
.value p { margin-top: var(--space-3); font-size: 15px; line-height: 1.6; }

/* bullet list with green squares */
.ticks { display: grid; gap: var(--space-3); list-style: none; }
.ticks li { position: relative; padding-left: 22px; font-weight: var(--fw-medium); line-height: 1.5; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--c-primary); }

/* report cover drawing, for the Rent Index */
.report { position: relative; width: min(240px, 70%); aspect-ratio: 3 / 4; }
.report i { position: absolute; inset: 0; border-radius: var(--radius-sm); }
.report i:nth-child(1) { transform: translate(18px, -14px); background: #c9d3e2; }
.report i:nth-child(2) { transform: translate(9px, -7px); background: #8fa0bb; }
.report__front {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  border-radius: var(--radius-sm); background: var(--c-secondary); color: #fff; box-shadow: 0 14px 30px rgba(10, 31, 68, .28);
}
.report__label { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }
.report__title { display: block; margin-top: 10px; font-size: clamp(28px, 3vw, 38px); font-weight: var(--fw-semibold); line-height: 1; }
.report__desc { display: block; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--c-primary); font-size: 13px; line-height: 1.45; color: var(--on-navy-soft); }
.report .logo svg { height: 14px; }

/* ----------------------------------------------------------- home: hero */

.hero { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px); text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero .lead { max-width: 44ch; margin: var(--space-7) auto 0; }
.hero .btn-row { justify-content: center; margin-top: var(--space-8); }

/* ------------------------------------------------ home: the building block */
/* An illustrated town on the left, the promise on green on the right. One 7s
   loop: the town's quarters step one place clockwise and back; on wide screens
   a photo then slides in from the left, pushes the town and the promise out,
   and the town comes back. Only transforms animate. site.js starts it, pauses
   it out of view, and the pause button stops it (WCAG 2.2.2). */

.block { position: relative; display: grid; gap: 14px; --loop: 7s; --ease-loop: cubic-bezier(.65, 0, .35, 1); }
@media (min-width: 760px) { .block { grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius-lg); } }
.block__art { position: relative; z-index: 1; aspect-ratio: 1; }
.block__art svg { width: 100%; height: 100%; }
.block__quad { transform-box: view-box; }
.block__panel {
  position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 280px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg);
  background: var(--c-primary); color: #fff;
}
/* white on brand green is 3.0:1, which passes AA only as large text: keep it at 24px or more */
.block__panel p { font-size: clamp(36px, 4.6vw, 64px); font-weight: var(--fw-semibold); line-height: 1.04; }
/* the logo all white on green: its green mark would disappear */
.block__panel .logo { color: #fff; --logo-accent: #fff; }
.block__panel .logo svg { height: 20px; }
.block__photo { display: none; }
.block.is-live .block__quad { animation: block-step var(--loop) var(--ease-loop) infinite; }
@keyframes block-step {
  0%, 7.14% { transform: translate(0, 0); }
  12.86%, 20% { transform: translate(var(--to)); }
  25.71%, 100% { transform: translate(0, 0); }
}
@media (min-width: 760px) {
  .block .block__panel { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .block__photo { position: absolute; z-index: 2; inset: 0; display: block; overflow: hidden; transform: translateX(-100%); }
  .block__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  .block.is-live :is(.block__art, .block__panel, .block__photo, .block__photo img) { will-change: transform; }
  .block.is-live .block__art { animation: block-art var(--loop) var(--ease-loop) infinite; }
  .block.is-live .block__panel { animation: block-panel var(--loop) var(--ease-loop) infinite; }
  .block.is-live .block__photo { animation: block-photo var(--loop) var(--ease-loop) infinite; }
  .block.is-live .block__photo img { animation: block-photo-img var(--loop) var(--ease-loop) infinite; }
}
/* a half is 100%; the whole block is (200% + 14px) of a half */
@keyframes block-art {
  0%, 31.43% { transform: translateX(0); }
  41.43% { transform: translateX(calc(200% + 14px)); }
  41.5%, 88.57% { transform: translateX(calc(-100% - 14px)); }
  100% { transform: translateX(0); }
}
@keyframes block-panel {
  0%, 31.43% { transform: translateX(0); }
  41.43% { transform: translateX(calc(200% + 14px)); }
  41.5%, 47.14% { transform: translateX(calc(-200% - 14px)); }
  55.71%, 88.57% { transform: translateX(calc(-100% - 14px)); }
  100% { transform: translateX(0); }
}
@keyframes block-photo {
  0%, 31.43% { transform: translateX(-100%); }
  41.43%, 47.14% { transform: translateX(0); }
  55.71%, 88.57% { transform: translateX(calc(50% - 7px)); }
  100% { transform: translateX(100%); }
}
@keyframes block-photo-img {
  0%, 47.14% { transform: translateX(0); }
  55.71%, 100% { transform: translateX(calc(-25% + 7px)); }
}
.block.is-resting :is(.block__quad, .block__art, .block__panel, .block__photo, .block__photo img),
.motion-paused .block :is(.block__quad, .block__art, .block__panel, .block__photo, .block__photo img) { animation-play-state: paused; }

/* phones: the town and the promise side by side, as on wide screens, instead of
   two full-width squares stacked; only the quarters step, there is no photo */
@media (max-width: 759px) {
  .block { grid-template-columns: 1fr 1fr; gap: 10px; }
  .block__panel { min-height: 0; gap: 12px; padding: clamp(14px, 4.5vw, 24px); border-radius: var(--radius-md); }
  .block__panel p { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.1; }
  .block__panel .logo { min-height: 0; }
  .block__panel .logo svg { height: 12px; }
  .block .motion-toggle { right: 8px; bottom: 8px; width: 28px; height: 28px; }
}

/* pause / play for looping motion (one control per animation, same state for all) */
.motion-toggle {
  position: absolute; z-index: 5; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(10, 31, 68, .14); border-radius: var(--radius-full); background: rgba(255, 255, 255, .9); color: var(--c-secondary);
  cursor: pointer; opacity: .75; transition: opacity var(--motion-fast) var(--ease-in-out), background-color var(--motion-fast) var(--ease-in-out);
}
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; background: #fff; }
/* the symbols are drawn in CSS: two bars for pause, a triangle for play */
.motion-toggle::before { content: ''; width: 10px; height: 11px; border-inline: 3px solid currentColor; }
.motion-paused .motion-toggle::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ---------------------------------------------------- home: feature tiles */

.tiles { display: grid; gap: 14px; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; border-radius: var(--radius-lg); text-decoration: none;
}
.tile h2 { display: flex; align-items: center; gap: var(--space-3); font-size: clamp(22px, 2.2vw, 28px); color: inherit; }
.tile h2 .icon { width: 20px; height: 20px; transition: transform var(--motion-normal) var(--ease-out); }
.tile:hover h2 .icon { transform: translateX(4px); }
.tile p { max-width: 40ch; font-size: 16px; line-height: 1.55; }
.tile__media { margin-top: auto; padding-top: var(--space-7); }
.tile__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tile--navy { background: var(--c-secondary); color: #fff; }
.tile--navy p { color: var(--on-navy-soft); }
.tile--mint { background: var(--band-mint); color: var(--c-secondary); }
.tile--mint p { color: var(--ink-soft); }
.tile--mint .tile__media { display: grid; place-items: center; padding-block: var(--space-9) clamp(32px, 4vw, 48px); }
@media (max-width: 759px) { .tile--mint .tile__media { padding-block: var(--space-7) var(--space-8); } .tile--mint .report { width: min(200px, 60%); } }

/* --------------------------------------------------------- home: news */

.news { display: grid; gap: 14px; }
@media (min-width: 640px) { .news { grid-template-columns: repeat(3, 1fr); } }
.news .card { min-height: 0; }
@media (min-width: 640px) { .news .card { min-height: 200px; } }
.news time { font-size: var(--text-sm); color: var(--ink-meta); }

/* --------------------------------------------------------- home: brands */

.brands-band { overflow: hidden; background: var(--band-mint); }
.brands-band__inner { display: grid; gap: 40px; padding-top: var(--section); }
@media (min-width: 900px) { .brands-band__inner { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.brands-band .btn-row { margin-top: var(--space-7); }
.brand-list { display: grid; gap: var(--space-7); list-style: none; }
.brand-list a { display: block; color: var(--ink); text-decoration: none; }
.brand-list strong { display: flex; align-items: center; gap: var(--space-3); font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.3; }
.brand-list strong .icon { transition: transform var(--motion-normal) var(--ease-out); }
.brand-list a:hover strong .icon { transform: translateX(4px); }
.brand-list a:hover strong span:first-child { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.brand-list p { margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* the street slides slowly left for ever: two copies, moved by one copy's width */
.street { height: clamp(96px, 11vw, 160px); margin-top: clamp(48px, 6vw, 80px); overflow: hidden; position: relative; }
.street__track { display: flex; width: max-content; height: 100%; }
.street__track img { height: 100%; width: auto; max-width: none; flex: none; }
.street.is-live .street__track { animation: street-slide 70s linear infinite; }
.street.is-resting .street__track, .motion-paused .street .street__track { animation-play-state: paused; }
@keyframes street-slide { to { transform: translateX(-50%); } }
.street .motion-toggle { bottom: auto; top: 0; right: var(--gutter); }

/* ------------------------------------------------------ home: HQ, career */

.photo { overflow: hidden; border-radius: var(--radius-lg); background: var(--c-muted); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--landscape { aspect-ratio: 16 / 11; }
.photo--wide { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------- page hero */

.page-hero { padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.page-hero .lead { margin-top: var(--space-7); }
.page-hero .btn-row { margin-top: var(--space-8); }
.page-hero__photo { aspect-ratio: 4 / 3.2; }
.back { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; }
.back:hover { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.back .icon { transition: transform var(--motion-normal) var(--ease-out); }
.back:hover .icon { transform: translateX(-4px); }

/* brand page hero: the brand's own logo on a white tile */
.logo-tile { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 14%; border: 1px solid var(--c-border); border-radius: var(--radius-xl); background: #fff; }
.logo-tile img { width: 100%; height: auto; }
@media (max-width: 899px) { .page-hero .logo-tile { aspect-ratio: 16 / 7; max-width: 520px; padding: 8% 14%; } }

/* --------------------------------------------------------------- brands */

.brand-cards { display: grid; gap: var(--space-5); padding: clamp(16px, 2.6vw, 28px); border-radius: var(--radius-xl); background: var(--band-mint); }
@media (min-width: 640px) { .brand-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .brand-cards { grid-template-columns: repeat(4, 1fr); } }
.brand-card { display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand-card__logo {
  display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: var(--space-3); padding: 0 16%;
  border: 1px solid transparent; border-radius: var(--radius-lg); background: #fff;
  transition: border-color var(--motion-normal) var(--ease-in-out), box-shadow var(--motion-normal) var(--ease-in-out);
}
.brand-card__logo img { width: 100%; height: auto; }
.brand-card:hover .brand-card__logo { border-color: var(--c-border-dark); box-shadow: var(--shadow-medium); }
.brand-card h3 { display: flex; align-items: center; font-size: var(--text-h4); }
.brand-card p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* phones: each brand as a compact row, logo left, text right */
@media (max-width: 639px) {
  .brand-card { display: grid; grid-template-columns: 116px 1fr; column-gap: var(--space-5); row-gap: 2px; align-content: center; }
  .brand-card__logo { grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3; padding: 0 12px; border-radius: var(--radius-md); }
  .brand-card h3 { align-self: end; font-size: 17px; }
  .brand-card p { align-self: start; font-size: 14px; }
}

/* brand page product rows */
.feature-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 9vw, 128px); }
.feature-rows .lead { margin-top: var(--space-5); }
.feature-rows .ticks { margin-top: var(--space-7); }

/* markets: two numbers set large */
.markets { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 820px) { .markets { grid-template-columns: 1fr 1fr; } }
.markets > div { padding-top: var(--space-7); border-top: 2px solid var(--c-secondary); }
.markets__country { display: block; margin-bottom: var(--space-5); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-meta); }
.markets__num { display: block; font-size: clamp(56px, 7vw, 96px); font-weight: var(--fw-semibold); line-height: .95; color: var(--ink); font-variant-numeric: tabular-nums; }
.markets__sub { display: block; margin-top: var(--space-4); font-weight: var(--fw-medium); }
.markets p { max-width: 46ch; margin-top: var(--space-4); }
.markets small { display: block; margin-top: var(--space-4); font-size: 13px; color: var(--ink-meta); }

/* ------------------------------------------------------------------ team */

.team-hero { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px); text-align: center; }
.team-hero .lead { margin: var(--space-5) auto 0; }
.faces { display: flex; justify-content: center; margin-top: var(--space-7); }
.faces img, .faces span { width: 48px; height: 48px; margin-left: -10px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; background: var(--band-mint); object-fit: cover; }
.faces img:first-child { margin-left: 0; }
.faces span { display: grid; place-items: center; background: var(--c-secondary); color: #fff; font-size: 14px; font-weight: var(--fw-semibold); }

.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px var(--space-5); max-width: 1040px; margin-inline: auto; list-style: none; }
@media (min-width: 640px) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .people { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; } }
.person { text-align: center; }
.person > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--band-mint); }
.person__name { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--space-3); max-width: 100%; margin-top: var(--space-4); font-size: 17px; font-weight: var(--fw-semibold); line-height: 1.3; }
.person__role { margin-top: 2px; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-meta); }
@media (max-width: 639px) { .person__name { font-size: 15px; } .people { gap: 28px 14px; } }

/* the last place in the grid: an open seat */
.person--join a {
  display: grid; place-items: center; align-content: center; gap: var(--space-4); aspect-ratio: 1;
  border: 2px dashed rgba(0, 170, 115, .45); border-radius: var(--radius-lg); background: var(--band-mint);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--motion-normal) var(--ease-in-out), background-color var(--motion-normal) var(--ease-in-out);
}
.person--join a:hover { border-style: solid; border-color: var(--c-primary); background-image: linear-gradient(var(--c-accent), var(--c-accent)); }
.person--join .plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--c-primary-dark); transition: background-color var(--motion-normal) var(--ease-in-out), color var(--motion-normal) var(--ease-in-out), rotate var(--motion-normal) var(--ease-out); }
.person--join .plus .icon { width: 22px; height: 22px; }
.person--join a:hover .plus { background: var(--c-primary); color: #fff; rotate: 90deg; }

/* -------------------------------------------------------------- investor */

.rounds { list-style: none; }
.round { display: grid; gap: 2px 24px; align-items: baseline; padding: var(--space-6) 0; border-bottom: 1px solid var(--c-border); }
@media (min-width: 620px) { .round { grid-template-columns: 80px 1fr auto; } }
.round__year { font-weight: var(--fw-semibold); }
.round__amount { font-size: clamp(22px, 2.3vw, 28px); font-weight: var(--fw-semibold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rounds__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: var(--space-6); border-top: 2px solid var(--c-secondary); font-weight: var(--fw-semibold); }

.board-photo { width: 100%; aspect-ratio: 21 / 8; margin-bottom: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); object-fit: cover; object-position: center 60%; background: var(--c-muted); }
@media (max-width: 720px) { .board-photo { aspect-ratio: 3 / 2; } }
.board { display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: repeat(2, 1fr); list-style: none; }
@media (min-width: 700px) { .board { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .board { grid-template-columns: repeat(5, 1fr); } }
.board img { width: 100%; aspect-ratio: 2 / 3; margin-bottom: var(--space-4); border-radius: var(--radius-lg); object-fit: cover; background: var(--c-muted); }
.board strong { display: block; font-weight: var(--fw-semibold); line-height: 1.3; }
.board span { display: block; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-meta); }

.reports { display: grid; gap: var(--space-7); }
@media (min-width: 560px) { .reports { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.reports h3 { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--c-border-dark); font-size: var(--text-sm); color: var(--ink-meta); }
.reports ul { display: grid; gap: 2px; list-style: none; }
.reports a, .reports .missing { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 36px; font-size: 15px; }
.reports a { color: var(--ink); text-decoration: none; }
.reports a .icon { color: var(--c-primary-dark); }
.reports a:hover { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.reports .missing { padding-left: 24px; color: var(--ink-meta); }

/* --------------------------------------------------------------- careers */

.life { display: grid; gap: 40px; }
@media (min-width: 900px) { .life { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.life__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.life__photos .photo { aspect-ratio: 1; }

.steps { list-style: none; border-top: 2px solid var(--c-secondary); counter-reset: step; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); padding: var(--space-7) 0; border-bottom: 1px solid var(--c-border); }
.step:last-child { border-bottom: 0; }
.step__n { padding-top: 2px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--c-success); font-variant-numeric: tabular-nums; }
.step h2 { font-size: 18px; line-height: 1.3; }
.step p { margin-top: var(--space-1); font-size: 15px; line-height: 1.55; }

.job-layout { display: grid; gap: 48px; }
@media (min-width: 960px) { .job-layout { grid-template-columns: 1fr 320px; gap: 72px; align-items: start; } }
.job-aside { display: grid; gap: var(--space-5); }
.job-layout > * { min-width: 0; }
.job-aside .facts > div { grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 960px) { .job-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.job-aside .card { gap: var(--space-4); }
.job-aside .btn { width: 100%; }
.job-aside h2 { font-size: 18px; }

/* --------------------------------------------------------------- contact */

.contact-cards .card { gap: var(--space-2); }
.contact-cards .card h3 { font-size: 18px; }

/* ------------------------------------------------------------- not found */

.not-found { display: grid; justify-items: center; gap: var(--space-5); padding-block: var(--section); text-align: center; }
.not-found svg { width: 120px; height: auto; }

/* ---------------------------------------------------------------- print */

@media print {
  .site-header, .mobile-nav, .site-footer, .motion-toggle, .street, .block__photo { display: none !important; }
  body { color: #000; }
  a { text-decoration: underline; }
}

/* ---------------------------------------------------------------- filters */
/* press: one pressed pill shows that brand's rows */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.pill {
  min-height: 32px; padding: 0 14px; border: 1px solid var(--c-border-dark); border-radius: var(--radius-full);
  background: #fff; font-size: 13px; font-weight: var(--fw-semibold); color: var(--c-secondary-dark); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-in-out), border-color var(--motion-fast) var(--ease-in-out);
}
.pill:hover { background-color: var(--c-accent); }
.pill[aria-pressed='true'] { background: var(--c-secondary); border-color: var(--c-secondary); color: #fff; }

/* -------------------------------------------------------------- utilities */
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; } .mt-32 { margin-top: 32px; } .mt-56 { margin-top: clamp(40px, 5vw, 56px); }
.mb-16 { margin-bottom: 16px; } .m-0 { margin: 0; } .pt-0 { padding-top: 0 !important; }
.d-block { display: block; } .self-end { justify-self: start; }
@media (min-width: 900px) { .self-end { justify-self: end; } }
.center { display: grid; justify-items: center; }
.w-15ch { max-width: 15ch; } .w-16ch { max-width: 16ch; } .w-20ch { max-width: 20ch; }
.btn-row--center { justify-content: center; }
.btn-row--end { justify-content: flex-start; }
@media (min-width: 900px) { .btn-row--end { justify-content: flex-end; } }
.split--top { align-items: start; }
.card--cta { padding: clamp(28px, 4vw, 48px); }
.logo-tile--wide { aspect-ratio: 16 / 9; }
.page-hero--tight { padding-bottom: 32px; }

/* touch screens: text links on their own get a finger-sized target (WCAG 2.5.8) */
@media (pointer: coarse), (max-width: 979px) {
  .back, a.more { min-height: 40px; }
  .back { margin-bottom: var(--space-4); }
}