@charset "UTF-8";
/* =====================================================================
   PrintMASS — printmass.lk
   Design system, layout and motion.
   Brand colours: see the client palette in :root below.
   Loader background #F4F5F8 is exactly what the logo animation decodes to (one level off the page grey, invisible), so the video edge never shows.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    /* ---- Client palette (Oct 2026) ------------------------------------------------
       Light grey #F4F5F7  the whole site's background (every page, section and the header)
       White      #FFFFFF  cards and content panels that sit on the grey
       Magenta    #EC008C  brand accent: buttons, links, icons, highlights
       Charcoal   #333333  headings, navigation text, footer background
       Medium grey #777777 supporting text: captions, descriptions
       The footer is the one part that is not light grey. Nothing else is a brand colour,
       except the logo's own grey (#868484), used for "MASS" in the home-page wordmark. */
    --white:      #FFFFFF;
    --magenta:    #EC008C;
    --charcoal:   #333333;
    --grey-bg:    #F4F5F7;
    --grey-text:  #777777;
    --logo-grey:  #868484;                 /* the grey inside the logo itself */

    /* The names below are what the rest of this file uses; they point at the palette. */
    --paper:      var(--grey-bg);          /* page, header, every section */
    --card:       var(--white);            /* white cards sitting on the grey */
    --paper-3:    #E9EBEE;                 /* derived tint, used only for map/media placeholders */
    --ink:        var(--charcoal);         /* only ever the footer and video-frame backing now */

    --text-on-paper:      var(--charcoal);
    --text-on-paper-mute: var(--grey-text);
    --text-on-ink:        #FFFFFF;
    --text-on-ink-mute:   rgba(255, 255, 255, .74);   /* white at 74% on charcoal (footer) */

    --line-on-ink:   rgba(255, 255, 255, .20);
    --line-on-paper: rgba(51, 51, 51, .14);

    /* Type */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-accent:  'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Fluid scale */
    --step--2: clamp(.69rem, .67rem + .10vw, .75rem);
    --step--1: clamp(.80rem, .76rem + .18vw, .92rem);
    --step-0:  clamp(1.00rem, .95rem + .24vw, 1.15rem);
    --step-1:  clamp(1.20rem, 1.10rem + .48vw, 1.50rem);
    --step-2:  clamp(1.55rem, 1.35rem + .95vw, 2.25rem);
    --step-3:  clamp(2.10rem, 1.60rem + 2.35vw, 3.60rem);
    --step-4:  clamp(2.80rem, 1.85rem + 4.40vw, 6.00rem);
    --step-5:  clamp(3.60rem, 1.20rem + 11.0vw, 11.0rem);

    /* Rhythm */
    --gutter:  clamp(1.25rem, 4vw, 4rem);
    --measure: 1560px;
    --sec-y:   clamp(4.5rem, 10vw, 11rem);

    /* Motion */
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --ease-in:   cubic-bezier(.62, .05, .36, 1);
    --dur:       .72s;
    --dur-fast:  .34s;

    --header-h: 112px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text-on-paper);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.58;
    font-variation-settings: 'wdth' 100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.02; letter-spacing: -.03em; }
figure { margin: 0; }
address { font-style: normal; }

::selection { background: var(--magenta); color: #fff; }

:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 3px;
    border-radius: 2px;
}

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

.skip-link {
    position: fixed; top: -100px; left: 1rem; z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--magenta); color: #fff;
    font-size: var(--step--1); font-weight: 600;
    transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ================================================================ LOADER */
.loader {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
    background: #F4F5F8;                     /* == logo animation background */
    transition: opacity .45s var(--ease), visibility .45s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__stage {
    position: relative;
    width: min(46vw, 430px);
    aspect-ratio: 3 / 2;
}
.loader__video,
.loader__still {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}
.loader__still { opacity: 0; transition: opacity .3s linear; }
.loader.is-fallback .loader__video { opacity: 0; }
.loader.is-fallback .loader__still { opacity: 1; animation: markPulse 1.4s var(--ease) infinite; }

@keyframes markPulse {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.03); opacity: 1; }
}

.loader__meter {
    position: absolute; left: 50%; bottom: 14vh;
    transform: translateX(-50%);
    width: min(240px, 40vw); height: 2px;
    background: rgba(51, 51, 51, .12);
    overflow: hidden;
}
.loader__meter-bar {
    display: block; width: 100%; height: 100%;
    background: var(--magenta);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s linear;
}

.loader__marks { position: absolute; inset: clamp(1rem, 3vw, 2.5rem); pointer-events: none; }
.loader__mark { position: absolute; width: 22px; height: 22px; }
.loader__mark::before,
.loader__mark::after {
    content: ''; position: absolute; background: rgba(0, 0, 0, .22);
}
.loader__mark::before { width: 100%; height: 1px; top: 0; }
.loader__mark::after  { width: 1px; height: 100%; left: 0; }
.loader__mark--tl { top: 0; left: 0; }
.loader__mark--tr { top: 0; right: 0; transform: scaleX(-1); }
.loader__mark--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.loader__mark--br { bottom: 0; right: 0; transform: scale(-1); }

/* =============================================================== CURSOR */
.cursor { position: fixed; inset: 0; z-index: 8000; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) {
    .cursor { display: block; }
}
.cursor__dot, .cursor__ring {
    position: absolute; top: 0; left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cursor__dot  { width: 6px; height: 6px; background: var(--magenta); }
.cursor__ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(236, 0, 140, .45);
    transition: width .3s var(--ease), height .3s var(--ease),
                background-color .3s var(--ease), border-color .3s var(--ease);
}
.cursor.is-active .cursor__ring {
    width: 62px; height: 62px;
    background: rgba(236, 0, 140, .10);
    border-color: rgba(236, 0, 140, .7);
}

/* =============================================================== HEADER */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 700;
    /* Charcoal header with white lettering, exactly the footer's colour (solid, so nothing shows through). */
    background: var(--ink);
    transition: transform .5s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
    max-width: var(--measure); margin-inline: auto;
    padding: 0 var(--gutter);
    height: var(--header-h);
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

/* The logo is a white square tile. Its size comes from the header height, so it always sits inside the bar with an even margin
   (8px above and below) and can never be clipped. */
.brand {
    flex: none; display: block;
    width: calc(var(--header-h) - 16px); height: calc(var(--header-h) - 16px);
    transition: transform var(--dur-fast) var(--ease);
}
.brand:hover { transform: scale(1.03); }
.brand__mark { display: block; width: 100%; height: 100%; object-fit: contain; }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(.9rem, 2vw, 2.1rem); }
.nav__link {
    position: relative;
    display: block; padding: 0;      /* the breathing room lives on the label, inside the clip, see below */
    font-size: var(--step--1); font-weight: 500;
    letter-spacing: -.01em;
    color: var(--text-on-ink);
    overflow: hidden;
}
/* Label rolls upward on hover; the duplicate rides in from below.
   The padding is on the label and on its duplicate (not on the link), so the link's clip edge is exactly the
   label's bottom edge: the hidden duplicate starts below the clip and no part of it can show at rest. */
.nav__label { position: relative; display: block; padding: .35rem 0; transition: transform .42s var(--ease); }
.nav__label::after {
    content: attr(data-text);
    position: absolute; top: 100%; left: 0;
    padding: .35rem 0; white-space: nowrap;
    color: var(--text-on-ink);
}
.nav__link:hover .nav__label,
.nav__link:focus-visible .nav__label { transform: translateY(-100%); }
.nav__link.is-current { color: var(--text-on-ink); }   /* white; the magenta underline marks the page you are on */
.nav__link.is-current::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--magenta);
}

