/* ============================================================
   PZ Digital — design tokens
   ============================================================ */
:root {
    /* The design is dark only: one palette, no light variant to keep in sync. */
    color-scheme: dark;

    /* Electric lime on warm charcoal; dark green ink on light surfaces. */
    --acc: #C2EF48;
    --acc-ink: var(--acc);
    --acc-soft: #FF9985;
    --on-accent: #0B0C0E;

    --bg: #11140F;
    --bg-alt: #1A1E17;
    --panel: #191D16;
    --scene-glow: #29351B;
    --scene-layer: #3D4930;
    --acc-shade: #8BAD31;
    --shadow: #0005;
    --header-bg: rgba(17, 20, 15, .88);
    --hover-surface: #21271B;

    --ink: #F0F0E6;
    --ink-2: #C4C8BA;
    --ink-3: #959D8D;

    /* The inverted band: pricing, marquee. */
    --light: #E9E5DB;
    --light-ink: #14151A;
    --light-ink-2: #3F3E39;
    --light-ink-3: #55534D;

    /* `--line*` are decorative rules; `--line-strong` / `--light-line-strong`
       draw control boundaries and so clear 3:1 against their background. */
    --line: rgba(233, 229, 219, .14);
    --line-soft: rgba(233, 229, 219, .1);
    --line-strong: rgba(233, 229, 219, .42);
    --light-line: rgba(20, 21, 26, .14);
    --light-line-strong: rgba(20, 21, 26, .5);

    --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --shell: 1440px;
    --pad-x: clamp(16px, 3.4vw, 44px);
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Shared controls are upright; the monogram retains its own slant. */
    --skew: 0deg;

    /* Minimum comfortable touch target. */
    --tap: 48px;
    /* Height of the sticky header; drives `scroll-padding-top`. */
    --header-h: 81px;
}

/* The page is edge-to-edge (`viewport-fit=cover`), so the gutter has to clear
   the notch and the rounded corners in landscape. `env()` is 0 elsewhere. */
@supports (padding: max(0px)) {
    :root {
        --pad-x: max(clamp(16px, 3.4vw, 44px), env(safe-area-inset-left), env(safe-area-inset-right));
    }
}

/* 3.4vw leaves a 16px gutter on a phone, which sets every band almost flush
   with the screen edge. Below the tablet breakpoint the gutter scales off the
   viewport instead, so the copy keeps a margin the eye can rest in. */
@media (max-width: 45rem) {
    :root {
        --pad-x: max(clamp(18px, 5.2vw, 24px), env(safe-area-inset-left), env(safe-area-inset-right));
    }
}

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

html {
    scroll-behavior: smooth;
    /* keep anchor targets clear of the sticky header */
    scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px);
    /* iOS Safari inflates text in landscape unless this is pinned. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
}

body {
    font-family: var(--sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* `clip` rather than `hidden`: `hidden` would turn this into a scroll
       container and break the scroll-driven animations below. */
    overflow-x: clip;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    color: var(--acc);
}

::selection {
    background: var(--acc);
    color: var(--on-accent);
}

input, textarea, select, button {
    font-family: inherit;
}

button, a, input, select, textarea { touch-action: manipulation; }
main { overflow-wrap: anywhere; }

/* The focus ring uses dark accent ink on the light pricing surface. */
:focus-visible {
    outline: 3px solid var(--acc-ink);
    outline-offset: 3px;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip-link {
    min-height: var(--tap);
    position: absolute;
    left: var(--pad-x);
    top: 8px;
    z-index: 80;
    background: var(--ink);
    color: var(--bg);
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: translateY(calc(-100% - 16px));
    transition: transform .2s var(--ease);
}

.skip-link:focus-visible {
    transform: none;
    color: var(--bg);
}

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

/* FocusOnNavigate targets the <h1>; it should not draw a ring. */
h1:focus, h1:focus-visible {
    outline: none;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.shell {
    max-width: var(--shell);
    margin: 0 auto;
}

.section {
    padding: clamp(72px, 9vw, 144px) var(--pad-x);
}

.section--alt {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* The raised band, as behind #waas and #kontakt; alternating it with the plain
   surface is what gives a page the home page's rhythm. */
.section--tint {
    background: var(--bg-alt);
}

/* The inverted pricing band. Tokens are re-pointed rather than overridden per
   rule, so the shared components keep working inside it. */
.section--light {
    background: var(--light);
    color: var(--light-ink);
    --ink: var(--light-ink);
    --ink-2: var(--light-ink-2);
    --ink-3: var(--light-ink-3);
    --line: var(--light-line);
    --line-soft: rgba(20, 21, 26, .1);
    --line-strong: var(--light-line-strong);
    --acc-ink: #3E590C;
    --hover-surface: rgba(20, 21, 26, .05);
}

.section--light a:hover {
    color: var(--acc-ink);
}

/* Graph paper, used behind the cost comparison. */
.section--grid {
    background-image: linear-gradient(rgba(233, 229, 219, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 229, 219, .05) 1px, transparent 1px);
    background-size: 90px 90px;
}

/* At phone width the 90px grid is finer than the figures it sits behind and
   reads as texture over them; the band keeps its flat surface instead. */
@media (max-width: 45rem) {
    .section--grid { background-image: none; }
}

/* Hairline card grids: 1px gap over a tinted background draws the rules. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 270px)), 1fr));
    gap: 1px;
    background: var(--line);
}

.mono {
    font-family: var(--mono);
}

/* `.accent` only ever marks display-size text, which clears 3:1 at --acc. */
.accent {
    color: var(--acc);
}

/* The design sets its counterpoint in a light italic cut of the display face;
   Bricolage has no true italic, so this is a synthesised oblique. */
.accent-italic {
    color: var(--acc);
    font-style: italic;
    font-weight: 300;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--ink-3);
}

/* Ornamental, but it still has to be visible enough to read as a separator. */
.eyebrow .sep {
    color: var(--ink-3);
}

/* Shared control wrapper; inner content compensates if --skew changes. */
.skewed {
    transform: skewX(var(--skew));
    display: inline-block;
}

.skewed > span {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1));
}

/* ============================================================
   Section heading
   ============================================================ */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
}

.section-head h2 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(2.1rem, 4.8vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
}

.section-index {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

/* Wrapped onto two rows the counter reads as a caption of the title, so it
   sits closer to it and the rule below carries the separation. */
@media (max-width: 45rem) {
    .section-head {
        gap: 8px;
        padding-bottom: 20px;
    }
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--header-bg);
    padding-top: env(safe-area-inset-top);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* Reduce Transparency asks for an opaque bar instead of a blurred one. */
@media (prefers-reduced-transparency: reduce) {
    .site-header {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px var(--pad-x);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    flex: 0 0 auto;
    min-height: var(--tap);
}

.brand-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
}

.brand-text span {
    font-weight: 300;
    color: var(--ink-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 22px);
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nav-link {
    justify-content: center;
    color: var(--ink-2);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

/* Small navigation ordinals stay secondary to the labels. */
.nav-num { font-size: .55rem;
    color: var(--ink-3);
}

.nav-link:hover {
    border-bottom-color: var(--acc);
    color: var(--acc);
}

/* The navigation links pages now, so the page being read is marked: the full
   colour on the page itself, the underline alone on a town or a reference. */
.nav-link[aria-current] { border-bottom-color: var(--line-strong); }
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--acc); }

.nav-link:hover .nav-num { font-size: .55rem;
    color: inherit;
}

.nav-cta { border-radius: 4px;
    flex: 0 0 auto;
    background: var(--acc);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .1em;
    transition: background .2s, color .2s;
}

.nav-cta > span {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 18px;
}

.nav-cta:hover {
    background: var(--ink);
    color: var(--on-accent);
}

.mobile-navigation {
    display: none;
}

/* Keep the primary action beside a native disclosure on smaller screens. */
@media (max-width: 68rem) {
    .header-inner {
        gap: 8px;
    }

    .brand {
        margin-right: auto;
    }

    .nav-desktop {
        display: none;
    }

    .mobile-navigation {
        display: block;
        flex: 0 0 auto;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--tap);
        min-height: var(--tap);
        color: var(--ink);
        border: 1px solid var(--line-strong);
        cursor: pointer;
        list-style: none;
        touch-action: manipulation;
    }

    .nav-toggle::-webkit-details-marker { display: none; }
    .nav-toggle:hover { background: var(--hover-surface); }
    .mobile-navigation[open] .nav-toggle { background: var(--hover-surface); }
    .nav-toggle-icon path { transform-origin: 12px 12px; }
    .mobile-navigation[open] .nav-toggle-top { transform: rotate(45deg) translateY(6px); }
    .mobile-navigation[open] .nav-toggle-middle { opacity: 0; }
    .mobile-navigation[open] .nav-toggle-bottom { transform: rotate(-45deg) translateY(-6px); }

    .nav-mobile {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 12px var(--pad-x) 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--line-strong);
        max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        font-size: 0.75rem;
    }

    .nav-mobile .nav-link {
        justify-content: flex-start;
        padding: 8px 12px;
        border-bottom-color: var(--line);
    }

    .nav-mobile .nav-link:hover { background: var(--hover-surface); }

    .nav-mobile .nav-link:focus-visible {
        outline-offset: -3px;
    }
}

@media (max-width: 24rem) {
    .brand-text span { display: none; }
    .nav-cta > span { padding-inline: 12px; }
}

/* A tall bar must not obscure content in landscape or behind a keyboard; a
   narrow but tall viewport keeps the sticky bar, so only the height cuts it. */
@media (max-height: 32rem) {
    .site-header { position: relative; }
    html { scroll-padding-top: 16px; }
}

/* Native scroll progress; unsupported browsers receive a JS-updated value. */
.scroll-progress {
    height: 2px;
    background: var(--acc);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 50%;
}

