/**
 * Front page — v14 design port (claude.ai/design canvas, 2026-08-11).
 *
 * World: bone ground (#F2F1EC), near-black ink (#141412), Geist + Geist Mono
 * (self-hosted variable), Helvetica Neue for the hero statement block only.
 * Photography carries the page; glass pills and mono labels sit on top.
 *
 * The canvas is desktop-only; everything under the responsive header below
 * is this port's adaptation, tuned to keep the same voice at 390px.
 */

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

@font-face {
    font-family: 'Geist';
    src: url('../fonts/GeistVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMonoVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- ground ---------- */

:root {
    --bone: #F2F1EC;
    --ink: #141412;
    --muted: #5C5C55;
    --faint: #8B8B84;
    --dark-muted: #A3A39B;
    --pad-x: 28px;
    --mono: 'Geist Mono', 'SFMono-Regular', Menlo, monospace;
    --hero-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--ink);
    font-family: 'Geist', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

::selection {
    background: var(--ink);
    color: var(--bone);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}

.band-dark :focus-visible,
.media-card :focus-visible,
.site-header :focus-visible,
.hero :focus-visible {
    outline-color: #FFFFFF;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--bone);
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

[id] {
    scroll-margin-top: 84px;
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 24px;
}

.site-logo {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 51;
    display: block;
    mix-blend-mode: difference;
}

.site-logo img {
    display: block;
    height: 24px;
    width: auto;
}

/* Over the hero's pale wall the difference blend murks the wordmark to a
   mid grey — ride the scroll instead: pure white while the hero is on
   screen, difference once the bone sections take over. The discrete flip
   lands at ~74vh, over the hero's dark lower third, where both blends
   render white — so it is invisible. Browsers without scroll-timeline
   keep the difference behavior throughout. */
@media (min-width: 861px) {
    @supports (animation-timeline: scroll()) {
        .site-logo {
            animation: logo-blend linear both;
            animation-timeline: scroll();
            animation-range: 0 80vh;
        }
    }
}

@keyframes logo-blend {
    0%, 85% { mix-blend-mode: normal; }
    100%    { mix-blend-mode: difference; }
}

.nav-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 99px;
    background: rgba(52, 52, 50, 0.72);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.nav-pill a {
    font-size: 14px;
    color: var(--bone);
    padding: 10px 18px;
    border-radius: 99px;
    transition: background 0.2s;
}

.nav-pill a:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Ydelser dropdown in the nav pill — hover or keyboard focus opens it */
.nav-drop {
    position: relative;
}

.drop-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    min-width: 240px;
    border-radius: 18px;
    background: rgba(28, 28, 26, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.nav-drop:hover .drop-panel,
.nav-drop:focus-within .drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.drop-panel a {
    display: block;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--bone);
}

.drop-panel a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* CSS-only mobile menu, hidden on desktop */
.nav-mobile {
    display: none;
    position: relative;
}

.nav-mobile summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--bone);
    padding: 12px 20px;
    border-radius: 99px;
    background: rgba(52, 52, 50, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.nav-mobile summary::-webkit-details-marker {
    display: none;
}

.nav-burger {
    display: inline-block;
    width: 16px;
    height: 2px;
    background: var(--bone);
    position: relative;
}

.nav-burger::before,
.nav-burger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: var(--bone);
}

.nav-burger::before { top: -5px; }
.nav-burger::after  { top: 5px; }

/* Dims the page behind the open menu. z-index:-1 painted the scrim UNDER
   any section that creates its own stacking context (blends, isolation,
   transforms), so the page dimmed above the fold and stayed bright below —
   paint it above page content instead and lift the menu above it. */
.nav-mobile[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(20, 20, 18, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.nav-mobile summary,
.nav-mobile-panel {
    position: relative;
    z-index: 2;
}

.nav-mobile-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 284px;
    max-width: calc(100vw - 32px);
    /* The list can outgrow a short phone once Ydelser is expanded. */
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    background: rgba(28, 28, 26, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 10px;
}

.nav-mobile-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile-panel a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--bone);
}

.nav-mobile-panel a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ---------- mobile menu: hierarchy ---------- */

.nav-m-primary > li > a,
.nav-m-sub > summary {
    font-size: 16.5px;
    font-weight: 500;
}

.nav-m-sub > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--bone);
}

.nav-m-sub > summary::-webkit-details-marker {
    display: none;
}