.site-header__actions { display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.4rem); }
.site-header__phone {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .01em;
    color: var(--text-on-ink-mute);
    transition: color var(--dur-fast) var(--ease);
}
.site-header__phone:hover { color: var(--text-on-ink); }

.site-header__rule {
    display: block; height: 1px;
    background: var(--line-on-ink);
}


.site-header__progress {
    position: absolute; left: 0; bottom: 0;
    height: 2px; width: 100%;
    background: var(--magenta);
    transform: scaleX(0); transform-origin: left;
}

/* Header inverts over dark hero sections */

/* ---------------------------------------------------------- burger + mobile */
.burger { display: none; width: 40px; height: 40px; position: relative; }
.burger span {
    position: absolute; left: 9px; width: 22px; height: 1.5px;
    background: var(--text-on-ink);
    transition: transform .38s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mobile-nav {
    position: fixed; inset: 0; z-index: 650;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--header-h) var(--gutter) 3rem;
    background: var(--ink); color: var(--text-on-ink);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .62s var(--ease);
    visibility: hidden;
}
.mobile-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.mobile-nav__item { border-top: 1px solid var(--line-on-ink); }
.mobile-nav__item:last-child { border-bottom: 1px solid var(--line-on-ink); }
.mobile-nav__link {
    display: flex; align-items: baseline; gap: 1rem;
    padding: clamp(.8rem, 2.4vw, 1.35rem) 0;
    opacity: 0; transform: translateY(18px);
}
.mobile-nav.is-open .mobile-nav__link {
    animation: navIn .6s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
@keyframes navIn { to { opacity: 1; transform: none; } }

.mobile-nav__no {
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--text-on-ink-mute);
}
.mobile-nav__text { font-size: var(--step-3); font-weight: 600; letter-spacing: -.04em; }

.mobile-nav__foot {
    margin-top: 2.5rem;
    display: grid; gap: .3rem;
    font-size: var(--step--1); color: var(--text-on-ink-mute);
}
.mobile-nav__foot a:hover { color: var(--text-on-ink); }

@media (max-width: 1080px) {
    .nav { display: none; }
    .burger { display: block; }
    .site-header__actions { margin-left: auto; }   /* menu button at the right edge, not beside the logo */
    .site-header__phone { display: none; }
}
@media (max-width: 560px) {
    .site-header__actions .btn--sm { display: none; }
}

/* ================================================================ TYPE */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--magenta);
    margin: 0 0 1.4rem;
}

.h2 {
    font-size: var(--step-4);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .96;
    max-width: 18ch;
}
.h2 em, .cta__title em, .page-hero__title em, .site-footer__statement em, .drawer__title em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--magenta);
}

.lead {
    font-size: var(--step-1);
    line-height: 1.42;
    letter-spacing: -.015em;
    max-width: 46ch;
}

.section { padding-block: var(--sec-y); position: relative; }

.section-head {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
    position: relative;
}
.section-head__link { justify-self: start; }
.section-head__note {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-on-paper-mute);
    margin: 0;
}

@media (min-width: 900px) {
    .section-head { grid-template-columns: 1fr auto; align-items: end; }
    .section-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
}

/* =============================================================== BUTTONS */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1.05rem 2rem;
    font-size: var(--step-0); font-weight: 700; letter-spacing: 0;   /* bold + 16px+ so white on magenta stays readable */
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition: color .35s var(--ease), border-color .35s var(--ease);
    will-change: transform;
}
.btn--sm { padding: .75rem 1.3rem; font-size: var(--step--1); }
.btn--lg { padding: 1.2rem 2.4rem; font-size: var(--step-1); }

.btn__label { position: relative; z-index: 2; }
.btn__fill {
    position: absolute; inset: 0; z-index: 1;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .48s var(--ease);
}

.btn--solid { background: var(--magenta); color: #fff; }
.btn--solid:hover .btn__fill,
.btn--solid:focus-visible .btn__fill { transform: translateY(0); }
/* On the charcoal header the usual charcoal hover fill would disappear, so it fills white instead. */
.site-header .btn__fill { background: var(--white); }
.site-header .btn--solid .btn__label { transition: color .3s var(--ease); }
.site-header .btn--solid:hover .btn__label,
.site-header .btn--solid:focus-visible .btn__label { color: var(--charcoal); }

.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost .btn__label { transition: color .35s var(--ease); }
.btn--ghost::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: var(--magenta);
    transform: translateY(101%);
    transition: transform .48s var(--ease);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: #fff; border-color: var(--magenta); }
.btn--ghost:hover::after, .btn--ghost:focus-visible::after { transform: translateY(0); }

.link-arrow {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem 0;
    font-size: var(--step--1); font-weight: 600;
    color: var(--magenta);
    border-bottom: 1px solid currentColor;
    transition: gap .3s var(--ease);
}
.link-arrow:hover { gap: 1.1rem; }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ================================================================= HERO */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-block: calc(var(--header-h) + 4rem) clamp(2rem, 5vw, 4rem);
    background: var(--paper);
    color: var(--text-on-paper);
    overflow: hidden;
}
/* The photograph fills the hero. The box is only a little taller than the hero (room for the slight parallax drift), so
   the photo is cropped as little as possible; it is anchored to the right and bottom, where the products are. */
.hero__media { position: absolute; inset: -3% 0; z-index: 0; }

.hero__media img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: 86% 100%;
}

.hero__scrim {
    /* Light grey fades in from the left, so the headline and text always sit on a calm background, and
       the products on the right stay at full strength. A soft fade at the bottom keeps the small
       labels along the bottom edge readable. */
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(244, 245, 247, .96) 0%, rgba(244, 245, 247, .93) 40%, rgba(244, 245, 247, .9) 55%, rgba(244, 245, 247, .58) 65%, rgba(244, 245, 247, .16) 77%, rgba(244, 245, 247, 0) 88%),
        linear-gradient(to top, rgba(244, 245, 247, .9) 0%, rgba(244, 245, 247, 0) 16%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__kicker {
    /* Same font, italic style and magenta as the accent words in the headings ("Exceptional Packaging."). */
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--magenta);
    /* Larger, and it grows with the screen so each of the two lines always fits on one line (see FitLines in app.js). */
    font-size: clamp(.9rem, 4.5vw, 1.75rem);
    line-height: 1.25;
    margin-bottom: clamp(1.5rem, 4vw, 2.6rem);
}
.hero__kicker-line { display: block; white-space: nowrap; }

