/* Darkhouse 2026 — site stylesheet */

:root {
    --dh-bg: #0a0a0c;
    --dh-text: #f4f4f5;
    --dh-muted: rgba(228, 228, 231, 0.78);
    --dh-muted-2: rgba(161, 161, 170, 0.9);
    /* Optional gold for future CTAs / highlights (not section identity) */
    --dh-accent: #c9a227;

    /*
     * Legacy darkhousemultimedia.com home accents (see webroot/css/main-md.css .button.*)
     * AUDIO | WEB DESIGN | GRAPHIC DESIGN | MUSIC | WEB HOSTING
     */
    --dh-audio: #c87273;
    --dh-audio-hover: #ba4d4f;
    --dh-web: #73b2c7;
    --dh-web-hover: #4f9eb8;
    --dh-design: #53daff;
    --dh-design-hover: rgb(71, 127, 62);
    --dh-music: #c79573;
    --dh-music-hover: #b8794f;
    --dh-hosting: #b764c7;
    --dh-hosting-hover: #7b71b4;
    /* Hero bottom-right purple rgba(154, 33, 195, 0.34) — mid accent for hosting UI */
    --dh-hosting-purple: rgb(125, 28, 160);
    --dh-hosting-purple-mid: rgb(183, 100, 199);
    --dh-hosting-purple-cta: rgb(125, 28, 160);
    --dh-hosting-purple-cta-hover: rgb(153, 34, 196);
    --dh-hosting-purple-eyebrow: rgba(210, 87, 255, 0.95);

    /* 2026 home — section identity (your mapping) */
    --dh-build-host: var(--dh-design);
    --dh-build-host-hover: var(--dh-design-hover);
    --dh-simple-hosting: var(--dh-hosting);
    --dh-simple-hosting-hover: var(--dh-hosting-hover);

    /* Build & Host / hosting plan tier accents (Personal → Enterprise) — tweak here */
    --dh-tier-t1-accent: rgb(81, 140, 250);
    --dh-tier-t1-accent-mid: rgb(109, 160, 255);
    --dh-tier-t1-rgb: 72, 124, 220;
    --dh-tier-t2-accent: rgb(48, 197, 238);
    --dh-tier-t2-accent-mid: rgb(69, 215, 255);
    --dh-tier-t2-rgb: 48, 197, 238;
    --dh-tier-t3-accent: rgb(80, 255, 220);
    --dh-tier-t3-accent-mid: rgb(114, 255, 227);
    --dh-tier-t3-rgb: 80, 255, 220;
    --dh-tier-t4-accent: rgb(43, 255, 138);
    --dh-tier-t4-accent-mid: rgb(80, 255, 165);
    --dh-tier-t4-rgb: 43, 255, 138;

    /* Homepage */
    --dh-home-bg: #0a0a0a;
    --dh-home-surface: #141414;
    --dh-home-elev: #1a1a1a;
    --dh-home-border: rgba(255, 255, 255, 0.08);
    --dh-home-border-solid: rgb(33, 33, 33);
    --dh-home-text: #e2e2e2;
    --dh-home-text-2: rgb(154, 154, 154);
    --dh-home-text-3: rgb(103, 103, 103);
    --dh-home-accent: rgb(73, 212, 179);
    --dh-home-gold: rgb(200, 180, 83);
    --dh-home-max: 1200px;

    --dh-panel-bg: rgba(22, 22, 26, 0.2);
    --dh-panel-border: rgba(255, 255, 255, 0.021);
    --dh-panel-border-strong: rgba(255, 255, 255, 0.1);
    /* Monochrome veil over video (match video scale so edges stay covered) */
    --dh-overlay: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.72) 45%,
        rgba(0, 0, 0, 0.88) 100%
    );
    /* Inter — all pages */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;

    /* Typewriter hero: synced from hero-headlines.js (fallbacks if unset) */
    --dh-hero-hold-ms: 2800ms;
    --dh-between-ms: 400ms;

    /* Home service sections: horizontal inset (must match section padding for full-bleed footer images) */
    --dh-home-section-pad-x: clamp(1rem, 4vw, 2.5rem);
    /* Space from grid to CTA and from CTA to footer image strip */
    --dh-home-cta-gap: clamp(1.5rem, 3vw, 2.25rem);
}

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

html {
    scroll-behavior: smooth;
    font-size: 110%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-weight: 400;
    font-synthesis: none;
    background: var(--dh-bg);
    color: var(--dh-text);
    line-height: 1.35;
}

/* Inner pages: bar below browser chrome (nav fragment still uses .dh-hero__top) */
.dh-page-header {
    background: var(--dh-bg);
    border-bottom: 1px solid var(--dh-panel-border);
    padding: clamp(0.85rem, 3vw, 1.15rem) clamp(1rem, 4vw, 2.5rem);
}

.dh-page-header__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.dh-page-header .dh-hero__top {
    margin: 0;
    padding: 0;
}

/* —— Site header navigation —— */
.dh-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dh-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.dh-logo--mark img {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(2rem, 5vw, 2.75rem);
    max-width: 100%;
}

.dh-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: clamp(0.85rem, 2.5vw, 1.75rem);
    margin-left: auto;
}

.dh-nav a {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.dh-nav a:hover,
.dh-nav a:focus-visible {
    color: rgba(255, 255, 255, 0.78);
}

.dh-nav-toggle {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.dh-nav-toggle-bar {
    display: block;
    width: 1.15rem;
    height: 2px;
    margin: 0.28rem auto;
    border-radius: 1px;
    background: currentColor;
}

.dh-nav-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(18rem, 86vw);
    padding: 1.25rem 1.25rem 2rem;
    background: rgba(12, 12, 14, 0.98);
    border-left: 1px solid var(--dh-panel-border-strong);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, visibility 0.28s ease;
}

.dh-nav-panel--open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.dh-nav-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.dh-nav-panel-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.dh-nav-panel-nav a {
    display: block;
    padding: 0.75rem 0.25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dh-nav-panel-nav a:hover,
.dh-nav-panel-nav a:focus-visible {
    color: var(--dh-muted);
}

.dh-nav-panel-groups {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 1.35rem;
}

.dh-nav-panel-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.45);
    text-align: right;
}

.dh-nav-panel-group__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.dh-nav-panel-group__links a {
    display: block;
    padding: 0.45rem 0.25rem;
    color: rgba(244, 244, 245, 0.82);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    text-align: right;
    transition: color 0.15s ease;
}

.dh-nav-panel-group__links a:hover,
.dh-nav-panel-group__links a:focus-visible {
    color: #fff;
}

.dh-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.dh-nav-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.dh-nav-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .dh-nav-toggle {
        display: block;
    }

    .dh-nav {
        display: none;
    }
}

.dh-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* —— Home: Build & Host section —— */
.dh-section--build-host {
    /* Anchor scroll lands with section title near top of viewport (not mid-screen) */
    scroll-margin-top: 1.25rem;
    --dh-section-bg: #060606;
    position: relative;
    background-color: var(--dh-section-bg);
    background-image: url("/assets/tiles/dark-mosaic.png");
    background-repeat: repeat;
    background-size: auto;
    /* Tile is light; multiply tints it down into the dark base */
    background-blend-mode: multiply;
    /* Bottom padding 0 — footer image sits flush to section end */
    padding: clamp(2.5rem, 5vw, 4rem) var(--dh-home-section-pad-x) 0;
    color: var(--dh-muted-2);
    overflow-x: clip;
    /* Match .dh-section--simple-hosting top edge — cyan / build-host accent */
    border-top: 1px solid color-mix(in srgb, var(--dh-build-host) 14%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dh-build-host) 8%, transparent);
}

/* Soft cyan wash under the top edge (pairs with border; bottom fade stays on ::after) */
.dh-section--build-host::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 120% 70% at 50% -20%,
        color-mix(in srgb, var(--dh-build-host) 14%, transparent),
        transparent 55%
    );
}

/* Bottom band: semi-transparent dark → clear so tiles stay visible (~10 lines) */
.dh-section--build-host::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12rem;
    height: 10lh;
    background: linear-gradient(
        to top,
        rgba(9, 9, 9, 0.5) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.dh-section--build-host .dh-section__inner--build-host {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* —— Simple hosting (home teaser + Bristol detail page) —— */
.dh-section--simple-hosting {
    scroll-margin-top: 1.25rem;
    --dh-section-bg: #060606;
    position: relative;
    background-color: var(--dh-section-bg);
    background-image: url("/assets/tiles/dark-mosaic.png");
    background-repeat: repeat;
    background-size: auto;
    background-blend-mode: multiply;
    padding: clamp(2.5rem, 5vw, 4rem) var(--dh-home-section-pad-x) 0;
    color: var(--dh-muted-2);
    overflow-x: clip;
    border-top: 1px solid color-mix(in srgb, var(--dh-simple-hosting) 14%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dh-simple-hosting) 8%, transparent);
}

.dh-section--simple-hosting::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 120% 70% at 50% -20%,
        color-mix(in srgb, var(--dh-simple-hosting) 14%, transparent),
        transparent 55%
    );
}

.dh-section--simple-hosting .dh-section__inner--simple-hosting {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* —— Web hosting Bristol (detail) —— */
.dh-section--web-hosting-detail {
    scroll-margin-top: 5rem;
}

.dh-section--web-hosting-detail .dh-web-hosting__plans-head {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    text-align: left;
}

.dh-web-hosting__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-hosting-purple-eyebrow);
}

.dh-web-hosting__plans-title {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #fff;
}

.dh-web-hosting__plans-lead {
    margin: 0.65rem 0 0;
    max-width: 58ch;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.62;
}

