/* ============================================================
   Baldwin Graphics — press sheet
   Ground: uncoated stock. Ink: black. Spot: the blue from the logo.
   ============================================================ */

:root {
  /* Ground and surfaces. The page is warm paper; cards are pure white on top
     of it, so a card lifts by contrast instead of needing a border drawn
     round it. That single relationship is why a bordered-box page reads as
     built by a machine and this one does not. */
  --paper:      #faf8f5;   /* the page itself, warm off-white   */
  --band:       #f1ede8;   /* alternating section, one step down */
  --card:       #ffffff;   /* anything that should lift          */

  /* Ink. Never pure black — a deep blue-black sits better on warm paper and
     keeps a relationship with the logo. */
  --ink:        #10222e;   /* headings and figures               */
  --body:       #485865;   /* body copy                          */
  --muted:      #66737e;   /* captions, meta                     */

  /* Lines are the ink at low alpha, so every rule belongs to the same family
     as the type rather than being an unrelated grey. */
  --line:       #10222e1f;
  --line-soft:  #10222e12;

  --accent:      #00baf2;  /* the blue from the logo             */
  --accent-deep: #007699;  /* the same blue, legible on paper    */
  --red:         #c2321e;

  /* legacy aliases, kept so existing rules keep working */
  --stock:      var(--paper);
  --stock-deep: var(--band);
  --ink-soft:   var(--body);
  --rule:       var(--line);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body-face: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Softened, not squared. Hard corners everywhere was part of the problem. */
  --r:    12px;
  --r-sm: 8px;

  --lift:   0 1px 2px #10222e0a, 0 8px 24px -8px #10222e1a;
  --lift-2: 0 2px 4px #10222e0d, 0 18px 40px -12px #10222e26;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --sheet:  82rem;
  --step:   clamp(4.5rem, 9vw, 9rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
}

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

a { color: var(--ink); text-decoration-color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--stock);
  padding: .75rem 1.25rem; font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: 0; }

/* ── sheet + crop marks ─────────────────────────────────── */