/* Where the large wordmark runs over the photograph, a soft light halo lifts the letters off it. */
.hero__title { text-shadow: 0 0 .1em rgba(244, 245, 247, .98), 0 0 .26em rgba(244, 245, 247, .95), 0 0 .55em rgba(244, 245, 247, .85); }
.hero__title {
    font-size: var(--step-5);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .84;
    margin-bottom: clamp(1.5rem, 4vw, 2.4rem);
}
/* The wordmark follows the logo: "Print" in magenta, "MASS" in the logo's grey. */
.hero__title .char:nth-child(-n+5) { color: var(--magenta); }
.hero__title .char:nth-child(n+6)  { color: var(--logo-grey); }
.hero__lead {
    max-width: 52ch;
    font-size: var(--step-1);
    line-height: 1.45;
    letter-spacing: -.015em;
    color: var(--text-on-paper);
    margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__foot {
    position: relative; z-index: 1;
    max-width: var(--measure); margin-inline: auto; width: 100%;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0;
    display: flex; justify-content: space-between; align-items: end; gap: 1.5rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
}
.hero__scroll { display: flex; align-items: center; gap: .8rem; }
/* A light backing, so this small line stays readable wherever the photograph passes behind it. */
.hero__specs { background: rgba(244, 245, 247, .95); padding: .5rem .9rem; }
.hero__scroll-line {
    display: block; width: 54px; height: 1px;
    background: var(--magenta);
    transform-origin: left;
    animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
    0%, 100% { transform: scaleX(.25); opacity: .5; }
    50%      { transform: scaleX(1);   opacity: 1; }
}
@media (max-width: 720px) { .hero__specs { display: none; } }

/* ------------------------------------------------------------ page hero */
.page-hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(4rem, 12vw, 9rem)) clamp(3rem, 7vw, 5.5rem);
    background: var(--paper); color: var(--text-on-paper);
    overflow: hidden;
}
.page-hero__title {
    font-size: var(--step-4);
    font-weight: 600; letter-spacing: -.05em; line-height: .94;
    max-width: 16ch;
    margin-bottom: 1.6rem;
}
.page-hero__lead {
    max-width: 52ch;
    font-size: var(--step-1); line-height: 1.45; letter-spacing: -.015em;
    color: var(--text-on-paper-mute);
    margin: 0;
}
.page-hero__rule {
    position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
    height: 1px; background: var(--line-on-paper);
}

/* ============================================================== MARQUEE */
.ticker {
    background: var(--ink); color: var(--text-on-ink);     /* charcoal band, white lettering, like the footer */
    padding-block: .95rem;
    overflow: hidden;
}
.ticker__track, .marquee__track { display: flex; width: max-content; }
.ticker__set { display: flex; }
.ticker__item {
    display: flex; align-items: center; gap: 2.2rem;
    padding-right: 2.2rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.ticker__dot { color: var(--magenta); font-size: .7em; }

.clients { padding-block: var(--sec-y); overflow: hidden; }

.marquee { overflow: hidden; padding-block: clamp(.6rem, 1.5vw, 1.1rem); }
.marquee__set { display: flex; align-items: center; }
.marquee__item {
    flex: none;
    width: clamp(140px, 16vw, 220px);
    padding-inline: clamp(1rem, 2.5vw, 2.4rem);
    display: grid; place-items: center;
}
.marquee__item img {
    width: 100%; height: auto;
    max-height: clamp(52px, 6vw, 80px);
    object-fit: contain;
    /* Customers' logos are always shown in their real colours: no grey filter, no fade. */
    transition: transform .45s var(--ease);
}
.marquee__item img:hover { transform: scale(1.07); }

/* ================================================================ ABOUT */
.about__body { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 900px) {
    .about__body { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
.about__text p { color: var(--text-on-paper-mute); max-width: 56ch; }
.about__text .lead { color: var(--text-on-paper); }

.about__figure, .intro__figure, .svc__figure, .quality__figure { overflow: hidden; position: relative; }
.about__figure img, .intro__figure img, .svc__figure img, .quality__figure img {
    width: 100%; transition: transform 1.1s var(--ease);
}
.about__figure:hover img, .intro__figure:hover img,
.svc__figure:hover img, .quality__figure:hover img { transform: scale(1.04); }

figcaption {
    margin-top: .8rem;
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
}

/* ========================================================= CAPABILITIES */
.cap-list { display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
.cap { background: var(--card); border: 1px solid var(--line-on-paper); }   /* white card on the light grey section */

.cap__head {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.1rem, 2.6vw, 2rem);
    text-align: left;
}
.cap__no {
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--magenta); letter-spacing: .08em;
}
.cap__title {
    font-size: var(--step-2); font-weight: 600; letter-spacing: -.035em;
    transition: transform .45s var(--ease), color .45s var(--ease);
}
.cap__head:hover .cap__title { transform: translateX(10px); color: var(--magenta); }

.cap__toggle { position: relative; width: 18px; height: 18px; }
.cap__toggle::before, .cap__toggle::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: currentColor;
    transition: transform .4s var(--ease);
}
.cap__toggle::after { transform: rotate(90deg); }
.cap.is-open .cap__toggle::after { transform: rotate(0deg); }

.cap__panel { height: 0; overflow: hidden; transition: height .55s var(--ease); }
.cap__panel-inner {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    padding: 0 clamp(1.1rem, 2.6vw, 2rem) clamp(1.5rem, 3.4vw, 2.4rem);
}
@media (min-width: 860px) {
    .cap__panel-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}
.cap__lead { font-size: var(--step-1); line-height: 1.4; letter-spacing: -.015em; max-width: 42ch; }
.cap__items {
    display: grid; gap: .55rem;
    font-size: var(--step--1);
    color: var(--text-on-paper-mute);
}
.cap__items li { padding-left: 1.3rem; position: relative; }
.cap__items li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 6px; height: 6px; background: var(--magenta);
}
.cap__media { overflow: hidden; }
.cap__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* =============================================================== FIGURES */
.figures__grid { display: grid; gap: 0; border-top: 1px solid var(--line-on-paper); }
@media (min-width: 760px)  { .figures__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .figures__grid { grid-template-columns: repeat(4, 1fr); } }

.figure {
    padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1rem, 2.5vw, 2rem) clamp(1.8rem, 4vw, 2.8rem) 0;
    border-bottom: 1px solid var(--line-on-paper);
    position: relative;
}
@media (min-width: 760px) {
    .figure + .figure { border-left: 1px solid var(--line-on-paper); padding-left: clamp(1rem, 2.5vw, 2rem); }
}
@media (min-width: 1180px) {
    .figure:nth-child(1) { border-left: 0; padding-left: 0; }
}

.figure__label {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 1.2rem;
}
.figure__value {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
    font-size: var(--step-4); font-weight: 700; letter-spacing: -.05em;
    line-height: 1; margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.figure__value > span[data-count-to] { white-space: nowrap; }
.figure__unit {
    font-family: var(--font-mono); font-size: var(--step--2); font-weight: 400;
    letter-spacing: .1em; color: var(--text-on-paper-mute);
    white-space: normal;
}
.figure__note {
    font-size: var(--step--1); color: var(--text-on-paper-mute);
    max-width: 30ch; margin: 0;
}

/* ============================================================= PRODUCTS */
/* (category index + one section per category; class names kept as .svc-*) */
.svc-index__list { display: grid; border-top: 1px solid var(--line-on-paper); }
@media (min-width: 800px) { .svc-index__list { grid-template-columns: 1fr 1fr; } }
.svc-index__list li { border-bottom: 1px solid var(--line-on-paper); }
@media (min-width: 800px) { .svc-index__list li:nth-child(odd) { border-right: 1px solid var(--line-on-paper); } }
.svc-index__list a {
    display: flex; align-items: center; gap: 1.2rem;
    padding: clamp(.9rem, 2vw, 1.3rem) clamp(0rem, 2vw, 1.5rem) clamp(.9rem, 2vw, 1.3rem) 0;
    transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.svc-index__list a:hover { color: var(--magenta); padding-left: .8rem; }
.svc-index__no { font-family: var(--font-mono); font-size: var(--step--2); color: var(--magenta); }
.svc-index__title { font-size: var(--step-1); font-weight: 500; letter-spacing: -.03em; margin-right: auto; }

/* Consecutive grey sections read as one grey field with a white card per category. */
.svc { padding-block: clamp(.7rem, 1.4vw, 1rem); }
.svc-index + .svc { padding-top: clamp(2.5rem, 5vw, 4rem); }
.svc--last { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.svc__card {
    background: var(--card);
    border: 1px solid var(--line-on-paper);
    padding: clamp(1.4rem, 4vw, 3.4rem);
}
.svc__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
    .svc__grid { grid-template-columns: 1fr 1fr; }
    .svc--flip .svc__figure { order: -1; }
}
.svc__items {
    display: grid; gap: .5rem;
    margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.8rem, 4vw, 2.5rem);
    font-size: var(--step--1);
}
.svc__items li { padding-left: 1.4rem; position: relative; opacity: .85; }
.svc__items li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 8px; height: 1px; background: var(--magenta);
}
.svc__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.stocks__cols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 780px) { .stocks__cols { grid-template-columns: repeat(3, 1fr); } }
.stocks__heading {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase; color: var(--magenta);
    padding-bottom: .9rem; margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--line-on-paper);
}
.stocks__list { display: grid; gap: .55rem; font-size: var(--step--1); color: var(--text-on-paper-mute); }