.dh-section--web-hosting-detail .dh-web-hosting__intro {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.dh-hosting-plans__heading {
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

.dh-hosting-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dh-hosting-plan {
    --dh-plan-accent: var(--dh-tier-t1-accent);
    --dh-plan-accent-mid: var(--dh-tier-t1-accent-mid);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(1.5rem, 3.5vw, 2rem);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--dh-plan-accent) 18%, rgba(255, 255, 255, 0.06));
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.28),
        0 0 36px color-mix(in srgb, var(--dh-plan-accent) 8%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dh-hosting-plan--t1 {
    --dh-plan-accent: var(--dh-tier-t1-accent);
    --dh-plan-accent-mid: var(--dh-tier-t1-accent-mid);
    background:
        radial-gradient(ellipse 110% 90% at 100% -5%, color-mix(in srgb, var(--dh-plan-accent) 24%, transparent), transparent 55%),
        radial-gradient(ellipse 95% 75% at 0% 100%, color-mix(in srgb, var(--dh-plan-accent-mid) 18%, transparent), transparent 52%),
        radial-gradient(ellipse 70% 50% at 50% 50%, color-mix(in srgb, var(--dh-plan-accent) 6%, transparent), transparent 65%),
        rgba(0, 0, 0, 0.32);
}

.dh-hosting-plan--t2 {
    --dh-plan-accent: var(--dh-tier-t2-accent);
    --dh-plan-accent-mid: var(--dh-tier-t2-accent-mid);
    background:
        radial-gradient(ellipse 110% 90% at 0% 0%, color-mix(in srgb, var(--dh-plan-accent) 22%, transparent), transparent 55%),
        radial-gradient(ellipse 95% 75% at 100% 100%, color-mix(in srgb, var(--dh-plan-accent-mid) 20%, transparent), transparent 52%),
        radial-gradient(ellipse 70% 50% at 50% 40%, color-mix(in srgb, var(--dh-plan-accent) 8%, transparent), transparent 60%),
        rgba(0, 0, 0, 0.32);
}

.dh-hosting-plan--t3 {
    --dh-plan-accent: var(--dh-tier-t3-accent);
    --dh-plan-accent-mid: var(--dh-tier-t3-accent-mid);
    background:
        radial-gradient(ellipse 110% 90% at 50% -15%, color-mix(in srgb, var(--dh-plan-accent) 26%, transparent), transparent 55%),
        radial-gradient(ellipse 90% 80% at 100% 100%, color-mix(in srgb, var(--dh-plan-accent-mid) 16%, transparent), transparent 52%),
        radial-gradient(ellipse 80% 55% at 0% 80%, color-mix(in srgb, var(--dh-plan-accent) 10%, transparent), transparent 58%),
        rgba(0, 0, 0, 0.32);
}

.dh-hosting-plan--t4 {
    --dh-plan-accent: var(--dh-tier-t4-accent);
    --dh-plan-accent-mid: var(--dh-tier-t4-accent-mid);
    background:
        radial-gradient(ellipse 110% 90% at 100% 0%, color-mix(in srgb, var(--dh-plan-accent) 24%, transparent), transparent 55%),
        radial-gradient(ellipse 95% 75% at 0% 100%, color-mix(in srgb, var(--dh-plan-accent-mid) 18%, transparent), transparent 52%),
        radial-gradient(ellipse 70% 50% at 50% 50%, color-mix(in srgb, var(--dh-plan-accent) 8%, transparent), transparent 65%),
        rgba(0, 0, 0, 0.32);
}

.dh-hosting-plan__header {
    text-align: left;
    margin-bottom: 0.85rem;
}

.dh-section--simple-hosting .dh-hosting-plan h3.dh-hosting-plan__name {
    margin: 0 0 0.5rem;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dh-plan-accent);
    text-shadow: 0 0 22px color-mix(in srgb, var(--dh-plan-accent) 38%, transparent);
}

.dh-hosting-plan__tagline {
    margin: 0;
    font-size: clamp(0.85rem, 1.4vw, 0.95rem);
    line-height: 1.45;
    color: var(--dh-muted);
    text-align: left;
}

.dh-hosting-plan__features {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: clamp(0.78rem, 1.15vw, 0.88rem);
    line-height: 1.45;
    color: var(--dh-muted-2);
    flex: 1 1 auto;
}

.dh-hosting-plan__features li {
    position: relative;
    padding-left: 0.9rem;
    margin-bottom: 0.35rem;
}

.dh-hosting-plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dh-plan-accent) 62%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--dh-plan-accent) 35%, transparent);
}

.dh-hosting-plan__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding: 0.85rem 0.65rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.dh-hosting-plan__spec {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dh-hosting-plan__spec-value {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    color: var(--dh-text);
    line-height: 1.2;
}

.dh-hosting-plan__spec-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.45);
}

.dh-hosting-plan__footer {
    margin-top: auto;
    padding-top: 0.65rem;
    text-align: center;
}

.dh-section--web-hosting-detail .dh-hosting-plan__footer {
    padding-top: 0;
}

.dh-hosting-plan__price {
    margin: 0 0 0.85rem;
}

.dh-hosting-plan__price-amount {
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 700;
    color: #fff;
}

.dh-hosting-plan__price-term {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dh-muted);
}

.dh-section--simple-hosting .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn,
.dh-section--web-hosting-detail .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 14rem;
    min-height: 2.8rem;
    margin-top: 0;
    padding: 0 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: color-mix(in srgb, var(--dh-plan-accent) 52%, #000);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dh-section--simple-hosting .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn:hover,
.dh-section--simple-hosting .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn:focus-visible,
.dh-section--web-hosting-detail .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn:hover,
.dh-section--web-hosting-detail .dh-hosting-plan .dh-hosting-plan__order.dh-panel__btn:focus-visible {
    background-color: color-mix(in srgb, var(--dh-plan-accent) 34%, #000);
    border-color: rgba(255, 255, 255, 0.18);
    text-decoration: none;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.dh-section--web-hosting-detail .dh-web-hosting__outro {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    max-width: 58ch;
    text-align: left;
}

.dh-section--web-hosting-detail .dh-web-hosting__outro-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}

.dh-section--web-hosting-detail .dh-web-hosting__outro-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--dh-muted);
    text-align: left;
    text-align-last: left;
}

.dh-section--web-hosting-detail .dh-web-hosting__actions {
    margin: 1.25rem 0 0;
    text-align: left;
}

.dh-web-hosting__outro {
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    max-width: min(54ch, 92vw);
    text-align: center;
}

.dh-web-hosting__outro-title {
    margin: 0 0 clamp(0.75rem, 2vw, 1.1rem);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-web-hosting__outro-text {
    margin: 0;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.65;
    color: var(--dh-muted-2);
    text-align: justify;
    text-align-last: center;
}

.dh-web-hosting__actions {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.dh-web-hosting__back {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    text-align: center;
}

.dh-text-link--hosting {
    color: var(--dh-simple-hosting);
    border-bottom-color: color-mix(in srgb, var(--dh-simple-hosting) 45%, transparent);
}

.dh-text-link--hosting:hover {
    color: #fff;
}

.dh-build-host__intro {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.dh-build-host__intro .dh-section__title {
    margin-bottom: 0;
}

/* Home: 6-step process (3×2 grid); numbered discs echo panel icons */
.dh-build-host__process {
    /* Spacing to CTA comes from .dh-build-host__detail-link margin-top (--dh-home-cta-gap) */
    margin-bottom: 0;
}

.dh-build-host__process-kicker {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(244, 244, 245, 0.55);
}

.dh-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dh-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: clamp(1.5rem, 3.5vw, 2rem);
    border-radius: 12px;
    background:
        radial-gradient(ellipse 100% 85% at 100% 0%, color-mix(in srgb, var(--dh-web) 22%, transparent), transparent 58%),
        radial-gradient(ellipse 90% 80% at 0% 100%, color-mix(in srgb, var(--dh-build-host) 16%, transparent), transparent 55%),
        rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dh-process-step:nth-child(3n + 2) {
    background:
        radial-gradient(ellipse 100% 85% at 0% 0%, color-mix(in srgb, var(--dh-build-host) 18%, transparent), transparent 55%),
        radial-gradient(ellipse 90% 80% at 100% 100%, color-mix(in srgb, var(--dh-web) 18%, transparent), transparent 55%),
        rgba(0, 0, 0, 0.3);
}

.dh-process-step:nth-child(3n + 3) {
    background:
        radial-gradient(ellipse 100% 80% at 50% 100%, color-mix(in srgb, var(--dh-web) 14%, transparent), transparent 60%),
        radial-gradient(ellipse 80% 70% at 0% 0%, color-mix(in srgb, var(--dh-hosting) 12%, transparent), transparent 55%),
        rgba(0, 0, 0, 0.3);
}

.dh-process-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 6.5vw, 3.65rem);
    height: clamp(3rem, 6.5vw, 3.65rem);
    margin-bottom: 0.2rem;
    border-radius: 50%;
    background: #222228;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 28px color-mix(in srgb, var(--dh-build-host) 42%, transparent),
        0 0 52px color-mix(in srgb, var(--dh-web) 22%, transparent);
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--dh-build-host);
    text-shadow: 0 0 24px color-mix(in srgb, var(--dh-build-host) 55%, transparent);
}

.dh-section--build-host .dh-process-step h3.dh-process-step__title {
    margin: 0;
    font-size: clamp(0.92rem, 1.35vw, 1.02rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-process-step__text {
    margin: 0;
    font-size: clamp(0.78rem, 1.1vw, 0.88rem);
    line-height: 1.5;
    color: var(--dh-muted-2);
    text-align: justify;
    text-align-last: center;
    width: 100%;
}

.dh-build-host__detail-link {
    margin: var(--dh-home-cta-gap) 0 0;
    text-align: center;
}

/* Same treatment as #build.dh-panel .dh-panel__btn — bold caps via .dh-panel__btn */
.dh-section--build-host .dh-build-host__cta.dh-panel__btn {
    margin-top: 0;
    background-color: color-mix(in srgb, var(--dh-build-host) 60%, #000);
    color: #fff;
}

.dh-section--build-host .dh-build-host__cta.dh-panel__btn:hover,
.dh-section--build-host .dh-build-host__cta.dh-panel__btn:focus-visible {
    background-color: color-mix(in srgb, var(--dh-build-host) 38%, #000);
}

.dh-text-link {
    color: var(--dh-build-host);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--dh-build-host) 45%, transparent);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dh-text-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 900px) {
    .dh-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-hosting-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dh-hosting-plans {
        grid-template-columns: 1fr;
    }

    .dh-home-hosting-image {
        display: none;
    }

    /* Restore breathing room lost when the image (which had 5rem margin-bottom) is hidden */
    #hosting-only .dh-home-eyebrow {
        margin-top: 3rem;
    }
}

@media (max-width: 520px) {
    .dh-process-grid {
        grid-template-columns: 1fr;
    }
}

/* Detail page: two columns — ratio: tweak fr values (e.g. 3fr 2fr ≈ 60/40) */
.dh-build-host__grid {
    --dh-build-host-col-text: 3fr;
    --dh-build-host-col-media: 2fr;
    display: grid;
    grid-template-columns: var(--dh-build-host-col-text) var(--dh-build-host-col-media);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

.dh-build-host__text {
    text-align: left;
    min-width: 0;
}

.dh-build-host__text h3:not(:first-child) {
    margin-top: 1.35rem;
}

.dh-build-host__media {
    min-width: 0;
    min-height: 12rem;
    border-radius: 8px;
}

.dh-build-host__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .dh-build-host__grid {
        grid-template-columns: 1fr;
    }

    .dh-build-host__media {
        order: 2;
    }

    .dh-build-host__text {
        order: 1;
    }
}

/* Section titles: same accent as Build panel h2; tune size/weight here per section */
.dh-section__title {
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
    /* Scales between mobile and desktop; caps at 2.75rem */
    font-size: clamp(1.35rem, 2.5vw, 2.75rem);
    /* 300 requires Open+Sans wght@300 in the Google Fonts link (200 is not provided for Open Sans) */
    font-weight: 400;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--dh-build-host);
}

