/* Malerfirmaet Tec, direction B1 "Guld og stål", painted: drawn in the real logo's
   technique, with paint marks (swash, dab, roller stroke, rolled edges) where the
   first version had plan marks (sheet codes, crop marks, grid, dimension lines). Navy, cream and one flat gold; filled shapes, no hairlines.
   Rules: design-system.md and DIRECTION.md. Restraint: bar.md. */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Fallbacks scaled to the real fonts' x-height, so text barely moves when the fonts arrive. */
@font-face { font-family: "NR Fallback"; src: local("Georgia"); size-adjust: 88.6%; }
@font-face { font-family: "SG Fallback"; src: local("Arial"); size-adjust: 101.5%; }

:root {
  /* The logo's three colours. Nothing else carries colour. */
  --navy: #09233b;
  --navy-deep: #061a2c;
  --cream: #f8f0e0;       /* the logo's cream: text, numerals and structure on navy */
  --gold: #b88838;        /* the logo's gold on white. Shapes, frames and rules only: 3.2:1, never text */
  --gold-n: #e0b858;      /* the logo's gold on navy: 8.5:1, so labels and navy text on a gold button read */
  --ink: #172331;
  --muted: #5a6470;
  --canvas: #ffffff;
  --warm: #f7f4ec;        /* the one light band per page: cream paper */
  --line: #e3e2dc;
  --field: #8c949c;
  --error: #b42318;

  --font-head: "Newsreader", "NR Fallback", Georgia, serif;
  --font-body: "Schibsted Grotesk", "SG Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(44px, 5.3vw, 76px);
  --fs-hero-num: clamp(80px, 10vw, 144px);
  --fs-cta: clamp(48px, 7.2vw, 104px);
  --fs-title: clamp(32px, 3.4vw, 48px);
  --fs-item: clamp(22px, 1.8vw, 26px);
  --fs-body: 17px;
  --fs-label: 12px;

  --gutter: 48px;
  --max: 1280px;
  --section: 160px;
  --head-h: 88px;
  --radius: 2px;
  --grade: saturate(0.82) contrast(1.03);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Paint marks, used as masks so each takes its colour from the background it sits on. */
  --swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath fill-rule='evenodd' d='M3 5.5C12 2.6 30 2 46 2.8c7 .4 12 1.2 15 2.4-3 1.3-8 2.3-14 3.4C36 10.4 22 12.6 10 13.8 5 14.3 1.6 12.9 1.3 10.4 1 8.3 1.5 6.4 3 5.5zM14 6.4l24-1.6.2.9-24 1.7zM18 9.6l20-2.2.2.8-20 2.3z'/%3E%3C/svg%3E");
  --roller: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M4 3.2C40 1.6 110 1 170 1.4c28 .2 50 .8 64 1.6 2 1.4 2.2 2.6.6 3.4 2.4 1 2.6 2.4.4 3.4-1.4 1-3 1.8-5 2.2C200 12.6 120 13 60 12.8 34 12.7 16 12.4 6 11.8 2.6 11 1 9.6 3 8.4 .6 7 .8 5.4 4 3.2zM30 5.2h150v.7H30zM60 8.6h120v.6H60z'/%3E%3C/svg%3E");
  --patch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -2 210 254' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q25 3 37.5 5Q50 7 65 4.5Q80 2 95 3.5Q110 5 125 3Q140 1 155 3.5Q170 6 185 4.5Q200 3 198 21.5Q196 40 199.5 60Q203 80 199 100Q195 120 198 140Q201 160 199 180Q197 200 199.5 223.5Q202 247 186 245.5Q170 244 155 246.5Q140 249 125 246Q110 243 95 245.5Q80 248 65 246Q50 244 35 247Q20 250 10 247.5Q0 245 2.5 225Q5 205 1.5 185Q-2 165 1 145Q4 125 1.5 105Q-1 85 2 65Q5 45 2.5 25.5Q0 6 12.5 4.5Z'/%3E%3C/svg%3E");
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H480L480 6Q460 6 450 7Q440 8 430 12Q420 16 410 10.5Q400 5 390 7Q380 9 370 7.5Q360 6 350 9.5Q340 13 330 10.5Q320 8 310 7Q300 6 290 8.5Q280 11 270 17.5Q260 24 250 16.5Q240 9 230 7.5Q220 6 210 10Q200 14 190 11Q180 8 170 6.5Q160 5 150 7Q140 9 130 14Q120 19 110 12.5Q100 6 90 7Q80 8 70 10Q60 12 50 8.5Q40 5 30 7Q20 9 10 7.5L0 6Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(details.menu[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; color: var(--navy); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-title); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-item); line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0 0 16px; text-wrap: pretty; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--canvas); padding: 10px 16px; }
.skip:focus { left: 16px; }

.label {
  font-family: var(--font-head);
  font-size: 19px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}
.lead { font-size: var(--fs-body); color: var(--ink); max-width: 34em; }
.small { font-size: var(--fs-label); color: var(--muted); margin: 0; letter-spacing: 0.02em; }
.credit { font-size: var(--fs-label); color: var(--muted); letter-spacing: 0.02em; }
.credit a { color: inherit; text-decoration-color: rgb(90 100 112 / 0.35); text-underline-offset: 3px; }
.credit a:hover { text-decoration-color: currentColor; }
.meta { font-size: 14px; font-weight: 600; color: var(--muted); }
.pending { color: var(--muted); font-style: italic; }
.num { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }

.preview-bar {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 6px 20px;
}

