/* Demo sites. Each demo has its own block, scoped to body.x-<id>: palette, type and layout differ on purpose.
   Fonts: Geist and Geist Mono are self-hosted; display faces use system stacks with sensible fallbacks. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.5 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -0.02em; font-weight: 650; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.d-ribbon { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; justify-content: center; padding: .45rem 1rem;
  background: #0b1418; color: #e6f2f4; font: 500 13px/1.3 "Geist", system-ui, sans-serif; text-align: center; }
.d-ribbon span { padding: .05rem .45rem; border-radius: 4px; background: #00c8d4; color: #021417; font-weight: 600; }
.d-ribbon a { color: #5fe3ea; }
.mk { display: block; width: 100%; height: auto; }
.mo { font-family: "Geist Mono", ui-monospace, monospace; font-size: .78rem; letter-spacing: .02em; }
/* shared skeleton pieces; each demo restyles them */
.nv { display: flex; align-items: center; gap: 2rem; padding: 1.1rem 5vw; }
.nv nav { display: flex; gap: 1.6rem; margin-left: auto; font-size: .95rem; }
.nv__b { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1.15rem; border-radius: 8px; font-weight: 600; font-size: .95rem; white-space: nowrap; border: 1.5px solid transparent; }
.bt--sm { min-height: 36px; padding: .35rem .8rem; font-size: .85rem; }
.bt--block { width: 100%; }
.chs { display: flex; flex-wrap: wrap; gap: .45rem; }
.ch, .tab, .dy { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid currentColor; font-size: .88rem; font-weight: 500; opacity: .85; }
.ch.is-on, .tab.is-on, .dy.is-on { opacity: 1; }
.ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem; padding: 2.5rem 5vw; font-size: .9rem; }
.ft b { display: block; font-size: 1.05rem; margin-bottom: .4rem; } .ft p { opacity: .75; }
.ft .ft__c { align-self: flex-end; font-size: .8rem; opacity: .6; }
.map { border-radius: 14px; overflow: hidden; }
.map svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .nv { gap: 1rem; } .nv nav { display: none; } .nv > .bt { margin-left: auto; } }

/* ========================================================= Lille Bord ===
   Restaurant. Deep forest green and bone, an amber pop. A serif here is the point: it reads like a printed menu. */