.nav-m-sub > summary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Drawn, not a glyph — matches how .nav-burger is built. */
.nav-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(242, 241, 236, 0.6);
    border-bottom: 1.5px solid rgba(242, 241, 236, 0.6);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.nav-m-sub[open] > summary .nav-chevron {
    transform: translateY(1px) rotate(-135deg);
}

/* The service pages read as children of Ydelser: smaller, dimmer, indented
   against a rule that ties them to the parent row. */
.nav-m-sub > ul {
    margin: 2px 0 6px;
    padding-left: 16px;
    border-left: 1px solid rgba(242, 241, 236, 0.16);
}

/* 11px vertical puts the row pitch at ~38px. WCAG 2.2 AA only asks 24px, but
   9px left these at 34px against 44px for the rows above them — small enough
   to feel like a different, less tappable class of thing. */
.nav-m-sub > ul a {
    padding: 11px 12px;
    font-size: 14.5px;
    color: rgba(242, 241, 236, 0.74);
}

.nav-m-sub > ul a:hover {
    color: var(--bone);
}

/* ---------- mobile menu: the two actions ---------- */

.nav-m-actions {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(242, 241, 236, 0.16);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phone is solid because the call is the conversion; the consultation form is
   the named fallback, so it takes the outline. Same relationship the price
   panels use, inverted there by an explicit client decision. */
.nav-mobile-panel .nav-m-call {
    padding: 14px 16px;
    border-radius: 99px;
    background: #FFFFFF;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.nav-mobile-panel .nav-m-book {
    padding: 13px 16px;
    border: 1px solid rgba(242, 241, 236, 0.3);
    border-radius: 99px;
    font-size: 14.5px;
    font-weight: 500;
    text-align: center;
}

.nav-mobile-panel .nav-m-call:hover {
    background: #FFFFFF;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .nav-chevron { transition: none; }
}

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

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 18, 0.1);
}

.hero-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.02) 28%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.1) 55%,
        rgba(255, 255, 255, 0) 62%,
        rgba(255, 255, 255, 0.12) 100%
    );
}

.hero-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: 47%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 4%;
    font-family: var(--hero-stack);
    font-size: clamp(28px, 3.2vw, 54px);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--bone);
    white-space: nowrap;
}

.hero-rule .rule {
    height: 2px;
    background: var(--bone);
}

.rule.r-wide   { flex: 1.4; }
.rule.r-narrow { flex: 0.7; }

.hero-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5vh;
    text-align: center;
    font-family: var(--hero-stack);
    padding: 0 12px;
}

.hero-foot h1 {
    margin: 0;
    font-size: clamp(40px, 6.2vw, 110px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--bone);
    white-space: nowrap;
}

.hero-foot p {
    margin: 12px 0 0;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    color: rgba(242, 241, 236, 0.85);
}

/* Two-part H1: the quiet service line above the display line. Both sit
   inside the same <h1> so the heading carries the terms. */
.hero-foot .h1-lede {
    display: block;
    font-size: clamp(15px, 1.3vw, 21px);
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(242, 241, 236, 0.85);
    white-space: normal;
    margin-bottom: 14px;
}

.hero-foot .h1-display {
    display: block;
}

/* ---------- section scaffold ---------- */

.sec {
    max-width: 1720px;
    margin: 0 auto;
}

.sec-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    padding: 120px var(--pad-x) 64px;
}

/* The display word is a styled <p> since the SEO pass — the real <h2> is
   the keyword-bearing sentence in .sec-lede. Same rendering as before. */
.sec-head .sec-display {
    margin: 0;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.sec-lede {
    padding-top: 44px;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--muted);
    max-width: 460px;
    margin: 0;
}

.sec-lede strong {
    color: var(--ink);
    font-weight: 500;
}

.lede-big {
    margin: 0;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 500;
    max-width: 620px;
    color: var(--ink);
    text-wrap: pretty;
}

.lede-sub {
    margin: 20px 0 0;
    font-size: 19px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 520px;
}

#missionen .sec-lede {
    max-width: 620px;
}

/* ---------- shared media card ---------- */

.media-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

.media-card .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blur-hint  { filter: blur(2px);  transform: scale(1.05); }
.blur-soft  { filter: blur(5px);  transform: scale(1.08); }
.blur-mid   { filter: blur(16px); transform: scale(1.15); }
.blur-heavy { filter: blur(22px); transform: scale(1.2);  }

