/*
 * Worktechlabs design system. Implements docs/design_handoff_blazor.
 * Brand red #D30000, Archivo type, sharp corners everywhere except pills/tags.
 * All photography is a grey ImageSlot placeholder until the client supplies real photos.
 *
 * Type is one self-hosted variable font. Archivo carries a width axis (62.5-125%), so display
 * headings use the expanded end and body copy the normal end: real hierarchy contrast from a
 * single file, and no render-blocking request to fonts.googleapis.com.
 */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
    src: url('/fonts/archivo-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: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
    src: url('/fonts/archivo-latin-ext.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;
}

:root {
    --color-bg: #ffffff;
    --color-surface: #f4f3f1;
    --color-text: #201e1d;
    /* Hairline, not a rule. The previous 0.4 read as a heavy grey line at every divider. */
    --color-divider: rgba(32, 30, 29, 0.14);
    --color-divider-strong: rgba(32, 30, 29, 0.28);
    --color-accent: #D30000;
    --color-accent-600: #B80000;
    --color-accent-700: #9A0000;
    --color-accent-800: #6E0000;
    --color-accent-100: #fdecec;
    --color-accent-200: #f9d3d3;
    --ink: #15171a;
    --edge: clamp(20px, 5vw, 72px);
    --page-max: 1280px;
    --page-max-narrow: 1240px;
    --font-heading: 'Archivo', system-ui, sans-serif;
    --font-body: 'Archivo', system-ui, sans-serif;
    /* Vertical rhythm. Section padding was scattered across 72/80/88/96/100px doing the same job;
       these two tokens replace all of it, and lift the desktop end for the density-3 read. */
    --section-y: clamp(64px, 7vw, 104px);
    --section-y-tight: clamp(48px, 5vw, 72px);
}

/* Display headings ride the font's width axis, so h1/h2 read as a distinct display cut against
   normal-width body copy. font-stretch is the high-level property that maps to the wdth axis. */
h1, h2, .display { font-stretch: 112%; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: var(--font-body);
    line-height: 1.6;
}

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-heading); font-weight: 800; line-height: 1.15; }
p { margin: 0; }

/* Plain <button> elements (slide dots/arrows, cookie close icon, etc.) otherwise inherit the
   browser's native button chrome — padding, Arial, appearance:auto — on top of inline styles.
   Every class-based button (.btn, .wtl-burger, .wtl-fab, .ico-btn, .tab, .nav-i, .seg-opt) still
   wins the cascade over this element-level reset, so this only affects unclassed buttons. */
