/* =========================================================================
   Tfast Digital Agency — frontend design system
   Layered on the "basic" template. Frontend pages only (loaded from
   templates/basic/layouts/frontend.blade.php). No build step; plain CSS.
   ========================================================================= */

:root {
    /* Light is the primary identity. Dark values live on html[data-theme="dark"]
       and on system preference. Older --tfast / --wtb names stay as aliases. */
    color-scheme: light;

    --background: #ffffff;
    --background-secondary: #f6f8fa;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --text-primary: #0d1726;
    --text-secondary: #536071;
    --text-muted: #7a8594;
    --border: #e5e9ef;
    --border-strong: #cdd3dc;
    --brand: #0b4db8;
    --brand-hover: #083e96;
    --link: #0b4db8;
    --focus: #0b4db8;
    --button: #0b4db8;
    --button-text: #ffffff;
    --frame: #f6f8fa;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 80px;
    --space-16: 96px;
    --space-20: 128px;
    --gutter: 20px;
    --container: 1280px;
    --container-work: 1280px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --font-sans: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
    --text-display: clamp(40px, 4.6vw, 56px);
    --text-h2: clamp(28px, 2.6vw, 36px);
    --text-body: 16px;
    --text-lead: 18px;

    --duration-fast: 120ms;
    --duration-normal: 220ms;
    --duration-slow: 280ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    --tfast-ground: var(--background);
    --tfast-text: var(--text-primary);
    --tfast-secondary: var(--text-secondary);
    --tfast-line: var(--border);
    --tfast-blue: var(--link);
    --tfast-blue-deep: #0b3f9e;
    --tfast-button: var(--button);
    --tfast-button-text: var(--button-text);
    --tfast-frame: var(--frame);
    --tfast-font: var(--font-sans);
    --tfast-mono: var(--font-mono);
    --tfast-column: var(--container);
    --tfast-work: var(--container-work);
    --tfast-nav: 72px;
    --tfast-radius: var(--radius-md);
    --move-fast: var(--duration-fast);
    --move: var(--duration-normal);

    --wtb-primary: var(--brand);
    --wtb-primary-dark: var(--text-primary);
    --wtb-primary-soft: var(--background-secondary);
    --wtb-accent: var(--brand);
    --wtb-accent-cta: var(--button);
    --wtb-accent-dark: var(--brand-hover);
    --wtb-ink: var(--text-primary);
    --wtb-muted: var(--text-secondary);
    --wtb-line: var(--border);
    --wtb-bg: var(--background);
    --wtb-card: var(--surface);
    --wtb-radius: var(--radius-md);
    --wtb-radius-sm: var(--radius-sm);
    --wtb-radius-pill: var(--radius-md);
    --wtb-shadow: none;
    --wtb-shadow-lg: none;
    --wtb-font: var(--font-sans);
    --wtb-mono: var(--font-mono);
    --wtb-header-h: var(--tfast-nav);

    --base: 218 89% 38%;
    --base-h: 218;
    --base-s: 89%;
    --base-l: 38%;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --background: #0b0d10;
    --background-secondary: #101318;
    --surface: #15191f;
    --surface-elevated: #1a1f26;
    --text-primary: #f5f7fa;
    --text-secondary: #a8b0bc;
    --text-muted: #737d8c;
    --border: #252b34;
    --border-strong: #363e49;
    --brand: #3d92f5;
    --brand-hover: #69adf8;
    --link: #8ebeff;
    --focus: #8ebeff;
    --button: #1d6fe0;
    --button-text: #ffffff;
    --frame: #15191f;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --background: #0b0d10;
        --background-secondary: #101318;
        --surface: #15191f;
        --surface-elevated: #1a1f26;
        --text-primary: #f5f7fa;
        --text-secondary: #a8b0bc;
        --text-muted: #737d8c;
        --border: #252b34;
        --border-strong: #363e49;
        --brand: #3d92f5;
        --brand-hover: #69adf8;
        --link: #8ebeff;
        --focus: #8ebeff;
        --button: #1d6fe0;
        --button-text: #ffffff;
        --frame: #15191f;
    }
}

/* ----------------------------------------------------------------- base */

body {
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow-x: hidden;
    transition: background-color var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    body,
    header.header {
        transition: none;
    }
}

::selection {
    background: color-mix(in srgb, var(--brand) 24%, transparent);
    color: var(--text-primary);
}

.main-wrapper {
    background: var(--wtb-bg);
    overflow-x: clip;
}

.wtb-card__title,
.wtb-titleblock h1 {
    overflow-wrap: anywhere;
}

/* Bootstrap Reboot underlines every <a>; the marketplace UI uses colour + hover
   affordances instead. Underlines are added back only for inline prose links. */
a {
    color: var(--wtb-primary);
    text-decoration: none;
}

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

.wtb-block p a,
.wtb-review p a,
.wtb-footer__brand p a {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--wtb-ink);
    font-weight: 500;
    letter-spacing: -.015em;
}

.section {
    padding: 48px 0;
}

.text--base {
    color: var(--wtb-primary) !important;
}

/* Bootstrap .text-muted (#6c757d) is ~4.37:1 on white — just under AA;
   the design token (#6b7280) clears it and keeps muted text consistent. */
.text-muted {
    color: var(--wtb-muted) !important;
}

/* hide the investment-site contact strip entirely */
.top-header {
    display: none !important;
}

/* ----------------------------------------------------------------- buttons */

.wtb-btn,
.btn--base {
    --_bg: var(--tfast-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--tfast-radius);
    background: var(--_bg);
    color: var(--tfast-button-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    transition: background var(--move) cubic-bezier(0.2, 0, 0, 1);
}

.wtb-btn:hover,
.btn--base:hover {
    background: var(--brand-hover) !important;
    color: var(--button-text) !important;
}

.wtb-btn:active,
.btn--base:active {
    background: var(--brand-hover);
}

.wtb-btn--cta {
    --_bg: var(--wtb-accent-cta);
    color: #fff;
}

.wtb-btn--cta:hover {
    background: var(--wtb-accent-dark);
    color: #fff;
}

.wtb-btn--ghost,
.btn-outline--base {
    background: transparent;
    color: var(--tfast-text);
    border: 1px solid var(--tfast-line);
}

.wtb-btn--ghost:hover,
.btn-outline--base:hover {
    background: transparent;
    color: var(--tfast-text);
    border-color: var(--tfast-text);
}

/* WhatsApp inquiry button — a quiet surface so it never competes with the
   primary CTA. The icon carries WhatsApp's darker green (#128c7e, ~3.9:1 on
   white); a #25d366 fill with white text would fail contrast. */
.wtb-btn--wa {
    background: #fff;
    color: var(--wtb-ink);
    border: 1px solid var(--wtb-line);
    min-height: 44px;
}

.wtb-btn--wa i {
    color: #128c7e;
    font-size: 1.25em;
    line-height: 1;
}

.wtb-btn--wa:hover {
    background: #e7f6ee;
    border-color: #25d366;
    color: var(--wtb-ink);
}

.wtb-btn--wa:focus-visible {
    outline: 2px solid var(--wtb-primary);
    outline-offset: 2px;
}

.wtb-btn--block {
    width: 100%;
}

.wtb-btn--sm {
    padding: .42rem .8rem;
    font-size: .85rem;
}

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

header.header,
header.header.fixed-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--tfast-ground) !important;
    background-color: var(--tfast-ground) !important;
    border-bottom: 1px solid var(--tfast-line);
    box-shadow: none !important;
    padding: 0;
    animation: none;
    transition: background-color var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease);
}

/* While the bar sits on a dark hero or the footer, the type turns light and
   the bar itself clears so the photograph shows through. */
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid),
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid),
header.header.is-over-dark {
    background: linear-gradient(180deg, rgba(6, 12, 22, 0.72) 0%, rgba(6, 12, 22, 0.28) 70%, rgba(6, 12, 22, 0) 100%) !important;
    background-color: transparent !important;
    border-bottom-color: transparent;
}

body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .logo,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .logo__name,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .nav-menu .nav-link,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .wtb-header-actions .wtb-link,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .wtb-sep,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .navbar-toggler,
body:has(.main-wrapper > .stage-hero:first-child) header.header:not(.is-solid) .tfast-theme,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .logo,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .logo__name,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .nav-menu .nav-link,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .wtb-header-actions .wtb-link,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .wtb-sep,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .navbar-toggler,
body:has(.main-wrapper > .breadcrumb + .stage-hero) header.header:not(.is-solid) .tfast-theme,
header.header.is-over-dark .logo,
header.header.is-over-dark .logo__name,
header.header.is-over-dark .nav-menu .nav-link,
header.header.is-over-dark .wtb-header-actions .wtb-link,
header.header.is-over-dark .wtb-sep,
header.header.is-over-dark .navbar-toggler,
header.header.is-over-dark .tfast-theme {
    color: #f4f7fb !important;
    border-color: rgba(255, 255, 255, 0.35);
}

header.header.is-over-dark .nav-menu .nav-link:hover,
header.header.is-over-dark .nav-menu .nav-link.active,
header.header.is-over-dark .wtb-header-actions .wtb-link:hover {
    color: #fff !important;
}

.main-wrapper > .stage-hero.stage-hero--home:first-child {
    margin-top: calc(-1 * var(--tfast-nav));
    padding-top: calc(var(--tfast-nav) + clamp(36px, 8vh, 88px));
}

/* Catalogue and contact pages keep a trail, but it sits on the dark opening
   instead of a light strip between the bar and the photograph. */
.main-wrapper > .breadcrumb:has(+ .stage-hero) {
    position: absolute !important;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    background: transparent !important;
}

.main-wrapper > .breadcrumb:has(+ .stage-hero) .wtb-crumb {
    background: transparent;
    border-bottom: 0;
    padding-top: calc(var(--tfast-nav) + 12px);
}

.main-wrapper > .breadcrumb:has(+ .stage-hero) .wtb-crumb a,
.main-wrapper > .breadcrumb:has(+ .stage-hero) .wtb-crumb span {
    color: rgba(244, 247, 251, 0.82);
}

.main-wrapper > .breadcrumb:has(+ .stage-hero) .wtb-crumb a:hover {
    color: #fff;
}

.main-wrapper > .breadcrumb:has(+ .stage-hero) + .stage-hero {
    margin-top: calc(-1 * var(--tfast-nav));
    padding-top: calc(var(--tfast-nav) + 52px);
}

header.header .navbar {
    min-height: var(--wtb-header-h);
    padding: .5rem 0;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    background: transparent !important;
    box-shadow: none;
}

/* the header expands to its single-row desktop layout at xl (1200px) — below
   that the whole nav uses the full-width drawer, which fits every device.
   The desktop spacing lives with the header fit rules further down, after the
   base declarations those rules have to beat. */
@media (min-width: 1200px) {
    header.header .navbar { flex-wrap: nowrap; }
}

@media (min-width: 992px) {
    header.header .nav-menu .nav-item:focus-within > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        top: 100% !important;
        transform: scaleY(1);
    }
}

/* ---- mobile / tablet expanded menu ---- */
@media (max-width: 1199.98px) {
    header.header .tfast-theme { margin-left: auto; }
    header.header .navbar-toggler {
        margin-left: 8px;
        border: 0;
        padding: .25rem .5rem;
        font-size: 1.5rem;
        color: var(--wtb-ink);
        background: transparent;
    }
    header.header .navbar-toggler:focus { box-shadow: none; }

    header.header .navbar-collapse {
        flex-basis: 100%;
        margin-top: .4rem;
        border-top: 1px solid var(--wtb-line);
        padding-top: .3rem;
    }

    header.header .nav-menu {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
    }
    header.header .nav-menu .nav-item { width: 100%; }
    header.header .nav-menu .nav-link {
        display: block;
        width: 100%;
        padding: .85rem .25rem;
        border-radius: 0;
        border-bottom: 1px solid var(--wtb-line);
        font-size: 1rem;
    }
    header.header .nav-menu .nav-link:hover,
    header.header .nav-menu .nav-link.active { background: transparent; color: var(--tfast-text); }

    /* neutralise the template's dark hover-dropdown so "More" reads on white */
    header.header .nav-menu .dropdown-menu,
    header.header .nav-menu .dropdown-menu.wtb-menu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
        float: none;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 0 0 1rem !important;
        margin: 0 !important;
        min-width: 0;
    }
    header.header .nav-menu .dropdown-menu .dropdown-item {
        color: var(--wtb-ink) !important;
        padding: .7rem .25rem;
        margin-left: 0 !important;
        border-bottom: 1px solid var(--wtb-line) !important;
        white-space: normal;
    }
    header.header .nav-menu .dropdown-menu .dropdown-item:hover,
    header.header .nav-menu .dropdown-menu .dropdown-item:focus {
        color: var(--wtb-primary) !important;
        background: transparent;
    }
    /* "More" toggle stays as a plain label — its list is always expanded here */
    header.header .nav-menu .nav-item.dropdown > .dropdown-toggle::after { opacity: .5; }

    /* the mobile auth block */
    header.header .nav-menu .nav-item.d-xl-none .wtb-btn { width: 100%; }
    header.header .nav-menu .nav-item.d-xl-none.mt-2 { padding: .75rem 0 .25rem; }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
    header.header .navbar { gap: .5rem; }
    .wtb-header-actions .wtb-link { font-size: .88rem; }
    .wtb-locpill { padding: .38rem .55rem; font-size: .8rem; }
    .wtb-btn--cta.wtb-btn--sm { padding: .42rem .7rem; font-size: .82rem; }
}

