/* ======================================================================
   SparkClean LLC - app design system (style.css)
   The only layer with selectors. Reads brand tokens from motif.css and
   structural tokens from layout.css. CSP-safe: external file, no inline
   styles. Aesthetic: editorial / architectural - hairline rules, big type,
   full-bleed navy bands, one decisive red accent.
   ====================================================================== */

:root {
    /* Palette aliases derived from the canonical motif roles. */
    --ink: var(--motif-seed-text);
    --red: var(--motif-color-accent-primary);
    --blue: var(--motif-color-accent-secondary);
    --steel: var(--motif-color-accent-tertiary);
    --canvas: var(--motif-seed-canvas);
    --paper: #ffffff;
    --mist: color-mix(in oklch, var(--steel) 12%, white);

    /* Signature navy band, two stops for depth. */
    --navy: oklch(0.21 0.042 260);
    --navy-deep: oklch(0.16 0.036 262);

    --muted: color-mix(in oklch, var(--ink) 62%, var(--canvas));
    --faint: color-mix(in oklch, var(--ink) 42%, var(--canvas));

    --line: color-mix(in oklch, var(--ink) 12%, transparent);
    --line-2: color-mix(in oklch, var(--ink) 22%, transparent);
    --on-navy: color-mix(in oklch, white 90%, var(--blue));
    --on-navy-muted: color-mix(in oklch, white 66%, var(--blue));
    --line-navy: color-mix(in oklch, white 16%, transparent);

    --radius: var(--motif-radius-card);
    --radius-md: var(--motif-radius-callout);
    --radius-lg: var(--motif-radius-media);

    /* Restrained shadows: depth comes from layout and hairlines, not glow. */
    --shadow-sm: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent);
    --shadow: 0 18px 44px color-mix(in oklch, var(--ink) 12%, transparent);
    --shadow-lg: 0 32px 70px color-mix(in oklch, var(--ink) 18%, transparent);

    --ease: var(--motif-motion-ease-standard);
    --fast: var(--motif-motion-duration-fast);
    --med: var(--motif-motion-duration-medium);

    --spark-section-gap-tight: clamp(2.75rem, 5vw, 4rem);
    --spark-cards-cols: var(--layout-card-cols);
    --spark-tiles-cols: var(--layout-services-cols);
    --spark-gallery-cols: var(--layout-card-cols);
    --spark-stats-cols: 3;
    --spark-feature-cols: var(--layout-founder-template);
}

@media (max-width: 1024px) {
    :root {
        --spark-cards-cols: 2;
        --spark-tiles-cols: 2;
        --spark-gallery-cols: 2;
        --spark-stats-cols: 3;
    }
}

@media (max-width: 760px) {
    :root {
        --spark-cards-cols: 1;
        --spark-tiles-cols: 1;
        --spark-gallery-cols: 1;
        --spark-stats-cols: 1;
        --spark-feature-cols: 1fr;
    }
}

@media (max-width: 440px) {
    :root {
        --spark-stats-cols: 1;
    }
}

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

html {
    scroll-behavior: smooth;
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--motif-font-body);
    font-size: var(--motif-type-body);
    font-weight: 400;
    line-height: var(--motif-line-body);
    color: var(--ink);
    background: var(--canvas);
    overflow-x: clip;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--fast) var(--ease);
}

a:hover {
    color: var(--red);
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--blue) 60%, transparent);
    outline-offset: 3px;
    border-radius: 3px;
}

.spark-shell {
    min-height: 100dvh;
    background: var(--canvas);
}

/* ---- Layout primitives ---------------------------------------------- */

.spark-wrap {
    width: var(--layout-content-width);
    margin-inline: auto;
    padding-inline: var(--layout-content-inset);
}

.spark-wrap--tight {
    width: var(--layout-content-width-narrow);
}

.spark-band {
    padding-block: var(--layout-section-gap);
    background: var(--canvas);
}

.spark-band--paper {
    background: var(--paper);
}

.spark-band--mist {
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--steel) 16%, transparent), transparent 58%),
        var(--mist);
    border-block: 1px solid var(--line);
}

