/* /App.razor.rz.scp.css */
/* Skip link — visually hidden until it receives keyboard focus, then it slides
   into the top-left corner. Scoped to App.razor (the only place it is rendered),
   so it stays out of every variant's own CSS. On-theme colors (deep purple + white,
   ≈5.7:1) match the accessible palette; the global :focus-visible ring still applies. */
.skip-link[b-hnny1tm84v] {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1000;                 /* above the sticky variant navs (z-index 100) */
    transform: translateY(-150%);  /* parked off-screen above the viewport */
    padding: 0.6rem 1.1rem;
    background: #7c3aed;
    color: #fff;
    border-radius: 8px;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
}

.skip-link:focus[b-hnny1tm84v] {
    transform: translateY(0);      /* slides into view on focus */
}
/* /Variants/Custom/CustomVariant.razor.rz.scp.css */
/* ============================================================================
   Custom = "I build what doesn't exist yet". Matches design/ mockup id 4a
   (gitignored): a light editorial page (#eeece8) with a red hero underline, a
   captioned problem screenshot, three problem types, a red bridge band into one
   worked example on a dark block (#16151a), then how it works and contact. One
   responsive page hitting the 1440 and 390 marks. Copy comes from ICustomContent.
   ========================================================================== */
.cx[b-j8qg1t5615] {
    --cx-pad-x: clamp(22px, 5vw, 72px);
    --cx-paper: #eeece8;
    --cx-ink: #16151a;
    --cx-muted: #3b3833;
    --cx-muted-2: #4a453d;
    --cx-muted-3: #6d675e;
    --cx-label: #8b8681;
    --cx-red: #c01515;
    --cx-dark: #16151a;
    --cx-dark-ink: #f2efea;
    --cx-dark-lead: #c3bfb8;
    --cx-dark-list: #d5d1cb;
    --cx-dark-label: #8a867f;
    --cx-accent: #ff5147;      /* bright red on the dark block */
    --cx-line: #16151a24;
    --cx-dark-line: #ffffff1f;

    max-width: var(--ed-frame-max);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--cx-paper);
    color: var(--cx-ink);
    font-family: var(--ed-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.cx img[b-j8qg1t5615] { max-width: 100%; }

/* ---------- Top bar ---------- */
.cx__bar[b-j8qg1t5615] { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: clamp(18px, 2vw, 28px) var(--cx-pad-x); border-bottom: 1px solid #16151a1f; flex-wrap: wrap; }
.cx__brand[b-j8qg1t5615] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0.02em; color: var(--cx-ink); text-decoration: none; }
.cx__brand-dot[b-j8qg1t5615] { color: var(--cx-red); }
.cx__menu[b-j8qg1t5615] { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex-wrap: wrap; }
.cx__menu-link[b-j8qg1t5615] { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: #6d675e; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.cx__menu-link:hover[b-j8qg1t5615] { color: var(--cx-ink); }
.cx__menu-link--current[b-j8qg1t5615] { color: var(--cx-ink); border-bottom-color: var(--cx-red); cursor: default; }
.cx__lang[b-j8qg1t5615] { display: flex; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; margin-left: auto; }
.cx__lang-btn[b-j8qg1t5615] { appearance: none; border: none; font: inherit; letter-spacing: inherit; background: none; color: #7d7871; cursor: pointer; padding: 8px 12px; text-transform: uppercase; }
.cx__lang-btn:hover[b-j8qg1t5615] { color: var(--cx-ink); }
.cx__lang-btn--active[b-j8qg1t5615] { background: var(--cx-ink); color: #f6f2ec; cursor: default; }
@media (max-width: 720px) { .cx__menu[b-j8qg1t5615] { order: 3; flex-basis: 100%; gap: 18px; } }

/* ---------- Hero ---------- */
.cx__hero[b-j8qg1t5615] { padding: clamp(56px, 8vw, 96px) var(--cx-pad-x) 0; }
.cx__hero-eyebrow[b-j8qg1t5615] { font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cx-red); padding-bottom: 28px; }
.cx__hero-grid[b-j8qg1t5615] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: 44px; border-bottom: 10px solid var(--cx-red); }
.cx__hero-title[b-j8qg1t5615] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(56px, 10vw, 150px); line-height: 0.86; letter-spacing: -0.03em; max-width: 13ch; overflow-wrap: break-word; }
.cx__hero-sub[b-j8qg1t5615] { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--cx-muted); text-wrap: pretty; padding-bottom: 12px; }

/* ---------- Captions (shared, light + dark) ---------- */
.cx__cap[b-j8qg1t5615] { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(12px, 2vw, 32px); padding: 20px var(--cx-pad-x) 0; }
.cx__cap-label[b-j8qg1t5615] { font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cx-label); }
.cx__cap-text[b-j8qg1t5615] { font-size: 16px; line-height: 1.55; color: var(--cx-muted-2); }
.cx__cap--dark .cx__cap-label[b-j8qg1t5615] { color: var(--cx-dark-label); }
.cx__cap--dark .cx__cap-text[b-j8qg1t5615] { color: #a9a49c; }

/* ---------- Top figure ---------- */
.cx__topfig[b-j8qg1t5615] { margin: 0; padding: 0 0 clamp(56px, 8vw, 96px); }
.cx__topfig img[b-j8qg1t5615] { width: 100%; height: clamp(240px, 32vw, 460px); object-fit: cover; object-position: top center; display: block; }

/* ---------- When it makes sense ---------- */
.cx__when[b-j8qg1t5615] { padding: 0 var(--cx-pad-x) clamp(56px, 8vw, 88px); }
.cx__when-head[b-j8qg1t5615] { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--cx-ink); }
.cx__label[b-j8qg1t5615] { margin: 0; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cx-label); }
.cx__when-caption[b-j8qg1t5615] { font-size: 16px; color: var(--cx-muted-2); }
.cx__when-rows[b-j8qg1t5615] { display: flex; flex-direction: column; }
.cx__when-row[b-j8qg1t5615] { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 3vw, 40px); padding: 38px 0; border-bottom: 1px solid var(--cx-line); align-items: start; }
.cx__when-index[b-j8qg1t5615] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 56px); line-height: 0.8; color: var(--cx-red); }
.cx__when-title[b-j8qg1t5615] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; }
.cx__when-desc[b-j8qg1t5615] { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--cx-muted); padding-top: 6px; }

/* ---------- Red bridge band ---------- */
.cx__bridge[b-j8qg1t5615] { background: var(--cx-red); color: #fffaf8; padding: clamp(40px, 5vw, 56px) var(--cx-pad-x); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cx__bridge-title[b-j8qg1t5615] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; max-width: 22ch; }
.cx__bridge-body[b-j8qg1t5615] { margin: 0; font-size: 18px; line-height: 1.6; color: #ffe4e1; text-wrap: pretty; }

/* ---------- Case study (dark) ---------- */
.cx__case[b-j8qg1t5615] { background: var(--cx-dark); color: var(--cx-dark-ink); padding: clamp(56px, 8vw, 88px) 0 0; }
.cx__case-head[b-j8qg1t5615] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding: 0 var(--cx-pad-x) clamp(40px, 5vw, 56px); align-items: end; }
.cx__case-headtext[b-j8qg1t5615] { display: flex; flex-direction: column; gap: 22px; }
.cx__case-eyebrow[b-j8qg1t5615] { font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cx-accent); }
.cx__case-title[b-j8qg1t5615] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(56px, 7vw, 96px); line-height: 0.9; }
.cx__case-headbody[b-j8qg1t5615] { display: flex; flex-direction: column; gap: 18px; }
.cx__case-intro[b-j8qg1t5615] { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; color: var(--cx-dark-lead); text-wrap: pretty; }
.cx__case-impact[b-j8qg1t5615] { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cx-accent); text-wrap: pretty; }

.cx__bigfig[b-j8qg1t5615] { margin: 0; }
.cx__bigfig img[b-j8qg1t5615] { width: 100%; height: clamp(260px, 36vw, 520px); object-fit: cover; object-position: top center; display: block; }