@supports (animation-timeline: scroll(root block)) {
    .scroll-progress {
        animation: pz-progress linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes pz-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ============================================================
   Reveal animations
   ------------------------------------------------------------
   `.intro` is the above-the-fold stagger that plays on load.
   `[data-reveal]` is scrolled into place by a view() timeline;
   `--stagger` offsets the range to reproduce the design's
   per-element delays.
   ============================================================ */
@keyframes pz-reveal {
    from { opacity: 0; transform: perspective(1000px) translateY(48px) rotateX(5deg); }
    to { opacity: 1; transform: none; }
}

.intro {
    animation: pz-reveal .8s var(--ease) both;
    animation-delay: var(--d, 0ms);
}

@supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
    [data-reveal] {
        animation: pz-reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 20%;
    }

    /* Staggering the range start is the scroll-timeline equivalent of a delay. */
    .rv-1 { animation-range: entry 8% cover 23%; }
    .rv-2 { animation-range: entry 11% cover 26%; }
    .rv-3 { animation-range: entry 14% cover 29%; }
    .rv-4 { animation-range: entry 17% cover 32%; }
}

/* Visible by default without JS. The observer opts only offscreen content in. */
@supports not ((animation-timeline: view()) and (animation-range: entry 5% cover 20%)) {
    [data-reveal].reveal-pending {
        opacity: 0;
        transform: perspective(1000px) translateY(48px) rotateX(5deg);
    }

    [data-reveal].reveal-visible {
        animation: pz-reveal .8s var(--ease) both;
        animation-delay: var(--reveal-delay, 0ms);
    }

    .rv-1 { --reveal-delay: 60ms; }
    .rv-2 { --reveal-delay: 120ms; }
    .rv-3 { --reveal-delay: 180ms; }
    .rv-4 { --reveal-delay: 240ms; }
}

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

    .art-ticket { animation: none; }

    [data-reveal], [data-reveal].reveal-visible, [data-reveal].reveal-pending, .intro {
        animation: none;
        opacity: 1;
        transform: none;
    }

    *, *::before, *::after { transition: none !important; }
    .scroll-progress { animation: none; transform: scaleX(0); }
}

/* Keyboard navigation must never land on a transparent reveal target. */
[data-reveal]:focus-within,
[data-reveal].reveal-pending:focus-within,
[data-reveal].reveal-visible:focus-within {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 30px var(--pad-x) 0;
    background: radial-gradient(ellipse at 80% 45%, var(--scene-glow) 0, transparent 47%), var(--bg);
}
.hero-shell { position: relative; }
.hero-topline { justify-content: space-between; font-size: .625rem; letter-spacing: .13em; }
.hero-response { display: inline-flex; align-items: center; gap: 9px; }
.hero-response i { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; flex-shrink: 0; }
.hero-composition { display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; min-height: min(760px, 78svh); padding: 40px 0 60px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font: 600 clamp(4rem, 8.4vw, 8.7rem)/.98 var(--display); letter-spacing: -.065em; margin: 0; }
.hero-line { display: block; padding: .04em 0 .08em; margin: -.04em 0 -.08em; }
.hero-line > span { display: block; }
.hero-lede { max-width: 38ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; color: var(--ink-2); margin: 30px 0 26px; text-wrap: pretty; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
.hero-actions .btn { min-width: 195px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 16px; font-size: .8rem; min-height: var(--tap); }
.hero-secondary span { color: var(--acc); font-size: 1.3rem; }
.hero-art { position: relative; min-width: 0; height: 100%; min-height: 440px; perspective: 1000px; }
.monogram-sculpture { position: absolute; inset: 2% -12% 0 -14%; transform: rotateX(-10deg) rotateY(-19deg) rotateZ(-9deg); filter: drop-shadow(22px 44px 20px #0008); }
.sculpture-svg { width: 100%; height: 100%; overflow: visible; }
.orbital-plane { position: absolute; border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent); border-radius: 50%; width: 100%; aspect-ratio: 1; top: 6%; left: 0; }
.orbital-plane--one { transform: rotateX(62deg) rotateY(-18deg) rotateZ(-25deg); }
.orbital-plane--two { transform: rotateX(24deg) rotateY(60deg) rotateZ(30deg); border-color: var(--line); }
.orbital-plane--one::after { content: ""; width: 8px; height: 8px; position: absolute; left: 13%; top: 14%; border-radius: 50%; background: var(--acc); box-shadow: 0 0 22px var(--acc); }
.orbital-cross { position: absolute; color: var(--ink-3); font: 300 22px var(--mono); }
.orbital-cross--one { top: 5%; right: 8%; }
.orbital-cross--two { bottom: 14%; left: 9%; }
.art-coordinate, .art-caption { position: absolute; color: var(--ink-3); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.art-coordinate { top: 5%; left: 10%; }
.art-caption { bottom: 3%; right: 0; }
.hero-horizon { position: absolute; z-index: -1; width: 140%; height: 50%; left: -20%; bottom: -38%; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 -20px 90px #a7db1610; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 23px 0; color: var(--ink-3); font: .625rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.hero-bottom a { display: flex; align-items: center; gap: 16px; min-height: var(--tap); }
.scroll-cue { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: var(--acc); }

/* Sub-page scenes (the `Art` slot) each carry one card meant to be read: the
   light ticket, like the front layer of the home page's stack, turned to the
   angle of a boarding pass. It drops in with the hero's intro stagger. */
.art-ticket {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 10%;
    display: grid;
    gap: 6px;
    min-width: 13rem;
    padding: 16px 22px 18px;
    border-radius: 8px;
    background: var(--light);
    color: var(--light-ink);
    box-shadow: 0 30px 70px var(--shadow);
    transform: rotate(-4deg);
    animation: pz-ticket .9s var(--ease) .8s both;
}
.art-ticket-label { padding-bottom: 10px; border-bottom: 1px dashed var(--light-line-strong); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--light-ink-2); }
.art-ticket-label i { font-style: normal; color: var(--light-ink); }
.art-ticket strong { font: 700 clamp(42px, 4.4vw, 64px)/1 var(--display); letter-spacing: -.055em; margin-top: 4px; }
.art-ticket-note { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--light-ink-3); }

@keyframes pz-ticket { from { opacity: 0; transform: translateY(28px) rotate(-10deg); } }
/* Draws a `pathLength="1"` stroke out from its start. */
@keyframes pz-route { from { stroke-dashoffset: 1; } }

/* The perspective section opens the layers as it crosses the viewport. */
.vision { overflow: clip; background: var(--bg-alt); }
.vision-layout { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 7%; min-height: 600px; }
.vision-copy .section-head { flex-direction: column-reverse; align-items: flex-start; border: 0; padding: 0; gap: 30px; }
.vision-copy .section-index { display: flex; align-items: center; gap: 12px; }
.vision-copy .section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.vision-copy h2 { font: 500 clamp(3rem, 5.5vw, 5.6rem)/1.02 var(--display); letter-spacing: -.055em; margin: 0; }
.vision-copy h2 span { color: var(--acc); display: block; }
.vision-copy p { margin-top: 30px; font-size: 1.1rem; color: var(--ink-2); line-height: 1.7; max-width: 35ch; }
.vision-copy .link-arrow { margin-top: 16px; }
.vision-stage { height: 520px; perspective: 1200px; display: grid; align-items: center; }
.vision-stack { height: 350px; position: relative; transform-style: preserve-3d; transform: rotateX(22deg) rotateY(-15deg) rotateZ(7deg); }
.vision-layer { position: absolute; inset: 0; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 30px 70px var(--shadow); }
.vision-layer--back, .vision-layer--middle { display: flex; justify-content: space-between; align-items: end; padding: 22px; font: .625rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.vision-layer--back { transform: translate3d(0, 75px, -100px); background: var(--acc); color: var(--on-accent); }
.vision-layer--middle { transform: translate3d(0, 40px, -50px); background: var(--scene-layer); color: var(--ink); }
.vision-layer--front { background: var(--light); color: var(--light-ink); overflow: hidden; }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--light-line); font: .55rem var(--mono); text-transform: uppercase; }
.canvas-toolbar > span:first-child { display: flex; gap: 4px; }
.canvas-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: var(--light-ink-3); }
.canvas-content { padding: 28px; height: calc(100% - 40px); position: relative; overflow: hidden; }
.canvas-label { font: .55rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.canvas-content strong { position: relative; z-index: 1; display: block; max-width: 7.5ch; margin-top: 20px; font: 600 clamp(2rem, 3.5vw, 3.5rem)/.98 var(--display); letter-spacing: -.055em; }
.canvas-bottom { position: absolute; bottom: 22px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; font: .55rem var(--mono); }
.canvas-bottom > span:last-child { font-size: 22px; }
.canvas-orbit { position: absolute; width: 220px; height: 220px; border: 40px solid var(--acc); border-radius: 50%; right: -15px; top: 25px; transform: rotate(-30deg) scaleX(.7); box-shadow: inset -8px 0 0 var(--acc-shade), 8px 0 0 var(--acc-shade); }

/* Native motion and fallback use the same keyframes and named ranges. */
@keyframes pz-sculpture {
    from { transform: translateY(0) rotateX(-10deg) rotateY(-19deg) rotateZ(-9deg); }
    to { transform: translateY(90px) rotateX(12deg) rotateY(24deg) rotateZ(9deg); }
}
@keyframes pz-orbit {
    from { transform: rotateX(62deg) rotateY(-18deg) rotateZ(-25deg); }
    to { transform: rotateX(35deg) rotateY(24deg) rotateZ(35deg); }
}
@keyframes pz-stack {
    from { transform: rotateX(38deg) rotateY(-24deg) rotateZ(10deg); }
    to { transform: rotateX(4deg) rotateY(5deg) rotateZ(-3deg); }
}
@keyframes pz-layer-back {
    from { transform: translate3d(0, 75px, -100px); }
    to { transform: translate3d(0, 155px, -160px); }
}
@keyframes pz-layer-middle {
    from { transform: translate3d(0, 40px, -50px); }
    to { transform: translate3d(0, 80px, -80px); }
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .hero { view-timeline-name: --hero-scene; }
        .vision { view-timeline-name: --vision-scene; }
        .monogram-sculpture { animation: pz-sculpture linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
        .orbital-plane--one { animation: pz-orbit linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
        .vision-stack, .vision-layer--back, .vision-layer--middle { animation: pz-stack linear both; animation-timeline: --vision-scene; animation-range: entry 0% exit 70%; }
        .vision-layer--back { animation-name: pz-layer-back; }
        .vision-layer--middle { animation-name: pz-layer-middle; }
    }
}
@media (max-width: 60rem) {
    .hero-composition { grid-template-columns: 1.25fr 1fr; min-height: 650px; }
    .hero h1 { font-size: clamp(3.8rem, 9vw, 6rem); }
    .hero-art { min-height: 360px; }
    .art-caption { max-width: 22ch; text-align: right; line-height: 1.6; }
    .hero-edition { display: none; }
    .vision-layout { gap: 4%; }
    .vision-stage { height: 460px; }
    .vision-stack { height: 300px; }
    .canvas-orbit { width: 160px; height: 160px; border-width: 30px; right: -40px; top: 45px; }
}
@media (max-width: 42rem) {
    .hero { padding-top: 22px; }
    .hero-topline { font-size: .6875rem; gap: 14px; letter-spacing: .08em; }
    .hero-response { display: none; }
    .hero-composition { display: flex; flex-direction: column; align-items: stretch; padding: 35px 0 12px; min-height: 0; }
    .hero h1 { font-size: clamp(3.3rem, 12.7vw, 5.3rem); }
    .hero-lede { max-width: 34ch; margin-top: 24px; font-size: .98rem; }
    .hero-actions { gap: 12px 20px; }
    .hero-actions .btn { min-width: 165px; padding: 14px 18px; }
    .hero-secondary { font-size: .75rem; gap: 8px; }
    .hero-art { height: 320px; min-height: 0; width: 90%; max-width: 380px; align-self: center; margin-top: 20px; }
    .monogram-sculpture { inset: -10% 0 -5%; }
    .orbital-plane { top: -4%; }
    /* The crosses and the coordinate are ornament the monogram has no room for. */
    .orbital-cross { display: none; }
    .art-coordinate { display: none; }
    .art-ticket { top: 2%; min-width: 0; padding: 12px 16px 14px; }
    .art-ticket strong { font-size: 38px; }
    .art-caption { bottom: 4%; max-width: none; font-size: 10px; letter-spacing: .08em; }
    .hero-bottom { font-size: .6875rem; padding: 14px 0; gap: 14px; letter-spacing: .05em; }
    .hero-bottom > span:first-child { max-width: 20ch; line-height: 1.7; }
    .hero-bottom a { gap: 9px; }
    .vision-layout { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
    .vision-copy h2 { font-size: clamp(2.8rem, 11vw, 4.2rem); }
    .vision-copy p { margin-top: 30px; font-size: 1rem; }
    .vision-stage { height: 410px; width: 90%; justify-self: center; }
    .vision-stack { height: 270px; }
    .canvas-content { padding: 22px; }
    .canvas-bottom { left: 22px; right: 22px; bottom: 18px; }
    .canvas-content strong { font-size: 2.4rem; }
    .canvas-label, .canvas-bottom, .canvas-toolbar { font-size: .55rem; }
}
/* Phone widths: the actions no longer fit on one row, and a stacked 165px button
   above a 150px text link reads as two blocks of almost the same width. Both take
   the whole column instead, so the two arrows line up on the same right edge. */
@media (max-width: 27rem) {
    .hero-actions .btn, .hero-actions .hero-secondary { width: 100%; }
    .hero-actions .hero-secondary { justify-content: space-between; }
}
/* Under ~385px the ornament crowds the monogram; it gives the width back to the copy. */
@media (max-width: 24rem) {
    .hero { padding-top: 16px; }
    .hero h1 { font-size: clamp(2.9rem, 13.6vw, 3.3rem); }
    .hero-lede { margin: 20px 0 22px; font-size: .9375rem; }
    .hero-art { height: 260px; width: 100%; margin-top: 12px; }
    .art-caption { display: none; }
    .hero-bottom { justify-content: center; }
    .hero-bottom > span:first-child { display: none; }
    .vision-stage { height: 330px; }
    .vision-stack { height: 225px; }
    .canvas-content { padding: 18px; }
    .canvas-content strong { font-size: 1.9rem; margin-top: 14px; }
    .canvas-bottom { left: 18px; right: 18px; }
    .canvas-orbit { width: 130px; height: 130px; border-width: 24px; }
}
/* ============================================================
   Buttons
   ============================================================ */
.btn { border-radius: 4px;
    min-height: var(--tap);
    padding: 16px 24px;
    font-size: 0.96875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background .2s, color .2s, border-color .2s;
}

.btn--primary {
    background: var(--acc);
    color: var(--on-accent);
    font-weight: 600;
}

.btn--primary:hover {
    background: var(--ink);
    color: var(--on-accent);
}

.btn--ghost {
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 500;
}

.btn--ghost:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* Underlined text link with an arrow, used on the path cards. */
.link-arrow {
    min-height: var(--tap);
    margin-top: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    /* the underline is the affordance, so it has to clear 3:1 */
    border-bottom: 1px solid var(--line-strong);
    /* padded up to the 48px touch target without moving the underline */
    padding: 12px 0;
    align-self: flex-start;
    transition: color .2s, border-color .2s;
}

.link-arrow:hover {
    border-bottom-color: var(--acc);
    color: var(--acc);
}

/* ============================================================
   Marquee
   ------------------------------------------------------------
   A static band, not a scroller: the list wraps instead of
   animating so nothing moves outside the reader's control.
   ============================================================ */
.marquee { border-block: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-3);
    padding: 22px var(--pad-x);
}

.marquee-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.6;
}

.marquee-track li {
    display: flex;
    align-items: center;
    gap: 18px;
}

.marquee-track li:not(:last-child)::after {
    content: "✳";
    color: var(--acc);
    letter-spacing: 0;
}

/* Four or five centred, ragged rows of accent asterisks is the noisiest thing
   on a phone screen. The band left-aligns to the same gutter as everything
   else and the separators drop back to the muted ink. */
@media (max-width: 45rem) {
    .marquee { padding-block: 18px; }

    .marquee-track {
        justify-content: flex-start;
        gap: 9px 13px;
        letter-spacing: .13em;
        line-height: 1.7;
    }

    .marquee-track li { gap: 13px; }
    .marquee-track li:not(:last-child)::after { color: var(--ink-3); }
}

/* ============================================================
   Paths (Dvě cesty)
   ============================================================ */
#cesty .card-grid { gap: 22px; background: transparent; margin-top: 36px; }

.path { border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-alt);
    padding: clamp(28px, 3.8vw, 60px) clamp(20px, 2.4vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    transition: background .35s;
}

.path:hover {
    background: var(--hover-surface);
}

/* Outlined ordinal bleeding off the top-right corner. */
.path-figure { opacity: .65;
    font-family: var(--display);
    position: absolute;
    top: -12px;
    right: 10px;
    font-size: clamp(5.625rem, 11vw, 10rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 219, .13);
    pointer-events: none;
}

/* The ordinal is a watermark; stacked, it lands right behind the tag row, so it
   steps back rather than competing with it. */
@media (max-width: 45rem) {
    #cesty .card-grid { gap: 26px; }
    .path-figure { font-size: 4.75rem; top: -8px; right: 6px; opacity: .45; }
}

.path-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    position: relative;
}