.x-restaurant { --g: #13261f; --g2: #1b3329; --bone: #eef0e8; --am: #f0a43a; --sf: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  background: var(--bone); color: var(--g); }
.x-restaurant .nv { background: var(--g); color: var(--bone); }
.x-restaurant .nv__b { font-family: var(--sf); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; } .x-restaurant .nv__b i { color: var(--am); }
.x-restaurant .nv nav { opacity: .8; }
.x-restaurant .bt { background: var(--am); color: var(--g); }
.x-restaurant .bt--ghost { background: transparent; color: var(--am); border-color: var(--am); }
.x-restaurant .hr { display: grid; grid-template-columns: 1.25fr .75fr; gap: 5vw; align-items: center; padding: 6vw 5vw 7vw; background: var(--g); color: var(--bone); }
.x-restaurant .hr__k { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.x-restaurant h1 { margin: 1rem 0 1.2rem; font-family: var(--sf); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em; }
.x-restaurant h1 em { color: var(--am); }
.x-restaurant .hr__copy > p:not(.hr__k) { max-width: 44ch; opacity: .8; font-size: 1.1rem; }
.x-restaurant .bk { display: inline-flex; flex-wrap: wrap; align-items: stretch; margin-top: 2rem; border-radius: 12px; background: var(--g2); border: 1px solid #ffffff1f; }
.x-restaurant .bk > span { display: grid; padding: .7rem 1.2rem; border-right: 1px solid #ffffff1f; font-weight: 600; min-width: 7rem; }
.x-restaurant .bk small { font-size: .72rem; font-weight: 400; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
.x-restaurant .bk .bt { margin: .4rem; }
.x-restaurant .hr__card { padding: 2rem 1.8rem; background: var(--bone); color: var(--g); border-radius: 4px; transform: rotate(2deg); box-shadow: 0 30px 60px -30px #000c; font-family: var(--sf); }
.x-restaurant .hr__ck { text-align: center; font-size: 1.6rem; font-style: italic; margin-bottom: 1.2rem; }
.x-restaurant .hr__card li, .x-restaurant .mn li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; }
.x-restaurant .hr__card i, .x-restaurant .mn i { flex: 1; border-bottom: 1.5px dotted #13261f55; transform: translateY(-4px); }
.x-restaurant em { font-style: normal; }
.x-restaurant .hr__card em, .x-restaurant .mn em { font-family: "Geist", sans-serif; font-weight: 600; font-size: .9rem; }
.x-restaurant .hr__cf { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #13261f33; text-align: center; font-style: italic; }
.x-restaurant .st { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #13261f22; }
.x-restaurant .st p { padding: 1.4rem 5vw; border-right: 1px solid #13261f22; font-size: .95rem; } .x-restaurant .st p:last-child { border-right: 0; }
.x-restaurant .mn { padding: 6vw 5vw; }
.x-restaurant h2 { font-family: var(--sf); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: 0; margin-bottom: 1.2rem; }
.x-restaurant .ch.is-on { background: var(--g); color: var(--bone); border-color: var(--g); }
.x-restaurant .mn__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin-top: 2.5rem; }
.x-restaurant .mn h3 { font-family: var(--sf); font-style: italic; font-weight: 400; font-size: 1.5rem; margin-bottom: .6rem; }
.x-restaurant .mn li span { display: grid; } .x-restaurant .mn li b { font-family: var(--sf); font-size: 1.15rem; font-weight: 600; } .x-restaurant .mn li small { opacity: .65; font-size: .9rem; }
.x-restaurant .bkx { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; padding: 6vw 5vw; background: var(--g); color: var(--bone); }
.x-restaurant .bkx p { opacity: .75; max-width: 34ch; }
.x-restaurant .bkx__p { display: grid; gap: 1.2rem; justify-items: start; }
.x-restaurant .dy.is-on { background: var(--am); color: var(--g); border-color: var(--am); }
.x-restaurant .sls { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; width: 100%; }
.x-restaurant .sl { display: grid; place-items: center; min-height: 52px; border-radius: 8px; border: 1px solid #ffffff2e; font-weight: 600; }
.x-restaurant .sl small { font-size: .7rem; font-weight: 400; opacity: .7; } .x-restaurant .sl.is-full { opacity: .4; text-decoration: line-through; }
.x-restaurant .sl.is-on { background: var(--bone); color: var(--g); }
.x-restaurant .fo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; align-items: center; padding: 6vw 5vw; }
.x-restaurant .fo p { margin-top: .3rem; } .x-restaurant .map { background: #dfe3d6; color: var(--g); } .x-restaurant .map circle { fill: var(--am); }
.x-restaurant .ft { background: var(--g); color: var(--bone); }
@media (max-width: 720px) {
  .x-restaurant .hr, .x-restaurant .bkx, .x-restaurant .fo, .x-restaurant .mn__cols { grid-template-columns: 1fr; }
  .x-restaurant .hr__card { transform: rotate(1deg); }
  .x-restaurant .bk > span { min-width: 0; flex: 1; padding: .6rem .8rem; }
  .x-restaurant .st { grid-template-columns: 1fr; } .x-restaurant .st p { border-right: 0; border-bottom: 1px solid #13261f22; }
  .x-restaurant .sls { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================= Holm & Søn ===
   Construction. Black, safety yellow and concrete. Condensed caps, a blueprint grid, numbered services. */
.x-construction { --k: #121212; --y: #ffc20e; --c: #e7e7e2; --cd: "Bahnschrift Condensed", "Bahnschrift", "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  background: var(--c); color: var(--k); }
.x-construction .tb { display: flex; justify-content: flex-end; gap: 2rem; padding: .45rem 5vw; background: var(--y); font-size: .82rem; font-weight: 600; }
.x-construction .nv { background: var(--k); color: #fff; }
.x-construction .nv__b { display: flex; align-items: center; gap: .6rem; font-family: var(--cd); text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; }
.x-construction .lg { display: grid; place-items: center; width: 40px; height: 40px; background: var(--y); color: var(--k); font-size: 1rem; }
.x-construction .nv nav { text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; opacity: .85; }
.x-construction .bt { border-radius: 0; background: var(--y); color: var(--k); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }
.x-construction .bt--line { background: transparent; color: #fff; border-color: #fff; }
.x-construction .hr { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: center; padding: 6vw 5vw; background: var(--k); color: #fff;
  background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 40px 40px; }
.x-construction h1 { font-family: var(--cd); text-transform: uppercase; font-size: clamp(3.2rem, 8vw, 7.5rem); line-height: .88; letter-spacing: -0.01em; font-weight: 700; }
.x-construction h1 em { font-style: normal; color: var(--y); }
.x-construction .hr p { margin: 1.5rem 0 2rem; max-width: 42ch; opacity: .8; font-size: 1.1rem; }
.x-construction .hr__b { display: flex; flex-wrap: wrap; gap: .8rem; }
.x-construction .iso { width: 100%; height: auto; }
.x-construction h2 { font-family: var(--cd); text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: 0; }
.x-construction .svs { padding: 6vw 5vw; }
.x-construction .svs__g { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; border-top: 3px solid var(--k); }
.x-construction .sv { padding: 1.5rem 1.4rem 1.5rem 0; border-right: 1px solid #12121233; }
.x-construction .sv + .sv { padding-left: 1.4rem; } .x-construction .sv:last-child { border-right: 0; }
.x-construction .sv > span { font-family: var(--cd); font-size: 3rem; font-weight: 700; color: #12121233; }
.x-construction .sv h3 { font-family: var(--cd); text-transform: uppercase; font-size: 1.5rem; margin: .3rem 0 .8rem; }
.x-construction .sv li { padding: .3rem 0; border-bottom: 1px solid #1212121a; font-size: .92rem; }
.x-construction .pjs { padding: 0 5vw 6vw; }
.x-construction .pjs__h { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1.5rem; } .x-construction .pjs__h a { font-weight: 600; text-decoration: underline; }
.x-construction .pjs__g { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.x-construction .pj { display: grid; background: #fff; }
.x-construction .pj--0 { grid-row: span 2; background: var(--k); color: #fff; }
.x-construction .pj svg { width: 100%; height: auto; padding: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; background: repeating-linear-gradient(-45deg, transparent 0 10px, #12121208 10px 11px); }
.x-construction .pj--0 svg { stroke: var(--y); background: repeating-linear-gradient(-45deg, transparent 0 10px, #ffffff0d 10px 11px); }
.x-construction .pj p { display: grid; padding: 1rem 1.2rem; align-self: end; } .x-construction .pj span { font-size: .85rem; opacity: .65; }
.x-construction .tl { padding: 6vw 5vw; background: var(--y); }
.x-construction .tl ol { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; counter-reset: s; }
.x-construction .tl li { position: relative; padding-top: 3.4rem; font-family: var(--cd); text-transform: uppercase; font-size: 1.4rem; font-weight: 700; }
.x-construction .tl li::before { content: ""; position: absolute; left: 0; right: 0; top: 1.2rem; height: 3px; background: var(--k); }
.x-construction .tl li span { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--k); color: var(--y); font-size: 1.1rem; }
.x-construction .rq { padding: 6vw 5vw; }
.x-construction .rq .chs { margin: 1.5rem 0; } .x-construction .ch { border-radius: 0; } .x-construction .ch.is-on { background: var(--k); color: var(--y); border-color: var(--k); }
.x-construction .rq__f { display: grid; grid-template-columns: 2fr 1fr auto; gap: .6rem; }
.x-construction .rq__f > span { padding: .9rem 1rem; background: #fff; border: 1px solid #12121233; color: #12121288; }
.x-construction .ft { background: var(--k); color: #fff; }
@media (max-width: 720px) {
  .x-construction .tb { justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
  .x-construction .hr, .x-construction .rq__f { grid-template-columns: 1fr; }
  .x-construction .svs__g, .x-construction .tl ol { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .x-construction .sv { padding: 1rem 1rem 1rem 0 !important; border-right: 0; }
  .x-construction .pjs__g { grid-template-columns: 1fr 1fr; } .x-construction .pj--0 { grid-row: auto; grid-column: 1 / -1; }
}

/* ============================================================ Klar VVS ===
   Service. Cobalt and white, an orange emergency bar, and a booking card as the hero's main act. */
.x-service { --b: #1e4fd8; --b2: #eaf1ff; --o: #ff6a13; --ink: #0d1b3e; background: #fff; color: var(--ink); font-family: "Avenir Next", "Segoe UI", "Geist", system-ui, sans-serif; }
.x-service .ak { padding: .55rem 5vw; background: var(--o); color: #fff; font-size: .92rem; text-align: center; }
.x-service .nv { border-bottom: 1px solid #0d1b3e14; }
.x-service .nv__b { display: flex; align-items: center; gap: .5rem; } .x-service .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 4px var(--b2); }
.x-service .bt { border-radius: 999px; background: var(--b); color: #fff; }
.x-service .hr { display: grid; grid-template-columns: 1fr .9fr; gap: 5vw; align-items: center; padding: 5vw; background: linear-gradient(160deg, var(--b2), #fff 70%); }
.x-service h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.035em; font-weight: 700; }
.x-service .ok { display: grid; gap: .7rem; margin-top: 2rem; font-size: 1.1rem; font-weight: 500; }
.x-service .ok li { display: flex; gap: .7rem; align-items: center; }
.x-service .ok li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; flex: none; }
.x-service .bc { padding: 1.6rem; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -24px #1e4fd855, 0 0 0 1px #0d1b3e10; }
.x-service .bc__h { font-weight: 700; font-size: 1.3rem; }
.x-service .bc__l { margin: 1.1rem 0 .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #0d1b3e99; }
.x-service .ch { border-color: #0d1b3e22; color: var(--ink); opacity: 1; }
.x-service .ch.is-on { background: var(--b); border-color: var(--b); color: #fff; }
.x-service .bc .bt { margin-top: 1.4rem; min-height: 52px; }
.x-service .bc__n { margin-top: .7rem; font-size: .85rem; color: #0d1b3e99; text-align: center; }
.x-service h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.x-service .pcs { padding: 5vw; }
.x-service .pcs__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.x-service .pc { padding: 1.5rem; border-radius: 16px; background: var(--b2); }
.x-service .pc h3 { font-size: 1.15rem; } .x-service .pc p { margin: .4rem 0 1.2rem; color: #0d1b3eaa; font-size: .92rem; } .x-service .pc b { color: var(--b); }
.x-service .ar { padding: 0 5vw 5vw; } .x-service .ch--soft { background: #f3f5f9; border-color: transparent; }
.x-service .fq { padding: 5vw; background: #f7f9fc; }
.x-service details { max-width: 760px; border-bottom: 1px solid #0d1b3e1a; padding: 1rem 0; }
.x-service summary { font-weight: 600; cursor: pointer; } .x-service details p { margin-top: .5rem; color: #0d1b3eaa; }
.x-service .ft { background: var(--ink); color: #fff; }
@media (max-width: 720px) { .x-service .hr, .x-service .pcs__g { grid-template-columns: 1fr; } }

/* ============================================================ Nordvik ===
   Advisory. Swiss: white, ink navy, one emerald accent, mono labels, hairlines, big left-aligned type. */
.x-corporate { --ink: #0e1525; --em: #0f7b5f; background: #fff; color: var(--ink); }
.x-corporate .nv { border-bottom: 1px solid #0e152514; }
.x-corporate .nv__b span { color: var(--em); }
.x-corporate .nv nav { font-size: .9rem; color: #0e1525aa; }
.x-corporate .bt { border-radius: 0; background: var(--ink); color: #fff; }
.x-corporate .bt--inv { background: #fff; color: var(--ink); }
.x-corporate .hr { padding: 6vw 5vw 5vw; }
.x-corporate .hr > .mo { color: var(--em); }
.x-corporate h1 { margin-top: 1.2rem; max-width: 16ch; font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -0.045em; font-weight: 600; }
.x-corporate .hr__g { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3vw; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); align-items: start; }
.x-corporate .hr__g > p { color: #0e1525bb; max-width: 36ch; }
.x-corporate .ln { font-weight: 600; color: var(--em); }
.x-corporate .pp { display: flex; gap: .8rem; align-items: center; }
.x-corporate .pp > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #e7f2ee; color: var(--em); font-weight: 600; }
.x-corporate .pp p { display: grid; font-size: .9rem; color: #0e1525aa; } .x-corporate .pp b { color: var(--ink); }
.x-corporate .rw { padding: 2vw 5vw 6vw; }
.x-corporate .rw > h2 { color: var(--em); font-weight: 400; margin-bottom: 1rem; }
.x-corporate .rw li { display: grid; grid-template-columns: 4rem 1fr 1.3fr 2rem; gap: 2rem; align-items: baseline; padding: 1.6rem 0; border-top: 1px solid #0e152522; }
.x-corporate .rw li:last-child { border-bottom: 1px solid #0e152522; }
.x-corporate .rw h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
.x-corporate .rw p { color: #0e1525aa; } .x-corporate .rw .ar { color: var(--em); font-size: 1.3rem; }
.x-corporate h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; }
.x-corporate .hw { padding: 6vw 5vw; background: #f4f6f8; }
.x-corporate .hw__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-top: 2.5rem; }
.x-corporate .hw__g .mo { color: var(--em); } .x-corporate .hw h3 { margin: .6rem 0 .5rem; font-size: 1.3rem; font-weight: 550; } .x-corporate .hw p { color: #0e1525aa; }
.x-corporate .ins { padding: 6vw 5vw; }
.x-corporate .ins__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.x-corporate .ins article { padding-top: 1rem; border-top: 3px solid var(--ink); }
.x-corporate .ins .mo { color: #0e152599; } .x-corporate .ins h3 { margin-top: .6rem; font-size: 1.25rem; font-weight: 550; letter-spacing: -0.02em; }
.x-corporate .cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 5vw; background: var(--ink); color: #fff; }
.x-corporate .ft { background: var(--ink); color: #fff; border-top: 1px solid #ffffff1a; }
@media (max-width: 720px) {
  .x-corporate .hr__g, .x-corporate .hw__g, .x-corporate .ins__g { grid-template-columns: 1fr; }
  .x-corporate .rw li { grid-template-columns: 2.5rem 1fr; gap: .4rem 1rem; } .x-corporate .rw p { grid-column: 2; } .x-corporate .rw .ar { display: none; }
  .x-corporate .cta { flex-direction: column; align-items: flex-start; }
}

/* ========================================================== Havn Bolig ===
   Estate agent. Charcoal and stone with a deep teal; Didone headings and thin architectural line drawings. */
.x-real-estate { --ch: #1c1f22; --st: #ecedea; --te: #1f5c5a; --dd: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
  --bg: #ecedea; background: var(--st); color: var(--ch); }
.x-real-estate .nv { position: absolute; left: 0; right: 0; z-index: 2; color: #fff; }
.x-real-estate .nv__b { font-family: var(--dd); font-weight: 400; letter-spacing: .14em; font-size: 1.3rem; } .x-real-estate .nv__b span { letter-spacing: .02em; font-style: italic; opacity: .8; }
.x-real-estate .nv nav { opacity: .85; }
.x-real-estate .bt { border-radius: 2px; background: var(--te); color: #fff; }
.x-real-estate .nv .bt { background: transparent; border-color: #ffffff88; }
.x-real-estate .hr { position: relative; display: grid; align-items: end; min-height: 640px; padding: 8rem 5vw 5vw; background: var(--ch); color: #fff; overflow: hidden; }
.x-real-estate .hr__line { position: absolute; right: -2vw; bottom: 0; width: 64%; height: auto; color: #ffffff3a; }
.x-real-estate .hr__c { position: relative; max-width: 760px; }
.x-real-estate h1 { font-family: var(--dd); font-weight: 400; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .95; letter-spacing: -0.01em; }
.x-real-estate .hr__c > p { margin: 1.2rem 0 2rem; max-width: 46ch; opacity: .75; font-size: 1.1rem; }
.x-real-estate .sr { display: flex; flex-wrap: wrap; background: #fff; color: var(--ch); border-radius: 4px; padding: .4rem; }
.x-real-estate .sr > span { display: grid; flex: 1; min-width: 8rem; padding: .5rem 1rem; border-right: 1px solid #1c1f2218; font-weight: 600; }
.x-real-estate .sr small { font-size: .72rem; font-weight: 400; color: #1c1f2288; text-transform: uppercase; letter-spacing: .08em; }
.x-real-estate .hms { padding: 6vw 5vw; }
.x-real-estate .hms__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.x-real-estate h2 { font-family: var(--dd); font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: 0; }
.x-real-estate .ch { border-color: #1c1f2233; } .x-real-estate .ch.is-on { background: var(--ch); color: #fff; }
.x-real-estate .hms__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.x-real-estate .hm__i { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: end center; padding-top: 1.2rem; background: #dfe2de; overflow: hidden; }
.x-real-estate .hm--a .hm__i { background: #d7dfe0; } .x-real-estate .hm--r .hm__i { background: #e3e0da; } .x-real-estate .hm--t .hm__i { background: #d9ddd6; }
.x-real-estate .hm__i svg { width: 78%; height: auto; fill: var(--ch); }
.x-real-estate .hm__i span { position: absolute; left: .8rem; top: .8rem; padding: .2rem .6rem; background: var(--te); color: #fff; font-size: .75rem; font-weight: 600; }
.x-real-estate .hm__p { margin-top: 1rem; font-family: var(--dd); font-size: 1.5rem; }
.x-real-estate .hm h3 { margin-top: .2rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.x-real-estate .hm__a, .x-real-estate .hm__m { font-size: .9rem; color: #1c1f2299; }
.x-real-estate .sell { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; padding: 6vw 5vw; background: #fff; }
.x-real-estate .sell p { margin: 1rem 0 1.5rem; max-width: 42ch; color: #1c1f22aa; }
.x-real-estate .sell li { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid #1c1f221f; font-size: 1.1rem; }
.x-real-estate .sell li b { font-family: var(--dd); font-weight: 400; font-size: 2rem; color: var(--te); width: 2rem; }
.x-real-estate .ft { background: var(--ch); color: #fff; }
@media (max-width: 900px) { .x-real-estate .hms__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .x-real-estate .hr { min-height: 0; padding-top: 6rem; } .x-real-estate .hr__line { width: 120%; opacity: .6; }
  .x-real-estate .sr > span { min-width: 45%; border-right: 0; border-bottom: 1px solid #1c1f2218; } .x-real-estate .sr .bt { width: 100%; margin-top: .4rem; }
  .x-real-estate .sell { grid-template-columns: 1fr; }
}

/* ======================================================== Atelier Nord ===
   Fashion. Monochrome with one signal red. Big tight grotesk, a split editorial hero, tall product tiles. */
.x-fashion { --k: #0a0a0a; --r: #ff3b1f; background: #fff; color: var(--k); }
.x-fashion .mq { display: flex; justify-content: center; gap: 3rem; padding: .5rem 1rem; background: var(--k); color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.x-fashion .nv { display: grid; grid-template-columns: 1fr auto 1fr; padding: 1.2rem 3vw; border-bottom: 1px solid #0a0a0a1a; }
.x-fashion .nv nav { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; } .x-fashion .nv__r { justify-content: flex-end; }
.x-fashion .nv__b { font-size: 1.6rem; font-weight: 800; letter-spacing: .18em; }
.x-fashion .bt { border-radius: 0; background: var(--k); color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.x-fashion .hr { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 560px; }
.x-fashion .hr__a { display: flex; flex-direction: column; justify-content: space-between; padding: 3vw; background: var(--r); color: var(--k); }
.x-fashion .hr__a b { font-size: clamp(6rem, 17vw, 15rem); line-height: .8; letter-spacing: -0.07em; font-weight: 800; }
.x-fashion .hr__a span { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.x-fashion .hr__a em { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.x-fashion .hr__b { position: relative; display: grid; place-items: center; background: #ece9e4; }
.x-fashion .hr__b .mk { width: 58%; } .x-fashion .hr__b span { position: absolute; left: 1.5rem; bottom: 1.2rem; font-size: .85rem; font-weight: 600; }
.x-fashion .cats { padding: 1.5rem 3vw; border-bottom: 1px solid #0a0a0a1a; }
.x-fashion .ch { border-radius: 0; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; } .x-fashion .ch.is-on { background: var(--k); color: #fff; }
.x-fashion .pg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #0a0a0a1a; }
.x-fashion .pd { padding-bottom: 1.4rem; background: #fff; }
.x-fashion .pd__i { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; } .x-fashion .pd__i .mk { width: 54%; }
.x-fashion .pd__i span { position: absolute; left: .8rem; top: .8rem; padding: .15rem .5rem; background: var(--r); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.x-fashion .pd h3 { margin: 1rem 1rem 0; font-size: .95rem; font-weight: 600; letter-spacing: 0; } .x-fashion .pd p { margin: .2rem 1rem 0; font-size: .9rem; }
.x-fashion .sw { display: flex; gap: .35rem; margin: .7rem 1rem 0; } .x-fashion .sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0002; }
.x-fashion .ed { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: end; padding: 8vw 3vw; }
.x-fashion .ed h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .9; letter-spacing: -0.06em; font-weight: 800; }
.x-fashion .ed p { max-width: 38ch; font-size: 1.1rem; }
.x-fashion .nl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 3vw; background: var(--k); color: #fff; }
.x-fashion .nl p { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.x-fashion .nl div { display: flex; } .x-fashion .nl span { padding: .7rem 1rem; min-width: 18rem; border: 1px solid #fff6; color: #fff9; } .x-fashion .nl .bt { background: #fff; color: var(--k); }
.x-fashion .ft { border-top: 1px solid #0a0a0a1a; }
@media (max-width: 900px) { .x-fashion .pg { grid-template-columns: 1fr 1fr; } .x-fashion .mq span:nth-child(n+2) { display: none; } }
@media (max-width: 720px) {
  .x-fashion .nv { grid-template-columns: 1fr auto; } .x-fashion .nv > nav:first-child { display: none; } .x-fashion .nv__r { display: flex !important; }
  .x-fashion .nv__b { font-size: 1.2rem; }
  .x-fashion .hr, .x-fashion .ed { grid-template-columns: 1fr; } .x-fashion .hr { min-height: 0; } .x-fashion .hr__a { min-height: 360px; } .x-fashion .hr__b { aspect-ratio: 1; }
  .x-fashion .nl span { min-width: 0; flex: 1; }
}

/* =============================================================== Volt ===
   Electronics. Dark, one acid-lime accent, mono specs, a bento hero and a comparison table. */
.x-electronics { --bg: #0a0c10; --s: #12161c; --s2: #1a2029; --l: #c8ff2e; --t: #e8edf3; background: var(--bg); color: var(--t); }
.x-electronics .nv { gap: 1.5rem; border-bottom: 1px solid #ffffff12; }
.x-electronics .nv__b { display: flex; align-items: center; gap: .5rem; letter-spacing: .12em; }
.x-electronics .bolt { width: 18px; height: 18px; background: var(--l); clip-path: polygon(55% 0, 10% 58%, 45% 58%, 35% 100%, 90% 40%, 55% 40%); }
.x-electronics .se { flex: 1; max-width: 560px; padding: .65rem 1rem; border-radius: 10px; background: var(--s); color: #e8edf377; font-size: .9rem; }
.x-electronics .nv nav { margin-left: auto; font-size: .9rem; color: #e8edf3bb; }
.x-electronics .bt { border-radius: 10px; background: var(--l); color: #0a0c10; }
.x-electronics .bn { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, auto); gap: 1rem; padding: 2rem 5vw; }
.x-electronics .bn article { padding: 1.4rem; border-radius: 20px; background: var(--s); }
.x-electronics .bn__a { position: relative; grid-row: span 3; min-height: 440px; padding: 2.4rem !important; overflow: hidden; background: radial-gradient(80% 70% at 85% 70%, #c8ff2e22, transparent 70%), var(--s) !important; }
.x-electronics .bn__a .mo { color: var(--l); }
.x-electronics h1 { margin: .6rem 0; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.045em; }
.x-electronics .bn__a > p:not(.mo):not(.bn__p) { max-width: 30ch; color: #e8edf3aa; }
.x-electronics .spec { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0; } .x-electronics .spec span { padding: .25rem .6rem; border-radius: 6px; background: var(--s2); font-family: "Geist Mono", monospace; font-size: .78rem; }
.x-electronics .bn__p { margin-bottom: .8rem; font-size: 1.5rem; font-weight: 650; }
.x-electronics .bn__a .mk { position: absolute; right: 4%; bottom: 6%; width: 38%; }
.x-electronics .bn__b, .x-electronics .bn__c, .x-electronics .bn__d { display: grid; align-content: end; gap: .2rem; } .x-electronics .bn span { color: #e8edf388; font-size: .9rem; }
.x-electronics .bn__b { background: var(--l) !important; color: #0a0c10; } .x-electronics .bn__b span { color: #0a0c10aa; }
.x-electronics .cts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 0 5vw 2rem; }
.x-electronics .ct { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--s); font-weight: 600; } .x-electronics .ct .mk { width: 40px; }
.x-electronics h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.035em; margin-bottom: 1.5rem; }
.x-electronics .pds { padding: 3rem 5vw; }
.x-electronics .pds__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.x-electronics .pd { display: grid; gap: .3rem; padding: 1.4rem; border-radius: 18px; background: var(--s); }
.x-electronics .pd .mk { width: 55%; margin: .5rem auto 1rem; } .x-electronics .pd h3 { font-size: 1rem; } .x-electronics .pd p { color: #e8edf3aa; margin-bottom: .6rem; }
.x-electronics .cmp { padding: 3rem 5vw 5rem; }
.x-electronics table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.x-electronics th, .x-electronics td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid #ffffff12; }
.x-electronics tbody th { font-weight: 500; color: #e8edf3aa; } .x-electronics .hi { background: #c8ff2e14; color: var(--l); font-weight: 600; }
.x-electronics .ft { border-top: 1px solid #ffffff12; }
@media (max-width: 760px) {
  .x-electronics .se, .x-electronics .nv nav { display: none; }
  .x-electronics .bn { grid-template-columns: 1fr; } .x-electronics .bn__a { grid-row: auto; min-height: 420px; }
  .x-electronics .cts, .x-electronics .pds__g { grid-template-columns: 1fr 1fr; }
  .x-electronics table { font-size: .82rem; } .x-electronics th, .x-electronics td { padding: .6rem .4rem; }
}

/* ============================================================ Rum & Ro ===
   Home and living. Sage, cool paper and charcoal, an olive accent and a mustard pop. "Shop the room" with hotspots. */
.x-home-living { --pa: #f3f3ee; --sg: #dde3d5; --ch: #2a2d2b; --ol: #4e5d2f; --mu: #d9a21b; background: var(--pa); color: var(--ch); font-family: "Gill Sans", "Gill Sans MT", "Optima", "Segoe UI", "Geist", sans-serif; }
.x-home-living .nv__b { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; } .x-home-living .nv__b span { color: var(--mu); }
.x-home-living .bt { border-radius: 999px; background: var(--ol); color: #fff; }
.x-home-living .hr { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4vw; align-items: center; padding: 3vw 5vw 6vw; }
.x-home-living h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 500; letter-spacing: -0.03em; }
.x-home-living .hr__c > p { margin: 1rem 0 1.5rem; color: #2a2d2baa; }
.x-home-living .sp { display: grid; margin-bottom: 1.6rem; }
.x-home-living .sp li { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid #2a2d2b1f; }
.x-home-living .sp li span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ch); color: #fff; font-size: .8rem; }
.x-home-living .sp em { font-style: normal; font-weight: 600; }
.x-home-living .room { position: relative; border-radius: 24px; overflow: hidden; } .x-home-living .room svg { display: block; width: 100%; height: auto; }
.x-home-living .hs { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--ch); font-size: .8rem; font-weight: 700; box-shadow: 0 0 0 6px #ffffff66, 0 6px 14px #0003; }
.x-home-living h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.x-home-living .rms { padding: 0 5vw 5vw; }
.x-home-living .rms__g { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 180px 180px; gap: 1rem; }
.x-home-living .rm { display: flex; align-items: flex-end; padding: 1.2rem; border-radius: 18px; font-size: 1.3rem; font-weight: 500; }
.x-home-living .rm:first-child { grid-row: span 2; } .x-home-living .rm:last-child { grid-column: span 2; }
.x-home-living .pg { padding: 0 5vw 5vw; }
.x-home-living .pg__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.x-home-living .pd__i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; background: var(--sg); } .x-home-living .pd__i .mk { width: 46%; }
.x-home-living .pd h3 { margin-top: .8rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; } .x-home-living .pd p { color: #2a2d2baa; }
.x-home-living .mat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.5rem 5vw; background: var(--sg); }
.x-home-living .ch { border-color: #2a2d2b44; }
.x-home-living .ft { background: var(--ch); color: var(--pa); }
@media (max-width: 760px) {
  .x-home-living .hr { grid-template-columns: 1fr; } .x-home-living .room { order: -1; }
  .x-home-living .rms__g { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px 140px; } .x-home-living .rm:first-child { grid-row: auto; grid-column: span 2; } .x-home-living .rm:last-child { grid-column: auto; }
  .x-home-living .pg__g { grid-template-columns: 1fr 1fr; }
}

/* ================================================================ glød ===
   Skincare. White with one hot-pink pop, a geometric sans, a three-step shelf and a routine builder. */
.x-beauty { --k: #1e1a1d; --p: #e8336d; --ps: #fde8ef; background: #fff; color: var(--k); font-family: "Futura", "Century Gothic", "Avenir Next", "Geist", sans-serif; }
.x-beauty .nv__b { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.04em; color: var(--p); }
.x-beauty .nv nav { text-transform: lowercase; }
.x-beauty .bt { border-radius: 999px; background: var(--k); color: #fff; } .x-beauty .bt--line { background: transparent; color: var(--k); border-color: var(--k); } .x-beauty .bt--inv { background: #fff; color: var(--p); }
.x-beauty .hr { padding: 4vw 5vw 0; text-align: center; background: linear-gradient(var(--ps), #fff); }
.x-beauty h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 500; letter-spacing: -0.05em; line-height: .95; }
.x-beauty h1 em { font-style: normal; color: var(--p); }
.x-beauty .hr > p { margin: 1rem auto 0; max-width: 40ch; font-size: 1.15rem; color: #1e1a1daa; }
.x-beauty .shelf { display: flex; justify-content: center; align-items: flex-end; gap: 5vw; margin-top: 3rem; padding: 0 5vw; border-bottom: 10px solid var(--k); }
.x-beauty .st { display: grid; justify-items: center; gap: .3rem; padding-bottom: 1.2rem; }
.x-beauty .st__i { width: clamp(80px, 11vw, 150px); } .x-beauty .st:nth-child(2) .st__i { width: clamp(70px, 9vw, 120px); }
.x-beauty .st b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--p); color: #fff; font-size: .85rem; } .x-beauty .st span { font-weight: 500; }
.x-beauty .rb { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; padding: 6vw 5vw; }
.x-beauty h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 500; letter-spacing: -0.04em; margin-bottom: 1.4rem; }
.x-beauty .tab { border-radius: 10px; border-color: #1e1a1d22; } .x-beauty .tab.is-on { background: var(--k); color: #fff; }
.x-beauty .rb__l { margin: 1.4rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #1e1a1d88; }
.x-beauty .ch { border-color: #1e1a1d22; } .x-beauty .ch.is-on { background: var(--ps); border-color: var(--p); color: var(--p); }
.x-beauty .rb__r { margin: 1.6rem 0 1rem; padding: 1rem; border-radius: 14px; background: var(--ps); } .x-beauty .rb__r b { color: var(--p); }
.x-beauty .pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.x-beauty .pd { display: grid; gap: .4rem; align-content: start; padding: 1.2rem; border-radius: 20px; border: 1px solid #1e1a1d14; }
.x-beauty .pd__i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: #f6f3f4; } .x-beauty .pd__i .mk { width: 42%; }
.x-beauty .tg { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; } .x-beauty .tg span { padding: .1rem .5rem; border-radius: 999px; background: var(--ps); color: var(--p); font-size: .72rem; }
.x-beauty .pd h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; } .x-beauty .pd .bt { justify-self: start; margin-top: .3rem; }
.x-beauty .qz { display: grid; justify-items: center; gap: .8rem; padding: 5vw; background: var(--p); color: #fff; text-align: center; } .x-beauty .qz h2 { margin: 0; }
.x-beauty .ft { border-top: 1px solid #1e1a1d14; }
@media (max-width: 760px) { .x-beauty .rb { grid-template-columns: 1fr; } .x-beauty .pg { grid-template-columns: 1fr 1fr; } .x-beauty .pd:last-child { display: none; } }

/* ============================================================ Markgård ===
   Veg boxes. Deep field green, bone and amber. Box sizes as the main choice, a postcode check up front. */
.x-food { --g: #1e3a2c; --bo: #f1f0e8; --am: #f2a33a; background: var(--bo); color: var(--g); font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Geist", sans-serif; }
.x-food .nv__b { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; } .x-food .sun { width: 18px; height: 18px; border-radius: 50%; background: var(--am); box-shadow: 0 0 0 5px #f2a33a40; }
.x-food .bt { border-radius: 999px; background: var(--g); color: var(--bo); } .x-food .bt--line { background: transparent; color: var(--g); border-color: var(--g); }
.x-food .hr { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: center; margin: 0 2vw; padding: 5vw 4vw; border-radius: 32px; background: var(--g); color: var(--bo); }
.x-food h1 { font-size: clamp(2.5rem, 5.4vw, 4.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: .98; }
.x-food .hr > div > p { margin: 1.2rem 0 2rem; max-width: 40ch; opacity: .8; font-size: 1.1rem; }
.x-food .zip { display: flex; max-width: 440px; padding: .35rem; border-radius: 999px; background: var(--bo); }
.x-food .zip span { flex: 1; padding: .6rem 1rem; color: #1e3a2c88; } .x-food .zip .bt { background: var(--am); color: var(--g); }
.x-food .hr__v svg { display: block; width: 100%; height: auto; }
.x-food h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.x-food .bxs { padding: 6vw 5vw 4vw; }
.x-food .bxs__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.x-food .bx { display: flex; flex-direction: column; gap: .4rem; padding: 1.6rem; border-radius: 24px; background: #fff; border: 2px solid transparent; }
.x-food .bx.is-on { border-color: var(--g); }
.x-food .bx h3 { font-size: 1.6rem; } .x-food .bx__w { color: #1e3a2c99; } .x-food .bx__p b { font-size: 1.8rem; }
.x-food .bx ul { display: grid; gap: .35rem; margin: .8rem 0 1.4rem; } .x-food .bx li::before { content: "✓ "; color: var(--am); font-weight: 700; }
.x-food .bx .bt { margin-top: auto; }
.x-food .bxs__n { margin-top: 1rem; color: #1e3a2c99; }
.x-food .wk { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; padding: 4vw 5vw 6vw; }
.x-food .wk ul { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; } .x-food .wk li { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.x-food .wk li i { width: 16px; height: 16px; border-radius: 50%; }
.x-food .mos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-bottom: 1rem; }
.x-food .mos span { display: grid; place-items: center; height: 46px; border-radius: 8px; background: #1e3a2c14; font-size: .75rem; } .x-food .mos .is-on { background: var(--am); font-weight: 700; }
.x-food .ft { background: var(--g); color: var(--bo); }
@media (max-width: 760px) { .x-food .hr, .x-food .bxs__g, .x-food .wk { grid-template-columns: 1fr; } .x-food .hr__v { order: -1; max-width: 260px; } .x-food .mos { grid-template-columns: repeat(6, 1fr); } }

/* ========================================================= Hjul & Kæde ===
   AI chatbot. A plain bike-workshop page with the assistant open on top: the chat is the demo. */
.x-chatbot { --b: #1f5bff; --ink: #0b1630; background: #f4f6fa; color: var(--ink); min-height: 100vh; }
.x-chatbot .nv { background: #fff; border-bottom: 1px solid #0b163014; } .x-chatbot .nv__b span { color: var(--b); }
.x-chatbot .bt { border-radius: 10px; background: var(--b); color: #fff; }
.x-chatbot .pg { padding: 5vw; }
.x-chatbot .pg__c { max-width: 520px; }
.x-chatbot h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); letter-spacing: -0.04em; }
.x-chatbot .pg__c > p { margin: 1rem 0 2rem; color: #0b1630aa; }
.x-chatbot .pr li { display: flex; justify-content: space-between; padding: .8rem 0; border-top: 1px solid #0b16301a; }
.x-chatbot .cw { position: fixed; z-index: 10; right: 3vw; bottom: 3vh; top: calc(36px + 3vh); width: min(400px, 94vw); display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -30px #0b163066, 0 0 0 1px #0b163010; overflow: hidden; }
.x-chatbot .cw__h { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.2rem; background: var(--ink); color: #fff; }
.x-chatbot .av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--b); font-size: .78rem; font-weight: 700; }
.x-chatbot .cw__h p { display: grid; } .x-chatbot .cw__h small { font-size: .75rem; opacity: .75; }
.x-chatbot .cw__l { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; overflow: hidden; background: #f7f8fb; justify-content: flex-end; }
.x-chatbot .m { max-width: 86%; padding: .65rem .9rem; border-radius: 16px; font-size: .9rem; line-height: 1.4; }
.x-chatbot .m--b { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px #0b16300f; }
.x-chatbot .m--u { align-self: flex-end; background: var(--b); color: #fff; border-bottom-right-radius: 4px; }
.x-chatbot .qr, .x-chatbot .tm { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.x-chatbot .qr span, .x-chatbot .tm span { padding: .3rem .7rem; border-radius: 999px; border: 1px solid #1f5bff55; color: var(--b); font-size: .8rem; font-weight: 600; }
.x-chatbot .tm .is-on { background: var(--b); color: #fff; }
.x-chatbot .cf { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: 14px; background: #e8f7ee; color: #0b5d34; font-size: .85rem; border: 1px solid #0b5d3422; }
.x-chatbot .cw__in { display: flex; justify-content: space-between; margin: .8rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid #0b16301f; color: #0b163077; font-size: .9rem; }
.x-chatbot .cw__in span { color: var(--b); font-weight: 700; }
@media (max-width: 720px) { .x-chatbot .pg { display: none; } .x-chatbot .cw { position: static; width: auto; margin: 0; border-radius: 0; min-height: calc(100vh - 110px); } .x-chatbot .nv { display: none; } }

/* ========================================================= WhatsApp flow ===
   Automation. The customer's WhatsApp chat on the left, what happens behind it on the right. */
.x-whatsapp { --wg: #075e54; --wb: #efeae2; --wm: #d9fdd3; --ink: #10231a; background: #0f1a16; color: #e9f1ed; min-height: 100vh; }
.x-whatsapp .wa-wrap { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 5vw; align-items: center; padding: 3vw 5vw; min-height: calc(100vh - 36px); }
.x-whatsapp .wa { display: flex; flex-direction: column; height: min(720px, calc(100vh - 80px)); border-radius: 26px; overflow: hidden; background: var(--wb); color: var(--ink); box-shadow: 0 40px 80px -30px #000a; }
.x-whatsapp .wa__h { display: flex; gap: .7rem; align-items: center; padding: .9rem 1rem; background: var(--wg); color: #fff; }
.x-whatsapp .av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #25d366; color: #063; font-size: .78rem; font-weight: 700; }
.x-whatsapp .wa__h p { display: grid; } .x-whatsapp .wa__h small { font-size: .75rem; opacity: .8; }
.x-whatsapp .wa__l { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: .9rem; overflow: hidden; justify-content: flex-end;
  background-image: radial-gradient(#0000000d 1px, transparent 1.5px); background-size: 14px 14px; }
.x-whatsapp .dt { align-self: center; padding: .2rem .7rem; border-radius: 8px; background: #fff; font-size: .72rem; color: #10231a99; }
.x-whatsapp .m { position: relative; max-width: 84%; padding: .5rem .7rem 1.1rem; border-radius: 10px; font-size: .88rem; line-height: 1.38; box-shadow: 0 1px 1px #0000001a; }
.x-whatsapp .m i { position: absolute; right: .55rem; bottom: .25rem; font-style: normal; font-size: .66rem; color: #10231a77; }
.x-whatsapp .m--u { align-self: flex-start; background: #fff; } .x-whatsapp .m--b { align-self: flex-end; background: var(--wm); }
.x-whatsapp .wa__in { margin: .6rem; padding: .7rem 1rem; border-radius: 999px; background: #fff; color: #10231a77; font-size: .9rem; }
.x-whatsapp .bg__k { color: #25d366; font-family: "Geist Mono", monospace; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.x-whatsapp h1 { margin: .6rem 0 2rem; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.04em; max-width: 16ch; }
.x-whatsapp ol { display: grid; gap: 0; max-width: 520px; }
.x-whatsapp ol li { position: relative; display: flex; gap: 1rem; padding: 0 0 1.3rem; }
.x-whatsapp ol li::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: #25d36655; }
.x-whatsapp ol li:last-child::before { display: none; }
.x-whatsapp ol li > span { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #25d366; color: #063; font-weight: 700; font-size: .85rem; }
.x-whatsapp ol p { display: grid; } .x-whatsapp ol small { color: #e9f1ed99; }
.x-whatsapp .crm { max-width: 520px; margin-top: .5rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: #16241e; border: 1px solid #ffffff14; }
.x-whatsapp .crm__h { margin-bottom: .8rem; font-family: "Geist Mono", monospace; font-size: .78rem; color: #e9f1ed99; }
.x-whatsapp dl { display: grid; grid-template-columns: 7rem 1fr; gap: .45rem 1rem; margin: 0; font-size: .92rem; } .x-whatsapp dt { color: #e9f1ed88; } .x-whatsapp dd { margin: 0; }
.x-whatsapp .pri { padding: .1rem .5rem; border-radius: 6px; background: #ff6a1333; color: #ffb27f; font-size: .8rem; font-weight: 600; }
.x-whatsapp .bg__n { margin-top: 1.2rem; font-size: .8rem; color: #e9f1ed77; }
@media (max-width: 760px) {
  .x-whatsapp .wa-wrap { grid-template-columns: 1fr; padding: 0 0 2rem; gap: 2rem; }
  .x-whatsapp .wa { height: calc(100vh - 36px); border-radius: 0; }
  .x-whatsapp .bg { padding: 0 1.2rem; }
}
.x-construction .pj--3 { grid-column: span 2; }
.x-restaurant .hr { padding-right: 6vw; }

/* ---------------------------------------------------------------- motion (assets/demo.js) ---
   Reveals use the individual translate/scale properties so a scroll parallax (transform) can run on the same element.
   Nothing is hidden unless the script is running (.mx); ?still and reduced motion show the page at rest. */
.mx [data-rv] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), translate .9s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0s),
  scale .9s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0s), clip-path 1s cubic-bezier(.7, 0, .2, 1) var(--rv-d, 0s); }
.mx [data-rv="up"] { opacity: 0; translate: 0 28px; }
.mx [data-rv="down"] { opacity: 0; translate: 0 -100%; }
.mx [data-rv="left"] { opacity: 0; translate: -36px 0; }
.mx [data-rv="right"] { opacity: 0; translate: 40px 0; }
.mx [data-rv="scale"] { opacity: 0; scale: .94; }
.mx [data-rv="pop"] { opacity: 0; scale: .7; transition-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
.mx [data-rv="rise3d"] { opacity: 0; translate: 0 60px; scale: .9; }
.mx [data-rv="clip"] { clip-path: inset(100% 0 0 0); }
.mx [data-rv="sweep"] { clip-path: inset(0 100% 0 0); }
.mx [data-rv="chat"] { opacity: 0; translate: 0 40px; scale: .97; }
.mx [data-rv="msg"] { opacity: 0; translate: 0 14px; scale: .96; }
.mx [data-rv].in, .mx.go [data-rv].ix { opacity: 1; translate: none; scale: none; clip-path: inset(0 0 0 0); }
/* chat messages run on load, after a typing pause */
.mx.go [data-rv="msg"] { opacity: 1; translate: none; scale: none; }
.mx .typing { display: flex; gap: 4px; align-self: flex-start; width: max-content; padding: .7rem .9rem; border-radius: 14px; background: #0000000f; height: 0; padding-block: 0; opacity: 0; overflow: hidden; }
.mx.go .typing { animation: typing .75s linear var(--rv-d) both; }
.mx .typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; animation: tdot .6s ease-in-out infinite alternate; }
.mx .typing i:nth-child(2) { animation-delay: .15s; } .mx .typing i:nth-child(3) { animation-delay: .3s; }
.x-whatsapp .typing { align-self: flex-end; background: #ffffff33; }
@keyframes typing { 0% { opacity: 0; height: 0; padding-block: 0; } 12%, 85% { opacity: 1; height: 34px; padding-block: .7rem; } 100% { opacity: 0; height: 0; padding-block: 0; margin: 0; } }
@keyframes tdot { to { opacity: 1; translate: 0 -3px; } }
/* headline words rise out of their line */
.mx .mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mx .mw > span { display: inline-block; translate: 0 110%; transition: translate 1s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0s); }
.mx [data-rv="words"].in .mw > span, .mx.go [data-rv="words"].ix .mw > span { translate: none; }
.mx [data-rv="words"] { opacity: 1; }

/* signatures */
.mx .ld i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.16, 1, .3, 1) calc(var(--rv-d, 0s) + .2s); }
.mx .ld.in i { transform: none; }
.mx .pin { transform-box: fill-box; transform-origin: 50% 50%; animation: pin 2.4s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes pin { 0%, 60%, 100% { transform: none; } 20% { transform: scale(1.35); } }
.mx .prog li::after { content: ""; position: absolute; transform: scaleX(clamp(0, calc(var(--p, 0) * 4 - var(--i, 0)), 1)); transform-origin: 0 50%; }
.x-construction .tl .prog li::before { opacity: .25; }
.x-construction .tl .prog li::after { left: 0; right: 0; top: 1.2rem; height: 3px; background: var(--k); }
.x-whatsapp .prog li::after { left: 15px; top: 32px; bottom: 0; width: 2px; background: #25d366; transform-origin: 50% 0;
  transform: scaleY(clamp(0, calc(var(--p, 0) * var(--n, 3) - var(--i, 0)), 1)); }
.x-whatsapp .prog li:last-child::after { display: none; }
.mx .tap { animation: tap .5s cubic-bezier(.34, 1.3, .64, 1) var(--tap-d) both; }
@keyframes tap { 0% { scale: .9; } 60% { scale: 1.08; } 100% { scale: 1; } }
.mx .draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.2s cubic-bezier(.6, 0, .2, 1) var(--rv-d) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.x-real-estate .hm__i svg { transform: scale(var(--z, 1)); transform-origin: 50% 100%; }
.mx .mq.run { display: block; overflow: hidden; white-space: nowrap; }
.mx .mq__t { display: inline-flex; gap: 3rem; animation: mq 22s linear infinite; }
.mx .mq__t span { display: inline !important; }
@keyframes mq { to { transform: translateX(-33.333%); } }
.mx .beat { scale: 0; animation: beat .5s cubic-bezier(.34, 1.5, .64, 1) var(--rv-d) forwards, ring 2.4s ease-out calc(var(--rv-d) + .6s) infinite; }
@keyframes beat { to { scale: 1; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 #fff9; } 70%, 100% { box-shadow: 0 0 0 14px #fff0; } }
.mx .drop { transform-box: fill-box; transform-origin: 50% 100%; animation: drop .8s cubic-bezier(.34, 1.4, .64, 1) var(--rv-d) both; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-120px); } 100% { opacity: 1; transform: none; } }
.mx .bn__a .mk, .mx .iso, .mx .hr__b .mk, .mx .room svg, .mx .shelf .st__i, .mx .hr__card, .mx .bc, .mx .hr__line { will-change: transform; }
.mx-poster .d-ribbon { display: none !important; }