.spark-band--ink {
    position: relative;
    overflow: hidden;
    color: var(--on-navy);
    background:
        radial-gradient(70% 120% at 6% -10%, color-mix(in oklch, var(--blue) 40%, transparent), transparent 55%),
        radial-gradient(60% 120% at 100% 120%, color-mix(in oklch, var(--red) 24%, transparent), transparent 52%),
        var(--navy);
}

.spark-band--tight {
    padding-block: var(--spark-section-gap-tight);
}

/* The NavMenu top bar is position:fixed, so the first band on subpages must
   clear it (the home hero is a .spark-hero and already pads for the nav). */
main > .spark-band:first-child {
    padding-top: calc(var(--layout-nav-height) + clamp(2rem, 4vw, 3.25rem));
}

/* ---- Headings & type ------------------------------------------------ */

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--motif-font-special);
    font-weight: 800;
    line-height: var(--motif-line-tight);
    letter-spacing: var(--motif-tracking-display);
    color: inherit;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 5vw, var(--motif-type-h1));
}

h2 {
    font-size: clamp(1.75rem, 3.6vw, var(--motif-type-h2));
}

h3 {
    font-size: var(--motif-type-h3);
    line-height: 1.18;
}

h4 {
    font-size: var(--motif-type-h4);
    line-height: 1.25;
}

/* Signature kicker: a short red rule + tracked uppercase label. Icon-free,
   so section labels never depend on script hydration. */
.spark-kicker {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
    font-family: var(--motif-font-label);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    color: var(--red);
}

.spark-kicker::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    flex: 0 0 auto;
    background: currentColor;
}

.spark-kicker--light {
    color: color-mix(in oklch, var(--red) 64%, white);
}

.spark-lead {
    margin-top: 1.1rem;
    max-width: 56ch;
    color: var(--muted);
    font-size: var(--motif-type-lead);
    line-height: 1.55;
}

.spark-band--ink .spark-lead {
    color: var(--on-navy-muted);
}

/* Section header block reused across pages. */
.spark-head {
    max-width: 60ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.spark-head--center {
    margin-inline: auto;
    text-align: center;
}

.spark-head--center .spark-kicker {
    justify-content: center;
}

.spark-head__title {
    font-size: clamp(1.9rem, 3.4vw, var(--motif-type-h2));
}

/* ---- Buttons -------------------------------------------------------- */

.spark-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.spark-btn {
    --btn-bg: var(--red);
    --btn-fg: #fff;
    --btn-bd: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--layout-control-min-height);
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--motif-radius-control);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--motif-font-button);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease),
        color var(--fast) var(--ease),
        transform var(--fast) var(--ease);
}

/* Trailing arrow as a CSS affordance keeps markup clean and CSP-safe. */
.spark-btn::after {
    content: "\2192";
    font-weight: 600;
    transition: transform var(--fast) var(--ease);
}

.spark-btn:hover {
    transform: translateY(-2px);
}

.spark-btn:hover::after {
    transform: translateX(3px);
}

.spark-btn--solid:hover {
    --btn-bg: color-mix(in oklch, var(--red) 86%, black);
    --btn-bd: color-mix(in oklch, var(--red) 86%, black);
    color: #fff;
}

.spark-btn--line {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line-2);
}

.spark-btn--line:hover {
    --btn-fg: var(--red);
    --btn-bd: var(--red);
}

.spark-btn--ghost {
    --btn-bg: color-mix(in oklch, white 14%, transparent);
    --btn-fg: #fff;
    --btn-bd: color-mix(in oklch, white 34%, transparent);
    backdrop-filter: blur(6px);
}

.spark-btn--ghost:hover {
    --btn-bg: #fff;
    --btn-fg: var(--ink);
    --btn-bd: #fff;
}

/* ---- Home hero (full-bleed image band) ------------------------------ */

.spark-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: var(--layout-hero-home-height);
    padding: var(--layout-hero-home-padding);
    overflow: hidden;
    color: #fff;
    background: var(--navy-deep);
    isolation: isolate;
}

.spark-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.spark-hero__media :is(figure, picture, img, .spark-media__image) {
    width: 100%;
    height: 100%;
    margin: 0;
}