.tag {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .16em;
    padding: 5px 9px;
    font-weight: 500;
}

.tag--solid {
    background: var(--acc);
    color: var(--on-accent);
}

.tag--outline {
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 4px 9px;
}

.tag-note {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
}

.path h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.5rem, 2.7vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
    position: relative;
}

.path p {
    margin: 0;
    color: var(--ink-2);
    line-height: 1.58;
    font-size: 0.96875rem;
    max-width: 42ch;
}

/* Numbered rows divided by hairlines rather than bulleted. Chrome will not hand
   the implicit `list-item` counter to `content` once the marker is off, so the
   numbering runs on a counter of its own. */
.num-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: num-list;
    font-size: 0.9375rem;
}

.num-list li {
    display: flex;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--line-soft);
    counter-increment: num-list;
}

.num-list li:last-child {
    border-bottom: 1px solid var(--line-soft);
}

.num-list li::before {
    content: counter(num-list, decimal-leading-zero);
    color: var(--acc);
    font-family: var(--mono);
    font-size: 0.75rem;
    flex: 0 0 auto;
}

/* ============================================================
   WaaS
   ============================================================ */
#waas { background: var(--bg-alt); }

.waas-lede {
    margin: 40px 0 60px;
    max-width: 47ch;
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
}

.waas-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.4375rem), 1fr));
    gap: clamp(18px, 2.4vw, 36px);
}

.waas-step {
    border-top: 2px solid var(--line-strong);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* The first phase is the one the reader is buying; it carries the accent. */
.waas-step:first-child {
    border-top-color: var(--acc);
}

.waas-step .num {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    color: var(--ink-3);
}

.waas-step h3 {
    font-family: var(--display);
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.waas-step p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.55;
}

.stats {
    margin-top: clamp(36px, 4.5vw, 64px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(20px, 3vw, 40px);
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.stat-value {
    font-family: var(--display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.stat-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 8px;
}

/* Stacked, the phases sit one hairline apart; the rules only read as separate
   phases with more air between them. */
@media (max-width: 45rem) {
    .waas-lede { margin: 28px 0 40px; }
    .waas-steps { gap: 30px; }
    .stats { gap: 28px; }
}

/* Hero scene of /web-jako-sluzba: the commitment as a ring of 24 months laid
   flat, what the payment covers standing around it and the price ticket in
   the middle. The accent arc fills month by month as the hero scrolls away.
   The chips sit on the ring's projected ellipse via cos()/sin(), so they stay
   upright and readable instead of lying in the tilted plane. */
.waas-art { position: absolute; inset: 0; perspective: 1100px; }
.waas-art-plane { position: absolute; left: 50%; top: 52%; width: min(100%, 560px); aspect-ratio: 1; translate: -50% -50%; }
.waas-art-ring { width: 100%; height: 100%; overflow: visible; transform: rotateX(56deg); }
.waas-art-track { stroke: var(--line-strong); stroke-width: 2.4; stroke-dasharray: .9 .1; }
.waas-art-fill { stroke: var(--acc); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: .92; animation: pz-ring-load 1.4s var(--ease) .5s both; }
.waas-art-inner { stroke: var(--line); stroke-width: .3; fill: color-mix(in srgb, var(--acc) 5%, transparent); }
.waas-art-tick { stroke: var(--ink-3); stroke-width: .35; }
.waas-art-tick.is-major { stroke: var(--acc); stroke-width: .6; }

.waas-art-chip {
    --a: calc(var(--i) / var(--n) * 360deg - 120deg);
    position: absolute;
    left: calc(50% + cos(var(--a)) * 46%);
    top: calc(50% + sin(var(--a)) * 46% * .56);
    translate: -50% -50%;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel);
    box-shadow: 0 14px 30px var(--shadow);
    white-space: nowrap;
    font: 10px var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.waas-art-chip:first-of-type { border-color: var(--acc); color: var(--acc); }

.waas-art-ticket { left: 50%; top: 52%; translate: -50% -50%; }
.waas-art .art-coordinate i { font-style: normal; color: var(--acc); }

@keyframes pz-ring-load { from { stroke-dashoffset: 1; } }
@keyframes pz-ring-fill { to { stroke-dashoffset: 0; } }
@keyframes pz-waas-plane { to { transform: translateY(60px); } }

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .waas-art-fill { animation: pz-ring-load 1.4s var(--ease) .5s both, pz-ring-fill linear forwards; animation-timeline: auto, --hero-scene; animation-range: normal, exit 0% exit 90%; }
        .waas-art-plane { animation: pz-waas-plane linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .waas-art-fill { animation: none; }
}

@media (max-width: 42rem) {
    .waas-art-plane { width: 100%; top: 50%; }
    .waas-art-chip { padding: 5px 8px; font-size: 10px; letter-spacing: .04em; }
    .waas-art-ticket { top: 50%; }
}

/* ============================================================
   Cost comparison (Propočet)
   ============================================================ */
.compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: clamp(26px, 4vw, 64px);
    margin-top: clamp(26px, 3.4vw, 46px);
    align-items: start;
}

.compare-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 34px);
}

.compare-lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.6;
    max-width: 44ch;
}