/* ---------- Header ---------- */
header.site { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--cream); border-bottom: 1px solid var(--gold-n); }
.head { display: flex; align-items: center; gap: 40px; height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 16px; margin-right: auto; text-decoration: none; color: var(--navy); min-width: 0; min-height: 44px; position: relative; z-index: 2; }
.brand-logo { width: 104px; height: auto; flex: none; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.brand.light { color: var(--cream); }

.nav { display: flex; gap: 36px; }
.nav a {
  font-size: var(--fs-body);
  color: var(--cream);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: rgb(248 240 224 / 0.4); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold-n); }
header.site :focus-visible { outline-color: var(--gold-n); }

.menu { display: none; }
.menu summary {
  position: relative; z-index: 2;
  list-style: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--cream);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 26px; height: 26px; }
.menu .menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: block; }
/* The sheet covers the whole screen; the logo and close button stay above it. */
.menu-sheet {
  position: fixed; inset: 0; z-index: 1;
  overflow-y: auto;
  background: var(--navy); color: var(--cream);
  padding: calc(var(--head-h) + 40px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 24px;
}
.menu-sheet nav { display: flex; flex-direction: column; border-top: 1px solid var(--gold-n); }
.menu-sheet nav a {
  font-family: var(--font-head);
  font-size: var(--fs-title);
  line-height: 1.2;
  color: var(--cream);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgb(248 240 224 / 0.18);
}
.menu-sheet nav a[aria-current="page"] { color: var(--gold-n); }
.menu-sheet .btn { width: 100%; }
.menu-mail { font-size: var(--fs-body); color: var(--cream); min-height: 44px; display: inline-flex; align-items: center; }
.menu-logo { width: min(100%, 220px); height: auto; margin-top: auto; padding-top: 24px; }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu { display: block; }
  .head { gap: 12px; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--navy); color: var(--canvas);
  font: inherit; font-size: var(--fs-body); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--navy-deep); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-light { background: var(--cream); color: var(--navy); }
.btn-light:hover { background: #ffffff; }
.btn-gold { background: var(--gold-n); color: var(--navy); }
.btn-gold:hover { background: #e8c468; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-outline[disabled]:hover { background: transparent; }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: var(--fs-body); font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.link svg { width: 18px; height: 18px; }
.link:hover { text-decoration: underline; }

/* ---------- Painted walls ---------- */
/* A white wall. */
.sheet { background-color: var(--canvas); }
/* A navy wall: cream text, gold labels and marks. The home page, "Teamets tal" and the team plates.
   A navy section ends in a rolled paint edge that runs onto whatever follows it. */
.navy { background-color: var(--navy); color: rgb(248 240 224 / 0.8); }
section.navy { position: relative; }
section.navy::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% - 1px); height: 26px; pointer-events: none;
  background: var(--navy);
  -webkit-mask: var(--edge) left top / 480px 26px repeat-x; mask: var(--edge) left top / 480px 26px repeat-x;
}
footer.site, section.navy + section.navy { position: relative; }
.navy h1, .navy h2, .navy h3 { color: var(--cream); }
.navy .lead { color: rgb(248 240 224 / 0.84); }
.navy .label { color: var(--gold-n); }
.navy .small, .navy .credit { color: rgb(248 240 224 / 0.66); }
.navy .link { color: var(--cream); }
.navy :focus-visible { outline-color: var(--gold-n); }
.navy .micro .ink { fill: var(--cream); }
.navy .micro .gold { fill: var(--gold-n); }
.navy .swash, .navy .dab { background: var(--gold-n); }

/* Section label: a gold brush swash, then the label in italic. */
/* The hero's last word sits on a stroke of gold paint. */
h1 .painted { position: relative; z-index: 0; white-space: nowrap; }
h1 .painted::before {
  content: ""; position: absolute; z-index: -1; left: -0.06em; right: -0.1em; bottom: 0.02em; height: 0.3em;
  background: var(--gold-n); -webkit-mask: var(--roller) left center / 100% 100% no-repeat; mask: var(--roller) left center / 100% 100% no-repeat;
}
.navy h1 .painted::before { opacity: 0.9; }
.code-label { display: inline-flex; align-items: center; gap: 12px; }
.swash {
  flex: none; width: 40px; height: 12px; background: var(--gold);
  -webkit-mask: var(--swash) center / contain no-repeat; mask: var(--swash) center / contain no-repeat;
}

/* A dab of gold paint: marks each service. Uneven, like a test patch on a wall. */
.dab {
  flex: none; display: inline-block; width: 22px; height: 19px;
  background: var(--gold); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; transform: rotate(-8deg);
}

