/* img-auto */
img { height: auto; }
:root {
      color-scheme: only light;
      --ink: #191a18;
      --paper: #f5f7f2;
      --white: #fff;
      --orange: #ff5a1f;
      --sun-yellow: #ffe52e;
      --blue: #2854d7;
      --pink: #ed4c91;
      --print-green: #59b947;
      --line: rgba(25, 26, 24, .18);
      --line-soft: rgba(25, 26, 24, .14);
      --ink-muted: rgba(25, 26, 24, .55);
      --off-3: 3px 3px 0;
      --off-4: 4px 4px 0;
      --off-5: 5px 5px 0;
      --off-6: 6px 6px 0;
      --off-8: 8px 8px 0;
      --lift: transform .15s ease, box-shadow .15s ease;
      --tap: 44px;
      --body-font: 'Space Grotesk', sans-serif;
      --display-font: 'Tilt Warp', sans-serif;
    }
*,
    *::before,
    *::after {
      box-sizing: border-box;
    }
html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
    }
body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body-font);
      -webkit-font-smoothing: antialiased;
    }
img {
      display: block;
      max-width: 100%;
    }
a {
      color: inherit;
    }
button,
    input,
    textarea {
      font: inherit;
    }
.site-header {
      position: sticky;
      z-index: 20;
      top: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 26px;
      min-height: 100px;
      padding: 12px clamp(20px, 5vw, 76px);
      border-bottom: 1px solid var(--line);
      background: rgba(245, 247, 242, .96);
      backdrop-filter: blur(14px);
    }
.brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      width: fit-content;
      text-decoration: none;
    }
.brand img {
      width: 64px;
      height: 58px;
      object-fit: contain;
    }
.brand-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      line-height: 1.1;
    }
.brand-name {
      font-family: var(--display-font);
      font-size: 31px;
      font-weight: 400;
      letter-spacing: -.03em;
      line-height: 1;
      -webkit-text-stroke: .018em currentColor;
      paint-order: stroke fill;
    }
.brand-tagline {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .02em;
      color: rgba(25, 26, 24, .62);
    }
.site-nav {
      display: flex;
      justify-content: flex-end;
      gap: clamp(14px, 2.5vw, 38px);
      overflow-x: auto;
      scrollbar-width: none;
    }
.site-nav::-webkit-scrollbar {
      display: none;
    }
.site-nav a {
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s ease;
    }
.site-nav a:hover,
    .site-nav a:focus-visible {
      color: var(--blue);
    }
.hero {
      position: relative;
      display: flex;
      min-height: min(790px, calc(100svh - 78px));
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background: var(--paper);
      color: var(--white);
    }
.hero-shapes {
      position: absolute;
      z-index: -2;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
.hero-shapes img {
      position: absolute;
      top: 4%;
      left: 22%;
      width: min(70vw, 1000px);
      max-width: none;
      height: auto;
    }
.hero-content {
      position: relative;
      z-index: 1;
      width: min(100%, 1440px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 64px clamp(20px, 6vw, 96px);
      animation: rise-in .8s .08s ease-out both;
    }
.section-kicker {
      margin: 0 0 18px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }
.hero h1 {
      width: fit-content;
      max-width: min(100%, 900px);
      margin-bottom: 14px;
      padding: .1em .22em .14em;
      background-color: var(--orange);
      color: var(--white);
      text-align: center;
      font-family: var(--display-font);
      font-size: 88px;
      font-weight: 400;
      line-height: .98;
      letter-spacing: 0;
    }
.hero-bottom {
      display: flex;
      width: fit-content;
      max-width: min(100%, 900px);
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      padding: 26px 28px;
      background-color: var(--ink);
      color: var(--white);
    }
/* RISO offset boxes: the block prints with grain, and a second ink
       prints as a halftone shadow, slightly out of register */
.hero h1,
    .hero-bottom {
      position: relative;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
.hero h1::before,
    .hero-bottom::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      transform: translate(10px, 10px);
      background-image: radial-gradient(circle, var(--shadow-ink) 1.7px, transparent 2.1px);
      background-size: 5px 5px;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
      content: '';
    }
.hero h1 { --shadow-ink: var(--pink); }
.hero-bottom { --shadow-ink: var(--blue); }
.hero-description {
      max-width: 630px;
      margin: 0;
      font-size: 17px;
      line-height: 1.6;
    }
.button-link {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 0 21px;
      border: 1px solid currentColor;
      background: transparent;
      color: inherit;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
.button-link:hover {
      transform: translateY(-2px);
    }
.button-link.light:hover {
      background: var(--white);
      color: var(--ink);
    }
.button-link.dark {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--white);
    }
.button-link.dark:hover {
      background: var(--blue);
      border-color: var(--blue);
    }
.button-link .arrow {
      font-size: 18px;
      line-height: 1;
    }
.section {
      padding: 112px clamp(24px, 8vw, 122px);
    }
.section-inner {
      width: min(100%, 1196px);
      margin-inline: auto;
    }
.section-kicker {
      color: var(--blue);
    }
.about-grid {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      align-items: center;
      gap: clamp(44px, 8vw, 118px);
    }
.about-copy :is(h1,h2), .services-heading :is(h1,h2), .process-heading :is(h1,h2), .contact-copy :is(h1,h2) {
      margin-bottom: 25px;
      font-family: var(--display-font);
      font-size: 58px;
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: 0;
    }
.about-copy .lead {
      margin-bottom: 22px;
      font-size: 21px;
      line-height: 1.55;
    }
.body-copy {
      max-width: 620px;
      color: #4d4e49;
      font-size: 15px;
      line-height: 1.8;
    }
.about-image-wrap {
      position: relative;
      min-height: 470px;
    }
.about-placeholder {
      display: grid;
      place-items: center;
      width: 100%;
      height: 470px;
      background: repeating-linear-gradient(135deg, #2c56d0 0 24px, #3d67df 24px 48px);
      color: var(--white);
      text-align: center;
    }
.image-caption {
      position: absolute;
      right: -15px;
      bottom: 24px;
      padding: 13px 17px;
      background: var(--orange);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      transform: rotate(-2deg);
    }
.services-section {
      padding-top: 96px;
    }
.services-heading {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      align-items: end;
      gap: 38px;
      margin-bottom: 42px;
    }
.services-heading :is(h1,h2) {
      margin-bottom: 0;
    }
.services-heading .body-copy {
      margin-bottom: 5px;
    }
.price-guide {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 30px;
      margin-top: 30px;
      padding: 36px clamp(24px, 5vw, 70px);
      background: var(--orange);
    }
.price-guide p {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
.price-guide h3 {
      margin: 7px 0 0;
      font-family: var(--display-font);
      font-size: 34px;
      font-weight: 400;
    }
.process-section {
      background: var(--ink);
      color: var(--paper);
    }
.process-heading {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      align-items: end;
      gap: 40px;
      margin-bottom: 62px;
    }
.process-heading .section-kicker {
      color: var(--sun-yellow);
    }
.process-heading :is(h1,h2) {
      margin: 0;
    }
.process-list {
      border-top: 1px solid rgba(245, 247, 242, .28);
    }
.process-item {
      display: grid;
      grid-template-columns: 90px minmax(220px, .72fr) 1.28fr;
      align-items: start;
      gap: 30px;
      padding: 33px 0 38px;
      border-bottom: 1px solid rgba(245, 247, 242, .28);
    }
.process-number {
      color: var(--sun-yellow);
      font-size: 13px;
      font-weight: 700;
    }
.process-item h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.35;
    }
.process-item p {
      margin: 0;
      color: rgba(245, 247, 242, .76);
      font-size: 14px;
      line-height: 1.8;
    }
.contact-section {
      background: var(--pink);
    }
.contact-grid {
      display: grid;
      grid-template-columns: 1fr .8fr;
      gap: clamp(48px, 8vw, 120px);
    }
.contact-copy :is(h1,h2) {
      max-width: 560px;
      margin-bottom: 20px;
    }
.contact-copy .body-copy {
      color: rgba(25, 26, 24, .78);
    }
.contact-email {
      display: inline-block;
      margin-top: 24px;
      font-size: 14px;
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
.contact-form {
      display: grid;
      gap: 20px;
      align-content: start;
      padding-top: 8px;
    }
.field {
      display: grid;
      gap: 8px;
    }
.field label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
.field input,
    .field textarea {
      width: 100%;
      border: 1px solid var(--ink-muted);
      border-radius: 0;
      outline: none;
      background: rgba(255, 255, 255, .56);
      color: var(--ink);
      font-size: 15px;
    }
.field input {
      min-height: 48px;
      padding: 10px 12px;
    }
.field textarea {
      min-height: 130px;
      padding: 12px;
      resize: vertical;
    }
.field input:focus,
    .field textarea:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 2px var(--ink);
    }
.contact-form button {
      display: inline-flex;
      width: fit-content;
      min-height: 50px;
      align-items: center;
      gap: 15px;
      padding: 0 20px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--white);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      transition: background .2s ease;
    }
.contact-form button:hover {
      background: var(--blue);
    }
.site-footer {
      display: flex;
      min-height: 92px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 22px clamp(24px, 8vw, 122px);
      background: var(--ink);
      color: var(--paper);
    }
.footer-brand {
      font-size: 17px;
      font-weight: 700;
    }
.footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
    }
.footer-links a,
    .copyright {
      font-size: 11px;
      text-decoration: none;
    }
.footer-links a:hover {
      color: var(--sun-yellow);
    }
.copyright {
      margin: 0;
      color: rgba(245, 247, 242, .65);
    }
@keyframes rise-in {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }

/* ---------- Overprinted shapes: flat inks that multiply where they cross ---------- */
:root {
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
      --speckle-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -6 5.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    }
#about, .services-section, .process-section, .contact-section {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
.pd-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pd-shape {
      position: absolute;
      display: block;
      background-color: var(--ink-c);
      mix-blend-mode: multiply;
      -webkit-mask-image: var(--speckle-soft);
      mask-image: var(--speckle-soft);
    }
.c-yellow { --ink-c: var(--sun-yellow); }
.c-pink { --ink-c: var(--pink); }
.c-blue { --ink-c: var(--blue); }
.c-orange { --ink-c: var(--orange); }
.c-green { --ink-c: var(--print-green); }
.s-circle { border-radius: 50%; }
.s-bar { border-radius: 0; }
.s-halftone {
      border-radius: 50%;
      background-color: transparent;
      background-image: radial-gradient(circle, var(--ink-c) 2.6px, transparent 3.1px);
      background-size: 8px 8px;
      -webkit-mask-image: none;
      mask-image: none;
    }
/* on the dark section the inks print normally, as flat color */
.guide .pd-shape { mix-blend-mode: normal; }
.guide .s-halftone { opacity: .9; }
.a1 { width: 230px; height: 230px; left: -80px; bottom: 36px; }
.a2 { width: 190px; height: 190px; right: 4%; top: 28px; }
.a3 { width: 280px; height: 56px; right: -60px; bottom: 60px; transform: rotate(-8deg); }
.a4 { width: 70px; height: 70px; left: auto; right: -28px; top: 46%; }
.b1 { width: 260px; height: 260px; right: -140px; top: 10px; }
.b2 { width: 190px; height: 190px; left: -120px; bottom: 110px; }
.b3 { width: 240px; height: 50px; left: 30%; bottom: 18px; transform: rotate(4deg); }
.b4 { width: 64px; height: 64px; right: 12%; bottom: 70px; }
.d1 { width: 250px; height: 250px; right: -90px; top: -70px; }
.d2 { width: 230px; height: 230px; left: -70px; bottom: -60px; }
.d3 { width: 220px; height: 46px; right: 8%; bottom: 40px; transform: rotate(-6deg); }
.d4 { width: 60px; height: 60px; left: 46%; top: 30px; }
.e1 { width: 240px; height: 240px; left: -130px; top: -120px; }
.e2 { width: 200px; height: 200px; right: -40px; bottom: -40px; }
.e3 { width: 260px; height: 52px; left: 6%; bottom: 36px; transform: rotate(5deg); }
.e4 { width: 66px; height: 66px; right: 32%; top: 40px; }
/* ---------- RISO offset shadows for blocks in About, Print Services, Contact ---------- */
.about-placeholder, .contact-form, .price-guide {
      position: relative;
      --shadow-ink: var(--pink);
    }
.contact-form { --shadow-ink: var(--blue); }
.price-guide { --shadow-ink: var(--blue); }
.about-placeholder::before, .contact-form::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      transform: translate(12px, 12px);
      background-image: radial-gradient(circle, var(--shadow-ink) 1.7px, transparent 2.1px);
      background-size: 5px 5px;
      -webkit-mask-image: var(--speckle);
      mask-image: var(--speckle);
      mix-blend-mode: multiply;
      content: '';
    }
.about-placeholder { background-blend-mode: normal; }
.contact-form { padding: 28px; background-color: var(--pink); background-image: var(--grain); }
/* ---------- Compact services list ---------- */
.about-placeholder { display: block; }
.about-photo { display: block; width: 100%; height: 470px; object-fit: cover; object-position: center 30%; }
.svc-num { color: var(--blue); font-size: 13px; font-weight: 700; padding-top: 3px; }
@media (max-width: 650px) {
  .b2 { left: -150px; }
}
@media (max-width: 900px) {
  .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }
  .process-item {
        grid-template-columns: 54px minmax(170px, .8fr) 1.2fr;
        gap: 20px;
      }
}
@media (max-width: 650px) {
  html {
        scroll-padding-top: 118px;
      }
  .site-header {
        grid-template-columns: 1fr;
        gap: 9px;
        min-height: 0;
        padding: 11px 18px 12px;
      }
  .brand img {
        width: 48px;
        height: 44px;
      }
  .brand-name {
        font-size: 24px;
      }
  .brand-tagline {
        font-size: 12px;
      }
  .site-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 16px;
        overflow: visible;
        padding: 2px 0 3px;
      }
  .site-nav a {
        font-size: 9px;
      }
  .hero {
        min-height: 680px;
        min-height: min(760px, calc(100svh - 101px));
      }
  .hero {
        align-items: flex-start;
      }
  .hero-content {
        padding: 36px 20px 360px;
      }
  .hero-shapes img {
        top: auto;
        bottom: -60px;
        left: -14%;
        width: 135%;
      }
  .hero h1 {
        max-width: 100%;
        margin-bottom: 14px;
        font-size: 44px;
      }
  .hero-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 23px;
        padding: 20px;
      }
  .hero-description {
        font-size: 15px;
      }
  .section {
        padding: 78px 23px;
      }
  .about-grid, .services-heading, .process-heading, .contact-grid {
        grid-template-columns: 1fr;
      }
  .about-grid {
        gap: 32px;
      }
  .about-copy :is(h1,h2), .services-heading :is(h1,h2), .process-heading :is(h1,h2), .contact-copy :is(h1,h2) {
        font-size: 45px;
      }
  .about-copy .lead {
        font-size: 18px;
      }
  .about-image-wrap,
      .about-placeholder {
        min-height: 0;
        height: 345px;
      }
  .services-section {
        padding-top: 12px;
      }
  .services-heading {
        gap: 16px;
        margin-bottom: 25px;
      }
  .price-guide {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 25px;
      }
  .process-heading {
        gap: 17px;
        margin-bottom: 40px;
      }
  .process-item {
        grid-template-columns: 44px 1fr;
        gap: 10px 15px;
        padding: 25px 0;
      }
  .process-item p {
        grid-column: 2;
      }
  .pd-shape { transform: scale(.7); transform-origin: center; }
  .a2 { right: -70px; top: -30px; }
  .a4, .b4, .d4, .e4 { display: none; }
  .contact-form { padding: 20px; }
  .contact-grid {
        gap: 34px;
      }
  .site-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 26px 23px;
      }
  .footer-links {
        gap: 18px;
      }
}
@media (prefers-reduced-motion: reduce) {
  *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
}
/* PRICELIST START */
.pl { margin-top: 80px; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.pl-head h3 { margin: 0; font-family: var(--display-font); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; color: var(--paper); text-shadow: 4px 4px 0 var(--blue); }
/* cover */
/* sticker cuts */
/* finish + paper swatches */
.pl-swatch { display: block; aspect-ratio: 2 / 1; border: 3px solid var(--ink); box-shadow: 1.6cqw 1.6cqw 0 var(--ink); background: var(--blue); }
.f-glossy { background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.75) 38%, transparent 46%), linear-gradient(150deg, var(--blue), #1b2f8a); }
.f-matte-rough { background: var(--grain), var(--orange); }
.f-holo-rainbow { background: linear-gradient(115deg, #ff9bd2, #ffe52e, #8cf0c8, #7fb2ff, #d69bff, #ff9bd2); }
.f-matte-smooth { background: repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 / 18% 24%; }
.f-holo-glass { background: linear-gradient(32deg, transparent 48%, rgba(255,255,255,.9) 49%, transparent 51%), linear-gradient(-58deg, transparent 38%, rgba(255,255,255,.9) 39%, transparent 41%), linear-gradient(80deg, transparent 62%, rgba(255,255,255,.9) 63%, transparent 65%), conic-gradient(from 20deg at 40% 45%, #ffc7e8, #bff0ff, #fff3a0, #d9c6ff, #b7ffe0, #ffc7e8); }
.f-holo-dot { background: radial-gradient(circle, rgba(255,255,255,.9) 1.6px, transparent 2px) 0 0 / 7px 7px, linear-gradient(115deg, #ff9bd2, #fff27a, #9ef7da, #9ec2ff); }
.f-glitter { background: radial-gradient(circle, #fff 1px, transparent 1.4px) 0 0 / 5px 5px, radial-gradient(circle, var(--sun-yellow) 1px, transparent 1.5px) 2px 3px / 6px 6px, var(--pink); }
.f-canvas { background: repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 4px), #6fc2c6; }
.papers .pl-swatch { background-color: #f6f4ec; }
.p-old-mill { background: repeating-linear-gradient(35deg, #ece8dc 0 2px, #f8f6ee 2px 5px); }
.p-gentle { background: #fbfaf6; }
.p-astro { background: radial-gradient(circle, rgba(25,26,24,.08) 1px, transparent 1.4px) 0 0 / 4px 4px, #f7f7f3; }
.p-recycled { background: radial-gradient(circle, #6b5d4d 1px, transparent 1.6px) 0 0 / 11px 13px, radial-gradient(circle, #8a7a66 .8px, transparent 1.3px) 4px 6px / 7px 9px, #e9e3d6; }
.p-eggshell { background: radial-gradient(circle, rgba(25,26,24,.12) 1.4px, transparent 2px) 0 0 / 6px 6px, #f3f1ea; }
.p-granite { background: radial-gradient(circle, rgba(25,26,24,.35) .8px, transparent 1.2px) 0 0 / 5px 7px, radial-gradient(circle, rgba(25,26,24,.2) 1px, transparent 1.4px) 2px 3px / 9px 8px, #ecebe6; }
.p-smooth-lam { background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.8) 42%, transparent 50%), #e7e9ea; }
.p-artsilk { background: linear-gradient(160deg, #ffffff, #ececeb 60%, #f8f8f6); }
/* photo frames */
.bc { position: absolute; display: flex; align-items: center; gap: 2cqw; width: 58cqw; aspect-ratio: 3.5 / 2; padding: 4cqw; border: 2px solid var(--ink); box-shadow: 2cqw 2cqw 0 var(--ink); font: 400 7cqw/1 var(--display-font); }
.pl-swatch { width: 100%; }
@media (max-width: 650px) {
  .pl { margin-top: 56px; }
}
/* PRICELIST END */
/* PAGES START */
[data-page][hidden] { display: none !important; }
main { min-height: 70vh; }
.page-section { padding-top: 96px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.order-section { position: relative; overflow: hidden; isolation: isolate; }
.order-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 100px); align-items: start; }
.order-copy { position: sticky; top: 110px; }
.order-copy :is(h1,h2) { margin: 0 0 18px; font-family: var(--display-font); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; text-shadow: 4px 4px 0 var(--pink); }
.order-copy a { color: inherit; font-weight: 700; }
.order-form { position: relative; display: grid; gap: 22px; padding: 30px; background: var(--paper); background-image: var(--grain); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--blue); }
.of-group { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.of-group > legend { padding: 0; margin-bottom: 14px; font: 400 1.45rem/1 var(--display-font); }
.of-group[disabled], .of-group[hidden] { display: none; }
.of-group[data-for] { padding: 18px; background: color-mix(in srgb, var(--sun-yellow) 35%, var(--white)); border: 2px solid var(--ink); }
.order-form .field select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ink-muted); border-radius: 0; background: rgba(255,255,255,.8); color: var(--ink); font: 15px var(--body-font); }
.order-form .field input, .order-form .field textarea { background: rgba(255,255,255,.8); }
.order-form .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.order-form .field[hidden] { display: none; }
.of-legend { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.of-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.of-chip input { position: absolute; opacity: 0; pointer-events: none; }
.of-chip span { display: inline-block; padding: 10px 16px; border: 2px solid var(--ink); background: var(--white); font-weight: 600; font-size: 14px; cursor: pointer; }
.of-chip input:checked + span { background: var(--ink); color: var(--white); box-shadow: var(--off-3) var(--pink); }
.of-chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.of-hint { font-size: 12.5px; opacity: .75; }
.of-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.of-status { margin: 0; font-weight: 600; }
.of-status.ok { padding: 14px; background: var(--sun-yellow); border: 2px solid var(--ink); }
.of-status.err { padding: 14px; background: var(--white); border: 2px solid var(--orange); }
.order-form .field { position: relative; }
.order-form .fe-msg { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; display: block; width: max-content; max-width: 100%; margin: 0; padding: 3px 7px; background: var(--sun-yellow); color: var(--ink); border: 2px solid var(--ink); font: 700 10px/1.2 var(--body-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
.order-form .fe-msg:not(.is-out) { animation: fe-in .2s ease backwards; }
.order-form .fe-msg::before, .order-form .fe-msg::after { content: ""; position: absolute; left: 14px; bottom: 100%; border-style: solid; border-color: transparent; }
.order-form .fe-msg::before { border-width: 0 8px 8px; border-bottom-color: var(--ink); }
.order-form .fe-msg::after { bottom: calc(100% - 2px); border-width: 0 7px 7px; border-bottom-color: var(--sun-yellow); }
.order-form .fe-msg.is-out { opacity: 0; }
@keyframes fe-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.order-form [aria-invalid="true"] { outline: 3px solid var(--orange); outline-offset: 2px; }
.order-form button[type="submit"] { display: inline-flex; width: fit-content; min-height: 52px; align-items: center; gap: 15px; padding: 0 22px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; font: 700 12px var(--body-font); letter-spacing: .06em; text-transform: uppercase; }
.order-form button[type="submit"]:hover { background: var(--blue); }
.order-form button[disabled] { opacity: .6; cursor: wait; }
.order-form.was-validated input:invalid, .order-form.was-validated select:invalid { border-color: var(--orange); }
@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-copy { position: static; }
}
@media (max-width: 650px) {
  .page-section { padding-top: 64px; }
  .order-form { padding: 20px; box-shadow: var(--off-6) var(--blue); }
  .of-group[data-for] { padding: 14px; }
}
/* PAGES END */
/* HELPER START */
.helper-fab { position: fixed; right: 24px; bottom: 64px; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--body-font); }
.helper-fab-dog { display: grid; place-items: center; order: 2; width: 74px; height: 74px; border-radius: 50%; background: var(--sun-yellow); border: 3px solid var(--ink); box-shadow: var(--off-5) var(--orange); transition: var(--lift); }
.helper-fab-dog img { width: 82%; height: auto; }
.helper-fab:hover .helper-fab-dog { transform: translate(-2px, -2px) rotate(-4deg); box-shadow: var(--off-8) var(--orange); }
.helper-fab-label { position: relative; padding: 10px 16px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; font: 400 1.05rem/1 var(--display-font); box-shadow: var(--off-4) var(--blue); transform-origin: right center; opacity: 0; }
.helper-fab-label::after { content: ""; position: absolute; right: -11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--white); border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: rotate(45deg); }
@keyframes helper-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes helper-talk { 0%, 8% { opacity: 0; transform: scale(.6); } 14%, 80% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes helper-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.helper-fab.is-animating { animation: helper-float 3.2s ease-in-out infinite; }
.helper-fab.is-animating .helper-fab-dog { animation: helper-wiggle 6s ease-in-out infinite; }
.helper-fab.is-animating .helper-fab-label { animation: helper-talk 6s ease-in-out infinite; }
.helper-fab.is-animating[aria-expanded="true"], .helper-fab.is-animating[aria-expanded="true"] .helper-fab-dog { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .helper-fab.is-animating, .helper-fab.is-animating .helper-fab-dog, .helper-fab.is-animating .helper-fab-label { animation: none; }
  .helper-fab-label { opacity: 1; }
}
.helper-fab:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.helper-fab[aria-expanded="true"] .helper-fab-label { display: none; }
.helper-panel { position: fixed; right: 24px; bottom: 158px; z-index: 61; width: min(370px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 190px)); display: flex; flex-direction: column; background: var(--paper); background-image: var(--grain); border: 3px solid var(--ink); box-shadow: var(--off-8) var(--blue); font-family: var(--body-font); color: var(--ink); }
.helper-panel[hidden] { display: none; }
.helper-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--orange); border-bottom: 3px solid var(--ink); }
.helper-head img { width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: var(--sun-yellow); border: 2px solid var(--ink); }
.helper-head strong { display: block; font: 400 1.3rem/1 var(--display-font); }
.helper-head span { font-size: 12px; font-weight: 600; }
.helper-close { margin-left: auto; width: 34px; height: 34px; border: 2px solid var(--ink); background: var(--paper); font: 700 18px/1 var(--body-font); cursor: pointer; }
.helper-close:focus-visible, .helper-chips button:focus-visible, .helper-form button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.helper-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.helper-msg { max-width: 88%; padding: 10px 12px; border: 2px solid var(--ink); font-size: 14px; line-height: 1.45; }
.helper-msg.bot { align-self: flex-start; background: var(--white); box-shadow: var(--off-3) var(--sun-yellow); }
.helper-msg.me { align-self: flex-end; background: var(--ink); color: var(--white); }
.helper-msg a { color: inherit; font-weight: 700; display: inline-block; margin-top: 6px; }
.helper-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; max-height: 96px; overflow-y: auto; }
.helper-chips button { padding: 6px 11px; border: 2px solid var(--ink); background: var(--sun-yellow); font: 600 12.5px var(--body-font); cursor: pointer; }
.helper-chips button:hover { background: var(--pink); }
.helper-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 2px dashed var(--ink); }
.helper-form input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--white); font: 14px var(--body-font); }
.helper-form button { min-height: 42px; padding: 0 14px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); font: 700 12px var(--body-font); text-transform: uppercase; cursor: pointer; }
.helper-form button:hover { background: var(--blue); }
@media (max-width: 650px) {
  .helper-fab { right: 14px; bottom: 56px; gap: 10px; }
  .helper-fab-dog { width: 64px; height: 64px; }
  .helper-fab-label { font-size: .92rem; padding: 8px 12px; }
  .helper-panel { right: 12px; bottom: 134px; max-height: calc(100svh - 170px); }
}
@media print {
  .helper-fab, .helper-panel { display: none; }
}
/* HELPER END */
/* SOCIALS START */
.footer-links { gap: 14px; align-items: center; }
.footer-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--paper); border-radius: 50%; color: var(--paper); transition: background .15s ease, color .15s ease, transform .15s ease; }
.footer-links a svg { width: 22px; height: 22px; }
.footer-links a:hover { background: var(--sun-yellow); border-color: var(--sun-yellow); color: var(--ink); transform: translateY(-3px); }
.footer-links a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.contact-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.contact-social a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: var(--off-4) var(--ink); }
.contact-social a:nth-child(2) { box-shadow: var(--off-4) var(--blue); }
.contact-social a:first-child { box-shadow: var(--off-4) var(--sun-yellow); }
.contact-social a:hover { background: var(--sun-yellow); transform: translate(-1px, -1px); }
.contact-social svg { width: 20px; height: 20px; }
/* SOCIALS END */
/* NAVCOLORS START */
.site-nav a { padding-bottom: 6px; text-decoration: none !important; background-image: var(--ul, linear-gradient(var(--orange), var(--orange))); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 4px; transition: background-size .22s ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { background-size: 100% 4px; }
.site-nav a:nth-child(1) { --ul: linear-gradient(var(--orange), var(--orange)); }
.site-nav a:nth-child(2) { --ul: linear-gradient(var(--blue), var(--blue)); }
.site-nav a:nth-child(3) { --ul: linear-gradient(var(--pink), var(--pink)); }
.site-nav a:nth-child(4) { --ul: linear-gradient(var(--print-green), var(--print-green)); }
.site-nav a:nth-child(5) { --ul: linear-gradient(var(--sun-yellow), var(--sun-yellow)); }
.site-nav a:nth-child(6) { --ul: linear-gradient(var(--ink), var(--ink)); }
/* NAVCOLORS END */
/* PAPERGRAIN START */
body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .1; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .09 0 0 0 1.1 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 260px 260px; }
@media print {
  body::after { display: none; }
}
/* PAPERGRAIN END */
/* H2SHADOW START */
#about-title { text-shadow: 4px 4px 0 var(--sun-yellow); }
#services-title { text-shadow: 4px 4px 0 var(--orange); }
#process-title { text-shadow: 4px 4px 0 var(--blue); }
#contact-title { text-shadow: 4px 4px 0 var(--paper); }
@media (max-width: 650px) {
  #about-title, #services-title, #process-title, #contact-title, .order-copy :is(h1,h2) { }
  #about-title { text-shadow: 3px 3px 0 var(--sun-yellow); }
  #services-title { text-shadow: 3px 3px 0 var(--orange); }
  #process-title { text-shadow: 3px 3px 0 var(--blue); }
  #contact-title { text-shadow: 3px 3px 0 var(--paper); }
}
/* H2SHADOW END */
/* NAVFIT START */
.site-nav { overflow: visible; flex-wrap: wrap; row-gap: 8px; gap: 8px clamp(12px, 2vw, 32px); }
@media (max-width: 1060px) {
  .site-header { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .site-nav { justify-content: flex-start; }
}
/* NAVFIT END */
/* PRICEPICK START */
.price-top { grid-template-columns: 1fr; margin-bottom: 34px; }
.price-top + .pl { margin-top: 0; }
.pl-ask { margin: 0; font-family: var(--display-font); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.1; color: var(--paper); text-shadow: 2px 2px 0 var(--blue); }
.pl-head { align-items: center; margin-bottom: 18px; }
.philosophy { margin-top: 96px; }
.philosophy-title { margin: 0 0 32px; font-family: var(--display-font); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.02; color: var(--paper); text-shadow: 4px 4px 0 var(--blue); }
@media (max-width: 650px) {
  .philosophy { margin-top: 64px; }
}
/* PRICEPICK END */
/* ORDERFILES START */
.of-share { margin: 0; padding: 10px 12px; border-left: 4px solid var(--orange); background: rgba(255, 229, 46, .35); font-weight: 600; opacity: 1; }
.order-form input[type="file"] { padding: 10px; min-height: 0; background: rgba(255,255,255,.8); font-size: 14px; }
.order-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 2px solid var(--ink); background: var(--sun-yellow); font: 700 12px var(--body-font); text-transform: uppercase; cursor: pointer; }
/* ORDERFILES END */
.order-form .field.is-low .of-hint { color: var(--orange); font-weight: 700; opacity: 1; }
.order-form .field.is-low input { border-color: var(--orange); }
/* SEO PAGES */
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--white); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.home-block { position: relative; overflow: hidden; isolation: isolate; }
.home-block h2 { margin: 0 0 22px; font-family: var(--display-font); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: 0; }
.home-block .lead { max-width: 46ch; }
.home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 18px 18px 18px 74px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--off-6) var(--orange); }
.steps li:nth-child(2) { box-shadow: var(--off-6) var(--blue); }
.steps li:nth-child(3) { box-shadow: var(--off-6) var(--pink); }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun-yellow); border: 2px solid var(--ink); font: 400 1.4rem/1 var(--display-font); }
.steps strong { display: block; font: 400 1.25rem/1.1 var(--display-font); margin-bottom: 4px; }
.steps p { margin: 0; font-size: 15px; line-height: 1.5; }
.faq-section { position: relative; overflow: hidden; isolation: isolate; }
.faq-list { display: grid; gap: 12px; margin-top: 26px; }
.faq-list details { background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--off-5) var(--sun-yellow); }
.faq-list summary { cursor: pointer; padding: 16px 48px 16px 18px; font: 400 1.2rem/1.2 var(--display-font); list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 700 1.6rem/1 var(--body-font); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.faq-list p { margin: 0; padding: 0 18px 18px; line-height: 1.55; }
.order-form .of-terms { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.order-form .of-terms input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.order-form .of-terms a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.order-form.was-validated .of-terms input:invalid + span { color: #b3261e; font-weight: 700; }
.terms-dialog { width: min(760px, calc(100vw - 24px)); max-height: 86vh; padding: 0; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--off-8) var(--sun-yellow); }
.terms-dialog::backdrop { background: var(--ink-muted); }
.terms-dialog .terms-copy { max-width: none; padding: 0 clamp(18px, 4vw, 34px) 28px; }
.terms-dialog .td-title { margin: 22px 0 6px; font: 400 2rem/1.1 var(--display-font); }
.terms-dialog .td-close { position: sticky; top: 0; float: right; margin: 12px -6px 0 12px; padding: 8px 14px; border: 2px solid var(--ink); background: var(--sun-yellow); color: var(--ink); font: 700 12px var(--body-font); text-transform: uppercase; cursor: pointer; }
.site-footer { min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 16px; }
.site-footer .footer-links { gap: 12px; }
@media (min-width: 761px) {
  .site-footer .footer-links a { width: 38px; height: 38px; }
  .site-footer .footer-links a svg { width: 18px; height: 18px; }
}
#print-services .pd-shape { opacity: .3; }
#print-services .services-heading { position: relative; z-index: 2; }
@media (max-width: 1100px) {
  #print-services .pd-shape { transform: scale(.6); }
}
@media (min-width: 651px) {
  .site-footer { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-footer .footer-brand { justify-self: start; }
  .site-footer .footer-links { justify-self: center; }
  .site-footer .copyright { justify-self: end; text-align: right; }
}
.site-footer .footer-links a, .contact-social a svg { box-sizing: border-box; }
.site-footer .footer-links a { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; aspect-ratio: 1 / 1; }
.site-footer .footer-links a svg { display: block; flex: none; margin: 0; }
.site-footer .footer-links a:hover { transform: translateY(-2px); }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .site-header { grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 16px; min-height: 0; }
  .nav-toggle { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 2px solid var(--ink); background: var(--orange); box-shadow: var(--off-3) var(--ink); cursor: pointer; }
  .nav-bars, .nav-bars::before, .nav-bars::after { display: block; width: 22px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -7px; }
  .nav-bars::after { top: 7px; }
  .site-header.nav-open .nav-bars { background: transparent; }
  .site-header.nav-open .nav-bars::before { top: 0; transform: rotate(45deg); }
  .site-header.nav-open .nav-bars::after { top: 0; transform: rotate(-45deg); }
  .site-header .site-nav { grid-column: 1 / -1; display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 10px; padding: 0; max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); overflow-y: auto; border-top: 2px solid var(--ink); }
  .site-header.nav-open .site-nav { display: flex; }
  .site-header .site-nav a { display: flex; align-items: center; min-height: 54px; padding: 0 4px; font-size: 16px; letter-spacing: .02em; border-bottom: 1px solid var(--line); background-size: 0 5px; }
  .site-header .site-nav a[aria-current="page"] { background-size: 100% 5px; }
  .brand-name { font-size: 22px; }
}
@media (max-width: 760px) {
  .helper-fab { right: 12px; bottom: calc(14px + var(--lift, 0px)); }
  .helper-fab-dog { width: 60px; height: 60px; box-shadow: var(--off-4) var(--orange); }
  .helper-fab-label { font-size: .95rem; padding: 8px 12px; }
  .helper-panel { right: 12px; bottom: calc(86px + var(--lift, 0px)); width: calc(100vw - 24px); max-height: calc(100vh - 110px); max-height: calc(100svh - 110px); }
  .site-footer { padding-top: 22px; padding-bottom: 22px; }
  .helper-chips { max-height: none; }
  .helper-chips button { padding: 9px 12px; font-size: 13.5px; }
  .helper-form input { font-size: 16px; }
  .helper-close { width: 40px; height: 40px; }
  .home-block .pd-shape { opacity: .5; }
  .order-form input, .order-form select, .order-form textarea, .contact-form input, .contact-form textarea { font-size: 16px; }
  .order-form .of-hint { display: block; margin: 6px 0 12px; }
  .copyright a { display: inline-block; padding: 12px 4px; }
  .order-form .of-terms { padding: 8px 0; }
  .terms-dialog { max-height: 92vh; max-height: 92svh; }
}
.copyright a { color: inherit; text-underline-offset: 3px; }
.copyright a:hover { color: var(--sun-yellow); }
.terms-page { position: relative; overflow: hidden; isolation: isolate; }
.terms-page h1 { margin: 0 0 14px; font-family: var(--display-font); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; text-shadow: 4px 4px 0 var(--sun-yellow); }
.terms-copy { max-width: 760px; }
.terms-copy .updated { margin: 0 0 30px; font-size: 14px; opacity: .7; }
.terms-copy h2 { margin: 38px 0 10px; font: 400 1.6rem/1.15 var(--display-font); }
.terms-copy p, .terms-copy li { line-height: 1.65; font-size: 16px; }
.terms-copy ul { padding-left: 22px; margin: 8px 0; }
.terms-copy li { margin: 4px 0; }
.terms-copy a { color: var(--blue); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .steps li { padding-left: 66px; }
}
/* RISO ARROW */
.arrow { --riso-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 19L18 6M8 5h11v11' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='square'/></svg>"); position: relative; display: inline-block; flex: none; width: 20px; height: 20px; font-size: 0 !important; line-height: 0; vertical-align: middle; }
.arrow::before { content: ""; position: absolute; inset: 0; -webkit-mask: var(--riso-arrow) center / contain no-repeat; mask: var(--riso-arrow) center / contain no-repeat; background: radial-gradient(circle, var(--orange) 1.5px, transparent 1.9px) 0 0 / 3.4px 3.4px; transition: transform .18s ease; }
a:hover > .arrow::before, button:hover > .arrow::before, a:focus-visible > .arrow::before { transform: translate(2px, -2px); }
/* HELPER YELLOW QUESTIONS */
.helper-chips button { background: var(--sun-yellow); color: var(--ink); }
.helper-chips button:hover { background: var(--sun-yellow); box-shadow: var(--off-3) var(--orange); transform: translate(-1px, -1px); }
.helper-msg.me { background: var(--sun-yellow); color: var(--ink); }
/* MOBILE FOOTER: copyright to the right of the icons */
@media (max-width: 650px) {
  .site-footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 12px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-footer .footer-links { grid-column: 1; grid-row: 2; justify-self: start; gap: 10px; }
  .site-footer .copyright { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; font-size: 12px; line-height: 1.5; }
  .site-footer .copyright > span { display: none; }
  .site-footer .copyright a { display: block; padding: 6px 0; }
}
/* ===== ROUND 3: CTA, DM, social, thanks, price tiles, services ===== */
.header-cta { display: none; }
@media (min-width: 761px) {
  .site-nav a[href="order-form.html"] { background-image: none !important; background-color: var(--orange); color: var(--ink); padding: 9px 16px 9px; border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); transition: var(--lift); }
  .site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible { color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--off-5) var(--ink); background-size: 0 0; }
  .site-nav a[href="order-form.html"][aria-current="page"] { background-color: var(--sun-yellow); }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border: 2px solid var(--ink); background: var(--orange); color: var(--ink); box-shadow: var(--off-3) var(--ink); font: 700 13px var(--body-font); text-decoration: none; white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-header .brand-tagline { display: none; }
  .header-cta { padding: 0 11px; font-size: 12px; }
}
.dm-btn { display: inline-flex; align-items: center; gap: 9px; min-height: var(--tap); padding: 0 16px; border: 2px solid var(--ink); background: var(--orange); color: var(--ink); box-shadow: var(--off-3) var(--ink); font: 700 14px var(--body-font); text-decoration: none; transition: var(--lift); }
.dm-btn svg { width: 18px; height: 18px; flex: none; }
.dm-btn:hover, .dm-btn:focus-visible { transform: translate(-1px, -1px); box-shadow: var(--off-5) var(--ink); }
.footer-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
@media (min-width: 651px) {
  .site-footer .footer-id { justify-self: start; }
}
@media (max-width: 650px) {
  .site-footer .footer-id { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
}
.ig-block { background: transparent; }
.ig-block h2 { max-width: 18ch; }
.ig-card { max-width: 860px; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--off-8) var(--pink); }
.ig-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 3px solid var(--ink); }
.ig-avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--sun-yellow); border: 3px solid var(--ink); box-shadow: var(--off-3) var(--orange); }
.ig-avatar img { width: 80%; height: auto; }
.ig-who { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.ig-who strong { font-size: 16px; }
.ig-who span { font-size: 13px; opacity: .75; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--ink); }
.ig-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ig-grid a:hover img { transform: scale(1.06); }
.ig-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
@media (max-width: 650px) {
  .ig-head { flex-wrap: wrap; }
  .ig-follow { width: 100%; }
  .ig-grid { grid-template-columns: 1fr 1fr; }
}
.good-to-know { margin-top: 22px; padding: 20px 22px; background: var(--sun-yellow); border: 3px solid var(--ink); box-shadow: var(--off-6) var(--ink); color: var(--ink); }
.good-to-know h2 { margin: 0 0 10px; font: 400 1.6rem/1.1 var(--display-font); }
.good-to-know ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.good-to-know li { font-size: 15px; line-height: 1.5; }
.of-thanks { position: relative; overflow: hidden; padding: 44px clamp(20px, 5vw, 44px) 40px; text-align: center; background: var(--paper); background-image: var(--grain); border: 3px solid var(--ink); box-shadow: var(--off-8) var(--blue); }
.of-thanks[hidden] { display: none; }
.of-thanks:focus { outline: none; }
.thanks-helper { position: relative; display: grid; justify-items: center; gap: 12px; margin-bottom: 18px; }
.thanks-dog { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--sun-yellow); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--orange); animation: thanks-happy 1.2s ease-in-out infinite; }
.thanks-dog img { width: 82%; height: auto; display: block; }
.thanks-bubble { position: relative; padding: 10px 18px; background: var(--white); border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--off-4) var(--blue); font: 400 1.25rem/1 var(--display-font); animation: thanks-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.thanks-bubble::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; margin-left: -8px; background: var(--white); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.of-thanks h2 { margin: 0 0 8px; font: 400 clamp(2rem, 6vw, 3rem)/1 var(--display-font); text-shadow: 3px 3px 0 var(--orange); }
.thanks-big { margin: 0 0 12px; font: 400 clamp(1.3rem, 3.4vw, 1.8rem)/1.2 var(--display-font); }
.thanks-copy { max-width: 46ch; margin: 0 auto 24px; line-height: 1.6; }
.thanks-copy strong { overflow-wrap: anywhere; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.thanks-again { padding: 10px 6px; border: 0; background: none; font: 600 14px var(--body-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: inherit; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 12px; opacity: 0; animation: confetti-fall 2.8s ease-in forwards; }
.confetti i:nth-child(5n+1) { background: var(--orange); border-radius: 50%; }
.confetti i:nth-child(5n+5) { background: var(--print-green); width: 12px; height: 12px; border-radius: 3px; }
.confetti i:nth-child(5n+2) { background: var(--pink); width: 18px; height: 7px; }
.confetti i:nth-child(5n+3) { background: var(--blue); border-radius: 50%; width: 9px; height: 9px; }
.confetti i:nth-child(5n+4) { background: var(--sun-yellow); width: 16px; height: 6px; }
.confetti i:nth-child(1) { left: 6%; animation-delay: .0s; }
.confetti i:nth-child(2) { left: 16%; animation-delay: .3s; }
.confetti i:nth-child(3) { left: 27%; animation-delay: .1s; }
.confetti i:nth-child(4) { left: 38%; animation-delay: .5s; }
.confetti i:nth-child(5) { left: 48%; animation-delay: .2s; }
.confetti i:nth-child(6) { left: 58%; animation-delay: .6s; }
.confetti i:nth-child(7) { left: 67%; animation-delay: .15s; }
.confetti i:nth-child(8) { left: 76%; animation-delay: .45s; }
.confetti i:nth-child(9) { left: 84%; animation-delay: .05s; }
.confetti i:nth-child(10) { left: 91%; animation-delay: .35s; }
.confetti i:nth-child(11) { left: 21%; animation-delay: .7s; }
.confetti i:nth-child(12) { left: 71%; animation-delay: .8s; }
@keyframes thanks-happy { 0%, 100% { transform: translateY(0) rotate(-4deg); } 25% { transform: translateY(-20px) rotate(6deg); } 50% { transform: translateY(0) rotate(-6deg); } 75% { transform: translateY(-10px) rotate(4deg); } }
@keyframes thanks-pop { from { opacity: 0; transform: scale(.4) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  .thanks-dog, .thanks-bubble, .confetti i { animation: none; }
  .confetti { display: none; }
}
.pl-orderbar { position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: flex-start; margin-top: -6px; pointer-events: none; }
.pl-order { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; background: var(--sun-yellow); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--off-5) var(--orange); font: 700 15px var(--body-font); text-decoration: none; transition: var(--lift); }
.pl-order:hover, .pl-order:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }
@media (max-width: 760px) {
  .pl-orderbar { bottom: 82px; }
}
.svc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.order-form[hidden] { display: none; }
.good-to-know h2 { text-shadow: none; }
@media (min-width: 761px) {
  .site-nav { align-items: center; }
}
/* order now button in ink */
.header-cta { background-color: var(--ink); color: var(--paper); box-shadow: var(--off-3) var(--orange); }
@media (min-width: 761px) {
  .site-nav a[href="order-form.html"] { background-color: var(--ink); color: var(--paper); box-shadow: var(--off-3) var(--orange); }
  .site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible { color: var(--paper); box-shadow: var(--off-5) var(--orange); }
  .site-nav a[href="order-form.html"][aria-current="page"] { background-color: var(--ink); }
}
/* PRICE GUIDE SEARCH */
.pl-search { margin: 0 0 20px; }
.pl-search-label { display: block; margin: 0 0 8px; font: 700 12px var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--sun-yellow); }
.pl-search input { width: 100%; min-height: 50px; padding: 0 16px; border: 3px solid var(--ink); background: var(--white); color: var(--ink); font: 500 16px var(--body-font); box-shadow: var(--off-4) var(--pink); border-radius: 0; -webkit-appearance: none; appearance: none; }
.pl-search input:focus-visible { outline: 3px solid var(--sun-yellow); outline-offset: 2px; }
.pl-results { display: grid; gap: 8px; margin-top: 14px; }
.pl-hit { display: grid; gap: 2px; text-align: left; width: 100%; padding: 10px 14px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 500 14px var(--body-font); cursor: pointer; box-shadow: var(--off-3) var(--orange); }
.pl-hit strong { font-weight: 700; font-size: 15px; }
.pl-hit span { color: #4a4b47; font-size: 13px; line-height: 1.35; }
.pl-hit:hover, .pl-hit:focus-visible { background: var(--sun-yellow); }
.pl-none { margin: 0; color: var(--paper); font-size: 14px; }
/* order form: yellow buttons, ink text */
.order-form input[type="file"]::file-selector-button { background: var(--sun-yellow); color: var(--ink); }
.order-form button[type="submit"] { background: var(--sun-yellow); color: var(--ink); box-shadow: var(--off-4) var(--ink); transition: var(--lift); }
.order-form button[type="submit"]:hover:not([disabled]), .order-form button[type="submit"]:focus-visible { background: var(--sun-yellow); color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--off-6) var(--ink); }
.order-form button[type="submit"] .arrow::before { background: radial-gradient(circle, var(--ink) 1.5px, transparent 1.9px) 0 0 / 3.4px 3.4px; }
/* slightly larger header logo (text unchanged) */
.brand img { width: 74px; height: 67px; }
@media (max-width: 760px) {
  .brand img { width: 50px; height: 45px; }
}
/* ORDER WIZARD */
.of-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.of-progress li { display: grid; gap: 6px; justify-items: start; padding-top: 10px; border-top: 4px solid var(--line); font: 700 12px/1.2 var(--body-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.of-progress li .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 50%; font-size: 12px; }
.of-progress li.is-done { border-top-color: var(--ink); color: var(--ink); }
.of-progress li.is-current { border-top-color: var(--orange); color: var(--ink); }
.of-progress li.is-current .n { background: var(--sun-yellow); border-color: var(--ink); }
.of-saved { position: fixed; left: 50%; translate: -50% 0; bottom: 20px; z-index: 70; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 6px 12px; background: var(--sun-yellow); color: var(--ink); border: 2px solid var(--ink); font: 700 11px/1.3 var(--body-font); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .5s ease; animation: fe-in .25s ease backwards; }
.of-saved.is-out { opacity: 0; }
.of-items-wrap { padding: 14px; background: var(--white); border: 2px solid var(--ink); box-shadow: var(--off-4) var(--pink); }
.of-items-title { margin: 0 0 8px; font: 700 12px var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.of-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: it; }
.of-items li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; counter-increment: it; padding-bottom: 10px; border-bottom: 1px dashed rgba(25,26,24,.3); font-size: 14px; line-height: 1.4; }
.of-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.of-items .it-text strong::before { content: counter(it) ". "; }
.of-items .it-text span { color: #4a4b47; }
.of-items .it-rm, .of-edit, .of-back, .sr-edit { appearance: none; background: none; border: 0; padding: 0; font: 700 13px var(--body-font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.of-more { display: grid; gap: 8px; }
.of-more .of-hint { margin: 0; }
.of-add { justify-self: start; min-height: 46px; padding: 0 18px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 700 13px var(--body-font); cursor: pointer; box-shadow: var(--off-3) var(--pink); }
.of-add:hover { background: var(--sun-yellow); }
.of-nav { display: flex; align-items: center; gap: 22px; }
.of-nav[hidden], .of-nav [hidden], .of-review[hidden], .of-status[hidden] { display: none; }
.of-next { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border: 2px solid var(--ink); background: var(--sun-yellow); color: var(--ink); box-shadow: var(--off-4) var(--ink); font: 700 12px var(--body-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: var(--lift); }
.of-next:hover { transform: translate(-1px, -1px); box-shadow: var(--off-6) var(--ink); }
.of-review { display: grid; gap: 16px; }
.of-review-title { margin: 0; font: 400 1.6rem/1.1 var(--display-font); }
.of-review .of-hint { margin: 0; }
.of-summary { display: grid; gap: 12px; }
.sr { padding: 14px; background: var(--white); border: 2px solid var(--ink); }
.sr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font: 700 12px var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.sr-b { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.sr-b p { margin: 0 0 8px; }
.sr-b p:last-child { margin-bottom: 0; }
.of-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.of-review .of-terms { margin: 0; }
@media (max-width: 650px) {
  .of-progress li .t { font-size: 10px; letter-spacing: .02em; }
}
/* BACK TO TOP */
.to-top { position: fixed; right: 38px; bottom: 170px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: var(--off-3) var(--orange); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }
.to-top:focus-visible { outline: 3px solid var(--sun-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}
@media (max-width: 760px) {
  .to-top { right: 22px; bottom: calc(102px + var(--lift, 0px)); width: 44px; height: 44px; }
}
.good-to-know li a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.gtk-prices { margin: 16px 0 6px; }
/* PRICE GUIDE: category cards + stacked pages */
.pl-head[hidden], .pl-orderbar[hidden] { display: none; }
.pl-ico { width: 76px; height: 76px; flex: none; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pl-ico .y { fill: var(--sun-yellow); }
.pl-ico .p { fill: var(--pink); }
.pl-ico .b { fill: var(--blue); }
.pl-ico .o { fill: var(--orange); }
.pl-ico .w { fill: var(--white, #fff); }
.pl-ico .k { fill: var(--ink); stroke: none; }
.pl-orderbar { bottom: 14px; }
/* REDUCED MOTION: switch off animation, transitions and smooth scrolling for people who ask for it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .confetti { display: none !important; }
}
/* min order tag on pricelist pages */
.pl-ask:focus, .of-group > legend:focus, .of-review-title:focus { outline: none; }
/* TAP TARGETS: at least 44px */
.skip-link { min-height: var(--tap); }
.copyright a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 2px; }
.of-back, .of-edit, .sr-edit, .of-items .it-rm, .thanks-again, .td-close { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: 44px; padding: 0 6px; }
.helper-chips button, .helper-close, .helper-form button { min-height: var(--tap); }
.helper-close { min-width: 44px; }
/* tagline always on one line */
.brand-text { min-width: 0; }
.brand-tagline { white-space: nowrap; }
@media (max-width: 760px) {
  .brand-tagline { font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 380px) {
  .site-header .brand-tagline { display: block; font-size: 10.5px; }
  .brand { gap: 10px; }
}
/* tighter spacing between home sections */
.home-block.section { padding-top: 72px; padding-bottom: 72px; }
.home-block + .home-block.section { padding-top: 24px; }
@media (max-width: 760px) {
  .home-block.section { padding-top: 44px; padding-bottom: 44px; }
  .home-block + .home-block.section { padding-top: 12px; }
  .home-block h2 { margin-bottom: 16px; }
}
/* header logo badge (yellow circle, black border, orange shadow) */
.brand img { width: 68px; height: 68px; }
@media (max-width: 760px) {
  .brand img { width: 52px; height: 52px; }
}
/* ONE HELPER LOGO: the badge artwork already has its yellow fill, black outline and orange shadow,
   so containers only size it (no extra borders or shadows) and it scales evenly everywhere */
.helper-fab-dog, .helper-fab:hover .helper-fab-dog { width: 78px; height: 78px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.helper-fab-dog img { width: 100%; height: 100%; }
.helper-fab:hover .helper-fab-dog { transform: translate(-2px, -2px) rotate(-4deg); }
.helper-head img { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 0; background: none; }
.ig-avatar { width: 58px; height: 58px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ig-avatar img { width: 100%; height: 100%; }
.thanks-dog { width: 140px; height: 140px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.thanks-dog img { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .helper-fab-dog, .helper-fab:hover .helper-fab-dog { width: 66px; height: 66px; box-shadow: none; }
}
/* order form: form first on phones, Good to know folds open on tap, chat link sits under the form */
.good-to-know > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.good-to-know > summary::-webkit-details-marker { display: none; }
.good-to-know > summary h2 { margin: 0; }
.good-to-know > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); font: 700 20px/1 var(--body-font); background: var(--white); }
.good-to-know[open] > summary::after { content: "\2212"; }
.good-to-know[open] > summary { margin-bottom: 12px; }
.good-to-know > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (min-width: 901px) {
  .good-to-know > summary { pointer-events: none; }
  .good-to-know > summary::after { display: none; }
}
@media (max-width: 900px) {
  .order-copy :is(h1) { margin-bottom: 12px; }
}
/* "tap to read" nudge next to the Good to know + button (phones only, hidden once open) */
.good-to-know > summary h2 { margin-right: auto; }
.gtk-hint { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--body-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gtk-hint-arrow { display: inline-block; font-size: 16px; animation: gtk-nudge 1.4s ease-in-out infinite; }
@keyframes gtk-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.good-to-know[open] .gtk-hint { display: none; }
@media (min-width: 901px) {
  .gtk-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gtk-hint-arrow { animation: none; }
}
@media (max-width: 900px) {
  .good-to-know > summary h2 { white-space: nowrap; font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .good-to-know > summary { gap: 10px; }
}
.gtk-terms { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(25, 26, 24, .7); }
.gtk-terms a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Reminders bar: everything centered on one line (checked with the real fonts) */
.good-to-know > summary { align-items: center; }
.good-to-know > summary h2 { line-height: 1; position: relative; top: 1px; }
.gtk-hint { line-height: 1; }
.gtk-hint-arrow { line-height: 1; }
.helper-msg { white-space: pre-line; }
/* HERO, plain style: ink text straight on paper like the other sections (no orange or grey boxes) */
.hero { color: var(--ink); }
.hero-content { align-items: flex-start; }
.hero .hero-kick { color: var(--blue); }
.hero h1, .hero-bottom { background: none; padding: 0; color: var(--ink); text-align: left; }
.hero h1::before, .hero-bottom::before { content: none; }
.hero h1 { max-width: 13.5ch; margin-bottom: 22px; }
.hero-bottom { max-width: 600px; }
.hero-description { font-size: 18px; line-height: 1.55; }
@media (min-width: 761px) {
  .hero-content { padding-right: 46%; }
  .hero-shapes img { left: 50%; top: 50%; transform: translateY(-50%); width: min(48vw, 720px); }
}
@media (max-width: 760px) {
  .hero h1 { max-width: 100%; font-size: 42px; }
  .hero-description { font-size: 16px; }
  .hero-content { padding: 32px 20px 300px; }
}
/* keep the RISO overprint shapes, just give the text its own space */
@media (min-width: 761px) {
  .hero h1 { font-size: clamp(56px, 5.6vw, 76px); }
  .hero-shapes img { left: 55%; width: min(44vw, 680px); }
}
@media (max-width: 760px) {
  .hero-content { padding-bottom: 380px; }
  .hero-shapes img { top: auto; bottom: -90px; left: -6%; width: 112%; transform: none; }
}
/* services ticker (yellow band under the hero) */
.ticker { overflow: hidden; background: var(--sun-yellow); border-block: 3px solid var(--ink); }
.tk-track { display: flex; width: max-content; animation: tk-scroll 32s linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-group { display: flex; align-items: center; gap: 22px; margin: 0; padding: 14px 11px; list-style: none; flex: none; }
.tk-group li { font: 400 clamp(1.05rem, 2.4vw, 1.35rem)/1 var(--display-font); white-space: nowrap; color: var(--ink); }
.tk-group .tk-dot { color: var(--orange); }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none; width: auto; }
  .tk-group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 10px; padding-inline: 20px; }
  .tk-group[aria-hidden="true"], .tk-group li:last-child { display: none; }
}
/* ticker: small kicker-style text in black, slow scroll */
.tk-group { gap: 18px; padding: 13px 9px; }
.tk-group li { font: 700 12px/1 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tk-track { animation-duration: 45s; }
/* HERO INTRO ANIMATION: a RISO print run.
   1) the colour shapes feed through like paper going into the drum (top to bottom),
   2) the headline prints in misregistered pink and blue layers that slide into register,
   3) the kicker and text follow like the last ink pass. */
.hero-content { animation: none; }
.hero-shapes img { animation: pd-feed 1.1s cubic-bezier(.2,.7,.2,1) .05s both; }
.hero .hero-kick { animation: pd-pass .5s ease-out .15s both; }
.hero h1 { animation: pd-register 1.1s cubic-bezier(.2,.7,.2,1) .25s both; }
.hero-bottom { animation: pd-pass .7s ease-out .85s both; }
@keyframes pd-feed {
  from { clip-path: inset(0 0 100% 0); opacity: .4; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes pd-register {
  0% { opacity: 0; text-shadow: 14px 8px 0 rgba(237, 76, 145, .9), -12px -6px 0 rgba(40, 84, 215, .85); }
  25% { opacity: 1; }
  70% { text-shadow: 3px 2px 0 rgba(237, 76, 145, .7), -2px -1px 0 rgba(40, 84, 215, .6); }
  100% { opacity: 1; text-shadow: 0 0 0 rgba(237, 76, 145, 0), 0 0 0 rgba(40, 84, 215, 0); }
}
@keyframes pd-pass {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shapes img, .hero .hero-kick, .hero h1, .hero-bottom { animation: none; }
}
/* HERO LAYOUT, desktop and tablet: text in the left half, overprint shapes in the right half, never touching */
@media (min-width: 900px) {
  .hero-content { width: min(100%, 1360px); padding: 72px calc(min(100vw, 1360px) / 2 + 24px) 72px clamp(32px, 5vw, 80px); }
  .hero h1 { max-width: none; font-size: clamp(48px, 4.4vw, 70px); }
  .hero-bottom { max-width: 560px; }
  .hero-shapes img { left: calc(50% + 32px); top: 50%; bottom: auto; transform: translateY(-50%); width: min(calc(50vw - 32px - clamp(32px, 5vw, 80px)), 560px); }
}
@media (min-width: 761px) and (max-width: 899px) {
  .hero-content { padding: 48px clamp(32px, 6vw, 56px) 500px; }
  .hero h1 { max-width: 16ch; font-size: 52px; }
  .hero-bottom { max-width: 620px; }
  .hero-shapes img { top: auto; bottom: -70px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); }
}
/* phones and small tablets (iPad mini portrait): cap the shapes so they always sit below the text */
@media (max-width: 760px) {
  .hero-shapes img { width: min(112vw, 440px); left: 50%; transform: translateX(-50%); bottom: -90px; top: auto; }
  .hero-content { padding-bottom: calc(min(112vw, 440px) * 1.1163 - 70px); }
}
.ig-tag { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
/* shipping details block in the order form */
/* Inputs stay at 16px on every device so iPhone and iPad never zoom on focus. */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px; }
.helper-head strong { font-size: 15px; }
.helper-head span { font-size: 12.5px; }
.order-form select, .order-form textarea, .order-form input:not([type=file]):not([type=checkbox]):not([type=radio]),
.contact-form select, .contact-form textarea, .contact-form input, .field select, .field textarea, .field input:not([type=file]) { font-size: 16px; }
.order-form .field select { font-size: 16px; }
/* ONE BUTTON SYSTEM
   Main action: ink fill, orange offset shadow, lowercase label, 52px tall.
   Other actions: white fill, ink border, coloured offset shadow. */
.button-link.dark, .header-cta, .of-next, .order-form button[type="submit"], .contact-form button, .contact-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; min-height: 52px; padding: 0 22px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); box-shadow: var(--off-4) var(--orange);
  font: 700 13px/1 var(--body-font); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
  transition: var(--lift);
}
.button-link.dark:hover, .header-cta:hover, .of-next:hover, .order-form button[type="submit"]:hover:not([disabled]), .order-form button[type="submit"]:focus-visible,
.contact-form button:hover, .contact-form button:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--off-6) var(--orange);
}
.button-link.dark .arrow, .of-next .arrow, .order-form button[type="submit"] .arrow, .contact-form button .arrow { color: var(--orange); }
.header-cta { min-height: 46px; padding: 0 16px; box-shadow: var(--off-3) var(--orange); }
.site-nav a[href="order-form.html"], .site-nav a[href="order-form.html"][aria-current="page"] {
  background-color: var(--ink); color: var(--paper); border: 2px solid var(--ink); box-shadow: var(--off-3) var(--orange); text-transform: none; letter-spacing: 0; font-size: 13px;
}
.site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible { background-color: var(--ink); color: var(--paper); box-shadow: var(--off-5) var(--orange); }
.button-link:not(.dark), .contact-social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); box-shadow: var(--off-4) var(--sun-yellow);
  font: 700 13px/1 var(--body-font); text-decoration: none; transition: var(--lift);
}
.button-link:not(.dark):hover, .contact-social a:hover { background: var(--white); color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--off-6) var(--sun-yellow); }
.contact-social a:nth-child(2) { box-shadow: var(--off-4) var(--blue); }
.contact-social a:nth-child(2):hover { box-shadow: var(--off-6) var(--blue); }
/* CONTACT PAGE: paper ground like the other pages, pink only in the shapes and the form panel edge */
.contact-section { background: var(--paper); }
.contact-form { background-color: var(--white); background-image: none; border: 3px solid var(--ink); }
.contact-form::before { --shadow-ink: var(--pink); }
.contact-copy .body-copy { color: var(--muted); }
/* ORDER STEPS: unvisited steps keep a readable grey */
.of-progress li { color: var(--muted); }
.of-progress li.is-done, .of-progress li.is-current { color: var(--ink); }
@media (min-width: 761px) {
  .header-cta { display: none; }
}
@media (max-width: 380px) {
  .header-cta { padding: 0 11px; font-size: 12px; }
}
/* Instagram tiles show the full 4:5 post, so titles and credits are never cropped */
.ig-grid a { aspect-ratio: 4 / 5; }
/* MOCKUP MAKER */
.mm-section .section-inner { max-width: 1160px; }
.mm-lead { max-width: 62ch; margin: 18px 0 34px; font-size: 18px; line-height: 1.55; }
.mm-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; align-items: start; }
.mm-card { background: var(--white); border: 3px solid var(--ink); box-shadow: var(--off-8) var(--blue); padding: 26px; }
.mm-fieldset { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.mm-fieldset legend { padding: 0; margin: 0 0 10px; font: 700 11px/1.2 var(--body-font); letter-spacing: .09em; text-transform: uppercase; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-chip { position: relative; }
.mm-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mm-chip span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 2px solid var(--ink); background: var(--white); font: 600 14px/1 var(--body-font); cursor: pointer; }
.mm-chip input:checked + span { background: var(--sun-yellow); box-shadow: var(--off-3) var(--ink); }
.mm-chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.mm-field { display: grid; gap: 6px; align-content: start; }
.mm-field[hidden] { display: none; }
.mm-field label { font: 700 11px/1.2 var(--body-font); letter-spacing: .09em; text-transform: uppercase; }
.mm-field input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ink-muted); border-radius: 0; background: rgba(255,255,255,.8); color: var(--ink); font: 16px var(--body-font); box-sizing: border-box; }
.mm-field input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.mm-hint { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.mm-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-quickbtn { min-height: var(--tap); padding: 0 14px; border: 2px solid var(--ink); background: var(--sun-yellow); color: var(--ink); font: 700 13px/1 var(--body-font); cursor: pointer; }
.mm-quickbtn:hover { box-shadow: var(--off-3) var(--ink); transform: translate(-1px, -1px); }
.mm-result { display: grid; gap: 18px; }
.mm-count { margin: 0; font: 400 clamp(26px, 4vw, 38px)/1.05 var(--display-font); }
.mm-count strong { font-weight: 400; color: var(--ink); background: linear-gradient(transparent 55%, var(--sun-yellow) 55%); padding: 0 4px; }
.mm-detail { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mm-sheetwrap { display: grid; place-items: center; padding: 22px; background: var(--paper); border: 2px solid var(--line); }
.mm-svg { display: block; width: 100%; max-width: 430px; height: auto; aspect-ratio: 210 / 297; filter: drop-shadow(4px 4px 0 rgba(25,26,24,.25)); }
.mm-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mm-legend li { display: inline-flex; align-items: center; gap: 8px; }
.mm-key { display: inline-block; width: 22px; height: 12px; }
.mm-key-cut { border: 2px dashed var(--ink); background: var(--sun-yellow); }
.mm-key-margin { border: 2px dashed var(--blue); }
.mm-key-mark { border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); width: 12px; }
.mm-note { margin: 0; padding: 12px 14px; background: var(--sun-yellow); border: 2px solid var(--ink); font-size: 14px; line-height: 1.45; }
.mm-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mm-status { margin: 0; min-height: 1.2em; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .mm-grid { grid-template-columns: 1fr; }
  .mm-card { padding: 20px; box-shadow: var(--off-6) var(--blue); }
}
@media (max-width: 420px) {
  .mm-row { grid-template-columns: 1fr; }
}
.mm-section { position: relative; overflow: hidden; isolation: isolate; }
#mm-title { text-shadow: 4px 4px 0 var(--pink); }
@media (max-width: 650px) {
  #mm-title { text-shadow: 3px 3px 0 var(--pink); }
}
.pl-mm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 26px 0 0; font-size: 15px; color: inherit; }
.mm-unitset { margin-bottom: 18px; }
.mm-switch .mm-chip span { min-width: 64px; justify-content: center; text-transform: lowercase; }
/* mockup maker: artwork upload and contour cut */
.mm-chip[hidden], .mm-fieldset[hidden], .mm-quickbtn[hidden] { display: none; }
.mm-filechip input { cursor: pointer; }
.mm-filechip span { background: var(--white); box-shadow: var(--off-3) var(--blue); }
.mm-filechip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
#mm-art-msg { margin-top: 6px; color: var(--ink); }
.mm-quick[hidden], .mm-hint[hidden] { display: none; }
.hero-description p { margin: 0 0 1em; }
.hero-description p:last-child { margin-bottom: 0; }
/* order form nav link: same as the other menu links, with a yellow underline */
.site-nav a[href="order-form.html"], .site-nav a[href="order-form.html"][aria-current="page"], .site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible {
  background-color: transparent; border: 0; box-shadow: none; color: var(--ink); transform: none; text-transform: uppercase; letter-spacing: normal; padding: 0 0 6px; min-height: 0;
  background-image: none !important; font-size: 12px;
}
@media (max-width: 760px) {
  .site-header .site-nav a[href="order-form.html"] { display: flex; align-items: center; min-height: 54px; padding: 0 4px; font-size: 16px; letter-spacing: .02em; border-bottom: 1px solid var(--line); background-size: 100% 5px; }
}
/* price guide: light background to match the other pages (the catalog keeps its own colors) */
#price-guide { background: var(--paper); background-image: var(--grain); color: var(--ink); }
#price-guide #pl-track { color: var(--paper); }
#price-guide .process-item { border-bottom-color: var(--line); }
#price-guide .process-number { color: var(--blue); }
#price-guide .pl-ask, #price-guide .pl-search-label { color: var(--ink); }
#price-guide .philosophy-title, #price-guide .process-item h3, #price-guide .process-item p { color: var(--ink); }
.contact-status { margin: 4px 0 0; font-weight: 600; min-height: 1.2em; }
/* headings: one consistent shadow on light backgrounds */
#about-title, #services-title, #process-title, #contact-title, #mm-title, #ig-title, .philosophy-title, .pl-ask, .terms-page h1 { text-shadow: 3px 3px 0 var(--orange); }
@media (max-width: 650px) {
  #about-title, #services-title, #process-title, #contact-title, #mm-title, .philosophy-title, .pl-ask, .terms-page h1 { text-shadow: 2px 2px 0 var(--orange); }
}
#price-guide .philosophy-title, #price-guide .process-item h3, #price-guide .process-item p { color: var(--ink); }
.philosophy-wrap { margin-top: 72px; }
.philosophy-wrap .philosophy { margin-top: 0; }
.philosophy-wrap .philosophy-title { color: var(--ink); }
.philosophy-wrap .process-item { border-bottom-color: var(--line); }
.philosophy-wrap .process-item h3, .philosophy-wrap .process-item p { color: var(--ink); }
.philosophy-wrap .process-number { color: var(--blue); }
/* one heading shadow everywhere: orange, 3px */
h1, #hero-title, #order-title, #mm-title, .home-block h2, #price-guide .pl-head h3, #price-guide .pl-ask, .philosophy-title { text-shadow: 3px 3px 0 var(--orange); }
@media (max-width: 650px) {
  h1, #hero-title, #order-title, #mm-title, .home-block h2, #price-guide .pl-head h3, #price-guide .pl-ask, .philosophy-title { text-shadow: 2px 2px 0 var(--orange); }
}
.hero h1, .hero h1#hero-title { text-shadow: 3px 3px 0 var(--orange); }
/* subheadings: no drop shadow (page titles keep theirs) */
.home-block h2, #ig-title, .philosophy-title, #price-guide .philosophy-title, #price-guide .pl-ask, #price-guide .pl-head h3, .pl-ask, .pl-head h3 { text-shadow: none; }
@media (max-width: 650px) {
  .home-block h2, #ig-title, .philosophy-title, #price-guide .philosophy-title, #price-guide .pl-ask, #price-guide .pl-head h3, .pl-ask, .pl-head h3 { text-shadow: none; }
}
/* no drop shadows on any headings */
h1:not(#hero-title), h2, h3, #order-title, #mm-title, #about-title, #services-title, #process-title, #contact-title, .terms-page h1, .order-copy :is(h1,h2), .of-thanks h2 { text-shadow: none; }
#hero-title { text-shadow: none; }
@media (max-width: 650px) {
  h1:not(#hero-title), h2, h3, #order-title, #mm-title, #about-title, #services-title, #process-title, #contact-title, .terms-page h1, .order-copy :is(h1,h2) { text-shadow: none; }
}
/* price guide: question heading in the same small blue kicker style as the other pages */
#price-guide .pl-ask, #price-guide .pl-head h3.pl-ask { font: 700 11px/1.2 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; text-shadow: none; }
/* price guide: reversed. "price guide" is the small blue label, the question is the page title */
#price-guide .process-heading .section-kicker { color: var(--blue); }
#price-guide #process-title { margin: 0; text-shadow: none; }
#price-guide .pl-ask, #price-guide .pl-head h3.pl-ask { font: 400 clamp(2.6rem, 6vw, 3.625rem)/.95 var(--display-font); letter-spacing: normal; text-transform: none; color: var(--ink); margin: 0 0 24px; text-shadow: none; }
/* what we print: category cards with photo sliders */
.wp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.wp-card { margin: 0; min-width: 0; }
.wp-card article { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--off-6) var(--sun-yellow); overflow: hidden; }
.wp-cards li:nth-child(4n+2) article { box-shadow: var(--off-6) var(--pink); }
.wp-cards li:nth-child(4n+3) article { box-shadow: var(--off-6) var(--blue); }
.wp-cards li:nth-child(4n+4) article { box-shadow: var(--off-6) var(--orange); }
.wp-photos { position: relative; aspect-ratio: 4 / 5; border-bottom: 3px solid var(--ink); background: var(--paper); overflow: hidden; }
.wp-slides { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wp-slides::-webkit-scrollbar { display: none; }
.wp-slides:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.wp-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.wp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 2px; padding: 0 6px; background: rgba(245, 247, 242, .88); border: 2px solid var(--ink); }
.wp-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.wp-dot::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); }
.wp-dot[aria-selected="true"]::before { background: var(--orange); }
.wp-dot:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.wp-body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; flex: 1; }
.wp-body .svc-num { font: 700 13px/1 var(--body-font); color: var(--blue); }
.wp-body h2 { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.1 var(--display-font); }
.wp-body p { margin: 0; line-height: 1.45; }
.wp-body .svc-price em { font-style: normal; color: #9a3d12; }
.wp-body .svc-link { margin-top: 4px; width: fit-content; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.wp-body .svc-link .arrow { color: var(--orange); }
@media (max-width: 760px) {
  .wp-cards { grid-template-columns: 1fr; }
  .wp-card article { box-shadow: var(--off-5) var(--sun-yellow); }
}
/* what we print: smaller photo slides (about a third of the earlier area) */
.wp-cards { grid-template-columns: repeat(3, 1fr); }
.wp-photos { aspect-ratio: 1 / 1; }
@media (max-width: 1024px) {
  .wp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .wp-cards { grid-template-columns: 1fr; }
  .wp-photos { aspect-ratio: 2 / 1; }
}
/* PRICE GUIDE v2: category dropdown + flat accordion pricing */
.pl-dd { position: relative; margin: 0 0 18px; max-width: 560px; }
.pl-dd-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 8px 18px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--off-6) var(--pink); font: 400 clamp(1.3rem, 5vw, 1.6rem)/1.1 var(--display-font); text-align: left; cursor: pointer; }
.pl-dd-btn:focus-visible { outline: 3px solid var(--sun-yellow); outline-offset: 3px; }
.pl-dd-cur { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.pl-dd-cur .pl-ico { width: 54px; height: 54px; }
.pl-dd-chev { font-size: 1.3rem; color: var(--orange); transition: transform .15s ease; }
.pl-dd-btn[aria-expanded="true"] .pl-dd-chev { transform: rotate(180deg); }
.pl-dd-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 10px); max-height: min(72vh, 540px); overflow: auto; padding: 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--off-6) var(--ink); }
.pl-dd-panel[hidden] { display: none; }
.pl-dd-panel .pl-search { margin: 0 0 10px; }
.pl-dd-panel .pl-search input { box-shadow: none; min-height: 48px; }
.pl-dd-panel .pl-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-dd-list li[hidden] { display: none; }
.pl-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 4px 10px; border: 2px solid transparent; background: transparent; color: var(--ink); font: 600 1rem var(--body-font); text-align: left; cursor: pointer; }
.pl-opt .pl-ico { width: 42px; height: 42px; }
.pl-opt:hover, .pl-opt:focus-visible { background: var(--sun-yellow); border-color: var(--ink); outline: none; }
.pl-opt[aria-selected="true"] { background: color-mix(in srgb, var(--sun-yellow) 40%, var(--white)); border-color: var(--ink); }
.pl-dd-panel .pl-results { margin-top: 10px; }
.pl-dd-panel .pl-none { color: var(--ink); }
.pf { display: grid; gap: 20px; margin-top: 28px; }
.pf-title { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 clamp(2rem, 6vw, 3.2rem)/1 var(--display-font); color: var(--ink); text-shadow: 4px 4px 0 var(--pink); outline: none; }
.pf-title .pl-ico { width: 64px; height: 64px; flex: none; }
.pf-all { min-height: var(--tap); padding: 0 16px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 700 14px var(--body-font); cursor: pointer; box-shadow: var(--off-3) var(--ink); }
.pf-all:hover { background: var(--sun-yellow); }
.pf-sec { background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--bc, var(--sun-yellow)); }
.pf-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 18px; font: 400 clamp(1.2rem, 4vw, 1.5rem)/1.15 var(--display-font); cursor: pointer; list-style: none; }
.pf-sec > summary::-webkit-details-marker { display: none; }
.pf-sec > summary::after { content: "+"; font: 700 2rem/1 var(--body-font); color: var(--orange); }
.pf-sec[open] > summary { background: var(--sun-yellow); border-bottom: 3px solid var(--ink); }
.pf-sec[open] > summary::after { content: "\2013"; }
.pf-sec > summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
/* mockup maker: border swatches and a louder "rough guide" note */
.mm-sw span::before { content: ""; width: 16px; height: 16px; margin-right: 8px; background: var(--sw); border: 2px solid var(--ink); border-radius: 50%; flex: none; }
.mm-note { position: relative; padding: 14px 16px 14px 46px; font-weight: 700; font-size: 15px; background: var(--sun-yellow); border: 3px solid var(--ink); box-shadow: var(--off-5) var(--orange); }
.mm-note::before { content: "!"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--sun-yellow); font: 700 15px/1 var(--body-font); }
/* price guide layout pass: use the full width */
.pl-dd { max-width: none; }
.pl-dd-btn { box-shadow: var(--off-6) var(--pink); }
.pf-head { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.pf-head .pf-all { flex: none; }
.pf-sec > summary { min-height: 68px; padding: 12px 22px; }
/* PRICE GUIDE v3: product cards */
.pf { gap: 18px; }
.pg-lead { margin: -4px 0 0; max-width: 62ch; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.pg-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; counter-reset: none; }
.pg-steps li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--off-4) var(--sc); font: 700 15px/1.25 var(--body-font); }
.pg-sn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--sun-yellow); font: 400 18px/1 var(--display-font); }
.pg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-facts li { padding: 7px 12px; background: var(--ink); color: var(--paper); font: 700 12.5px/1.2 var(--body-font); letter-spacing: .05em; text-transform: uppercase; }
.pg-items { display: grid; gap: 16px; margin-top: 6px; }
.pf-sec > summary { gap: 14px; }
.pg-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; }
.pg-from { flex: none; font: 700 15px/1.2 var(--body-font); color: var(--ink); text-align: right; }
.pg-from small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pf-sec[open] .pg-from { visibility: hidden; }
.pg-badge { display: inline-block; padding: 4px 8px; background: var(--pink); color: var(--ink); border: 2px solid var(--ink); font: 700 11px/1 var(--body-font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.pg-body { display: grid; gap: 14px; padding: 20px 22px 22px; color: var(--ink); }
.pg-body p, .pg-body ul, .pg-body dl { margin: 0; }
.pg-tag { max-width: 70ch; font-size: 1.02rem; line-height: 1.5; }
.pg-tag a { color: inherit; font-weight: 700; }
.pg-specs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-specs li { padding: 6px 12px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--sun-yellow) 35%, var(--white)); font: 600 13.5px/1.2 var(--body-font); }
.pg-tw { overflow-x: auto; max-width: 860px; }
.pg-tw:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.pg-t { width: 100%; border-collapse: separate; border-spacing: 0; border: 3px solid var(--ink); background: var(--white); font-size: 15px; }
.pg-t thead th { padding: 10px 12px; background: var(--ink); color: var(--paper); font: 700 13px/1.2 var(--body-font); letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.pg-t thead th:first-child { text-align: left; }
.pg-t tbody th { padding: 12px 14px; text-align: left; font-weight: 400; border-top: 2px solid var(--line-soft); }
.pg-t td { padding: 12px 10px; text-align: center; font: 700 17px/1.2 var(--body-font); font-variant-numeric: tabular-nums; white-space: nowrap; border-top: 2px solid var(--line-soft); border-left: 2px solid rgba(25, 26, 24, .08); }
.pg-t tbody tr:first-child > * { border-top: 0; }
.pg-t tr.is-hl > * { background: color-mix(in srgb, var(--sun-yellow) 45%, var(--white)); }
.pg-rl { display: block; font: 700 15px/1.25 var(--body-font); }
.pg-rs { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pg-unit { font-size: 13px; color: var(--muted); }
.pg-tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; max-width: 860px; }
.pg-tile { display: grid; gap: 2px; padding: 14px; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--off-4) var(--tc); }
.pg-tn { font: 400 1.25rem/1.1 var(--display-font); }
.pg-td { font-size: 13px; color: var(--muted); }
.pg-tp { margin-top: 8px; font: 700 1.5rem/1 var(--body-font); }
.pg-tu { font-size: 12.5px; color: var(--muted); }
.pg-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--white); border: 2px solid var(--ink); font: 600 14px/1.2 var(--body-font); }
.pg-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pg-guide > div { padding: 12px 14px; background: var(--white); border: 2px solid var(--ink); }
.pg-guide dt { font-weight: 700; }
.pg-guide dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pg-swatches { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.pg-swatches li { display: grid; gap: 6px; font: 600 13.5px/1.25 var(--body-font); }
.pg-swatches .pl-swatch { width: 100%; aspect-ratio: 2 / 1; border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); }
.pg-list { padding-left: 1.2em; display: grid; gap: 6px; max-width: 70ch; line-height: 1.5; }
.pg-faq { display: grid; gap: 0; max-width: 78ch; }
.pg-faq > div { padding: 12px 0; border-bottom: 2px dashed rgba(25, 26, 24, .3); }
.pg-faq > div:last-child { border-bottom: 0; }
.pg-faq dt { font: 400 1.1rem/1.25 var(--display-font); }
.pg-faq dd { margin: 4px 0 0; line-height: 1.5; }
@media (max-width: 600px) {
  .pg-steps { grid-template-columns: 1fr; gap: 8px; }
  .pg-steps li { min-height: 50px; }
  .pf-sec > summary { flex-wrap: wrap; }
  .pg-from { font-size: 14px; }
  .pg-body { padding: 16px 14px 18px; }
  .pg-t { font-size: 14px; }
  .pg-t td { font-size: 15px; padding: 10px 6px; }
  .pg-t tbody th { padding: 10px; }
  .pg-t thead th { padding: 9px 6px; font-size: 11.5px; white-space: normal; }
  .pg-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pg-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pg-steps li { flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 0; padding: 10px 6px; text-align: center; font-size: 12.5px; box-shadow: var(--off-3) var(--sc); }
  .pg-sn { width: 28px; height: 28px; font-size: 15px; }
}