/* Lead line under section h2 — centered (overrides .dh-section--build-host p) */
.dh-section__lead {
    margin: clamp(0.35rem, 1.2vw, 0.75rem) auto clamp(1.25rem, 3vw, 1.75rem);
    max-width: min(54ch, 92vw);
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--dh-muted);
}

/* Section h3 — white subheads (use inside .dh-section or class on the element) */
.dh-section h3,
h3.dh-section__heading {
    margin: 0 0 0.65rem;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-section--build-host .dh-build-host__text p {
    margin: 0 0 1.1em;
    font-size: clamp(1rem, 1.6vw, 1.05rem);
    line-height: 1.65;
    text-align: left;
}

.dh-section--build-host .dh-build-host__text p:last-child {
    margin-bottom: 0;
}

/* Reduced motion: pause video; typewriter cursor hidden via JS */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .dh-hero__video {
        display: none;
    }

    .dh-hero__cursor {
        animation: none;
        opacity: 0;
    }

    .dh-hero__typed.dh-hero-typed--hold {
        animation: none;
    }
}

/* ========== Homepage ========== */

body.dh-home-page {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--dh-home-text);
    background: var(--dh-home-bg);
}

.dh-home-main {
    overflow-x: clip;
}

.dh-home-wrap {
    width: min(var(--dh-home-max), calc(100% - 2rem));
    margin-inline: auto;
}

.dh-home-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-home-accent);
}

.dh-home-hero {
    position: relative;
    padding: 6rem 0 5rem;
    background:
        radial-gradient(ellipse at 5% 5%, rgba(81, 126, 232, 0.38), transparent 48%),
        radial-gradient(ellipse at 95% 85%, rgba(154, 33, 195, 0.34), transparent 52%);
}

.dh-home-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: center;
}

.dh-home-hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6.3vw, 4.9rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 300;
    color: #fff;
    max-width: 12ch;
}

.dh-home-hero h1 strong {
    display: block;
    font-weight: 800;
    color: #67e8f9;
    background: linear-gradient(
        95deg,
        rgba(103, 232, 249, 0.98) 0%,
        rgba(52, 211, 153, 0.92) 55%,
        rgba(16, 185, 129, 0.9) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dh-home-hero__lead {
    margin: 1.4rem 0 0;
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--dh-home-text-2);
}

.dh-home-ticker {
    border-top: 1px solid var(--dh-home-border);
    border-bottom: 1px solid var(--dh-home-border);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    overflow: hidden;
}

.dh-home-ticker__track {
    display: flex;
    width: max-content;
    animation: dhHomeTickerScroll 60s linear infinite;
    will-change: transform;
}

.dh-home-ticker__group {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.95rem 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.dh-home-ticker__item {
    display: inline-flex;
    align-items: center;
    color: var(--dh-home-text);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
}

.dh-home-ticker__item::after {
    content: '·';
    margin: 0 1.1rem;
    color: rgba(103, 232, 249, 0.8);
    font-size: 1rem;
    line-height: 1;
}

@keyframes dhHomeTickerScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dh-home-ticker__track {
        animation: none;
    }
}

.dh-home-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.dh-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid var(--dh-home-border);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 160ms ease;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.dh-home-btn--accent {
    border-color: rgba(232, 168, 81, 0.45);
    background: var(--dh-home-accent);
    color: #0a0a0a;
}

.dh-home-btn--accent:hover {
    filter: brightness(1.05);
}

.dh-home-btn--ghost {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

.dh-home-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.dh-home-example-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;
}

.dh-home-example-link:focus-visible {
    outline: 2px solid rgba(73, 212, 179, 0.75);
    outline-offset: 3px;
}

.dh-home-example {
    border-radius: 1rem;
    border: 1px solid var(--dh-home-border);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(103, 232, 249, 0.08), transparent 58%),
        radial-gradient(130% 110% at 100% 100%, rgba(16, 185, 129, 0.06), transparent 60%),
        rgba(20, 20, 20, 0.56);
    backdrop-filter: blur(9px) saturate(110%);
    -webkit-backdrop-filter: blur(9px) saturate(110%);
    padding: 1.2rem;
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.dh-home-example-link:hover .dh-home-example,
.dh-home-example-link:focus-visible .dh-home-example,
.dh-home-example-link:hover .dh-home-cost-illustrator,
.dh-home-example-link:focus-visible .dh-home-cost-illustrator {
    border-color: rgba(73, 212, 179, 0.36);
    transform: translateY(-1px);
}

.dh-home-example__kicker {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-home-text-3);
}

.dh-home-example__kicker-live {
    position: relative;
    padding-left: 0.85rem;
}

.dh-home-example__kicker-live::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #33d194;
    box-shadow: 0 0 0 3px rgba(51, 209, 148, 0.18), 0 0 10px rgba(51, 209, 148, 0.55);
}

.dh-home-example__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    color: var(--dh-home-text-2);
}

.dh-home-example__row span {
    position: relative;
    padding-left: 1rem;
}

.dh-home-example__row span::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.02rem;
    font-size: 0.74rem;
    line-height: 1;
    font-weight: 700;
    color: var(--dh-home-gold);
}

.dh-home-example__row strong {
    color: #fff;
    font-weight: 600;
}

.dh-home-example__divider {
    margin: 0.8rem 0 0.95rem;
    border-top: 1px solid var(--dh-home-border);
    height: 0;
}

.dh-home-example__total {
    margin-top: 0.8rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--dh-home-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.dh-home-example__total-copy {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.dh-home-example__note {
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--dh-home-text-3);
}

.dh-home-example__total strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--dh-home-accent);
}

#the-darkhouse-build-and-host-way {
    background: radial-gradient(
        130% 140% at 0% 0%,
        rgba(16, 48, 45, 0.77) 0%,
        rgba(9, 32, 30, 0.23) 38%,
        rgba(5, 18, 17, 0) 72%
    ),
    radial-gradient(
        110% 120% at 100% 100%,
        rgba(46, 15, 22, 0.59) 0%,
        rgba(39, 11, 26, 0.22) 38%,
        rgba(15, 5, 14, 0.18) 72%
    );
}

.dh-home-section {
    padding: 5rem 0;
    border-top: 1px solid var(--dh-home-border);
}

/* Build & Host Advantage: slightly tighter bottom so CTA sits closer on HD viewports */
#the-darkhouse-build-and-host-way.dh-home-section {
    padding-bottom: 3rem;
}

.dh-home-section--alt {
    background: #0d0d0d;
    border-top: 1px solid var(--dh-home-border);
}

.dh-home-heading {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    max-width: 22ch;
}
.dh-home-heading-h3-center {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    max-width: 22ch;
    text-align: center;
}
.dh-home-sub {
    margin: 0.75rem 0 0;
    color: var(--dh-home-text-2);
    max-width: 66ch;
    font-size: 1rem;
    line-height: 1.62;
}

.dh-home-sub em,
.dh-home-sub i {
    font-style: italic;
}

.dh-home-grid-4 {
    margin-top: 1.6rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.dh-home-illustrator {
    margin-top: 1.8rem;
    border-radius: 1.15rem;
    border: 1px solid var(--dh-home-border);
    background: var(--dh-home-surface);
    padding: 1rem;
}

.dh-home-illustrator__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.dh-home-illustrator__tab {
    appearance: none;
    border: 1px solid var(--dh-home-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--dh-home-text-2);
    border-radius: 0.8rem;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 160ms ease;
}

.dh-home-illustrator__tab:hover {
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.dh-home-illustrator__tab.is-active {
    border-color: rgba(232, 168, 81, 0.45);
    background: rgba(232, 168, 81, 0.1);
    color: #fff;
}

.dh-home-illustrator__body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1rem;
    align-items: stretch;
}

.dh-home-illustrator__detail,
.dh-home-illustrator__summary {
    border-radius: 0.95rem;
    border: 1px solid var(--dh-home-border);
    background: var(--dh-home-elev);
    padding: 1rem;
}

.dh-home-illustrator__detail h3,
.dh-home-illustrator__summary h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-home-illustrator__detail p,
.dh-home-illustrator__summary p {
    margin: 0.55rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--dh-home-text-2);
}

.dh-home-illustrator__meta {
    margin: 1rem 0 0;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    color: var(--dh-home-text-2);
    font-size: 0.86rem;
}

.dh-home-illustrator__meta li {
    position: relative;
    padding-left: 1rem;
}

.dh-home-illustrator__meta li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(232, 168, 81, 0.85);
}

.dh-home-illustrator__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-home-text-3);
}

.dh-home-illustrator__cost {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dh-home-border);
}

.dh-home-illustrator__cost-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dh-home-text-3);
}

.dh-home-illustrator__cost-value {
    margin-top: 0.35rem;
    display: block;
    font-size: clamp(2.2rem, 5vw, 3rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--dh-home-accent);
}

.dh-home-illustrator__slider-wrap {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dh-home-border);
}

.dh-home-illustrator__slider-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.dh-home-illustrator__slider-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.dh-home-illustrator__slider-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dh-home-accent);
}

.dh-home-illustrator__slider {
    width: 100%;
    accent-color: var(--dh-home-accent);
}

.dh-home-illustrator__term-markers {
    margin-top: 0.55rem;
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--dh-home-text-3);
}

.dh-home-tier {
    border-radius: 0.95rem;
    border: 1px solid var(--dh-home-border);
    background: var(--dh-home-surface);
    padding: 1rem;
    transition: 160ms ease;
}

.dh-home-tier:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.01);
}

.dh-home-tier--focus {
    border-width: 2px;
    border-color: rgba(232, 168, 81, 0.45);
    background: #17140f;
}