.process__list { display: grid; border-top: 1px solid var(--line-on-paper); }
.process__step {
    display: grid; gap: .5rem 2rem;
    padding: clamp(1.3rem, 3vw, 2.1rem) 0;
    border-bottom: 1px solid var(--line-on-paper);
}
@media (min-width: 780px) { .process__step { grid-template-columns: 5rem 1fr; } }
.process__no { font-family: var(--font-mono); font-size: var(--step--2); color: var(--magenta); }
.process__step h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -.035em; margin-bottom: .5rem; }
.process__step p { margin: 0; color: var(--text-on-paper-mute); max-width: 56ch; }

/* ================================================================== FAQ */
.faq__list { border-top: 1px solid var(--line-on-paper); }
.faq__item { border-bottom: 1px solid var(--line-on-paper); }

.faq__q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
    text-align: left;
    font-size: var(--step-1); font-weight: 500; letter-spacing: -.025em;
    transition: color .35s var(--ease);
}
.faq__q:hover { color: var(--magenta); }
.faq__toggle { position: relative; flex: none; width: 16px; height: 16px; }
.faq__toggle::before, .faq__toggle::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: currentColor; transition: transform .4s var(--ease);
}
.faq__toggle::after { transform: rotate(90deg); }
.faq__item.is-open .faq__toggle::after { transform: rotate(0); }
.faq__item.is-open .faq__q { color: var(--magenta); }

.faq__a { height: 0; overflow: hidden; transition: height .5s var(--ease); }
.faq__a-inner { padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.faq__a p { max-width: 68ch; color: var(--text-on-paper-mute); margin: 0; }

/* ============================================================ ABOUT PAGE */
.intro__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: 1.05fr .95fr; } }
.intro__text p { color: var(--text-on-paper-mute); max-width: 56ch; }
.intro__text .lead { color: var(--text-on-paper); }

.vm__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 800px) { .vm__grid { grid-template-columns: 1fr 1fr; } }
.vm__item { border-top: 1px solid var(--line-on-paper); padding-top: 1.6rem; }
.vm__text {
    font-size: var(--step-2); font-weight: 500;
    letter-spacing: -.035em; line-height: 1.2;
    max-width: 30ch; margin: 0;
}

.why__list { display: grid; border-top: 1px solid var(--line-on-paper); }
@media (min-width: 820px) { .why__list { grid-template-columns: 1fr 1fr; } }
.why__item {
    display: flex; gap: 1.5rem; align-items: baseline;
    padding: clamp(1rem, 2.2vw, 1.5rem) 0;
    border-bottom: 1px solid var(--line-on-paper);
}
@media (min-width: 820px) {
    .why__item:nth-child(odd) { border-right: 1px solid var(--line-on-paper); padding-right: 2rem; }
    .why__item:nth-child(even) { padding-left: 2rem; }
}
.why__no { font-family: var(--font-mono); font-size: var(--step--2); color: var(--magenta); flex: none; }
.why__text { font-size: var(--step-1); letter-spacing: -.02em; }

.quality__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .quality__grid { grid-template-columns: .85fr 1.15fr; } }
.quality__docs { display: grid; gap: .6rem; margin-top: 2rem; }
.quality__docs a {
    display: inline-flex; align-items: center; gap: .8rem;
    font-weight: 500; border-bottom: 1px solid var(--line-on-paper);
    padding-bottom: .5rem; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.quality__docs a:hover { color: var(--magenta); border-color: currentColor; }
.quality__docs span {
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--magenta); letter-spacing: .08em;
}

/* ========================================================== CLIENTS PAGE */
.client-grid__list {
    display: grid; gap: 1px;
    background: var(--line-on-paper);
    border: 1px solid var(--line-on-paper);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px)  { .client-grid__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .client-grid__list { grid-template-columns: repeat(6, 1fr); } }
.client-tile {
    background: var(--card);
    aspect-ratio: 4 / 3;
    display: grid; place-items: center; gap: .6rem;
    padding: 1.2rem;
    transition: background-color .4s var(--ease);
}
.client-tile:hover { background: var(--paper); }
.client-tile img {
    max-height: 56%; width: auto; object-fit: contain;
    /* real colours, always */
    transition: transform .4s var(--ease);
}
.client-tile:hover img { transform: scale(1.05); }
.client-tile__name {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .04em; text-align: center;
    color: var(--text-on-paper-mute);
}

.sectors__list { display: grid; gap: clamp(1.5rem, 3.5vw, 2.6rem); }
@media (min-width: 700px)  { .sectors__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sectors__list { grid-template-columns: repeat(3, 1fr); } }
.sectors__list li { border-top: 1px solid var(--line-on-paper); padding-top: 1.2rem; }
.sectors__list h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -.03em; margin-bottom: .5rem; }
.sectors__list p { margin: 0; font-size: var(--step--1); color: var(--text-on-paper-mute); }

/* ================================================================== CTA */
.cta {
    background: var(--paper); color: var(--text-on-paper);
    padding-block: clamp(5rem, 12vw, 10rem);
    position: relative; overflow: hidden;
}
.cta .wrap { position: relative; }
.cta__title {
    font-size: var(--step-4); font-weight: 600;
    letter-spacing: -.05em; line-height: .96;
    max-width: 16ch; margin-bottom: 1.5rem;
}
.cta__lead {
    max-width: 48ch; font-size: var(--step-1); line-height: 1.45;
    color: var(--text-on-paper-mute); margin-bottom: 2.5rem;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.cta__meta {
    display: grid; gap: .7rem;
    border-top: 1px solid var(--line-on-paper); padding-top: 1.5rem;
}
@media (min-width: 700px) { .cta__meta { grid-template-columns: repeat(2, minmax(0, 22rem)); } }
.cta__meta li { display: flex; gap: 1rem; align-items: baseline; }
.cta__meta span {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-paper-mute);
}
.cta__meta a { font-size: var(--step--1); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.cta__meta a:hover { color: var(--magenta); border-color: currentColor; }

/* ============================================================== CONTACT */
.contact__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 950px) { .contact__grid { grid-template-columns: 1.35fr .65fr; } }