.cx__case-body[b-j8qg1t5615] { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(28px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) var(--cx-pad-x) clamp(56px, 8vw, 88px); align-items: start; }
.cx__points[b-j8qg1t5615] { margin: 0; padding: 0; list-style: none; }
.cx__points li[b-j8qg1t5615] { font-size: 18px; line-height: 1.55; color: var(--cx-dark-list); padding: 20px 0; border-top: 1px solid var(--cx-dark-line); }
.cx__points li:last-child[b-j8qg1t5615] { border-bottom: 1px solid var(--cx-dark-line); }
.cx__case-side[b-j8qg1t5615] { display: flex; flex-direction: column; gap: 24px; }
.cx__sidefig[b-j8qg1t5615] { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cx__sidefig img[b-j8qg1t5615] { width: 100%; height: 240px; object-fit: cover; object-position: top center; display: block; opacity: 0.92; }
.cx__sidefig figcaption[b-j8qg1t5615] { font-family: var(--ed-font-mono); font-size: 13px; line-height: 1.5; color: var(--cx-dark-label); }
.cx__live[b-j8qg1t5615] { align-self: flex-start; font-size: 18px; color: var(--cx-accent); border-bottom: 1px solid #ff514759; padding-bottom: 4px; }

/* ---------- How it works ---------- */
.cx__how[b-j8qg1t5615] { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(56px, 8vw, 88px) var(--cx-pad-x); border-bottom: 1px solid #16151a1f; align-items: start; }
.cx__how-body[b-j8qg1t5615] { margin: 0; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.55; max-width: 56ch; color: #26241f; text-wrap: pretty; }

/* ---------- Contact ---------- */
.cx__contact[b-j8qg1t5615] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(56px, 8vw, 80px) var(--cx-pad-x) clamp(64px, 9vw, 96px); align-items: start; }
.cx__contact-main[b-j8qg1t5615] { display: flex; flex-direction: column; gap: 28px; }
.cx__contact-title[b-j8qg1t5615] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(48px, 5.6vw, 72px); line-height: 1; }
.cx__contact-desc[b-j8qg1t5615] { margin: 0; font-size: 19px; line-height: 1.6; max-width: 46ch; color: var(--cx-muted); text-wrap: pretty; }
.cx__contact-methods[b-j8qg1t5615] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cx__contact-mail[b-j8qg1t5615] { font-size: clamp(22px, 2.2vw, 26px); color: var(--cx-red); border-bottom: 1px solid #c0151559; overflow-wrap: anywhere; }
.cx__contact-note[b-j8qg1t5615] { font-size: 16px; color: var(--cx-muted-3); }
.cx__quote[b-j8qg1t5615] { margin: 0; display: flex; flex-direction: column; gap: 20px; padding: 36px 0 0; border-top: 6px solid var(--cx-ink); }
.cx__quote-label[b-j8qg1t5615] { font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cx-red); display: flex; align-items: center; gap: 10px; }
.cx__quote-dot[b-j8qg1t5615] { width: 8px; height: 8px; background: var(--cx-red); display: block; flex: none; }
.cx__quote-text[b-j8qg1t5615] { margin: 0; font-size: clamp(20px, 2vw, 23px); line-height: 1.5; color: #26241f; text-wrap: pretty; }
.cx__quote-author[b-j8qg1t5615] { font-weight: 600; font-size: 15px; letter-spacing: 0.06em; color: var(--cx-muted-3); }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
    .cx__hero-grid[b-j8qg1t5615] { grid-template-columns: 1fr; align-items: start; }
    .cx__hero-sub[b-j8qg1t5615] { padding-bottom: 0; }

    .cx__cap[b-j8qg1t5615] { grid-template-columns: 1fr; gap: 8px; }

    .cx__when-row[b-j8qg1t5615] { grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; }
    .cx__when-index[b-j8qg1t5615] { grid-row: 1; }
    .cx__when-title[b-j8qg1t5615] { grid-row: 1; grid-column: 2; }
    .cx__when-desc[b-j8qg1t5615] { grid-column: 2; padding-top: 8px; }

    .cx__bridge[b-j8qg1t5615] { grid-template-columns: 1fr; }
    .cx__case-head[b-j8qg1t5615] { grid-template-columns: 1fr; align-items: start; }
    .cx__case-body[b-j8qg1t5615] { grid-template-columns: 1fr; }
    .cx__how[b-j8qg1t5615] { grid-template-columns: 1fr; }
    .cx__contact[b-j8qg1t5615] { grid-template-columns: 1fr; }
}
/* /Variants/Cv/CvShell.razor.rz.scp.css */
/* CV shell — dark editorial frame matching design/ mockup id 3a (gitignored).
   Colour + spacing tokens are defined here and inherit to every section (CSS custom
   properties cascade through the DOM regardless of scoped-CSS attributes). */
.pf-layout[b-hk0zb0xt74] {
    --cv-pad-x: clamp(22px, 5vw, 72px);
    --cv-bg: #111113;
    --cv-ink: #eceae7;
    --cv-lead: #b9b5ae;
    --cv-list: #c3bfb8;
    --cv-label: #8a867f;
    --cv-tech: #9a958e;
    --cv-accent: #ff5147;      /* bright red on the dark page */
    --cv-line: #ffffff1f;
    --cv-line-2: #ffffff14;

    max-width: var(--ed-frame-max);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--cv-bg);
    color: var(--cv-ink);
    font-family: var(--ed-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
/* /Variants/Cv/Nav.razor.rz.scp.css */
/* CV top bar — wordmark + chip-style language switcher (design/ mockup 3a). */
.pf-nav[b-rxmyu04u7h] { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(18px, 2vw, 28px) var(--cv-pad-x); border-bottom: 1px solid var(--cv-line); }
.pf-nav__brand[b-rxmyu04u7h] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0.02em; color: var(--cv-ink); text-decoration: none; }
.pf-nav__dot[b-rxmyu04u7h] { color: var(--cv-accent); }
.pf-nav__lang[b-rxmyu04u7h] { display: flex; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; }
.pf-nav__lang-btn[b-rxmyu04u7h] { appearance: none; border: none; font: inherit; letter-spacing: inherit; background: none; color: #8a867f; cursor: pointer; padding: 8px 12px; text-transform: uppercase; }
.pf-nav__lang-btn:hover[b-rxmyu04u7h] { color: var(--cv-ink); }
.pf-nav__lang-btn--active[b-rxmyu04u7h] { background: var(--cv-ink); color: var(--cv-bg); cursor: default; }
/* /Variants/Cv/Sections/ContactSection.razor.rz.scp.css */
/* CV contact — a faint full-width band with the "Kontakt" display word and the
   contact methods over a dimmed, desaturated screenshot. */
.cs[b-252ekxuhvk] { position: relative; margin-top: clamp(48px, 6vw, 72px); }
.cs__bg[b-252ekxuhvk] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.3; filter: grayscale(0.7); display: block; }
.cs__inner[b-252ekxuhvk] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding: clamp(56px, 7vw, 96px) var(--cv-pad-x);
    min-height: 420px;
    background: linear-gradient(90deg, #111113 32%, #11111390);
}
.cs__title[b-252ekxuhvk] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(64px, 9vw, 112px); line-height: 0.9; letter-spacing: -0.02em; }
.cs__methods[b-252ekxuhvk] { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cs__mail[b-252ekxuhvk] { font-size: clamp(20px, 2vw, 26px); color: var(--cv-accent); border-bottom: 1px solid #ff514759; overflow-wrap: anywhere; }
.cs__discord[b-252ekxuhvk] { appearance: none; background: none; border: 1px solid #ffffff33; color: var(--cv-ink); font: 400 18px/1 var(--ed-font-body); padding: 16px 20px; cursor: pointer; text-align: left; }
.cs__discord:hover[b-252ekxuhvk] { border-color: var(--cv-accent); color: var(--cv-accent); }
.cs__discord-hint[b-252ekxuhvk] { font-family: var(--ed-font-mono); font-size: 13px; color: var(--cv-label); }
.cs__discord.is-copied ~ .cs__discord-hint[b-252ekxuhvk] { color: var(--cv-accent); }

@media (max-width: 760px) {
    .cs__inner[b-252ekxuhvk] { grid-template-columns: 1fr; align-items: start; }
}
/* /Variants/Cv/Sections/Experience.razor.rz.scp.css */
/* CV experience — label column + company/description. */
.exp[b-cbiq21pee4] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(48px, 6vw, 72px) var(--cv-pad-x);
    border-bottom: 1px solid var(--cv-line);
    align-items: start;
}
.exp__label[b-cbiq21pee4] { font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-label); }
.exp__grid[b-cbiq21pee4] { display: flex; flex-direction: column; gap: 18px; max-width: 78ch; }
.exp__company[b-cbiq21pee4] { font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
.exp__desc[b-cbiq21pee4] { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--cv-lead); text-wrap: pretty; }

@media (max-width: 760px) {
    .exp[b-cbiq21pee4] { grid-template-columns: 1fr; }
}
/* /Variants/Cv/Sections/Facts.razor.rz.scp.css */
/* CV "Basic facts" — label column + two-up fact rows, then contact line. */
.facts[b-rnvlhe12vt] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(40px, 5vw, 56px) var(--cv-pad-x);
    border-bottom: 1px solid var(--cv-line);
    align-items: start;
}
.facts__label[b-rnvlhe12vt] { margin: 0; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-label); }
.facts__grid[b-rnvlhe12vt] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.facts__row[b-rnvlhe12vt] { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--cv-line-2); }
.facts__row:nth-child(3)[b-rnvlhe12vt], .facts__row:nth-child(4)[b-rnvlhe12vt] { border-bottom: 1px solid var(--cv-line-2); }
.facts__key[b-rnvlhe12vt] { font-size: 16px; color: var(--cv-label); }
.facts__val[b-rnvlhe12vt] { font-size: 18px; font-weight: 500; }
.facts__contact[b-rnvlhe12vt] { grid-column: 1 / -1; display: flex; align-items: baseline; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; padding-top: 26px; }
.facts__mail[b-rnvlhe12vt] { font-size: 22px; color: var(--cv-accent); border-bottom: 1px solid #ff514759; overflow-wrap: anywhere; }
.facts__phone[b-rnvlhe12vt] { font-size: 22px; color: var(--cv-ink); border-bottom: 1px solid #ffffff33; white-space: nowrap; }

@media (max-width: 760px) {
    .facts[b-rnvlhe12vt] { grid-template-columns: 1fr; }
    .facts__grid[b-rnvlhe12vt] { grid-template-columns: 1fr; }
    .facts__row:nth-child(3)[b-rnvlhe12vt] { border-bottom: none; }
}
/* /Variants/Cv/Sections/Hero.razor.rz.scp.css */
/* CV hero — huge two-line name on the left, role + lead on the right. */
.hero[b-l018nznwu8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: end;
    padding: clamp(56px, 8vw, 104px) var(--cv-pad-x) clamp(48px, 6vw, 88px);
    border-bottom: 1px solid var(--cv-line);
}
.hero__name[b-l018nznwu8] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(72px, 9.4vw, 132px); line-height: 0.88; letter-spacing: -0.02em; }
.hero__aside[b-l018nznwu8] { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 20px); padding-bottom: 14px; }
.hero__role[b-l018nznwu8] { font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-accent); }
.hero__desc[b-l018nznwu8] { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--cv-lead); max-width: 48ch; text-wrap: pretty; }