.dh-home-tier p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.56;
    color: var(--dh-home-text-2);
}

.dh-home-tier__label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dh-home-text-3);
    font-weight: 600;
}

.dh-home-tier h3 {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-home-tier__price {
    margin: 0.65rem 0 0.7rem;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.dh-home-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: var(--dh-home-text-2);
}

.dh-home-list li {
    position: relative;
    padding-left: 1rem;
}

.dh-home-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.48rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(232, 168, 81, 0.85);
}

.dh-home-levers {
    margin-top: 1.6rem;
    display: grid;
    gap: 1rem;
}

.dh-home-lever {
    border-bottom: 1px solid var(--dh-home-border);
    padding-bottom: 0.8rem;
}

.dh-home-lever:last-child {
    border-bottom: none;
}

.dh-home-lever__row {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    gap: 0.7rem;
    align-items: baseline;
}

.dh-home-lever__num {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 168, 81, 0.8);
    font-weight: 700;
}

.dh-home-lever h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-home-lever p {
    margin: 0.24rem 0 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--dh-home-text-2);
    max-width: 70ch;
}

.dh-home-timeline {
    margin-top: 1.6rem;
    list-style: none;
    padding: 0;
    position: relative;
    display: grid;
    gap: 1rem;
}

.dh-home-timeline::before {
    content: '';
    position: absolute;
    left: 0.93rem;
    top: 0.7rem;
    bottom: 0.7rem;
    width: 1px;
    background: var(--dh-home-border);
}

.dh-home-step {
    position: relative;
    padding-left: 2.7rem;
}

.dh-home-step__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    border: 1px solid var(--dh-home-border);
    background: var(--dh-home-elev);
    color: var(--dh-home-accent);
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.dh-home-step h3 {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.dh-home-step p {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.58;
    color: var(--dh-home-text-2);
    max-width: 62ch;
}

.dh-home-how-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: start;
}

.dh-home-cost-illustrator {
    width: 100%;
    margin: 0;
    border: 1px solid var(--dh-home-border);
    border-radius: 0.9rem;
    background: var(--dh-home-surface);
    padding: 1rem;
    transition: border-color 160ms ease, transform 160ms ease;
}

.dh-home-example-link:has(.dh-home-cost-illustrator) {
    border-radius: 0.9rem;
}

.dh-home-cost-illustrator img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.72rem;
}

.dh-home-cta {
    position: relative;
    padding: 5rem 0;
    border-top: 1px solid var(--dh-home-border);
    background: radial-gradient(ellipse at 85% 15%, rgba(146, 232, 81, 0.16), transparent 50%);
}

.dh-home-cta h2 {
    margin: 0;
    font-size: clamp(2.2rem, 5.7vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #fff;
    font-weight: 800;
    max-width: 16ch;
}

.dh-home-cta p {
    margin: 0.8rem 0 0;
    color: var(--dh-home-text-2);
    max-width: 58ch;
    line-height: 1.6;
    font-size: 1rem;
}

.dh-home-contrast {
    margin-top: 1.6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.dh-home-advantage-intro {
    display: block;
    margin-bottom: 0.8rem;
    text-align: center;
}

.dh-home-advantage-intro .dh-home-heading {
    margin-inline: auto;
    max-width: none;
}

.dh-home-advantage-intro .dh-home-sub {
    margin-inline: auto;
    max-width: 72ch;
}

.dh-home-advantage-outro {
    margin-top: 1.2rem;
    text-align: center;
}

.dh-home-advantage-outro__title {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: #fff;
}

.dh-home-advantage-outro .dh-home-sub {
    margin-inline: auto;
    max-width: 68ch;
    margin-top: 0.55rem;
}

.dh-home-contrast__media {
    margin: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--dh-home-border);
    background: var(--dh-home-surface);
    margin-top: 0.8rem;
}

/* Image + inner card bolted together as one vertical unit */
.dh-home-contrast__stack {
    margin-top: 0.8rem;
}

.dh-home-contrast__accent-bar {
    height: 15px;
    margin-top: 0;
    border-radius: 0;
}

.dh-home-contrast__col--new .dh-home-contrast__accent-bar {
    background: linear-gradient(
        to right,
        rgb(39, 203, 156) 0%,
        rgba(39, 203, 156, 0) 100%
    );
}

.dh-home-contrast__col--old .dh-home-contrast__accent-bar {
    background: linear-gradient(
        to right,
        rgb(223, 83, 83) 0%,
        rgba(223, 83, 83, 0) 100%
    );
}

.dh-home-contrast__stack .dh-home-contrast__list {
    margin-top: 0;
}

.dh-home-contrast__stack .dh-home-contrast__item {
    border-radius: 0 0 0.72rem 0.72rem;
}

.dh-home-contrast__media img {
    display: block;
    width: 100%;
    height: auto;
}

.dh-home-contrast__col {
    border-radius: 0;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    padding: 0.45rem 2rem 1.05rem 3.4rem;
    position: relative;
}

.dh-home-contrast__col--old {
    border-left-color: transparent;
}

.dh-home-contrast__col--new {
    border-left-color: transparent;
}

.dh-home-contrast__col::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
}

.dh-home-contrast__col--old::before {
    background: linear-gradient(
        to bottom,
        rgba(223, 83, 83, 0) 0%,
        rgba(223, 83, 83, 0.58) 24%,
        rgba(223, 83, 83, 0.78) 48%,
        rgba(223, 83, 83, 0.58) 72%,
        rgba(223, 83, 83, 0) 100%
    );
}

.dh-home-contrast__col--new::before {
    background: linear-gradient(
        to bottom,
        rgba(39, 203, 156, 0) 0%,
        rgba(39, 203, 156, 0.58) 24%,
        rgba(39, 203, 156, 0.78) 48%,
        rgba(39, 203, 156, 0.58) 72%,
        rgba(39, 203, 156, 0) 100%
    );
}

.dh-home-contrast__eyebrow {
    margin: 0 0 0.8rem;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dh-home-contrast__col--old .dh-home-contrast__eyebrow {
    color: rgba(239, 133, 133, 0.95);
}

.dh-home-contrast__col--new .dh-home-contrast__eyebrow {
    color: rgba(118, 234, 204, 0.95);
}

.dh-home-contrast__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

.dh-home-contrast__list {
    margin: 1.15rem 0 0;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.dh-home-contrast__item {
    border-radius: 0.72rem;
    border: none;
    background: rgba(0, 0, 0, 0.09);
    padding: 0.68rem 15px 0.95rem;
}

.dh-home-contrast__col--old .dh-home-contrast__item {
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(120, 16, 16, 0.26), transparent 85%),
        rgba(0, 0, 0, 0.14);
}

.dh-home-contrast__col--new .dh-home-contrast__item {
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(8, 100, 77, 0.26), transparent 85%),
        rgba(0, 0, 0, 0.15);
}

.dh-home-contrast__item-head {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.52rem;
    font-size: 1.02rem;
    line-height: 1.3;
    font-weight: 600;
    color:rgb(198, 198, 198);
}

.dh-home-contrast__icon {
    width: 1.06rem;
    height: 1.06rem;
    border-radius: 999px;
    flex: 0 0 1.06rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
}

.dh-home-contrast__icon--bad {
    background: rgba(223, 83, 83, 0.16);
    border: 1px solid rgba(223, 83, 83, 0.38);
    color: rgba(244, 152, 152, 0.95);
}

.dh-home-contrast__icon--good {
    background: rgba(39, 203, 156, 0.16);
    border: 1px solid rgba(39, 203, 156, 0.38);
    color: rgba(134, 241, 214, 0.95);
}

.dh-home-contrast__item > p:not(.dh-home-contrast__item-head) {
    margin: 0.36rem 0 0 15px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--dh-home-text-2);
}

.dh-home-contrast__points {
    list-style: none;
    margin: 0;
    padding: 0 0 0.35rem;
    display: grid;
    gap: 0.68rem;
}

.dh-home-contrast__point {
    margin: 0;
    padding: 0;
}

.dh-home-contrast__point:last-child .dh-home-contrast__item-head {
    line-height: 1.42;
    padding-bottom: 0.15rem;
}

.dh-home-contrast__point p {
    margin: 0.36rem 0 0 15px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--dh-home-text-2);
}

.dh-home-contrast__point:last-child p:last-child {
    margin-bottom: 0;
    padding-bottom: 0.25rem;
    line-height: 1.62;
}

.dh-home-testimonials {
    background:
        radial-gradient(130% 95% at 50% 0%, rgba(68, 42, 104, 0.34), transparent 60%),
        radial-gradient(120% 100% at 0% 100%, rgba(26, 22, 74, 0.26), transparent 62%);
}

.dh-home-testimonials__intro {
    text-align: center;
    margin-bottom: 1.8rem;
}

.dh-home-testimonials__intro .dh-home-heading {
    max-width: none;
    margin-inline: auto;
}

.dh-home-testimonials__intro .dh-home-sub {
    margin-inline: auto;
    max-width: 64ch;
}

.dh-home-testimonials__intro .dh-home-eyebrow {
    color: var(--dh-home-gold);
}

.dh-home-testimonials__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dh-home-testimonial-card {
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 28, 25, 0.48);
    padding: 1rem 1rem 0.95rem;
}

.dh-home-testimonial-card__stars {
    margin: 0 0 0.65rem;
    color: var(--dh-home-gold);
    letter-spacing: 0.08em;
    font-size: 1.5rem;
    line-height: 1;
}

.dh-home-testimonial-card__quote {
    margin: 0;
    color: #d6d7de;
    font-size: 0.93rem;
    line-height: 1.62;
    min-height: 6.4rem;
}

.dh-home-testimonial-card__person {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.6rem;
    align-items: center;
}

.dh-home-testimonial-card__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1c1508;
    background:
        radial-gradient(80% 80% at 30% 25%, rgba(255, 255, 255, 0.22), transparent 70%),
        color-mix(in srgb, var(--dh-home-gold) 72%, #0f0f0f);
    border: 1px solid color-mix(in srgb, var(--dh-home-gold) 40%, rgba(255, 255, 255, 0.15));
}

.dh-home-testimonial-card__name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.dh-home-testimonial-card__role {
    margin: 0.2rem 0 0;
    font-size: 0.77rem;
    color: var(--dh-home-text-3);
    line-height: 1.25;
}

.dh-home-faq .dh-home-eyebrow {
    color:rgb(97, 187, 211);
}

.dh-home-faq__list {
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    max-width: 72ch;
}