/* Warm ground: quiet the image, let the amber veil do the colorizing —
   filters alone turn this bright source khaki instead of orange. */
.blur-mid.warm {
    filter: blur(16px) saturate(0.55) brightness(0.6);
}

.veil-warm {
    background: linear-gradient(180deg, rgba(158, 74, 20, 0.42) 0%, rgba(58, 24, 8, 0.7) 100%);
}

.pos-low { object-position: 50% 80%; }

.veil {
    position: absolute;
    inset: 0;
}

.mono-tag,
.mono-sub,
.mono-badge {
    font-family: var(--mono);
}

/* ---------- mission ---------- */

.mission-frame {
    padding: 0 var(--pad-x) 100px;
}

.mission-media {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px var(--pad-x);
}

.veil-mission {
    background: rgba(20, 20, 18, 0.18);
}

.receipt {
    position: relative;
    width: 340px;
    max-width: 100%;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(20, 20, 18, 0.25);
    padding: 22px 24px;
}

.receipt-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.receipt-title {
    font-size: 14px;
    font-weight: 500;
}

.receipt-dots {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

.receipt-num {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 16px;
}

.receipt-num strong {
    font-size: 40px;
    letter-spacing: -0.04em;
    font-weight: 500;
    line-height: 1;
}

.receipt-num span {
    font-size: 12.5px;
    color: var(--muted);
}

.receipt-bars {
    display: flex;
    gap: 2px;
    margin-top: 14px;
    height: 14px;
}

.receipt-bars .bar {
    border-radius: 3px;
}

.bar-a {
    flex: 12;
    background: repeating-linear-gradient(90deg, #5D7A50 0 2.5px, #FFFFFF 2.5px 5px);
}

.bar-b {
    flex: 4;
    background: repeating-linear-gradient(90deg, #C98A3D 0 2.5px, #FFFFFF 2.5px 5px);
}

.bar-c {
    flex: 1;
    background: repeating-linear-gradient(90deg, #C6C6BE 0 2.5px, #FFFFFF 2.5px 5px);
}

.receipt-legend {
    display: flex;
    gap: 14px;
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--muted);
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    vertical-align: 1px;
}

.dot-a { background: #5D7A50; }
.dot-b { background: #C98A3D; }
.dot-c { background: #C6C6BE; }

.media-caption {
    position: absolute;
    left: 22px;
    bottom: 20px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

/* ---------- dark band: stats + pricing ---------- */

.band-dark {
    background: var(--ink);
    color: var(--bone);
}

.stats {
    list-style: none;
    margin: 0 auto;
    max-width: 1720px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 36px var(--pad-x);
    gap: 24px;
}

.stats li {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.stats strong {
    font-size: 26px;
    letter-spacing: -0.03em;
    font-weight: 500;
    line-height: 1;
}

.stats span {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--faint);
}

.pricing {
    padding: 100px var(--pad-x) 140px;
}

.pricing .sec-head {
    padding: 0 0 80px;
}

.lede-dark {
    color: var(--dark-muted);
    max-width: 440px;
}

.lede-dark strong {
    color: var(--bone);
}

.price-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.price-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
}

.price-hero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.veil-price {
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.35) 0%, rgba(20, 20, 18, 0.62) 100%);
}

.price-hero-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.mono-tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

.tag-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.badge-most {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.price-display {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: flex-end;
}

.price-display strong {
    font-size: clamp(64px, 7vw, 96px);
    letter-spacing: -0.05em;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
}

.mono-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.price-owners {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.owner-avatars {
    display: flex;
    flex-shrink: 0;
}

.owner-avatars img + img {
    margin-left: -12px;
}

.owner-avatars img {
    width: 38px;
    height: 38px;
    border-radius: 99px;
    object-fit: cover;
    object-position: 50% 15%;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.price-hero-foot {
    position: relative;
}

.glass-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 560px;
}

.glass-pills li {
    font-size: 13.5px;
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.btn-solid {
    display: inline-block;
    margin-top: 32px;
    padding: 17px 34px;
    border-radius: 99px;
    background: #FFFFFF;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
    transition: transform 0.25s;
}

.btn-solid:hover {
    transform: translateY(-2px);
}

.price-basic {
    border: 1px solid rgba(242, 241, 236, 0.18);
    border-radius: 24px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-basic-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.price-basic .mono-tag {
    color: var(--bone);
}

.price-display-sm {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-display-sm strong {
    font-size: 44px;
    letter-spacing: -0.04em;
    font-weight: 500;
    line-height: 1;
}

.price-display-sm .mono-sub {
    color: var(--faint);
}

.price-basic-body {
    margin: 24px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--dark-muted);
}

.basic-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: var(--dark-muted);
}

.basic-list li {
    position: relative;
    padding-left: 22px;
}

.basic-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--bone);
}

.price-note {
    margin: 24px 0 0;
    font-size: 13.5px;
    color: var(--dark-muted);
}

.price-note a {
    color: var(--bone);
    transition: opacity 0.2s;
}

.price-note a:hover {
    opacity: 0.7;
}

.btn-outline {
    display: block;
    margin-top: 32px;
    padding: 15px 0;
    border: 1px solid rgba(242, 241, 236, 0.3);
    border-radius: 99px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--bone);
    transition: border-color 0.2s;
}

.btn-outline:hover {
    border-color: var(--bone);
}

/* ---------- services ---------- */

.serve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 var(--pad-x);
    max-width: 1720px;
    margin: 0 auto;
}

.serve-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3 / 3.9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    transition: transform 0.3s;
}

.serve-card:hover {
    transform: translateY(-4px);
}

.serve-card .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.veil-serve {
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.1) 40%, rgba(20, 20, 18, 0.55) 100%);
}