.contact__details { display: grid; gap: 1.8rem; }
.contact__block { border-top: 1px solid var(--line-on-paper); padding-top: 1.1rem; }
.contact__block .eyebrow { margin-bottom: .6rem; }
.contact__block p { margin: 0 0 .25rem; font-size: var(--step--1); }
.contact__block address { display: grid; gap: .2rem; font-size: var(--step--1); }
.contact__block a { border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.contact__block a:hover { color: var(--magenta); border-color: currentColor; }

.notice {
    padding: 1rem 1.2rem; margin-bottom: 1.5rem;
    font-size: var(--step--1);
    border-left: 3px solid var(--magenta);
    background: var(--card);
}
.notice p { margin: 0; }
.notice--bad { border-color: #C0392B; }

.map__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 280px;
    background: var(--paper-3);
}
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ================================================================= FORM */
.qform { display: grid; gap: 1.1rem; }
.qform__row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .qform__row { grid-template-columns: 1fr 1fr; } }
.qform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { position: relative; }
.field input, .field textarea {
    width: 100%;
    padding: 1.5rem 0 .6rem;
    font: inherit; font-size: var(--step-0);
    color: inherit;
    background: transparent;
    border: 0; border-bottom: 1px solid var(--line-on-paper);
    border-radius: 0;
    transition: border-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field label {
    position: absolute; left: 0; top: 1.35rem;
    font-size: var(--step-0);
    color: var(--text-on-paper-mute);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .32s var(--ease), color .32s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--magenta); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-1.35rem) scale(.72);
    color: var(--magenta);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: #C0392B; }
.field__error { margin: .4rem 0 0; font-size: var(--step--2); color: #C0392B; }

.qform__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
    margin-top: .6rem;
}
.qform__note {
    margin: 0; font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .06em; color: var(--text-on-paper-mute);
}
.qform__status { margin: 0; font-size: var(--step--1); min-height: 1.2em; }
.qform__status.is-ok  { color: var(--magenta); }
.qform__status.is-bad { color: #C0392B; }
.qform.is-sending { opacity: .55; pointer-events: none; }

/* ============================================================== DRAWER */
.drawer { position: fixed; inset: 0; z-index: 800; visibility: hidden; }
.drawer.is-open { visibility: visible; }

.drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(51, 51, 51, .55);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .5s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(620px, 100%);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--paper);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .62s var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__close {
    position: absolute; top: 1.4rem; right: 1.4rem;
    width: 42px; height: 42px;
    border: 1px solid var(--line-on-paper);
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.drawer__close:hover { border-color: var(--magenta); transform: rotate(90deg); }
.drawer__close span {
    position: absolute; inset: 50% 25% auto; height: 1.5px;
    background: currentColor;
}
.drawer__close span:nth-child(1) { transform: rotate(45deg); }
.drawer__close span:nth-child(2) { transform: rotate(-45deg); }

.drawer__title {
    font-size: var(--step-2); font-weight: 600;
    letter-spacing: -.04em; line-height: 1.05;
    margin-bottom: 1rem; max-width: 18ch;
}
.drawer__lead {
    font-size: var(--step--1); color: var(--text-on-paper-mute);
    max-width: 44ch; margin-bottom: 2rem;
}
.drawer__meta {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line-on-paper);
    display: grid; gap: .5rem;
    font-size: var(--step--1);
}
.drawer__meta span {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-on-paper-mute); margin-right: .8rem;
}
.drawer__meta a:hover { color: var(--magenta); }

/* =============================================================== FOOTER */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; }

.site-footer__top {
    display: grid; gap: 2rem;
    padding-bottom: clamp(3rem, 7vw, 5rem);
    border-bottom: 1px solid var(--line-on-ink);
}
@media (min-width: 900px) {
    .site-footer__top { grid-template-columns: 1fr auto; align-items: end; }
}
.site-footer__statement {
    font-size: var(--step-3); font-weight: 500;
    letter-spacing: -.045em; line-height: 1.05;
    max-width: 20ch; margin: 0;
    text-wrap: balance;   /* "Printing and finishing / done properly", not "…done / properly" */
}
.site-footer__cta {
    display: inline-flex; align-items: center; gap: 1rem;
    padding: 1.1rem 2rem;
    border: 1px solid var(--line-on-ink);
    font-weight: 600;
    transition: background-color .4s var(--ease), color .4s var(--ease),
                border-color .4s var(--ease), gap .3s var(--ease);
}
.site-footer__cta:hover {
    background: var(--magenta); border-color: var(--magenta); color: #fff; gap: 1.6rem;
}

.site-footer__grid {
    display: grid; gap: clamp(2rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .site-footer__grid { grid-template-columns: 1.5fr .8fr 1fr 1fr; } }

.site-footer__blurb { font-size: var(--step--1); color: var(--text-on-ink-mute); max-width: 40ch; }

.site-footer__heading {
    font-family: var(--font-mono); font-size: var(--step--2);
    font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    /* White text with a magenta marker: magenta lettering on charcoal is only 3:1, too faint at this size. */
    color: var(--text-on-ink); margin-bottom: 1.1rem;
}
.site-footer__heading::before {
    content: ''; display: inline-block; vertical-align: middle;
    width: 16px; height: 2px; margin-right: .7rem; background: var(--magenta);
}
.site-footer__heading--gap { margin-top: 1.8rem; }

.site-footer__links { display: grid; gap: .55rem; font-size: var(--step--1); }
.site-footer__links a {
    color: var(--text-on-ink-mute);
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.site-footer__links a:hover { color: var(--text-on-ink); border-color: var(--magenta); }

.site-footer__address { display: grid; gap: .3rem; font-size: var(--step--1); color: var(--text-on-ink-mute); }

.site-footer__bottom {
    display: grid; gap: 1rem;
    padding-top: 2rem; border-top: 1px solid var(--line-on-ink);
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .04em; color: var(--text-on-ink-mute);
}
@media (min-width: 850px) {
    .site-footer__bottom { grid-template-columns: 1fr auto auto; align-items: center; gap: 2.5rem; }
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit a {
    color: inherit;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.site-footer__credit a:hover { color: var(--magenta); border-color: currentColor; }
.site-footer__top-link { display: inline-flex; align-items: center; gap: .5rem; }
.site-footer__top-link:hover { color: var(--magenta); }
.site-footer__top-link svg { transition: transform .3s var(--ease); }
.site-footer__top-link:hover svg { transform: translateY(-3px); }

/* ================================================== REVEAL ANIMATIONS */
/* Line-by-line heading reveal. JS wraps each line in .line > .line__inner. */
/* The mask is one tight line high, so it needs a little room below to keep the tails of
   g, j, p, q and y; the negative margin gives the room back so spacing is unchanged. */
.line { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.line__inner {
    display: block;
    transform: translateY(130%);
    transition: transform .95s var(--ease);
    transition-delay: calc(var(--line-i, 0) * 70ms);
}
.is-revealed .line__inner { transform: translateY(0); }

/* Character reveal for the hero wordmark */
.char {
    display: inline-block;
    transform: translateY(0.9em) rotate(4deg);
    opacity: 0;
    transition: transform 1s var(--ease), opacity .7s var(--ease);
    transition-delay: calc(var(--char-i, 0) * 42ms);
}
.is-revealed .char { transform: none; opacity: 1; }

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .9s var(--ease);
}
[data-reveal][data-delay="1"] { transition-delay: .10s; }
[data-reveal][data-delay="2"] { transition-delay: .20s; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

/* Fade the outgoing page during a transition */
main { transition: opacity .3s linear; }

/* ======================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .line__inner, .char, [data-reveal] { opacity: 1 !important; transform: none !important; }
    .cursor { display: none; }
    .marquee__track, .ticker__track { transform: none !important; }
}

/* Fallback when JS is unavailable — nothing stays hidden. */
.no-js .loader,
.no-js .cursor { display: none; }
.no-js [data-reveal],
.no-js .line__inner,
.no-js .char { opacity: 1; transform: none; }

/* ============================================================== ERRORS */
.error-page {
    min-height: 100svh;
    display: grid; place-content: center; align-items: center;
    text-align: center;
    padding: var(--gutter);
    background: var(--paper); color: var(--text-on-paper);
}
.error-page__code {
    font-size: var(--step-5); font-weight: 700;
    letter-spacing: -.06em; line-height: .82;
    color: var(--magenta); margin-bottom: 1rem;
}
.error-page__title { font-size: var(--step-2); margin-bottom: 1rem; }
.error-page__text { color: var(--text-on-paper-mute); max-width: 46ch; margin: 0 auto 2rem; }

/* =====================================================================
   Products · Awards · Q&A · new form controls
   Appended for the September rebuild.
   ===================================================================== */

/* ------------------------------------------------------------- Q&A index */
.qa-index__list { display: grid; border-top: 1px solid var(--line-on-paper); }
@media (min-width: 800px) {
    .qa-index__list { grid-template-columns: 1fr 1fr; }
    .qa-index__list li:nth-child(odd) {
        border-right: 1px solid var(--line-on-paper);
    }
}
.qa-index__list li { border-bottom: 1px solid var(--line-on-paper); }
.qa-index__list a {
    display: flex; align-items: center; gap: 1.2rem;
    padding: clamp(.9rem, 2vw, 1.3rem) clamp(0rem, 2vw, 1.5rem) clamp(.9rem, 2vw, 1.3rem) 0;
    transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.qa-index__list a:hover { color: var(--magenta); padding-left: .8rem; }
.qa-index__no {
    font-family: var(--font-mono); font-size: var(--step--2); color: var(--magenta);
}
.qa-index__title {
    font-size: var(--step-1); font-weight: 500; letter-spacing: -.03em; margin-right: auto;
}
.qa-index__count {
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--text-on-paper-mute);
    border: 1px solid var(--line-on-paper);
    padding: .15rem .5rem;
}

/* ------------------------------------------------------------------ Q&A */
/* h3 wrapper around the accordion trigger — heading structure matters for
   SEO, so the button is nested inside a real heading rather than replacing it. */
.faq__heading { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.qa-block .faq__q { font-size: var(--step-1); font-weight: 500; letter-spacing: -.025em; }
.qa-still .cta__actions { margin-top: 2rem; margin-bottom: 0; }
.qa-still .lead { color: var(--text-on-paper-mute); }

/* ------------------------------------------------- form: static labels */
/* Used where a placeholder must stay visible (the spec prompt) or where a
   floating label would collide with a control (the number stepper). */
/* Higher specificity than `.field label` (0,1,1), which sets the floating
   position — these labels sit above the control in normal flow instead. */
.field .field__static-label,
label.field__static-label {
    position: static;
    transform: none;
    pointer-events: auto;
    display: block;
    margin-bottom: .55rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-on-paper-mute);
}
.field .field__static-label span { color: var(--magenta); }

.field--hint textarea {
    padding-top: .7rem;
    border: 1px solid var(--line-on-paper);
    padding-inline: .9rem;
    min-height: 9rem;
}
.field--hint textarea:focus { border-color: var(--magenta); }
.field--hint textarea::placeholder {
    color: var(--text-on-paper-mute);
    opacity: .55;
    line-height: 1.7;
}
.field--hint textarea:focus::placeholder { opacity: .35; }

/* ------------------------------------------------------ number stepper */
.field--number { max-width: 16rem; }
.stepper {
    display: flex; align-items: stretch;
    border: 1px solid var(--line-on-paper);
    background: var(--card);
    transition: border-color .35s var(--ease);
}
.stepper:focus-within { border-color: var(--magenta); }

.stepper__btn {
    display: grid; place-items: center;
    width: 3rem; flex: none;
    color: var(--text-on-paper-mute);
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.stepper__btn:hover { background: var(--magenta); color: #fff; }
.stepper__btn:first-child { border-right: 1px solid var(--line-on-paper); }
.stepper__btn:last-child  { border-left: 1px solid var(--line-on-paper); }

.stepper__input {
    flex: 1; min-width: 0;
    padding: .9rem .6rem;
    font: inherit;
    font-size: var(--step-0);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    -moz-appearance: textfield;
}
.stepper__input:focus { outline: none; }
/* Hide the native spin buttons — we supply our own, which are far easier
   to hit on touch and match the rest of the UI. */
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Dark-section variants */

/* =====================================================================
   Video · Certifications · Awards (October update)
   ===================================================================== */

/* -------------------------------------------------------- video player */
.vid { position: relative; }
.vid__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink);
}
.vid__el {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    background: var(--ink);
}

.vid__controls {
    position: absolute; right: .8rem; bottom: .8rem; z-index: 2;
    display: flex; gap: .5rem;
}
.vid__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    height: 2.6rem; padding: 0 .95rem;
    color: #fff;
    background: rgba(51, 51, 51, .74);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em; text-transform: uppercase;
    transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.vid__btn:hover { background: var(--magenta); border-color: var(--magenta); }
.vid__btn:active { transform: scale(.97); }
.vid__btn--play { width: 2.6rem; padding: 0; }
.vid__ico { width: 18px; height: 18px; flex: none; }

/* Icon states, driven by classes the script toggles on .vid */
.vid__ico--on, .vid__ico--play { display: none; }
.vid.is-unmuted .vid__ico--on { display: block; }
.vid.is-unmuted .vid__ico--off { display: none; }
.vid.is-paused .vid__ico--play { display: block; }
.vid.is-paused .vid__ico--pause { display: none; }

/* Unmuted = audible: give the button a magenta edge so it reads as "live". */
.vid.is-unmuted .vid__btn--sound { border-color: var(--magenta); }

@media (max-width: 520px) {
    .vid__controls { right: .5rem; bottom: .5rem; }
    .vid__btn { height: 2.3rem; padding: 0 .7rem; }
    .vid__btn--play { width: 2.3rem; padding: 0; }
}

/* In the capability accordion and on the services page the video replaces
   the old 4:3 still, so it takes the same slot at 16:9. */
.cap__media { overflow: hidden; }
.cap__media .vid { width: 100%; }
.svc__figure .vid { width: 100%; }

/* ------------------------------------------------------------- awards */
/* The page is the video and nothing else: it sits directly under the title,
   centred, at a mid size. */
.awards-stage { padding-top: 0; }
.awards-stage .vid {
    width: min(100%, 880px);
    margin-inline: auto;
}
.awards-stage .vid__frame {
    box-shadow: 0 28px 60px -30px rgba(51, 51, 51, .55);
}

/* ------------------------------------------------------ certifications */
.cert { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .cert { grid-template-columns: .9fr 1.1fr; } }

.cert__figure {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line-on-paper);
    padding: clamp(1.2rem, 3vw, 2.2rem);
    display: grid; place-items: center;
}
.cert__figure img {
    width: 100%; max-width: 440px; height: auto;
    object-fit: contain;
}
.cert__figure figcaption {
    margin: 1rem 0 0; text-align: center;
}
.cert__eyebrow { margin-bottom: .9rem; }

.cert__title {
    font-size: var(--step-4); font-weight: 600;
    letter-spacing: -.045em; line-height: .96;
    margin-bottom: .5rem;
}
.cert__subtitle {
    font-family: var(--font-accent); font-style: italic;
    font-size: var(--step-2); color: var(--magenta);
    margin: 0 0 1.4rem;
}
.cert__summary { max-width: 46ch; margin-bottom: 2rem; }

.cert__list { margin: 0; border-top: 1px solid var(--line-on-paper); }
.cert__row {
    display: grid; gap: .2rem 1.5rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line-on-paper);
}
@media (min-width: 600px) { .cert__row { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.cert__row dt {
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
}
.cert__row dd { margin: 0; font-size: var(--step--1); font-weight: 500; }

.cert__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ------------------------------------------------------- quality policy */
.policy__lead { color: var(--text-on-paper-mute); max-width: 52ch; margin-bottom: 1.2rem; }
.policy__lead-in { margin: 0 0 1.2rem; font-weight: 600; }
.policy__meta {
    margin-top: 1rem;
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
}
.policy__list { counter-reset: pol; border-top: 1px solid var(--line-on-paper); }
.policy__list li {
    counter-increment: pol;
    display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line-on-paper);
    font-size: var(--step-0); line-height: 1.5;
}
.policy__list li::before {
    content: counter(pol, decimal-leading-zero);
    font-family: var(--font-mono); font-size: var(--step--2);
    color: var(--magenta); padding-top: .25rem;
}
.policy__closing { margin-top: 1.4rem; font-size: var(--step--1); color: var(--text-on-paper-mute); max-width: 60ch; }
.policy__actions { margin-top: 1.8rem; }

/* A heading followed directly by a lead paragraph needs air between them. */
.h2 + .lead,
.cert__title + .cert__subtitle { margin-top: clamp(1rem, 2vw, 1.6rem); }
.cert__title + .cert__subtitle { margin-top: .4rem; }

/* Mobile menu: eight items must fit on a phone without riding up into the
   logo row, and must scroll rather than clip on very short screens. */
.mobile-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-height: 1150px) {
    .mobile-nav { justify-content: flex-start; padding-top: calc(var(--header-h) + .75rem); }
    .mobile-nav__link { padding: .55rem 0; }
    .mobile-nav__text { font-size: var(--step-2); }
    .mobile-nav__foot { margin-top: 1.5rem; }
}


/* ------------------------------------------- products: back to all products */
/* The button sits under the video, in the video's own column, right-aligned to it. */
.svc__figure { display: flex; flex-direction: column; overflow: visible; }
.svc__figure .back-top { align-self: flex-end; margin-top: 1rem; }
.back-top {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .6rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
    border: 1px solid var(--line-on-paper);
    transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.back-top svg { transition: transform .35s var(--ease); }
.back-top:hover, .back-top:focus-visible {
    color: #fff; background: var(--magenta); border-color: var(--magenta);
}
.back-top:hover svg, .back-top:focus-visible svg { transform: translateY(-3px); }

/* home accordion: link through to the full entry on the Products page */
.cap__more { margin-top: 1.6rem; font-size: var(--step--2); }

/* Phones: ten long category names must still fit on one screen, so the
   "back to all products" buttons can show the whole index at once. */
@media (max-width: 600px) {
    .svc-index__list a { padding: .62rem 0; gap: .9rem; }
    .svc-index__title { font-size: var(--step-0); letter-spacing: -.02em; line-height: 1.3; }
    .svc-index .eyebrow { margin-bottom: 1rem; }
}


/* ------------------------------------------- contact: facilities, hours, maps */
.contact__facility { margin-bottom: .9rem; }
.contact__facility:last-child { margin-bottom: 0; }
.contact__facility strong {
    font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-paper-mute);
}
.contact__hours { margin: 0; display: grid; gap: .5rem; font-size: var(--step--1); }
.contact__hours > div { display: grid; gap: .1rem; }
.contact__hours dt { font-weight: 600; }
.contact__hours dd { margin: 0; color: var(--text-on-paper-mute); }

.maps { background: var(--paper); }
.maps__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .maps__grid { grid-template-columns: 1fr 1fr; } }
.map-card { display: grid; gap: 1rem; align-content: start; }
.map-card__name { font-size: var(--step-2); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.map-card__sub {
    margin: .35rem 0 .15rem;
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
}
.map-card__address { font-size: var(--step--1); color: var(--text-on-paper-mute); }
.map-card__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; font-size: var(--step--1); font-weight: 500; }
.map-card__links a { border-bottom: 1px solid var(--line-on-paper); padding-bottom: .15rem; transition: color .3s, border-color .3s; }
.map-card__links a:hover { color: var(--magenta); border-color: currentColor; }


/* ---------------------------------------------------------------- footer (Oct) */
/* The logo is the same white square tile as in the header, larger. */
.site-footer__logo { display: block; width: clamp(132px, 12vw, 156px); height: clamp(132px, 12vw, 156px); object-fit: contain; margin-bottom: 1.4rem; }
.site-footer__facility { margin-bottom: .9rem; }
.site-footer__facility:last-child { margin-bottom: 0; }
.site-footer__facility strong {
    font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-ink);
}
.site-footer__hours { margin: 0; display: grid; gap: .55rem; font-size: var(--step--1); }
.site-footer__hours > div { display: grid; gap: .1rem; }
.site-footer__hours dt { color: var(--text-on-ink); }
.site-footer__hours dd { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-on-ink-mute); }
.site-footer__label {
    display: block; margin-bottom: .15rem;
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-ink-mute);
}