button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}
select { font: inherit; color: inherit; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { max-width: 100%; display: block; }
ul, ol { padding-left: 1.25em; }
hr { border: 0; height: 1px; background: var(--color-divider); margin: 0; }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--edge); }
.wrap-narrow { max-width: var(--page-max-narrow); margin: 0 auto; padding: 0 var(--edge); }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-tight { padding: clamp(40px, 6vw, 64px) 0; }
.bg-surface { background: var(--color-surface); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-accent { background: var(--color-accent); color: #fff; }

.wtl-kick { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-700); margin-bottom: 14px; }
.wtl-kick::before { content: ""; width: 32px; height: 5px; background: var(--color-accent); display: block; flex: 0 0 auto; }
.wtl-kick--on-dark { color: #fff; }

.wtl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.wtl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wtl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wtl-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wtl-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1024px) { .wtl-grid-3, .wtl-grid-4, .wtl-grid-5 { grid-template-columns: repeat(2, 1fr); } .wtl-split { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .wtl-grid-2, .wtl-grid-3, .wtl-grid-4, .wtl-grid-5 { grid-template-columns: 1fr; } }

/* Sidebar layout used by service detail pages, blog post, legal docs, forms */
.wtl-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.wtl-layout--reverse { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
.wtl-layout--reverse > .wtl-side { order: 2; }
.wtl-side { display: grid; gap: 22px; position: sticky; top: 24px; align-self: start; }
@media (max-width: 900px) { .wtl-layout, .wtl-layout--reverse { grid-template-columns: 1fr; } .wtl-side { position: static; } }

/* ---------- Home statistics banner ---------- */
.wtl-stats { padding: 48px 0; }
.wtl-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wtl-stats__item { min-width: 0; padding: 12px 24px; text-align: center; }
.wtl-stats__item + .wtl-stats__item { border-left: 1px solid rgba(255,255,255,.14); }
.wtl-stats__value { font-size: clamp(44px, 4.2vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; color: var(--color-accent); }
.wtl-stats__label { margin-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.8); }
@media (max-width: 1024px) {
    .wtl-stats { padding: 28px 0; }
    .wtl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wtl-stats__item { padding: 28px 20px; }
    .wtl-stats__item:nth-child(odd) { border-left: 0; }
    .wtl-stats__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 640px) {
    .wtl-stats__grid { grid-template-columns: 1fr; }
    .wtl-stats__item + .wtl-stats__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding-inline: 24px; border: 1px solid var(--color-text);
    background: transparent; color: var(--color-text); font: inherit; font-weight: 600; font-size: 14.5px;
    cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { color: var(--color-text); background: var(--color-surface); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 10px 24px rgba(211,0,0,.28); }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; height: 40px; padding-inline: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Cards, tags, icons ---------- */
.wtl-card { background: #fff; box-shadow: 0 10px 30px rgba(21,23,26,.07); display: block; text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease; }
.wtl-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(21,23,26,.14); color: inherit; }
.wtl-ico { width: 64px; height: 64px; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px rgba(211,0,0,.3); flex: 0 0 auto; }

.tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.tag-neutral { background: var(--color-surface); color: var(--color-text); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-outline { border: 1px solid rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font-size: 13.5px; font-weight: 600; }
.wtl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.input {
    width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--color-divider); background: #fff;
    color: var(--color-text); font: inherit; font-size: 15px;
}
textarea.input { height: auto; padding: 12px 14px; resize: vertical; font-family: inherit; }
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
select.input { appearance: none; background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

.radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.radio .dot { width: 16px; height: 16px; border: 1px solid var(--color-divider); border-radius: 50%; display: inline-block; position: relative; }
.radio input:checked + .dot { border-color: var(--color-accent); }
.radio input:checked + .dot::after { content: ""; position: absolute; inset: 3px; background: var(--color-accent); border-radius: 50%; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.wtl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--color-divider); font-size: 14px; cursor: pointer; }
.wtl-chip input { accent-color: var(--color-accent); }

.wtl-pick { display: block; padding: 18px 20px; border: 1px solid var(--color-divider); cursor: pointer; }
.wtl-pick:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.wtl-pick input { accent-color: var(--color-accent); }

.wtl-step { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 17px; margin: 0 0 22px; }
.wtl-step span { width: 30px; height: 30px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }

.wtl-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 20px; border: 2px dashed var(--color-divider); cursor: pointer; }
.wtl-drop:hover { border-color: var(--color-accent); }

.wtl-form-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

.wtl-alert { padding: 16px 20px; border-left: 4px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 14.5px; margin-bottom: 22px; }
.wtl-alert--success { border-color: #1c6b34; background: #e6f4ea; color: #1c6b34; }

/* ---------- FAQ accordion ---------- */
.wtl-acc { border-bottom: 1px solid var(--color-divider); }
.wtl-acc > summary { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; list-style: none; text-align: left; font-family: var(--font-heading); font-weight: 800; font-size: 17px; cursor: pointer; color: var(--color-text); }
.wtl-acc > summary::-webkit-details-marker { display: none; }
.wtl-acc > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.wtl-acc .chev { flex: 0 0 auto; transition: transform .25s ease; color: var(--color-accent); }
.wtl-acc[open] .chev { transform: rotate(45deg); }
.wtl-acc .body { font-size: 15.5px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 78%, transparent); padding: 0 0 22px; max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .wtl-acc .chev { transition: none; } }

/* ---------- Legal doc typography ---------- */
.wtl-doc h2 { font-size: 24px; margin-top: 44px; letter-spacing: -0.015em; }
.wtl-doc h2:first-of-type { margin-top: 0; }
.wtl-doc p, .wtl-doc li { font-size: 15.5px; line-height: 1.8; color: color-mix(in srgb, var(--color-text) 84%, transparent); margin-top: 14px; }
.wtl-doc ul { margin-top: 14px; display: grid; gap: 10px; }
.wtl-toc { display: grid; }
.wtl-toc a { padding: 12px 18px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.wtl-toc a:hover { color: var(--color-accent); }

.wtl-f-link { padding: 10px 0; font-size: 14.5px; color: var(--color-text); border-bottom: 1px solid var(--color-divider); }
.wtl-f-link:hover { color: var(--color-accent); }

.wtl-scroll { overflow-x: auto; margin-top: 18px; }
.wtl-tbl { width: 100%; border-collapse: collapse; }
.wtl-tbl th, .wtl-tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); font-size: 14.5px; }
.wtl-tbl th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ---------- Public site shell (SiteNav / SiteFooter) ---------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site__main { flex: 1; }

.wtl-top { background: var(--ink); color: rgba(255,255,255,.78); }
.wtl-top a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.wtl-top a:hover { color: #fff; }
.wtl-top-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--edge); height: 46px; display: flex; align-items: center; gap: 28px; }
.wtl-top-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.wtl-lang { display: flex; gap: 8px; font-size: 12.5px; letter-spacing: .08em; }
.wtl-lang span { opacity: .55; }
.wtl-lang span[data-active="1"] { color: #fff; font-weight: 700; opacity: 1; }

.site-header { background: #fff; box-shadow: 0 2px 24px rgba(21,23,26,.09); position: sticky; top: 0; z-index: 30; }
.site-header__row { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--edge); display: flex; align-items: center; gap: 28px; height: 86px; }
.site-header__logo { display: flex; align-items: center; margin-right: auto; }
.site-header__logo img { height: 40px; width: auto; }

.wtl-nav { display: flex; gap: 26px; align-items: center; }
.wtl-nav a { font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; position: relative; padding: 6px 0; color: var(--color-text); }
.wtl-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--color-accent); transition: right .25s ease; }
.wtl-nav a:hover { color: var(--color-accent); }
.wtl-nav a:hover::after, .wtl-nav a.active::after { right: 0; }
.wtl-nav a.active { color: var(--color-accent); }