.mono-badge {
    position: relative;
    /* inline-block: as a bare inline span the pill's vertical padding
       paints over adjacent blocks (the quote card's top edge on the
       service pages); flex parents blockify children, so this only
       changes the inline contexts. */
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.serve-widget {
    position: relative;
    align-self: center;
}

/* The gauge: same glass as the row's panels, ticked ring, alone on the photo */
.gauge {
    position: relative;
    width: 224px;
    height: 224px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge svg {
    position: absolute;
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.gauge circle {
    fill: none;
    stroke-width: 12;
    stroke-dasharray: 0.55 1.11667;
}

.ticks-base {
    stroke: rgba(255, 255, 255, 0.35);
}

.ticks-on {
    stroke: #FFFFFF;
}

.gauge-read {
    position: relative;
    text-align: center;
}

.gauge-read em {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
}

.gauge-read strong {
    display: block;
    margin-top: 5px;
    font-size: 46px;
    letter-spacing: -0.03em;
    font-weight: 500;
    line-height: 1.05;
    color: #FFFFFF;
}

.glass-panel {
    width: 82%;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 18px 20px;
    display: block;
}

.glass-panel.center {
    padding: 20px;
    text-align: center;
}

.panel-label {
    font-family: var(--mono);
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
}

.panel-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.panel-num.center {
    justify-content: center;
    gap: 6px;
}

.panel-num strong {
    font-size: 32px;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1;
}

.panel-num.center strong {
    font-size: 34px;
}

.panel-num i {
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
}

.panel-num span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.8);
}

.pay-bars {
    display: flex;
    gap: 3px;
    margin-top: 12px;
}

.pay-bars i {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.3);
}

.pay-bars i.on {
    background: #FFFFFF;
}

.deadline-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 14px;
}

.deadline-scale em {
    font-style: normal;
}

.deadline-track {
    display: block;
    margin-top: 6px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
}

.deadline-track .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    border-radius: 99px;
    background: #FFFFFF;
}

.deadline-track .knob {
    position: absolute;
    left: 58%;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(20, 20, 18, 0.4);
}

.serve-foot {
    position: relative;
    display: block;
}

.serve-foot strong {
    display: block;
    font-size: 26px;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;
}

.serve-sub {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12px;
    gap: 12px;
}

.serve-sub span {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
}

/* ---------- advisory ---------- */