.compare-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.compare-slider-head output {
    color: var(--ink);
    font-size: 0.9375rem;
    letter-spacing: .04em;
}

.compare-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.65625rem;
    color: var(--ink-3);
}

/* The native track is replaced so it reads as part of the same system as the
   badges: a 2px rule and a square accent thumb. */
.compare input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    /* The thumb stays small, but the drag target is the whole control box, so
       it carries the same --tap floor as every other control. */
    height: var(--tap);
    margin: 3px 0 0;
    cursor: grab;
}

.compare input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--line-strong);
}

.compare input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 18px;
    margin-top: -8px;
    background: var(--acc);
    border: 0;
    border-radius: 0;
    transform: skewX(var(--skew));
}

.compare input[type=range]::-moz-range-track {
    height: 2px;
    background: var(--line-strong);
}

.compare input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: var(--acc);
    border: 0;
    border-radius: 0;
}

.compare-inputs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
    margin: 0;
}

.compare-inputs > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.90625rem;
}

.compare-inputs dt {
    color: var(--ink-3);
    margin: 0;
}

.compare-inputs dd {
    margin: 0;
    font-family: var(--mono);
    text-align: right;
}

/* The Czech labels are long; below this the row would set two words per side. */
@media (max-width: 26rem) {
    .compare-inputs > div {
        flex-direction: column;
        gap: 4px;
    }

    .compare-inputs dd { text-align: left; }
}

.compare-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.compare-bar-head span:first-child {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.compare-bar-head strong {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.compare-bar {
    height: 14px;
    background: rgba(233, 229, 219, .1);
    margin-top: 12px;
    overflow: hidden;
}

.compare-bar > span {
    display: block;
    height: 100%;
    background: var(--ink);
    width: var(--w, 0%);
    transition: width .45s var(--ease);
}

.compare-foot {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
    margin-top: 8px;
}

.compare-waas .compare-bar-head span:first-child,
.compare-waas .compare-bar-head strong {
    color: var(--acc);
}

.compare-waas .compare-bar > span {
    background: var(--acc);
}

.compare-verdict {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.compare-verdict h3 {
    font-family: var(--display);
    margin: 10px 0 0;
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    max-width: 34ch;
}

.compare-verdict .section-index {
    white-space: normal;
}

.compare-note {
    margin: 14px 0 0;
    font-size: 0.78125rem;
    color: var(--ink-3);
    line-height: 1.5;
    max-width: 46ch;
}

@media (max-width: 45rem) {
    .compare { gap: 40px; }
    .compare-note { margin-top: 18px; }
}

/* ============================================================
   Services
   ============================================================ */
.service-list {
    display: flex;
    flex-direction: column;
}

.service {
    display: grid;
    grid-template-columns: minmax(0, 54px) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(14px, 2.4vw, 36px);
    padding: clamp(28px, 3.4vw, 48px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background .3s;
}

.service:hover {
    background: var(--bg-alt);
}

.service .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--acc);
}

.service h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -.025em;
}

.service p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.9375rem;
    line-height: 1.55;
}

@media (max-width: 45rem) {
    .service {
        grid-template-columns: minmax(0, 36px) minmax(0, 1fr);
        row-gap: 10px;
    }

    .service p {
        grid-column: 2;
    }
}

/* ============================================================
   References (home preview, /reference and the detail pages)
   ============================================================ */
.project {
    margin-top: clamp(40px, 5vw, 72px);
}

.project + .project {
    margin-top: clamp(72px, 9vw, 128px);
}

/* The phone overlaps the browser's lower-right corner; the padding reserves
   the room it hangs into so it never covers the next block. */
.project-media {
    position: relative;
    padding: 0 clamp(36px, 8vw, 120px) clamp(28px, 4vw, 56px) 0;
}

.project-media figure {
    margin: 0;
}

.project-media img {
    display: block;
    width: 100%;
    height: auto;
}

.project-browser {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel);
    transition: border-color .35s;
}

.project-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font: .625rem var(--mono);
    letter-spacing: .08em;
    color: var(--ink-3);
}

.project-toolbar > span:first-child { display: flex; gap: 5px; }
.project-toolbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }

.project-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(96px, 17vw, 230px);
    border: clamp(4px, .5vw, 7px) solid var(--bg-alt);
    border-radius: clamp(16px, 2vw, 30px);
    outline: 1px solid var(--line-strong);
    overflow: hidden;
    box-shadow: 0 30px 60px var(--shadow);
}

.project-preview-link {
    display: block;
    color: inherit;
}

.project-preview-link:hover .project-browser { border-color: var(--line-strong); }

/* Preview on the home page: who and what on the left, the summary and the two
   ways on (detail, live site) on the right. */
