/* ============================================================
   Projects — deliberately its own shape, not a reskin of the
   Home/About/Solutions hero+stat-strip+card-grid formula. This page
   has no finished portfolio to show yet, so instead of a card grid
   that reads as "empty," it leads with process (the "How We Deliver"
   timeline) and a pipeline presented as a log of active work, then
   closes on a showcase-submission CTA rather than a completed
   project count.
   ============================================================ */

/* ---- Hero: flat navy, grid-texture backdrop (.cta-band-grid, from
   global.css), oversized editorial type. No photo band, no
   overlapping stat strip — the sector ticker below is this page's
   own "signature motion" instead. ---- */
.showcase-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-navy);
    padding: 152px 0 0;
}
.showcase-hero-inner { position: relative; z-index: 1; max-width: 760px; padding-bottom: 64px; }
.showcase-hero-inner .tag { background: rgba(255,255,255,0.14); color: var(--color-white); margin-bottom: 20px; display: inline-block; }
.showcase-hero-inner .tag::after { background: var(--color-gold); }
.showcase-hero-inner h1 { color: var(--color-white); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.16; margin-bottom: 18px; }
.showcase-hero-inner .lead { max-width: 620px; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.78); margin-bottom: 28px; }
.showcase-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Back link + status tag on the detail page's hero */
.back-link {
    display: inline-block;
    color: rgba(255,255,255,0.7);
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 18px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-link:hover { color: var(--color-white); text-decoration: none; transform: translateX(-3px); }
.showcase-hero-detail .lead { margin-bottom: 0; }

/* ---- Continuous sector ticker: a slow, endless marquee of the
   sectors Hydra works across — a different idle motion from the
   pulsing stat cards other pages use. ---- */
.sector-ticker {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sector-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 14px;
    padding: 16px 0;
    white-space: nowrap;
    animation: sector-ticker-scroll 32s linear infinite;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sector-ticker-track span { flex-shrink: 0; }
.sector-ticker-dot { color: var(--color-gold); opacity: 0.7; }
@keyframes sector-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .sector-ticker-track { animation: none; }
}

/* ---- How We Deliver: alternating vertical process timeline — a
   different shape from About's horizontal roadmap dots. ---- */
.process-timeline { position: relative; max-width: 760px; margin: 0 auto; }
.process-line {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 21px;
    width: 2px;
    background: var(--color-border);
}
.process-step {
    position: relative;
    display: flex;
    gap: 24px;
    padding-bottom: 44px;
}
.process-step:last-child { padding-bottom: 0; }
.process-marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.process-step:hover .process-marker { border-color: var(--color-green); color: var(--color-green-dark); transform: scale(1.08); }
.process-content { padding-top: 6px; }
.process-content h4 { margin-bottom: 8px; }
.process-content p { color: var(--color-text-muted); margin: 0; max-width: 520px; }

/* ---- Pipeline: horizontal list rows instead of a card grid — a
   project mid-development reads as an active log entry, not a
   finished-looking tile with a gap where a photo should be. ---- */
.filter-bar { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--color-text);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.filter-btn:hover { border-color: var(--color-navy); transform: translateY(-2px); }
.filter-btn.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }

.pipeline-list { display: flex; flex-direction: column; gap: 16px; }
.pipeline-row {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.25s ease;
}
.pipeline-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(11,60,137,0.18); text-decoration: none; }
.pipeline-row-media { flex-shrink: 0; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; }
.pipeline-row-media .media-placeholder { padding: 10px; }
.pipeline-row-media svg { width: 22px; height: 22px; }
.pipeline-row-body { flex: 1; min-width: 0; }
.pipeline-row-body .tag { margin-bottom: 8px; }
.pipeline-row-body h4 { margin-bottom: 4px; }
.pipeline-row-meta { color: var(--color-text-muted); margin: 0 0 4px; font-size: 0.9rem; }
.pipeline-row-stage { color: var(--color-green-dark); margin: 0; font-size: 0.85rem; font-weight: 600; }
.pipeline-row-arrow { flex-shrink: 0; }

/* Filter fade: projects.js toggles .is-filtering then .is-hidden,
   same pattern as elsewhere on the site, adapted to list rows. */
.pipeline-row.is-filtering { opacity: 0; transform: scale(0.98); pointer-events: none; }
.pipeline-row.is-hidden { display: none; }

.empty-state { color: var(--color-text-muted); padding: 20px 0; }

/* ---- Detail page: photo + copy split (same technique as the Home
   Spotlight / Solutions detail sections) ---- */
.project-detail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.project-detail-media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; }
.project-detail-media .media-placeholder { aspect-ratio: 4/3; }
.project-detail-index { font-size: 2.6rem; margin-bottom: 14px; }
.project-detail-copy p { font-size: 1.05rem; color: var(--color-text-muted); margin-bottom: 28px; max-width: 480px; }
.project-detail-stage { font-size: 0.9rem; margin: -6px 0 22px; }

.project-fact-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 18px 0 22px; padding: 18px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.project-fact { display: flex; flex-direction: column; gap: 2px; }
.project-fact-label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.project-fact-value { font-weight: 700; color: var(--color-navy); }

/* ---- Other projects: numbered mini-cards ---- */
.other-projects-grid { gap: 20px; }
.project-mini-card {
    text-align: center;
    padding: 28px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.project-mini-card .index-num { margin: 0 auto 10px; }
.project-mini-card .tag { margin-bottom: 10px; }
.project-mini-card h4 { margin: 0; font-size: 1rem; }

/* ---- Showcase CTA: a distinct full-width panel (not the floating
   overlap card used elsewhere) — this page's real "next step" is a
   submission, not a browse-more link. ---- */
.showcase-cta-section { padding-top: 0; }
.showcase-cta-panel {
    position: relative;
    overflow: hidden;
    background: var(--color-navy);
    border-radius: 28px;
    padding: 72px 56px;
    text-align: center;
}
.showcase-cta-copy { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.showcase-cta-copy .tag { background: rgba(255,255,255,0.14); color: var(--color-white); margin-bottom: 18px; }
.showcase-cta-copy .tag::after { background: var(--color-gold); }
.showcase-cta-copy h2 { color: var(--color-white); margin-bottom: 14px; }
.showcase-cta-copy p { color: rgba(255,255,255,0.75); margin-bottom: 28px; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .showcase-hero { padding-top: 120px; }
    .showcase-hero-inner { padding-bottom: 48px; }
    .process-line { left: 17px; }
    .process-marker { width: 36px; height: 36px; font-size: 0.78rem; }
    .pipeline-row { flex-wrap: wrap; }
    .pipeline-row-arrow { width: 100%; text-align: right; }
    .showcase-cta-panel { padding: 48px 24px; border-radius: 20px; }
}