.spark-hero__media img,
.spark-hero__media .spark-media__image {
    object-fit: cover;
    filter: saturate(1.02) contrast(1.03);
}

/* Left-weighted scrim keeps the headline legible over any focal point. */
.spark-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            95deg,
            color-mix(in oklch, var(--navy-deep) 92%, transparent),
            color-mix(in oklch, var(--navy-deep) 64%, transparent) 48%,
            color-mix(in oklch, var(--navy-deep) 22%, transparent)),
        linear-gradient(0deg, color-mix(in oklch, var(--navy-deep) 86%, transparent), transparent 46%);
}

.spark-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 50rem;
}

.spark-hero__anniversary {
    position: absolute;
    top: 7.35rem;
    /* badge stays 13rem from the right edge; band runs far off both ends so no end-cap seam shows */
    right: calc(13rem - 300vw);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600vw;
    min-height: 11.5rem;
    padding: 1.15rem 7rem;
    overflow: hidden;
    color: #fff;
    background:
        /* crisp glint as a gentle arc (large radius = flatter curve); offset to the left-top, clear of the text */
        radial-gradient(230% 555% at -55% -178%,
            transparent 45%,
            color-mix(in oklch, white 82%, transparent) 49.5%,
            color-mix(in oklch, white 28%, transparent) 51%,
            transparent 56%),
        /* broad satin sheen sweep for overall luster */
        linear-gradient(100deg,
            transparent 14%,
            color-mix(in oklch, white 42%, transparent) 40%,
            transparent 62%),
        /* flat ribbon lit from above: light top edge -> deeper gold bottom edge */
        linear-gradient(178deg,
            #fff0b0 0%,
            #f3d56e 13%,
            #e2bc46 40%,
            #cda32f 64%,
            #b78c20 85%,
            #9c7716 100%);
    /* pin the glint/sheen to a fixed ~62rem box centered on the badge so widening the band never drifts the shine */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62rem 100%, 62rem 100%, 100% 100%;
    border-block: 1px solid color-mix(in oklch, white 70%, transparent);
    box-shadow:
        0 20px 48px color-mix(in oklch, black 42%, transparent),
        inset 0 1px 0 color-mix(in oklch, white 58%, transparent),
        inset 0 -1px 0 color-mix(in oklch, black 22%, transparent);
    transform: rotate(28deg);
    transform-origin: center;
    pointer-events: none;
}

.spark-hero__anniversary-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--motif-font-label);
    line-height: 0.82;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        0 1px 2px color-mix(in oklch, black 78%, transparent),
        0 2px 10px color-mix(in oklch, black 66%, transparent);
}

.spark-hero__anniversary-copy strong {
    font-family: var(--motif-font-special);
    font-size: 7rem;
    line-height: 0.75;
}

.spark-stat__v sup {
    font-size: 0.42em;
    line-height: 0;
    vertical-align: super;
}

.spark-hero__anniversary-copy span {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.spark-hero__brand {
    display: inline-grid;
    justify-items: start;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.spark-hero__brand img {
    display: block;
    width: min(620px, calc(100vw - 2rem));
    max-width: none;
    height: auto;
    filter:
        drop-shadow(0 0 0 #ffffff)
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 42px rgba(159, 184, 255, 0.82));
}

.spark-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    font-family: var(--motif-font-label);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 18px color-mix(in oklch, black 50%, transparent);
}

.spark-hero__eyebrow::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--red) 36%, transparent);
}

.spark-hero__title {
    margin-top: 1.4rem;
    font-size: var(--motif-type-display);
    line-height: 1.0;
    text-shadow: 0 2px 40px color-mix(in oklch, black 45%, transparent);
}

.spark-hero__title em {
    font-style: normal;
    color: color-mix(in oklch, var(--red) 74%, white);
}

.spark-hero__lead {
    margin-top: 1.35rem;
    max-width: 44rem;
    color: color-mix(in oklch, white 88%, var(--blue));
    font-size: var(--motif-type-lead);
    line-height: 1.55;
}

.spark-hero__cta {
    margin-top: 2rem;
}