.project-summary {
    margin-top: clamp(28px, 3.4vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
}

.project-client {
    margin: 22px 0 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.project-intro h3 {
    font-family: var(--display);
    margin: 10px 0 0;
    font-size: clamp(1.75rem, 3.6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
    max-width: 20ch;
}

.project-intro h3 a { color: inherit; transition: color .2s; }
.project-intro h3 a:hover { color: var(--acc); }

.project-teaser p {
    margin: 0;
    max-width: 52ch;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.65;
}

.project-actions,
.project-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px clamp(20px, 2.4vw, 32px);
}

.project-actions { margin-top: 24px; }
.project-actions .link-arrow,
.project-cta-actions .link-arrow { margin-top: 0; }

.project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-stack li {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--line);
    padding: 6px 10px;
}

/* One reference so far; the strip turns the empty second slot into an invitation. */
.project-cta {
    margin-top: clamp(48px, 6vw, 88px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: clamp(24px, 3.4vw, 44px);
    border: 1px solid var(--line);
    background: var(--bg-alt);
}

.project-cta p {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.project-cta .btn { min-width: 220px; }

@media (max-width: 45rem) {
    .project-media { padding-right: 15%; }
    .project-phone { width: 26%; }
    .project-toolbar { padding: 9px 12px; font-size: .5625rem; }
    .project-cta .btn,
    .project-actions .btn { width: 100%; }
    .project-cta-actions { width: 100%; }
}

/* Hero scene of the hub and the detail page: the project's own screenshots as
   the home page's layer stack — accent and scene layers behind, the browser on
   top, the phone in front — straightening as the hero scrolls away. */
.showcase { position: absolute; inset: 0; perspective: 1200px; display: grid; align-items: center; }
.showcase-stack { position: relative; width: 100%; aspect-ratio: 16 / 11; transform-style: preserve-3d; transform: rotateX(22deg) rotateY(-18deg) rotateZ(6deg); }
.showcase-layer,
.showcase-browser { position: absolute; inset: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 30px 70px var(--shadow); }
.showcase-layer { display: flex; justify-content: space-between; align-items: end; padding: 20px; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.showcase-layer--back { transform: translate3d(0, 70px, -100px); background: var(--acc); color: var(--on-accent); }
.showcase-layer--middle { transform: translate3d(0, 36px, -50px); background: var(--scene-layer); color: var(--ink); }
.showcase-browser { overflow: hidden; background: var(--panel); }
.showcase-browser img { display: block; width: 100%; height: calc(100% - 37px); object-fit: cover; object-position: top; }

.showcase-phone {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 6%;
    width: 22%;
    margin: 0;
    border: 5px solid var(--bg-alt);
    border-radius: 22px;
    outline: 1px solid var(--line-strong);
    overflow: hidden;
    box-shadow: 0 30px 60px var(--shadow);
    rotate: 5deg;
}
.showcase-phone img { display: block; width: 100%; height: auto; }

.showcase-ticket { top: auto; bottom: 4%; }

@keyframes pz-showcase {
    from { transform: rotateX(22deg) rotateY(-18deg) rotateZ(6deg); }
    to { transform: translateY(60px) rotateX(4deg) rotateY(4deg) rotateZ(-2deg); }
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .showcase-stack { animation: pz-showcase linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
    }
}

/* Hub: one case per row, screenshot beside the story; the whole row is the
   link. The list ends on a dashed, empty slot that invites the next one. */
.case-list { display: grid; gap: clamp(48px, 6vw, 96px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }

.case {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    position: relative;
}
.case-link { color: inherit; transition: color .35s; }
.case-link::after { content: ""; position: absolute; inset: -12px; border-radius: 12px; }
.case-link:focus-visible { outline: none; }
.case-link:focus-visible::after { outline: 3px solid var(--acc-ink); outline-offset: 3px; }
.case:hover .project-browser { border-color: var(--line-strong); }
.case:hover .case-link { color: var(--acc); }

.case-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.case-num { font: 800 clamp(3.5rem, 6vw, 5.25rem)/.85 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--acc); }
.case-body h2 { margin: 0; font: 700 clamp(2rem, 4vw, 3.5rem)/1 var(--display); letter-spacing: -.045em; transition: color .35s; }
.case-body > p:not(.area-card-meta) { margin: 0; max-width: 46ch; color: var(--ink-2); line-height: 1.65; }
.case-body .link-arrow { align-self: flex-start; margin-top: 4px; }

.case-next {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px clamp(24px, 4vw, 56px);
    padding: clamp(24px, 3.4vw, 44px);
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
}
.case-next .case-num { -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 24%, transparent); }
.case-next h2 { margin: 0 0 8px; font: 600 clamp(1.5rem, 3vw, 2.4rem)/1.05 var(--display); letter-spacing: -.03em; }
.case-next p { margin: 0; max-width: 52ch; color: var(--ink-2); line-height: 1.6; }
.case-next .btn { min-width: 220px; }

/* Detail: the story's labels sit above each paragraph; the live band closes
   the page with the one action that matters, the real site. */
.project-intro-grid { margin-top: clamp(32px, 4vw, 56px); }
.area-story-label { margin: 0 0 10px; font: 500 .6875rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.area-story .area-story-lead + .area-story-label,
.area-story p + .area-story-label { margin-top: 8px; }

.project-stack { margin-top: clamp(28px, 3.4vw, 44px); }

.live-band { display: grid; justify-items: center; gap: 24px; text-align: center; }
.live-band > .section-index { display: flex; align-items: center; gap: 12px; }
.live-band > .section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.live-band > h2 { margin: 0; max-width: 14ch; font: 500 clamp(2.6rem, 6vw, 6rem)/1 var(--display); letter-spacing: -.055em; }
.live-band > p { margin: 0; max-width: 48ch; color: var(--ink-2); line-height: 1.65; }
.live-band .area-pricing-actions { justify-content: center; }
.live-band .area-siblings { width: min(100%, 36rem); margin: 24px 0 0; text-align: left; }
.live-band-back { margin-top: 12px; }

@media (max-width: 60rem) {
    .case { grid-template-columns: minmax(0, 1fr); }
    .case-next { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 42rem) {
    .showcase-layer { padding: 12px; font-size: 10px; }
    .showcase-layer--back { transform: translate3d(0, 40px, -60px); }
    .showcase-layer--middle { transform: translate3d(0, 20px, -30px); }
    .showcase-browser img { height: calc(100% - 30px); }
    .showcase-phone { width: 24%; border-width: 3px; border-radius: 14px; }
    .case-next .btn { width: 100%; }
}

/* ============================================================
   Pricing
   ============================================================ */
#cenik { border-radius: 18px; margin: 0 12px; }
@media (max-width: 42rem) { #cenik { margin-inline: 0; border-radius: 0; } }

.pricing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.pricing-bar p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 52ch;
}

.pricing-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pricing-save {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.segmented {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.segmented button {
    border: 0;
    cursor: pointer;
    min-height: var(--tap);
    padding: 0 16px;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: transparent;
    color: var(--ink);
    transition: background .2s, color .2s;
}

.segmented button.is-active {
    background: var(--ink);
    color: var(--light);
}

/* The table is wider than a phone; the row labels stay put while it scrolls. */
.plan-scroll {
    margin-top: clamp(26px, 3.4vw, 44px);
    overflow-x: auto;
    container-type: inline-size;
}

.plan-scroll:focus-visible {
    outline: 2px solid var(--acc-ink);
    outline-offset: 3px;
}

.plan-table {
    width: 100%;
    min-width: 41.25rem;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.90625rem;
}

.plan-table thead th:first-child {
    width: 28%;
}

.plan-table thead th {
    width: 24%;
    vertical-align: bottom;
    padding: 0 16px 20px;
    border-bottom: 2px solid var(--ink);
    font-weight: 400;
}

.plan-table thead th:first-child {
    padding-left: 0;
}

.plan-table thead th:last-child {
    padding-right: 0;
}

.plan-table thead th.is-featured {
    position: relative;
    padding: max(34px, 2.6vw) 16px 20px;
}

.plan-bill {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* The dark column — and, on a phone, the dark card — keeps the page's own ink,
   so it re-points the tokens its contents read rather than restating every
   colour. Specificity carries it over `.plan-card`'s own light background. */
.plan-table .is-featured,
.plan-card.is-featured {
    background: #14151A;
    color: var(--light);
    --ink: #F0F0E6;
    --ink-2: #C4C8BA;
    --ink-3: #959D8D;
    --acc-ink: var(--acc);
    --line: rgba(233, 229, 219, .14);
    --line-strong: rgba(233, 229, 219, .42);
    --hover-surface: rgba(233, 229, 219, .08);
}

.plan-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--acc);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    padding: 5px 10px;
    font-weight: 500;
}

.plan-name {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.plan-price {
    display: block;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin-top: 8px;
}

.plan-table thead th.is-featured .plan-price,
.plan-card.is-featured .plan-price {
    color: var(--acc);
}

.plan-unit {
    display: block;
    font-family: var(--mono);
    font-size: 0.65625rem;
    color: var(--ink-3);
}

.plan-table tbody th {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    color: var(--light-ink);
}

.plan-cell {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.84375rem;
    color: var(--ink-2);
    vertical-align: top;
}

.plan-table td:last-child {
    padding-right: 0;
}

.plan-table td.is-featured:last-child {
    padding-right: 16px;
}

.plan-cell.is-featured {
    color: var(--acc-ink);
}

/* "Not included" must not read as an accent highlight in the featured column. */
.plan-mark--no {
    color: var(--ink-3);
}

/* The summary is a sentence, not a value — it reads as body copy. */
.plan-cell--text {
    font-family: var(--sans);
    font-size: 0.875rem;
    line-height: 1.55;
}

.plan-cell--text.is-featured {
    color: var(--ink-2);
}

.plan-row-cta td {
    padding: 24px 16px 0;
    vertical-align: top;
}

.plan-row-cta td:first-child {
    padding-left: 0;
}

.plan-row-cta td.is-featured {
    padding-bottom: 24px;
}

.plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    text-align: center;
    border: 1px solid var(--line-strong);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background .2s, border-color .2s, color .2s;
}

.plan-cta:hover {
    border-color: var(--ink);
    background: var(--hover-surface);
    color: var(--ink);
}

.plan-cta--primary {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-accent);
    font-weight: 500;
}

.plan-cta--primary:hover {
    background: var(--light);
    border-color: var(--light);
    color: var(--on-accent);
}

/* Below the table's own min-width it scrolls sideways, so the row labels pin to
   the left edge — otherwise the right-hand plans are columns of bare ticks. The
   condition is the scroll port, not the viewport, and the rule stays out of the
   wide layout, where the divider would be one vertical line the design lacks. */
@container (max-width: 41.25rem) {
    .plan-table thead th:first-child,
    .plan-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--light);
        border-right: 1px solid var(--light-line);
    }

    .plan-table thead th:first-child {
        padding-right: 16px;
    }
}

/* The table needs 660px before it starts scrolling sideways, and a phone gives
   it under 400 — so the plan the badge points at is the one that ends up off
   screen. Below 45rem the same rows stack into a card each: the price sits at
   the top where the eye lands, every row carries its own label, and the CTA is
   at the end of the card people just read instead of in a shared row. */
.plan-cards {
    display: none;
}

@media (max-width: 45rem) {
    .plan-scroll {
        display: none;
    }

    /* The house hairline grid: 1px gaps over the rule colour draw the lines. */
    .plan-cards {
        display: grid;
        gap: 1px;
        margin: clamp(26px, 3.4vw, 44px) 0 0;
        padding: 0;
        list-style: none;
        background: var(--line);
        border: 1px solid var(--line);
    }

    .plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Grid items default to min-content, which at large text sizes pushes
           the card wider than the screen instead of rewrapping. */
        min-width: 0;
        background: var(--light);
        padding: 24px clamp(16px, 5vw, 24px) 26px;
    }

    /* The badge sits in the corner, so the card it marks opens lower. */
    .plan-card.is-featured {
        padding-top: 42px;
    }

    .plan-card-price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 4px 0 6px;
    }

    .plan-card .plan-price {
        font-size: clamp(2rem, 8.5vw, 2.75rem);
        margin-top: 0;
    }

    .plan-card .plan-unit {
        font-size: 0.75rem;
        color: var(--ink-2);
    }

    .plan-card-summary {
        margin: 14px 0 0;
        font-size: 0.9375rem;
        line-height: 1.55;
        color: var(--ink-2);
    }

    .plan-card-list {
        width: 100%;
        margin: 18px 0 0;
        border-top: 1px solid var(--line);
    }

    /* Label and answer on one line, so the card reads as its own small table —
       until they no longer fit side by side, at enlarged text sizes, and the
       answer drops to its own line rather than widening the card. */
    .plan-card-list > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 2px 18px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
    }

    /* `main` breaks words anywhere, which here lets the flex row shrink a label
       past its own min-content and split "Podpora" across two lines.
       `break-word` keeps the min-content intact and only breaks a word that
       genuinely cannot fit. */
    .plan-card-list dt,
    .plan-card-list dd {
        overflow-wrap: break-word;
        line-height: 1.4;
    }

    .plan-card-list dt {
        font-size: 0.875rem;
    }

    .plan-card-list dd {
        margin: 0;
        margin-left: auto;
        text-align: right;
        font-family: var(--mono);
        font-size: 0.8125rem;
        color: var(--ink-2);
    }

    .plan-card.is-featured .plan-card-list dd {
        color: var(--acc-ink);
    }

    /* The card is the button's margin: it stays clear of the screen edges. */
    .plan-card .plan-cta {
        width: 100%;
        margin-top: 22px;
    }
}

/* ============================================================
   Process
   ============================================================ */
.process-grid {
    background: transparent;
    gap: 24px;
    margin-top: clamp(22px, 3vw, 40px);
}

.process-card { border-top: 1px solid var(--line-strong);
    background: var(--bg);
    padding: clamp(22px, 2.4vw, 32px) 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 230px;
}

.process-card .num {
    font-family: var(--display);
    font-size: 4.75rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 229, 219, .24);
}

.process-card:first-child .num {
    -webkit-text-stroke-color: var(--acc);
}

.process-card h3 {
    font-family: var(--display);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.process-card p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.90625rem;
    line-height: 1.55;
}

/* min-height reserves a row of empty space under every card once they stack,
   and the outlined ordinal is half the width of the card it heads. */
