/* ==========================================================================
   3D Design & Printing — page-scoped sections.

   Everything here is prefixed `print-` and loaded only by
   services/3d-design-printing.html. The generic .showcase-*, .content-intro
   and .feature-block rules in services.css are shared with nine other pages,
   so this page's layout had to be scoped rather than edited in place.

   Reads only from tokens.css. No raw hex, no !important.
   ========================================================================== */

/* ==========================================================================
   PRINT QUALITY SHOWCASE
   ========================================================================== */

.print-showcase {
    padding: var(--section-y) 0;
    background: var(--surface-sunken);
    border-top: 1px solid var(--line-soft);
}

/* --- header: heading left, lede right ------------------------------------ */

.print-showcase-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-16);
    align-items: end;
    max-width: var(--container-max);
    margin: 0 auto var(--space-10);
}

.print-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    /* The old eyebrows ran at 0.24em tracking, which read as dated banner
       type. --tracking-wide is the system value. */
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--space-3);
}

.print-showcase-head h2 {
    margin: 0;
    font-size: var(--text-display-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.print-lede {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* --- gallery mosaic ------------------------------------------------------
   The previous layout put the video in a short left column beside a tall
   right column, leaving roughly 300px of dead white space under the video.
   A two-row mosaic with the video spanning both rows makes the columns end
   together at any viewport width. */

.print-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    max-width: var(--container-max);
    margin: 0 auto;
    /* Fixed overall height so both columns resolve to equal row heights. */
    height: clamp(420px, 46vw, 560px);
}

.print-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
}

.print-tile-feature {
    grid-row: span 2;
}

.print-tile img,
.print-tile video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}


/* Captions sit over the image on a gradient so the tiles keep a flush edge
   rather than each carrying a text block underneath. */
.print-tile figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-8) var(--space-4) var(--space-4);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
    color: var(--on-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}

.print-tile-feature figcaption {
    font-size: var(--text-sm);
    padding: var(--space-10) var(--space-5) var(--space-5);
}

/* "Printing in progress" — a live tag rather than a heading floating above
   the video, where it used to be clipped by the container edge. */
.print-tile-tag {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.print-tile-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--danger);
    animation: printPulse 2s var(--ease-in-out) infinite;
}

@keyframes printPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* --- proof points -------------------------------------------------------- */

.print-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: var(--space-12) auto 0;
    padding: 0;
    list-style: none;
}

/* No rules, no numerals — the heading and the gap between columns carry it. */
.print-point h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.print-point p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
}

/* ==========================================================================
   PROCESS SEQUENCE  ("From concept to creation")

   Replaces four 36px headings stacked in a 2×2 grid — which read as four
   competing titles — with a numbered sequence that shows the order of work.
   ========================================================================== */

.print-process {
    padding: var(--section-y) 0;
    background: var(--surface);
}

.print-process-head {
    max-width: var(--measure);
    margin: 0 0 var(--space-12);
}

.print-process-head h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.print-process-head p {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
}

/* Spacing alone separates the steps: no numerals, no rules between them, and
   nothing that reacts to the pointer. */
.print-process-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.print-step h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.print-step p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* ==========================================================================
   CAPABILITIES  ("What we manufacture")

   The shared .capabilities-* rules set the heading at --text-7xl (56px) and
   the card titles at --text-2xl, which left three different heading sizes
   competing down this page. Everything here matches the section scale used
   above: --text-display-sm for the section, --text-lg for card titles.
   ========================================================================== */

.print-capabilities {
    padding: var(--section-y) 0;
    background: var(--surface-sunken);
    border-top: 1px solid var(--line-soft);
}

.print-capabilities-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-16);
    align-items: end;
    margin-bottom: var(--space-10);
}

.print-capabilities-head h2 {
    margin: 0;
    font-size: var(--text-display-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.print-capabilities-head > p {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

.print-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Static by design: no hover lift, no blue hover outline, no icons. These
   are read, not clicked — nothing here is a link, so hover feedback only
   suggested interactivity that does not exist. */
/* No outline: the white fill against the section's grey is enough to read as
   a card. */
.print-capability {
    padding: var(--space-6);
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.print-capability h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.print-capability p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
}

/* ==========================================================================
   WHY ADDITIVE

   Was a centred heading and one paragraph floating alone in a grey band.
   Splitting the argument into its three constituent claims gives the block
   something to say and matches the left-aligned rhythm of the page.
   ========================================================================== */

/* The section grey used throughout the site, not a brand-blue slab. The
   capabilities block above is the same grey, so a hairline marks the seam. */
.print-impact {
    padding: var(--section-y) 0;
    background: var(--surface-sunken);
    border-top: 1px solid var(--line);
    color: var(--ink);
}

.print-impact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-10) var(--space-16);
    align-items: start;
}

.print-impact-copy h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.print-impact-copy p {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

.print-impact-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.print-impact-list li {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
}

.print-impact-list li:last-child {
    border-bottom: 1px solid var(--line);
}

.print-impact-list h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.print-impact-list p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* ==========================================================================
   CTA

   The old one sent people to the contact page with "Get Started", ignoring
   the instant-quote tool at the top of this very page — which is the actual
   conversion action here. Quote is primary, contact is the fallback.
   ========================================================================== */

.print-cta {
    padding: var(--section-y) 0;
    background: var(--surface);
    border-top: 1px solid var(--line-soft);
}

.print-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.print-cta-inner h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.print-cta-inner p {
    margin: 0 auto var(--space-8);
    max-width: var(--measure-tight);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-soft);
}

.print-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.print-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: var(--transition-colors), var(--transition-transform);
}

.print-cta-btn:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.print-cta-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-inverse);
}

.print-cta-btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--on-inverse);
    transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
    .print-showcase-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-5);
    }

    /* The mosaic becomes a stack: the video keeps its prominence, the two
       photographs sit side by side beneath it. */
    .print-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        height: auto;
    }

    .print-tile-feature {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .print-gallery .print-tile:not(.print-tile-feature) {
        aspect-ratio: 4 / 3;
    }

    .print-points {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .print-process-list {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .print-capabilities-head,
    .print-impact-grid {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-5);
    }

    .print-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .print-gallery {
        grid-template-columns: 1fr;
    }

    .print-tile-feature {
        grid-column: auto;
    }

    .print-showcase-head h2,
    .print-process-head h2,
    .print-capabilities-head h2,
    .print-impact-copy h2,
    .print-cta-inner h2 {
        font-size: var(--text-4xl);
    }

    .print-lede,
    .print-process-head p,
    .print-capabilities-head > p,
    .print-impact-copy p,
    .print-cta-inner p {
        font-size: var(--text-base);
    }

    .print-capability-grid {
        grid-template-columns: 1fr;
    }

    .print-cta-actions {
        flex-direction: column;
    }
}

/* Honour reduced-motion: the tile zoom and the live dot are decorative. */
@media (prefers-reduced-motion: reduce) {
    .print-tile:hover img,
    .print-tile:hover video {
        transform: none;
    }

    .print-tile-dot {
        animation: none;
    }
}