/* POLISH (interface-design pass): text rhythm, figures, press feedback, hit areas, focus */
h1, h2, h3, .pf-title, .pl-ask, .mm-count { text-wrap: balance; }
p, li, dd, .pg-tag, .pg-lead { text-wrap: pretty; }
.pg-t td, .pg-tp, .pg-from, .mm-count strong, .pl-t td, .of-items, .of-review, .of-total { font-variant-numeric: tabular-nums; }
.button-link, .pl-order, .pl-btn, .pl-dd-btn, .pf-all, .mm-quickbtn, .helper-chips button, .helper-form button, .of-next, .of-back, #of-submit, .header-cta { transition: transform .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.button-link:active, .pl-order:active, .pl-btn:active:not(:disabled), .pl-dd-btn:active, .pf-all:active, .mm-quickbtn:active, .helper-chips button:active, .helper-form button:active, .of-next:active, .of-back:active, #of-submit:active, .header-cta:active { transform: scale(.97); }
/* hit areas: grow the tap target, not the look */
.wp-dot::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.svc-link { position: relative; }
.svc-link::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }
.good-to-know > summary { min-height: var(--tap); }
/* keyboard focus fallback: zero specificity, so any existing focus style still wins */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .button-link:active, .pl-order:active, .pl-btn:active, .pl-dd-btn:active, .pf-all:active, .mm-quickbtn:active, .helper-chips button:active, .helper-form button:active, .of-next:active, .of-back:active, #of-submit:active, .header-cta:active { transform: none; }
}