@media (max-width: 45rem) {
    .process-grid { gap: 30px; }
    .process-card { min-height: 0; padding-block: 18px 0; }
    .process-card .num { font-size: 3.4rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
#faq .shell { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7%; align-items: start; }
#faq .section-head { border: 0; flex-direction: column; align-items: flex-start; gap: 24px; position: sticky; top: calc(var(--header-h) + 40px); }
#faq .section-head h2 { line-height: 1.08; }
@media (max-width: 60rem) {
    #faq .shell { grid-template-columns: 1fr; gap: 30px; }
    #faq .section-head { position: static; }
}
.faq-list {
    max-width: 1000px;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: clamp(19px, 2.2vw, 26px) 0;
    display: grid;
    grid-template-columns: minmax(0, 54px) minmax(0, 1fr) 26px;
    gap: clamp(10px, 2vw, 24px);
    align-items: baseline;
    font: inherit;
    color: var(--ink);
}

.faq-num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
}

.faq-q .faq-text {
    font-family: var(--display);
    font-size: clamp(1.0625rem, 1.8vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.faq-sign {
    font-family: var(--mono);
    font-size: 1.0625rem;
    color: var(--acc);
    justify-self: end;
    transition: transform .3s;
}

.faq-item.is-open .faq-sign {
    transform: rotate(45deg);
}

/* 0fr -> 1fr gives a height transition without measuring anything. */
.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s var(--ease);
}

.faq-item.is-open .faq-body {
    grid-template-rows: 1fr;
}

/* A collapsed row is still 1fr-of-nothing rather than `display:none`, so
   without this the answers stay in the accessibility tree and in the tab
   order while invisible. `visibility` is delayed on close so the height
   transition still plays out, and applied immediately on open. */
.faq-body > div {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s .38s;
}

.faq-item.is-open .faq-body > div {
    visibility: visible;
    transition: visibility 0s;
}

.faq-body p {
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    padding-left: clamp(0px, 5vw, 78px);
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.65;
    max-width: 68ch;
}

@media (max-width: 45rem) {
    .faq-q {
        grid-template-columns: minmax(0, 32px) minmax(0, 1fr) 26px;
    }
}

/* Under ~385px the ordinal column costs the question a word on every line. */
@media (max-width: 24rem) {
    .faq-q {
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .faq-num { display: none; }
    .faq-body p { padding-left: 0; }
}

/* ============================================================
   Contact
   ============================================================ */
#kontakt { background: var(--bg-alt); border-top: 1px solid var(--line); }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: clamp(32px, 4.5vw, 80px);
}

.contact-col {
    min-width: 0;
}

.contact-col h2 {
    font-family: var(--display);
    margin: 18px 0 0;
    font-size: clamp(2rem, 5vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .9;
    max-width: 14ch;
}

.contact-lede {
    margin: 22px 0 0;
    color: var(--ink-2);
    font-size: clamp(0.96875rem, 1.3vw, 1.125rem);
    line-height: 1.6;
    max-width: 42ch;
}

.contact-list {
    margin: clamp(28px, 3.6vw, 48px) 0 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--tap);
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.contact-row a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: inherit;
    /* underlined so it doesn't rely on position alone to read as a link */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
    transition: color .2s, text-decoration-color .2s;
}

.contact-row a:hover {
    color: var(--acc);
    text-decoration-color: currentColor;
}

.contact-row dt {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.contact-row dd {
    min-width: 0;
    font-size: 1rem;
    margin: 0;
    text-align: right;
}

/* `address` is the element that marks these up as contact details; its default
   italic is the only thing the row does not want from it. */
.contact-address {
    font-style: normal;
    display: inline;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--panel);
    padding: clamp(22px, 2.8vw, 40px);
    border: 1px solid rgba(233, 229, 219, .16);
    /* The panel is dark, so the native bits the browser draws for itself —
       the select popup, the caret, autofill — should be dark too. */
    color-scheme: dark;
}

.form-title {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field > label {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.field > div:empty { display: none; }

.form :is(input, textarea, select) {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 1rem;
    /* the underline is the field's only boundary, so the hit area is padded
       out to the 48px minimum */
    min-height: var(--tap);
    padding: 10px 0;
    border-radius: 0;
    transition: border-color .2s;
}

/* Safari and Chrome both render a default chevron and bezel on <select>;
   strip them and draw one that matches the rest of the form. */
.form select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--panel);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 10px center, right 4px center;
    background-repeat: no-repeat;
    padding-right: 26px;
}

.form textarea {
    resize: vertical;
}

.form :is(input, textarea, select):focus {
    border-bottom-color: var(--acc);
}

.form :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--acc-soft);
    outline-offset: 4px;
}

.form ::placeholder {
    color: var(--ink-3);
    opacity: 1; /* Firefox dims placeholders by default */
}

.form .invalid {
    border-bottom-color: var(--acc);
}

.form .validation-message {
    color: var(--acc-soft);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: .08em;
}

.btn-submit {
    min-height: var(--tap);
    background: var(--acc);
    color: var(--on-accent);
    border: 0;
    cursor: pointer;
    padding: 16px 22px;
    font-size: 0.96875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background .2s;
}

.btn-submit:hover {
    background: var(--ink);
}

.btn-submit:disabled { opacity: .65; cursor: wait; }
.form-validation { margin: 0; color: var(--acc-soft); line-height: 1.5; }

@media (max-width: 24rem) {
    .contact-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .contact-row dd { text-align: left; }
    .segmented { width: 100%; }
    .segmented button { flex: 1; padding-inline: 10px; }
}

.form-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-note {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--ink-3);
    line-height: 1.5;
}

.form-note a {
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-note a:hover {
    color: var(--acc-soft);
}

.form-error {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--acc-soft);
    background: rgba(255, 86, 54, .1);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.form-error a {
    color: var(--acc-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sent-card {
    background: var(--panel);
    padding: clamp(26px, 3.2vw, 44px);
    border: 1px solid var(--acc);
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 320px;
    justify-content: center;
}

.sent-card h3 {
    font-family: var(--display);
    margin: 0;
    font-size: clamp(1.4375rem, 2.6vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

.sent-card p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.96875rem;
    line-height: 1.6;
    max-width: 40ch;
}

.sent-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acc);
}

.btn-reset {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    min-height: var(--tap);
    padding: 12px 20px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .2s, color .2s;
}

.btn-reset:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* ============================================================
   Footer
   ============================================================ */
.footer-statement { font: 500 clamp(2.4rem, 5.4vw, 5.4rem)/1.15 var(--display); letter-spacing: -.055em; padding: 35px 0 70px; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer-statement a { color: var(--acc); flex-shrink: 0; }
@media (max-width: 42rem) { .footer-statement { padding-block: 16px 42px; } }
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    padding: clamp(28px, 3.4vw, 44px) var(--pad-x);
    /* clear the iOS home indicator */
    padding-bottom: calc(clamp(28px, 3.4vw, 44px) + env(safe-area-inset-bottom));
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.footer-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px clamp(14px, 2.4vw, 28px);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    padding-bottom: clamp(20px, 2.4vw, 32px);
    margin-bottom: clamp(20px, 2.4vw, 32px);
    border-bottom: 1px solid var(--line-soft);
}

.footer-areas-label { text-transform: uppercase; color: var(--ink-2); }

.footer-areas ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(14px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-areas a {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.footer-areas a:hover { color: var(--acc); }

.footer-nap {
    font-family: var(--mono);
    font-style: normal;
    font-size: 0.6875rem;
    letter-spacing: .08em;
    line-height: 1.7;
    color: var(--ink-3);
    margin-top: clamp(18px, 2.4vw, 28px);
    padding-top: clamp(18px, 2.4vw, 28px);
    border-top: 1px solid var(--line-soft);
}

.footer-nap a { text-decoration: underline; text-underline-offset: .2em; }
.footer-nap a:hover { color: var(--acc); }

.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
}

.footer-brand .brand-text {
    font-size: 0.9375rem;
}

.footer-meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 28px);
    flex-wrap: wrap;
}

.footer-meta a {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.footer-meta a:hover {
    color: var(--acc);
}

/* Every link is a 48px target, so the wrapped rows already stand well apart;
   the row gap on top of that reads as a hole in the list. */
@media (max-width: 45rem) {
    .footer-inner { gap: 14px; }
    .footer-meta { gap: 0 20px; }
}

/* ============================================================
   Service areas (/tvorba-webu and the town pages)
   ============================================================ */
/* Sub-pages open with the home hero. The heading is a key phrase rather than
   a slogan, so its lines run longer and the type steps down to fit them. */
.hero--area h1 { font-size: clamp(2.8rem, 5.6vw, 6rem); letter-spacing: -.055em; }
.hero .breadcrumbs { margin-bottom: 22px; }

/* The section padding already spaces the FAQ band. */
.area-local .area-faq { margin-top: 0; }

.breadcrumbs {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--ink-3);
}

/* The links are 14px of text; the padding grows the target to 28px (44px on
   touch) and the negative margin gives the height back, so the trail sits
   exactly where it did. */
.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-block: -7px;
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: .2em;
}

@media (pointer: coarse) {
    .breadcrumbs a { min-height: var(--tap); margin-block: -17px; }
}

.breadcrumbs a:hover { color: var(--acc); }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); }

.area-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin: 0 0 clamp(40px, 5vw, 64px);
}

.area-facts > div {
    background: var(--bg-alt);
    padding: 18px clamp(16px, 2vw, 24px);
}

.area-facts dt {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 7px;
}

.area-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.area-card-meta {
    font-family: var(--mono);
    font-size: 0.65625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}

.area-faq h2,
.area-nearby h2,
.area-siblings h2 {
    font-family: var(--display);
    margin: 0 0 14px;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.area-pricing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
}

/* Native details: the accordion works during static SSR and with scripting
   off, so the town FAQ needs no render mode of its own. */
.area-faq { margin-block: clamp(40px, 5vw, 72px); }

.area-faq-item {
    border-top: 1px solid var(--line);
}

.area-faq-item:last-of-type { border-bottom: 1px solid var(--line); }

.area-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--tap);
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.015em;
}

.area-faq-item summary::-webkit-details-marker { display: none; }

.area-faq-item summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 1.25rem;
    color: var(--acc);
    flex: 0 0 auto;
    transition: transform .25s var(--ease);
}

.area-faq-item[open] summary::after { transform: rotate(45deg); }

.area-faq-item p {
    margin: 0;
    padding: 0 0 22px;
    max-width: 72ch;
    color: var(--ink-2);
    line-height: 1.7;
}

.area-nearby { margin-block: clamp(40px, 5vw, 64px); }

.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-chips li {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: .12em;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    padding: 7px 12px;
}

.area-siblings { margin-block: clamp(40px, 5vw, 64px); }

.area-sibling-list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.area-sibling-list li { border-top: 1px solid var(--line-soft); }
.area-sibling-list li:last-child { border-bottom: 1px solid var(--line-soft); }

.area-sibling-list a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 8px 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

.area-sibling-list a:hover { color: var(--acc); }

/* Hero map: the radar that replaces the monogram on the hub and the towns. It
   lies tilted like the hero's orbital rings and lifts as the hero scrolls away.
   Inside the SVG, px are kilometres, so the type sizes are in map units. */