.wtl-cta { height: 46px; padding-inline: 24px; font-size: 14.5px; box-shadow: 0 10px 24px rgba(211,0,0,.28); }

.wtl-burger { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--color-divider); background: transparent; cursor: pointer; color: var(--color-text); flex: 0 0 auto; }
.wtl-burger:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.wtl-drawer { display: none; background: #fff; border-top: 2px solid var(--color-accent); box-shadow: 0 18px 40px rgba(21,23,26,.14); }
.wtl-drawer[data-open="1"] { display: block; }
.wtl-drawer-inner { max-width: var(--page-max); margin: 0 auto; padding: 8px var(--edge) 24px; }
.wtl-drawer a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--color-divider); }
.wtl-drawer a:hover, .wtl-drawer a.active { color: var(--color-accent); }
.wtl-drawer .wtl-cta { height: 48px; margin-top: 14px; justify-content: flex-start; border-bottom: 0; color: #fff; }

@media (max-width: 1180px) { .wtl-nav { gap: 18px; } .wtl-nav a { font-size: 13.5px; } }
@media (max-width: 1020px) { .wtl-nav, .site-header .wtl-cta { display: none; } .wtl-burger { display: flex; } }
@media (min-width: 1021px) { .wtl-drawer { display: none !important; } }
@media (max-width: 760px) { .wtl-top-right { display: none; } .wtl-top-inner { flex-wrap: wrap; height: auto; padding-block: 10px; gap: 6px 22px; } }

/* Footer */
.wtl-f a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14.5px; transition: color .2s, padding-left .2s; }
.wtl-f a:hover { color: #fff; padding-left: 6px; }
.wtl-soc { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); transition: background .2s, border-color .2s, color .2s; }
.wtl-soc:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.wtl-fgrid { display: grid; grid-template-columns: minmax(0,2.2fr) repeat(3, minmax(0,1fr)); gap: 48px; max-width: var(--page-max); margin: 0 auto; padding: 72px var(--edge) 0; }
@media (max-width: 1024px) { .wtl-fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; } }
@media (max-width: 600px) { .wtl-fgrid { grid-template-columns: 1fr; gap: 36px; } }
.wtl-fbottom { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--edge); }