@media (max-width: 640px) {
    :root { --header-h: 88px; }
    }


/* ---------------------------------------------------------------- about (Oct) */
.page-hero__title--long { font-size: var(--step-3); max-width: 26ch; line-height: 1; }
.page-hero__lead--tagline { font-weight: 600; letter-spacing: -.02em; color: var(--text-on-paper); }
.intro__text p { margin-bottom: 1.15em; }
.intro__closing { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-on-paper); }
.intro__closing p { font-size: var(--step-1); line-height: 1.35; letter-spacing: -.02em; color: var(--text-on-paper); max-width: 40ch; }
.intro__closing p:last-child { margin-bottom: 0; color: var(--magenta); }
@media (min-width: 900px) {
    /* the text is long, so the picture stays in view beside it */
    .intro__figure { position: sticky; top: calc(var(--header-h) + 2rem); }
}


/* ---------------------------------------------- certifications: the documents */
.cert__doc { display: block; cursor: zoom-in; }
.cert__doc img { box-shadow: 0 10px 34px -16px rgba(51, 51, 51, .45); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.cert__doc:hover img { transform: translateY(-3px); box-shadow: 0 18px 44px -18px rgba(51, 51, 51, .5); }
.cert__figure img { max-width: 100%; }
.policy__body .cert__subtitle { font-size: var(--step-1); }
.quality__figure { max-width: 440px; margin-inline: auto; }


/* ------------------------------------------- one grey background throughout */
/* With no alternating colours, a hairline marks where one section ends and the next begins. */
.section + .section, .section + .cta, .clients + .section, .section + .clients, .cta + .section { border-top: 1px solid var(--line-on-paper); }
.svc + .svc { border-top: 0; }                    /* the product cards flow as one field */
.svc-index + .svc, .svc--last + .section { border-top: 1px solid var(--line-on-paper); }


/* ================================================================ PHOTOGRAPHS */
/* Captioned photographs (partials/photo.blade.php): the team picture, the "Inside PrintMASS" gallery and the home-page strip. */
.photo { margin: 0; }
.photo__frame { overflow: hidden; background: var(--paper-3); }          /* a quiet tint while the picture loads */
.photo__frame img { display: block; width: 100%; height: auto; transition: transform 1.1s var(--ease); }
.photo:hover .photo__frame img { transform: scale(1.04); }

/* Tiles are a fixed shape so the rows line up. The pictures are cropped to fit, never stretched. */
.photo--tile .photo__frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo--half .photo__frame img { aspect-ratio: 3 / 2; }
.photo--band .photo__frame img { aspect-ratio: auto; }                    /* the team photo keeps its own wide shape */

/* Where each picture is anchored when a tile crops it, so the subject always stays in view. */
.photo--offset-printing .photo__frame img      { object-position: 28% 50%; }
.photo--prepress-design .photo__frame img      { object-position: 40% 50%; }
.photo--press-console .photo__frame img        { object-position: 66% 40%; }
.photo--finishing-diecutting .photo__frame img { object-position: 50% 12%; }

.inside__grid {
    display: grid; gap: clamp(1rem, 2vw, 1.6rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.inside__grid > .photo { grid-column: 1 / -1; }                            /* phones: one picture per row */
.inside__sub {
    margin: clamp(2.5rem, 6vw, 4.5rem) 0 1.2rem;
    font-family: var(--font-mono); font-size: var(--step--2);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-on-paper-mute);
}

@media (min-width: 561px) and (max-width: 900px) {                         /* tablets: two across */
    .inside__grid > .photo { grid-column: span 6; }
    .inside__grid > .photo:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd one out runs the full width */
    .photo--half .photo__frame img { aspect-ratio: 4 / 3; }                      /* every tile in a row is the same height... */
    .inside__grid > .photo:last-child:nth-child(odd) .photo__frame img { aspect-ratio: 3 / 2; }   /* ...except a full-width one, which can be wider */
}
@media (min-width: 901px) {                                                /* desktop */
    .inside__grid > .photo--third { grid-column: span 4; }
    .inside__grid > .photo--half  { grid-column: span 6; }
    .inside__grid--strip > .photo { grid-column: span 4; }
}


/* ---------------------------------------------- hero on phones and portrait tablets */
/* There is no room beside the text, so the photograph is shown whole, as a banner under the buttons. It fades into
   the page at the top, so there is no hard edge, and nothing is cropped or sits behind the words. */
@media (max-width: 900px) {
    .hero__inner { order: 1; }
    .hero__media {
        order: 2; position: relative; inset: auto;
        margin-top: clamp(1.8rem, 6vw, 3rem);
        transform: none !important;            /* the scroll drift is for the full-screen version only */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    }
    .hero__media img { height: auto; aspect-ratio: 1600 / 849; }
    .hero__scrim { display: none; }
    .hero__foot { order: 3; }
}


/* ================================================================ EVENTS + AWARDS */
.event__head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.event__title {
    font-size: var(--step-3); font-weight: 600;
    letter-spacing: -.04em; line-height: 1; max-width: 22ch;
}
.event__tagline {
    margin: 0; max-width: 46ch;
    font-size: var(--step-1); line-height: 1.4; letter-spacing: -.015em;
    color: var(--text-on-paper-mute);
}

/* Photo gallery: rows that fill the full width. Each picture keeps its own shape (nothing is cropped), whatever the mix of
   landscape and portrait: a picture's width follows its shape (--ratio, set on each item), so every picture in a row is the same
   height. --row-h is the target row height and --k a small per-gallery tuning from the config, so the last row looks complete.
   The empty ::after stops the last row from stretching. */
.gallery { --g: clamp(.6rem, 1.4vw, 1.1rem); --row-h: 95px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--g); }
@media (min-width: 561px)  { .gallery { --row-h: 210px; } }
@media (min-width: 1100px) { .gallery { --row-h: 280px; } }
.gallery::after { content: ''; flex-grow: 100000; }
.gallery__item {
    display: block; position: relative; overflow: hidden; min-width: 0;
    aspect-ratio: var(--ratio);
    flex: calc(var(--ratio) * 100) 1 calc(var(--ratio) * var(--row-h) * var(--k, 1));
    background: var(--paper-3);                        /* a quiet tint while the picture loads */
}
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.gallery__item:hover img, a.gallery__item:focus-visible img { transform: scale(1.04); }
.gallery__item--video { background: var(--ink); }
.gallery__item--video .vid { width: 100%; height: 100%; margin: 0; }
.gallery__item--video .vid__frame { height: 100%; aspect-ratio: auto; box-shadow: none; }
.vid--43 .vid__frame { aspect-ratio: 4 / 3; }

/* Phones: two columns of square thumbnails (the full picture is one tap away in the viewer); the video runs full width. */
@media (max-width: 560px) {
    .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery::after { display: none; }
    .gallery__item { flex: none; aspect-ratio: 1 / 1; }
    .gallery__item img { object-position: 50% 35%; }
    .gallery__item--video { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

/* A small "enlarge" mark on pictures that open in the viewer. */
a.gallery__item::after, .award__link::after {
    content: ''; position: absolute; right: .7rem; bottom: .7rem;
    width: 34px; height: 34px; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
    background:
        linear-gradient(var(--white), var(--white)) center / 14px 1.5px no-repeat,
        linear-gradient(var(--white), var(--white)) center / 1.5px 14px no-repeat,
        var(--ink);
}
a.gallery__item:hover::after, a.gallery__item:focus-visible::after,
.award__link:hover::after, .award__link:focus-visible::after { opacity: .92; }
a.gallery__item:focus-visible, .award__link:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* Awards: certificates in a grid, each with its title. Each picture keeps its own shape. */
.awards__grid {
    display: grid; align-items: start;
    gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.4vw, 2rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .awards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.award { margin: 0; }
.award__link {
    display: block; position: relative; overflow: hidden;
    background: var(--card); border: 1px solid var(--line-on-paper);
    box-shadow: 0 18px 40px -28px rgba(51, 51, 51, .5);
}
.award__link img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); }
.award__link:hover img, .award__link:focus-visible img { transform: scale(1.03); }
.award__title {                                           /* titles read as sentences, so not the small capitals of other captions */
    margin: .9rem 0 0; text-align: left; text-transform: none; letter-spacing: -.01em;
    font-family: inherit; font-size: var(--step-0); line-height: 1.35; color: var(--text-on-paper);
}
.award__link--extra { margin-top: .6rem; }

/* ------------------------------------------------------------ photo viewer (lightbox) */
html.has-lightbox { overflow: hidden; }
.lightbox {
    padding: 0; border: 0; max-width: none; max-height: none; width: 100%; height: 100%;
    background: rgba(51, 51, 51, .97); color: var(--text-on-ink);
}
.lightbox::backdrop { background: rgba(51, 51, 51, .97); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__stage {
    margin: 0; padding: 4.5rem 5.5rem 3.5rem; max-width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.lightbox__img {
    display: block; width: auto; height: auto; object-fit: contain;
    max-width: min(100%, 1600px); max-height: calc(100dvh - 10rem);
    transition: opacity .35s var(--ease);
}
.lightbox__img.is-loading { opacity: 0; }
.lightbox__cap {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: 0; text-align: center;
    font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-on-ink-mute);
}
.lightbox__btn {
    position: absolute; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; cursor: pointer;
    background: transparent; color: var(--text-on-ink); border: 1px solid var(--line-on-ink);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--magenta); border-color: var(--magenta); outline: none; }
.lightbox__btn[hidden] { display: none; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
    .lightbox__stage { padding: 4.5rem 0 6rem; }
    .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery__item img, .award__link img, .lightbox__img { transition: none; }
}