.advisory-frame {
    padding: 16px var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

.advisory {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    padding: 56px;
}

.veil-advisory {
    background: radial-gradient(90% 90% at 50% 40%, rgba(120, 40, 10, 0) 0%, rgba(70, 25, 8, 0.35) 100%);
}

.advisory-inner {
    position: relative;
    max-width: 520px;
}

.advisory-inner h3 {
    margin: 28px 0 0;
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 500;
    color: #FFFFFF;
}

.advisory-inner > p {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
    max-width: 440px;
    padding: 16px 22px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 14px;
    color: #FFFFFF;
}

.status-read {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.eq {
    display: flex;
    gap: 5px;
    align-items: center;
}

.eq i {
    width: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.9);
}

.eq i:nth-child(1) { height: 14px; opacity: 0.95; }
.eq i:nth-child(2) { height: 20px; opacity: 0.9; }
.eq i:nth-child(3) { height: 11px; opacity: 0.85; }
.eq i:nth-child(4) { height: 17px; opacity: 0.8; }
.eq i:nth-child(5) { height: 9px;  opacity: 0.7; }

.advisory .btn-solid {
    margin-top: 16px;
    box-shadow: 0 16px 44px rgba(60, 20, 5, 0.35);
}

/* The folder index: all six services as the card's own directory —
   mono head, dotted leaders (the receipt's language), one arrow per row. */
.folder-index {
    position: relative;
    width: 42%;
    max-width: 500px;
    flex-shrink: 0;
}

.fi-head {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: 14px;
}

.fi-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.fi-row span {
    font-size: 18.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    transition: opacity 0.2s;
}

.fi-lead {
    flex: 1;
    border-bottom: 1.5px dotted rgba(255, 255, 255, 0.38);
    transform: translateY(-5px);
}

.fi-row em {
    font-family: var(--mono);
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}

/* Hover feedback only where the row actually goes somewhere — static
   fi-row divs (skat's Områderne) must not invite clicks. */
a.fi-row:hover span { opacity: 0.6; }
a.fi-row:hover em { transform: translate(3px, -3px); color: #FFFFFF; }

/* ---------- kunderne: the second paper object + the voice moment ---------- */

.cases-frame,
.quotes-frame {
    padding: 0 var(--pad-x) 16px;
    max-width: 1720px;
    margin: 0 auto;
}

.quotes-frame {
    padding-bottom: 100px;
}

.cases-media {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px var(--pad-x);
}

.veil-cases {
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.3) 0%, rgba(20, 20, 18, 0.5) 100%);
}

/* The kartotek: white paper like the receipt, revenue as its dotted bars */
.statement {
    position: relative;
    width: 620px;
    max-width: 100%;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(20, 20, 18, 0.25);
    padding: 24px 26px;
}

.st-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr auto;
    align-items: center;
    gap: 8px 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(20, 20, 18, 0.08);
}

.st-row:first-of-type {
    margin-top: 14px;
}