.wtl-top-btn { position: fixed; right: 24px; bottom: 24px; z-index: 8500; width: 52px; height: 52px; background: var(--color-accent); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px rgba(211,0,0,.36); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .2s; }
.wtl-top-btn[data-show="1"] { opacity: 1; transform: none; pointer-events: auto; }
.wtl-top-btn:hover { background: var(--ink); }
@media (max-width: 600px) { .wtl-top-btn { right: 16px; bottom: 16px; width: 46px; height: 46px; } }

/* ---------- Cookie banner ---------- */
.wtl-ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--ink); color: #fff; box-shadow: 0 -14px 44px rgba(0,0,0,.32); }
.wtl-ck[data-show="0"] { display: none; }
.wtl-ckrow { max-width: var(--page-max); margin: 0 auto; padding: 26px var(--edge); display: flex; align-items: center; gap: 28px; }
@media (max-width: 720px) { .wtl-ckrow { flex-direction: column; align-items: stretch; } }
.wtl-back { position: fixed; inset: 0; z-index: 9001; background: rgba(21,23,26,.6); display: flex; align-items: center; justify-content: center; padding: 24px; }
.wtl-back[data-show="0"] { display: none; }
.wtl-modal { background: #fff; width: min(680px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.wtl-toggle { position: relative; width: 52px; height: 28px; flex: 0 0 auto; background: color-mix(in srgb, var(--color-text) 22%, transparent); transition: background .2s; cursor: pointer; }
.wtl-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; transition: transform .2s; }
.wtl-opt input:checked ~ .wtl-toggle { background: var(--color-accent); }
.wtl-opt input:checked ~ .wtl-toggle::after { transform: translateX(24px); }
.wtl-opt input:disabled ~ .wtl-toggle { background: color-mix(in srgb, var(--color-accent) 45%, transparent); cursor: not-allowed; }
.wtl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.wtl-fab { position: fixed; left: 20px; bottom: 20px; z-index: 8000; width: 46px; height: 46px; background: var(--ink); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.wtl-fab:hover { background: var(--color-accent); }
.wtl-fab[data-show="0"] { display: none; }

/* ---------- Cards / hero patterns reused across pages ---------- */
.wtl-hero-dark { position: relative; background: var(--ink); overflow: hidden; }
.wtl-hero-dark__bg { position: absolute; inset: 0; opacity: .32; }
.wtl-hero-dark__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(21,23,26,.95) 0%, rgba(21,23,26,.72) 55%, rgba(21,23,26,.25) 100%); }
.wtl-hero-dark__content { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 88px var(--edge); }
.wtl-eyebrow { display: inline-flex; align-items: center; background: rgba(211,0,0,.16); border-left: 4px solid var(--color-accent); padding: 10px 18px; margin-bottom: 26px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #fff; font-weight: 700; }
.wtl-breadcrumb { font-size: 14px; margin-top: 24px; color: rgba(255,255,255,.6); }
.wtl-breadcrumb a { color: rgba(255,255,255,.6); }

.wtl-snav { display: grid; }
.wtl-snav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; text-decoration: none; color: var(--color-text); font-size: 14.5px; font-weight: 600; border-top: 1px solid var(--color-divider); }
.wtl-snav a[data-on="1"] { color: var(--color-accent); background: #fff; }
.wtl-snav a:hover { color: var(--color-accent); }

.wtl-help { position: relative; overflow: hidden; background: var(--ink); }
.wtl-help__bg { position: absolute; inset: 0; opacity: .3; }
.wtl-help__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(211,0,0,.86) 0%, rgba(150,0,0,.94) 100%); }
.wtl-help__content { position: relative; padding: 34px 26px; color: #fff; }

.wtl-cta-banner { margin-top: 52px; background: var(--ink); color: #fff; padding: 40px clamp(24px,3vw,44px); display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }

.wtl-numbered-row { display: grid; grid-template-columns: minmax(56px,120px) minmax(0,340px) minmax(0,1fr) auto; gap: 24px clamp(24px,4vw,64px); align-items: baseline; padding: 32px 0; border-top: 1px solid var(--color-divider); }
@media (max-width: 900px) { .wtl-numbered-row { grid-template-columns: 1fr; gap: 10px; } }

.wtl-mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (max-width: 760px) { .wtl-mods { grid-template-columns: 1fr; } }

.wtl-work { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; width: 100%; min-height: 280px; aspect-ratio: 4 / 3; padding: 28px 24px; overflow: hidden; text-decoration: none; color: #fff; background: #15171a; isolation: isolate; }
.wtl-work .ph { position: absolute; inset: 0; z-index: -2; transition: transform .6s ease; }
.wtl-work:hover, .wtl-work:focus-visible { color: #fff; }
.wtl-work:hover .ph { transform: scale(1.06); }
.wtl-work .ov { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(21,23,26,.96) 0%, rgba(21,23,26,.4) 55%, rgba(21,23,26,0) 85%); transition: background .4s ease; }
.wtl-work:hover .ov { background: linear-gradient(to top, rgba(211,0,0,.94) 0%, rgba(211,0,0,.45) 50%, rgba(211,0,0,.08) 85%); }
.wtl-work__mark { position: relative; align-self: flex-end; flex: 0 0 40px; width: 40px; margin: 8px 8px 32px 0; border: 4px solid var(--color-accent); }
.wtl-work__mark::after { content: ""; position: absolute; width: 36px; height: 36px; top: -14px; right: -14px; border-top: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.wtl-work__copy { margin-top: auto; min-width: 0; }
.wtl-work__category { font-size: 11.5px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.wtl-work__title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.02em; margin-top: 10px; color: inherit; overflow-wrap: anywhere; }
.wtl-work:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .wtl-work .ph, .wtl-work .ov { transition: none; } .wtl-work:hover .ph { transform: none; } }

.wtl-image-slot { position: relative; background: #d9d9d9; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #6b6b6b; text-align: center; }
.wtl-image-slot__caption { font-size: 12px; padding: 8px 14px; line-height: 1.4; }
.wtl-image-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Public form pages ---------- */
.hero-title { font-size: clamp(38px,5vw,66px); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin-left: -0.055em; }
.hero-lead { font-size: 18px; line-height: 1.62; max-width: 56ch; margin-top: 24px; color: rgba(255,255,255,.8); }

/* ---------- Newsletter box ---------- */
.wtl-newsletter { background: var(--color-accent); color: #fff; padding: 30px 26px; }
.wtl-newsletter form { display: grid; gap: 12px; margin-top: 20px; }
.wtl-newsletter .input { background: #fff; border-color: #fff; }
.wtl-newsletter .btn { height: 44px; background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Admin (restyle of the routed admin, matching Admin.dc.html) ---------- */
.adm { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.adm-side { background: var(--ink); color: rgba(255,255,255,.86); display: flex; flex-direction: column; }
.adm-side .grp { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 20px 22px 8px; margin: 0; }
.nav-i { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: none; border: 0; color: rgba(255,255,255,.72); font: inherit; font-size: 14.5px; text-decoration: none; cursor: pointer; width: 100%; text-align: left; }
.nav-i:hover { color: #fff; }
.nav-i.active { color: #fff; background: rgba(255,255,255,.08); border-left: 3px solid var(--color-accent); padding-left: 19px; }
.nav-i .badge { margin-left: auto; background: var(--color-accent); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.adm-body { min-width: 0; display: flex; flex-direction: column; }
.adm-topbar { background: #fff; border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; z-index: 20; padding: 0 30px; height: 70px; display: flex; align-items: center; gap: 20px; }
.adm-main { padding: 30px; }
.ico-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-divider); background: #fff; cursor: pointer; color: var(--color-text); }
.ico-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .g2, .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.kpi { background: #fff; box-shadow: 0 10px 30px rgba(21,23,26,.07); padding: 22px 24px; }
.adm-card { background: #fff; box-shadow: 0 10px 30px rgba(21,23,26,.07); }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--color-divider); font-size: 14px; vertical-align: middle; }
.tbl th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 58%, transparent); }

.st { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st-live { background: #e6f4ea; color: #1c6b34; }
.st-draft { background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.st-new { background: var(--color-accent-100); color: var(--color-accent-700); }
.st-done { background: #e9edf5; color: #33507f; }

.tab { padding: 12px 20px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 14.5px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 60%, transparent); cursor: pointer; margin-bottom: -1px; }
.tab[data-on="1"], .tab.active { color: var(--color-text); border-color: var(--color-accent); }

.seg { display: inline-flex; border: 1px solid var(--color-divider); }
.seg-opt { padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; position: relative; }
.seg-opt input { position: absolute; opacity: 0; }
.seg-opt:has(input:checked) { background: var(--ink); color: #fff; }

.admin-list__empty { color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: 24px; }
.admin-list__header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-list__header h1 { margin-right: auto; }

.detail { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin-bottom: 24px; }
.detail dt { font-weight: 600; color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: 13px; }
.detail dd { margin: 0; }
.detail__body { white-space: pre-wrap; background: #fff; box-shadow: 0 10px 30px rgba(21,23,26,.07); padding: 20px 22px; max-width: 60ch; margin-top: 8px; }

/* ---------- Contact desk forms ----------
   Shared by the five desk pages. Questions are grouped into fieldsets so a desk that asks eight
   things still reads as two short blocks rather than one column of inputs. */
.desk-form { display: grid; gap: 34px; }
.desk-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.desk-form legend {
    width: 100%;
    padding: 0 0 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-stretch: 112%;
    font-size: 19px;
    line-height: 1.25;
}
.desk-form__fields { display: grid; gap: 20px; }
.desk-form__hint { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.desk-form__wide { grid-column: 1 / -1; }
.desk-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.desk-form__actions .btn { height: 48px; padding-inline: 26px; font-size: 15px; }
.desk-form__note { font-size: 13.5px; line-height: 1.6; max-width: 40ch; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.desk-form__honey { position: absolute; left: -9999px; }

/* Blazor's own validation classes had no styling on the public site, so a rejected field looked
   identical to an accepted one. Applies to every public form, not only the desks. */
.validation-message { font-size: 13.5px; line-height: 1.5; color: var(--color-accent-700); }
.input.invalid { border-color: var(--color-accent); border-width: 2px; }
.input.valid.modified { border-color: #1c6b34; }

/* Admin badges were referenced by the message and user lists but never defined, so state read as
   plain text. Same shape as the .st pills used elsewhere in the back office. */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.badge + .badge { margin-left: 6px; }
.badge--on { background: var(--color-accent-100); color: var(--color-accent-700); }
.badge--off { background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* ---------- Service detail blocks ----------
   Shared by the seven service pages, which all sit inside the two-column sidebar layout. The main
   column is 9 of 12, so full-bleed bands and four-across grids do not fit; these are the in-column
   equivalents. */

/* A real sequence (discovery, then build, then handover). Two columns, and the divider is the gap
   rather than a rule under every row. */
.svc-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin-top: 28px; }
.svc-step { padding-top: 18px; border-top: 3px solid var(--color-accent); }
.svc-step__n { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--color-accent); }
.svc-step h4 { margin-top: 8px; font-size: 17px; line-height: 1.3; }
.svc-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 74%, transparent); }

/* The dark band these pages used to run full width, as a panel inside the column. */
.svc-panel { margin-top: 56px; padding: clamp(28px, 3.5vw, 42px); background: var(--ink); color: #fff; }
.svc-panel > h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; letter-spacing: -.025em; max-width: 22ch; }
.svc-panel > p { max-width: 60ch; margin-top: 16px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
.svc-panel .svc-step { border-top-color: var(--color-accent); }
.svc-panel .svc-step p { color: rgba(255, 255, 255, .74); }
.svc-panel__cta { height: 50px; padding-inline: 26px; margin-top: 34px; box-shadow: 0 14px 32px rgba(211, 0, 0, .3); }

/* Named technologies and third-party systems. Was a single paragraph joined by middle dots, which
   is unreadable at length and hides how many there are. */
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.svc-tags li {
    padding: 7px 14px;
    background: var(--color-surface);
    font-size: 14px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.svc-panel .svc-tags li { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); }

/* Where a system is today, and what it becomes. */
.svc-paths { display: grid; gap: 1px; margin-top: 28px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.svc-path { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 28px; padding: 22px 24px; background: var(--color-bg); }
.svc-path__move { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16.5px; line-height: 1.3; }
.svc-path__move svg { flex: 0 0 auto; }
.svc-path__to { color: var(--color-accent); }
.svc-path p { font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 74%, transparent); }

.svc-note { margin-top: 18px; font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.svc-figure { margin: 0; box-shadow: 0 22px 54px rgba(21, 23, 26, .16); }
.svc-h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.028em; max-width: 24ch; }
.svc-h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; letter-spacing: -.025em; margin-top: 56px; }
.svc-body { max-width: 72ch; margin-top: 20px; font-size: 16.5px; line-height: 1.85; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.svc-body + .svc-body { margin-top: 16px; }

@media (max-width: 700px) {
    .svc-steps { grid-template-columns: 1fr; gap: 22px; }
    .svc-path { grid-template-columns: 1fr; }
}

/* ---------- Back-office form theme ----------
   The shared form components in WorktechLabs.Components are structural only: every colour, radius
   and border is a custom property, so the back office adopts the site's design system by overriding
   those properties here rather than by restyling any component. app.css loads after the component
   stylesheet, so these win. */
:root {
    --wtl-radius: 0;
    --wtl-border: 1px solid var(--color-divider-strong);
    --wtl-border-focus: var(--color-accent);
    --wtl-fg: var(--color-text);
    --wtl-fg-muted: color-mix(in srgb, var(--color-text) 62%, transparent);
    --wtl-bg-input: #fff;
    --wtl-danger: var(--color-accent-700);
    --wtl-btn-primary-bg: var(--ink);
    --wtl-btn-primary-fg: #fff;
}

.wtl-input { font-family: var(--font-body); font-size: 15px; min-height: 46px; }
.wtl-btn { font-family: var(--font-body); font-weight: 700; min-height: 44px; }
.wtl-btn--primary:hover { background: var(--color-accent); }
.wtl-field__label { font-family: var(--font-body); }