/*!
 * DuneByte brand layer.
 *
 * The Grayscale theme (css/styles.css) is left untouched so it can be diffed
 * against upstream. Every DuneByte-specific colour lives in the custom
 * properties below — re-theming once a logo and palette exist should be a
 * matter of editing this block, not hunting through the compiled theme CSS.
 *
 * NOTE: these values are still the Grayscale placeholders (CLAUDE.md §3).
 */

:root {
    --db-primary: #64a19d;        /* accent on DARK grounds only — 7.1:1 on #000 */
    --db-primary-dark: #467370;   /* pressed / hover-dark accent */
    --db-primary-light: #b2d0ce;  /* focus ring, subtle accents */
    --db-dark: #000000;           /* section backgrounds */
    --db-body: #212529;

    /*
        Contrast-safe variants. The Grayscale accent (#64a19d) only reaches
        2.95:1 against white, so it fails WCAG 2.1 AA (4.5:1 for text, 3:1
        for icons and UI) everywhere it meets a light ground — which was the
        primary button, the accent icons on the white contact cards and every
        link inside them. Same hue, darker: the palette still re-themes from
        this block alone (CLAUDE.md §3).

        Measured ratios, recompute these if the hue changes:
          #3c6260 on #fff .............. 6.8:1
          #fff on #467370 (button) ..... 5.3:1
          #fff on #365957 (hover) ...... 7.7:1
          #5c636a on #fff (muted) ...... 6.1:1
    */
    --db-primary-on-light: #3c6260;   /* accent text + icons on a light ground */
    --db-primary-btn: #467370;        /* button ground under white label text */
    --db-primary-btn-hover: #365957;
    --db-muted-on-light: #5c636a;     /* replaces Bootstrap's .text-black-50 */
}

/* --- Accent colour ------------------------------------------------------ */

/*
    Light-ground default. Dark sections opt back into the brighter accent
    below, where it has plenty of contrast.

    .text-primary needs !important because it is a Bootstrap utility that
    carries !important itself, resolving to --bs-primary (which the Grayscale
    theme sets to the pale accent). Without it the rule below loses and the
    accent icons on the white contact cards stay at 2.95:1.

    :not(.btn) on every dark-context override matters: .btn-primary is an
    <a> inside .masthead on the home page, so `.masthead a` would otherwise
    repaint the site's main call to action pale-on-teal — 3.2:1 — which is
    exactly the failure this block exists to fix.
*/
.text-primary {
    color: var(--db-primary-on-light) !important;
}
a:not(.btn) {
    color: var(--db-primary-on-light);
}
a:not(.btn):hover {
    color: var(--db-primary-btn-hover);
}
.text-white-50 a:not(.btn),
.footer a:not(.btn),
.section-dark a:not(.btn),
.masthead a:not(.btn),
.form-panel a:not(.btn) {
    color: var(--db-primary-light);
}
.text-white-50 a:not(.btn):hover,
.footer a:not(.btn):hover,
.section-dark a:not(.btn):hover,
.masthead a:not(.btn):hover,
.form-panel a:not(.btn):hover {
    color: #fff;
}

/*
    Bootstrap's .text-black-50 is rgba(0,0,0,.5) — #808080 over white, 3.95:1,
    which is below AA for body text. Same visual weight, one step darker.
*/
.text-black-50 {
    color: var(--db-muted-on-light) !important;
}

.btn-primary {
    --bs-btn-bg: var(--db-primary-btn);
    --bs-btn-border-color: var(--db-primary-btn);
    --bs-btn-hover-bg: var(--db-primary-btn-hover);
    --bs-btn-hover-border-color: var(--db-primary-btn-hover);
    --bs-btn-active-bg: var(--db-primary-btn-hover);
    --bs-btn-active-border-color: var(--db-primary-btn-hover);
    --bs-btn-disabled-bg: var(--db-primary-btn);
    --bs-btn-disabled-border-color: var(--db-primary-btn);
}
.btn-outline-light:hover {
    color: var(--db-dark);
}

.contact-section .card {
    border-bottom-color: var(--db-primary);
}
.contact-section .card hr {
    border-color: var(--db-primary);
}

@media (min-width: 992px) {
    #mainNav.navbar-shrink .nav-link:hover,
    #mainNav.navbar-shrink .nav-link.active {
        color: var(--db-primary);
    }
    #mainNav.navbar-shrink .nav-link.active {
        border-bottom-color: var(--db-primary);
    }
}

/* Primary nav CTA — keeps "Request a Demo" distinct from the other links. */
#mainNav .nav-link-cta {
    color: #fff;
}
@media (min-width: 992px) {
    #mainNav .nav-link-cta {
        color: #fff;
        font-weight: 700;
    }
    #mainNav .nav-link-cta:hover {
        color: #fff;
    }
    #mainNav.navbar-shrink .nav-link-cta,
    #mainNav.navbar-shrink .nav-link-cta:hover {
        color: var(--db-primary);
    }
}

/* --- Interior pages ----------------------------------------------------- */
/* The Grayscale masthead is a full-viewport hero built for a one-page site.
   Interior pages use a shorter version of the same treatment. */