.dh-home-faq__item {
    border-radius: 0.75rem;
    border: 1px solid var(--dh-home-border);
    background: rgba(11, 23, 24, 0.8);
    overflow: hidden;
}

.dh-home-faq__summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1.4rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.82rem 0.9rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.dh-home-faq__summary::-webkit-details-marker {
    display: none;
}

.dh-home-faq__q {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(97, 187, 211, 0.22);
    border: 1px solid rgba(111, 178, 255, 0.55);
    color:rgb(97, 187, 211);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
}

.dh-home-faq__chevron {
    color: #8ea0b7;
    transition: transform 160ms ease;
    font-size: 0.82rem;
}

.dh-home-faq__item[open] .dh-home-faq__chevron {
    transform: rotate(180deg);
}

.dh-home-faq__answer {
    margin: 0;
    padding: 0.65rem 0.9rem 0.9rem 2.9rem;
    color: var(--dh-home-text-2);
    font-size: 0.9rem;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#hosting-only {
    padding-top: 0;
    border-top: 1px solid var(--dh-home-border);
    background:
        radial-gradient(ellipse at 95% 85%, rgba(154, 33, 195, 0.22), transparent 52%),
        radial-gradient(120% 120% at 100% 0%, rgba(154, 33, 195, 0.1), transparent 52%),
        radial-gradient(130% 140% at 0% 100%, rgba(123, 113, 180, 0.08), transparent 58%);
}

#hosting-only .dh-home-eyebrow {
    color: var(--dh-hosting-purple-eyebrow);
}

#hosting-only .dh-home-heading {
    color: #fff;
}

#hosting-only .dh-home-btn--accent {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--dh-hosting-purple-cta);
    color: #fff;
}

#hosting-only .dh-home-btn--accent:hover {
    background: var(--dh-hosting-purple-cta-hover);
    border-color: rgba(255, 255, 255, 0.18);
}

.dh-home-hosting-image {
    margin: 0 0 5rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: clip;
}

.dh-home-hosting-image img {
    display: block;
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    object-position: center;
}

.dh-home-footer {
    border-top: 1px solid var(--dh-home-border);
    padding: 2.2rem 0 1.5rem;
    background: #090909;
}

.dh-home-footer__top {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dh-home-footer__brand {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.dh-home-footer__brand-line {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.dh-home-footer__logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 2rem;
    max-width: 100%;
}

.dh-home-footer__bolt {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #0a0a0a;
    background: linear-gradient(140deg, rgba(53, 223, 187, 1), rgba(103, 232, 249, 1));
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.dh-home-footer__tag {
    margin: 0;
    max-width: 30ch;
    color: var(--dh-home-text-3);
    font-size: 0.9rem;
    line-height: 1.55;
}

.dh-home-footer__col h3 {
    margin: 0 0 0.7rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.dh-home-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.dh-home-footer__links a {
    color: var(--dh-home-text-2);
    text-decoration: none;
    font-size: 0.9rem;
}

.dh-home-footer__links a:hover {
    color: #fff;
}

.dh-home-footer__bottom {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dh-home-footer__copyright {
    margin: 0;
    color: var(--dh-home-text-3);
    font-size: 0.8rem;
}

.dh-home-footer__social {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dh-home-footer__social a {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--dh-home-text-2);
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .dh-home-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .dh-home-hero {
        padding-top: 5.3rem;
    }

    .dh-home-hero__grid {
        grid-template-columns: 1fr;
    }

    .dh-home-illustrator__body {
        grid-template-columns: 1fr;
    }

    .dh-home-heading {
        max-width: none;
    }

    .dh-home-contrast {
        grid-template-columns: 1fr;
    }

    .dh-home-advantage-intro { display: block; }

    .dh-home-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .dh-home-how-grid {
        grid-template-columns: 1fr;
    }

    .dh-home-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-home-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 580px) {
    .dh-home-grid-4 {
        grid-template-columns: 1fr;
    }

    .dh-home-illustrator__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-home-wrap {
        width: min(var(--dh-home-max), calc(100% - 2rem));
    }

    .dh-home-footer__top {
        grid-template-columns: 1fr;
    }

    .dh-home-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ========== Inner pages ========== */

/* Build & Host + inner pages */
.dh-build-host-hero {
    position: relative;
    padding: 5.8rem 0 4.3rem;
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(53, 223, 187, 0.34) 0%, rgba(12, 44, 39, 0.22) 40%, rgba(5, 18, 17, 0) 72%),
        radial-gradient(110% 120% at 85% 100%, rgba(13, 36, 44, 0.25) 0%, rgba(10, 26, 31, 0.1) 45%, rgba(6, 13, 16, 0) 78%);
}

.dh-build-host-hero__inner {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
}

/* Match section tile background on main so gaps never show body #0a0a0c */
.dh-build-host-main {
    background-color: #060606;
}

.dh-build-host-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: center;
}

.dh-section--build-host-detail {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.dh-build-host__text-block {
    width: 100%;
    margin: 0;
}

.dh-build-host__intro {
    max-width: 78ch;
    margin-bottom: 1.4rem;
    text-align: left;
}

.dh-build-host__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(73, 212, 179);
}

.dh-build-host__intro .dh-section__title {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 300;
    color: #fff;
    text-align: left;
}

.dh-build-host__intro .dh-section__lead {
    margin: 1.2rem 0 0;
    max-width: 58ch;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.62;
    text-align: left;
}

.dh-build-host__hero-actions {
    margin-top: 1.25rem;
}

.dh-build-host__hero-actions .dh-build-host__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(73, 212, 179, 0.45);
    background: rgb(73, 212, 179);
    color: #0a0a0a;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease;
}

.dh-build-host__hero-actions .dh-build-host__cta:hover,
.dh-build-host__hero-actions .dh-build-host__cta:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.dh-build-host-hero__media {
    margin: 0;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(120% 100% at 15% 15%, rgba(83, 218, 255, 0.12), transparent 60%),
        rgba(9, 18, 21, 0.6);
    overflow: hidden;
}

.dh-build-host-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dh-build-host__tool-head {
    margin-bottom: 1rem;
}

.dh-build-host__tool-head h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #fff;
    scroll-margin-top: 1.25rem;
}

.dh-build-host__tool-head-accent {
    background: linear-gradient(to right, rgb(73, 212, 179), rgb(103, 232, 249));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dh-build-host__tool-head p {
    margin: 0.65rem 0 0;
    color: var(--dh-muted);
}

.dh-build-host__kicker {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(244, 244, 245, 0.62);
}

.dh-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.dh-tier-card {
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.26);
}

.dh-tier-card h3 {
    margin-bottom: 0.45rem;
}

.dh-tier-card p {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    color: var(--dh-muted);
}

.dh-tier-card__meta {
    font-size: 0.88rem;
    color: var(--dh-muted-2);
}

.dh-estimator {
    --dh-tool-accent: rgb(73, 212, 179);
    margin-top: 0;
    padding: clamp(2rem, 4vw, 2.8rem);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: clip;
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.12), transparent 58%),
        radial-gradient(110% 100% at 100% 100%, rgba(53, 223, 187, 0.1), transparent 60%),
        rgba(0, 0, 0, 0.34);
}

.dh-estimator__group {
    margin-bottom: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dh-estimator__group:first-of-type {
    margin-bottom: 2rem;
    padding-top: 0;
    border-top: 0;
}

/* Shown only at narrow mobile via media query */
.dh-estimator__plan-length-label {
    display: none;
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.45);
}

.dh-estimator__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.dh-currency-switch {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.25rem;
    padding: 0.15rem 0;
}

.dh-currency-switch__btn {
    min-height: 1.55rem;
    padding: 0 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.35rem;
    background: transparent;
    color: rgba(244, 244, 245, 0.5);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.dh-currency-switch__btn:hover,
.dh-currency-switch__btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    color: rgba(244, 244, 245, 0.85);
}

.dh-currency-switch__btn.is-active {
    border-color: color-mix(in srgb, var(--dh-tool-accent) 62%, transparent);
    background: color-mix(in srgb, var(--dh-tool-accent) 18%, transparent);
    color: #fff;
}

.dh-estimator > p {
    margin: 0.55rem 0 1rem;
    color: var(--dh-muted);
}

.dh-estimator__hint {
    margin: 0.45rem 0 0;
    color: var(--dh-muted-2);
    font-size: 0.84rem;
    line-height: 1.45;
}

.dh-estimator__group input[type="range"],
.dh-estimator__group .dh-estimator__radio-row {
    margin-top: 0.8rem;
}

.dh-estimator__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.42rem;
}

.dh-estimator__label-row--budget {
    margin-top: 1rem;
}

.dh-estimator__label {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Field labels (inside label-rows) — toned down so section titles stand out */
.dh-estimator__label-row .dh-estimator__label {
    color: rgba(244, 244, 245, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Info icon + hover/focus tooltip */
.dh-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: rgba(244, 244, 245, 0.55);
    font: 600 0.62rem/1 'Inter', system-ui, sans-serif;
    font-style: italic;
    cursor: help;
    vertical-align: middle;
    transition: color 140ms ease, border-color 140ms ease;
}

.dh-info:hover,
.dh-info:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    outline: none;
}

.dh-info__bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 18rem;
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 24, 28, 0.98);
    color: rgba(244, 244, 245, 0.85);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 5;
}

.dh-info__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(20, 24, 28, 0.98);
}

.dh-info:hover .dh-info__bubble,
.dh-info:focus-visible .dh-info__bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dh-estimator__section-title {
    display: block;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

.dh-estimator__value {
    color: var(--dh-tool-accent);
    font-weight: 700;
    font-size: 0.94rem;
}

.dh-estimator select,
.dh-estimator input[type="range"] {
    accent-color: var(--dh-tool-accent);
}

.dh-estimator__label-num {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(23, 29, 32, 0.9);
    color: var(--dh-tool-accent);
    display: inline-grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.dh-estimator__tier-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.dh-estimator__tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.7rem 0.5rem;
    text-align: center;
    font-weight: 600;
}

.dh-tier__num {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(244, 244, 245, 0.4);
}

.dh-tier__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(244, 244, 245, 0.62);
}

/* Tier accents: blue-green (Personal) → yellow-green (Enterprise) */
.dh-estimator__tier--t1 { --dh-tier-accent: var(--dh-tier-t1-accent); }
.dh-estimator__tier--t2 { --dh-tier-accent: var(--dh-tier-t2-accent); }
.dh-estimator__tier--t3 { --dh-tier-accent: var(--dh-tier-t3-accent); }
.dh-estimator__tier--t4 { --dh-tier-accent: var(--dh-tier-t4-accent); }

.dh-estimator__tier.is-active {
    border-color: color-mix(in srgb, var(--dh-tier-accent) 62%, transparent);
    background: color-mix(in srgb, var(--dh-tier-accent) 18%, transparent);
}

.dh-estimator__tier.is-active .dh-tier__name {
    color: #fff;
}

.dh-estimator__tier-desc {
    margin: 1rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.055);
    color: #fff;
    font-size: 0.84rem;
    line-height: 1.55;
    font-weight: 400;
    transition: border-color 180ms ease, background 180ms ease;
}

.dh-estimator__tier-desc--t1 {
    --dh-tier-accent: var(--dh-tier-t1-accent);
    border-color: color-mix(in srgb, var(--dh-tier-accent) 38%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 16%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-estimator__tier-desc--t2 {
    --dh-tier-accent: var(--dh-tier-t2-accent);
    border-color: color-mix(in srgb, var(--dh-tier-accent) 38%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 16%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-estimator__tier-desc--t3 {
    --dh-tier-accent: var(--dh-tier-t3-accent);
    border-color: color-mix(in srgb, var(--dh-tier-accent) 38%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 16%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-estimator__tier-desc--t4 {
    --dh-tier-accent: var(--dh-tier-t4-accent);
    border-color: color-mix(in srgb, var(--dh-tier-accent) 38%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 16%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-estimator input[type="range"] {
    width: 100%;
}

.dh-estimator__range-extremes {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0 0.05rem;
}

.dh-estimator__range-extremes .dh-tier__num {
    font-variant-numeric: tabular-nums;
}

.dh-estimator__radio-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0;
}

.dh-estimator__group .dh-estimator__radio-row--plan {
    margin-top: 1rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dh-estimator__term {
    position: relative;
    display: block;
    padding: 0.55rem 0.45rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

/* Plan length row: number + small “month”, same rhythm as tier buttons */
.dh-estimator__term--plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.7rem 0.45rem;
    font-size: inherit;
}

.dh-estimator__term--plan .dh-tier__name {
    line-height: 1.1;
}

.dh-estimator__term--plan .dh-tier__num {
    text-transform: lowercase;
    letter-spacing: 0.06em;
}

.dh-estimator__term--plan.is-active .dh-tier__num {
    color: color-mix(in srgb, var(--dh-tool-accent) 70%, white 30%);
}

.dh-estimator__term input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dh-estimator__term--plan.is-active {
    border-color: color-mix(in srgb, var(--dh-tool-accent) 62%, transparent);
    background: color-mix(in srgb, var(--dh-tool-accent) 18%, transparent);
    color: #fff;
}

.dh-estimator__meta {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.dh-estimator__meta p {
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.84rem;
    color: var(--dh-muted);
}

.dh-estimator__meta strong {
    color: #fff;
    font-weight: 600;
}

.dh-estimator__totals {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 0.4rem;
    border-radius: 10px;
}

.dh-estimator__totals p {
    margin: 0;
}

.dh-estimator__monthly {
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
}

.dh-estimator__help {
    margin-top: 1rem;
    color: var(--dh-muted-2);
    font-size: 0.84rem;
}

.dh-estimator__blend {
    margin-top: 2rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.dh-estimator__blend > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.dh-estimator__blend > summary::-webkit-details-marker {
    display: none;
}

.dh-estimator__blend > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--dh-tool-accent);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
}

.dh-estimator__blend[open] > summary::after {
    content: '−';
}

.dh-estimator__blend-body {
    padding: 0.45rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dh-estimator__blend-body .dh-estimator__hint {
    margin: 0.35rem 0 1rem;
}

.dh-faq-list {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.dh-faq-list li {
    padding: 0.95rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
}

.dh-faq-list strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #fff;
}

.dh-build-host__saved-copy {
    margin-top: 2.2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    padding-top: 1.2rem;
    color: var(--dh-muted-2);
    font-size: 0.82rem;
}

.dh-build-host__saved-copy > summary {
    cursor: pointer;
    color: var(--dh-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.dh-build-host-section-lead {
    margin: 0.65rem 0 0;
    max-width: 58ch;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.62;
}

/* Plan life-cycle section — padding not margin so tile bg fills the gap above the rule */
.dh-build-host-lifecycle {
    margin-top: 0;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dh-build-host-lifecycle__intro {
    margin-bottom: 2rem;
    max-width: 78ch;
}

.dh-build-host-lifecycle__heading {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

.dh-build-host-lifecycle__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* Secondary CTA — matches home .dh-home-btn--ghost */
.dh-build-host-lifecycle__actions {
    margin: 1.75rem 0 0;
}

.dh-build-host-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.dh-build-host-btn--ghost {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

.dh-build-host-btn--ghost:hover,
.dh-build-host-btn--ghost:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
}

.dh-bh-lifecycle-card {
    padding: 1.2rem 1.1rem 1.3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.1), transparent 58%),
        rgba(0, 0, 0, 0.28);
}

.dh-bh-lifecycle-card__num {
    width: 1.65rem;
    height: 1.65rem;
    margin-bottom: 1.35rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(73, 212, 179, 0.35);
    background: rgba(73, 212, 179, 0.12);
    color: rgb(73, 212, 179);
    display: inline-grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.dh-section--build-host .dh-bh-lifecycle-card h3.dh-bh-lifecycle-card__title {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-bh-lifecycle-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--dh-muted-2);
}

/* Case study section (content / screenshots TBC) */
.dh-build-host-case-study {
    margin-top: 0;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dh-build-host-case-study__intro {
    margin-bottom: 0;
    max-width: 78ch;
}

.dh-build-host-case-study__heading {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

.dh-build-host-case-study__content {
    margin-top: 1.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(to bottom, rgba(15, 19, 24, 1), rgba(10, 13, 16, 1));
    overflow: hidden;
}

.dh-build-host-case-study__showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    align-items: stretch;
}

.dh-build-host-case-study__media {
    margin: 0;
    min-height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.28);
}

.dh-build-host-case-study__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
    object-position: top center;
}

.dh-build-host-case-study__story {
    padding: 0;
}

.dh-build-host-case-study__detail {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.85rem);
}

.dh-build-host-case-study__story .dh-build-host__eyebrow {
    margin-bottom: 0.65rem;
    color: rgb(48, 222, 238);
}

.dh-build-host-case-study__story-heading {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

.dh-build-host-case-study__story-text {
    margin: 0.85rem 0 0;
    font-size: 0.92rem;
    line-height: 1.62;
    color: var(--dh-muted);
}

.dh-build-host-case-study__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.dh-build-host-case-study__stat--highlight {
    grid-column: 1 / -1;
    border-color: rgba(48, 222, 238, 0.28);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(48, 222, 238, 0.12), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-build-host-case-study__stat--highlight .dh-build-host-case-study__stat-value {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    color: rgb(48, 222, 238);
}

.dh-build-host-case-study__stat {
    padding: 0.7rem 0.75rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.dh-build-host-case-study__stat-label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.42);
}

.dh-build-host-case-study__stat-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

.dh-build-host-case-study__testimonial {
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

.dh-build-host-case-study__testimonial-stars {
    margin: 0 0 0.55rem;
    color: rgb(48, 222, 238);
    letter-spacing: 0.08em;
    font-size: 1.05rem;
    line-height: 1;
}

.dh-build-host-case-study__testimonial-quote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(244, 244, 245, 0.88);
}

.dh-build-host-case-study__testimonial-quote::before {
    content: '\201C';
}

.dh-build-host-case-study__testimonial-quote::after {
    content: '\201D';
}

.dh-build-host-case-study__testimonial-person {
    margin-top: 0.85rem;
    padding-top: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    gap: 0.65rem;
    align-items: center;
}

.dh-build-host-case-study__testimonial-avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: #0a1218;
    background:
        radial-gradient(80% 80% at 30% 25%, rgba(255, 255, 255, 0.22), transparent 70%),
        rgb(48, 222, 238);
    border: 1px solid rgba(48, 222, 238, 0.45);
}

.dh-build-host-case-study__testimonial-name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    line-height: 1.2;
}

.dh-build-host-case-study__testimonial-role {
    margin: 0.18rem 0 0;
    font-size: 0.77rem;
    color: var(--dh-muted-2);
    line-height: 1.25;
}

/* Next step CTA — teal/cyan tint to match Build & Host page gradients */
.dh-build-host-main .dh-home-cta {
    border-top-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.12), transparent 58%),
        radial-gradient(110% 100% at 100% 100%, rgba(53, 223, 187, 0.1), transparent 60%),
        radial-gradient(110% 120% at 85% 15%, rgba(48, 222, 238, 0.08), transparent 52%),
        #060606;
}

/* ── Two-column estimator layout ──────────────────────────── */

.dh-estimator-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    align-items: start;
}

.dh-estimator__panel {
    position: sticky;
    top: 5.5rem;
}

.dh-estimator__panel-inner {
    border-radius: 14px;
    background: linear-gradient(to bottom, rgba(15, 19, 24, 1), rgba(10, 13, 16, 1));
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.dh-estimator__panel-header {
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dh-live-badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.dh-live-badge__dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgb(73, 212, 179);
    animation: dh-pulse 2s ease-in-out infinite;
}

@keyframes dh-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

.dh-live-badge__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.42);
}

.dh-estimator__panel-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.dh-estimator__panel-summary,
.dh-estimator__panel-breakdown {
    padding: 1rem 1.4rem;
    display: grid;
    gap: 0.65rem;
}

.dh-estimator__panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dh-panel-row__label {
    font-size: 0.8rem;
    color: var(--dh-muted-2);
}

.dh-panel-row__val {
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    text-align: right;
    transition: color 160ms ease;
}

.dh-panel-row__val.is-zero {
    color: rgba(244, 244, 245, 0.38);
}

.dh-panel-row__val--fdp {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.45rem;
}

.dh-fdp-compare {
    color: rgba(244, 244, 245, 0.38);
    font-weight: 500;
    text-decoration: line-through;
}

.dh-fdp-compare[hidden] {
    display: none;
}

.dh-estimator__panel-divider {
    margin: 0 1.4rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.dh-estimator__panel-total {
    padding: 1.2rem 1.4rem;
}

.dh-panel-total__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(244, 244, 245, 0.5);
    margin-bottom: 0.35rem;
}

.dh-estimator__panel-total-num-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.dh-estimator__panel-total-num {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(to right, rgb(73, 212, 179), rgb(103, 232, 249));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dh-estimator__panel-total-per {
    font-size: 0.88rem;
    color: var(--dh-muted-2);
    font-weight: 500;
}

.dh-estimator__panel-total-note {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: rgba(244, 244, 245, 0.28);
    line-height: 1.45;
}

.dh-estimator__panel-included {
    margin: 0 1.4rem 1.2rem;
    padding: 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.dh-panel-included__heading {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.35);
    margin-bottom: 0.65rem;
}

.dh-estimator__panel-included ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.dh-estimator__panel-included li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: rgba(244, 244, 245, 0.6);
}

.dh-estimator__panel-included li::before {
    content: '';
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1.5px solid rgb(73, 212, 179);
    background: rgba(73, 212, 179, 0.18);
}

.dh-estimator__panel-cta {
    padding: 0 1.4rem 1.4rem;
}

.dh-estimator__panel-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgb(73, 212, 179);
    color: #0a0a0a;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: filter 160ms ease, transform 160ms ease;
}

.dh-estimator__panel-btn:hover,
.dh-estimator__panel-btn:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.dh-panel-cta__note {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(244, 244, 245, 0.28);
}

.dh-estimator__comparison {
    margin-top: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dh-comparison__heading {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.38rem;
}

.dh-estimator__comparison p {
    margin: 0;
    font-size: 0.76rem;
    color: var(--dh-muted-2);
    line-height: 1.52;
}

.dh-estimator__comparison strong {
    color: #fff;
}

.dh-estimator__comparison .dh-accent {
    color: rgb(73, 212, 179);
}

/* Side-by-side optional cards (03 & 04) */

.dh-estimator__optional-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-top: 1.6rem;
}

.dh-estimator__optional-card {
    padding: 1.05rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
}

/* FDP card — purple accent */
.dh-estimator__optional-card--fdp {
    --dh-tool-accent: rgb(192, 132, 252);
}

.dh-estimator__optional-card--fdp .dh-estimator__label-num {
    color: rgb(192, 132, 252);
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.32);
}

/* Deposit card — amber accent */
.dh-estimator__optional-card--deposit {
    --dh-tool-accent: rgb(251, 191, 36);
}

.dh-estimator__optional-card--deposit .dh-estimator__label-num {
    color: rgb(251, 191, 36);
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.32);
}

.dh-estimator__optional-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.dh-estimator__optional-card__title {
    display: block;
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.dh-estimator__optional-badge {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.18rem 0.52rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(244, 244, 245, 0.36);
    letter-spacing: 0.04em;
}

@media (max-width: 1100px) {
    .dh-estimator-layout {
        grid-template-columns: 1fr;
    }

    .dh-estimator__panel {
        position: static;
    }
}

@media (max-width: 600px) {
    .dh-estimator__optional-pair {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dh-estimator__tier-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-build-host-hero__grid {
        grid-template-columns: 1fr;
    }

    .dh-build-host-hero__media {
        max-width: 560px;
    }

    .dh-tier-grid {
        grid-template-columns: 1fr;
    }

    .dh-estimator__radio-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dh-estimator__meta {
        grid-template-columns: 1fr;
    }

    .dh-build-host-lifecycle__grid {
        grid-template-columns: 1fr;
    }

    .dh-build-host-case-study__showcase {
        grid-template-columns: 1fr;
    }

    .dh-build-host-case-study__media {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .dh-build-host-case-study__media img {
        min-height: 12rem;
        max-height: 18rem;
    }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .dh-build-host-lifecycle__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Web project brief (web-project-brief.php) ── */

.dh-project-brief-page {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.dh-project-brief-main {
    background-color: #060606;
}

.dh-project-brief {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.12), transparent 58%),
        radial-gradient(110% 100% at 100% 100%, rgba(53, 223, 187, 0.1), transparent 60%),
        rgba(0, 0, 0, 0.34);
}

.dh-project-brief__inner {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
    text-align: left;
}

.dh-project-brief__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(48, 222, 238);
}

.dh-project-brief__heading {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

.dh-project-brief__lead {
    margin: 0.85rem 0 0;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.62;
    max-width: 65ch;
}

.dh-project-brief__confirmation {
    max-width: 42rem;
    margin-top: 0.25rem;
    padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.15rem, 2.5vw, 1.35rem);
    border-radius: 12px;
    border: 1px solid rgba(48, 222, 238, 0.22);
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.16), transparent 58%),
        radial-gradient(110% 100% at 100% 100%, rgba(53, 223, 187, 0.1), transparent 60%),
        rgba(255, 255, 255, 0.02);
}

.dh-project-brief__confirmation-lead {
    margin: 0;
    font-size: clamp(1.35rem, 2.8vw, 1.65rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: rgb(48, 222, 238);
}

.dh-project-brief__confirmation-body {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.62;
    color: rgba(244, 244, 245, 0.82);
}

.dh-project-brief__confirmation-back {
    display: inline-block;
    margin-top: 1.35rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(244, 244, 245, 0.42);
    text-decoration: none;
    transition: color 140ms ease;
}

.dh-project-brief__confirmation-back:hover,
.dh-project-brief__confirmation-back:focus-visible {
    color: rgba(244, 244, 245, 0.68);
    text-decoration: underline;
}

.dh-project-brief__notice {
    max-width: 52rem;
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--dh-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.dh-project-brief__notice strong {
    color: #fff;
}

.dh-project-brief__notice ul {
    margin: 0.55rem 0 0;
    padding-left: 1.2rem;
}

.dh-project-brief__notice--success {
    border-color: rgba(48, 222, 238, 0.28);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(48, 222, 238, 0.1), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-project-brief__notice--error {
    border-color: rgba(200, 114, 115, 0.35);
    background: rgba(200, 114, 115, 0.08);
}

.dh-project-brief__notice-actions {
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dh-project-brief__layout {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 1.75rem;
}

.dh-project-brief__layout:has(#illustrator-summary-aside:not([hidden])) {
    align-items: start;
}

.dh-project-brief__layout-main {
    min-width: 0;
}

.dh-project-brief__layout-aside {
    min-width: 0;
}

.dh-project-brief__illustrator {
    max-width: none;
    margin-top: 0;
    padding: 1.15rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(130% 100% at 0% 0%, rgba(73, 212, 179, 0.1), transparent 58%),
        linear-gradient(to bottom, rgba(15, 19, 24, 1), rgba(10, 13, 16, 1));
}

.dh-project-brief__illustrator--t1 { --dh-tier-accent: var(--dh-tier-t1-accent); }
.dh-project-brief__illustrator--t2 { --dh-tier-accent: var(--dh-tier-t2-accent); }
.dh-project-brief__illustrator--t3 { --dh-tier-accent: var(--dh-tier-t3-accent); }
.dh-project-brief__illustrator--t4 { --dh-tier-accent: var(--dh-tier-t4-accent); }

.dh-project-brief__illustrator[class*="--t"] {
    border-color: color-mix(in srgb, var(--dh-tier-accent) 38%, transparent);
    background:
        radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 14%, transparent), transparent 58%),
        radial-gradient(110% 100% at 100% 100%, color-mix(in srgb, var(--dh-tier-accent) 10%, transparent), transparent 60%),
        linear-gradient(to bottom, rgba(15, 19, 24, 1), rgba(10, 13, 16, 1));
}

.dh-project-brief__illustrator[class*="--t"] .dh-project-brief__illustrator-link {
    color: var(--dh-tier-accent);
}

.dh-project-brief__illustrator[class*="--t"] .dh-project-brief__summary-item--highlight {
    border-color: color-mix(in srgb, var(--dh-tier-accent) 28%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent) 12%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-project-brief__illustrator[class*="--t"] .dh-project-brief__summary-item--highlight .dh-project-brief__summary-value {
    color: var(--dh-tier-accent);
}

.dh-project-brief__section-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.dh-project-brief__illustrator-foot {
    margin-top: 0.85rem;
}

.dh-project-brief__illustrator-saved {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(244, 244, 245, 0.55);
}

.dh-project-brief__illustrator-link {
    display: inline-block;
    margin-top: 0.55rem;
    color: rgb(48, 222, 238);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.dh-project-brief__illustrator-link:hover,
.dh-project-brief__illustrator-link:focus-visible {
    text-decoration: underline;
}

.dh-project-brief__rates-fallback {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(244, 244, 245, 0.42);
}

.dh-project-brief__summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.dh-project-brief__summary-item {
    padding: 0.7rem 0.75rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.dh-project-brief__summary-item--tier {
    border-color: color-mix(in srgb, var(--dh-tier-accent, rgb(48, 222, 238)) 38%, transparent);
    background:
        radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--dh-tier-accent, rgb(48, 222, 238)) 16%, transparent), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-project-brief__summary-item--tier .dh-project-brief__summary-value {
    color: var(--dh-tier-accent, rgb(48, 222, 238));
}

.dh-project-brief__summary-item--highlight {
    grid-column: 1 / -1;
    border-color: rgba(48, 222, 238, 0.28);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(48, 222, 238, 0.12), transparent 68%),
        rgba(255, 255, 255, 0.03);
}

.dh-project-brief__summary-label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.42);
}

.dh-project-brief__summary-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.dh-project-brief__summary-item--highlight .dh-project-brief__summary-value {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    color: rgb(48, 222, 238);
}

.dh-project-brief__form {
    margin-top: 0;
    max-width: 42rem;
}

.dh-contact-page .dh-project-brief__form {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* ── Online payments ── */

.dh-payment-page .dh-project-brief__eyebrow {
    color: var(--dh-home-gold);
}

.dh-payment-page .dh-project-brief__confirmation-lead {
    color: var(--dh-home-gold);
}

.dh-payment-page__notice {
    margin-top: clamp(1.25rem, 3vw, 2rem);
    border-color: color-mix(in srgb, var(--dh-home-gold) 28%, rgba(255, 255, 255, 0.1));
    background: color-mix(in srgb, var(--dh-home-gold) 8%, rgba(255, 255, 255, 0.03));
}

.dh-payment-page .dh-project-brief__form {
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.dh-payment-page .dh-project-brief__confirmation .dh-project-brief__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.dh-payment-page__secondary-cta {
    margin-left: 0;
}

.dh-payment-form button[disabled] {
    opacity: 0.72;
    cursor: wait;
}

#payment-error p {
    margin: 0.55rem 0 0;
}

/* ── Legal / terms (terms-and-policies.php) ── */

.dh-legal-page .dh-project-brief__heading {
    max-width: none;
}

.dh-legal-page .dh-project-brief__lead {
    margin-bottom: 0;
}

.dh-legal-prose {
    max-width: 52rem;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--dh-muted);
    font-size: 0.98rem;
    line-height: 1.68;
}

.dh-legal-prose section + section {
    margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
    padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dh-legal-prose h2 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.dh-legal-prose p {
    margin: 0 0 0.85rem;
}

.dh-legal-prose p:last-child {
    margin-bottom: 0;
}

.dh-legal-prose ul {
    margin: 0 0 0.85rem;
    padding-left: 1.25rem;
}

.dh-legal-prose li {
    margin-bottom: 0.35rem;
}

.dh-legal-prose li:last-child {
    margin-bottom: 0;
}

.dh-legal-prose strong {
    color: rgba(244, 244, 245, 0.92);
    font-weight: 600;
}

.dh-legal-prose a {
    color: rgb(48, 222, 238);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, rgb(48, 222, 238) 45%, transparent);
    text-underline-offset: 0.15em;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.dh-legal-prose a:hover,
.dh-legal-prose a:focus-visible {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.dh-project-brief__section {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.dh-project-brief__section legend {
    padding: 0;
    margin-bottom: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.dh-project-brief__field {
    margin-bottom: 0.85rem;
}

.dh-project-brief__field label,
.dh-project-brief__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(244, 244, 245, 0.55);
}

.dh-project-brief__optional {
    color: rgba(244, 244, 245, 0.35);
    font-weight: 400;
}

.dh-project-brief__field input[type="text"],
.dh-project-brief__field input[type="email"],
.dh-project-brief__field input[type="url"],
.dh-project-brief__field input[type="tel"],
.dh-project-brief__field textarea {
    width: 100%;
    padding: 0.72rem 0.85rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.dh-project-brief__field textarea {
    resize: vertical;
    min-height: 6rem;
}

.dh-project-brief__field input::placeholder,
.dh-project-brief__field textarea::placeholder {
    color: rgba(244, 244, 245, 0.35);
    font-style: italic;
    font-weight: 400;
    opacity: 1;
}

.dh-project-brief__field input:focus-visible,
.dh-project-brief__field textarea:focus-visible {
    outline: none;
    border-color: rgba(48, 222, 238, 0.45);
    box-shadow: 0 0 0 2px rgba(48, 222, 238, 0.12);
}

.dh-project-brief__radio-group {
    display: grid;
    gap: 0.45rem;
}

.dh-project-brief__radio {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    font-size: 0.88rem;
    color: rgba(244, 244, 245, 0.82);
    transition: border-color 140ms ease, background-color 140ms ease;
}

.dh-project-brief__radio:has(input:checked) {
    border-color: rgba(48, 222, 238, 0.35);
    background: rgba(48, 222, 238, 0.08);
}

.dh-project-brief__radio input {
    accent-color: rgb(48, 222, 238);
}

.dh-project-brief__actions {
    margin: 1.25rem 0 0;
}

.dh-project-brief__recaptcha {
    margin: 1.25rem 0 0;
}

.dh-project-brief__recaptcha .g-recaptcha {
    display: inline-block;
}

.dh-project-brief__field--honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 901px) {
    .dh-project-brief__layout:has(#illustrator-summary-aside:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    }

    .dh-project-brief__layout:has(#illustrator-summary-aside:not([hidden])) .dh-project-brief__layout-main {
        grid-column: 1;
        grid-row: 1;
    }

    .dh-project-brief__layout:has(#illustrator-summary-aside:not([hidden])) .dh-project-brief__layout-aside {
        grid-column: 2;
        grid-row: 1;
    }

    .dh-project-brief__layout-aside .dh-project-brief__illustrator {
        position: sticky;
        top: 1.25rem;
    }

    .dh-project-brief__layout-aside .dh-project-brief__summary-grid {
        grid-template-columns: 1fr;
    }

    .dh-project-brief__layout-aside .dh-project-brief__summary-item--highlight {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .dh-project-brief__summary-grid {
        grid-template-columns: 1fr;
    }

    .dh-project-brief__summary-item--highlight {
        grid-column: auto;
    }
}

/* ── Web hosting (web-hosting-bristol.php) ── */

.dh-web-hosting-page {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.dh-web-hosting-main {
    background-color: #060606;
}

.dh-web-hosting-hero {
    position: relative;
    padding: 5.8rem 0 4.3rem;
    background:
        radial-gradient(ellipse at 5% 5%, rgba(154, 33, 195, 0.38), transparent 48%),
        radial-gradient(110% 120% at 85% 100%, rgba(13, 36, 44, 0.18) 0%, rgba(10, 26, 31, 0.08) 45%, rgba(6, 13, 16, 0) 78%);
}

.dh-web-hosting-hero__inner {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
}

.dh-web-hosting-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: center;
}

.dh-web-hosting-hero__eyebrow {
    margin: 0 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dh-hosting-purple-eyebrow);
}

.dh-web-hosting-hero__intro .dh-section__title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 300;
    color: #fff;
    text-align: left;
}

.dh-web-hosting-hero__intro .dh-section__lead {
    margin: 1.2rem 0 0;
    max-width: 58ch;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.62;
    text-align: left;
}

.dh-web-hosting-hero__actions {
    margin-top: 1.25rem;
}

.dh-web-hosting-hero__actions .dh-web-hosting-hero__cta,
.dh-web-hosting__actions .dh-web-hosting__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--dh-hosting-purple-cta);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dh-web-hosting-hero__actions .dh-web-hosting-hero__cta:hover,
.dh-web-hosting-hero__actions .dh-web-hosting-hero__cta:focus-visible,
.dh-web-hosting__actions .dh-web-hosting__cta:hover,
.dh-web-hosting__actions .dh-web-hosting__cta:focus-visible {
    background: var(--dh-hosting-purple-cta-hover);
    border-color: rgba(255, 255, 255, 0.18);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.dh-web-hosting-hero__media {
    margin: 0;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(120% 100% at 15% 15%, rgba(183, 100, 199, 0.14), transparent 60%),
        rgba(9, 18, 21, 0.6);
    overflow: hidden;
}

.dh-web-hosting-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dh-section--web-hosting-detail {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (max-width: 900px) {
    .dh-web-hosting-hero__grid {
        grid-template-columns: 1fr;
    }

    .dh-web-hosting-hero__media {
        max-width: 560px;
    }
}

/* ============================================================
   MOBILE POLISH — ≤ 480 px
   Consistent 1 rem edge gutters (matches nav logo left edge),
   tighter vertical rhythm, Cost Illustrator reflow.
   ============================================================ */
@media (max-width: 480px) {

    /* ── HOME PAGE ── */

    /* Hero: cut the generous top/bottom padding down to size */
    .dh-home-hero {
        padding-top: 3.5rem;
        padding-bottom: 2rem;
    }

    /* Every home section: tighten top + bottom */
    .dh-home-section {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    /* Build-&-Host advantage section has a tighter override; keep proportional */
    #the-darkhouse-build-and-host-way.dh-home-section {
        padding-bottom: 2rem;
    }

    /* Home CTA band */
    .dh-home-cta {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Build & Host + Simple Hosting teaser sections */
    .dh-section--build-host,
    .dh-section--simple-hosting {
        padding-top: 2.75rem;
    }

    /* ── INNER PAGES: heroes ── */

    .dh-build-host-hero {
        padding-top: 3.5rem;
        padding-bottom: 2.5rem;
    }

    .dh-web-hosting-hero {
        padding-top: 3.5rem;
        padding-bottom: 2.5rem;
    }

    .dh-project-brief {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    /* ── COST ILLUSTRATOR REFLOW ── */

    /* Reduce card padding so the interior has more room */
    .dh-estimator {
        padding: 1.1rem 1rem;
    }

    /* Group head stays as a row at all widths now that the title is on its own line */

    /* Show "Plan length in months" label above the term buttons */
    .dh-estimator__plan-length-label {
        display: block;
    }

    /* Hide "months" text inside each plan button (label replaces it) */
    .dh-estimator__term--plan .dh-tier__num {
        display: none;
    }

    /* Tighten button padding for single-row layout */
    .dh-estimator__term--plan {
        padding: 0.7rem 0.1rem;
        font-size: 0.82rem;
    }

    /* 7 plan buttons — all on one row */
    .dh-estimator__group .dh-estimator__radio-row--plan {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.3rem;
    }

    /* Scope/tier row already 2-col at 900 px — keep as-is */

    /* ── Home: old/new comparison cards — remove side borders, rebalance padding ── */

    /* Hide the gradient bar pseudo-element */
    .dh-home-contrast__col--old::before,
    .dh-home-contrast__col--new::before {
        display: none;
    }

    /* Remove the reserved left-border space; let content breathe evenly */
    .dh-home-contrast__col {
        border-left: none;
        padding: 1rem 0.25rem 1.25rem 0.25rem;
    }

    /* ── CTA buttons: smaller size + side-by-side layout ── */

    /* Shared size reduction for every button family */
    .dh-home-btn,
    .dh-build-host__hero-actions .dh-build-host__cta,
    .dh-build-host-btn,
    .dh-web-hosting-hero__actions .dh-web-hosting-hero__cta,
    .dh-web-hosting__actions .dh-web-hosting__cta {
        font-size: 0.78rem;
        min-height: 2.4rem;
        padding: 0 0.9rem;
    }

    /* Ensure all action wrappers are flex so buttons sit side-by-side */
    .dh-home-actions,
    .dh-build-host__hero-actions,
    .dh-web-hosting-hero__actions,
    .dh-web-hosting__actions,
    .dh-build-host-lifecycle__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ── Lead / intro paragraph sizes ── */
    /*
     * html { font-size: 110% } makes 1 rem ≈ 17.6 px — noticeably large at 360 px.
     * Reduce all lead/intro copy to 0.9 rem so it sits closer to body/secondary text.
     */
    .dh-home-hero__lead,
    .dh-home-sub,
    .dh-home-cta p,
    .dh-section__lead,
    .dh-build-host__intro .dh-section__lead,
    .dh-web-hosting-hero__intro .dh-section__lead,
    .dh-project-brief__lead,
    .dh-build-host__tool-head p,
    .dh-home-advantage-intro .dh-home-sub,
    .dh-home-advantage-outro .dh-home-sub,
    .dh-home-testimonials__intro .dh-home-sub {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}