.st-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.st-name {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.st-sector {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.st-meter {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.st-bar {
    display: block;
    height: 11px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, #5D7A50 0 2.5px, #FFFFFF 2.5px 5px);
}

.st-val {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.st-emp {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.st-emp em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.st-emp b {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}


/* The voices: glass cards in an endless CSS marquee over the court */
.quotes-media {
    padding: 44px 0 48px;
}

.veil-quotes {
    background: linear-gradient(180deg, rgba(22, 18, 14, 0.42) 0%, rgba(22, 18, 14, 0.62) 100%);
}

.quotes-inner {
    position: relative;
    padding: 0 48px;
}

.quote-marquee {
    position: relative;
    margin-top: 30px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.quote-marquee::-webkit-scrollbar {
    display: none;
}

.quote-marquee.dragging {
    cursor: grabbing;
}

.quote-track {
    display: flex;
    width: max-content;
}

.quote-card {
    width: 480px;
    flex-shrink: 0;
    margin: 0 16px 0 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.13);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 24px 28px 22px;
    display: flex;
    flex-direction: column;
}

.stars {
    font-size: 13px;
    letter-spacing: 4px;
    color: #E2B457;
}

.quote-card blockquote {
    margin: 12px 0 0;
}

.quote-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.quote-card figcaption {
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- switching ---------- */

.switch-frame {
    padding: 0 var(--pad-x) 100px;
    max-width: 1720px;
    margin: 0 auto;
}

.switch-media .bg {
    object-position: 50% 35%;
}

.veil-switch {
    background: rgba(25, 25, 20, 0.34);
}

.switch-title {
    position: relative;
    margin: 0;
    padding: 44px 0 28px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.9);
}

.switch-path {
    position: relative;
    display: block;
    width: 100%;
}

.switch-path text {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 2.5px;
    fill: #FFFFFF;
}

/* Accessible always; visually hidden while the SVG rendering is shown */
.switch-list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.switch-cta {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 16px 0 44px;
}

.switch-cta a {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: #FFFFFF;
    padding: 13px 24px;
    border-radius: 99px;
    background: rgba(52, 52, 50, 0.65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background 0.2s;
}

.switch-cta a:hover {
    background: rgba(52, 52, 50, 0.9);
}

/* ---------- kontoret ---------- */

.owners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 var(--pad-x) 24px;
    max-width: 1720px;
    margin: 0 auto;
}

.owners-more {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 var(--pad-x) 100px;
    font-size: 15px;
}

.owners-more a {
    color: var(--muted);
    transition: color 0.2s;
}

.owners-more a:hover {
    color: var(--ink);
}

.owner-card {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}

.owner-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 4.2;
    object-fit: cover;
    object-position: 50% 12%;
}

.mono-badge.dark {
    position: absolute;
    left: 18px;
    bottom: 18px;
    align-self: auto;
    background: rgba(52, 52, 50, 0.6);
    border: 0;
    padding: 9px 15px;
    letter-spacing: 0.1em;
}

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

.contact-frame {
    padding: 24px var(--pad-x) 0;
    max-width: 1720px;
    margin: 0 auto;
}

.contact {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 32px;
}

.veil-contact {
    background: radial-gradient(90% 90% at 50% 45%, rgba(70, 25, 8, 0.15) 0%, rgba(50, 18, 6, 0.5) 100%);
}

.contact-kicker {
    position: relative;
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.contact-number {
    position: relative;
    margin-top: 10px;
    font-size: clamp(38px, 7vw, 76px);
    letter-spacing: -0.05em;
    font-weight: 500;
    line-height: 1;
    color: #FFFFFF;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.contact-number:hover {
    opacity: 0.8;
}

.contact .btn-solid {
    position: relative;
    box-shadow: 0 16px 44px rgba(50, 18, 6, 0.35);
}

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

.site-footer {
    padding: 64px var(--pad-x) 48px;
    max-width: 1720px;
    margin: 0 auto;
}

/* The footer runs on the SANS, as of 2026-08-30, and this is DESIGN.md's own
   rule rather than a preference. The Mono Is For Facts Rule: "Geist Mono
   carries labels, units, dates, counts, file names, and the ↗ mark. It never
   carries a sentence, a heading, or body copy."

   This footer was carrying all three. `.footer-brand p` is a two-sentence
   paragraph, and it renders on all 13 templates — audited, it is 13 of the 32
   places on the whole site where mono breaks the rule. Ten of the links are
   page names, which are words a person reads, not units.

   The failure was one of proportion. Everywhere else mono is the minority
   register and the sans carries the reading; in here it was inverted — every
   word except the wordmark was mono, so mono stopped being the label voice
   and became the footer's body font, which is the "developer portfolio" read.

   Mono keeps the two jobs the rule actually gives it: the four column labels
   and the colophon line at the foot. */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

.footer-brand {
    font-family: 'Geist', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.footer-brand p {
    margin: 12px 0 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    max-width: 44ch;
}

/* No `↗` any more. It was safe while this link was mono; in a sans run Geist
   has no U+2197 and iOS falls through to Apple Color Emoji — the blue emoji
   arrow the client flagged on 2026-08-19. DESIGN.md settles it either way:
   "A link in body copy ends with its words, never with a mark." */
.footer-brand a {
    display: inline-block;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--muted);
}

.footer-brand a:hover {
    color: var(--ink);
}

.footer-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Column labels — pages vs. company information (client ask, 2026-08-19).
   These stay mono: a column label is exactly what the rule hands mono, and
   they are now the only thing separating four sans columns. Carries its own
   font-family since `.footer-grid` stopped supplying it. */
.footer-head {
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--faint);
}

.footer-col .footer-head {
    margin-bottom: 0;
}

.footer-col a:hover {
    color: var(--ink);
}

.footer-bottom {
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ---------- responsive (this port's adaptation; the canvas is desktop-only) ---------- */

@media (max-width: 1080px) {
    .sec-head {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 96px;
    }

    .sec-lede {
        padding-top: 0;
    }

    /* The two-column folder loses its air below ~1080 — stack the
       directory under the copy inside the card. */
    .advisory {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }

    .folder-index {
        width: 100%;
        max-width: none;
        margin-top: 44px;
    }
}

@media (max-width: 980px) {
    .price-grid,
    .serve-grid,
    .owners-grid {
        grid-template-columns: 1fr;
    }

    .quotes-media {
        padding: 28px 0 32px;
    }

    .quotes-inner {
        padding: 0 20px;
    }

    .quote-card {
        width: 320px;
        padding: 20px 22px 18px;
    }

    .cases-media {
        padding: 28px 16px;
        min-height: 0;
    }

    .serve-card {
        aspect-ratio: auto;
        min-height: 480px;
        gap: 28px;
    }

    .pricing {
        padding-bottom: 100px;
    }
}

@media (max-width: 860px) {
    .nav-pill {
        display: none;
    }

    .nav-mobile {
        display: block;
    }

    /* On small screens the logo stays on the hero instead of floating over
       every section — the fixed 28px mark collided with content constantly. */
    .site-logo {
        position: absolute;
        top: 24px;
        left: 20px;
        /* Hero-only on small screens — no bone sections beneath it, so the
           difference blend only ever murks; plain white wins. */
        mix-blend-mode: normal;
    }

    .site-logo img {
        height: 19px;
    }

    /* The five-column footer needs 776px of grid to hold its content
       minimums: 2fr + 4x1fr, 32px gaps, and mono links that cannot
       hyphenate — "Revisorerklæringer" alone sets a 132px floor. Below a
       832px viewport the fifth column crossed the page's right edge, and
       below 804 it took the document with it: 35px of horizontal scroll on
       every template at 768, with CVR and address clipped off-screen.

       The brand takes its own row here and the four link columns keep the
       desktop order at 154px each, rather than dropping to the phone's two
       columns — the footer stays the same object, one row lower. */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* The serpentine SVG scales its text below legibility under ~900px —
   swap to the mono list rendering of the same five stops. */
@media (max-width: 900px) {
    .switch-path {
        display: none;
    }

    .switch-list {
        position: relative;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        padding: 8px 24px 8px;
        list-style: none;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.1em;
        color: #FFFFFF;
    }

    .switch-list li {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .switch-list li::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: #F5F2E6;
        flex-shrink: 0;
    }
}

@media (max-width: 720px) {
    :root {
        --pad-x: 20px;
    }

    .hero-rule {
        font-size: 15px;
        letter-spacing: 0.12em;
        gap: 12px;
    }

    .hero-foot h1 {
        white-space: normal;
        font-size: clamp(34px, 10.5vw, 52px);
        text-wrap: balance;
        line-height: 1.04;
    }

    /* Stacked stats read as spec-sheet rows: number left, label right,
       hairline separators — the floating-gutter version read as unfinished. */
    .stats {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 6px;
        padding-bottom: 10px;
    }

    .stats li {
        justify-content: space-between;
        padding: 18px 0;
        border-top: 1px solid rgba(242, 241, 236, 0.12);
    }

    .stats li:first-child {
        border-top: 0;
    }

    .stats strong {
        font-size: 30px;
    }

    .stats span {
        text-align: right;
    }

    .pricing {
        padding-top: 48px;
    }

    .pricing .sec-head {
        padding-bottom: 44px;
    }

    .price-hero {
        padding: 28px 22px;
        min-height: 0;
    }

    /* 38px circles read as clutter on a phone — give the faces real size */
    .owner-avatars img {
        width: 48px;
        height: 48px;
        border-width: 1.5px;
    }

    /* The collapsed card loses justify-between's air: without this the
       avatar circles sit 3px off the first pill row */
    .price-hero-foot {
        margin-top: 28px;
    }

    .price-hero-top {
        flex-direction: column;
    }

    .price-display {
        justify-content: flex-start;
    }

    .price-basic {
        padding: 28px 22px;
    }

    .advisory {
        padding: 40px 24px;
        min-height: 0;
    }

    .folder-index {
        margin-top: 36px;
    }

    .fi-row {
        padding: 14px 0;
    }

    .fi-row span {
        font-size: 17px;
    }

    .status-row {
        max-width: none;
    }

    .media-caption {
        font-size: 17px;
    }

    .statement {
        padding: 18px 16px;
    }

    /* the paper fills the frame on phones — give the caption its own space */
    .cases-media {
        padding-bottom: 64px;
    }

    .st-row {
        grid-template-columns: 1fr auto;
    }

    .st-meter {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .contact {
        padding: 48px 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
    }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .quote-card.dupe {
        display: none;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}