/* ---------- Intro sheet ---------- */
.intro { padding: 104px 0 120px; }
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; align-items: center; }
.intro-text { grid-column: 1 / 8; }
.has-drawing .intro-text { grid-column: 1 / 7; }
.intro-label { margin-bottom: 32px; }
.intro-text .lead { margin: 32px 0 0; }
.intro-drawing { grid-column: 7 / 13; grid-row: 1; }
.intro-aside { grid-column: 9 / 13; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.contact-intro .intro-drawing { padding-left: 8%; }

/* The home sheet: navy, with the house drawn in gold hairlines and the sheet number in the corner. */
.home-intro { padding: 88px 0 0; border-bottom: 0; }
/* Home: a photo of a finished room behind the text, navy toward the text side.
   The service legend becomes white cards on the photo's dark lower edge. */
.has-photo { position: relative; }
.intro-photo { position: absolute; inset: 0; z-index: 0; }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; }
.intro-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--navy) 0, rgb(9 35 59 / 0.6) 14%, rgb(9 35 59 / 0) 34%),
    linear-gradient(90deg, var(--navy) 0, rgb(9 35 59 / 0.9) 28%, rgb(9 35 59 / 0.32) 52%, rgb(9 35 59 / 0) 74%);
}
.has-photo .intro-grid { position: relative; z-index: 1; }
.home-intro.has-photo { padding-top: 136px; }
.home-intro.has-photo .intro-text { grid-column: 1 / 7; padding-bottom: 72px; }
.home-intro.has-photo .legend ol { gap: 16px; border: 0; }
.home-intro.has-photo .legend li { background: var(--canvas); border-radius: 6px; box-shadow: 0 14px 36px rgb(6 26 44 / 0.28); }
.home-intro.has-photo .legend li + li { border-left: 0; }
.home-intro.has-photo .legend a, .home-intro.has-photo .legend li:first-child a { padding: 26px 24px 28px; color: var(--navy); }
.home-intro.has-photo .lg-title { color: var(--navy); }
.home-intro.has-photo .lg-text { color: var(--muted); }
.home-intro.has-photo .legend a > svg { color: var(--gold); }
.home-intro.has-photo .dab { background: var(--gold); }
.home-intro .intro-grid { row-gap: 72px; }
.home-intro .intro-text .lead { max-width: 30em; }
.home-intro .actions .link { color: var(--cream); }

/* The legend under the home drawing. Each key is a service and links to Ydelser. */
.legend { grid-column: 1 / -1; padding-bottom: 88px; }
.legend-label { margin-bottom: 14px; }
.legend ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gold-n); border-bottom: 1px solid rgb(248 240 224 / 0.18); }
.legend li + li { border-left: 1px solid rgb(248 240 224 / 0.18); }
.legend a { display: grid; grid-template-columns: 34px 1fr 18px; gap: 18px; align-items: start; padding: 24px 24px 28px; text-decoration: none; color: var(--cream); min-height: 44px; }
.legend li:first-child a { padding-left: 0; }
.legend a > svg { width: 18px; height: 18px; align-self: center; color: var(--gold-n); }
.lg-title { display: block; font-family: var(--font-head); font-size: var(--fs-item); line-height: 1.2; color: var(--cream); }
.lg-text { display: block; margin-top: 6px; color: rgb(248 240 224 / 0.7); line-height: 1.5; }
.legend a:hover .lg-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--gold-n); }

/* ---------- Photo plates ---------- */
.hero { margin: 0; }
.hero img { width: 100%; height: clamp(320px, 56vh, 640px); height: clamp(320px, 56svh, 640px); object-fit: cover; filter: var(--grade); }
.hero figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 16px; font-size: var(--fs-label); color: var(--muted); letter-spacing: 0.02em; }
.hero figcaption .credit { margin-left: auto; }
.hero figcaption .label { color: var(--navy); }
.plate { padding-bottom: 112px; }
.home-intro + .plate { padding-top: 0; }
.plate-inset .plate-box { position: relative; }
.plate-inset img { height: clamp(280px, 48vh, 540px); height: clamp(280px, 48svh, 540px); border-radius: var(--radius); }
.plate-inset figcaption { padding-top: 24px; }

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section.flush-top { padding-top: 0; }
.intro + .section.flush-top { padding-top: 104px; }
.warm { background-color: var(--warm); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline; gap: 16px 32px; margin-bottom: 64px; }
.section-head h2 { margin-top: 20px; max-width: 16em; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; align-items: start; }
.split > :first-child { grid-column: 1 / 6; }
.split > :last-child { grid-column: 7 / 13; }
.split h2 { margin: 20px 0 24px; }

/* ---------- Teamets tal: cream numerals on navy, gold dimension lines ---------- */
.tal { padding: var(--section) 0; }
.tal-head .lead { margin-bottom: 24px; }
.proof { margin: 0; padding-top: 24px; border-top: 1px solid var(--gold-n); font-weight: 600; color: var(--cream); max-width: 34em; }
.tal-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 120px 0 0; }
.tal-item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 20px; margin: 0; }
.tal-item dd {
  margin: 0;
  font-family: var(--font-head);
  font-variation-settings: "opsz" 72;
  font-size: var(--fs-hero-num);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--cream);
  white-space: nowrap;
}
.tal-prefix { font-family: var(--font-body); font-size: var(--fs-body); letter-spacing: 0; color: rgb(248 240 224 / 0.66); margin-right: 8px; }
.tal-item dt { display: flex; flex-direction: column; gap: 6px; }
.tal-item dt .label { color: var(--cream); }
.tal-note { color: rgb(248 240 224 / 0.72); }
.tal-foot { margin: 64px 0 0; font-size: var(--fs-label); color: rgb(248 240 224 / 0.66); letter-spacing: 0.02em; }
/* A roller stroke under each number, in gold. */
.stroke {
  display: block; height: 12px; margin-bottom: 14px; background: var(--gold-n);
  -webkit-mask: var(--roller) left center / 100% 100% no-repeat; mask: var(--roller) left center / 100% 100% no-repeat;
}
.areas-label { margin-top: 32px; }
.areas { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.areas li { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); font-weight: 600; }