.area-map { position: absolute; inset: 0; perspective: 1100px; }
.area-map-plane { position: absolute; inset: -4% -8% 6%; transform: rotateX(46deg) rotateZ(-12deg); transform-origin: 50% 55%; }
.area-map-svg { width: 100%; height: 100%; overflow: visible; }
#area-map-dots circle { fill: var(--ink-3); }
.area-map-disc { fill: url(#area-map-dots); stroke: var(--line); stroke-width: .25; }
.area-map-axis { stroke: var(--line); stroke-width: .2; stroke-dasharray: 1 2; }
.area-map-ring { stroke: var(--line); stroke-width: .25; }
.area-map-ring-label { fill: var(--ink-3); font: 2.4px var(--mono); letter-spacing: .1em; }
.area-map-reach { stroke: var(--acc); stroke-opacity: .45; stroke-width: .35; stroke-dasharray: 1.2 1.6; }
.area-map-route { stroke: var(--acc); stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.area-map-halo { stroke: var(--acc); stroke-width: .3; fill: var(--acc); fill-opacity: .12; }
.area-map-pin { fill: var(--ink-3); }
.area-map-town text { fill: var(--ink-3); font: 600 4px var(--display); letter-spacing: -.02em; }
.area-map-town.is-active .area-map-pin, .area-map-home .area-map-pin { fill: var(--acc); }
.area-map-town.is-active text { fill: var(--ink); }
.area-map--town .area-map-town.is-active text { font-size: 6px; }
.area-map-home text { fill: var(--acc); font: 2.6px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* Every town lies south of the base, so the ticket takes the empty north-west
   corner and the coordinate moves across to make room. */
.area-map .art-coordinate { left: auto; right: 4%; }

@keyframes pz-map {
    from { transform: rotateX(46deg) rotateZ(-12deg); }
    to { transform: translateY(70px) rotateX(16deg) rotateZ(10deg); }
}

/* On load the routes draw out from the base, timed with the hero's intro. */
.area-map-route { animation: pz-route 1.4s var(--ease) .5s both; }

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .area-map-plane { animation: pz-map linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .area-map-route { animation: none; }
}

/* Departure board: the towns, one row each, the whole row is the link. A
   container query rather than a media query, so the compact board in the
   town page's side column stacks the same way a phone does. */
.area-board { container-type: inline-size; margin-top: clamp(28px, 3.4vw, 48px); }
.area-board ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.area-board li { border-bottom: 1px solid var(--line); }

.area-board-head,
.area-board-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 9rem 7rem 3rem;
    align-items: center;
    gap: 16px;
}

.area-board-head {
    padding-bottom: 14px;
    font: .6875rem var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.area-board-head span:first-child { grid-column: 2; }

.area-board-row {
    position: relative;
    isolation: isolate;
    padding: clamp(18px, 2.4vw, 30px) 0;
    color: var(--ink);
    transition: color .35s var(--ease), padding .45s var(--ease);
}

/* The accent rises from the row's base on hover, the arrow turns to the link. */
.area-board-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--acc);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s var(--ease);
}

.area-board-num { font: .75rem var(--mono); color: var(--ink-3); }
.area-board-city { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.area-board-city strong { font: 700 clamp(1.75rem, 4.2vw, 3.75rem)/1 var(--display); letter-spacing: -.045em; }
.area-board-meta { font: .6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.area-board-distance { font: 600 clamp(1.25rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: -.03em; color: var(--acc); }
.area-board-drive { font: .875rem var(--mono); color: var(--ink-2); }

.area-board-arrow {
    justify-self: end;
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--acc);
    transition: transform .45s var(--ease), border-color .35s, color .35s;
}

@media (hover: hover) {
    .area-board-row:hover { color: var(--on-accent); padding-inline: clamp(12px, 1.6vw, 22px); }
    .area-board-row:hover::before { transform: scaleY(1); }
    .area-board-row:hover :is(.area-board-num, .area-board-meta, .area-board-distance, .area-board-drive, .area-board-arrow) { color: var(--on-accent); }
    .area-board-row:hover .area-board-arrow { border-color: var(--on-accent); transform: rotate(-45deg); }
}

.area-board--compact .area-board-head,
.area-board--compact .area-board-num { display: none; }
.area-board--compact .area-board-row { grid-template-columns: minmax(0, 1fr) 6rem 4.5rem var(--tap); padding-block: 16px; }
.area-board--compact .area-board-city { gap: 6px; }
.area-board--compact .area-board-city strong { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.area-board--compact .area-board-distance { font-size: 1.25rem; }

@container (max-width: 40rem) {
    .area-board-head, .area-board-num { display: none; }

    .area-board-row,
    .area-board--compact .area-board-row {
        grid-template-columns: minmax(0, 1fr) auto var(--tap);
        grid-template-areas: "city distance arrow" "city drive arrow";
        gap: 4px 16px;
    }

    .area-board-city { grid-area: city; }
    .area-board-distance { grid-area: distance; justify-self: end; align-self: end; }
    .area-board-drive { grid-area: drive; justify-self: end; align-self: start; font-size: .75rem; }
    .area-board-arrow { grid-area: arrow; }
}

.area-board-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    margin: 28px 0 0;
    color: var(--ink-2);
}

.area-board-more .link-arrow { margin: 0; }

/* Scope grid: hairline cells headed by an outlined ordinal, as the process
   cards are. Used for the hub's services and a town's three highlights. */
.scope-grid { margin-top: clamp(28px, 3.4vw, 48px); border: 1px solid var(--line); }

.scope-cell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 15rem;
    padding: clamp(24px, 3vw, 40px);
    background: var(--bg);
    transition: background .35s;
}

.scope-cell:hover { background: var(--hover-surface); }

.scope-num {
    padding-bottom: 28px;
    font: 800 clamp(3.5rem, 6vw, 5.25rem)/.85 var(--display);
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 24%, transparent);
    transition: -webkit-text-stroke-color .35s;
}

.scope-cell:first-child .scope-num,
.scope-cell:hover .scope-num { -webkit-text-stroke-color: var(--acc); }

.scope-cell h2,
.scope-cell h3 {
    margin: 0;
    font: 600 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--display);
    letter-spacing: -.025em;
}

.scope-cell p { margin: 0; max-width: 42ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }

.audience-strip {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 18px 24px;
    margin-top: clamp(40px, 5vw, 64px);
}

.audience-strip ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 22px clamp(20px, 3vw, 44px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.audience-strip li { padding-top: 14px; border-top: 1px solid var(--line-strong); color: var(--ink-3); font-size: .9375rem; line-height: 1.6; }
.audience-strip strong { display: block; margin-bottom: 4px; color: var(--ink); font: 600 1.125rem var(--display); letter-spacing: -.015em; }

.model-grid { gap: 22px; background: transparent; margin-top: clamp(28px, 3.4vw, 48px); }

/* Statement band: one sentence set large and held in place while the points
   that back it scroll past, the way the vision section sets its claim. */
.local-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: start;
}

.local-statement { position: sticky; top: calc(var(--header-h) + 40px); }
.local-statement .section-index { display: flex; align-items: center; gap: 12px; }
.local-statement .section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.local-statement h2 { margin: 26px 0 0; font: 500 clamp(2.6rem, 5vw, 5rem)/1.02 var(--display); letter-spacing: -.055em; }
.local-statement h2 .accent { display: block; }
.local-statement p { margin: 28px 0 0; max-width: 40ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }

.local-points { display: grid; gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }

.local-points li {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 8px 14px;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.local-points .num { grid-row: span 2; padding-top: .35em; font: .75rem var(--mono); color: var(--acc); }
.local-points h3 { margin: 0; font: 600 1.375rem/1.15 var(--display); letter-spacing: -.025em; }
.local-points p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }

/* Town intro: the trip in three big figures beside the town's own story. */
.area-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: start;
}

.area-stats { margin: 0; border-top: 1px solid var(--line); }

.area-stats > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.area-stats dt { font: .6875rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.area-stats dd { margin: 0; font: 700 clamp(3rem, 6.4vw, 6rem)/.9 var(--display); letter-spacing: -.06em; }

/* Short phrases rather than figures (the AI page's facts): same column, a
   size that lets two or three words sit on one line. */
.area-stats--text dd { font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; }

.area-story p { max-width: 60ch; margin: 0 0 22px; color: var(--ink-2); line-height: 1.75; }
.area-story .area-story-lead { margin-bottom: 34px; color: var(--ink); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }

/* Town FAQ split like the statement band: the heading holds while the
   questions scroll; below it the nearby places and the other towns. */
.area-faq--split {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(32px, 7vw, 120px);
    align-items: start;
}

.area-faq--split h2 { position: sticky; top: calc(var(--header-h) + 40px); margin: 0; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.area-faq--split h2 .accent { display: block; }

.area-around {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(32px, 7vw, 120px);
    margin-top: clamp(56px, 7vw, 104px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--line);
}

.area-around .area-nearby,
.area-around .area-siblings { margin: 0; }
.area-around .area-board { margin-top: 18px; }
.area-around .area-siblings > .link-arrow { margin-top: 24px; }

@media (max-width: 60rem) {
    .hero--area h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
    .local-layout, .area-intro-grid, .area-faq--split, .area-around { grid-template-columns: minmax(0, 1fr); }
    .local-statement, .area-faq--split h2 { position: static; }
    .area-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
}

@media (max-width: 45rem) {
    .audience-strip { grid-template-columns: minmax(0, 1fr); }
    .scope-cell { min-height: 0; }
    .scope-num { font-size: 3.25rem; padding-bottom: 12px; }
    .model-grid { gap: 26px; }

    /* Three columns of 6rem figures do not fit a phone; each figure gets a
       row with its label beside it instead. */
    .area-stats { grid-template-columns: minmax(0, 1fr); }
    .area-stats > div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; }
    .area-stats dt { text-align: right; max-width: 14ch; line-height: 1.5; }
    .area-stats dd { font-size: clamp(2.4rem, 11vw, 3.25rem); }

    /* Phrases need the full width; the label goes back above them. */
    .area-stats--text > div { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
    .area-stats--text dt { text-align: left; max-width: none; }
    .area-stats--text dd { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
}

/* Same breakpoint as the hero's single-column layout. */
@media (max-width: 42rem) {
    .hero--area h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
    .area-map-plane { inset: -6% -14% 0; }
    /* The map is ~2.3px a kilometre here: the ring captions would set at 5px,
       so they go, and the names that stay are scaled up to read. */
    .area-map-ring-label { display: none; }
    .area-map-town text { font-size: 5.5px; }
    .area-map--town .area-map-town.is-active text { font-size: 7px; }
    .area-map-home text { font-size: 4px; }
}


/* ============================================================
   AI agents (/ai-agenti)
   ------------------------------------------------------------
   The page reuses the service-area bands (.area-intro-grid,
   .scope-grid, .local-layout, .area-faq--split); this block holds
   its hero scene, the rollout track and the price band.
   ============================================================ */
/* Hero scene: documents in on the left, the agent in the middle, the work
   out on the right sorted by rollout step. The wires are stretched to the
   box, so their stroke stays a hairline whatever the aspect ratio. */
.agent-art { position: absolute; inset: 4% 0 8%; }
.agent-art ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.agent-art-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agent-art-wires path { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: pz-route 1.2s var(--ease) .5s both; }
.agent-art-wires path:nth-child(n+4) { stroke: var(--acc); stroke-opacity: .6; animation-delay: .9s; }

.agent-art-doc {
    position: absolute;
    left: 0;
    width: 30%;
    display: grid;
    gap: 5px;
    padding: 12px 14px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--panel);
    box-shadow: 0 20px 40px var(--shadow);
    translate: 0 -50%;
}
.agent-art-doc:nth-child(1) { top: 22%; rotate: -3deg; }
.agent-art-doc:nth-child(2) { top: 42%; left: 4%; rotate: 2deg; }
.agent-art-doc:nth-child(3) { top: 62%; rotate: -1deg; }
.agent-art-kind { font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.agent-art-doc strong { font: 600 clamp(12px, 1vw, 15px)/1.2 var(--display); letter-spacing: -.01em; }
.agent-art-doc i { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.agent-art-doc i:last-child { width: 60%; }

.agent-art-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(96px, 12vw, 168px);
    aspect-ratio: 1;
    translate: -50% -50%;
    display: grid;
    place-items: center;
}
.agent-art-orb {
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--acc) 35%, var(--ink)) 0, var(--acc) 34%, var(--acc-shade) 66%, var(--scene-glow) 100%);
    box-shadow: 0 0 60px color-mix(in srgb, var(--acc) 35%, transparent), inset -10px -14px 24px #0006;
}
.agent-art-orbit {
    position: absolute;
    inset: -8%;
    border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(-20deg);
}
.agent-art-orbit::after { content: ""; position: absolute; left: 12%; top: 16%; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 16px var(--acc); }
.agent-art-core-label { position: absolute; top: calc(100% + 10px); white-space: nowrap; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }

.agent-art-out {
    position: absolute;
    left: 68%;
    right: 0;
    display: grid;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-alt);
    translate: 0 -50%;
    font: 600 clamp(12px, .95vw, 14px)/1.2 var(--display);
    animation: pz-out .7s var(--ease) both;
}
.agent-art-out--1 { top: 62%; animation-delay: 1.1s; }
.agent-art-out--2 { top: 74%; animation-delay: 1.25s; }
.agent-art-out--3 { top: 86%; animation-delay: 1.4s; }
.agent-art-out em { justify-self: start; padding: 3px 7px; font: 10px var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-2); }
.agent-art-out--2 em { border-color: var(--acc); color: var(--acc); }
.agent-art-out--3 em { border-color: var(--acc); background: var(--acc); color: var(--on-accent); }

/* The outputs fill the lower right, so the caption takes the empty top right. */
.agent-art .art-caption { top: 0; bottom: auto; }

@keyframes pz-out { from { opacity: 0; transform: translateX(-18px); } }
@keyframes pz-agent-in {
    to { transform: translateX(45%) scale(.7); opacity: .15; }
}
@keyframes pz-agent-orbit {
    from { transform: rotateX(68deg) rotateZ(-20deg); }
    to { transform: rotateX(40deg) rotateZ(200deg); }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .agent-art-inputs { animation: pz-agent-in linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
        .agent-art-orbit { animation: pz-agent-orbit linear both; animation-timeline: --hero-scene; animation-range: exit 0% exit 100%; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .agent-art-wires path, .agent-art-out { animation: none; }
}

/* Rollout: three steps on one track. The accent line draws along the track as
   the list scrolls in; without scroll timelines it is simply drawn. */
.rollout {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
    margin: 0;
    padding: 36px 0 0;
    list-style: none;
    view-timeline-name: --rollout;
}
.rollout::before,
.rollout::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line-strong); }
.rollout::after { height: 2px; top: 5.5px; background: var(--acc); transform-origin: left; }

.rollout-step { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rollout-node { position: absolute; left: 0; top: -36px; width: 13px; height: 13px; border: 2px solid var(--acc); border-radius: 50%; background: var(--bg); }
.rollout-step:first-child .rollout-node { background: var(--acc); }
.rollout-step h3 { margin: 4px 0 0; font: 700 clamp(1.6rem, 2.6vw, 2.25rem)/1.02 var(--display); letter-spacing: -.035em; }
.rollout-step > p { margin: 0; max-width: 42ch; color: var(--ink-2); font-size: .96875rem; line-height: 1.6; }
.rollout-step .num-list { margin-top: 0; }

.rollout-meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; font: .6875rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rollout-meter-bar { display: flex; gap: 4px; }
/* Filled versus outlined, not only lime versus grey, so the level reads
   without telling the colours apart; the outline clears 3:1 on its band. */
.rollout-meter-bar i { width: 28px; height: 8px; border: 1px solid var(--line-strong); border-radius: 4px; }
.rollout-meter-bar i.is-on { border-color: var(--acc); background: var(--acc); }

@keyframes pz-track { from { transform: scaleX(0); } }
@keyframes pz-track-y { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .rollout::after { animation: pz-track linear both; animation-timeline: --rollout; animation-range: entry 10% cover 55%; }
    }
}

/* Price band: the one accent-filled surface on the page. The button and the
   focus ring invert so they still read against the lime. */
.price-band {
    --acc-ink: var(--on-accent);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 22px clamp(28px, 5vw, 72px);
    align-items: end;
    margin-top: clamp(48px, 6vw, 96px);
    padding: clamp(28px, 4.4vw, 64px);
    border-radius: 12px;
    background: var(--acc);
    color: var(--on-accent);
}
.price-band h2 { grid-row: span 2; align-self: start; margin: 0; font: 600 clamp(2rem, 4.4vw, 4rem)/1 var(--display); letter-spacing: -.05em; }
.price-band p { margin: 0; font-size: 1rem; line-height: 1.6; }
.price-band .btn { justify-self: start; min-width: 220px; background: var(--on-accent); color: var(--acc); }
.price-band .btn:hover { background: var(--bg-alt); color: var(--acc); }

@media (max-width: 60rem) {
    .rollout { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 0 0 0 40px; }
    .rollout::before, .rollout::after { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .rollout::after { left: 5.5px; width: 2px; transform-origin: top; }
    .rollout-node { left: -40px; top: 2px; }
    .rollout-meter { justify-content: flex-start; }
    .price-band { grid-template-columns: minmax(0, 1fr); }
    .price-band h2 { grid-row: auto; }
}

/* Vertical track: it fills downwards rather than across. */
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry 5% cover 20%) {
        .rollout::after { animation-name: pz-track-y; animation-range: entry 10% cover 70%; }
    }
}

@media (max-width: 42rem) {
    .agent-art { inset: 0; }
    .agent-art-doc { width: 34%; padding: 8px 10px 10px; }
    .agent-art-doc i { display: none; }
    /* Three stacked cards do not fit the phone's 320px scene: each drops its
       status pill and keeps the step as a left rule instead, and wraps to two
       lines rather than truncating. */
    .agent-art-out { left: 60%; display: block; padding: 5px 8px; border-left: 3px solid var(--line-strong); font-size: 11px; line-height: 1.15; }
    .agent-art-out em { display: none; }
    .agent-art-out--1 { top: 54%; }
    .agent-art-out--2 { top: 70%; border-left-color: var(--acc-shade); }
    .agent-art-out--3 { top: 86%; border-left-color: var(--acc); }
    .agent-art .art-caption { display: none; }
    .agent-art-core-label { font-size: 10px; }
    .price-band .btn { width: 100%; }
}


/* ============================================================
   Phone legibility floor
   ------------------------------------------------------------
   The mono labels are set at 10.5px, a hair under the 11px a
   phone needs for text that carries meaning. Declared after the
   blocks that size them so it wins without extra specificity.
   ============================================================ */
@media (max-width: 45rem) {
    .tag, .tag-note, .area-card-meta, .area-facts dt, .field > label, .plan-badge { font-size: .6875rem; }
}
/* ============================================================
   Cookie information
   ============================================================ */
.cookie-policy h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.045em;
    margin: 24px 0;
}

.cookie-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.cookie-intro,
.cookie-copy {
    max-width: 75ch;
    line-height: 1.7;
    color: var(--ink-2);
}

.cookie-intro { font-size: 1.125rem; }
.cookie-updated { color: var(--ink-3); font-family: var(--mono); font-size: .75rem; }
.cookie-copy { margin-block: 32px; }
.cookie-copy h2 { font-family: var(--display); color: var(--ink); font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em; }
.cookie-copy a, .cookie-back { text-decoration: underline; text-underline-offset: .2em; }
.cookie-policy .section-head { margin-top: 48px; }

.cookie-inventory {
    margin: 0;
    border: 1px solid var(--line);
    padding: clamp(20px, 3vw, 32px);
    background: var(--panel);
}

.cookie-inventory > div {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(0, 4fr);
    gap: 12px 24px;
    padding-block: 12px;
    line-height: 1.6;
}

.cookie-inventory dt { font-weight: 600; }
.cookie-inventory dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.cookie-inventory code { font-family: var(--mono); }

@media (max-width: 540px) {
    .cookie-inventory > div { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================
   Terms and conditions
   ============================================================ */
.terms h1 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 24px 0;
}

.terms-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.terms a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.terms-party {
    max-width: 75ch;
    border: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(20px, 3vw, 32px);
    color: var(--ink-2);
    line-height: 1.7;
}

.terms-party p { margin: 0; }
.terms-party-label { color: var(--ink); font-weight: 600; }
.terms-party .terms-vat { margin-top: 1em; }

.terms-effective {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
    margin-block: 24px 0;
}

.terms-article {
    max-width: 75ch;
    margin-top: clamp(40px, 6vw, 64px);
}

.terms-article h2,
.terms-contact h2 {
    font-family: var(--display);
    color: var(--ink);
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0 0 20px;
}

.terms-article-num {
    font-family: var(--mono);
    color: var(--acc);
}

.terms-subhead {
    color: var(--ink);
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .06em;
    margin: 32px 0 16px;
}

.terms-clause,
.terms-list li {
    display: grid;
    grid-template-columns: var(--terms-gutter, 3.5rem) minmax(0, 1fr);
    gap: 0 12px;
    color: var(--ink-2);
    line-height: 1.7;
    margin-block: 16px;
}

.terms-num,
.terms-marker {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: .75rem;
    padding-top: .25em;
}

.terms-list {
    --terms-gutter: 2rem;
    list-style: none;
    margin: 16px 0 16px calc(3.5rem + 12px);
    padding: 0;
}

.terms-clause-mail {
    margin: 16px 0 16px calc(3.5rem + 12px);
    font-family: var(--mono);
    font-size: .8125rem;
}

.terms-clause-block {
    margin: 16px 0 16px calc(3.5rem + 12px);
    color: var(--ink-2);
    line-height: 1.7;
}

.terms-clause-block p { margin: 0; }

.terms-contact {
    margin-top: clamp(48px, 7vw, 80px);
}

@media (max-width: 540px) {
    .terms-clause,
    .terms-list li { grid-template-columns: 1fr; gap: 2px; }
    .terms-list { margin-left: 1.25rem; }
    .terms-clause-mail,
    .terms-clause-block { margin-left: 0; }
}

/* ============================================================
   Not found
   ============================================================ */
.not-found h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: .95;
    font-weight: 700;
    letter-spacing: -.045em;
    margin: 16px 0 24px;
}

.not-found .section-index { color: var(--acc); }

.not-found-text {
    max-width: 52ch;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 32px;
}

/* ============================================================
   Blazor error UI
   ============================================================ */
.blazor-error-boundary {
    background: var(--panel);
    padding: 1rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.blazor-error-boundary::after {
    content: "Došlo k neočekávané chybě.";
}