/* No flash on refresh: until order.js builds the steps, show only step one and keep the form invisible */
.js .order-form:not(.is-steps) { visibility: hidden; min-height: 520px; animation: of-reveal 0s 2.5s forwards; }
.js .order-form:not(.is-steps) > fieldset ~ fieldset, .js .order-form:not(.is-steps) > .of-terms, .js .order-form:not(.is-steps) > button[type="submit"] { display: none; }
@keyframes of-reveal { to { visibility: visible; } }

/* Order form: when a service's detail fields appear or change, keep the view where it is (no scroll-anchoring jump) */
html:has(#order-form) { overflow-anchor: none; }

/* Order form: once a service is chosen, tint the Service box softly so the choice stands out (same size and look as the other fields) */
.order-form #of-service:not(:has(option[value=""]:checked)) { background: color-mix(in srgb, var(--sun-yellow) 32%, var(--white)); font-weight: 600; }

/* Laminate samples: a small button under the Laminate field that opens a photo gallery */
.order-form .of-samples { position: relative; display: inline-flex; align-items: center; width: fit-content; justify-self: start; align-self: start; margin: 8px 0 0; min-height: 34px; padding: 0 12px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 700 12px var(--body-font); letter-spacing: .04em; cursor: pointer; box-shadow: var(--off-3) var(--pink); transition: var(--lift); }
.order-form .of-samples::after { content: ""; position: absolute; inset: -6px -4px; }
.samples-dialog .sd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .samples-dialog .sd-grid { grid-template-columns: repeat(4, 1fr); } }
.samples-dialog figure { margin: 0; }
.samples-dialog img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--ink); background: var(--paper); }
.samples-dialog figcaption { margin-top: 8px; font: 700 13px/1.2 var(--body-font); text-align: center; }
.samples-dialog .sd-not { margin: 18px 0 0; font-size: 13px; color: var(--ink-muted); }