/* ---------- Process: a drawn line with four gold nodes ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { position: relative; padding-right: 32px; }
.steps .micro { display: block; width: 48px; height: 48px; margin-bottom: 28px; }
.steps .node { position: relative; z-index: 1; display: block; width: 20px; height: 18px; background: var(--gold); margin-bottom: 24px; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
.steps li::before { content: ""; position: absolute; top: calc(48px + 28px + 6px); left: 8px; right: -8px; height: 6px; background: rgb(9 35 59 / 0.18); -webkit-mask: var(--roller) left center / 100% 100% no-repeat; mask: var(--roller) left center / 100% 100% no-repeat; }
.steps li:last-child::before { right: 0; }
.steps p { margin: 10px 0 0; font-family: var(--font-head); font-size: var(--fs-item); line-height: 1.25; color: var(--navy); max-width: 12em; }
/* Vertical: the line runs down the left. Kontakt, and every timeline on phones. */
.steps.vertical { grid-template-columns: 1fr; }
.steps.vertical li { padding: 0 0 26px 40px; }
.steps.vertical li:last-child { padding-bottom: 0; }
.steps.vertical .micro { display: none; }
.steps.vertical .node { position: absolute; left: 0; top: 3px; width: 18px; height: 16px; margin: 0; }
.steps.vertical li::before { top: 19px; bottom: -3px; left: 7px; right: auto; width: 3px; height: auto; -webkit-mask: none; mask: none; border-radius: 2px; }
.steps.vertical li:last-child::before, .steps.vertical li:last-child::after { display: none; }
.steps.vertical p { margin: 2px 0 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); max-width: none; }

/* ---------- Service sheet (Ydelser): four numbered cells, a filled icon each ---------- */
.service-sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.service-sheet li { display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 14px; align-items: center; padding: 40px 40px 48px 0; border-bottom: 1px solid var(--line); }
.service-sheet li:nth-child(odd) { border-right: 1px solid var(--line); }
.service-sheet li:nth-child(even) { padding-left: 40px; padding-right: 0; }
.service-sheet .micro { grid-column: 1; width: 48px; height: 48px; }
.service-sheet h3 { grid-column: 1; }
.service-sheet p { grid-column: 1; margin: 0; max-width: 30em; }
/* The route (Ydelser): the four steps on navy, a cream line with gold nodes. */
.navy .steps li::before, .navy .steps li::after, .navy .steps:not(.vertical) li:nth-child(2)::after { background: var(--cream); }
.navy .steps .node { background: var(--gold-n); }
.navy .steps p { color: var(--cream); }
.route .actions { margin-top: 72px; }

/* ---------- Ruled rows (Ydelser services, projects without photos) ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); align-items: baseline; }
.rows li:first-child { border-top: 1px solid var(--gold); }
.rows .micro { grid-column: 1 / 2; align-self: start; margin-top: -6px; }
.rows h3 { grid-column: 2 / 7; }
.rows li > p, .rows li > div { grid-column: 8 / 13; margin: 0; max-width: 34em; }
.rows li > div p { margin: 0; }
.rows .meta { margin-top: 12px !important; }
.service-rows .dab { grid-column: 1 / 2; align-self: start; width: 30px; height: 26px; margin-top: 4px; }
.rows-projects li { align-items: start; }
.rows-projects h3 { grid-column: 5 / 8; display: flex; align-items: center; gap: 14px; }
.rows-projects li > div { grid-column: 9 / 13; }
.row-sketch { grid-column: 1 / 4; margin: 0; }
.row-sketch .sketch { width: 100%; height: 132px; padding: 12px; background: var(--canvas); border: 1px solid var(--line); }
.row-sketch figcaption { margin-top: 10px; font-size: var(--fs-label); color: var(--muted); letter-spacing: 0.02em; }
.more-note { margin-top: 8px; font-style: italic; }
.intro-skyline { grid-column: 1 / -1; margin: 8px 0 0; }
.intro-skyline .skyline { width: 100%; height: auto; }
.intro-skyline figcaption { margin-top: 12px; text-align: right; }

/* ---------- Project cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 24px; }
.project-media { aspect-ratio: 4 / 5; overflow: hidden; padding: 10px; border: 1px solid var(--gold); background: var(--canvas); margin-bottom: 24px; }
.project-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.sketch-card .project-media { display: grid; place-items: center; padding: 28px; border-color: var(--gold-n); }
.sketch-card .project-media .dw { width: 100%; height: 100%; }
.project h3 { margin-bottom: 8px; }
.project { display: flex; flex-direction: column; }
.project > p:not(.meta):not(.credit) { margin: 0; color: var(--ink); max-width: 34em; }
.project-more p { margin: 14px 0 0; color: var(--ink); max-width: 34em; }
.project-more .project-note { font-family: var(--font-head); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--muted); }
details.project-more { margin-top: 12px; }
details.project-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--navy); }
details.project-more summary::-webkit-details-marker { display: none; }
details.project-more summary::before { content: ""; width: 26px; height: 8px; background: var(--gold); -webkit-mask: var(--roller) left center / 100% 100% no-repeat; mask: var(--roller) left center / 100% 100% no-repeat; }
details.project-more summary::after { content: "+"; font-weight: 400; color: var(--gold); }
details.project-more[open] summary::after { content: "−"; }
details.project-more summary:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.project .meta { margin-top: auto; padding-top: 14px; }
.project .credit { margin-top: auto; padding-top: 6px; }
.project .meta + .credit { margin-top: 0; }
.project > p:not(.meta):not(.credit) + .credit { margin-top: auto; }

.plate-no { margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Team: a row of tall framed plates ----------
   Each portrait sits inside a thin gold frame line on the navy sheet, like a
   plate in a drawing set. The person without a portrait gets the same frame, empty. */
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 32px; }
.plates li { min-width: 0; }
.plate-frame { margin: 0 0 24px; padding: 14px; border: 1px solid var(--gold-n); }
.plate-frame img, .plate-empty { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.plate-frame img { filter: var(--grade); }
.plate-empty { display: grid; place-items: center; padding: 12px; border: 1px dashed rgb(205 168 102 / 0.55); text-align: center; }
.plate-empty span { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-n); line-height: 1.6; }
.plates h3 { margin: 0 0 6px; font-size: 22px; }
.plates .role { margin: 0 0 4px; font-variant-caps: all-small-caps; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; color: var(--gold-n); }
.plates a { display: flex; width: fit-content; align-items: center; min-height: 44px; font-size: 15px; color: rgb(248 240 224 / 0.8); overflow-wrap: anywhere; text-decoration-color: rgb(248 240 224 / 0.35); }
.plates a:hover { color: var(--cream); text-decoration-color: currentColor; }
/* Compact: the home page team list, on white. Navy frames, gold only in the role. */
.plates.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.plates.compact .plate-frame { padding: 6px; margin-bottom: 14px; border-color: var(--gold); }
.plates.compact .plate-empty { border-color: rgb(176 136 55 / 0.6); }
.plates.compact .plate-empty span { color: var(--muted); letter-spacing: 0.1em; }
.plates.compact h3 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--navy); margin-bottom: 2px; }
.plates.compact .role { color: var(--muted); font-size: 14px; }
.plates.compact a { color: var(--ink); font-size: 15px; text-decoration-color: rgb(23 35 49 / 0.35); }
.plates.compact a:hover { color: var(--navy); text-decoration-color: currentColor; }
/* Kontakt: two direct contacts side by side; the facts block beside them. */
.contact-main .plates.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 480px; }
.team-split > :last-child { align-self: center; }
.team-split .link { margin-top: 8px; }
.growth-figure { margin: 0; max-width: 480px; justify-self: end; width: 100%; }