header.header .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

header.header .logo img,
header.header .logo__is {
    height: 40px;
    width: auto;
    max-width: 190px;
}

@media (min-width: 1200px) {
    header.header .navbar-collapse {
        flex-grow: 0;
        flex-basis: auto;
        width: auto;
    }
}

.wtb-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

header.header .nav-menu .nav-link,
header.header .nav-menu .nav-item .nav-link,
.wtb-nav .nav-link {
    color: var(--tfast-secondary) !important;
    font-weight: 400;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
    transition: color var(--move-fast) cubic-bezier(0.2, 0, 0, 1);
}

header.header .nav-menu .nav-link:hover,
header.header .nav-menu .nav-item:hover .nav-link,
header.header .nav-menu .nav-link.active {
    color: var(--tfast-text) !important;
    background: transparent;
}

.wtb-locpill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius-pill);
    font-weight: 600;
    font-size: .88rem;
    color: var(--wtb-ink);
    white-space: nowrap;
}

.wtb-locpill:hover {
    border-color: var(--wtb-primary);
    color: var(--wtb-primary);
}

.wtb-header-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-left: auto;
    white-space: nowrap;
}

.wtb-header-actions .wtb-link {
    font-weight: 600;
    color: var(--wtb-ink);
}

.wtb-header-actions .wtb-link:hover {
    color: var(--wtb-primary);
}

/* ---- desktop header fit -------------------------------------------------
   The template sizes the desktop bar for a header with one call to action:
   `.logo` carries a 70px right margin (style.css) and every nav item 15px of
   side padding, cancelled by negative margins on the list. With seven nav
   links, the theme toggle, the CTA and the account links the single row needed
   about 1400px inside a 1200px column (`.container` is --tfast-column 1280
   less two --gutter gutters of 40px), so `.wtb-header-actions` was pushed past
   the container and the end of the row — "Create account" — was clipped by
   `body { overflow-x: hidden }` instead of overflowing visibly.

   Reclaim the template's unused slack so the whole row stays inside the
   column. These rules sit after the base declarations on purpose: the earlier
   media-query versions of the same declarations lost the cascade to
   equal-specificity base rules further down the file and never applied. */
@media (min-width: 1200px) {
    header.header .logo { margin-right: 0; }
    header.header .nav-menu { margin-left: 0; margin-right: 0; }
    header.header .nav-menu .nav-item { padding-left: 0; padding-right: 0; }
    header.header .wtb-header-actions { gap: .6rem; }
}

/* The column stops growing at 1280px, so between 1200px and 1440px the nav and
   the actions close up a little further to keep the row on one line. The deeper
   selector matches the one the base padding is declared on further up. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    header.header .nav-menu .nav-item .nav-link { padding: 0 8px; }
    header.header .wtb-header-actions { gap: .5rem; }
}

.tfast-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
}

.tfast-theme:hover {
    border-color: var(--border-strong);
    background: var(--background-secondary);
}

.tfast-theme svg { display: none; width: 18px; height: 18px; }
.tfast-theme[data-theme-state="light"] .tfast-theme__sun,
.tfast-theme[data-theme-state="dark"] .tfast-theme__moon,
.tfast-theme[data-theme-state="system"] .tfast-theme__system { display: block; }

.tfast-theme:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.wtb-sep {
    color: var(--wtb-line);
}

.wtb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wtb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
}

.wtb-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--wtb-shadow);
    padding: 6px;
    min-width: 210px;
    background: var(--surface-elevated);
}

/* The template styles EVERY .dropdown-menu for its hover-nav: at >=992px it sets
   visibility:hidden, opacity:0, transform:scaleY(0) and only reveals them via
   `.nav-menu .nav-item:hover`. A click-based Bootstrap dropdown outside the nav
   (the account menu) therefore got `.show` but stayed invisible with zero height,
   and the template's `left: 0` beat `.dropdown-menu-end`, pushing it off-screen
   to the right — which also widened the page.

   Scoped to `div.dropdown >` on purpose: the nav's own menus live in
   `li.nav-item.dropdown` and are hover-driven with no `.show` class, so a blanket
   rule here would hide "More" entirely. */
div.dropdown > .dropdown-menu.wtb-menu {
    transition: none;
    overflow: visible;
    transform: none;
    max-width: calc(100vw - 24px);
}

div.dropdown > .dropdown-menu.wtb-menu:not(.show) {
    display: none;
    visibility: hidden;
    opacity: 0;
}

div.dropdown > .dropdown-menu.wtb-menu.show {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* align to the toggle's right edge so it can't run past the viewport */
div.dropdown > .dropdown-menu.wtb-menu.dropdown-menu-end {
    right: 0;
    left: auto;
}

.wtb-menu .dropdown-item {
    border-radius: 8px;
    padding: .55rem .7rem;
    font-weight: 500;
    color: var(--wtb-ink);          /* the template turns these white on small screens */
}

.wtb-menu .dropdown-item:hover,
.wtb-menu .dropdown-item:focus {
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
}

.wtb-menu .dropdown-divider { border-top-color: var(--wtb-line); }
.wtb-menu .dropdown-item i { color: var(--wtb-muted); }
.wtb-menu .dropdown-item:hover i { color: var(--wtb-primary-dark); }

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

.wtb-hero {
    background: linear-gradient(180deg, var(--wtb-primary) 0%, var(--wtb-primary-dark) 100%);
    color: #fff;
    padding: 56px 0 64px;
    text-align: center;
}

.wtb-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 1.4rem;
}

.wtb-hero p.wtb-hero__sub {
    color: rgba(255, 255, 255, .85);
    max-width: 620px;
    margin: 0 auto 1.6rem;
}

.wtb-search {
    display: flex;
    gap: .5rem;
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--wtb-radius-pill);
    padding: .4rem;
    box-shadow: var(--wtb-shadow-lg);
}

.wtb-search__loc {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-right: 1px solid var(--wtb-line);
    color: var(--wtb-ink);
    font-weight: 600;
    font-size: .9rem;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--wtb-radius-pill) 0 0 var(--wtb-radius-pill);
}

.wtb-search__input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: .5rem .4rem;
    font-size: .98rem;
    color: var(--wtb-ink);
    background: transparent;
    min-width: 0;
}

.wtb-search__btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--wtb-primary);
    color: #fff;
    font-size: 1.15rem;
}

.wtb-search__btn:hover {
    background: var(--wtb-primary-dark);
}

@media (max-width: 575.98px) {
    .wtb-search {
        flex-wrap: wrap;
        border-radius: var(--wtb-radius);
    }
    .wtb-search__loc {
        border-right: 0;
        border-bottom: 1px solid var(--wtb-line);
        width: 100%;
    }
}

/* ----------------------------------------------------------------- layout blocks */

.wtb-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
}

.wtb-home-shell {
    max-width: 1380px;
    padding-top: 24px;
}

.wtb-marketplace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.wtb-marketplace__sidebar,
.wtb-marketplace__content {
    min-width: 0;
}

.wtb-marketplace__sidebar {
    position: sticky;
    top: calc(var(--wtb-header-h) + 16px);
}

.wtb-marketplace__heading {
    margin: 26px 0 14px;
}

.wtb-marketplace__heading p {
    margin: 4px 0 0;
    color: var(--wtb-muted);
    font-size: .9rem;
}

.wtb-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wtb-ink);
}

.wtb-view-all i {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--wtb-line);
    border-radius: 10px;
    background: #fff;
}

.wtb-market-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.wtb-market-grid .wtb-card__media {
    aspect-ratio: 4 / 5;
}

.wtb-market-grid .wtb-card__body {
    padding: .8rem .85rem .9rem;
}

.wtb-market-grid .wtb-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    .wtb-marketplace { grid-template-columns: 260px minmax(0, 1fr); }
    .wtb-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .wtb-marketplace { grid-template-columns: 1fr; }
    .wtb-marketplace__sidebar { position: static; }
    .wtb-cat-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .65rem;
        padding: .75rem;
    }
    .wtb-cat-list__title { display: block; grid-column: 1 / -1; }
    .wtb-cat-row {
        min-width: 0;
        min-height: 118px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border: 1px solid var(--wtb-line);
        background: var(--wtb-card);
    }
    .wtb-cat-row__icon { width: 48px; height: 48px; font-size: 1.45rem; }
    .wtb-cat-row__copy { align-items: center; }
    .wtb-cat-row__arrow { display: none; }
}

@media (max-width: 767.98px) {
    .wtb-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wtb-market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .wtb-market-grid .wtb-card__meta,
    .wtb-market-grid .wtb-chips { display: none; }
    .wtb-view-all span { display: none; }
}

@media (max-width: 399.98px) {
    .wtb-market-grid { grid-template-columns: 1fr; }
}

.wtb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.wtb-section-head h2,
.wtb-section-head h1 {
    font-size: 1.4rem;
    margin: 0;
}

.wtb-section-head a {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- category list */

.wtb-panel {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow);
}

.wtb-cat-list {
    padding: .5rem;
}

.wtb-cat-list__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wtb-muted);
    padding: .7rem .8rem .4rem;
}

.wtb-cat-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .8rem;
    border-radius: var(--wtb-radius-sm);
    color: var(--wtb-ink);
    font-weight: 600;
}

.wtb-cat-row__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.wtb-cat-row__copy strong {
    color: inherit;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.wtb-cat-row__copy small {
    color: var(--wtb-muted);
    font-size: .76rem;
    font-weight: 500;
    margin-top: 3px;
}

.wtb-cat-row__arrow {
    color: #9aa5b1;
    margin-left: auto;
}

.wtb-cat-row:hover {
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
}

.wtb-cat-row__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.wtb-cat-row__meta {
    margin-left: auto;
    font-weight: 500;
    font-size: .82rem;
    color: var(--wtb-muted);
}

/* ----------------------------------------------------------------- quick tiles */

.wtb-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    gap: .65rem;
    align-content: start;
}

.wtb-quick__tile {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    min-height: 64px;
    padding: .75rem .9rem;
    text-align: left;
    color: var(--wtb-ink);
    font-weight: 700;
    font-size: .92rem;
    box-shadow: var(--wtb-shadow);
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease;
}

.wtb-quick__tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--wtb-shadow-lg);
    color: var(--wtb-primary-dark);
}

.wtb-quick__tile i {
    display: inline-block;
    font-size: 1.65rem;
    color: var(--wtb-primary);
    margin-bottom: 0;
    flex-shrink: 0;
}

.wtb-quick__tile--1 { background: #fff4ec; }
.wtb-quick__tile--2 { background: #ebf5f0; }
.wtb-quick__tile--3 { background: #eef3fb; }
.wtb-quick__tile--4 { background: #f2eefb; }

@media (max-width: 767.98px) {
    .wtb-quick { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------- rail (horizontal scroller) */

.wtb-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.wtb-rail > * {
    scroll-snap-align: start;
}

@media (min-width: 992px) {
    .wtb-rail {
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: row;
        overflow: visible;
    }
}

/* Portrait discovery rail (homepage). 3:4 photo, name/rating/price below it.
   Mobile shows ~1.7 cards with a peek so the row invites swiping. */
.wtb-rail--portrait .wtb-card__media {
    aspect-ratio: 3 / 4;
}

.wtb-card__media img {
    object-position: 50% 35%;
}

@media (max-width: 991.98px) {
    .wtb-rail--portrait {
        grid-auto-columns: min(58vw, 230px);
    }
}

/* ----------------------------------------------------------------- cards */

.wtb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.wtb-card {
    display: flex;
    flex-direction: column;
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    overflow: hidden;
    box-shadow: var(--wtb-shadow);
    transition: transform .1s ease, box-shadow .15s ease;
    height: 100%;
}

.wtb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wtb-shadow-lg);
}

.wtb-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--wtb-primary-soft);
    overflow: hidden;
}

.wtb-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wtb-card__save {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wtb-ink);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}

.wtb-card__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(18, 69, 55, .92);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: var(--wtb-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.wtb-card__body {
    padding: .9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}

.wtb-card__eyebrow {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wtb-primary);
}

.wtb-card__title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.wtb-card__title a {
    color: var(--wtb-ink);
}

.wtb-card__title a:hover {
    color: var(--wtb-primary);
}

.wtb-card__meta {
    font-size: .85rem;
    color: var(--wtb-muted);
}

.wtb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .2rem 0;
}

.wtb-chip {
    font-size: .74rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: var(--wtb-radius-pill);
    background: var(--wtb-bg);
    color: var(--wtb-ink);
    border: 1px solid var(--wtb-line);
}

.wtb-chip--rating {
    background: #fff7e6;
    border-color: #ffe6ac;
    color: #a9711b;
}

.wtb-chip--type {
    background: var(--wtb-primary-soft);
    border-color: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
}

.wtb-card__price {
    margin-top: auto;
    padding-top: .5rem;
    font-weight: 800;
    color: var(--wtb-ink);
}

.wtb-card__price small {
    font-weight: 600;
    color: var(--wtb-muted);
}

/* Provider directory ------------------------------------------------------- */
.wtb-provider-directory {
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: 64px;
}

.wtb-provider-directory__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.wtb-provider-directory__head h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.wtb-provider-directory__head p {
    max-width: 620px;
    margin: 0;
    color: var(--wtb-muted);
    font-size: 1.02rem;
}

.wtb-provider-filters {
    padding: 18px;
    background: #fff;
    border-radius: var(--wtb-radius);
    box-shadow: 0 10px 32px -22px rgba(16, 24, 40, .28);
}