.sheet {
  position: relative;
  max-width: var(--sheet);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.crop { display: none; }
.crop--legacy { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.crop--tl { top: 14px;    left: 6px;  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.crop--tr { top: 14px;    right: 6px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.crop--bl { bottom: 14px; left: 6px;  border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.crop--br { bottom: 14px; right: 6px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }

@media (max-width: 40rem) { .crop { display: none; } }

/* ── shared type ────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1rem;
}

.h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
  line-height: .98;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.lede {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: 38ch;
}

.band__note { max-width: 52ch; margin: 0; }

/* ── bands + perforation ────────────────────────────────── */

.band { padding-block: var(--step); }
.band__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Sections alternate ground instead of being separated by identical rules.
   Rhythm comes from the surface changing, not from a line drawn every time. */
.band--band {
  background: var(--band);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

/* ── work samples ───────────────────────────────────────── */

.band--samples {
  background: var(--band);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.band__sub {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}

/* These are photographs of stacks of work, shot at whatever shape the stack
   happened to be. auto-fit rather than a fixed column count: one sheet gets
   a comfortable single column, three sit in a row, and nothing is cropped to
   a common aspect on the way. */
.samples {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  /* stretch, so every figure is the height of the tallest in the row and the
     captions land on one line */
  align-items: stretch;
}

.samples__item { display: flex; }

.samples__figure { margin: 0; height: 100%; display: flex; flex-direction: column; }

/* Each sheet was shot at a different shape, so a row of them left the
   captions at three different heights and read as an accident. The mount is
   squared off and the photograph sits inside it — contain, never cover, so
   nothing gets cropped to make the grid tidy. A lone sample keeps its own
   proportions; there is nothing for it to line up with. */
.samples__item:not(:only-child) .samples__img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* White mount, soft lift — a print sample sitting on the page the way it
   sits on the counter. The card is pure white against the warm band so the
   paper in the photograph reads as paper. */
.samples__img {
  display: block; width: 100%; height: auto;
  background: var(--card);
  border-radius: var(--r-sm);
  padding: clamp(.6rem, 1.5vw, 1rem);
  box-shadow: var(--lift);
}

.samples__caption {
  margin-top: auto;
  padding-top: .85rem;
  color: var(--body);
  font-size: .92rem; line-height: 1.55;
}

/* A single sheet would otherwise stretch the full width of the page and lose
   the shape it was shot in. */
.samples:has(.samples__item:only-child) {
  grid-template-columns: minmax(0, 34rem);
  justify-content: center;
}
.samples:has(.samples__item:only-child) .samples__caption { text-align: center; }

/* ── masthead ───────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1.1rem;
  background: color-mix(in srgb, var(--stock) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.masthead[data-scrolled] { border-bottom-color: var(--rule); box-shadow: 0 1px 14px rgba(17,17,17,.05); }

.masthead__brand { display: block; flex: 0 1 auto; min-width: 0; }
/* The lockup is 2.1:1, not the old 11.6:1 wordmark, so it is sized by
   height — pinning the width would set the masthead's height by accident. */
.masthead__brand img { height: clamp(60px, 8.4vw, 88px); width: auto; }

.masthead__nav { display: flex; gap: 1.5rem; margin-left: auto; }
.masthead__nav a {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.masthead__nav-call { display: none; }

/* ── menu button ────────────────────────────────────────── */

.menu-toggle {
  display: none;
  margin-left: auto;
  align-items: center; gap: .55rem;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  padding: .5rem .8rem; cursor: pointer;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.menu-toggle:hover { background: var(--ink); color: var(--accent); }

.menu-toggle__bars { display: grid; gap: 3px; width: 1rem; }
.menu-toggle__bars i { display: block; height: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }

/* three rules become an X, which is the only motion this button needs */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .menu-toggle__bars i { transition: none; } }

/* ── mobile: nav becomes an inked panel under the masthead ── */

@media (max-width: 60rem) {
  .menu-toggle { display: inline-flex; }

  /* Shown by toggling display rather than animating a height. The page
     does not need a second animated element competing with the page. */
  .masthead__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    gap: 0; margin: 0;
    background: var(--paper);
    border-top: 3px solid var(--accent);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 24px rgba(20, 18, 14, .16);
  }
  .masthead__nav[data-open] { display: grid; }

  /* The panel hangs off a sticky header, so on a short screen its lower
     items would be unreachable. Cap it and let it scroll on its own. */
  .masthead__nav {
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .masthead__nav a {
    color: var(--ink);
    font-size: .9rem;
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--rule);
    border-top: 0;
  }
  .masthead__nav a:hover,
  .masthead__nav a:focus-visible { background: var(--stock-deep); color: var(--ink); border-bottom-color: var(--rule); }

  .masthead__nav-call {
    display: block;
    color: var(--accent-deep) !important;
    border-bottom: 0 !important;
  }

}

/* ── buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; text-decoration: none;
  padding: .7rem 1.15rem; border: 2px solid var(--ink);
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--solid   { background: var(--ink); color: #fff; }
.btn--solid:hover  { background: #000; color: var(--accent); }

.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--accent); color: var(--ink); }

.btn--call { margin-left: 0; background: var(--accent); color: var(--ink); white-space: nowrap; }
.btn--call:hover { background: var(--ink); color: var(--accent); }
.btn__label { text-transform: uppercase; opacity: .6; }

@media (max-width: 30rem) { .masthead .btn--call { display: none; } }

/* ── hero ───────────────────────────────────────────────── */

.hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 52rem) { .hero__body { grid-template-columns: 1fr; gap: 2.25rem; } }

.hero__pitch { padding-top: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.ticker {
  list-style: none; display: grid; gap: .8rem;
  margin: 0; padding: 1.75rem 0 0;
  font-family: var(--mono); font-size: .74rem; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.ticker li { position: relative; padding-left: 1.35rem; }
.ticker li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: .55rem; height: .55rem; background: var(--accent);
  border: 1px solid var(--accent-deep);
}

/* ── proof / slideshow ──────────────────────────────────── */

.proof { max-width: 60rem; }

.proof__frame {
  position: relative;
  background: #fff;
  padding: clamp(.6rem, 1.6vw, 1.1rem);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}

.proof__reel {
  list-style: none; margin: 0; padding: 0;
  position: relative; aspect-ratio: 850 / 364; overflow: hidden;
}
.proof__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.proof__slide.is-active { opacity: 1; visibility: visible; }
/* The slideshow keeps advancing under reduced motion; it is the cross-fade
   that goes, not the content. A hard cut shows the same four samples. */
@media (prefers-reduced-motion: reduce) { .proof__slide { transition: none; } }
.proof__slide img { width: 100%; height: 100%; object-fit: cover; }

.proof__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  background: var(--stock); color: var(--ink);
  border: 2px solid var(--ink);
  transition: background-color .12s ease, color .12s ease;
}
.proof__arrow:hover { background: var(--ink); color: var(--accent); }
.proof__arrow--prev { left: clamp(-1rem, -1vw, 0rem); }
.proof__arrow--next { right: clamp(-1rem, -1vw, 0rem); }

.proof__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: .85rem;
  border-top: 1px solid var(--rule);
}
.proof__caption {
  margin: 0; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.proof__swatches { display: flex; gap: .45rem; }
.proof__swatches button {
  width: 2.1rem; height: .75rem; padding: 0; cursor: pointer;
  background: var(--stock-deep); border: 1px solid var(--rule);
  transition: background-color .15s ease;
}
.proof__swatches button[aria-selected="true"] { background: var(--accent); border-color: var(--accent-deep); }
.proof__swatches button:hover { background: var(--accent-deep); }

/* ── spec sheet ─────────────────────────────────────────── */

.spec { margin: 0; border-top: 2px solid var(--ink); }

.spec__row {
  display: grid;
  grid-template-columns: minmax(11rem, 20rem) 1fr;
  gap: 1rem 2.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color .15s ease, padding-left .15s ease;
}
.spec__row:hover { background: var(--stock-deep); padding-left: .75rem; }

.spec__term {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.spec__def { margin: 0; font-size: .95rem; line-height: 1.7; }

@media (max-width: 46rem) {
  .spec__row { grid-template-columns: 1fr; gap: .35rem; }
}

/* ── story ──────────────────────────────────────────────── */

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 52rem) { .story__grid { grid-template-columns: 1fr; } }

.story__figure { margin: 0; }
.story__figure img {
  width: 100%;
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}
.story__figure figcaption {
  margin-top: 1.1rem; font-family: var(--mono); font-size: .72rem;
  line-height: 1.5; letter-spacing: .04em; color: var(--ink-soft);
}
.story__text p + p { margin-top: 1.1rem; }
.story__text p { max-width: 60ch; }

/* ── contact ────────────────────────────────────────────── */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 58rem) { .contact__grid { grid-template-columns: 1fr; } }

.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  margin-top: 2rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }

/* Phone and email are one question — how do we reach you — so they take a
   column each of the form's existing two, and the note saying either will do
   runs under both. Below 34rem the form is one column and they stack, which
   is the right answer on a phone anyway. */
.field__note {
  margin: -.45rem 0 0;
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}
@media (max-width: 34rem) { .form { grid-template-columns: 1fr; } }

.field label {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.field .opt { color: var(--ink-soft); opacity: .65; }

.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule); border-bottom: 2px solid var(--ink);
  padding: .65rem .75rem; width: 100%;
  border-radius: 0;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--red); }
.field input[aria-invalid="true"] { border-bottom-color: var(--red); background: #fff6f4; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.form__note {
  margin: 0; font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 30ch;
}
.form__note[data-state="error"] { color: var(--red); }
.form__note[data-state="sent"]  { color: var(--accent-deep); }

.detail { margin: 2rem 0 0; border-top: 2px solid var(--ink); }
.detail__row {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.detail__row dt {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  padding-top: .15rem;
}
.detail__row dd { margin: 0; color: var(--ink); }

.map { margin-top: 1.75rem; border: 1px solid var(--rule); box-shadow: var(--lift); }
.map iframe { display: block; width: 100%; height: 300px; border: 0; filter: grayscale(1) contrast(1.05); }
.map:hover iframe { filter: none; }

/* ── colophon ───────────────────────────────────────────── */

.colophon {
  /* the halftone plate, inked down until only the tooth reads through */
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(20, 18, 14, .93), rgba(20, 18, 14, .975)),
    url("assets/brand/ink-texture.jpg");
  background-size: cover;
  background-position: center;
  color: var(--stock);
  margin-inline: calc(var(--gutter) * -1);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4.5rem, 7vw, 4rem);
  border-top: 6px solid var(--accent);
}
.colophon__inner { max-width: 60rem; }
.colophon__name {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 800;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
  color: var(--accent); margin: 0 0 1.1rem;
}
.colophon__meta { margin: 0 0 1.5rem; font-size: .95rem; line-height: 1.8; color: #cfc9bc; }
.colophon a { color: var(--stock); text-decoration-color: var(--accent); }
.colophon a:hover { color: var(--accent); }
.colophon__rule {
  margin: 0; padding-top: 1.25rem; border-top: 1px solid #3a352c;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: #8d8677;
}

/* ── mobile call bar ────────────────────────────────────── */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; align-items: baseline; justify-content: center; gap: .6rem;
  padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  background: var(--accent); color: var(--ink);
  font-family: var(--mono); font-size: .85rem; letter-spacing: .04em;
  text-decoration: none; border-top: 2px solid var(--ink);
}
.callbar strong { font-size: 1rem; }
@media (max-width: 60rem) { .callbar { display: flex; } }

/* ── scroll reveal ──────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ── away notice (set from the shop portal) ─────────────── */

.closed-notice {
  background: var(--ink);
  color: var(--stock);
  border-left: 6px solid var(--accent);
  padding: 1rem 1.35rem;
  margin-top: 1.25rem;
}
.closed-notice__title {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--accent);
}
.closed-notice__body { margin: 0; font-size: .95rem; line-height: 1.6; color: #d9d3c6; max-width: 62ch; }
.closed-notice__body strong { color: var(--stock); }

/* ── published hours ────────────────────────────────────── */

.hourlist { list-style: none; margin: 0; padding: 0; }
.hourlist li { display: flex; gap: .75rem; justify-content: space-between; max-width: 17rem; }
.hourlist li + li { margin-top: .2rem; }
.hourlist__days { color: var(--ink); }
.hourlist__time { font-variant-numeric: tabular-nums; text-align: right; }

/* honeypot — off-screen rather than display:none so bots still fill it */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── services submenu ───────────────────────────────────── */

.hasmenu { position: relative; display: flex; align-items: center; gap: .3rem; }

.hasmenu__more {
  width: 1.1rem; height: 1.1rem; padding: 0; cursor: pointer;
  background: transparent; border: 0; color: var(--ink-soft);
  display: grid; place-items: center;
}
.hasmenu__more::before {
  content: ""; width: .42rem; height: .42rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.hasmenu__more:hover { color: var(--ink); }
.hasmenu__more[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); }

.submenu {
  display: none;
  position: absolute; top: calc(100% + .9rem); left: -1rem;
  min-width: 17rem; padding: .4rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 26px rgba(20, 18, 14, .18);
  z-index: 30;
}
.submenu[data-open] { display: block; }

.masthead__nav .submenu__link {
  display: block; padding: .6rem 1.1rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: none;
  border-bottom: 0;
}
.masthead__nav .submenu__link:hover,
.masthead__nav .submenu__link:focus-visible { background: var(--stock-deep); color: var(--ink); border-bottom: 0; }
.masthead__nav .submenu__link.is-current { color: var(--accent-deep); }

/* on a phone the submenu is just part of the panel, always open */
@media (max-width: 60rem) {
  /* On a phone the services list is a disclosure, not eleven links dumped
     into the panel. The row splits: the label navigates, the chevron opens. */
  .hasmenu { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .hasmenu__top { border-bottom: 1px solid var(--rule); }
  .hasmenu__more {
    display: grid; width: 3rem; height: 100%; min-height: 3rem;
    border-bottom: 1px solid var(--rule); color: var(--ink-soft);
  }
  .hasmenu__more::before { width: .5rem; height: .5rem; }
  .submenu {
    grid-column: 1 / -1;
    display: none; position: static; min-width: 0; padding: 0;
    background: var(--stock); border-top: 0; box-shadow: none; border: 0;
  }
  .submenu[data-open] { display: block; }
  .submenu__link {
    padding: .8rem var(--gutter) .8rem calc(var(--gutter) + 1rem);
    border-bottom: 1px solid var(--rule);
    font-size: .82rem;
  }
}

/* ── service pages ──────────────────────────────────────── */

.crumbs {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.5rem;
}
.crumbs a { color: var(--accent-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { padding: 0 .4rem; color: var(--rule); }

.service__title {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 850;
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem);
  line-height: .95; letter-spacing: -.025em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 1.25rem;
  text-shadow: .05em .045em 0 var(--accent);
}
.service__lede { max-width: 44ch; }

.service__grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
@media (max-width: 52rem) { .service__grid { grid-template-columns: 1fr; } }

.service__text p { max-width: 58ch; }
.service__text p + p { margin-top: 1.1rem; }
.service__actions { margin-top: 2rem; }

.ticklist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ticklist li {
  position: relative; padding: .7rem 0 .7rem 1.5rem;
  border-bottom: 1px solid var(--rule); color: var(--ink); font-size: .95rem;
}
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: .55rem; height: .55rem; background: var(--accent); border: 1px solid var(--accent-deep);
}

.service__photo {
  width: 100%; margin-top: 1.75rem;
  border: 1px solid var(--rule); box-shadow: var(--lift);
}

.othersvc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.othersvc a {
  display: grid; gap: .2rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: background-color .15s ease, padding-left .15s ease;
}
.othersvc a:hover { background: var(--stock-deep); padding-left: .75rem; }
.othersvc strong {
  font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 1.1rem; color: var(--ink);
}
.othersvc span { font-size: .9rem; color: var(--ink-soft); }

/* spec rows link to their page */
.spec__term a { color: inherit; text-decoration: none; }
.spec__term a:hover { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   2026 visual direction — white canvas, large type,
   the printed work supplies the colour.
   ════════════════════════════════════════════════════════════ */

/* ── hero ───────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3rem, 6vw, 6rem) var(--step);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__copy { max-width: 34rem; }

.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.4rem);
  line-height: .93;
  letter-spacing: -.042em;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%; height: auto; display: block;
  border-radius: 2px;
}

.hero .ticker {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .75rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .hero__copy { max-width: none; }
  .hero .ticker { display: grid; gap: .8rem; }
}

/* ── buttons: a quieter secondary ───────────────────────── */

.btn--quiet {
  background: transparent; color: var(--ink);
  border-color: var(--rule);
}
.btn--quiet:hover { border-color: var(--ink); background: transparent; }

/* ── product grid: editorial, not a uniform card wall ───── */

.band__head--wide { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
}
.tile--wide { grid-column: span 4; }
.tile--tall { grid-column: span 2; }

.tile a {
  display: grid; gap: 1rem;
  text-decoration: none; color: inherit;
}

/* The frame is a fixed shape and the samples are not — a card mockup is
   portrait, a flat-lay is landscape. `cover` filled the frame by cropping
   into them, which on a page whose whole job is showing what a job looks
   like printed is the one thing it must not do. `contain` sits each piece
   whole inside the frame and lets the mount show around it. */
.tile__shot {
  display: block;
  overflow: hidden; border-radius: var(--r);
  background: var(--band);
  aspect-ratio: 4 / 3;
  padding: clamp(.55rem, 1.3vw, 1.1rem);
}
/* Nothing in this set is 16:9. Once the pieces sit whole rather than being
   cropped to fill, that frame left a portrait card using a third of its
   width; 3:2 is close to what the mockups actually are without making a
   full-width tile as tall as a 4:3 one would. */
.tile--wide .tile__shot { aspect-ratio: 3 / 2; }

/* The element fills the padded box and object-fit letterboxes the picture
   inside it. Two ways of writing this quietly do not work: max-height on the
   element leaves the percentage nothing definite to resolve against under
   aspect-ratio, and centring the container's grid makes the item
   content-sized so height:100% falls back to the natural height. Both let
   the image overflow and be clipped by overflow:hidden — cropping again, by
   a longer route. */
.tile__shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.tile a:hover .tile__shot img { transform: scale(1.035); }

.tile__text { display: grid; gap: .2rem; }
.tile__text strong {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  letter-spacing: -.015em;
  color: var(--ink);
}
.tile__text span { font-size: .95rem; color: var(--ink-soft); }
.tile a:hover .tile__text strong { color: var(--accent-deep); }

@media (max-width: 62rem) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile--wide, .tile--tall { grid-column: span 1; }
  .tile--wide .tile__shot { aspect-ratio: 4 / 3; }
}
@media (max-width: 34rem) {
  .tiles { grid-template-columns: 1fr; }
}

/* ── local positioning ──────────────────────────────────── */

.local { background: var(--stock-deep); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.local__inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.local__title { margin-bottom: 1.25rem; }
.local__body { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); margin: 0 auto 2rem; max-width: 44ch; }

/* ── reveals stay subtle ────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
}

/* ── reviews ────────────────────────────────────────────── */

.says__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
@media (max-width: 62rem) { .says__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .says__list { grid-template-columns: 1fr; } }

.say {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.6rem;
  background: var(--card); border: 0; border-radius: var(--r);
  box-shadow: var(--lift);
  transition: transform .18s ease, box-shadow .18s ease;
}
.say:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 14px 30px rgba(17,17,17,.09);
}

.say__stars {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .12em;
  /* The stars state the rating, so they are a meaningful graphic and need
     3:1 against the card. The brand blue is 2.3:1 on white; the deep blue
     is the same hue at 5.2:1. */
  color: var(--accent-deep);
}

.say__quote {
  margin: 0; flex: 1;
  font-size: .98rem; line-height: 1.6; color: var(--ink);
}
.say__quote::before { content: "\201C"; }
.say__quote::after  { content: "\201D"; }

.say__who {
  margin: 0; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding-top: .85rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .72rem;
}
.say__who strong { font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.say__who span { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .say, .say:hover { transition: none; transform: none; }
}

/* ── trust bar ──────────────────────────────────────────── */

.trust {
  margin-inline: calc(var(--gutter) * -1);
  padding: 1.5rem var(--gutter);
  background: var(--stock-deep);
  border-block: 1px solid var(--rule);
}
.trust__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--sheet);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem 2rem;
}
.trust__list li { display: grid; gap: .2rem; }
.trust__list strong {
  font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 1rem; color: var(--ink); letter-spacing: -.01em;
}
.trust__list span { font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 60rem) { .trust__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .trust__list { grid-template-columns: 1fr; gap: 1rem; } }

/* ── who we serve ───────────────────────────────────────── */

.whos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 62rem) { .whos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .whos { grid-template-columns: 1fr; } }

.who {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--card); border: 0; border-radius: var(--r);
  box-shadow: var(--lift);
}
.who__name {
  margin: 0; font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 1.1rem; letter-spacing: -.015em; color: var(--ink);
}
.who__need { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.who__items {
  list-style: none; margin: .35rem 0 0; padding: .85rem 0 0;
  border-top: 1px solid var(--rule); display: grid; gap: .4rem;
}
.who__items a {
  font-size: .9rem; color: var(--ink);
  text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.who__items a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

/* ── how it works ───────────────────────────────────────── */

.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 68rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 44rem) { .steps { grid-template-columns: 1fr; gap: 1.25rem; } }

.step { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--ink); }
.step__n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--accent-deep);
}
.step__t {
  margin: 0; font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.step__d { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }