/*
 * Final site refinement layer.
 * Cross-cutting accessibility, motion, and service-card rules live here so
 * later page-specific styles cannot accidentally undo them.
 */
:root {
    --site-focus-color: #EE4F34;
}

html,
html:focus-within {
    scroll-behavior: smooth !important;
    scroll-padding-top: 6rem;
}

body {
    -webkit-overflow-scrolling: touch;
}

.navbar-brand-logo {
    height: 27px !important;
}

@media (min-width: 640px) {
    .navbar-brand-logo {
        height: 35px !important;
    }
}

/* Cursor: the ring echoes the DML hexagon mark instead of a circle. The old
   border/background rules in styles.css target the host div, which would draw a
   square around the shape, so they are neutralised here and the polygon paints
   the outline and the hover tint itself. */
#custom-cursor-ring,
#custom-cursor-ring.hovered {
    border: 0 !important;
    background-color: transparent !important;
}

#custom-cursor-ring svg {
    display: block;
    overflow: visible;
}

#custom-cursor-ring polygon {
    fill: transparent;
    stroke: #F67531;
    stroke-width: 1.5;
    stroke-linejoin: miter;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

#custom-cursor-ring.hovered polygon {
    fill: rgba(246, 117, 49, 0.08);
}

body.reference-theme #custom-cursor-ring polygon {
    stroke: var(--reference-accent);
}

body.reference-theme #custom-cursor-ring.hovered polygon {
    fill: rgba(238, 79, 52, 0.08);
}

/* Services: full-bleed capability ledger. Six rows, opened in place. */
#services {
    --cap-gutter: clamp(1.25rem, 7vw, 6.25rem);
    --cap-ink: #fafaf5;
    --cap-muted: rgba(250, 250, 245, 0.58);
    --cap-faint: rgba(250, 250, 245, 0.5);
    --cap-faint-line: rgba(250, 250, 245, 0.28);
    --cap-accent-text: #F67531;
    --cap-line: rgba(250, 250, 245, 0.14);
    --cap-accent: #F67531;
    --cap-wash: rgba(250, 250, 245, 0.022);
    --cap-viz-ink: #F67531;
}

body.reference-theme.day-mode #services {
    --cap-ink: #1c1c1a;
    --cap-muted: #63615d;
    --cap-faint: #6B6862;
    --cap-faint-line: #a8a49c;
    --cap-accent-text: #B4401A;
    --cap-line: #dedbd4;
    --cap-wash: rgba(28, 28, 26, 0.018);
    --cap-accent: #EE4F34;
    --cap-viz-ink: #EE4F34;
}

/* --- Header: centred stack --- */
#services .cap-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
}

#services .cap-head__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

#services .cap-head__eyebrow img {
    width: 18px;
    height: auto;
}

#services .cap-head__eyebrow span {
    font-family: "Space Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cap-accent);
}

#services .cap-head__title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.02;
    font-size: clamp(1.875rem, 5.4vw, 3.75rem);
    color: var(--cap-ink);
    margin: 0 0 1.5rem;
}

#services .cap-head__intro {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cap-muted);
    max-width: 36rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #services .cap-head {
        margin-bottom: 5rem;
    }

    #services .cap-head__intro {
        font-size: 1.125rem;
    }
}

/* --- Ledger shell: inset gutter, hairline separated --- */
#services .cap-shell,
#services .cap-ledger {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: var(--cap-gutter);
}

/* Hairlines live on the rows so every rule stops at the same gutter. */
#services .cap-row {
    /* The row box reaches this far left of its content, so the hairlines, the
       wash and the accent spine all share one left edge. */
    --cap-spine-pull: calc(var(--cap-gutter) * 0.3);
    position: relative;
    margin-left: calc(var(--cap-spine-pull) * -1);
    padding-left: var(--cap-spine-pull);
    border-bottom: 1px solid var(--cap-line);
}

#services .cap-row:first-child {
    border-top: 1px solid var(--cap-line);
}

#services .cap-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cap-wash);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#services .cap-row.is-open::before,
#services .cap-row:hover::before {
    opacity: 1;
}

/* Accent spine marks the open row. */
#services .cap-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cap-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#services .cap-row.is-open::after {
    transform: scaleY(1);
}

#services .cap-row__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* --- The clickable bar --- */
#services .cap-row__bar {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--cap-ink);
    -webkit-tap-highlight-color: transparent;
}

#services .cap-row__bar:focus-visible {
    outline: 2px solid var(--site-focus-color);
    outline-offset: -4px;
}

#services .cap-row__num {
    font-family: "Space Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--cap-faint);
    transition: color 0.35s ease;
    font-variant-numeric: tabular-nums;
    /* Nudged off the gutter. A transform keeps the grid column untouched, so
       the service name beside it does not shift. */
    transform: translateX(5px);
}

#services .cap-row.is-open .cap-row__num {
    color: var(--cap-accent);
}

/* Name + the ticker that rides behind it on hover. */
#services .cap-row__name {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
}

#services .cap-row__label {
    position: relative;
    z-index: 1;
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1.05;
    font-size: clamp(1.5rem, 5.2vw, 3.125rem);
    color: var(--cap-ink);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

#services .cap-row__ticker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

#services .cap-row__ticker i {
    font-family: "Space Mono", monospace;
    font-style: normal;
    font-size: clamp(1.25rem, 4.4vw, 2.75rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--cap-accent);
    flex: none;
}

/* Hover on a closed row: name slides out, keywords stream through. */
@media (hover: hover) and (pointer: fine) {
    #services .cap-row:not(.is-open):hover .cap-row__label {
        transform: translateX(-0.75rem);
        opacity: 0;
    }

    #services .cap-row:not(.is-open):hover .cap-row__ticker {
        opacity: 1;
        animation: cap-ticker 14s linear infinite;
    }
}

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

#services .cap-row__meta {
    display: none;
    font-family: "Space Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cap-faint);
    text-align: right;
}

/* Plus that becomes a minus. */
#services .cap-row__sign {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border: 1px solid var(--cap-line);
    transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#services .cap-row__sign::before,
#services .cap-row__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 1px;
    background: var(--cap-ink);
    transform: translate(-50%, -50%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

#services .cap-row__sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

#services .cap-row__bar:hover .cap-row__sign {
    border-color: var(--cap-accent);
    background: color-mix(in srgb, var(--cap-accent) 12%, transparent);
}

#services .cap-row.is-open .cap-row__sign {
    background: var(--cap-accent);
    border-color: var(--cap-accent);
    transform: rotate(180deg);
}

#services .cap-row.is-open .cap-row__sign::before,
#services .cap-row.is-open .cap-row__sign::after {
    background: #fafaf5;
}

#services .cap-row.is-open .cap-row__sign::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Expanding body: grid-rows keeps the reveal height-agnostic --- */
#services .cap-row__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#services .cap-row.is-open .cap-row__body {
    grid-template-rows: 1fr;
}

#services .cap-row__inner {
    overflow: hidden;
    min-height: 0;
}

#services .cap-row__text {
    padding: 0 0 2.25rem;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.4s ease 0.1s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

#services .cap-row.is-open .cap-row__text {
    opacity: 1;
    transform: none;
}

#services .cap-row__text p {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cap-muted);
    margin: 0 0 1.5rem;
    max-width: 40rem;
}

#services .cap-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

#services .cap-row__tags li {
    font-family: "Space Mono", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cap-muted);
    border: 1px solid var(--cap-line);
    padding: 0.5rem 0.875rem;
}

/* --- Per-service diagram --- */
#services .cap-row__viz {
    display: none;
    color: var(--cap-ink);
}

#services .cap-row__viz svg {
    width: 100%;
    height: auto;
    max-width: 20rem;
    overflow: visible;
}

#services .cap-viz-frame {
    stroke: var(--cap-line);
    stroke-dasharray: 4 6;
}

#services .cap-viz-web {
    stroke: var(--cap-faint-line);
    stroke-dasharray: 3 5;
}

#services .cap-viz-line {
    stroke: var(--cap-viz-ink);
    stroke-linecap: square;
    stroke-linejoin: miter;
    opacity: 0.75;
}

#services .cap-viz-node {
    fill: var(--cap-viz-ink);
    stroke: none;
}

#services .cap-viz-hot {
    stroke: var(--cap-accent);
    opacity: 1;
}

#services circle.cap-viz-hot {
    fill: var(--cap-accent);
    stroke: none;
}

/* Draw the diagram in as the row opens. */
#services .cap-row__viz path,
#services .cap-row__viz rect {
    stroke-dashoffset: 0;
}

#services .cap-row.is-open .cap-viz-line {
    animation: cap-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}

@keyframes cap-draw {
    from { stroke-dasharray: 0 600; }
    to { stroke-dasharray: 600 0; }
}

#services .cap-row.is-open .cap-viz-node {
    animation: cap-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes cap-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* --- Desktop layout --- */
@media (min-width: 768px) {
    /* Pull the row content 10px off the right gutter. The hairline and the
       accent spine sit on the border box, so they still run the full width. */
    #services .cap-row {
        padding-right: 10px;
    }

    /* One source for the number column, so the bar grid and the body copy
       below it start the service name at the same x. */
    #services .cap-row {
        --cap-num-col: 3.5rem;
        --cap-col-gap: 2rem;
        --cap-name-offset: calc(var(--cap-num-col) + var(--cap-col-gap));
        /* The diagrams draw their dashed frame at x=20 in a 260-unit viewBox,
           so the visible box sits 20/260 inside the <svg> box. Pull the bar's
           right cluster in by the same amount so the meta label and the +/-
           align with the frame, not with the invisible SVG edge. The diagram
           scales with its column, so this tracks it: 17px at 800, 22px at
           1000, holding at 23px once the column stops growing. */
        --cap-viz-inset: clamp(17px, calc(2.5vw - 3px), 23px);
    }

    #services .cap-row__bar {
        grid-template-columns: var(--cap-num-col) minmax(0, 1fr) minmax(0, auto) 2.75rem;
        gap: var(--cap-col-gap);
        padding: 2.25rem var(--cap-viz-inset) 2.25rem 0;
    }

    #services .cap-row__meta {
        display: block;
    }

    #services .cap-row__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
        gap: 3rem;
        align-items: center;
        padding-left: var(--cap-name-offset);
    }

    #services .cap-row__text {
        padding: 0 0 3rem;
        grid-column: 1;
    }

    #services .cap-row__viz {
        display: block;
        padding: 0 0 3rem;
        justify-self: end;
    }
}

@media (min-width: 1200px) {
    #services .cap-row {
        --cap-num-col: 5rem;
    }

    #services .cap-row__bar {
        grid-template-columns: var(--cap-num-col) minmax(0, 1fr) 14rem 2.75rem;
        padding: 2.75rem var(--cap-viz-inset) 2.75rem 0;
    }
}

/* --- Motion opt-out --- */
@media (prefers-reduced-motion: reduce) {
    #services .cap-row__body {
        transition: none;
    }

    #services .cap-row__text,
    #services .cap-row__label,
    #services .cap-row__sign,
    #services .cap-row__sign::before,
    #services .cap-row__sign::after,
    #services .cap-row::after,
    #services .cap-row::before {
        transition: none;
    }

    #services .cap-row:not(.is-open):hover .cap-row__ticker {
        animation: none;
    }

    #services .cap-row.is-open .cap-viz-line,
    #services .cap-row.is-open .cap-viz-node {
        animation: none;
    }
}

/* The reference theme paints every span/li/button and every heading descendant
   with !important, at (1,2,1) via :is(#hero, #services, ...). Opt the ledger
   back out, chaining ancestors to clear that. */
#services .cap-shell .cap-head .cap-head__eyebrow span,
#services .cap-ledger .cap-row.is-open .cap-row__num {
    color: var(--cap-accent-text) !important;
}

#services .cap-ledger .cap-row .cap-row__num,
#services .cap-ledger .cap-row .cap-row__meta {
    color: var(--cap-faint) !important;
}

#services .cap-ledger .cap-row .cap-row__label {
    color: var(--cap-ink) !important;
}

#services .cap-shell .cap-head .cap-head__intro,
#services .cap-ledger .cap-row .cap-row__text p,
#services .cap-ledger .cap-row .cap-row__tags li {
    color: var(--cap-muted) !important;
}

/* Outline-only type: the stroke carries the colour, the fill stays empty. */
#services .cap-ledger .cap-row .cap-row__ticker i {
    color: transparent !important;
}

/* Showcase tabs: the selected tab takes the brand outline instead of the grey
   hairline. Border only - the surface and the text stay as they are, so it
   reads as a selected tab rather than a filled button. Dark theme only; the
   light theme already marks the selection with a solid accent fill. */
body:not(.reference-theme) #showcase .service-tab-btn.active {
    border-color: #F67531;
}

/* Approach cards, light theme.
   The reference layer paints headings, step labels and card borders with the
   accent, so every card reads orange and the active step stops standing out.
   The site's own body.day-mode rules already describe the right hierarchy -
   ink heading, accent kicker, muted inactive label, neutral edge - they are
   just outranked by :is(#approach, ...) selectors carrying an ID. Re-assert
   them here, matching what the dark theme does. */
body.reference-theme.day-mode #approach .approach-step-card h3 {
    color: var(--reference-ink) !important;
}

body.reference-theme.day-mode #approach .approach-step-card .step-accent-text {
    color: var(--reference-accent) !important;
}

body.reference-theme.day-mode #approach .timeline-step-label {
    color: rgba(31, 31, 31, 0.65) !important;
}

body:not(.reference-theme) #approach .timeline-step-label:not(.active) {
    color: rgba(250, 250, 245, 0.5) !important;
}

body.reference-theme.day-mode #approach .timeline-step-label.active {
    color: var(--reference-accent) !important;
}

/* Card edges mirror the dark theme: inactive cards sit on a quiet hairline,
   the active one is ringed in the accent at the same 0.75 alpha dark uses and
   lit by the same 30px accent glow, over a warm shadow instead of dark's black.
   These need #approach-cards-stack plus [data-step] to outrank the two-ID
   selector that otherwise tints every card. */
body.reference-theme.day-mode #approach #approach-cards-stack .approach-step-card[data-step] {
    border: 1px solid #ECE7DF !important;
    box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03) !important;
}

body.reference-theme.day-mode #approach #approach-cards-stack .approach-step-card.active[data-step] {
    border: 1px solid rgba(238, 79, 52, 0.75) !important;
    box-shadow:
        0 20px 40px rgba(180, 64, 26, 0.10),
        0 0 30px rgba(238, 79, 52, 0.16) !important;
}

/* One quiet surface connects the portfolio tabs and their active panel. */
#showcase .portfolio-connected-shell {
    position: relative;
    width: 100%;
    max-width: 74rem;
    margin: 0 auto 6rem;
    padding: 1.75rem;
    background: #17191e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

#showcase .portfolio-tabs-wrap {
    margin-bottom: 1.75rem !important;
}

#showcase .portfolio-panels-wrap {
    margin-bottom: 0 !important;
}

body.reference-theme.day-mode #showcase .portfolio-connected-shell {
    background: #e9e7e2 !important;
    border-color: #ddd9d1 !important;
    box-shadow: 0 22px 54px rgba(31, 31, 31, 0.08) !important;
}

body.reference-theme.day-mode #showcase .portfolio-tabs-wrap > [role="tablist"] {
    background: #ffffff !important;
}

#showcase .service-tab-panel,
#showcase .service-tab-panel:hover,
#showcase .service-tab-panel.active,
body.reference-theme.day-mode #showcase .service-tab-panel,
body.reference-theme.day-mode #showcase .service-tab-panel:hover,
body.reference-theme.day-mode #showcase .service-tab-panel.active {
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

@media (max-width: 767.98px) {
    #showcase .portfolio-connected-shell {
        padding: 0.875rem;
        margin-bottom: 3rem;
    }

    #showcase .portfolio-tabs-wrap {
        margin-bottom: 0.875rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

section[id] {
    scroll-margin-top: 6rem;
}

.skip-link {
    position: fixed;
    z-index: 100000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    color: #fff;
    background: #1f1f1f;
    border: 2px solid var(--site-focus-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.skip-link:focus {
    opacity: 1;
    pointer-events: auto;
}

:where(a, button, input, textarea, select, [role="tab"], [tabindex]):focus-visible {
    outline: 3px solid var(--site-focus-color) !important;
    outline-offset: 3px !important;
}

.dml-btn-3d:focus-visible {
    filter: brightness(1.08);
}

#theme-toggle:focus-visible + .theme-toggle-btn {
    outline: 3px solid var(--site-focus-color) !important;
    outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
    html,
    html:focus-within {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.split-word-inner,
.expertise-card,
.service-tab-panel {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
    }

    #custom-cursor-dot,
    #custom-cursor-ring,
    #bg-spotlight,
    #floating-bg-logo {
        display: none !important;
    }
}
/* Lightweight placeholders for native lazy-loaded images and the desktop model. */
.lazy-media {
    background-color: #15171d;
    background-image: linear-gradient(
        105deg,
        #15171d 22%,
        #252a34 42%,
        #15171d 62%
    );
    background-repeat: no-repeat;
    background-size: 220% 100%;
    animation: dml-skeleton-shimmer 1.25s ease-in-out infinite;
}

.day-mode .lazy-media {
    background-color: #ece9e2;
    background-image: linear-gradient(
        105deg,
        #ece9e2 22%,
        #fbf8f2 42%,
        #ece9e2 62%
    );
}

.lazy-media.is-loaded,
.lazy-media.is-error {
    background-color: transparent;
    background-image: none;
    animation: none;
}

/* Off-screen decorative animations remain paused, reducing compositor work. */
@media (prefers-reduced-motion: no-preference) {
    .typing-dot,
.pulse-circle,
.lazy-media:not(.is-loaded):not(.is-error) {
        animation-play-state: paused !important;
    }

    .typing-dot.animation-in-view,
.pulse-circle.animation-in-view,
.lazy-media.animation-in-view:not(.is-loaded):not(.is-error) {
        animation-play-state: running !important;
    }
}

@keyframes dml-skeleton-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lazy-media {
        animation: none;
        background-position: 50% 0;
    }
}

/* Keep one solid dark navigation layer at rest and while scrolling. */
body:not(.day-mode) nav:not(.menu-open),
body:not(.day-mode) nav.scrolled:not(.menu-open) {
    background: #08080C !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
                0 8px 32px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}