.wtb-provider-filters .form-control {
    min-height: 48px;
    border-color: #dfe4e1;
    background-color: #fbfcfb;
}

.wtb-provider-filters .form-control:focus {
    background-color: #fff;
    border-color: var(--wtb-primary);
    box-shadow: 0 0 0 3px rgba(18, 105, 82, .12);
}

.wtb-provider-directory__results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    color: var(--wtb-muted);
}

.wtb-provider-directory__results p { margin: 0; }
.wtb-provider-directory__results strong { color: var(--wtb-ink); }
.wtb-provider-directory__results a { color: var(--wtb-primary); font-weight: 700; }

.wtb-provider-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.wtb-provider-card {
    border: 0;
    box-shadow: 0 10px 30px -22px rgba(16, 24, 40, .36);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
}

.wtb-provider-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px -24px rgba(16, 24, 40, .4);
}

.wtb-provider-card .wtb-card__media { aspect-ratio: 16 / 10; }
.wtb-provider-card .wtb-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(10, 35, 28, .25), transparent);
    pointer-events: none;
}

.wtb-provider-card .wtb-card__tag { z-index: 1; top: 12px; bottom: auto; }

.wtb-provider-card__type {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--wtb-radius-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--wtb-primary-dark);
    font-size: .75rem;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .14);
}

.wtb-provider-card .wtb-card__body { padding: 18px; gap: 0; }

.wtb-provider-card__heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wtb-provider-card__heading .wtb-card__title {
    min-width: 0;
    font-size: 1.06rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wtb-provider-card__verified {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wtb-primary);
    color: #fff;
    font-size: .72rem;
}

.wtb-provider-card__profession {
    margin: 7px 0 0;
    color: #42504b;
    font-size: .88rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wtb-provider-card__location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 0 18px;
    color: var(--wtb-muted);
    font-size: .82rem;
}

.wtb-provider-card__location i { color: var(--wtb-primary); font-size: 1rem; }

.wtb-provider-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding-top: 14px;
    border-top: 1px solid #edf0ee;
}

.wtb-provider-card__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--wtb-muted);
    font-size: .76rem;
    font-weight: 600;
}

.wtb-provider-card__rating { color: var(--wtb-ink); font-weight: 800; }
.wtb-provider-card__rating i { color: #dc9b16; margin-right: 2px; }
.wtb-provider-card__dot { width: 3px; height: 3px; border-radius: 50%; background: #a8b0ac; }

.wtb-provider-card__action {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.wtb-provider-card:hover .wtb-provider-card__action {
    background: var(--wtb-primary);
    color: #fff;
    transform: translateX(2px);
}

.wtb-provider-card a:focus-visible,
.wtb-provider-directory a:focus-visible {
    outline: 3px solid rgba(18, 105, 82, .3);
    outline-offset: 3px;
}

.wtb-provider-empty {
    grid-column: 1 / -1;
    padding: 64px 24px;
    text-align: center;
    background: #fff;
    border-radius: var(--wtb-radius);
}

.wtb-provider-empty > i { font-size: 2.5rem; color: var(--wtb-primary); }
.wtb-provider-empty h2 { margin: 12px 0 6px; font-size: 1.35rem; }
.wtb-provider-empty p { margin: 0 0 18px; color: var(--wtb-muted); }

/* Service creation wizard ------------------------------------------------- */
.wtb-service-wizard {
    --wizard-surface: #fff;
    --wizard-soft: #edf6f2;
    --wizard-line: #e2e9e6;
    --wizard-muted: #66736e;
    padding-bottom: 64px;
}

.wtb-service-wizard__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.wtb-service-wizard__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--wtb-primary);
    font-weight: 700;
    font-size: .84rem;
}

.wtb-service-wizard__header h2 {
    margin: 0 0 6px;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.wtb-service-wizard__header p {
    margin: 0;
    color: var(--wizard-muted);
}

.wtb-service-wizard__save-state {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 148px;
    padding: 10px 12px;
    color: var(--wtb-primary-dark);
    background: var(--wizard-soft);
    border-radius: 12px;
}

.wtb-service-wizard__save-state > i { font-size: 1.35rem; }
.wtb-service-wizard__save-state span { display: flex; flex-direction: column; line-height: 1.25; }
.wtb-service-wizard__save-state strong { font-size: .78rem; }
.wtb-service-wizard__save-state small { color: #5f716a; font-size: .7rem; }

.wtb-service-wizard__phasebar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 22px;
    background: var(--wizard-surface);
    border-radius: 14px;
    box-shadow: 0 12px 34px -26px rgba(16, 24, 40, .35);
    overflow: hidden;
}

.wtb-service-wizard__phase { position: relative; }
.wtb-service-wizard__phase:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 1px;
    height: 28px;
    transform: translateY(-50%);
    background: var(--wizard-line);
}

.wtb-service-wizard__phase > a,
.wtb-service-wizard__phase > span {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    color: var(--wizard-muted);
}

.wtb-service-wizard__phase b {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd7d2;
    border-radius: 50%;
    font-size: .74rem;
    font-style: normal;
}

.wtb-service-wizard__phase em {
    font-size: .76rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
}

.wtb-service-wizard__phase.is-active { background: var(--wizard-soft); }
.wtb-service-wizard__phase.is-active b,
.wtb-service-wizard__phase.is-done b { background: var(--wtb-primary); border-color: var(--wtb-primary); color: #fff; }
.wtb-service-wizard__phase.is-active em { color: var(--wtb-primary-dark); }
.wtb-service-wizard__mobile-progress { display: none; }

.wtb-service-wizard__rail {
    position: sticky;
    top: 96px;
    background: var(--wizard-surface);
    border-radius: 14px;
    box-shadow: 0 12px 34px -26px rgba(16, 24, 40, .35);
    overflow: hidden;
}

.wtb-service-wizard__rail-head { padding: 18px 18px 12px; }
.wtb-service-wizard__rail-head span { display: block; color: var(--wtb-primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.wtb-service-wizard__rail-head strong { display: block; margin-top: 3px; color: var(--wtb-ink); font-size: .92rem; }
.wtb-service-wizard__rail ol { list-style: none; margin: 0; padding: 0 10px 10px; }
.wtb-service-wizard__rail li { margin: 2px 0; }
.wtb-service-wizard__rail li > a,
.wtb-service-wizard__rail li > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 9px;
    border-radius: 9px;
    color: #76817d;
    font-size: .8rem;
    font-weight: 600;
}

.wtb-service-wizard__rail li i {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid #d5ddda;
    border-radius: 50%;
    font-size: .67rem;
    font-style: normal;
}

.wtb-service-wizard__rail li.is-active > a,
.wtb-service-wizard__rail li.is-active > span { color: var(--wtb-primary-dark); background: var(--wizard-soft); }
.wtb-service-wizard__rail li.is-active i { color: #fff; background: var(--wtb-primary); border-color: var(--wtb-primary); }
.wtb-service-wizard__rail li.is-done i { color: var(--wtb-primary); border-color: #9bc6b8; }

.wtb-service-wizard__tip {
    display: flex;
    gap: 9px;
    margin: 6px 10px 10px;
    padding: 12px;
    color: #5d6965;
    background: #fafbf9;
    border-radius: 10px;
}
.wtb-service-wizard__tip > i { color: #b47b0b; font-size: 1.1rem; }
.wtb-service-wizard__tip p { margin: 0; font-size: .72rem; line-height: 1.45; }
.wtb-service-wizard__tip strong { display: block; margin-bottom: 2px; color: var(--wtb-ink); }

.wtb-service-wizard__body {
    background: var(--wizard-surface);
    border-radius: 14px;
    box-shadow: 0 16px 42px -30px rgba(16, 24, 40, .4);
}
.wtb-service-wizard__body-inner { padding: clamp(22px, 4vw, 38px); }
.wtb-service-wizard__step-head { margin-bottom: 26px; }
.wtb-service-wizard__step-head > span { color: var(--wtb-primary); font-size: .76rem; font-weight: 800; }
.wtb-service-wizard__step-head h3 { margin: 6px 0 8px; font-size: clamp(1.35rem, 2.5vw, 1.9rem); letter-spacing: -.02em; }
.wtb-service-wizard__step-head p { max-width: 62ch; margin: 0; color: var(--wizard-muted); line-height: 1.6; }

.wtb-service-wizard .form-label { color: #2f3c37; font-size: .82rem; font-weight: 750; }
.wtb-service-wizard .form-control { min-height: 48px; border-color: #dce4e0; border-radius: 10px; background: #fbfcfb; }
.wtb-service-wizard textarea.form-control { min-height: 120px; }
.wtb-service-wizard .form-control:focus { background: #fff; border-color: var(--wtb-primary); box-shadow: 0 0 0 3px rgba(18, 105, 82, .12); }

.wtb-category-search { position: relative; }
.wtb-category-search > i { position: absolute; z-index: 1; top: 50%; left: 16px; transform: translateY(-50%); color: var(--wtb-primary); font-size: 1.15rem; }
.wtb-category-search .form-control { padding-left: 46px; }
.wtb-category-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 450px;
    padding: 2px;
    overflow: auto;
    scrollbar-color: #a8bbb4 transparent;
    scrollbar-width: thin;
}

.wtb-category-option {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--wizard-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.wtb-category-option:hover { border-color: #99bbae; transform: translateY(-1px); }
.wtb-category-option:has(input:checked) { border-color: var(--wtb-primary); background: var(--wizard-soft); }
.wtb-category-option > input { position: absolute; opacity: 0; pointer-events: none; }
.wtb-category-option__mark { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #c7d4cf; border-radius: 50%; color: transparent; }
.wtb-category-option:has(input:checked) .wtb-category-option__mark { color: #fff; background: var(--wtb-primary); border-color: var(--wtb-primary); }
.wtb-category-option__copy { min-width: 0; flex: 1; }
.wtb-category-option__copy strong { display: block; color: var(--wtb-ink); font-size: .88rem; }
.wtb-category-option__copy small { display: block; margin-top: 3px; color: var(--wizard-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtb-category-option__arrow { color: #9ba6a2; }
.wtb-service-wizard__category-action,
.wtb-service-wizard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--wizard-line);
}

.wtb-service-wizard__actions > div:last-child { display: flex; gap: 8px; }
.wtb-service-wizard a:focus-visible,
.wtb-service-wizard button:focus-visible,
.wtb-category-option:focus-within { outline: 3px solid rgba(18, 105, 82, .28); outline-offset: 3px; }

@media (max-width: 1199.98px) {
    .wtb-service-wizard__phase em { font-size: .7rem; }
}

@media (max-width: 991.98px) {
    .wtb-service-wizard__phasebar,
    .wtb-service-wizard__rail-col { display: none; }
    .wtb-service-wizard__mobile-progress { display: block; margin: 0 0 18px; padding: 14px 16px; background: #fff; border-radius: 12px; }
    .wtb-service-wizard__mobile-progress > span { display: block; color: var(--wtb-primary); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
    .wtb-service-wizard__mobile-progress > strong { display: block; margin: 2px 0 9px; font-size: .9rem; }
    .wtb-service-wizard__mobile-progress > div { height: 5px; overflow: hidden; background: #e4ece8; border-radius: 99px; }
    .wtb-service-wizard__mobile-progress i { display: block; height: 100%; background: var(--wtb-primary); border-radius: inherit; }
}

@media (max-width: 575.98px) {
    .wtb-service-wizard__header { align-items: start; }
    .wtb-service-wizard__save-state { display: none; }
    .wtb-service-wizard__header p { font-size: .84rem; }
    .wtb-service-wizard__body-inner { padding: 20px 16px; }
    .wtb-category-picker { grid-template-columns: 1fr; max-height: 52vh; }
    .wtb-service-wizard__category-action { position: sticky; bottom: 0; margin: 18px -16px -20px; padding: 14px 16px; background: #fff; box-shadow: 0 -12px 24px -22px rgba(16, 24, 40, .5); }
    .wtb-service-wizard__category-action .btn:first-child { display: none; }
    .wtb-service-wizard__category-action .btn { width: 100%; }
    .wtb-service-wizard__actions { align-items: stretch; }
    .wtb-service-wizard__actions > div:last-child { flex: 1; }
    .wtb-service-wizard__actions .btn { min-height: 44px; }
    .wtb-service-wizard__actions button[name="stay"] { display: none; }
    .wtb-service-wizard__actions > div:last-child .btn:last-child { flex: 1; }
}

@media (max-width: 1199.98px) {
    .wtb-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .wtb-provider-directory { padding-top: 24px; }
    .wtb-provider-directory__head { align-items: start; margin-bottom: 22px; }
    .wtb-provider-directory__head .wtb-btn { display: none; }
    .wtb-provider-filters { padding: 14px; }
    .wtb-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .wtb-provider-card .wtb-card__body { padding: 14px; }
    .wtb-provider-card__type { right: 8px; bottom: 8px; padding: 5px 8px; font-size: .68rem; }
    .wtb-provider-card__location { margin-bottom: 12px; }
    .wtb-provider-card__trust > span:not(.wtb-provider-card__rating):not(.wtb-provider-card__dot) { display: none; }
}

@media (max-width: 479.98px) {
    .wtb-provider-grid { grid-template-columns: 1fr; }
    .wtb-provider-card .wtb-card__media { aspect-ratio: 16 / 9; }
}

/* ----------------------------------------------------------------- filter bar */

.wtb-layout {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.wtb-layout > * {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wtb-layout {
        grid-template-columns: 1fr;
    }
}

.wtb-filterbar {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow);
    padding: 1rem 1.1rem;
    position: sticky;
    top: calc(var(--wtb-header-h) + 12px);
}

.wtb-filterbar .form-group {
    margin-bottom: 1rem;
}

.wtb-filterbar .form-label {
    font-weight: 700;
    font-size: .82rem;
    color: var(--wtb-ink);
    margin-bottom: .3rem;
}

.wtb-filterbar .form-control,
.wtb-filterbar .form-select {
    border-radius: var(--wtb-radius-sm);
    border-color: var(--wtb-line);
    font-size: .9rem;
}

/* Native selects, styled to match. The nice-select plugin no longer runs here
   (see js/app.js) — native controls give the OS picker on touch devices and stay
   in sync when JS changes a value, e.g. the region → district cascade. */
.wtb-filterbar select.form-control,
.wtb-filterbar select.form-select,
.wtb-shell select.form-control,
.wtb-shell select.form-select {
    display: block;
    width: 100%;
    min-height: 44px;                 /* comfortable touch target */
    padding: .55rem 2.2rem .55rem .75rem;
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius-sm);
    background-color: #fff;
    /* own chevron so it looks the same across browsers */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 15px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--wtb-ink, #1f2a37);
    cursor: pointer;
}

.wtb-filterbar select.form-control:focus,
.wtb-shell select.form-control:focus {
    border-color: var(--wtb-primary, #0b3f9e);
    outline: 2px solid rgba(27, 94, 75, .18);
    outline-offset: 0;
}

/* optgroup labels (Region → District grouping) */
.wtb-filterbar select optgroup {
    font-weight: 700;
    color: var(--wtb-muted, #6b7280);
}

/* If the plugin ever runs again, don't let a stale wrapper cover the real one. */
.wtb-filterbar .nice-select,
.wtb-shell .nice-select {
    display: none !important;
}

.wtb-filterbar__summary {
    display: none;
}

/* Two related controls on one row — halves the height of the panel so more
   filters are visible without scrolling. auto-fit means they stack rather than
   squeeze when the column is too narrow (a 114px select clipped "All districts"). */
.wtb-filterbar__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: .5rem;
}

/* count badge on the mobile "Filters" toggle */
.wtb-filterbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .4rem;
    border-radius: 999px;
    background: var(--wtb-primary, #0b3f9e);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.wtb-filterbar__actions {
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .wtb-filterbar {
        position: static;
        padding: 0;
        overflow: hidden;
    }
    .wtb-filterbar__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .9rem 1.1rem;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    .wtb-filterbar__summary::-webkit-details-marker { display: none; }
    .wtb-filterbar[open] .wtb-filterbar__summary {
        border-bottom: 1px solid var(--wtb-line);
    }
    .wtb-filterbar[open] .wtb-filterbar__summary .la-angle-down {
        transform: rotate(180deg);
    }
    .wtb-filterbar__inner {
        padding: 1rem 1.1rem;
        /* the panel scrolls internally so Apply stays put instead of pushing
           the results far down the page */
        max-height: 70vh;
        overflow-y: auto;
    }
    /* Apply is always reachable without scrolling back through every filter */
    .wtb-filterbar__actions {
        position: sticky;
        bottom: 0;
        margin: 1rem -1.1rem -1rem;
        padding: .75rem 1.1rem;
        background: #fff;
        border-top: 1px solid var(--wtb-line);
    }
}

/* Desktop: the filter column scrolls with its own sticky offset so a long list
   never runs past the results. */
@media (min-width: 992px) {
    .wtb-filterbar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

.wtb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.wtb-toolbar__count {
    color: var(--wtb-muted);
    font-weight: 600;
}

.wtb-seg {
    display: inline-flex;
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius-pill);
    overflow: hidden;
    background: #fff;
}

.wtb-seg a {
    padding: .4rem .9rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--wtb-ink);
}

.wtb-seg a.is-active {
    background: var(--wtb-primary);
    color: #fff;
}

/* ----------------------------------------------------------------- detail pages */

.wtb-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.75rem;
    align-items: start;
}

.wtb-detail > * {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .wtb-detail {
        grid-template-columns: 1fr;
    }
}

.wtb-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 150px;
    gap: .5rem;
    border-radius: var(--wtb-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.wtb-gallery__main {
    grid-row: span 2;
    grid-column: 1;
    position: relative;
}

.wtb-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wtb-gallery--single {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, 32vh);
}

.wtb-gallery--single .wtb-gallery__main {
    grid-row: auto;
}

.wtb-provider-cover {
    grid-auto-rows: clamp(180px, 22vw, 280px);
}

.wtb-provider-cover img {
    object-position: center 42%;
}

.wtb-provider-summary {
    position: relative;
    z-index: 2;
    margin: -28px 24px 0;
    padding: 22px 24px;
    background: #fff;
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: center;
}

.wtb-provider-summary__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.wtb-provider-summary__avatar {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    object-fit: cover;
    flex: 0 0 auto;
}

.wtb-provider-summary__avatar--fallback {
    display: grid;
    place-items: center;
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
    font-size: 2rem;
    font-weight: 800;
}

.wtb-provider-summary__copy { min-width: 0; }
.wtb-provider-summary__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wtb-provider-summary h1 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin: 0; }
.wtb-provider-summary__copy > p { margin: 3px 0 8px; color: var(--wtb-muted); }
.wtb-provider-summary__facts { display: flex; flex-wrap: wrap; gap: 7px 16px; font-size: .88rem; }
.wtb-provider-summary__facts span { display: inline-flex; align-items: center; gap: 5px; }
.wtb-provider-summary__facts i { color: var(--wtb-primary); font-size: 1rem; }
.wtb-provider-summary__actions { display: flex; align-items: center; gap: 8px; }
.wtb-provider-summary__categories { grid-column: 1 / -1; margin: -2px 0 0 104px; }

@media (max-width: 767.98px) {
    .wtb-provider-cover { grid-auto-rows: 180px; }
    .wtb-provider-summary { margin: -18px 10px 0; padding: 18px; grid-template-columns: 1fr; }
    .wtb-provider-summary__identity { align-items: flex-start; }
    .wtb-provider-summary__avatar { width: 68px; height: 68px; }
    .wtb-provider-summary__actions { width: 100%; }
    .wtb-provider-summary__actions .wtb-btn { flex: 1; }
    .wtb-provider-summary__categories { margin-left: 0; }
}

@media (max-width: 575.98px) {
    .wtb-gallery {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 120px;
    }
    .wtb-gallery__main {
        grid-column: span 2;
        grid-row: auto;
    }
}

.wtb-titleblock h1 {
    font-size: 1.7rem;
    margin-bottom: .35rem;
}

.wtb-titleblock__meta {
    color: var(--wtb-muted);
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.wtb-titleblock__meta a {
    font-weight: 600;
}

.wtb-block {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
}

.wtb-block > h5,
.wtb-block > h4 {
    margin-top: 0;
    margin-bottom: .9rem;
    font-size: 1.05rem;
}

.wtb-kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1.25rem;
}

.wtb-kv__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--wtb-line);
    font-size: .92rem;
}

.wtb-kv__row span:first-child {
    color: var(--wtb-muted);
}

.wtb-kv__row span:last-child {
    font-weight: 600;
    text-align: right;
}

@media (max-width: 575.98px) {
    .wtb-kv { grid-template-columns: 1fr; }
}

.wtb-booking-card {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow-lg);
    padding: 1.25rem 1.35rem;
    position: sticky;
    top: calc(var(--wtb-header-h) + 12px);
}

/* The detail sidebar contains both booking and advertising. Keep the pair in
   normal document flow so the sticky booking card cannot slide over the ad. */
.wtb-service-aside .wtb-booking-card {
    position: static;
}

.wtb-booking-card__price {
    font-size: 1.5rem;
    font-weight: 800;
}

.wtb-booking-card__price small {
    font-size: .85rem;
    font-weight: 600;
    color: var(--wtb-muted);
}

.wtb-booking-card table {
    width: 100%;
    font-size: .88rem;
    margin: .75rem 0;
}

.wtb-booking-card table td {
    padding: .3rem 0;
    border-bottom: 1px dashed var(--wtb-line);
}

.wtb-booking-card .btn--base,
.wtb-booking-card .wtb-btn {
    width: 100%;
}

/* reviews */

.wtb-review {
    display: flex;
    gap: .85rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--wtb-line);
}

.wtb-review:last-child {
    border-bottom: 0;
}

.wtb-review__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.wtb-stars {
    color: #b07d0a;   /* deep amber — ~3.5:1 on white (was #e6a817 ≈ 2.1:1) */
    letter-spacing: 1px;
}

/* ----------------------------------------------------------------- how it works */

.wtb-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 767.98px) {
    .wtb-steps { grid-template-columns: 1fr; }
}

.wtb-step {
    background: var(--wtb-card);
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    padding: 1.4rem;
    box-shadow: var(--wtb-shadow);
}

.wtb-step__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wtb-primary);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .7rem;
}

/* ----------------------------------------------------------------- provider CTA band */

.wtb-ctaband {
    background: linear-gradient(120deg, var(--wtb-primary-dark), var(--wtb-primary));
    color: #fff;
    border-radius: var(--wtb-radius);
    padding: 2rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.wtb-ctaband h3 {
    color: #fff;
    margin: 0 0 .35rem;
}

.wtb-ctaband p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
}

/* ----------------------------------------------------------------- advertising inventory */

.wtb-ad-slot {
    clear: both;
    min-width: 0;
    min-height: 120px;
    margin: 2rem 0;
    padding: 1rem 0;
    overflow: hidden;
    border-block: 1px solid var(--wtb-line);
    text-align: center;
}

.wtb-ad-slot__label {
    display: block;
    margin-bottom: .5rem;
    color: var(--wtb-muted);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wtb-ad-slot .adsbygoogle { min-width: 250px; }

.wtb-ad-slot__available {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    max-width: 760px;
    min-height: 88px;
    margin: auto;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: var(--wtb-primary-soft);
    text-align: start;
}

.wtb-ad-slot__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-inline: 0;
    border-radius: 12px;
    background: var(--wtb-primary);
    color: #fff;
}

.wtb-ad-slot__available strong,
.wtb-ad-slot__available small,
.wtb-ad-slot__campaign strong,
.wtb-ad-slot__campaign small { display: block; overflow-wrap: anywhere; }
.wtb-ad-slot__available strong { color: var(--wtb-ink); }
.wtb-ad-slot__available small { margin-top: .2rem; color: var(--wtb-muted); }

.wtb-ad-slot__available a {
    min-height: 44px;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: var(--wtb-primary);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.wtb-ad-slot__campaign {
    position: relative;
    display: block;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    border-radius: 14px;
    background: var(--wtb-primary-dark);
    color: #fff;
    text-align: start;
}

.wtb-ad-slot__campaign img { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.wtb-ad-slot__campaign > span { position: absolute; inset: auto 0 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(transparent, rgba(13, 63, 51, .94)); }
.wtb-ad-slot__campaign small { margin-top: .2rem; color: #eaf4f0; }

.wtb-ad-slot--rail {
    min-height: 340px;
    margin: 1rem 0 0;
    padding: .75rem;
    border: 1px solid var(--wtb-line);
    border-radius: 14px;
    background: #fff;
}

.wtb-ad-slot--rail .wtb-ad-slot__available,
.wtb-ad-slot--card .wtb-ad-slot__available,
.wtb-ad-slot--footer .wtb-ad-slot__available {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: inherit;
    text-align: center;
}

.wtb-ad-slot--rail .wtb-ad-slot__mark,
.wtb-ad-slot--card .wtb-ad-slot__mark,
.wtb-ad-slot--footer .wtb-ad-slot__mark { margin-inline: auto; }
.wtb-ad-slot--rail .wtb-ad-slot__campaign img { aspect-ratio: 4 / 5; min-height: 300px; }

.wtb-ad-slot--card {
    min-height: 100%;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--wtb-line);
    border-radius: 14px;
    background: #fff;
}

.wtb-ad-slot--card.wtb-ad-slot--span-1 { grid-column: span 1; }
.wtb-ad-slot--card.wtb-ad-slot--span-2 { grid-column: span 2; }
.wtb-ad-slot--card.wtb-ad-slot--span-3 { grid-column: span 3; }
.wtb-ad-slot--card.wtb-ad-slot--span-4 { grid-column: span 4; }

.wtb-ad-slot--card .wtb-ad-slot__available { height: 100%; }
.wtb-ad-slot--card .wtb-ad-slot__campaign,
.wtb-ad-slot--card .wtb-ad-slot__campaign img { height: 100%; min-height: 300px; }
.wtb-ad-slot--card .wtb-ad-slot__campaign img { aspect-ratio: 2 / 1; }

@media (max-width: 1199.98px) and (min-width: 768px) {
    .wtb-ad-slot--card.wtb-ad-slot--span-4 { grid-column: span 3; }
}

@media (max-width: 767.98px) {
    .wtb-ad-slot--card { grid-column: span 2 !important; }
}

@media (max-width: 575.98px) {
    .wtb-ad-slot { min-height: 100px; margin-block: 1.5rem; }
    .wtb-ad-slot .adsbygoogle { min-width: 0; }
    .wtb-ad-slot--banner .wtb-ad-slot__available { grid-template-columns: auto 1fr; }
    .wtb-ad-slot--banner .wtb-ad-slot__available a { grid-column: 1 / -1; }
    .wtb-ad-slot--banner .wtb-ad-slot__campaign img { aspect-ratio: 2 / 1; }
    .wtb-ad-slot--rail { display: none; }
}

@media (max-width: 479.98px) {
    .wtb-ad-slot--card { grid-column: span 1 !important; }
}

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

footer.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: rgba(244, 247, 251, 0.82);
    border-top: 0;
    background:
        radial-gradient(ellipse 70% 55% at 88% 0%, rgba(43, 108, 214, 0.45), transparent 58%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(214, 148, 72, 0.18), transparent 55%),
        linear-gradient(165deg, #07101c 0%, #122033 58%, #0b1626 100%);
}

footer.footer::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -10%;
    top: 18%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(186, 220, 255, 0.15) 18%, rgba(210, 232, 255, 0.85) 46%, transparent 72%);
    transform: rotate(-6deg);
    pointer-events: none;
}

footer.footer .wtb-footer,
footer.footer .wtb-footer-bottom {
    position: relative;
    z-index: 1;
}

footer.footer .wtb-footer h5,
footer.footer .wtb-footer a.wtb-footer__logo span {
    color: #fff;
}

footer.footer .wtb-footer a,
footer.footer .wtb-footer__brand p {
    color: rgba(244, 247, 251, 0.78);
}

footer.footer .wtb-footer a:hover {
    color: #fff;
}

footer.footer .wtb-footer__social a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

footer.footer .wtb-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.14);
    color: rgba(244, 247, 251, 0.62);
}

footer.footer .wtb-footer-bottom a {
    color: inherit;
}

footer.footer .newsletter {
    border-color: rgba(255, 255, 255, 0.28);
}

footer.footer .newsletter__input,
footer.footer .newsletter__input:focus {
    color: #fff;
    background: transparent;
}

footer.footer .newsletter__input::placeholder {
    color: rgba(244, 247, 251, 0.55);
}

.wtb-footer {
    max-width: var(--container);
    margin: 0 auto;
    padding: 64px var(--gutter) 24px;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    gap: 1.75rem 2rem;
}

.wtb-footer--with-areas {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)) minmax(240px, 1.15fr);
}

.wtb-footer .wtb-ad-slot--footer {
    align-self: start;
    min-height: 260px;
    margin: 0;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.wtb-footer .wtb-ad-slot--footer .wtb-ad-slot__label { color: rgba(255, 255, 255, .72); }
.wtb-footer .wtb-ad-slot--footer .wtb-ad-slot__available { background: #eaf4f0; }
.wtb-footer .wtb-ad-slot--footer .wtb-ad-slot__campaign img { aspect-ratio: 4 / 3; min-height: 220px; }

@media (max-width: 767.98px) {
    .wtb-footer,
    .wtb-footer--with-areas { grid-template-columns: 1fr 1fr; }
    .wtb-footer .wtb-ad-slot--footer { grid-column: 1 / -1; min-height: 180px; }
}

@media (max-width: 479.98px) {
    .wtb-footer,
    .wtb-footer--with-areas { grid-template-columns: 1fr; }
}

.wtb-footer h5 {
    color: var(--text-primary);
    font-size: .95rem;
    margin: 0 0 .9rem;
}

.wtb-footer a {
    color: var(--text-secondary);
    display: block;
    padding: .28rem 0;
    font-size: .92rem;
}

.wtb-footer a:hover {
    color: var(--text-primary);
}

.wtb-footer__brand p {
    font-size: .92rem;
    max-width: 32ch;
}

.wtb-footer__social {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
}

.wtb-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--background-secondary);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.wtb-footer__social a:hover {
    background: var(--wtb-accent-cta);
}

.wtb-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--text-muted);
}

.wtb-footer-bottom a {
    color: var(--text-muted);
}

footer.footer .newsletter {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

footer.footer .newsletter__input,
footer.footer .newsletter__input:focus {
    color: var(--text-primary);
    background: transparent;
}

footer.footer .newsletter__input::placeholder {
    color: var(--text-muted);
}

/* kill the legacy CTA band that sat above the footer */
.footer .cta {
    display: none;
}

/* ----------------------------------------------------------------- breadcrumb */

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
}

.breadcrumb::after {
    display: none !important;
    content: none !important;
}

.wtb-crumb {
    background: var(--wtb-bg);
    border-bottom: 1px solid var(--wtb-line);
    padding: .8rem 0;
    font-size: .88rem;
}

.wtb-crumb a {
    color: var(--wtb-muted);
    font-weight: 600;
}

.wtb-crumb a:hover {
    color: var(--wtb-primary);
}

.wtb-crumb span {
    color: var(--wtb-ink);
    font-weight: 600;
}

/* ----------------------------------------------------------------- misc legacy bridges */

.custom--card {
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    box-shadow: var(--wtb-shadow);
    background: var(--wtb-card);
}

.badge--base {
    background: var(--wtb-primary) !important;
    color: #fff !important;
}

.badge--warning {
    background: #f4b740 !important;
    color: #3d2c00 !important;
}

/* legacy status badges still used on a few un-redesigned rows — keep them legible */
.badge--success { background: var(--wtb-primary) !important; color: #fff !important; }
.badge--dark    { background: var(--wtb-ink) !important; color: #fff !important; }
.badge--secondary { background: #e5e7eb !important; color: var(--wtb-ink) !important; }
.badge--danger  { background: #d64545 !important; color: #fff !important; }

.pagination .page-link {
    color: var(--wtb-primary);
    border-radius: 8px;
    margin: 0 2px;
    border-color: var(--wtb-line);
}

.pagination .active .page-link {
    background: var(--wtb-primary);
    border-color: var(--wtb-primary);
}

/* keep the Communication Policy Engine mobile bar on-brand + above the consent card */
.cba-bar {
    z-index: 1056 !important;
}

.cba-bar__btn--book {
    background: var(--wtb-primary) !important;
}

/* dock the GDPR cookie card so it stops covering hero/rail content */
.cookies-card {
    position: fixed;
    left: 16px;
    right: auto;
    bottom: 16px;
    max-width: 340px;
    width: calc(100% - 32px);
    background: var(--tfast-frame);
    color: var(--tfast-text);
    border: 1px solid var(--tfast-line);
    border-radius: var(--tfast-radius);
    box-shadow: none;
    padding: 1rem 1.1rem;
    z-index: 1050;
}

.cookies-card__content {
    font-size: .85rem;
    color: var(--wtb-muted);
    margin-top: .5rem !important;
}

@media (max-width: 991.98px) {
    .cookies-card { bottom: 88px; }
}

@media (max-width: 767.98px) {
    .cookies-card {
        left: 12px;
        right: 72px;
        bottom: 12px;
        width: auto;
        max-width: none;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 10px 12px;
    }
    .cookies-card__icon { display: none; }
    .cookies-card__content { margin-top: 0 !important; flex: 1 1 auto; }
    .cookies-card__btn { margin-top: 0 !important; flex: 0 0 auto; }
    .cookies-card__btn .btn { width: auto; white-space: nowrap; }
}
/* Provider onboarding: locked workspace actions remain visible and explain why. */
.wtb-sidebar-locked {
    align-items: center;
    color: #75827d;
    cursor: not-allowed;
    display: flex;
    gap: 12px;
    opacity: .72;
    padding: 12px 18px;
    user-select: none;
}

.wtb-sidebar-locked img {
    filter: grayscale(1);
    opacity: .7;
}
/* --------------------------------------------------------------------------
   Focused authentication experience — centered, no chrome
   -------------------------------------------------------------------------- */
.auth-experience {
    --auth-green: #155b49;
    --auth-green-dark: #0d3f33;
    --auth-green-soft: #eaf4f0;
    --auth-ink: #17232f;
    --auth-muted: #5f6f7c;
    --auth-line: #d9e2de;
    position: relative;
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: max(28px, env(safe-area-inset-top)) clamp(20px, 5vw, 40px) calc(36px + env(safe-area-inset-bottom));
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 50% -10%, rgba(21, 91, 73, .14), transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(21, 91, 73, .08), transparent 55%),
        linear-gradient(180deg, #f4f8f6 0%, #eef5f1 100%);
    color: var(--auth-ink);
}

.auth-experience ::selection { background: #cfe7dd; color: var(--auth-green-dark); }

.auth-experience__brand {
    display: flex;
    width: max-content;
    align-items: center;
    margin: 0 auto 28px;
    text-decoration: none;
}

.auth-experience__brand img {
    display: block;
    width: auto;
    max-width: 48px;
    max-height: 48px;
}

.auth-experience__form-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    margin-inline: auto;
}

.auth-experience--register .auth-experience__form-wrap {
    width: min(100%, 480px);
}

.auth-experience a:focus-visible,
.auth-experience button:focus-visible { outline: 3px solid rgba(21, 91, 73, .3); outline-offset: 3px; }

.auth-experience__heading {
    margin-bottom: 28px;
    text-align: center;
}
.auth-experience__heading h1 {
    margin: 0 0 8px;
    color: var(--auth-ink);
    font-size: clamp(1.75rem, 4vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}
.auth-experience__heading p {
    max-width: 36ch;
    margin: 0 auto;
    color: var(--auth-muted);
    font-size: .95rem;
    line-height: 1.55;
}

.auth-form { display: grid; gap: 22px; }
.auth-form__two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-field { display: grid; gap: 8px; margin: 0; }
.auth-field label,
.auth-field__label-row { margin: 0; color: var(--auth-ink); font-size: .88rem; font-weight: 700; }
.auth-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-field__label-row a { color: var(--auth-green); font-size: .82rem; font-weight: 700; }
.auth-field__control { display: flex; min-height: 56px; align-items: center; border: 1px solid var(--auth-line); border-radius: 14px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-field__control:focus-within { border-color: var(--auth-green); box-shadow: 0 0 0 4px rgba(21, 91, 73, .1); }
.auth-field__control > i { flex: 0 0 48px; color: var(--auth-green); text-align: center; font-size: 1.2rem; }
.auth-field__control input { width: 100%; min-width: 0; min-height: 54px; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: var(--auth-ink); font-size: 1rem; caret-color: var(--auth-green); }
.auth-field__toggle { display: grid; flex: 0 0 48px; align-self: stretch; padding: 0; place-items: center; border: 0; border-radius: 0 14px 14px 0; background: transparent; color: #52616d; cursor: pointer; font-size: 1.25rem; }
.auth-field__toggle:hover { background: var(--auth-green-soft); color: var(--auth-green); }
.auth-field__hint,
.auth-field__status { color: var(--auth-muted); font-size: .78rem; line-height: 1.45; }
.auth-field__status:empty { display: none; }
.auth-field__status.is-error,
.auth-field__error { color: #a52d2d; font-size: .8rem; line-height: 1.4; }
.auth-field__status a { color: currentColor; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.auth-session-note { display: flex; align-items: flex-start; gap: 9px; margin-top: -4px; color: var(--auth-muted); font-size: .83rem; line-height: 1.5; }
.auth-session-note i { margin-top: 2px; color: var(--auth-green); font-size: 1rem; }
.auth-submit { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 0 20px; border: 0; border-radius: 14px; background: var(--auth-green); box-shadow: 0 10px 22px rgba(21, 91, 73, .2); color: #fff; cursor: pointer; font-size: 1rem; font-weight: 750; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.auth-submit:hover { background: var(--auth-green-dark); box-shadow: 0 12px 26px rgba(13, 63, 51, .24); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.auth-submit i { font-size: 1.15rem; }

.auth-switch { margin: -2px 0 0; color: var(--auth-muted); text-align: center; font-size: .9rem; }
.auth-switch a { color: var(--auth-green); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.auth-alert { display: flex; gap: 12px; margin-bottom: 24px; padding: 14px 16px; border-radius: 14px; background: #fff0f0; color: #7f2020; }
.auth-alert:focus { outline: 3px solid rgba(165, 45, 45, .26); outline-offset: 3px; }
.auth-alert > i { margin-top: 2px; font-size: 1.3rem; }
.auth-alert strong { display: block; margin-bottom: 2px; }
.auth-alert p { margin: 0; color: #7f2020; font-size: .86rem; line-height: 1.45; }
.auth-alert a { display: inline-block; margin-top: 5px; color: #7f2020; font-size: .82rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.auth-social { display: grid; gap: 16px; }
.auth-social__divider { display: flex; align-items: center; gap: 12px; color: var(--auth-muted); font-size: .78rem; white-space: nowrap; }
.auth-social__divider::before,
.auth-social__divider::after { content: ""; width: 100%; height: 1px; background: var(--auth-line); }
.auth-social__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.auth-social__options a { display: inline-flex; min-height: 46px; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--auth-line); border-radius: 12px; background: #fff; color: var(--auth-ink); font-size: .85rem; font-weight: 700; text-decoration: none; }
.auth-social__options a:hover { border-color: #a8bdb5; background: var(--auth-green-soft); color: var(--auth-green-dark); }
.auth-social__options i { font-size: 1.15rem; }
.auth-consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; color: var(--auth-muted); font-size: .82rem; line-height: 1.55; }
.auth-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--auth-green); }
.auth-consent input:focus-visible { outline: 3px solid rgba(21, 91, 73, .3); outline-offset: 3px; }
.auth-consent label { margin: 0; }
.auth-consent a { color: var(--auth-green); font-weight: 700; text-underline-offset: 3px; }

/* Authentication is a focused task. Global marketing and support overlays can
   return immediately after the user leaves this surface. */
body:has(.auth-experience) .cookies-card,
body:has(.auth-experience) .ai-chat-widget,
body:has(.auth-experience) .pwa-tabbar,
body:has(.auth-experience) .preloader,
body:has(.auth-experience) .body-overlay { display: none !important; }

body:has(.auth-experience) > .main-wrapper,
body:has(.auth-experience) > .main-wrapper > .main-wrapper {
    min-height: 100dvh;
    background: transparent;
}

.pwa-standalone body:has(.auth-experience) { padding-bottom: env(safe-area-inset-bottom); }
.pwa-standalone body:has(.auth-experience) .pwa-tabbar,
.pwa-standalone body:has(.auth-experience) .ai-chat-widget { display: none !important; }

@media (max-width: 575.98px) {
    .auth-form__two-col { grid-template-columns: 1fr; }
    .auth-experience__heading { margin-bottom: 22px; }
    .auth-field__hint { display: none; }
    .auth-social__options a { flex: 1 1 120px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit,
    .auth-field__control { transition: none; }
}

/* Safety reporting stays quiet until requested and never competes with booking. */
.wtb-report {
    border-top: 1px solid #d9e2de;
    padding-top: 14px;
}
.wtb-report > summary,
.wtb-report-link {
    align-items: center;
    color: #5f6f7c;
    cursor: pointer;
    display: inline-flex;
    font-size: .875rem;
    gap: 7px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.wtb-report > summary:hover,
.wtb-report-link:hover { color: #0d3f33; }
.wtb-report > summary:focus-visible,
.wtb-report-link:focus-visible { outline: 3px solid rgb(210 166 42 / 55%); outline-offset: 4px; }
.wtb-report textarea { min-height: 112px; resize: vertical; }

/* ------------------------------------------------------------------
   Brand lockup

   The logo is an emblem with no wordmark of its own, so the site name is
   set as text beside it rather than baked into the artwork. Keeping the
   name in HTML means it scales with the reader's font size, stays
   selectable and searchable, and re-renders instantly when an admin
   changes the site name.

   These rules follow the earlier `header.header .logo` block, so the
   narrower max-width below deliberately overrides the 190px sized for the
   old wide wordmark.
   ------------------------------------------------------------------ */

header.header .logo {
    gap: 10px;
}

header.header .logo img,
header.header .logo__is {
    height: 40px;
    width: auto;
    max-width: 64px;
}

header.header .logo,
header.header .logo__name {
    color: var(--tfast-text) !important;
}

header.header .logo__name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    header.header .logo__name {
        font-size: 13px;
        white-space: nowrap;
        max-width: none;
    }

    header.header .logo img,
    header.header .logo__is {
        height: 34px;
    }
}

/*
 * Footer lockup, on the dark green ground.
 *
 * Qualified with the ancestor because `.wtb-footer a` sets display:block at
 * specificity (0,1,1); an unqualified `.wtb-footer__logo` is (0,1,0) and loses
 * no matter how late it appears, which collapses the flex gap.
 */
.wtb-footer a.wtb-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.wtb-footer a.wtb-footer__logo img {
    height: 40px;
    width: auto;
}

.wtb-footer a.wtb-footer__logo span {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    color: #fff;
}

/*
 * Auth screens: emblem plus name on the light centered surface.
 */
.auth-experience__brand {
    gap: 10px;
}

.auth-experience__brand-name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--auth-ink, var(--wtb-ink));
    white-space: nowrap;
}

/* =========================================================================
   Sticky footer

   The layout nests two .main-wrapper divs -- one from layouts/app, one from
   layouts/frontend -- and neither reserved any height. On a page shorter than
   the viewport the footer stopped wherever the content ended and the body
   background showed through beneath it, which reads as a half-loaded page.
   An empty blog listing made it obvious.

   The outer wrapper fills the viewport, the inner one absorbs the slack, and
   the footer is pushed to the bottom of it. Laying these out as flex items is
   safe here: .section spaces itself with padding rather than margin, so there
   are no collapsing margins to lose, and .preloader, .body-overlay and
   .scroll-top are all position:fixed and stay out of the flow.
   ========================================================================= */
body > .main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .main-wrapper > .main-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body > .main-wrapper > .main-wrapper > .footer {
    margin-top: auto;
}

/* =========================================================================
   Empty states

   A listing with nothing in it previously rendered an empty <div> -- a
   heading, then the footer. Saying so is better than showing a blank.
   ========================================================================= */
.empty-state {
    padding: 56px 24px;
    text-align: center;
    color: var(--wtb-muted, #6b7280);
}

.empty-state__icon {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--wtb-primary, #0b3f9e);
    opacity: .45;
    margin-bottom: 1rem;
}

.empty-state__title {
    margin: 0 0 .35rem;
    color: var(--wtb-ink, #16202c);
    font-weight: 700;
}

.empty-state__text {
    margin: 0 auto;
    max-width: 46ch;
}

/* =========================================================================
   Blog: search, taxonomy and post metadata

   The listing previously had a heading and a grid of cards and nothing else:
   no way to search, no categories, no tags, and no indication of how long a
   post takes to read. These style the controls that were added with the
   editorial layer.
   ========================================================================= */
.blog-head {
    margin-bottom: 1.75rem;
}

.blog-head__lead {
    max-width: 62ch;
    margin: .5rem 0 0;
    color: var(--wtb-muted);
}

.blog-search {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
    max-width: 520px;
}

.blog-search__input {
    flex: 1 1 auto;
    min-width: 0;
}

.blog-search__btn {
    flex: 0 0 auto;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.blog-chip {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--wtb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--wtb-ink);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.blog-chip:hover {
    border-color: var(--wtb-primary);
    color: var(--wtb-primary);
    text-decoration: none;
}

.blog-chip.is-active {
    background: var(--wtb-primary);
    border-color: var(--wtb-primary);
    color: #fff;
}

.blog-active-filter {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: var(--wtb-muted);
    font-size: .9rem;
}

.blog-active-filter__clear {
    font-weight: 600;
}

.blog-post__category {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--wtb-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.blog-post__category:hover {
    text-decoration: underline;
}

.blog-post__meta-list {
    gap: 1rem;
    flex-wrap: wrap;
}

/* The body is editor HTML, so it needs sane defaults for the tags it emits
   rather than inheriting whatever the surrounding card sets. */
.blog-post__content > :first-child { margin-top: 0; }
.blog-post__content > :last-child { margin-bottom: 0; }

.blog-post__content p,
.blog-post__content ul,
.blog-post__content ol {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wtb-radius);
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
    margin-top: 1.75rem;
    margin-bottom: .65rem;
    scroll-margin-top: 5.5rem;
}

.article-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    color: var(--wtb-muted);
    font-size: .85rem;
}

.article-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: .6rem;
    color: var(--wtb-muted);
}

.article-breadcrumb a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-summary {
    max-width: 68ch;
    margin: .75rem 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
}

.article-answer,
.article-links {
    max-width: 68ch;
    margin: 0 0 1.5rem;
}

.article-answer {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--wtb-primary);
    background: var(--wtb-primary-soft);
}

.article-answer h2,
.article-links h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.article-answer p:last-child,
.article-links ul {
    margin-bottom: 0;
}

.article-toc {
    max-width: 68ch;
    margin: 0 0 1.5rem;
}

.article-toc summary {
    cursor: pointer;
    font-weight: 700;
}

.article-toc ol {
    margin: .75rem 0 0;
    padding-left: 1.25rem;
}

.article-toc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-toc__sub {
    margin-left: 1rem;
    font-size: .95rem;
}

.article-links {
    margin-top: 2rem;
}

.article-links .btn {
    margin-top: 1rem;
}

/* Inline links in editor content stay underlined: the link colour sits too
   close to the body text to work as the only distinction (WCAG 1.4.1), and
   imported articles are link-heavy. */
.blog-post__content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-post__content blockquote {
    margin: 1.5rem 0;
    padding: .75rem 1.25rem;
    border-left: 3px solid var(--wtb-primary);
    background: var(--wtb-primary-soft);
    color: var(--wtb-ink);
}

.blog-post__content pre {
    overflow-x: auto;
    padding: 1rem;
    border-radius: var(--wtb-radius);
    background: #16202c;
    color: #e6e8eb;
}

.blog-post__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--wtb-line);
}

.blog-post__tags-label {
    color: var(--wtb-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.blog-tags {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wtb-line);
}

.blog-tags__title {
    margin: 0 0 .85rem;
    font-size: .95rem;
}

.blog-tag {
    display: inline-block;
    margin: 0 .4rem .4rem 0;
    padding: .28rem .7rem;
    border: 1px solid var(--wtb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--wtb-muted);
    font-size: .8rem;
    text-decoration: none;
}

.blog-tag:hover,
.blog-tag.is-active {
    border-color: var(--wtb-primary);
    color: var(--wtb-primary);
    text-decoration: none;
}

.blog-tag__count {
    display: inline-block;
    margin-left: .3rem;
    color: var(--wtb-muted);
    font-size: .72rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .blog-search {
        flex-direction: column;
    }
}

/* =========================================================================
   Sidebar post thumbnails

   .blog-thumb is an 86x45 box, but style.css only ever gave the image inside
   it a border-radius. With no width, height or overflow rule the image
   rendered at its natural size and spilled across the page -- the stock
   placeholder is 1536x1024, so it covered the sidebar, the footer and
   everything below it.

   It never showed because the related-posts widget was only ever rendered on
   a site with no blog posts in it.
   ========================================================================= */
.blog-thumb {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

.blog-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    /* Crop rather than distort: these are mixed aspect ratios. */
    object-fit: cover;
}

/* Author archive header: who wrote the posts below. */
.blog-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--wtb-line);
    border-radius: var(--wtb-radius);
    background: #fff;
    max-width: 640px;
}

.blog-author-card__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-author-card__name {
    margin: 0;
    font-weight: 700;
    color: var(--wtb-ink);
}

.blog-author-card__bio {
    margin: .25rem 0 0;
    color: var(--wtb-muted);
    font-size: .9rem;
}

.blog-author-card__link {
    display: inline-block;
    margin-top: .35rem;
    color: var(--wtb-primary);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Blog image slots before a cover exists. The same frame a real thumbnail
   occupies, labelled, and still the card's own link -- a card never loses
   its shape or its click when a photograph is missing. */
.blog-post__img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 270px;
    padding: 16px;
    text-align: center;
    background: var(--wtb-bg);
    border: 2px dashed var(--wtb-line);
    border-radius: 10px 10px 0 0;
    color: var(--wtb-muted);
}

.blog-post__img-placeholder svg {
    width: 38px;
    height: 38px;
}

.blog-post__img-placeholder-label {
    font-weight: 600;
    color: var(--wtb-ink);
}

.blog-post__img-placeholder-hint {
    font-size: 13px;
}

/* The single-post hero's empty slot: the article's own lead frame. */
.blog-hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 860 / 450;
    padding: 24px 16px;
    text-align: center;
    background: var(--wtb-bg);
    border: 2px dashed var(--wtb-line);
    border-radius: 12px;
    color: var(--wtb-muted);
}

.blog-hero-placeholder svg {
    width: 42px;
    height: 42px;
}

.blog-hero-placeholder span {
    font-weight: 600;
    color: var(--wtb-ink);
}

/* The related-posts sidebar's empty thumb: the same 86x45 box, linked. */
.blog-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    aspect-ratio: 86 / 45;
    background: var(--wtb-bg);
    border: 1px dashed var(--wtb-line);
    color: var(--wtb-muted);
}

.blog-thumb--placeholder svg {
    width: 20px;
    height: 20px;
}

/* =========================================================================
   Comments
   ========================================================================= */
.comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--wtb-line);
}

.comments__title { margin: 0 0 1.5rem; }
.comments__empty { color: var(--wtb-muted); margin-bottom: 2rem; }

.comment {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wtb-line);
}

.comment--reply {
    width: 100%;
    margin-left: 3.25rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.comment__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wtb-primary-soft);
    color: var(--wtb-primary-dark);
    font-size: .8rem;
    font-weight: 700;
}

.comment__body { flex: 1 1 260px; min-width: 0; }

.comment__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    margin: 0 0 .35rem;
    font-size: .85rem;
    color: var(--wtb-muted);
}

.comment__author { color: var(--wtb-ink); font-weight: 700; }

/* Comment text is untrusted and rendered escaped, so it can contain anything
   -- including a 400-character unbroken string. Wrap it rather than letting
   it stretch the page. */
.comment__text {
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.comment__reply-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--wtb-primary);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.comment-form { margin-top: 2rem; max-width: 640px; }
.comment-form__title { margin: 0 0 1rem; }

.comment-form__replying {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: var(--wtb-radius);
    background: var(--wtb-primary-soft);
    font-size: .88rem;
}

.comment-form__cancel {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wtb-primary);
    font-weight: 600;
    cursor: pointer;
}

.comment-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-form__field { margin-bottom: 1rem; }
.comment-form label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; }
.comment-form__note { color: var(--wtb-muted); font-size: .8rem; margin: .3rem 0 1rem; }

/* Off-screen rather than display:none -- bots skip hidden fields, which is
   the opposite of what a honeypot wants. */
.form-hp,
.comment-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .comment-form__row { grid-template-columns: 1fr; }
    .comment--reply { margin-left: 1.25rem; }
}

/* Public pages sit on one ground. Sections do not switch background. */
header.header .container,
.agency-intro .container,
.agency-section .container,
.agency-close .container {
    max-width: var(--tfast-column);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.agency-work .container { max-width: var(--tfast-work); }

.agency-intro {
    padding: 48px 0 96px;
    background: transparent;
    border: 0;
}
@media (min-width: 768px) {
    .agency-intro {
        min-height: calc(100svh - var(--tfast-nav));
        display: flex;
        align-items: center;
        padding: 64px 0;
    }
    .agency-intro__grid { align-items: center; width: 100%; }
}
.agency-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 32px 48px; align-items: start; }
.agency-intro__copy { order: 1; }
.agency-eyebrow { margin: 0 0 16px; color: var(--text-muted); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.agency-intro h1 { max-width: 14ch; font-size: var(--text-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 20px; color: var(--text-primary); }
.agency-lead { font-size: var(--text-lead); line-height: 1.55; max-width: 42ch; color: var(--text-secondary); margin: 0; }
.agency-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.agency-actions .btn, .agency-text-link { min-height: 44px; display: inline-flex; align-items: center; }
.agency-text-link { color: var(--text-primary); font-weight: 500; font-size: 15px; text-decoration: none; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); }
.agency-text-link:hover { color: var(--text-primary); border-color: var(--text-primary); background: var(--background-secondary); }
.agency-instrument { order: 2; position: relative; min-height: 420px; height: 520px; background: transparent; }
.agency-instrument canvas { display: block; width: 100%; height: 100%; }
.agency-instrument--still { order: 0; height: 360px; min-height: 280px; }
.agency-close { background: transparent; border-top: 1px solid var(--tfast-line); }
.agency-close .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 96px; padding-bottom: 96px; }
.agency-close h2 { margin: 0; max-width: 22ch; color: var(--tfast-text); font-size: clamp(28px, 3vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.agency-close__place { margin: 16px 0 0; color: var(--tfast-secondary); font-size: 16px; line-height: 1.5; }
.agency-section { padding: 72px 0; background: transparent; }
.agency-section--muted, .agency-section--ruled { background: transparent; border-top: 1px solid var(--tfast-line); border-bottom: 0; }
.agency-section-heading { max-width: 62ch; margin-bottom: 24px; }
.agency-section-heading--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 32px; max-width: none; }
.agency-section-heading p, .agency-section-heading p:last-child { margin-bottom: 0; color: var(--tfast-secondary); max-width: 65ch; line-height: 1.6; }
.agency-section h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 24px; max-width: 22ch; }
.agency-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.agency-service-row { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 18px; background: var(--surface); }
.agency-service-row:last-child { border-bottom: 1px solid var(--border); }
.agency-service-row h3 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.agency-service-row h3 a { color: var(--tfast-text); }
.agency-service-row h3 a:hover { color: var(--tfast-blue); }
.agency-service-row p, .agency-process p { margin: 0; line-height: 1.6; color: var(--tfast-secondary); max-width: 65ch; }
.agency-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.agency-process li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 28px 0; border-top: 1px solid var(--tfast-line); }
.agency-process li:last-child { border-bottom: 1px solid var(--tfast-line); }
.agency-process__index, .agency-index { font-family: var(--tfast-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--tfast-secondary); }
.agency-process__index { grid-row: 1 / span 2; }
.agency-process h3 { font-size: 18px; margin: 0; }
.agency-insights { border-top: 1px solid var(--tfast-line); }
.agency-insight { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px 28px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--tfast-line); }
.agency-insight__media img { display: block; width: 100%; height: auto; aspect-ratio: 430 / 225; object-fit: cover; border-radius: 4px; }
.agency-insight__copy time { display: block; margin-bottom: 8px; font-family: var(--tfast-mono); font-size: 13px; color: var(--tfast-secondary); }
.agency-insight__copy h3 { margin: 0 0 8px; font-size: 20px; }
.agency-insight__copy h3 a { color: var(--tfast-text); }
.agency-insight__copy h3 a:hover { color: var(--tfast-blue); }
.agency-insight__copy p { margin: 0; line-height: 1.6; max-width: 65ch; color: var(--tfast-secondary); }
.agency-work article { margin-top: 48px; }
.agency-work article:first-of-type { margin-top: 8px; }
.agency-work h3 { margin: 12px 0 8px; font-size: clamp(28px, 3vw, 32px); }
.agency-work h3 a { color: var(--tfast-text); }
.agency-work h3 a:hover { color: var(--tfast-blue); }
.agency-work p { margin: 0 0 24px; max-width: 42ch; color: var(--tfast-secondary); line-height: 1.55; }
.agency-work__figure { margin: 0; }
.agency-work__figure img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--tfast-line); background: var(--tfast-frame); }
.agency-engineering__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); gap: 48px; align-items: center; }
.agency-engineering__list { list-style: none; margin: 0; padding: 0; }
.agency-engineering__list li { padding: 18px 0; border-top: 1px solid var(--tfast-line); font-size: 18px; }
.agency-engineering__list li:last-child { border-bottom: 1px solid var(--tfast-line); }
.agency-engineering__list a { color: var(--tfast-text); }
.agency-engineering__list a:hover { color: var(--tfast-blue); }
@media (min-width: 768px) {
    :root { --gutter: 32px; }
    .agency-section { padding: 96px 0; }
    .agency-services { grid-template-columns: 1fr 1fr; }
    .agency-process { grid-template-columns: 1fr 1fr; }
    .agency-close .container { padding-top: 96px; padding-bottom: 96px; }
}
@media (min-width: 1100px) {
    :root { --gutter: 40px; }
    .agency-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agency-process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
    .agency-process li { display: block; border-top: 1px solid var(--border); border-bottom: 0; padding: 16px 8px 0 0; }
    .agency-process li:last-child { border-bottom: 0; }
    .agency-process__index { display: block; margin-bottom: 12px; }
}
.agency-reading { max-width: 70ch; line-height: 1.8; }
.agency-reading h2 { margin-top: 32px; }

/* Services catalogue.
   A category group separates its heading from the previous group without
   inventing a second listing style: the rows above already carry the borders. */
.agency-service-group { margin-top: 44px; }
.agency-service-group:first-of-type { margin-top: 0; }
.agency-service-group .agency-section-heading { margin-bottom: 8px; }
.agency-figure { margin: 28px 0; }
.agency-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* A service image belongs beside the deliverables, not stranded in the prose
   column with an empty half-page next to it. The slot is always there -- a
   photograph or its labelled placeholder -- so the page reads the same before
   and after the owner uploads one. */
.agency-service-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 48px; align-items: start; }
.agency-service-intro .agency-figure { margin: 0; }
.agency-service-intro .agency-reading h2:first-child { margin-top: 0; }
@media (max-width: 991px) { .agency-service-intro { grid-template-columns: minmax(0, 1fr); } }

.agency-price { font-weight: 600; color: var(--wtb-ink); margin: 0 0 8px; }
.agency-faq { max-width: 70ch; }
.agency-faq__item { margin-bottom: 22px; }
.agency-faq__item h3 { font-size: 19px; margin: 0 0 8px; }
.agency-faq__item p { margin: 0; line-height: 1.75; }

/* The heading block carries the lead and the first action on service pages, so
   it needs the page's own rhythm rather than the plain heading padding. */
.agency-page-heading--lead { padding-bottom: clamp(8px, 2vw, 20px); }
.agency-page-heading--lead .agency-actions { margin-top: 24px; }

/* Deliverables: the site already colours process markers, so the list that says
   what the work includes uses the same device instead of a second one. */
.agency-deliverables { margin: 0; }
.agency-deliverables li::marker { color: var(--wtb-primary); font-weight: 700; }

/* Gallery: real photographs when the owner supplies them, sized so a landscape
   frame keeps its shape before the file loads. */
.agency-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.agency-gallery figure { margin: 0; }
.agency-gallery img { display: block; width: 100%; aspect-ratio: 860 / 560; object-fit: cover; border-radius: 12px; }
@media (max-width: 991px) { .agency-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Empty media slots. A labelled frame, not a stock stand-in: it marks exactly
   where the owner's own photograph or video sits, and disappears the moment
   the real file exists. */
.agency-media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; text-align: center; background: var(--wtb-bg); border: 2px dashed var(--wtb-line); border-radius: 12px; color: var(--wtb-muted); }
.agency-media-placeholder svg { width: 38px; height: 38px; }
.agency-media-placeholder--image, .agency-media-placeholder--tile { aspect-ratio: 860 / 560; margin: 0; }
.agency-media-placeholder__label { margin: 0; font-weight: 600; color: var(--wtb-ink); }
.agency-media-placeholder__hint { margin: 0; font-size: 13px; }
.agency-gallery + .agency-media-placeholder__hint { margin-top: 14px; }