/* Sticker material help: a small ? in a circle that opens a short guide to each material */
.order-form .of-lab { display: flex; align-items: center; gap: 8px; }
.order-form .of-help { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--sun-yellow); color: var(--ink); font: 700 12px/1 var(--body-font); cursor: pointer; }
.order-form .of-help::after { content: ""; position: absolute; inset: -12px; }
.materials-dialog .md-list { margin: 8px 0 0; }
.materials-dialog dt { margin: 18px 0 0; font: 400 1.25rem/1.2 var(--display-font); }
.materials-dialog dd { margin: 4px 0 0; line-height: 1.45; }

/* Photo print size guide: to-scale infographic */
.sizes-dialog .sz-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.sizes-dialog .sz-chart { --u: .34px; display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 560px) { .sizes-dialog .sz-chart { --u: .5px; } .sizes-dialog .sz-row { gap: 14px 16px; } .sizes-dialog .sz-cap { font-size: 11px; } }
.sizes-dialog .sz-row { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 14px 8px; margin: 0; padding: 0; list-style: none; }
.sizes-dialog .sz-row li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 50px; }
.sizes-dialog .sz-box { display: grid; place-items: center; box-sizing: border-box; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); border: 2px solid var(--ink); background: var(--bg, var(--paper)); }
.sizes-dialog .sz-box b { font: 400 clamp(14px, 4.4vw, 22px)/1 var(--display-font); color: var(--ink); }
.sizes-dialog .sz-cap { font: 700 10px/1.3 var(--body-font); text-align: center; white-space: nowrap; }
.sizes-dialog .c-blue { --bg: color-mix(in srgb, var(--blue) 30%, #fff); }
.sizes-dialog .c-pink { --bg: color-mix(in srgb, var(--pink) 35%, #fff); }
.sizes-dialog .c-yellow { --bg: var(--sun-yellow); }
.sizes-dialog .c-orange { --bg: color-mix(in srgb, var(--orange) 45%, #fff); }

/* Instant film and photo strip guide */
.inst-dialog .sz-chart { --u: 1.15px; }
@media (min-width: 560px) { .inst-dialog .sz-chart { --u: 1.8px; } }
.inst-dialog .sz-inst { display: block; padding: 7% 7% 20%; }
.inst-dialog .sz-inst i { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid var(--ink); background: #fff; }
.inst-dialog .sz-strip { display: flex; flex-direction: column; justify-content: space-between; gap: 5%; padding: 5% 8%; align-items: stretch; }
.inst-dialog .sz-strip i { display: block; flex: 1; border: 2px solid var(--ink); background: #fff; }
.inst-dialog .sz-strip s { display: block; flex: none; height: 6%; min-height: 4px; margin: 4% 25%; background: var(--ink); opacity: .35; }
.inst-dialog .st-a { padding-bottom: 8%; }

/* Paper samples */
.papers-dialog img { display: block; width: 100%; max-width: 560px; height: auto; margin: 14px auto 0; border: 3px solid var(--ink); }
.papers-dialog .sz-note { margin: 14px 0 0; }
.materials-dialog dt small { display: block; margin-top: 3px; font: 500 12px/1.2 var(--body-font); color: var(--ink-muted); }
.order-form .of-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.order-form .of-btnrow { gap: 6px; }
.order-form .of-btnrow .of-samples { padding-inline: 8px; font-size: 11px; letter-spacing: 0; }

/* Print samples: branded paper tags */
#prints-dialog .pr-grid { width: 100%; box-sizing: border-box; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#prints-dialog .pr-grid li { margin: 0; }
#prints-dialog .pr-fig { position: relative; margin: 0; }
#prints-dialog .pr-fig img { border: 3px solid var(--ink); }
#prints-dialog .pr-tag { position: absolute; min-width: 34%; max-width: 62%; box-sizing: border-box; margin: 0; padding: 7px 8px; background: var(--sun-yellow); border: 2px solid var(--ink); color: var(--ink); font: 700 12px/1.15 var(--body-font); text-align: left; text-transform: uppercase; letter-spacing: .02em; }
#prints-dialog .pr-tl { top: 3%; left: 4%; }
#prints-dialog .pr-tr { top: 3%; right: 4%; text-align: right; }
#prints-dialog .pr-br { bottom: 3%; right: 4%; text-align: right; }
@media (min-width: 560px) { #prints-dialog .pr-tag { font-size: 13px; padding: 5px 10px; } }
#prints-dialog .sz-note { margin-top: 16px; }

/* RISO info */
.of-group > legend .of-help { display: inline-grid; vertical-align: middle; margin-left: 8px; }
.riso-dialog .rd-h { margin: 22px 0 0; font: 400 1.25rem/1.2 var(--display-font); }
.riso-dialog .rd-list { margin: 8px 0 0; padding-left: 20px; }
.riso-dialog .rd-list li { margin: 3px 0; line-height: 1.45; }
.riso-dialog .rd-p { margin: 8px 0 0; line-height: 1.5; }

/* Price guide: keep the order button below the mockup link instead of floating over it */
.pl-orderbar { position: static; margin-top: 24px; pointer-events: auto; }
.pg-photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pg-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); }
.pg-photos li { gap: 10px; }

/* Price guide: the small orange dot sits quietly in the top corner instead of over the heading */
.d4 { width: 28px; height: 28px; left: 3%; top: 16px; opacity: .85; }
.of-more-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.of-cancel { padding: 8px 2px; border: 0; background: none; color: var(--ink); font: 700 13px var(--body-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.of-cancel[hidden] { display: none; }
.of-cancel:hover { color: var(--blue); }

/* Price guide: facts live behind a small ? instead of a row of chips */
.pg-info { position: relative; display: block; margin: 4px 0 0; }
.pg-q { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--sun-yellow); color: var(--ink); font: 700 13px/1 var(--body-font); cursor: pointer; }
.pg-q::after { content: ""; position: absolute; inset: -10px; }
.pg-q[aria-expanded="true"] { background: var(--ink); color: var(--sun-yellow); }
.pg-pop { position: absolute; z-index: 8; top: calc(100% + 10px); left: 0; width: max-content; max-width: min(320px, calc(100vw - 48px)); margin: 0; padding: 12px 16px; list-style: none; background: var(--white, #fff); border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); }
.pg-pop[hidden] { display: none; }
.pg-pop li { margin: 0; padding: 4px 0 4px 16px; position: relative; font: 600 14px/1.35 var(--body-font); }
.pg-pop li::before { content: ""; position: absolute; left: 0; top: .75em; width: 7px; height: 7px; background: var(--orange); }

/* Price guide: short intro with photo tiles (replaces the What We Print page) */
.pg-welcome { margin: 0 0 40px; }
.pg-intro { margin: 0 0 18px; max-width: 58ch; font-size: 1.1rem; line-height: 1.5; }
.pg-picks { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; }
.pg-picks li { flex: none; width: 120px; scroll-snap-align: start; }
.pg-pick { position: relative; display: block; color: var(--ink); text-decoration: none; }
.pg-pick img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); background: var(--paper); transition: transform .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s ease; }
.pg-pick span { display: block; margin-top: 10px; font: 700 13px/1.2 var(--body-font); }
.pg-pick:hover img, .pg-pick:focus-visible img { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.pg-pick[aria-current="true"] img { outline: 3px solid var(--orange); outline-offset: 2px; }
.pg-pick[aria-current="true"] span { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 3px; }
@media (min-width: 560px) { .pg-picks { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 18px 16px; } .pg-picks li { width: auto; } }
@media (min-width: 960px) { .pg-picks { grid-template-columns: repeat(8, 1fr); gap: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { .pg-pick img { transition: none; } }

/* Price guide: drop the floating orange dot that drifted away from the content on wide screens */
#price-guide .pd-shapes .d4 { display: none; }


/* Price guide tiles: readable labels at every width */
.pg-pick span { font-size: clamp(14px, 1.05vw + 8px, 17px); line-height: 1.25; }
.pg-picks { gap: 14px; }
@media (min-width: 560px) { .pg-picks { gap: 22px 16px; } }
@media (min-width: 960px) { .pg-picks { gap: 22px 18px; } }
@media (max-width: 559px) { .pg-picks li { width: 132px; } }

/* Mockup maker title matches the other page titles */
#mm-title { font-family: var(--display-font); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.625rem); line-height: 1.02; letter-spacing: normal; margin: 0 0 20px; }

/* Footer colour continues below the page on phones (the browser bar area), so no light gap shows under the footer */
/* light above the page, footer colour below it: the bounce area at either end then matches what it touches */
html { background: var(--ink) linear-gradient(var(--paper), var(--paper)) 0 -100vh / 100% 200vh no-repeat; }
body { background: var(--paper); }

/* About: copy only, no photo column */
.about-grid { grid-template-columns: 1fr; }

/* Price guide quick quote (stickers) */
.pq { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 20px 0 28px; }
.pq-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pq-card { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--bc, var(--orange)); cursor: pointer; font-family: var(--body-font); transition: transform .12s, box-shadow .12s; }
.pq-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bc, var(--orange)); }
.pq-card[aria-pressed="true"] { background: var(--sun-yellow); }
.pq-cn { font-family: var(--display-font); font-size: 1.1rem; line-height: 1.15; }
.pq-cd { font-size: .86rem; line-height: 1.4; color: #3a3b38; }
.pq-cp { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 1rem; }
.pq-cp small { font-weight: 500; font-size: .8rem; }
.pq-panel { position: sticky; top: 16px; background: var(--white); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--orange); padding: 22px; }
.pq-h { margin: 0 0 14px; font-family: var(--display-font); font-size: 1.3rem; font-weight: 400; }
.pq-fields { display: grid; gap: 12px; }
.pq-f { display: grid; gap: 5px; font-size: .84rem; font-weight: 700; }
.pq-f select, .pq-f input { width: 100%; box-sizing: border-box; font: inherit; font-weight: 500; font-size: 1rem; padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; min-height: 44px; }
.pq-step { display: grid; grid-template-columns: 44px 1fr 44px; }
.pq-step button { font: inherit; font-size: 1.3rem; border: 2px solid var(--ink); background: var(--sun-yellow); color: var(--ink); cursor: pointer; min-height: 44px; border-radius: 0; }
.pq-step input { text-align: center; border-left: 0; border-right: 0; }
.pq-note { margin: 10px 0 0; font-size: .82rem; color: #3a3b38; min-height: 1em; }
.pq-out { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 0; border-top: 2px dashed var(--ink); border-bottom: 2px dashed var(--ink); }
.pq-k { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pq-out strong { font-family: var(--display-font); font-weight: 400; font-size: 1.3rem; }
.pq-out .pq-big { font-size: 1.8rem; color: var(--orange); }
.pq-tier { margin: 12px 0 0; font-size: .86rem; font-weight: 600; }
.pq-go { display: block; margin-top: 14px; text-align: center; padding: 13px 16px; background: var(--ink); color: var(--white); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--orange); font-family: var(--display-font); text-decoration: none; }
.pq-fine { margin: 10px 0 0; font-size: .78rem; color: #55564f; }
@media (max-width: 860px) {
  .pq { grid-template-columns: 1fr; }
  .pq-panel { position: static; order: -1; }
}
@media (max-width: 480px) { .pq-cards { grid-template-columns: 1fr; } .pq-panel { padding: 18px; } }
.pq-card .pg-badge { align-self: flex-start; }
.pq-solo { grid-template-columns: minmax(0, 560px); }
.pq-solo .pq-panel { position: static; }
.pq-prod { margin: 0; font-family: var(--display-font); font-size: 1.1rem; }
.pq-static { margin: 0; font-size: .92rem; }
.pq-static span { font-weight: 700; margin-right: 6px; }
.pq-static small { color: #55564f; }
.pq-out .pq-sm { font-size: 1.2rem; }
.pq-out > div:last-child { text-align: right; }
.pq-f select option:disabled { color: #999; }

/* Price guide: keep the category picker close to the quote */
.pl-dd { margin-bottom: 8px; }
.pf { margin-top: 0; gap: 10px; }
.pf-head:empty { display: none; }
.pg-lead { margin: 0; font-size: 1rem; }
.pg-info { margin: 0; }
.pq { margin: 6px 0 24px; }

/* ? sits in the quote panel header, top right */
.pq-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.pq-hd .pq-h { margin: 0; }
.pq-hd .pg-info { margin: 0; flex: none; }
.pq-hd .pg-pop { left: auto; right: 0; }

/* No double-tap auto-zoom (pinch-zoom still works) */
html, body, a, button, summary, select, input, textarea, label, [role="button"], .pg-q, .pq-step button { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 16px form text so iOS does not zoom in when a field is focused */
@media (max-width: 820px) {
  input, select, textarea, .order-form .field select, .order-form input, .order-form textarea, .helper-form input, .pl-search input { font-size: 16px; }
  .order-form input[type="file"] { font-size: 16px; }
}

/* Price guide: photo tiles are the one category picker; dropdown and big heading are gone */
.pl-head, .pl-dd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.pg-choose { margin: 0 0 12px; font: 700 11px/1.2 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.pg-welcome { margin-bottom: 28px; }
.pg-cat { margin: 0; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display-font); color: var(--ink); }
@media (max-width: 559px) {
  .pg-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; overflow: visible; }
  .pg-picks li { width: auto; }
  .pg-pick span { font-size: 12px; line-height: 1.2; margin-top: 6px; }
}

/* iPhone: let the page run under the status bar and home bar so there is no white strip */
.site-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.site-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.helper-fab, .to-top { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* Mobile: inner pages use the same tight rhythm as the homepage */
@media (max-width: 650px) {
  .section.page-section, .section.order-section { padding-top: 32px; padding-bottom: 40px; }
  .philosophy { margin-top: 36px; }
  .process-heading, .price-top { margin-bottom: 22px; }
  .about-grid, .contact-grid { gap: 20px; }
  .process-item { padding: 18px 0; }
  .pg-welcome { margin-bottom: 20px; }
  .pq { margin-bottom: 16px; }
  .pf { gap: 12px; }
}
.pg-finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pg-finishes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Single-product categories: reference accordions on the left, quote on the right */
.pq-left { display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; }
.pg-stock { display: block; width: 100%; max-width: 420px; height: auto; border: 2px solid var(--ink); box-shadow: var(--off-3) var(--ink); }
.pg-guide dt small { display: block; margin-top: 2px; font: 500 12px/1.2 var(--body-font); color: #55564f; }
@media (max-width: 860px) { .pq-left { order: 2; } }

/* Price calculator tiles: names look like buttons, picked tile is clearly selected */
.pg-pick span { margin-top: 10px; padding: 7px 8px; border: 2px solid var(--ink); background: var(--white); box-shadow: 3px 3px 0 var(--ink); text-align: center; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.pg-pick:hover span, .pg-pick:focus-visible span { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--orange); background: var(--sun-yellow); }
.pg-pick:active span { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pg-pick[aria-current="true"] span { background: var(--sun-yellow); text-decoration: none; box-shadow: 3px 3px 0 var(--orange); }
.pg-pick[aria-current="true"] span::before { content: "✓ "; }
.pg-pick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@keyframes pgNudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); box-shadow: 3px 8px 0 var(--orange); } }
.pg-cue .pg-pick:not([aria-current="true"]) span { animation: pgNudge .9s ease-in-out 1.4 both; animation-delay: calc(.5s + var(--i, 0) * .09s); }
.pg-cue li:nth-child(1) { --i: 0; } .pg-cue li:nth-child(2) { --i: 1; } .pg-cue li:nth-child(3) { --i: 2; } .pg-cue li:nth-child(4) { --i: 3; }
.pg-cue li:nth-child(5) { --i: 4; } .pg-cue li:nth-child(6) { --i: 5; } .pg-cue li:nth-child(7) { --i: 6; } .pg-cue li:nth-child(8) { --i: 7; }
@media (prefers-reduced-motion: reduce) { .pg-cue .pg-pick span { animation: none !important; } .pg-pick span { transition: none; } }
@media (max-width: 559px) { .pg-pick span { padding: 5px 3px; box-shadow: 2px 2px 0 var(--ink); } .pg-pick[aria-current="true"] span { box-shadow: 2px 2px 0 var(--orange); } }
.pg-pick span { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: clamp(13px, .9vw + 8px, 15px); }
@media (max-width: 559px) { .pg-pick span { min-height: 40px; font-size: 12px; } }
.pg-pick[aria-current="true"] span::before { content: "✓"; margin-right: 6px; }

/* Tile names: two lines at most on desktop and tablet */
.pg-pick span { padding: 5px 4px; min-height: 40px; font-size: 13px; line-height: 1.15; text-wrap: balance; }
@media (min-width: 1100px) { .pg-pick span { font-size: 14px; } }
@media (max-width: 559px) { .pg-pick span { font-size: 11px; padding: 4px 2px; min-height: 36px; } }
@media (min-width: 1100px) { .pg-pick span { font-size: 13px; } }
@media (min-width: 1200px) { .pg-pick span { font-size: 14px; } }
@media (min-width: 960px) and (max-width: 1199px) { .pg-pick span { font-size: 12px; padding: 5px 2px; } }
@media (min-width: 960px) and (max-width: 1099px) { .pg-pick span { font-size: 11px; } }

/* Desktop nav: Order Form gets the same hover/current underline as the other links (Print Green) */
@media (min-width: 761px) {
  .site-nav a[href="order-form.html"], .site-nav a[href="order-form.html"][aria-current="page"], .site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible {
    background-image: var(--ul) !important; background-repeat: no-repeat; background-position: 0 100%; background-size: 0 4px; transition: background-size .22s ease;
  }
  .site-nav a[href="order-form.html"]:hover, .site-nav a[href="order-form.html"]:focus-visible, .site-nav a[href="order-form.html"][aria-current="page"] { background-size: 100% 4px; }
}

/* Price calculator heading: same kicker-to-title spacing as the other pages */
.process-heading.price-top { gap: 0; }

/* Mockup maker: small ? beside Your Artwork */
.mm-info { display: inline-block; vertical-align: middle; margin: 0 0 0 8px; }
.mm-info .pg-pop { display: block; font: 600 14px/1.4 var(--body-font); text-transform: none; letter-spacing: 0; color: var(--ink); width: 280px; }
.mm-info .pg-pop[hidden] { display: none; }
#mm-art-set { position: relative; }
.mm-info { position: static; }
#mm-art-set { position: relative; }
.mm-info { position: static; }
.mm-info .pg-pop { position: absolute; top: 30px; left: 0; width: min(300px, 100%); box-sizing: border-box; }

/* Order review: clean label and value lists */
.of-summary .rv-item { margin: 0 0 14px; }
.of-summary .rv-item:last-child { margin-bottom: 0; }
.of-summary .rv-list { list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important; display: grid; gap: 4px; }
.of-summary .rv-list li { list-style: none !important; padding-left: 0 !important; display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(25,26,24,.18); font-size: 15px; line-height: 1.4; }
.of-summary .rv-list li:last-child { border-bottom: 0; }
.of-summary .rv-list span { color: #4a4b47; font-weight: 500; }
.of-summary .rv-list b { font-weight: 600; }
.of-summary .rv-item > strong { display: block; }

/* Paper Dusties Helper: smaller button, bubble and chat window (smaller than the header logo) */
.helper-fab, .helper-fab:hover { gap: 6px; }
.helper-fab-dog, .helper-fab:hover .helper-fab-dog { width: 52px; height: 52px; }
.helper-fab-label { font-size: .8rem; padding: 6px 10px; border-width: 2px; border-radius: 14px; box-shadow: var(--off-3) var(--blue); }
.helper-fab-label::after { width: 11px; height: 11px; right: -8px; margin-top: -5px; border-top-width: 2px; border-right-width: 2px; }
.helper-panel { width: min(300px, calc(100vw - 24px)); max-height: min(440px, calc(100svh - 150px)); bottom: 120px; }
.helper-head { padding: 8px 10px; gap: 8px; }
.helper-head img { width: 34px; height: 34px; }
.helper-head strong { font-size: 14px; }
.helper-head span { font-size: 11.5px; }
.helper-log { padding: 10px; gap: 8px; }
.helper-msg { font-size: 13px; padding: 8px 10px; }
.helper-chips { padding: 0 10px 8px; }
@media (max-width: 650px) {
  .helper-fab { right: 12px; bottom: calc(14px + var(--lift, 0px)); }
  .helper-fab-dog, .helper-fab:hover .helper-fab-dog { width: 42px; height: 42px; }
  .helper-fab-label { font-size: .74rem; padding: 5px 8px; }
  .helper-panel { right: 12px; width: min(300px, calc(100vw - 24px)); bottom: calc(66px + var(--lift, 0px)); max-height: calc(100svh - 96px); }
  .helper-chips button { padding: 5px 9px; font-size: 12px; min-height: 36px; }
  .helper-chips { gap: 6px; }
}

.mm-sheetwrap, .mm-svg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mm-svg text { pointer-events: none; }
@media print { .mm-sheetwrap { display: none !important; } }

.mm-cupbox { margin: 18px 0 8px; padding: 14px; background: var(--paper); border: 2px solid var(--line); display: grid; gap: 10px; justify-items: center; }
.mm-cuplab { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mm-cupbox select { justify-self: stretch; }
.mm-cup-svg { display: block; width: 100%; max-width: 300px; height: auto; -webkit-user-select: none; user-select: none; }
.mm-cupbox[hidden] { display: none; }
@media print { .mm-cupbox { display: none !important; } }

.mm-quickbtn.is-on { background: var(--ink); color: var(--paper); }

/* RECENT WORKS */
.works-block { background: transparent; }
.works-block h2 { max-width: 18ch; }
.works-lead { max-width: 58ch; margin: 12px 0 28px; font-size: 18px; line-height: 1.55; }
.works-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work-tile { position: relative; display: block; width: 100%; padding: 0; border: 3px solid var(--ink); background: var(--white); box-shadow: var(--off-5) var(--ink); cursor: pointer; overflow: hidden; aspect-ratio: 4 / 5; transition: transform .15s ease, box-shadow .15s ease; }
.work-tile:hover, .work-tile:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--off-8) var(--ink); }
.work-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-tag { position: absolute; left: 0; bottom: 0; padding: 7px 12px; background: var(--sun-yellow); color: var(--ink); border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); font: 700 13px/1.1 var(--body-font); }
.works-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }
.ig-note-inline { margin: 0; }
.work-dialog { padding: 0; border: 3px solid var(--ink); background: var(--white); box-shadow: var(--off-8) var(--pink); max-width: min(92vw, 520px); max-height: 92vh; overflow: auto; }
.work-dialog::backdrop { background: rgba(25, 26, 24, .7); }
.work-dialog img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
.work-dialog p { margin: 0; padding: 12px 16px; font-weight: 700; border-top: 3px solid var(--ink); }
.work-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 2px solid var(--ink); background: var(--sun-yellow); color: var(--ink); font: 700 24px/1 var(--body-font); cursor: pointer; }
@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 380px) { .works-grid { gap: 10px; } .work-tag { font-size: 12px; padding: 6px 9px; } }

@media (max-width: 900px) { .works-block .pd-shapes { display: none; } }

.pq-lab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pq-min { padding: 2px 7px; background: var(--sun-yellow); border: 2px solid var(--ink); font: 700 12px/1.2 var(--body-font); white-space: nowrap; vertical-align: 1px; }

@media (max-width: 700px) { #pricelist .pq-cards { display: none; } }

.pq-desc { display: none; }
@media (max-width: 700px) { .pq-desc { display: block; margin: -4px 0 0; font-size: .82rem; font-weight: 500; color: #55564f; } }

.pq-fnote { margin: -3px 0 0; font-size: .82rem; font-weight: 500; color: #3a3b38; }
.pq-note:empty { display: none; }
.pq-tier:empty { display: none; }

.pg-tag-after { max-width: none; }
@media (min-width: 900px) { .pg-tag-after { white-space: nowrap; } }

@media (min-width: 900px) { .mm-lead { max-width: none; white-space: nowrap; } }

.home-block .lead { font-size: 18px; line-height: 1.55; }

.body-copy { font-size: 17px; line-height: 1.7; max-width: 700px; }

@media (min-width: 900px) { .about-copy .body-copy { max-width: none; } }

.philosophy .process-item p { font-size: 17px; line-height: 1.7; }
.philosophy .process-item h3 { font-size: 22px; }
@media (min-width: 900px) { .philosophy .process-item { grid-template-columns: 90px minmax(220px, .55fr) 1.45fr; } }

@media (min-width: 900px) { .home-block .lead { max-width: none; } }

/* Up arrow sits exactly above the helper dog (centers line up). */
.to-top { right: 27px; }
@media (max-width: 760px) { .to-top { right: 16px; } }
@media (max-width: 650px) { .to-top { right: 11px; } }

.order-form .of-tip { margin: 0; padding: 8px 12px; background: var(--paper); border: 2px solid var(--ink); font-size: 13px; line-height: 1.4; }
.order-form .of-tip[hidden] { display: none; }

.of-recap { margin-bottom: 18px; display: grid; gap: 10px; }
.of-recap .of-hint { margin: 0; }

.of-items .it-btns { display: inline-flex; gap: 14px; flex-shrink: 0; }
.of-items .it-ed { appearance: none; background: none; border: 0; padding: 0; font: 700 13px var(--body-font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap); min-width: 44px; }

/* ABOUT: PHOTO STRIP (always moving, not clickable, never pauses) */
.mq { overflow: hidden; width: 100vw; position: relative; left: 50%; margin: clamp(36px, 6vw, 72px) 0 clamp(36px, 6vw, 72px) -50vw; padding: 14px 0 22px; pointer-events: none; }
.mq-track { display: flex; width: max-content; animation: mq-move 90s linear infinite; will-change: transform; }
.mq-group { display: flex; gap: 18px; margin: 0; padding: 0 9px; list-style: none; }
.mq-item { display: block; height: 260px; border: 3px solid var(--ink); background: var(--white); box-shadow: var(--off-5) var(--ink); overflow: hidden; }
.mq-item img { width: auto; height: 100%; max-width: none; object-fit: cover; display: block; }
@keyframes mq-move { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (max-width: 760px) { .mq-item { height: 200px; } .mq-group { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation-duration: 180s; } }