@media (max-width: 760px) {
    .hero[b-l018nznwu8] { grid-template-columns: 1fr; align-items: start; }
}
/* /Variants/Cv/Sections/ProjectsShowcase.razor.rz.scp.css */
/* CV selected work — a featured project with shippable screenshots, then the
   remaining projects with marked spots where a screenshot goes. */
.ps__head[b-oiuf3suplb] { padding: clamp(48px, 6vw, 72px) var(--cv-pad-x) 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ps__label[b-oiuf3suplb] { margin: 0; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-label); }
.ps__caption[b-oiuf3suplb] { font-family: var(--ed-font-mono); font-size: 13px; color: var(--cv-label); }

.ps__list[b-oiuf3suplb] { padding: clamp(24px, 3vw, 40px) var(--cv-pad-x) 0; }

.ps__row[b-oiuf3suplb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    padding: 36px 0 0;
    border-top: 1px solid var(--cv-line);
    align-items: start;
}
.ps__meta[b-oiuf3suplb] { display: flex; flex-direction: column; gap: 12px; }
.ps__name[b-oiuf3suplb] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(28px, 2.8vw, 34px); line-height: 1.05; }
.ps__tech[b-oiuf3suplb] { font-family: var(--ed-font-mono); font-size: 14px; color: var(--cv-tech); }
.ps__body[b-oiuf3suplb] { display: flex; flex-direction: column; gap: 16px; }