/* The video slot keeps the player's own 16:9 dark frame, so the section reads
   the same before and after a link is added. */
.agency-video--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed rgba(255, 255, 255, .22); }
.agency-video--placeholder svg { width: 46px; height: 46px; color: #c8d2e0; }
.agency-video--placeholder .agency-media-placeholder__label { color: #eef2f8; }
.agency-video--placeholder .agency-media-placeholder__hint { color: #9fadc0; }

/* Portfolio. Cards carry the work; the case study itself keeps the same band
   rhythm the service pages use, so the two read as one site. */
.agency-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.agency-project-card { display: flex; flex-direction: column; overflow: hidden; background: var(--wtb-card); border: 1px solid var(--wtb-line); border-radius: 12px; }
.agency-project-card__media { display: block; }
.agency-project-card__media img { display: block; width: 100%; aspect-ratio: 1200 / 675; object-fit: cover; }
.agency-project-card .agency-media-placeholder--cover { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.agency-project-card__body { padding: 18px 20px 22px; }
.agency-project-card__title { font-size: 20px; margin: 0 0 10px; }
.agency-project-card__title a { color: var(--wtb-primary); }
.agency-project-card__body p { margin: 0 0 10px; line-height: 1.65; }
.agency-project-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--wtb-muted); }
.agency-project-card__meta a { color: var(--wtb-primary); }
.agency-media-placeholder--cover { aspect-ratio: 1200 / 675; }
.agency-case-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 15px; color: var(--wtb-muted); }
.agency-case-meta a { color: var(--wtb-primary); }
.agency-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 0 0; }
.agency-metrics__item { padding: 18px; background: var(--wtb-bg); border: 1px solid var(--wtb-line); border-radius: 12px; }
.agency-metrics__item dt { font-size: 13px; color: var(--wtb-muted); }
.agency-metrics__item dd { margin: 6px 0 0; font-size: 24px; font-weight: 700; color: var(--wtb-ink); }
.agency-quote { max-width: 62ch; margin: 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--wtb-primary); }
.agency-quote p { margin: 0 0 12px; font-size: clamp(18px, 2vw, 22px); line-height: 1.6; }
.agency-quote footer { color: var(--wtb-muted); }
.agency-quote footer span { display: block; font-size: 14px; }
@media (max-width: 991px) { .agency-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .agency-portfolio-grid { grid-template-columns: minmax(0, 1fr); } }

/* Video: a 16:9 frame that is the video's own frame, not a decoration. */
.agency-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0b1020; }
.agency-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.agency-video__fallback { margin: 16px 0 0; }
.agency-deliverables { padding-left: 24px; }
.agency-deliverables li { margin-bottom: 12px; }
.agency-page-heading { padding-top: 40px; }
.agency-page-heading h1 { max-width: 24ch; font-size: clamp(30px, 4vw, 44px); margin-bottom: 0; }
.agency-contact { overflow-wrap: anywhere; color: var(--text-primary); }
.agency-contact .bg--light-1 {
    background: var(--surface-elevated);
    color: var(--text-primary);
    box-shadow: none;
    backdrop-filter: none;
}
.agency-contact .query__title,
.agency-contact h1,
.agency-contact .t-text-heading,
.agency-contact p,
.agency-contact label { color: var(--text-primary); }
.agency-contact label { display: block; margin-bottom: 8px; font-weight: 500; }
.agency-contact .form-control,
.agency-contact input,
.agency-contact textarea,
.agency-contact select {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}
.agency-contact textarea { white-space: pre-wrap; }
.agency-intro, .agency-section, .agency-page-heading { overflow-wrap: anywhere; }
.agency-intro a:focus-visible, .agency-section a:focus-visible, .btn--base:focus-visible { outline: 2px solid var(--tfast-blue); outline-offset: 2px; }
.blog-post__body { overflow-wrap: anywhere; }
.blog-post__article { line-height: 1.8; }
@media (max-width: 991px) {
    .agency-intro { min-height: 0; display: block; padding: 24px 0 96px; }
    .agency-intro__grid { grid-template-columns: minmax(0, 1fr); }
    .agency-instrument { order: 2; height: 42vh; min-height: 220px; }
    .agency-intro__copy { order: 1; }
    .agency-section-heading--split { align-items: flex-start; flex-direction: column; }
    .agency-close .container { flex-direction: column; align-items: flex-start; }
    .agency-engineering__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
 .agency-services { grid-template-columns: minmax(0, 1fr); }
 .agency-insight { grid-template-columns: minmax(0, 1fr); }
 .agency-gallery { grid-template-columns: minmax(0, 1fr); }
 .agency-contact .ms-5 { margin-left: 16px !important; }
 .agency-process li { grid-template-columns: 3rem minmax(0, 1fr); }
}

/* Products. One catalogue serves every kind of product, so the page keeps the
   same bands as services and work; only the buying facts -- price, spec rows,
   availability -- get their own devices. */