.spark-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklch, white 18%, transparent);
    font-size: 0.92rem;
    color: color-mix(in oklch, white 78%, var(--blue));
}

.spark-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.spark-hero__meta li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--red);
}

/* ---- Stat / trust strip --------------------------------------------- */

.spark-stats {
    display: grid;
    grid-template-columns: repeat(var(--spark-stats-cols), minmax(0, 1fr));
}

.spark-stat {
    padding: 0.5rem clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid var(--line);
}

.spark-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.spark-stat__v {
    font-family: var(--motif-font-special);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}

.spark-stat__k {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.45;
}

/* ---- Card grid (services / values) ---------------------------------- */

.spark-cards {
    display: grid;
    grid-template-columns: repeat(var(--spark-cards-cols), minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.4rem);
}

.spark-cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .spark-cards--two {
        grid-template-columns: 1fr;
    }
}

.spark-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--layout-box-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    transition:
        border-color var(--fast) var(--ease),
        box-shadow var(--med) var(--ease),
        transform var(--fast) var(--ease);
}

.spark-card:hover,
.spark-card:focus-within {
    border-color: color-mix(in oklch, var(--blue) 34%, transparent);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

/* Architectural index number instead of an icon chip. */
.spark-card__no {
    font-family: var(--motif-font-special);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--red);
}

.spark-card__no::after {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-top: 0.75rem;
    background: var(--line-2);
    transition: background-color var(--med) var(--ease), width var(--med) var(--ease);
}

.spark-card:hover .spark-card__no::after,
.spark-card:focus-within .spark-card__no::after {
    width: 2.75rem;
    background: var(--red);
}

.spark-card__title {
    margin-top: 1rem;
    color: var(--ink);
}

.spark-card__text {
    margin-top: 0.7rem;
    color: var(--muted);
}

.spark-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-family: var(--motif-font-label);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blue);
}

.spark-card__link::after {
    content: "\2192";
    transition: transform var(--fast) var(--ease);
}

.spark-card__link:hover {
    color: var(--red);
}

.spark-card__link:hover::after {
    transform: translateX(3px);
}

/* ---- Feature split (text + media) ----------------------------------- */

.spark-feature {
    display: grid;
    grid-template-columns: var(--spark-feature-cols);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.spark-feature--owner {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
}

.spark-feature--reverse .spark-feature__media {
    order: -1;
}

@media (max-width: 760px) {
    .spark-feature--owner {
        grid-template-columns: 1fr;
    }

    .spark-feature--reverse .spark-feature__media {
        order: 0;
    }
}

.spark-figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--paper);
}

.spark-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.spark-figure--portrait > img {
    aspect-ratio: 4 / 5;
    object-position: 50% 22%;
}

.spark-figure--rotator .spark-carousel {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.spark-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.spark-carousel__slide.is-active {
    opacity: 1;
}

.spark-carousel__slide :is(figure, picture, img, .spark-carousel__image) {
    width: 100%;
    height: 100%;
    margin: 0;
}

.spark-carousel__slide img,
.spark-carousel__image {
    display: block;
    aspect-ratio: auto;
    object-fit: cover;
}

.spark-figure figcaption {
    padding: 0.95rem 1.15rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--motif-type-caption);
    line-height: 1.5;
}

/* ---- Checklist ------------------------------------------------------ */

.spark-checks {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.4rem;
}

.spark-checks li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--muted);
}

.spark-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--red);
    transform: translateY(-50%) rotate(45deg);
}

.spark-band--ink .spark-checks li {
    color: var(--on-navy-muted);
}

.spark-checks + .spark-btns {
    margin-top: clamp(1.35rem, 2vw, 1.8rem);
}

/* ---- Numbered process ----------------------------------------------- */

.spark-steps {
    display: grid;
    grid-template-columns: repeat(var(--spark-cards-cols), minmax(0, 1fr));
    gap: 0;
}

.spark-step {
    padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.5rem, 2.4vw, 2.1rem) 0;
    border-left: 1px solid var(--line-navy);
}

.spark-step:first-child {
    padding-left: 0;
    border-left: 0;
}

.spark-step__no {
    font-family: var(--motif-font-special);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: color-mix(in oklch, var(--red) 70%, white);
}

.spark-step__title {
    margin-top: 1rem;
    color: #fff;
}

.spark-step__text {
    margin-top: 0.7rem;
    color: var(--on-navy-muted);
}

@media (max-width: 760px) {
    .spark-step {
        padding: 1.5rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--line-navy);
    }

    .spark-step:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* ---- Industries tiles ----------------------------------------------- */

.spark-tiles {
    display: grid;
    grid-template-columns: repeat(var(--spark-tiles-cols), minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}

.spark-tile {
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--fast) var(--ease);
}

.spark-tile:hover {
    background: var(--mist);
}

.spark-tile__no {
    font-family: var(--motif-font-special);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--red);
}

.spark-tile__title {
    margin-top: 0.85rem;
    color: var(--ink);
}

.spark-tile__text {
    margin-top: 0.6rem;
    color: var(--muted);
}

/* ---- Work gallery --------------------------------------------------- */

.spark-gallery {
    display: grid;
    grid-template-columns: repeat(var(--spark-gallery-cols), minmax(0, 1fr));
    gap: clamp(0.85rem, 1.4vw, 1.15rem);
}

.spark-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--navy);
    aspect-ratio: 4 / 3;
}

.spark-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motif-motion-duration-slow) var(--ease), filter var(--med) var(--ease);
}

.spark-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, color-mix(in oklch, var(--navy-deep) 82%, transparent));
    opacity: 0.85;
    transition: opacity var(--med) var(--ease);
}

.spark-shot:hover img,
.spark-shot:focus-within img {
    transform: scale(1.04);
    filter: saturate(1.06);
}

.spark-gallery + .spark-btns {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* ---- Before / after proof ------------------------------------------- */

.spark-bas {
    display: grid;
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

.spark-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
    align-items: stretch;
}

.spark-ba__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--navy);
    aspect-ratio: 4 / 3;
}

.spark-ba__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corner tag states the honest before/after label over the image. */
.spark-ba__tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.32rem 0.75rem;
    border-radius: var(--motif-radius-pill);
    font-family: var(--motif-font-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    color: #fff;
}

.spark-ba__tag--before {
    background: color-mix(in oklch, var(--ink) 84%, transparent);
}

.spark-ba__tag--after {
    background: var(--red);
}

.spark-ba__cap {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.8rem;
    font-size: var(--motif-type-caption);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 12px color-mix(in oklch, black 60%, transparent);
}

@media (max-width: 560px) {
    .spark-bas {
        gap: 1rem;
    }

    .spark-ba {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding: 0.7rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: color-mix(in oklch, var(--canvas) 70%, white);
        box-shadow: var(--shadow-sm);
    }

    .spark-ba__item {
        display: grid;
        aspect-ratio: auto;
        border-radius: calc(var(--radius) - 2px);
        background: var(--paper);
    }

    .spark-ba__item img {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .spark-ba__tag {
        top: 0.65rem;
        left: 0.65rem;
        padding: 0.26rem 0.62rem;
        font-size: 0.66rem;
    }

    .spark-ba__cap {
        position: static;
        padding: 0.72rem 0.8rem 0.78rem;
        border-top: 1px solid var(--line);
        color: var(--ink);
        text-shadow: none;
        background: var(--paper);
    }
}

.spark-shot__cap {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.95rem;
    z-index: 1;
    font-family: var(--motif-font-label);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 12px color-mix(in oklch, black 55%, transparent);
}

/* ---- Panel (quote / form / CTA card) -------------------------------- */

.spark-panel {
    padding: clamp(1.75rem, 2.6vw, 2.4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.spark-panel--accent {
    border-top: 3px solid var(--red);
}

.spark-panel__title {
    margin-top: 0.4rem;
    color: var(--ink);
}

.spark-panel__text {
    margin-top: 0.85rem;
    color: var(--muted);
}

.spark-panel .spark-btns {
    margin-top: 1.35rem;
}

/* ---- Contact details ------------------------------------------------ */

.spark-contacts {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.4rem;
}

.spark-contact__k {
    font-family: var(--motif-font-label);
    font-size: var(--motif-type-label);
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-base);
    text-transform: uppercase;
    color: var(--red);
}

.spark-contact__v {
    margin-top: 0.35rem;
    color: var(--ink);
    font-size: 1.1rem;
}

.spark-contact__v a {
    color: var(--ink);
    text-decoration: none;
}

.spark-contact__v a:hover {
    color: var(--red);
}

/* ---- Closing CTA band ----------------------------------------------- */

.spark-cta {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.spark-cta__title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: #fff;
}

@media (max-width: 760px) {
    .spark-cta {
        grid-template-columns: 1fr;
    }
}

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

.spark-foot {
    position: relative;
    color: var(--muted);
    background:
        linear-gradient(
            180deg,
            color-mix(in oklch, white 88%, var(--canvas)) 0%,
            color-mix(in oklch, var(--canvas) 92%, white) 100%);
    padding: var(--layout-footer-padding);
    border-top: 1px solid var(--line);
}

.spark-foot::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red), var(--blue));
}