.masthead--compact {
    min-height: 0;
    padding: 9rem 0 4rem;
}
/* The theme fades h1 out towards the baseline, which is unreadable once an
   interior-page title wraps onto a second line. Solid white instead. */
.masthead--compact h1 {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font-size: 2rem;
    line-height: 2.4rem;
    letter-spacing: 0.35rem;
}
@media (min-width: 992px) {
    .masthead--compact {
        height: auto;
        padding: 14rem 0 7rem;
    }
    .masthead--compact h1 {
        font-size: 3.5rem;
        line-height: 3.75rem;
        letter-spacing: 0.4rem;
    }
    .masthead--compact h2 {
        max-width: 40rem;
    }
}
.masthead--compact h2 {
    max-width: 40rem;
}
/* Intro copy carried in the hero itself, under the subtitle. */
.masthead--compact .masthead__lead {
    max-width: 44rem;
    font-size: 0.95rem;
    line-height: 1.7;
}
@media (min-width: 992px) {
    .masthead--compact .masthead__lead {
        font-size: 1rem;
    }
}

.section-dark {
    padding: 6rem 0;
    background-color: var(--db-dark);
}
.section-light {
    padding: 6rem 0;
}

/* Service / step cards on the dark sections. */
.feature-card {
    height: 100%;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}
.feature-card .feature-icon {
    font-size: 1.75rem;
    color: var(--db-primary);
    margin-bottom: 1rem;
}
.feature-card h3 {
    font-family: "Varela Round", sans-serif;
    font-size: 1.15rem;
    color: #fff;
}
.feature-card p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

.step-number {
    font-family: "Varela Round", sans-serif;
    font-size: 2.5rem;
    color: var(--db-primary);
    line-height: 1;
}

/* --- Forms -------------------------------------------------------------- */

.form-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 2.5rem;
}
.form-panel label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 0.4rem;
}
.form-panel .form-control,
.form-panel .form-select {
    background-color: rgba(255, 255, 255, 0.95);
    border: 0;
    padding: 0.9rem 1.1rem;
}
.form-panel .form-control:focus,
.form-panel .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(100, 161, 157, 0.4);
}
.form-panel .form-text {
    color: rgba(255, 255, 255, 0.4);
}
.form-panel .invalid-feedback {
    display: block;
}

/* Honeypot: hidden from humans, still in the DOM for bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Misc --------------------------------------------------------------- */

.founder-card {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    height: 100%;
}
.founder-card .founder-role {
    color: var(--db-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}
.founder-initials {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 100%;
    background: var(--db-primary);
    color: #fff;
    font-family: "Varela Round", sans-serif;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* --- Accessibility ------------------------------------------------------ */

/*
    Skip link. The navbar is fixed-top with four links ahead of the content,
    so a keyboard or screen-reader user otherwise walks the whole nav on
    every page. Off-screen until focused, then pinned top-left above the
    fixed navbar (which sits at z-index 1030).
*/
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: #fff;
    color: var(--db-body) !important;
    font-weight: 700;
    border-radius: 0 0 0.35rem 0.35rem;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/*
    Visible focus for keyboard users. Bootstrap's default focus ring is a
    tinted box-shadow that all but disappears against #000, which is most of
    this site. :focus-visible so a mouse click does not leave a ring behind.
*/
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--db-primary-light);
    outline-offset: 2px;
    box-shadow: none;
}
/* On light grounds the pale ring has too little contrast — go dark instead. */
.bg-light a:focus-visible,
.contact-section .card a:focus-visible,
.skip-link:focus-visible {
    outline-color: var(--db-primary-on-light);
}
.form-panel .form-control:focus-visible,
.form-panel .form-select:focus-visible {
    outline: 3px solid var(--db-primary-light);
    outline-offset: 2px;
}

/* An error summary that takes focus needs no ring drawn around the whole box. */
.form-panel .alert:focus {
    outline: none;
}

/* Respect a reduced-motion preference — the theme animates the navbar and
   scroll behaviour. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Legal pages -------------------------------------------------------- */

/*
    Privacy / cookies / terms. Long-form prose on the dark ground, so the
    measure is capped and the muted body copy is lifted to rgba .78 — the
    theme's .text-white-50 (5.3:1) is fine for a paragraph of marketing copy
    but tiring for a page somebody has to actually read.
*/
.legal-body {
    max-width: 44rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.75;
}
.legal-body h2 {
    font-family: "Varela Round", sans-serif;
    color: #fff;
    font-size: 1.35rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body h3 {
    color: #fff;
    font-size: 1.05rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.legal-body ul,
.legal-body ol {
    padding-left: 1.25rem;
}
.legal-body li {
    margin-bottom: 0.5rem;
}
.legal-body dt {
    color: #fff;
    font-weight: 400;
    font-family: "Varela Round", sans-serif;
}
.legal-body dd {
    margin-bottom: 1.25rem;
}
/*
    The cookie table has three columns of prose, which at 375px wide crams
    each one into two or three characters per line. Given its own horizontal
    scroll with a sane minimum width instead — the page body must never
    scroll sideways, only this box.
*/
.legal-table-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.legal-body table {
    width: 100%;
    min-width: 34rem;
    margin-bottom: 0;
    border-collapse: collapse;
}

/*
    Bootstrap's default code colour (#d63384) is set for light backgrounds and
    is hard to read on the black legal pages. The pale accent is 12.8:1 there.
*/
.legal-body code {
    color: var(--db-primary-light);
    word-break: break-word;
}
.legal-body th,
.legal-body td {
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
}
.legal-body th {
    color: #fff;
    font-weight: 400;
    font-family: "Varela Round", sans-serif;
}
.legal-updated {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
}

/* --- Footer ------------------------------------------------------------- */

.footer-legal {
    margin-top: 1rem;
    line-height: 1.9;
}
.footer-legal a {
    margin: 0 0.4rem;
    white-space: nowrap;
}
.footer-identity {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* --- System overview video ---------------------------------------------- */

/* Self-hosted (CLAUDE.md §4 — no third-party subresources), so there is no
   provider chrome to work around; these are our own styles end to end. */

.system-video {
    margin: 0;
}
.system-video__player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #12141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.6rem;
}
.system-video__caption {
    margin-top: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* The home-page still: a link to /demo, not a second player. */

.video-teaser {
    position: relative;
    display: block;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 0.6rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.video-teaser:hover,
.video-teaser:focus-visible {
    border-color: var(--db-primary, #f57a08);
    transform: translateY(-2px);
}
.video-teaser__still {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.video-teaser__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(18, 20, 28, 0.82);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.6rem 1.15rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.video-teaser__badge .fas {
    margin-right: 0.4rem;
    color: var(--db-primary, #f57a08);
}

@media (prefers-reduced-motion: reduce) {
    .video-teaser {
        transition: none;
    }
    .video-teaser:hover,
    .video-teaser:focus-visible {
        transform: none;
    }
}

/* --- Hero actions ------------------------------------------------------- */
/*
    Two buttons in the masthead instead of one. They wrap rather than shrink on
    a narrow screen, because a 44px tap target matters more than a single line.
*/
.masthead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.masthead .btn-outline-light {
    /*
        The theme's .btn sets `border: 0`, which zeroes border-STYLE as well —
        so border-width alone draws nothing. The style has to be restored
        explicitly or the secondary button reads as bare text on the photo.
    */
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
    font-weight: 600;
}
.masthead .btn-outline-light:hover,
.masthead .btn-outline-light:focus-visible {
    background-color: #fff;
    color: #000;
}

/* The project's sector line on the portfolio page. On that dark ground the
   light accent clears 4.5:1 on #000. */
.portfolio-project__sector {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--db-primary-light, #b2d0ce);
}

/* --- Portfolio tiles ---------------------------------------------------- */
/*
    The overlay is revealed by :hover and by :focus-within. Focus matters as
    much as hover here: without it the two actions inside are unreachable by
    keyboard. On touch there is no hover at all, so the tile must still make
    sense with the overlay hidden — which is why the screenshot carries real
    alt text and the label is repeated in each action's aria-label.
*/
.portfolio-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #111;
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.45);
}
.portfolio-tile__shot {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}
.portfolio-tile:hover .portfolio-tile__shot,
.portfolio-tile:focus-within .portfolio-tile__shot {
    transform: scale(1.04);
}
.portfolio-tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.78);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.portfolio-tile:hover .portfolio-tile__overlay,
.portfolio-tile:focus-within .portfolio-tile__overlay {
    opacity: 1;
}
.portfolio-tile__label {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
}
.portfolio-tile__actions {
    display: flex;
    gap: 0.75rem;
}
.portfolio-tile__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: the minimum comfortable target, and these sit close together. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.portfolio-tile__action:hover,
.portfolio-tile__action:focus-visible {
    background-color: #fff;
    color: #000;
}
.portfolio-tile__action:focus-visible {
    outline: 3px solid var(--db-primary-light, #b2d0ce);
    outline-offset: 3px;
}

/*
    Touch devices have no hover at all, so an overlay that only appears on
    hover would hide the label and put both actions permanently out of reach.
    There, the overlay stops being an overlay: it sits under the screenshot as
    a visible caption bar, always readable and always tappable.
*/
@media (hover: none) {
    .portfolio-tile__overlay {
        position: static;
        opacity: 1;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.75rem;
        text-align: left;
        padding: 1rem;
        background-color: rgba(255, 255, 255, 0.06);
    }
    .portfolio-tile__label {
        font-size: 0.95rem;
    }
    .portfolio-tile:hover .portfolio-tile__shot,
    .portfolio-tile:focus-within .portfolio-tile__shot {
        transform: none;
    }
}

/* The lightbox body is the screenshot and nothing else. */
.portfolio-lightbox .modal-body {
    padding: 0;
}
.portfolio-lightbox .modal-body img {
    display: block;
    width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-tile__shot,
    .portfolio-tile__overlay {
        transition: none;
    }
    .portfolio-tile:hover .portfolio-tile__shot,
    .portfolio-tile:focus-within .portfolio-tile__shot {
        transform: none;
    }
}