.ps__points[b-oiuf3suplb] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.55; color: var(--cv-list); }
.ps__impact[b-oiuf3suplb] { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cv-accent); }
.ps__live[b-oiuf3suplb] { align-self: flex-start; font-size: 16px; color: var(--cv-ink); border-bottom: 1px solid #ffffff40; padding-bottom: 3px; }
.ps__live:hover[b-oiuf3suplb] { color: var(--cv-accent); border-bottom-color: var(--cv-accent); }

/* Featured screenshots */
.ps__shots[b-oiuf3suplb] { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 12px 0 36px; }
.ps__shot[b-oiuf3suplb] { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps__shot img[b-oiuf3suplb] { width: 100%; height: clamp(200px, 24vw, 320px); object-fit: cover; object-position: top center; display: block; opacity: 0.9; }
.ps__shot figcaption[b-oiuf3suplb] { font-family: var(--ed-font-mono); font-size: 13px; line-height: 1.5; color: var(--cv-label); }

/* Marked screenshot spots for the other projects */
.ps__slots[b-oiuf3suplb] { padding: 8px 0 36px; }
.ps__slots--narrow[b-oiuf3suplb] { display: grid; grid-template-columns: repeat(2, minmax(0, 252px)); gap: 16px; border-bottom: 1px solid var(--cv-line); }
.ps__slot[b-oiuf3suplb] { margin: 0; }
.ps__slot-box[b-oiuf3suplb] { border: 1px dashed #ffffff40; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px; height: 200px; }
.ps__slots--narrow .ps__slot-box[b-oiuf3suplb] { height: 300px; padding: 20px; }
.ps__slot-label[b-oiuf3suplb] { font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cv-accent); }
.ps__slot-note[b-oiuf3suplb] { font-family: var(--ed-font-mono); font-size: 13px; color: var(--cv-label); }

@media (max-width: 760px) {
    .ps__row[b-oiuf3suplb] { grid-template-columns: 1fr; gap: 18px; }
    .ps__shots[b-oiuf3suplb] { grid-template-columns: 1fr; gap: 12px; }
    .ps__slots--narrow[b-oiuf3suplb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Variants/Cv/Sections/Stack.razor.rz.scp.css */
/* CV stack — label column + rows of "group / items" (items in mono). */
.stack[b-hibacikrrb] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(48px, 6vw, 72px) var(--cv-pad-x);
    border-bottom: 1px solid var(--cv-line);
    align-items: start;
}
.stack__label[b-hibacikrrb] { font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cv-label); }
.stack__rows[b-hibacikrrb] { display: flex; flex-direction: column; }
.stack__row[b-hibacikrrb] { display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 2vw, 32px); padding: 20px 0; border-top: 1px solid var(--cv-line-2); align-items: baseline; }
.stack__row:last-child[b-hibacikrrb] { border-bottom: 1px solid var(--cv-line-2); }
.stack__group[b-hibacikrrb] { font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; }
.stack__items[b-hibacikrrb] { font-family: var(--ed-font-mono); font-size: 15px; line-height: 1.7; color: #cfcbc4; }
.stack__sep[b-hibacikrrb] { color: var(--cv-tech); }

@media (max-width: 760px) {
    .stack[b-hibacikrrb] { grid-template-columns: 1fr; }
    .stack__row[b-hibacikrrb] { grid-template-columns: 1fr; gap: 6px; }
}
/* /Variants/Default/DefaultVariant.razor.rz.scp.css */
/* ============================================================================
   Default = crossroads. Matches design/ mockup id 2a (gitignored): a light
   editorial page (#f4f1ec) on a dark ground, dark top bar, two-column display
   hero, a 10px saturated-red divider, three full-width numbered path rows, and a
   red closing contact band pushed to the foot. No images — the crossroads routes a
   human, it is not a portfolio. One responsive page hitting the 1440 and 390 marks.
   Copy comes from IDefaultContent. Colours are variant-local; only the font
   families are shared (design-tokens.css).
   ========================================================================== */
.tk[b-tak6bc7p05] {
    --tk-ink: #16151a;
    --tk-paper: #f4f1ec;
    --tk-muted: #3b3833;
    --tk-muted-2: #6d675e;
    --tk-line: #16151a2e;
    --tk-red: #c01515;         /* saturated red on the light page (AA on paper) */
    --tk-red-ink: #fffaf8;     /* text on the red band */
    --tk-pad-x: clamp(22px, 5vw, 72px);

    max-width: var(--ed-frame-max);
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--tk-paper);
    color: var(--tk-ink);
    font-family: var(--ed-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* ---------- Top bar (dark) ---------- */
.tk__bar[b-tak6bc7p05] {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(18px, 2vw, 26px) var(--tk-pad-x);
    background: var(--tk-ink);
    color: var(--tk-paper);
    flex-wrap: wrap;
}
.tk__brand[b-tak6bc7p05] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0.02em; color: var(--tk-paper); text-decoration: none; }
.tk__brand-dot[b-tak6bc7p05] { color: var(--tk-red); }

/* Shared top-level menu (to the site's entry variants, not page sections). */
.tk__menu[b-tak6bc7p05] { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex-wrap: wrap; }
.tk__menu-link[b-tak6bc7p05] { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: #b8b2a8; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.tk__menu-link:hover[b-tak6bc7p05] { color: var(--tk-paper); }
.tk__menu-link--current[b-tak6bc7p05] { color: var(--tk-paper); border-bottom-color: var(--tk-red); cursor: default; }

.tk__lang[b-tak6bc7p05] { display: flex; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; margin-left: auto; }
.tk__lang-btn[b-tak6bc7p05] { appearance: none; border: none; font: inherit; letter-spacing: inherit; background: none; color: #9b958c; cursor: pointer; padding: 8px 12px; text-transform: uppercase; }
.tk__lang-btn:hover[b-tak6bc7p05] { color: var(--tk-paper); }
.tk__lang-btn--active[b-tak6bc7p05] { background: var(--tk-paper); color: var(--tk-ink); cursor: default; }

/* Mobile: keep brand + language on the first row, wrap the menu to its own row. */
@media (max-width: 720px) {
    .tk__menu[b-tak6bc7p05] { order: 3; flex-basis: 100%; gap: 18px; }
}

/* ---------- Main is a flex column so the contact band sits at the foot ---------- */
.tk__main[b-tak6bc7p05] { flex: 1; display: flex; flex-direction: column; }

/* ---------- Hero ---------- */
.tk__hero[b-tak6bc7p05] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(28px, 4vw, 64px);
    align-items: end;
    padding: clamp(48px, 8vw, 104px) var(--tk-pad-x) clamp(36px, 4vw, 56px);
}
.tk__notice[b-tak6bc7p05] {
    grid-column: 1 / -1;
    margin: 0 0 12px; padding: 10px 14px;
    border: 1px solid var(--tk-line);
    color: var(--tk-muted); font-family: var(--ed-font-mono); font-size: 12px; line-height: 1.5;
    max-width: 60ch; overflow-wrap: anywhere;
}
.tk__hero-title[b-tak6bc7p05] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(44px, 6.6vw, 96px); line-height: 0.92; letter-spacing: -0.025em; overflow-wrap: break-word; }
.tk__hero-sub[b-tak6bc7p05] { margin: 0; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: var(--tk-muted); text-wrap: pretty; padding-bottom: 14px; }

/* ---------- Red divider ---------- */
.tk__rule[b-tak6bc7p05] { height: 10px; background: var(--tk-red); }

/* ---------- Paths ---------- */
.tk__paths-head[b-tak6bc7p05] { padding: clamp(28px, 4vw, 44px) var(--tk-pad-x) 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tk__label[b-tak6bc7p05] { font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tk-red); }
.tk__paths-sub[b-tak6bc7p05] { font-size: 15px; color: var(--tk-muted-2); }

.tk__paths-list[b-tak6bc7p05] { padding: clamp(16px, 2vw, 24px) var(--tk-pad-x) 0; display: flex; flex-direction: column; }

.tk__path[b-tak6bc7p05] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 130px;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding: clamp(26px, 3vw, 34px) 0;
    border-top: 1px solid var(--tk-line);
    color: inherit; text-decoration: none;
    transition: background 0.15s ease;
}
.tk__path:last-child[b-tak6bc7p05] { border-bottom: 1px solid var(--tk-line); }
.tk__path:hover[b-tak6bc7p05] { background: #ffffff; }
.tk__path-index[b-tak6bc7p05] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.8; color: var(--tk-red); }
.tk__path-title[b-tak6bc7p05] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 52px); line-height: 0.96; overflow-wrap: break-word; }
.tk__path-desc[b-tak6bc7p05] { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--tk-muted); padding-top: 6px; }
.tk__path-cta[b-tak6bc7p05] { font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tk-red); padding-top: 10px; text-align: right; white-space: nowrap; }
.tk__path-cta[b-tak6bc7p05]::after { content: ' \2192'; }

/* ---------- Closing contact (light, red only as an accent rule — not a red slab) ---------- */
.tk__cta[b-tak6bc7p05] {
    margin-top: auto;
    background: var(--tk-paper); color: var(--tk-ink);
    border-top: 2px solid var(--tk-red);
    padding: clamp(32px, 4vw, 48px) var(--tk-pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(20px, 3vw, 48px);
    align-items: end;
}
.tk__cta-title[b-tak6bc7p05] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); line-height: 0.98; max-width: 24ch; color: var(--tk-ink); }
.tk__cta-contact[b-tak6bc7p05] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tk__cta-mail[b-tak6bc7p05] { font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); line-height: 1; color: var(--tk-red); text-decoration: none; border-bottom: 1px solid #c0151559; overflow-wrap: anywhere; }
.tk__cta-mail:hover[b-tak6bc7p05] { color: var(--tk-red); border-bottom-color: var(--tk-red); }
.tk__cta-note[b-tak6bc7p05] { font-size: 15px; color: var(--tk-muted-2); }