.spark-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.8fr));
    gap: var(--layout-footer-gap);
}

.spark-foot__brand img {
    width: 196px;
    height: auto;
}

.spark-foot__brand p {
    margin-top: 1.1rem;
    max-width: 34ch;
}

.spark-foot__title {
    margin-bottom: 1rem;
    font-family: var(--motif-font-label);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: var(--motif-tracking-uppercase-loose);
    text-transform: uppercase;
    color: var(--ink);
}

.spark-foot__col ul {
    display: grid;
    gap: 0.6rem;
}

.spark-foot a {
    color: var(--muted);
    text-decoration: none;
}

.spark-foot a:hover {
    color: var(--red);
}

.spark-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.spark-social-link .va-social-icon {
    width: 1rem;
    height: 1rem;
}

.spark-foot__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.35rem;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--faint);
}

@media (max-width: 1024px) {
    .spark-foot__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .spark-foot__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Utilities ------------------------------------------------------ */

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

@media (max-width: 760px) {
    .spark-stats {
        gap: 0 1.5rem;
    }

    .spark-stat {
        padding: 0.85rem 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .spark-stat:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .spark-hero {
        align-items: flex-end;
        min-height: 100svh;
        padding-top: calc(var(--layout-nav-height) + 5.75rem);
        padding-bottom: 1.45rem;
    }

    .spark-hero__anniversary {
        top: 4.85rem;
        right: calc(5.5rem - 300vw);
        width: 600vw;
        min-height: 6.4rem;
        padding: 0.7rem 4rem;
        background-size: 56rem 100%, 56rem 100%, 100% 100%;
        transform: rotate(20deg);
    }

    .spark-hero__anniversary-copy {
        gap: 0.28rem;
    }

    .spark-hero__anniversary-copy strong {
        font-size: 3.5rem;
    }

    .spark-hero__anniversary-copy span {
        font-size: 0.76rem;
        letter-spacing: 0.18em;
    }

    .spark-hero__brand {
        margin-left: -0.75rem;
        margin-bottom: 0.75rem;
    }

    .spark-hero__brand img {
        width: min(300px, calc(100vw - 2.5rem));
    }

    .spark-hero__eyebrow {
        gap: 0.45rem;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .spark-hero__title {
        margin-top: 0.85rem;
        font-size: 2.55rem;
        line-height: 1.02;
    }

    .spark-hero__lead {
        margin-top: 0.9rem;
        max-width: 34ch;
        font-size: 1rem;
        line-height: 1.44;
    }

    .spark-hero__cta {
        margin-top: 1.2rem;
        gap: 0.65rem;
    }

    .spark-hero .spark-btn {
        min-height: 2.75rem;
        padding: 0.68rem 1.05rem;
        font-size: 0.66rem;
    }

    .spark-hero__meta {
        display: none;
    }
}

@media (max-width: 380px) {
    .spark-hero__title {
        font-size: 2.25rem;
    }

    .spark-hero__lead {
        font-size: 0.94rem;
        line-height: 1.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .spark-btn:hover,
    .spark-card:hover,
    .spark-card:focus-within,
    .spark-shot:hover img {
        transform: none;
    }
}