.agency-product-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 640px; margin-top: 18px; }
.agency-product-search input[type="search"] { flex: 1 1 260px; min-height: 44px; padding: 10px 14px; background: var(--wtb-card); border: 1px solid var(--wtb-line); border-radius: 10px; color: var(--wtb-ink); }
.agency-product-search input[type="search"]:focus-visible, .agency-product-search .btn:focus-visible { outline: 3px solid var(--wtb-primary); outline-offset: 2px; }

/* The opening price is the second thing a buyer looks for, so it reads at the
   price line's own scale instead of the body size. */
.agency-price--lg { font-size: clamp(22px, 2.5vw, 28px); margin: 14px 0 0; }
.agency-price__note { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--wtb-muted); }
.agency-project-card__price { margin: 0 0 10px; font-weight: 600; color: var(--wtb-ink); }
.agency-project-card__price span { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--wtb-muted); }

/* Availability is stated, never colour-coded: the words carry the meaning, so
   the badge stays neutral whatever the value says. */
.agency-availability { display: inline-flex; align-items: center; padding: 2px 10px; background: var(--wtb-bg); border: 1px solid var(--wtb-line); border-radius: 999px; font-size: 13px; color: var(--wtb-ink); }

/* Identifiers a buyer can use to check the exact item: SKU, GTIN, MPN. Shown
   only when the owner entered them; plain text, near the price. */
.agency-identifiers { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 14px; color: var(--wtb-muted); }

/* Specification rows: a definition list, labelled column beside value, and
   stacked on small screens so long values keep their line length. */
.agency-specs { margin: 0; }
.agency-specs__row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--wtb-line); }
.agency-specs__row:first-child { border-top: 1px solid var(--wtb-line); }
.agency-specs dt { color: var(--wtb-muted); font-weight: 600; }
.agency-specs dd { margin: 0; color: var(--wtb-ink); }
@media (max-width: 575px) { .agency-specs__row { grid-template-columns: minmax(0, 1fr); } }

/* Author profile (/authors/{username}). A CV: identity and actions first, then
   evidence bands. It keeps the agency rhythm -- same headings, same muted
   bands, same cards -- so it reads as the same site, not a detached resume. */

/* A disabled profile is visible to signed-in admins only, and says so. */
.author-preview-note { max-width: 70ch; margin: 0 0 20px; padding: 12px 16px; background: #fff7e6; border: 1px solid #f0d9a8; border-left: 4px solid #d29b2c; border-radius: 10px; font-size: 14px; color: #6b4d0a; }

/* Hero: portrait beside the introduction, stacked once the portrait would
   squeeze the text column below a readable width. */
.author-hero { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.author-hero__portrait { margin: 0; }
.author-hero__portrait img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.author-hero__eyebrow { margin: 0 0 8px; color: var(--wtb-primary); font-weight: 600; letter-spacing: .02em; }
.author-hero__body h1 { margin-bottom: 0; }
.author-hero .agency-lead { margin-top: 16px; }
.author-hero__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.author-hero__links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--wtb-line); border-radius: 50%; background: var(--wtb-card); color: var(--wtb-ink); }
.author-hero__links a:hover { border-color: var(--wtb-primary); color: var(--wtb-primary); }
.author-hero__links i { font-size: 22px; }
@media (max-width: 991px) { .author-hero { grid-template-columns: minmax(0, 1fr); } .author-hero__portrait { max-width: 420px; } }

/* Expertise / projects: short titled cards, three across on desktop. */
.author-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.author-card { padding: 20px 22px; background: var(--wtb-card); border: 1px solid var(--wtb-line); border-radius: 12px; }
.author-card__title { font-size: 19px; margin: 0 0 8px; }
.author-card__text { margin: 0; line-height: 1.7; }
@media (max-width: 991px) { .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .author-grid { grid-template-columns: minmax(0, 1fr); } }

/* Toolbox: grouped chips, the label carrying the grouping. */
.author-toolbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.author-toolbox__title { font-size: 18px; margin: 0 0 14px; }
/* Labelled chips, one pill for any list of short labels (a person's skills,
   a project's stack). Shared so the two pages read as one system. */
.agency-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agency-chip { padding: .34rem .8rem; background: var(--wtb-card); border: 1px solid var(--wtb-line); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--wtb-ink); }
@media (max-width: 767px) { .author-toolbox { grid-template-columns: minmax(0, 1fr); } }

/* Credentials: the card is the claim, the scan is the evidence. The scan sits
   on top at full width so the certificate text stays legible. */
.author-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.author-credential { display: flex; flex-direction: column; overflow: hidden; background: var(--wtb-card); border: 1px solid var(--wtb-line); border-radius: 12px; }
.author-credential__scan { display: block; border-bottom: 1px solid var(--wtb-line); background: #eef1f5; }
.author-credential__scan img { display: block; width: 100%; height: auto; }
.author-credential__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 22px; }
.author-credential__title { font-size: 19px; margin: 0; }
.author-credential__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 14px; color: var(--wtb-muted); }
.author-credential__text { margin: 0; line-height: 1.65; }
@media (max-width: 767px) { .author-credentials { grid-template-columns: minmax(0, 1fr); } }

/* Experience: one rail, entries hanging off it in order. */
.author-timeline { margin: 0; padding: 0 0 0 24px; list-style: none; border-left: 2px solid var(--wtb-line); }
.author-timeline__item { position: relative; padding-bottom: 32px; }
.author-timeline__item:last-child { padding-bottom: 0; }
.author-timeline__item::before { content: ""; position: absolute; left: -31px; top: 8px; width: 12px; height: 12px; background: var(--wtb-primary); border-radius: 50%; }
.author-timeline__role { font-size: 20px; margin: 0 0 6px; }
.author-timeline__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; color: var(--wtb-muted); font-size: 15px; }
.author-timeline__text { margin: 0 0 10px; line-height: 1.7; }

/* Education: a plain list; the honour line is part of the entry, not a badge. */
.author-readings { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; max-width: 70ch; }
.author-readings__title { font-size: 19px; margin: 0 0 6px; }
.author-readings__text { margin: 0; line-height: 1.7; color: var(--wtb-muted); }

/* Contact: labelled facts beside the actions, stacked when narrow. */
.author-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
.author-contact__facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 60ch; }
.author-contact__facts li { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.author-contact__label { color: var(--wtb-muted); font-weight: 600; font-size: 14px; }
@media (max-width: 991px) { .author-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .author-contact__facts li { grid-template-columns: minmax(0, 1fr); } }

/* Quiet technical field. Content stays above it. */
.tfast-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.main-wrapper { position: relative; z-index: 1; background: transparent; }
.agency-service-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
    .agency-service-layout { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); align-items: center; }
    .agency-service-layout .agency-instrument--still { height: 280px; min-height: 220px; }
}

@media (hover: hover) and (pointer: fine) {
    html.tfast-has-cursor,
    html.tfast-has-cursor body,
    html.tfast-has-cursor a,
    html.tfast-has-cursor button { cursor: none; }
    html.tfast-cursor-native,
    html.tfast-cursor-native body,
    html.tfast-cursor-native input,
    html.tfast-cursor-native textarea,
    html.tfast-cursor-native select { cursor: auto; }
}
.tfast-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tfast-cursor__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}
.tfast-cursor__label {
    display: none;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
}
.tfast-cursor.is-labeled .tfast-cursor__label { display: block; }

.tfast-prompt {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1030;
    width: min(320px, calc(100vw - 40px));
    padding: 16px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.tfast-prompt p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.tfast-prompt .btn { min-height: 40px; }
.tfast-prompt button[aria-label="Dismiss"] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    min-height: 32px;
    padding: 0 6px;
}

@media (prefers-reduced-motion: reduce) {
    .btn--base::after { transition: none; }
}
.btn--base::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
    transition: transform var(--duration-fast) var(--ease);
}
.btn--base:hover::after { transform: translateX(3px); }

/* Full-bleed opening for the catalogue, a product, and an industry demo.
   A cover sits behind a dark scrim. Pages without a photograph use the same
   navy ground and one light streak. */
.stage-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(420px, 68vh, 680px);
    margin: 0;
    padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
    color: #f4f7fb;
    background:
        radial-gradient(ellipse 70% 55% at 85% 15%, rgba(43, 108, 214, 0.55), transparent 60%),
        radial-gradient(ellipse 45% 40% at 8% 100%, rgba(214, 148, 72, 0.28), transparent 55%),
        linear-gradient(165deg, #07101c 0%, #122033 48%, #0b1626 100%);
}

.stage-hero--band {
    min-height: clamp(340px, 52vh, 520px);
}

.stage-hero--band::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -10%;
    top: 42%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(186, 220, 255, 0.15) 18%, rgba(210, 232, 255, 0.9) 42%, transparent 68%);
    transform: rotate(-7deg);
    pointer-events: none;
}

.stage-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.stage-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 12, 22, 0.28) 0%, rgba(6, 12, 22, 0.45) 38%, rgba(6, 12, 22, 0.88) 100%);
    pointer-events: none;
}

/* A product cover is often a dark interface. Keep a scrim under the type
   and leave the rest of the photograph readable. */
.stage-hero--photo .stage-hero__veil {
    background: linear-gradient(90deg, rgba(6, 12, 22, 0.97) 0%, rgba(6, 12, 22, 0.94) 46%, rgba(6, 12, 22, 0.5) 66%, rgba(6, 12, 22, 0.1) 84%, rgba(6, 12, 22, 0) 100%);
}

.stage-hero--photo .agency-lead {
    max-width: 36ch;
}

.stage-hero--photo h1,
.stage-hero--photo .agency-lead,
.stage-hero--photo .agency-price {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

@media (max-width: 700px) {
    .stage-hero--photo .stage-hero__veil {
        background: linear-gradient(180deg, rgba(6, 12, 22, 0.45) 0%, rgba(6, 12, 22, 0.82) 100%);
    }
}

.stage-hero__content {
    position: relative;
    z-index: 2;
}

.stage-hero h1,
.stage-hero .agency-page-heading h1 {
    max-width: 16ch;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.stage-hero .agency-lead,
.stage-hero .agency-case-meta,
.stage-hero .agency-identifiers,
.stage-hero .agency-price__note,
.stage-hero .labs-kicker {
    color: rgba(244, 247, 251, 0.82);
}

.stage-hero .agency-price,
.stage-hero .agency-availability {
    color: #fff;
}

.stage-hero .agency-availability {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
}

.stage-hero .btn.btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.stage-hero .btn.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}

.stage-hero .agency-text-link,
.stage-hero .agency-text-link:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.stage-hero .agency-text-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

.stage-hero .agency-eyebrow,
.stage-hero .agency-eyebrow a,
.stage-hero label,
.stage-hero .blog-head__lead,
.stage-hero .author-hero__eyebrow,
.stage-hero .author-preview-note {
    color: rgba(244, 247, 251, 0.82);
}

.stage-hero .agency-eyebrow a:hover,
.stage-hero .agency-case-meta a {
    color: #fff;
}

.stage-hero .form-control,
.stage-hero input[type="search"],
.stage-hero select {
    background: #fff;
    color: var(--wtb-ink);
    border-color: transparent;
}

.stage-hero .blog-head {
    margin-bottom: 0;
}

.stage-hero .author-hero__links a {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.stage-hero .author-hero__links a:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* Homepage: the stack drawing fills the opening the way a photograph would,
   and the last band uses the same navy ground. */
.stage-hero--home {
    align-items: flex-end;
    min-height: calc(100svh - var(--tfast-nav));
    padding-top: clamp(72px, 12vh, 140px);
}

.stage-hero--home .stage-hero__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.stage-hero--home canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.stage-hero--home .stage-hero__veil {
    background: linear-gradient(90deg, rgba(6, 12, 22, 0.92) 0%, rgba(6, 12, 22, 0.72) 36%, rgba(6, 12, 22, 0.22) 64%, rgba(6, 12, 22, 0.08) 100%);
}

.stage-hero--home h1 {
    max-width: 14ch;
}

@media (max-width: 767px) {
    .stage-hero--home {
        min-height: calc(100svh - var(--tfast-nav));
    }

    .stage-hero--home .stage-hero__veil {
        background: linear-gradient(180deg, rgba(6, 12, 22, 0.55) 0%, rgba(6, 12, 22, 0.88) 100%);
    }

    .stage-hero--home .stage-hero__scene,
    .agency-instrument {
        display: none;
    }

    .agency-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 480px;
    }
}

.stage-band {
    border-top: 0;
    color: #f4f7fb;
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(43, 108, 214, 0.45), transparent 55%),
        linear-gradient(165deg, #07101c 0%, #122033 60%, #0b1626 100%);
}

.stage-band h2,
.stage-band .agency-close__place {
    color: #f4f7fb;
}

.stage-hero .agency-product-search input[type="search"] {
    background: #fff;
    color: var(--wtb-ink);
    border-color: transparent;
}

.stage-hero .agency-page-heading {
    padding-top: 0;
}

.stage-hero .agency-media-placeholder {
    max-width: 420px;
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(244, 247, 251, 0.82);
}

.stage-hero .agency-media-placeholder__label,
.stage-hero .agency-media-placeholder__hint {
    color: #fff;
}

.agency-prose > :first-child { margin-top: 0; }
.agency-prose p { margin: 0 0 1rem; }
.agency-prose ul,
.agency-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.agency-prose li { margin: 0.3rem 0; }
.agency-prose li > p { margin: 0; }
.agency-prose a { text-decoration: underline; }

.team-directory__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.team-directory__card:hover {
    border-color: var(--wtb-primary);
}

.team-directory__card:focus-visible {
    outline: 2px solid var(--wtb-primary);
    outline-offset: 3px;
}

.team-directory__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}