/* ---------- Mobile: single-column path rows, stacked hero and band ---------- */
@media (max-width: 820px) {
    .tk__hero[b-tak6bc7p05] { grid-template-columns: 1fr; align-items: start; }
    .tk__hero-sub[b-tak6bc7p05] { padding-bottom: 0; border-left: 2px solid var(--tk-red); padding-left: 16px; }

    .tk__path[b-tak6bc7p05] {
        grid-template-columns: auto 1fr;
        gap: 4px 18px;
        align-items: baseline;
    }
    .tk__path-index[b-tak6bc7p05] { grid-row: 1; }
    .tk__path-title[b-tak6bc7p05] { grid-row: 1; grid-column: 2; }
    .tk__path-desc[b-tak6bc7p05] { grid-column: 2; padding-top: 10px; }
    .tk__path-cta[b-tak6bc7p05] { grid-column: 2; text-align: left; padding-top: 12px; }

    .tk__cta[b-tak6bc7p05] { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Interaction & motion polish (additive; no layout/colour/type change) ---------- */
.tk__brand[b-tak6bc7p05], .tk__lang-btn[b-tak6bc7p05], .tk__cta-mail[b-tak6bc7p05] { transition: color .18s cubic-bezier(.2,.7,.2,1), opacity .18s cubic-bezier(.2,.7,.2,1), border-color .18s cubic-bezier(.2,.7,.2,1); }
.tk__brand:hover[b-tak6bc7p05] { opacity: .74; }
.tk__lang-btn[b-tak6bc7p05] { transition: color .18s cubic-bezier(.2,.7,.2,1), background .18s cubic-bezier(.2,.7,.2,1); }
.tk__lang-btn:active[b-tak6bc7p05] { transform: translateY(1px); }
.tk__path[b-tak6bc7p05] { transition: background .2s cubic-bezier(.2,.7,.2,1); }
.tk__path:active[b-tak6bc7p05] { background: #efece6; }
/* Arrow slides on hover but stays inside the CTA: reserve the travel with padding. */
.tk__path-cta[b-tak6bc7p05] { padding-right: 7px; }
.tk__path-cta[b-tak6bc7p05]::after { display: inline-block; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.tk__path:hover .tk__path-cta[b-tak6bc7p05]::after { transform: translateX(5px); }
.tk__cta-mail:active[b-tak6bc7p05] { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
    .tk__brand[b-tak6bc7p05], .tk__lang-btn[b-tak6bc7p05], .tk__path[b-tak6bc7p05], .tk__path-cta[b-tak6bc7p05]::after, .tk__cta-mail[b-tak6bc7p05] { transition: none; }
}
/* /Variants/It/ItVariant.razor.rz.scp.css */
/* ============================================================================
   It variant — ported from the Claude Design frame "Dla firm" (design/, gitignored).
   A light cream frame on a warm ground, a dark top bar carrying the phone, Source
   Serif 4 display + Public Sans body, one terracotta accent, big type and lots of
   air. Built for a non-technical Polish small-business owner who phones rather than
   writes, so the number is everywhere and pinned to the bottom of the screen on
   phones. One responsive page hitting the 1440 and 390 mockups; copy comes from
   IItContent, contact details from GlobalData.

   Fonts self-hosted from wwwroot/fonts (no CDN). Polish needs latin-ext.

   Contrast (WCAG AA) over the cream #faf7f2:
     ink #1f1c18 ~ 15:1   body #413b33 ~ 10.3:1   muted #6b6459 ~ 5.5:1
     accent #a8461c as text ~ 5.5:1   white on #a8461c ~ 5.9:1
   Over the dark bar #1f1c18: #faf7f2 ~ 16:1   bar-muted #c3bcb0 ~ 9:1
   ========================================================================== */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-serif-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-serif-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/source-serif-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/source-serif-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/public-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/public-sans-400-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/public-sans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/public-sans-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/public-sans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/public-sans-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.it[b-r5xaiu9deg] {
    --paper: #faf7f2;          /* frame surface */
    --paper-2: #f2ede4;        /* alternate band */
    --ground: #e8e3da;         /* warm ground under the hero + contact */
    --ink: #1f1c18;            /* headings, strong text, dark bar */
    --body: #3d382f;           /* body text */
    --muted: #6d675e;          /* labels, meta */
    --accent: #a81010;         /* red — buttons, links, borders (white text ~AA) */
    --accent-hover: #8a0f0f;
    --accent-text: #9c1414;    /* red — eyebrows and small labels on the cream */
    --border: #ddd5c8;
    --bar-fg: #faf7f2;
    --bar-muted: #c3bcb0;
    --it-pad: clamp(22px, 5vw, 72px);
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    max-width: 1440px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.1875rem;      /* 19px base */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.it-wrap[b-r5xaiu9deg] { max-width: 1440px; margin: 0 auto; padding: 0 var(--it-pad); }
.it-main[b-r5xaiu9deg] { flex: 1; }

/* ---------- Top bar (dark) — same construction as the other variants (wordmark +
   menu + language), with /it's own colours; the phone stays for this audience. ---------- */
.it-bar[b-r5xaiu9deg] { background: var(--ink); color: var(--bar-fg); }
.it-bar__inner[b-r5xaiu9deg] {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(18px, 2vw, 26px) var(--it-pad);
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    flex-wrap: wrap;
}
.it-bar__brand[b-r5xaiu9deg] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0.02em; color: var(--bar-fg); text-decoration: none; }
.it-bar__dot[b-r5xaiu9deg] { color: var(--accent-text); }
.it-bar__brand:hover[b-r5xaiu9deg] { color: #fff; }
.it-bar__menu[b-r5xaiu9deg] { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex-wrap: wrap; }
.it-bar__link[b-r5xaiu9deg] { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--bar-muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.it-bar__link:hover[b-r5xaiu9deg] { color: var(--bar-fg); }
.it-bar__link--current[b-r5xaiu9deg] { color: var(--bar-fg); border-bottom-color: var(--accent-text); cursor: default; }
.it-bar__right[b-r5xaiu9deg] { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); margin-left: auto; }
@media (max-width: 760px) { .it-bar__menu[b-r5xaiu9deg] { order: 3; flex-basis: 100%; gap: 18px; } }

.it-lang[b-r5xaiu9deg] { display: flex; gap: 0.5rem; }
.it-lang__btn[b-r5xaiu9deg] { appearance: none; border: none; background: transparent; color: var(--bar-muted); font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; padding: 0.5rem 0.75rem; cursor: pointer; }
.it-lang__btn:hover[b-r5xaiu9deg] { color: var(--bar-fg); }
.it-lang__btn--active[b-r5xaiu9deg] { background: var(--paper); color: var(--ink); cursor: default; }

.it-bar__call[b-r5xaiu9deg] { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--bar-fg); text-decoration: none; white-space: nowrap; }
.it-bar__call:hover .it-bar__call-num[b-r5xaiu9deg] { color: #fff; }
.it-bar__call-label[b-r5xaiu9deg] { font-size: clamp(0.8rem, 1vw, 0.95rem); font-weight: 400; color: var(--bar-muted); }
.it-bar__call-num[b-r5xaiu9deg] { font-size: clamp(1rem, 1.4vw, 1.375rem); font-weight: 700; letter-spacing: 0.01em; }
@media (max-width: 400px) { .it-bar__call-label[b-r5xaiu9deg] { display: none; } }

/* ---------- Shared headings ---------- */
.it-h2[b-r5xaiu9deg] { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.125rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.it-lead[b-r5xaiu9deg] { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.55; color: var(--body); max-width: 60ch; }

/* ---------- 1. Hero ---------- */
.it-hero[b-r5xaiu9deg] { background: var(--ground); padding: clamp(2.75rem, 6vw, 6.5rem) 0 clamp(2.75rem, 5.5vw, 5.5rem); }
.it-hero__grid[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: end; }
.it-hero__lead[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 2rem); }
.it-hero__eyebrow[b-r5xaiu9deg] { margin: 0; font-size: clamp(0.85rem, 1.1vw, 0.9375rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); }
.it-hero__h[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5.6vw, 4.875rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); }
.it-hero__sub[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.5; color: var(--body); text-wrap: pretty; padding-bottom: 0.6rem; }
@media (min-width: 880px) {
    .it-hero__grid[b-r5xaiu9deg] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* ---------- 2. Who does the work ---------- */
.it-about[b-r5xaiu9deg] { background: var(--paper); padding: clamp(3rem, 5.5vw, 5.5rem) 0 clamp(3rem, 6vw, 6rem); border-bottom: 1px solid #221f1a1f; }
.it-about__grid[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr; gap: clamp(2.25rem, 4vw, 5rem); align-items: start; }
.it-about__photo[b-r5xaiu9deg] { margin: 0; }
.it-about__photo-box[b-r5xaiu9deg] { width: 100%; max-width: 420px; aspect-ratio: 420 / 520; background: var(--ground); border: 2px dashed #a8101066; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; padding: clamp(1.25rem, 3vw, 2rem); }
.it-about__photo-label[b-r5xaiu9deg] { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.it-about__photo-note[b-r5xaiu9deg] { font-size: 1.125rem; line-height: 1.45; color: var(--muted); }
.it-about__body[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.5vw, 2.25rem); padding-top: 0.5rem; }
.it-about__eyebrow[b-r5xaiu9deg] { margin: 0; font-size: clamp(0.85rem, 1.1vw, 0.9375rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.it-about__trust[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.85rem, 3.2vw, 2.875rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); max-width: 26ch; text-wrap: pretty; }
.it-about__call[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: 1rem; max-width: 520px; padding-top: 1.25rem; border-top: 3px solid var(--accent); }
.it-about__call-lead[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.375rem); line-height: 1.55; color: var(--body); }
.it-about__call-btn[b-r5xaiu9deg] { align-self: flex-start; background: var(--accent); color: #fffdfa; text-decoration: none; font-weight: 600; font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.15; padding: clamp(1.1rem, 1.8vw, 1.75rem) clamp(1.6rem, 2.8vw, 2.75rem); transition: background 0.15s ease; }
.it-about__call-btn:hover[b-r5xaiu9deg] { background: var(--accent-hover); color: #fffdfa; }
.it-about__call-note[b-r5xaiu9deg] { font-size: 1.125rem; color: var(--muted); }
@media (min-width: 880px) {
    .it-about__grid[b-r5xaiu9deg] { grid-template-columns: 420px minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
}

/* ---------- 3. What I help with — a ledger (have / fix) ---------- */
.it-help[b-r5xaiu9deg] { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.it-ledger[b-r5xaiu9deg] { margin-top: clamp(2rem, 4vw, 3.5rem); }
.it-ledger__head[b-r5xaiu9deg] { display: none; }
.it-ledger__htag[b-r5xaiu9deg] { font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.it-ledger__htag--fix[b-r5xaiu9deg] { color: var(--accent); }

.it-ledger__row[b-r5xaiu9deg] { border-top: 1px solid var(--border); padding: clamp(1.5rem, 2.6vw, 2.125rem) 0; display: flex; flex-direction: column; gap: 1.25rem; }
.it-ledger__row:last-child[b-r5xaiu9deg] { border-bottom: 1px solid var(--border); }
.it-ledger__tag[b-r5xaiu9deg] { display: block; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.6rem; }
.it-ledger__tag--fix[b-r5xaiu9deg] { color: var(--accent); }
.it-ledger__sit[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); line-height: 1.5; color: var(--body); }
.it-ledger__fix[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); line-height: 1.5; font-weight: 600; color: var(--ink); }

/* Build-from-scratch note + catch-all (kept from IItContent; the mockup shows the
   five-row ledger, these carry the /it "from scratch / call and ask" content). */
.it-scratch[b-r5xaiu9deg] { margin-top: clamp(2.5rem, 4vw, 3.5rem); border-left: 4px solid var(--accent); background: var(--paper-2); padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem); }
.it-scratch__h[b-r5xaiu9deg] { margin: 0 0 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; color: var(--ink); }
.it-scratch__body[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.6; color: var(--body); max-width: 62ch; }
.it-catch[b-r5xaiu9deg] { margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; font-weight: 600; color: var(--ink); max-width: 60ch; }

/* ---------- 3. What I did for others ---------- */
.it-work[b-r5xaiu9deg] { background: var(--paper-2); padding: clamp(3rem, 6vw, 6.5rem) 0; }
.it-case[b-r5xaiu9deg] { padding-top: clamp(2.5rem, 4.5vw, 3.5rem); margin-top: clamp(2.5rem, 4.5vw, 3.5rem); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.it-case:first-of-type[b-r5xaiu9deg] { padding-top: clamp(2.5rem, 4vw, 3.5rem); margin-top: clamp(2.75rem, 4vw, 4rem); }
.it-case__title[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.15; color: var(--ink); }
.it-case__summary[b-r5xaiu9deg] { margin: 0.85rem 0 0; font-size: clamp(1.1rem, 1.5vw, 1.3125rem); line-height: 1.45; font-weight: 600; color: var(--accent-text); }
.it-case__points[b-r5xaiu9deg] { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.it-case__points li[b-r5xaiu9deg] { position: relative; padding-left: 1.6rem; font-size: 1.125rem; line-height: 1.5; color: var(--body); }
.it-case__points li[b-r5xaiu9deg]::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 0.6rem; background: var(--accent); }
.it-case__link[b-r5xaiu9deg] { display: inline-block; margin-top: clamp(1.4rem, 2.4vw, 2rem); font-size: clamp(1.05rem, 1.4vw, 1.375rem); font-weight: 700; color: var(--accent); background: var(--paper); border: 2px solid var(--accent); text-decoration: none; padding: clamp(0.85rem, 1.3vw, 1rem) clamp(1.5rem, 2.2vw, 2rem); transition: background 0.15s ease, color 0.15s ease; }
.it-case__link:hover[b-r5xaiu9deg] { background: var(--accent); color: #fff; }

.it-case__shots[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); min-width: 0; }
.it-shot[b-r5xaiu9deg] { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.it-shot img[b-r5xaiu9deg] { display: block; width: 100%; height: auto; border: 1px solid var(--border); }
.it-shot__cap[b-r5xaiu9deg] { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.it-case__shots--pair[b-r5xaiu9deg] { grid-template-columns: 1fr 1fr; }

/* ---------- 4. How it works — four steps, red top rules ---------- */
.it-plan[b-r5xaiu9deg] { background: var(--paper); padding: clamp(3rem, 6vw, 6.5rem) 0; }
.it-steps[b-r5xaiu9deg] { list-style: none; margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3vw, 2.5rem); }
.it-step[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; border-top: 3px solid var(--accent); }
.it-step__num[b-r5xaiu9deg] { font-size: 1.0625rem; font-weight: 600; color: var(--accent); }
.it-step__title[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; color: var(--ink); }
.it-step__desc[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--body); }
@media (min-width: 880px) {
    .it-steps[b-r5xaiu9deg] { grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 2.6vw, 2.5rem); }
}

/* ---------- 5. Contact ---------- */
.it-contact[b-r5xaiu9deg] { background: var(--ground); padding: clamp(3rem, 6vw, 6rem) 0; }
.it-contact__grid[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
.it-contact__call[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.5rem); }
.it-contact__h[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.05; color: var(--ink); }
.it-contact__desc[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.6; color: var(--body); max-width: 34ch; }
.it-contact__num[b-r5xaiu9deg] { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 6.4vw, 4rem); line-height: 1.05; color: var(--accent); text-decoration: none; white-space: nowrap; }
.it-contact__num:hover[b-r5xaiu9deg] { color: var(--accent-hover); }
.it-contact__write[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.25rem); padding-top: 0.75rem; }
.it-contact__write-h[b-r5xaiu9deg] { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.5; font-weight: 600; color: var(--ink); }
.it-contact__more[b-r5xaiu9deg] { display: flex; flex-wrap: wrap; gap: 1rem; }
.it-contact__btn[b-r5xaiu9deg] { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: clamp(0.9rem, 1.4vw, 1.25rem) clamp(1.6rem, 2.4vw, 1.75rem); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.3125rem); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.it-contact__btn--wa[b-r5xaiu9deg] { background: var(--ink); color: var(--paper); }
.it-contact__btn--wa:hover[b-r5xaiu9deg] { background: #000; color: var(--paper); }
.it-contact__btn:not(.it-contact__btn--wa)[b-r5xaiu9deg] { color: var(--ink); background: transparent; border: 2px solid var(--ink); }
.it-contact__btn:not(.it-contact__btn--wa):hover[b-r5xaiu9deg] { background: var(--ink); color: var(--paper); }
.it-contact__or[b-r5xaiu9deg] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding-top: 0.5rem; }
.it-contact__or-label[b-r5xaiu9deg] { font-size: 1.1875rem; color: var(--body); }
.it-contact__mail[b-r5xaiu9deg] { font-size: clamp(1.375rem, 2vw, 1.625rem); color: var(--accent); border-bottom: 1px solid #a810104d; align-self: flex-start; overflow-wrap: anywhere; }
.it-contact__mail:hover[b-r5xaiu9deg] { color: var(--accent-hover); }

/* Testimonial (to be confirmed with the author) */
.it-quote[b-r5xaiu9deg] { margin: clamp(1.5rem, 3vw, 2rem) 0 0; display: flex; flex-direction: column; gap: 1.125rem; padding-top: 2rem; border-top: 4px solid var(--ink); }
.it-quote__label[b-r5xaiu9deg] { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.it-quote__dot[b-r5xaiu9deg] { width: 8px; height: 8px; background: var(--accent-text); display: block; flex: none; }
.it-quote__text[b-r5xaiu9deg] { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.it-quote__author[b-r5xaiu9deg] { font-size: 1.1875rem; font-weight: 600; color: var(--body); }

@media (min-width: 880px) {
    .it-contact__grid[b-r5xaiu9deg] { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 4rem); }
}

/* ---------- Footer ---------- */
.it-foot[b-r5xaiu9deg] { background: var(--paper-2); border-top: 1px solid var(--border); padding: clamp(2rem, 3vw, 2.75rem) 0; }
.it-foot__inner[b-r5xaiu9deg] { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; justify-content: space-between; }
.it-foot__note[b-r5xaiu9deg] { margin: 0; color: var(--body); font-size: 1.05rem; max-width: 42ch; }
.it-foot__contact[b-r5xaiu9deg] { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.it-foot__contact a[b-r5xaiu9deg] { color: var(--accent); text-decoration: none; font-size: 1.05rem; font-weight: 600; }
.it-foot__contact a:hover[b-r5xaiu9deg] { text-decoration: underline; }
.it-foot__copy[b-r5xaiu9deg] { color: var(--muted); font-size: 0.95rem; flex-basis: 100%; }

/* ---------- Phone-first: sticky bottom call bar on phones ---------- */
.it-callbar[b-r5xaiu9deg] { display: none; }

/* ============================ Desktop ============================ */
@media (min-width: 880px) {
    .it-ledger__head[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2.5rem, 4vw, 4rem); padding-bottom: 1.125rem; }
    .it-ledger__row[b-r5xaiu9deg] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2.5rem, 4vw, 4rem); }
    .it-ledger__tag[b-r5xaiu9deg] { display: none; }

    .it-case[b-r5xaiu9deg] { grid-template-columns: minmax(0, 1fr) clamp(340px, 43vw, 620px); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
    .it-case--noshots[b-r5xaiu9deg] { grid-template-columns: 1fr; }
    .it-case--noshots .it-case__text[b-r5xaiu9deg] { max-width: 68ch; }
}

/* ============================ Phones ============================ */
@media (max-width: 767px) {
    .it-bar__call[b-r5xaiu9deg] { display: none; }               /* the sticky bar takes over */

    .it-callbar[b-r5xaiu9deg] {
        display: flex; align-items: baseline; justify-content: center; gap: 0.6rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        background: var(--accent); color: #fff; text-decoration: none;
        padding: 0.95rem 1rem; min-height: 56px;
        box-shadow: 0 -6px 24px rgba(31, 28, 24, 0.22);
    }
    .it-callbar__label[b-r5xaiu9deg] { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .it-callbar__num[b-r5xaiu9deg] { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; white-space: nowrap; }

    .it[b-r5xaiu9deg] { padding-bottom: 4.75rem; }               /* room so the bar never covers the footer */
}

@media (max-width: 600px) {
    .it-lang__btn[b-r5xaiu9deg] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* /Variants/Lair/LairVariant.razor.rz.scp.css */
/* ============================================================================
   Lair — a short "who built this" endpoint for footer traffic from Grubby's Lair
   (design/ mockup id 7a, gitignored). Dark purple-black ground, red accent, Barlow
   Condensed display + IBM Plex body/mono. The identity comes first; the screenshot
   is its own band below it (it no longer sits under the headline) and fades into the
   page. A deliberate dead end — the only exits are Discord and email; NO link to "/"
   or any variant. One responsive page hitting the 1440 and 390 marks; copy from
   ILairContent, contact details from GlobalData. Fonts self-hosted (no CDN).
   ========================================================================== */
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

.lair[b-fqpxpldnly] {
    --bg: #0a0710;
    --ink: #ece7f2;
    --muted: #b2a9c2;
    --lead: #c6bfd4;
    --label: #8d84a0;
    --accent: #ff5147;         /* red text, numbers, links */
    --discord: #d92020;        /* red Discord button (white text ~AA) */
    --discord-hover: #c01515;
    --box: #120c1c;
    --line: #ffffff1f;
    --line-2: #ffffff29;
    --pad: clamp(22px, 5vw, 72px);
    --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    max-width: var(--ed-frame-max);
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* ---------- Top: language switch only (no brand, no nav) ---------- */
.lair__top[b-fqpxpldnly] { display: flex; justify-content: flex-end; padding: clamp(18px, 2vw, 26px) var(--pad); }
.lair__lang[b-fqpxpldnly] { display: flex; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; }
.lair__lang-btn[b-fqpxpldnly] { appearance: none; background: none; border: none; font: inherit; letter-spacing: inherit; color: var(--label); cursor: pointer; padding: 8px 12px; text-transform: uppercase; }
.lair__lang-btn:hover[b-fqpxpldnly] { color: var(--ink); }
.lair__lang-btn--active[b-fqpxpldnly] { background: var(--ink); color: var(--bg); cursor: default; }

.lair__main[b-fqpxpldnly] { flex: 1; }

/* ---------- Hero (identity first, no overlap) ---------- */
.lair__hero[b-fqpxpldnly] { padding: clamp(48px, 6vw, 64px) var(--pad) clamp(48px, 6vw, 72px); }
.lair__hero-grid[b-fqpxpldnly] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 64px); align-items: end; }
.lair__title[b-fqpxpldnly] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 9.4vw, 132px); line-height: 0.88; letter-spacing: -0.02em; color: var(--ink); overflow-wrap: break-word; }
.lair__title-accent[b-fqpxpldnly] { color: var(--accent); }
.lair__lead[b-fqpxpldnly] { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--lead); text-wrap: pretty; padding-bottom: 16px; }

/* ---------- Screenshot band ---------- */
.lair__shot[b-fqpxpldnly] { position: relative; }
.lair__shot img[b-fqpxpldnly] { display: block; width: 100%; height: clamp(300px, 40vw, 520px); object-fit: cover; object-position: center 22%; }
.lair__shot-fade[b-fqpxpldnly] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 7, 16, 0) 0%, rgba(10, 7, 16, 0) 55%, var(--bg) 100%); }

/* ---------- What else I can build ---------- */
.lair__build[b-fqpxpldnly] { padding: clamp(56px, 8vw, 88px) var(--pad) clamp(48px, 7vw, 72px); }
.lair__build-label[b-fqpxpldnly] { margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); }
.lair__items[b-fqpxpldnly] { display: flex; flex-direction: column; }
.lair__item[b-fqpxpldnly] { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 30px 0; border-top: 1px solid var(--line); align-items: baseline; }
.lair__item:last-child[b-fqpxpldnly] { border-bottom: 1px solid var(--line); }
.lair__item-num[b-fqpxpldnly] { grid-row: 1; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; color: var(--accent); }
.lair__item-title[b-fqpxpldnly] { grid-row: 1; grid-column: 2; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.02; color: var(--ink); }
.lair__item-desc[b-fqpxpldnly] { grid-column: 2; margin: 0; padding-top: 8px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); }

/* ---------- Contact — the largest block ---------- */
.lair__contact[b-fqpxpldnly] { margin: 0 var(--pad) clamp(56px, 9vw, 96px); background: var(--box); padding: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.lair__contact-main[b-fqpxpldnly] { display: flex; flex-direction: column; gap: 24px; }
.lair__contact-h[b-fqpxpldnly] { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 7vw, 84px); line-height: 0.92; color: var(--ink); }
.lair__contact-desc[b-fqpxpldnly] { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.lair__contact-aside[b-fqpxpldnly] { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; align-items: flex-start; }

.lair__discord[b-fqpxpldnly] { appearance: none; border: none; cursor: pointer; text-align: left; background: var(--discord); color: #fffaf8; display: flex; flex-direction: column; gap: 8px; padding: 28px 32px; font-family: var(--font-body); transition: background 0.15s ease; align-self: stretch; }
.lair__discord:hover[b-fqpxpldnly] { background: var(--discord-hover); }
.lair__discord-brand[b-fqpxpldnly] { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
.lair__discord-handle[b-fqpxpldnly] { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 4.6vw, 52px); line-height: 1; user-select: all; overflow-wrap: anywhere; }
.lair__discord-hint[b-fqpxpldnly] { font-family: var(--font-mono); font-size: 13px; }
.lair__discord.is-copied .lair__discord-hint[b-fqpxpldnly]::after { content: ' \2713'; font-weight: 700; }

.lair__mail[b-fqpxpldnly] { font-size: clamp(20px, 2vw, 24px); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; overflow-wrap: anywhere; }
.lair__mail:hover[b-fqpxpldnly] { color: var(--accent); border-color: var(--accent); }
.lair__note[b-fqpxpldnly] { font-size: 16px; color: var(--label); }

.lair__quote[b-fqpxpldnly] { margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line-2); align-self: stretch; }
.lair__quote-label[b-fqpxpldnly] { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.lair__quote-dot[b-fqpxpldnly] { width: 8px; height: 8px; background: var(--accent); display: block; flex: none; }
.lair__quote-text[b-fqpxpldnly] { margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.lair__quote-author[b-fqpxpldnly] { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; color: var(--label); }

/* ---------- Footer — a firm close (no links out) ---------- */
.lair__foot[b-fqpxpldnly] { padding: 32px var(--pad); border-top: 1px solid var(--line); }
.lair__foot-copy[b-fqpxpldnly] { color: var(--label); font-size: 15px; }

/* ---------- Desktop ---------- */
@media (min-width: 820px) {
    .lair__item[b-fqpxpldnly] { grid-template-columns: 88px 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
    .lair__item-desc[b-fqpxpldnly] { padding-top: 0; }
    .lair__contact[b-fqpxpldnly] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 819px) {
    .lair__hero-grid[b-fqpxpldnly] { grid-template-columns: 1fr; align-items: start; }
    .lair__lead[b-fqpxpldnly] { padding-bottom: 0; }
}

@media (max-width: 600px) {
    .lair__lang-btn[b-fqpxpldnly] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* /Variants/SmartHome/SmartHomeVariant.razor.rz.scp.css */
/* ============================================================================
   SmartHome — matches design/ mockup id 6a (gitignored): a dark, image-free page
   with a red accent and condensed display type. Header carries only the brand, the
   language switch and one CTA — no section links. Two-up borderless panels (a hairline
   between them, no card frames). One responsive page hitting the 1440 and 390 marks.
   Copy comes from ISmartHomeContent; contact details from GlobalData. Fonts are the
   shared self-hosted families (design-tokens.css): Barlow Condensed + IBM Plex.
   ========================================================================== */
.sh[b-rxxksliflz] {
    --sh-pad-x: clamp(22px, 5vw, 72px);
    --sh-bg: #0d0f14;
    --sh-ink: #e8eaee;
    --sh-muted: #a8b0bd;
    --sh-label: #868d99;
    --sh-accent: #ff5147;      /* red for numbers, links, eyebrows on dark */
    --sh-cta: #c81414;         /* red button fill (white text ~AA) */
    --sh-cta-hover: #a81010;
    --sh-line: #ffffff1a;
    --sh-line-2: #ffffff14;
    --sh-divider: #ffffff1f;

    max-width: var(--ed-frame-max);
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sh-bg);
    color: var(--sh-ink);
    font-family: var(--ed-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.sh-wrap[b-rxxksliflz] { padding: 0 var(--sh-pad-x); }
.sh-main[b-rxxksliflz] { flex: 1; }

/* ---------- Nav ---------- */
.sh-nav[b-rxxksliflz] { border-bottom: 1px solid var(--sh-line); }
.sh-nav__inner[b-rxxksliflz] { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: clamp(18px, 2vw, 26px) var(--sh-pad-x); flex-wrap: wrap; }
.sh-nav__brand[b-rxxksliflz] { font-family: var(--ed-font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: 0.02em; color: var(--sh-ink); text-decoration: none; }
.sh-nav__dot[b-rxxksliflz] { color: var(--sh-accent); }
.sh-nav__menu[b-rxxksliflz] { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex-wrap: wrap; }
.sh-nav__link[b-rxxksliflz] { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--sh-muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.sh-nav__link:hover[b-rxxksliflz] { color: var(--sh-ink); }
.sh-nav__link--current[b-rxxksliflz] { color: var(--sh-ink); border-bottom-color: var(--sh-accent); cursor: default; }
.sh-nav__right[b-rxxksliflz] { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); margin-left: auto; }
@media (max-width: 760px) { .sh-nav__menu[b-rxxksliflz] { order: 3; flex-basis: 100%; gap: 18px; } }

.sh-lang[b-rxxksliflz] { display: flex; gap: 8px; }
.sh-lang__btn[b-rxxksliflz] { appearance: none; border: none; background: transparent; color: var(--sh-label); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; padding: 8px 12px; cursor: pointer; }
.sh-lang__btn:hover[b-rxxksliflz] { color: var(--sh-ink); }
.sh-lang__btn--active[b-rxxksliflz] { background: var(--sh-ink); color: var(--sh-bg); cursor: default; }

.sh-nav__cta[b-rxxksliflz] { padding: 14px 22px; background: var(--sh-cta); color: #fffdfa; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.sh-nav__cta:hover[b-rxxksliflz] { background: var(--sh-cta-hover); color: #fffdfa; }

/* ---------- Shared labels ---------- */
.sh-label[b-rxxksliflz] { margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--ed-font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sh-label); }

.sh-btn[b-rxxksliflz] { display: inline-block; align-self: flex-start; background: var(--sh-cta); color: #fffdfa; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; padding: 20px 32px; transition: background 0.15s ease; }
.sh-btn:hover[b-rxxksliflz] { background: var(--sh-cta-hover); color: #fffdfa; }

/* ---------- Hero ---------- */
.sh-hero[b-rxxksliflz] { border-bottom: 1px solid var(--sh-line); }
.sh-hero__grid[b-rxxksliflz] { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 72px); align-items: end; padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 112px); }
.sh-hero__title[b-rxxksliflz] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(56px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.02em; }
.sh-hero__aside[b-rxxksliflz] { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); padding-bottom: 12px; align-items: flex-start; }
.sh-hero__desc[b-rxxksliflz] { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--sh-muted); text-wrap: pretty; }
@media (min-width: 820px) { .sh-hero__grid[b-rxxksliflz] { grid-template-columns: 1fr 1fr; } }

/* ---------- What I help with ---------- */
.sh-help[b-rxxksliflz] { padding: clamp(56px, 8vw, 88px) 0; }
.sh-help__list[b-rxxksliflz] { display: flex; flex-direction: column; }
.sh-help__row[b-rxxksliflz] { display: grid; grid-template-columns: 88px 1fr 1fr; gap: clamp(16px, 3vw, 40px); padding: 32px 0; border-top: 1px solid var(--sh-line); align-items: start; }
.sh-help__row:last-child[b-rxxksliflz] { border-bottom: 1px solid var(--sh-line); }
.sh-help__num[b-rxxksliflz] { font-family: var(--ed-font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; color: var(--sh-accent); }
.sh-help__title[b-rxxksliflz] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.02; }
.sh-help__desc[b-rxxksliflz] { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--sh-muted); }

/* ---------- Who it's for — two borderless panels split by a hairline ---------- */
.sh-who[b-rxxksliflz] { padding: clamp(40px, 6vw, 64px) 0 clamp(56px, 8vw, 88px); }
.sh-who__paths[b-rxxksliflz] { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--sh-divider); }
.sh-path[b-rxxksliflz] { background: var(--sh-bg); padding: clamp(28px, 4vw, 40px) 0; display: flex; flex-direction: column; gap: 18px; }
.sh-path__title[b-rxxksliflz] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(34px, 4.6vw, 52px); line-height: 1; }
.sh-path__desc[b-rxxksliflz] { margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--sh-muted); text-wrap: pretty; }
@media (min-width: 820px) {
    .sh-who__paths[b-rxxksliflz] { grid-template-columns: 1fr 1fr; }
    .sh-path[b-rxxksliflz] { padding: 40px 40px 40px 0; }
    .sh-path + .sh-path[b-rxxksliflz] { padding: 40px 0 40px 40px; }
}

/* ---------- Where this comes from ---------- */
.sh-bg[b-rxxksliflz] { background: #12151c; border-top: 1px solid var(--sh-line-2); }
.sh-bg__grid[b-rxxksliflz] { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 56px); padding: clamp(56px, 8vw, 88px) var(--sh-pad-x); align-items: start; }
.sh-bg .sh-label[b-rxxksliflz] { margin: 0; }
.sh-bg__quote[b-rxxksliflz] { margin: 0; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.55; max-width: 52ch; color: #dfe3e9; text-wrap: pretty; }
@media (min-width: 820px) { .sh-bg__grid[b-rxxksliflz] { grid-template-columns: 220px 1fr; } }

/* ---------- Contact ---------- */
.sh-contact__grid[b-rxxksliflz] { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); padding: clamp(56px, 9vw, 96px) var(--sh-pad-x); align-items: end; }
.sh-contact__heading[b-rxxksliflz] { margin: 0; font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(48px, 7vw, 80px); line-height: 0.95; max-width: 18ch; }
.sh-contact__aside[b-rxxksliflz] { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; align-items: flex-start; }
.sh-contact__desc[b-rxxksliflz] { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--sh-muted); max-width: 46ch; text-wrap: pretty; }
.sh-contact__phone[b-rxxksliflz] { font-family: var(--ed-font-display); font-weight: 600; font-size: clamp(36px, 4.6vw, 52px); line-height: 1; color: var(--sh-ink); text-decoration: none; white-space: nowrap; }
.sh-contact__phone:hover[b-rxxksliflz] { color: var(--sh-accent); }
.sh-contact__mail[b-rxxksliflz] { font-size: clamp(18px, 1.8vw, 22px); color: var(--sh-accent); border-bottom: 1px solid #ff514759; overflow-wrap: anywhere; }
.sh-contact__note[b-rxxksliflz] { font-size: 16px; color: var(--sh-label); }
@media (min-width: 820px) { .sh-contact__grid[b-rxxksliflz] { grid-template-columns: 1fr 1fr; } }

/* ---------- Footer ---------- */
.sh-foot[b-rxxksliflz] { border-top: 1px solid var(--sh-line); }
.sh-foot__inner[b-rxxksliflz] { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; padding: 36px var(--sh-pad-x); font-size: 15px; color: var(--sh-label); }
.sh-foot__contact[b-rxxksliflz] { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.sh-foot__contact a[b-rxxksliflz] { color: var(--sh-label); text-decoration: none; }
.sh-foot__contact a:hover[b-rxxksliflz] { color: var(--sh-ink); }

/* ---------- Phones: full-size language buttons ---------- */
@media (max-width: 600px) {
    .sh-lang__btn[b-rxxksliflz] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}