/* Values: each item hangs from a rule with a gold node. */
.value-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.value-list li { position: relative; }
.value-list li::before { content: ""; display: block; height: 9px; margin-bottom: 28px; background: var(--gold); -webkit-mask: var(--roller) left center / 100% 100% no-repeat; mask: var(--roller) left center / 100% 100% no-repeat; }
.value-list .micro { margin-bottom: 24px; }
.value-list h3 { margin-bottom: 10px; }
.value-list p { margin: 0; color: var(--ink); }

/* ---------- Title block: the info box in the corner of a sheet ---------- */
.tblock { border: 1px solid var(--navy); background: var(--canvas); }
.tb-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--navy); }
.tb-head img { width: 76px; height: auto; flex: none; }
.tb-head strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.tb-slogan { display: block; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tblock dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.tblock dl > div { min-width: 0; margin-right: -1px; padding: 12px 20px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tblock dl > div.wide { grid-column: 1 / -1; }
.tblock dl > div:last-child { border-bottom: 0; }
.tblock dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tblock dd { margin: 0; color: var(--navy); overflow-wrap: anywhere; }
.tblock dd > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); }
.tb-people { list-style: none; margin: 4px 0 0; padding: 0; }
.tb-people li { display: flex; flex-direction: column; padding: 10px 0 0; }
.tb-people li + li { border-top: 1px solid var(--line); margin-top: 6px; }
.tb-people strong { font-weight: 600; color: var(--navy); }
.tb-people .role { color: var(--muted); }
.tb-people a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); }
.tb-inline { max-width: 34em; }

/* ---------- Contact ---------- */
.k { display: inline-block; min-width: 80px; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 72px; align-items: start; }
.contact-main { grid-column: 1 / 8; }
.contact-side { grid-column: 9 / 13; }
.contact-steps .label { margin-bottom: 24px; }
.contact-intro .actions .link { color: var(--cream); }
.faq-sheet .faq-list { border-top-width: 2px; }
.form-fold { margin-top: 24px; border-top: 2px solid var(--navy); }
.form-fold summary { list-style: none; display: grid; grid-template-columns: 1fr 20px; gap: 4px 16px; align-items: center; padding: 24px 0; cursor: pointer; }
.form-fold summary::-webkit-details-marker { display: none; }
.form-fold summary .form-heading { font-family: var(--font-head); font-size: var(--fs-item); color: var(--navy); }
.form-fold summary .small { grid-column: 1; }
.form-fold summary svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--navy); transform: rotate(90deg); }
.form-fold[open] summary svg { transform: rotate(-90deg); }
.form-fold .form { padding: 16px 0 8px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.opt { color: var(--muted); font-weight: 400; letter-spacing: 0.06em; }
input, textarea {
  width: 100%; min-width: 0;
  font: inherit; font-size: var(--fs-body);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  padding: 13px 16px;
}
input { height: 52px; }
textarea { min-height: 184px; resize: vertical; }
input:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible { border-color: var(--navy); outline-offset: 0; }
input:user-invalid, textarea:user-invalid { border-color: var(--error); }
.field:has(:user-invalid) label { color: var(--error); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot .small { max-width: 30em; }
.form-foot a { color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Privacy ---------- */
.prose { max-width: 34em; }
.prose h2 { font-size: var(--fs-item); margin: 56px 0 12px; }
.prose a { color: var(--navy); }
.credits { padding: 0; list-style: none; display: grid; gap: 16px; }
.credits li { display: flex; flex-direction: column; gap: 2px; }
.credit-title { font-weight: 600; color: var(--navy); }

/* ---------- Footer: navy, opened by one 4px gold line; the full logo large and calm ---------- */
footer.site { background: var(--navy); color: rgb(248 240 224 / 0.76); padding: 0 0 40px; }
footer.site a { color: var(--cream); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .label { display: flex; align-items: center; gap: 10px; color: var(--gold-n); margin-bottom: 16px; }
.gold-line { display: block; height: 4px; background: var(--gold-n); margin-bottom: 104px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; align-items: start; }
.foot-brand { grid-column: 1 / 5; }
.foot-brand a { display: block; width: fit-content; }
.foot-logo { width: min(100%, 360px); height: auto; }
.foot-main { grid-column: 6 / 13; }
.foot-cta { padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid rgb(248 240 224 / 0.16); }
.foot-cta h2 { color: var(--cream); font-size: var(--fs-cta); line-height: 0.98; letter-spacing: -0.035em; }
.foot-cta p { margin: 32px 0 40px; max-width: 34em; }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
footer.site .foot-mail { font-weight: 600; font-size: var(--fs-body); text-decoration: underline; text-decoration-color: var(--gold-n); text-underline-offset: 8px; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
footer.site .foot-mail:hover { text-decoration-color: currentColor; }
footer.site .btn-gold:hover { text-decoration: none; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; }
footer.site li a, .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
footer.site .k { color: rgb(248 240 224 / 0.56); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
footer.site .pending { color: rgb(248 240 224 / 0.6); }
.foot-contact li { min-height: 44px; display: flex; align-items: center; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 88px; padding-top: 16px; border-top: 1px solid rgb(248 240 224 / 0.16); font-size: var(--fs-label); letter-spacing: 0.04em; }
.foot-bottom span { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Privacy: the policy as a numbered specification ---------- */
.spec { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.spec > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--line); }
.spec-head { grid-column: 1 / 5; }
.spec-no { display: block; margin-bottom: 10px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.spec h2 { font-size: var(--fs-item); line-height: 1.2; }
.spec-body { grid-column: 6 / 12; background: var(--canvas); padding: 0 24px; }
.spec-body > :last-child { margin-bottom: 0; }

/* ---------- Drawings (drawings.mjs) ----------
   Flat two-tone, as the logo: `st` structure, `au` the one gold, `bg` a hole in the
   background colour. */
.dw { display: block; width: 100%; height: auto; overflow: visible; }
.dw .st { fill: var(--navy); }
.dw .au { fill: var(--gold); }
.dw .bg { fill: var(--canvas); }
.row-sketch .dw .bg { fill: var(--canvas); }
/* On a navy surface every drawing flips: cream structure, the logo's gold, navy holes. */
.gold-sheet .st, .navy .dw .st { fill: var(--cream); }
.gold-sheet .au, .navy .dw .au { fill: var(--gold-n); }
.gold-sheet .bg, .navy .dw .bg { fill: var(--navy); }
/* FAQ */
.faq-list { border-top: 1px solid var(--gold); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 20px; gap: 16px; align-items: baseline;
  padding: 22px 0; min-height: 44px;
  font-family: var(--font-head); font-size: var(--fs-item); line-height: 1.25; color: var(--navy);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 18px; height: 18px; transform: rotate(90deg); align-self: center; }
.faq-list details[open] summary svg { transform: rotate(-90deg); }
.faq-list details p { margin: 0 0 24px; max-width: 34em; }
.faq-list a { color: var(--navy); font-weight: 600; }

/* ------------------------------------------------------------------
   Brand shapes: flat two-tone silhouettes, as the logo is drawn. The
   structure is navy on white and cream on navy; the accent is one gold.
   Gold is never text on white.
   ------------------------------------------------------------------ */
.micro { width: 56px; height: 56px; flex: none; overflow: visible; }
.micro.sm { width: 34px; height: 34px; }
.micro .ink { fill: var(--navy); }
.micro .gold { fill: var(--gold); }

/* The logo's window as a list marker: four gold panes. */
.win { width: 10px; height: 10px; flex: none; fill: var(--gold); }
.navy .win, footer.site .win { fill: var(--gold-n); }

@media (max-width: 960px) {
  .value-list { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
}
@media (max-width: 640px) {
  .value-list { grid-template-columns: 1fr; }
  .faq-list summary { padding: 18px 0; gap: 12px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; --section: 120px; }
  .intro-text { grid-column: 1 / 12; }
  .contact-intro .intro-drawing { padding-left: 0; }
  .intro-aside { grid-column: 1 / 12; }
  .contact-main, .contact-side { grid-column: 1 / 13; }
  .contact-side .tblock { max-width: 560px; }
  .tal-list { grid-template-columns: 1fr 1fr; row-gap: 72px; }
  .legend a { padding: 22px 16px 24px; grid-template-columns: 34px 1fr; }
  .legend a > svg { display: none; }
  .foot-brand, .foot-main { grid-column: 1 / 13; }
  .spec-head { grid-column: 1 / 13; margin-bottom: 16px; }
  .spec-body { grid-column: 1 / 12; }
}
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .has-drawing .intro-text { grid-column: 1 / 12; }
  .intro-drawing { grid-column: 1 / 13; grid-row: auto; max-width: 640px; }
  .contact-intro .intro-drawing { max-width: 480px; }
  .steps:not(.vertical) { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .steps:not(.vertical) li:nth-child(2)::before { right: 0; }
  .steps:not(.vertical) li:nth-child(2)::after { content: ""; position: absolute; top: calc(48px + 28px + 1px); right: 0; width: 4px; height: 14px; background: var(--navy); }
  .split { row-gap: 32px; }
  .split > :first-child, .split > :last-child { grid-column: 1 / 13; }
  .rows-projects h3 { grid-column: 5 / 13; }
  .rows-projects li > div { grid-column: 5 / 13; margin-top: 12px; }
  .row-sketch { grid-row: 1 / 3; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { --gutter: 20px; --section: 80px; --head-h: 68px; }
  .lead, .project > p, .rows p, .prose p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  /* 12 columns with 32px gaps need 352px; on phones everything is one column, so drop the gaps. */
  .intro-grid, .split, .contact-grid, .foot-grid, .rows li, .spec > li { column-gap: 0; }
  .brand-logo { width: 76px; }
  .head .brand-name { display: none; }
  .head-cta { height: 44px; padding: 0 16px; }
  .intro { padding: 52px 0 72px; }
  .home-intro { padding: 44px 0 0; }
  .home-intro .intro-grid { row-gap: 48px; }
  .legend { padding-bottom: 64px; }
  .plate { padding-bottom: 72px; }
  .intro + .section.flush-top { padding-top: 64px; }
  .intro-grid { row-gap: 40px; }
  .intro-text, .has-drawing .intro-text, .intro-drawing, .intro-aside { grid-column: 1 / -1; }
  .intro-label { margin-bottom: 24px; }
  .hero figcaption .credit { margin-left: 0; flex-basis: 100%; }
  .legend ol { grid-template-columns: 1fr; }
  .legend li + li { border-left: 0; border-top: 1px solid rgb(244 246 249 / 0.18); }
  .legend a, .legend li:first-child a { padding: 20px 0; grid-template-columns: 34px 1fr 18px; }
  .legend a > svg { display: block; }
  .grid-3, .form { grid-template-columns: 1fr; }
  .grid-3 { gap: 64px; }
  .tal-list { gap: 56px 20px; margin-top: 72px; }
  .tal-item dd { font-size: 64px; }
  .tal-item dt .label { letter-spacing: 0.1em; }
  .steps:not(.vertical) { grid-template-columns: 1fr; row-gap: 0; }
  .steps:not(.vertical) li { padding: 0 0 36px 40px; }
  .steps:not(.vertical) li:last-child { padding-bottom: 0; }
  .steps:not(.vertical) .micro { width: 40px; height: 40px; margin-bottom: 12px; }
  .steps:not(.vertical) .node { position: absolute; left: 0; top: 12px; width: 16px; height: 16px; margin: 0; }
  .steps:not(.vertical) li::before, .steps:not(.vertical) li:nth-child(2)::before { top: 28px; bottom: -12px; left: 7px; right: auto; width: 2px; height: auto; }
  .steps:not(.vertical) li:last-child::before, .steps:not(.vertical) li::after { display: none; }
  .steps p { font-size: 22px; }
  .rows li { grid-template-columns: 1fr; row-gap: 12px; padding: 32px 0; }
  .rows .micro, .rows h3, .rows li > p, .rows li > div, .rows-projects h3, .rows-projects li > div, .row-sketch { grid-column: 1 / -1; grid-row: auto; }
  .rows-projects li > div { margin-top: 0; }
  .row-sketch { margin-bottom: 12px; }
  .service-rows .dab { grid-column: 1 / -1; }
  .service-sheet { grid-template-columns: 1fr; }
  .service-sheet li, .service-sheet li:nth-child(even) { padding: 28px 0 32px; border-right: 0; }
  .contact-main .plates.compact { gap: 24px 16px; }
  .spec-body { padding: 0; }
  .growth-figure { justify-self: start; }
  .section-head { margin-bottom: 40px; }
  .actions .btn { width: 100%; }
  .mail-block { padding-bottom: 56px; }
  .mail-block .btn { width: 100%; }
  /* Full plates on a phone: the portrait on the left, the name, role and e-mail beside it. */
  .plates { grid-template-columns: 1fr; gap: 32px; }
  .plates li { display: grid; grid-template-columns: 136px 1fr; grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
  .plates li > * { grid-column: 2; }
  .plates .plate-frame { grid-column: 1; grid-row: 1 / 4; margin: 0; padding: 8px; }
  .plates h3 { font-size: 20px; margin-top: 10px; }
  .plates a { font-size: 14px; }
  .plates.compact { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .plates.compact li { display: block; }
  .plates.compact .plate-frame { margin-bottom: 14px; padding: 6px; }
  .tblock dl { grid-template-columns: 1fr; }
  .tb-head, .tblock dl > div { padding-left: 16px; padding-right: 16px; }
  .spec > li { padding: 32px 0; }
  /* The skyline keeps a readable scale on phones and shows its left half. */
  .intro-skyline { overflow: hidden; }
  .intro-skyline .skyline { width: 175%; max-width: none; }
  .intro-skyline figcaption { text-align: left; }
  .spec-body { grid-column: 1 / -1; }
  .gold-line { margin-bottom: 64px; }
  .foot-grid { row-gap: 40px; }
  .foot-cta { padding-bottom: 48px; margin-bottom: 48px; }
  .foot-logo { width: min(100%, 240px); }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { margin-top: 56px; }
}

/* ------------------------------------------------------------------
   Motion. Five motions only. All ease out and take 150-300 ms, except
   the count-up (800 ms). Only transform, translate and opacity move,
   so nothing changes the layout. All of it is off for reduced motion.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* 2. Buttons press in (scale 0.97). */
  .btn { transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out), outline-color 180ms var(--ease-out), outline-offset 180ms var(--ease-out); }
  .btn:not([disabled]):active { transform: scale(0.97); }

  /* 1. Project images lift 4px on hover. The text below stays still. */
  @media (hover: hover) {
    .project-media { transition: transform 200ms var(--ease-out); }
    .project:hover .project-media { transform: translateY(-4px); }
  }
}

/* 3. Cards fade and rise when they enter (motion.js adds .in, 40 ms apart).
   .motion exists only when motion.js runs, so nothing is hidden without it. */
@keyframes enter { from { opacity: 0; translate: 0 12px; } }
.motion [data-enter]:not(.in) { opacity: 0; }
.motion [data-enter].in { animation: enter 200ms var(--ease-out); }

/* 4. Numbers count up once ("Teamets tal" only). The final number keeps its space. */
.count { display: inline-grid; font-variant-numeric: tabular-nums lining-nums; }
.count > * { grid-area: 1 / 1; }
.count-live { justify-self: end; }
.count.counting .count-final { opacity: 0; }

/* 5. The focus ring eases in from transparent. Not in forced-colours mode. */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  a, summary, input, textarea, .btn { outline: 2px solid transparent; outline-offset: 8px; transition: outline-color 180ms var(--ease-out), outline-offset 180ms var(--ease-out); }
  .btn { transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out), outline-color 180ms var(--ease-out), outline-offset 180ms var(--ease-out); }
  input, textarea { outline-offset: 5px; }
  a:focus-visible, summary:focus-visible, .btn:focus-visible { outline-color: var(--navy); outline-offset: 3px; }
  .navy a:focus-visible, .navy summary:focus-visible, .navy .btn:focus-visible, footer.site a:focus-visible, footer.site .btn:focus-visible, header.site a:focus-visible, header.site summary:focus-visible { outline-color: var(--gold-n); }
  input:focus-visible, textarea:focus-visible { outline-color: var(--navy); outline-offset: 0; }
}

/* 6. The first drawing on a page arrives once: the structure, then the gold, then the keys. CSS only. */
@media (prefers-reduced-motion: no-preference) {
  .draw .st, .draw .bg { animation: paint 400ms var(--ease-out) backwards; }
  .draw .au { animation: paint 400ms var(--ease-out) 350ms backwards; }
}
@keyframes paint { from { opacity: 0; } }

/* Home photo hero on narrow screens: the text spans the photo, so the photo darkens evenly. */
@media (max-width: 960px) {
  .home-intro.has-photo { padding-top: 72px; }
  .home-intro.has-photo .intro-text { grid-column: 1 / -1; padding-bottom: 24px; }
  .intro-photo::after { background: linear-gradient(180deg, rgb(9 35 59 / 0.55) 0, rgb(9 35 59 / 0.8) 45%, var(--navy) 80%); }
  .home-intro.has-photo .legend li + li { border-top: 0; }
}

/* ---------- Team, painted (2026-10-22) ----------
   Each portrait hangs on a patch of gold paint, offset and turned a little, like a test patch on a wall.
   The patch alternates sides. Name, role and a short roller stroke follow. */
.team-lead { margin: -36px 0 72px; color: rgb(248 240 224 / 0.84); }
.plates { gap: 104px 64px; }
.plate-frame { position: relative; isolation: isolate; padding: 0; border: 0; margin-bottom: 52px; }
.plate-frame::before {
  content: ""; position: absolute; z-index: -1; inset: 34px -30px -30px 34px; background: var(--gold-n); transform: rotate(-1.6deg);
  -webkit-mask: var(--patch) center / 100% 100% no-repeat; mask: var(--patch) center / 100% 100% no-repeat;
}
.plates li:nth-child(even) .plate-frame::before { inset: 34px 34px -30px -30px; transform: rotate(1.6deg); }
.plate-frame img { border-radius: 3px; box-shadow: 0 18px 40px rgb(6 26 44 / 0.45); }
.plate-empty { position: relative; gap: 10px; align-content: center; border: 0; border-radius: 3px; background: var(--navy-deep); }
.plate-empty .initials { font-family: var(--font-head); font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--cream); }
.plates:not(.compact) h3 { font-size: 26px; }
.plates .role { margin-bottom: 0; }
.plate-stroke { width: 76px; height: 9px; margin: 16px 0 8px; }
/* Smaller patches where the plates are small (home, Kontakt), on white. */
.plates.compact .plate-frame { padding: 0; margin-bottom: 30px; }
.plates.compact .plate-frame::before { inset: 16px -14px -14px 16px; background: var(--gold); }
.plates.compact li:nth-child(even) .plate-frame::before { inset: 16px 16px -14px -14px; }
.plates.compact .plate-frame img { box-shadow: 0 10px 24px rgb(6 26 44 / 0.18); }
.plates.compact .plate-empty { background: var(--warm); }
.plates.compact .plate-empty .initials { font-size: 44px; color: var(--navy); }
@media (max-width: 640px) {
  .plates { gap: 72px 28px; }
  .plate-frame::before { inset: 20px -14px -14px 20px; }
  .plates li:nth-child(even) .plate-frame::before { inset: 20px 20px -14px -14px; }
  .plate-frame { margin-bottom: 34px; }
  .plates.compact { gap: 40px 28px; }
  .plates.compact .plate-frame::before { inset: 12px -8px -8px 12px; }
  .plates.compact li:nth-child(even) .plate-frame::before { inset: 12px 12px -8px -8px; }
  .plates.compact a { font-size: 13.5px; overflow-wrap: normal; }
}