/* ============================================================
   3@1 STORE TEMPLATE — layer on top of stark.css
   Store-level components: product cards, contact info, hours,
   courier quote widget, nav dropdowns, FAQ, price tables.
   ============================================================ */

/* ---- nav dropdown (Courier / Printing groups) ---- */
.has-sub { position: relative; }
.has-sub > a::after { content: " ▾"; font-size: .7em; opacity: .7; }
.sub {
  list-style: none; margin: 0; padding: .45rem;
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 230px; border-radius: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(0,49,121,.14); box-shadow: 0 14px 34px rgba(4,18,51,.18);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: .18s ease;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; translate: 0 0; }
.sub a { display: block; padding: .55rem .9rem; border-radius: 9px; white-space: nowrap; }
@media (max-width: 1080px) {
  /* fullscreen menu: flatten groups */
  .has-sub > a { display: none; }
  .sub {
    position: static; transform: none; opacity: 1; visibility: visible; translate: 0;
    background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; min-width: 0;
  }
  .sub li { margin: 0; }
}

/* ---- product showcase ---- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pcard {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,49,121,.12); box-shadow: 0 10px 26px rgba(4,18,51,.10);
  transition: translate .2s ease, box-shadow .2s ease;
}
.pcard:hover { translate: 0 -4px; box-shadow: 0 18px 38px rgba(4,18,51,.16); }
.pcard__imgwrap { display: block; aspect-ratio: 1; overflow: hidden; }
.pcard__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .3s ease; }
.pcard:hover .pcard__imgwrap img { scale: 1.05; }
.pcard__body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.pcard__body h3 { font-family: var(--font-d); text-transform: uppercase; font-size: 1.25rem; margin: 0; color: var(--navy); }
.pcard__blurb { font-size: .84rem; margin: 0; color: rgba(10,21,48,.72); flex: 1; }
.pcard__price { font-weight: 800; color: var(--red); margin: 0; }
.pcard__price span { font-weight: 600; font-size: .72rem; color: rgba(10,21,48,.55); }
.pcard__cta { justify-content: center; }
.pcard__more { font-size: .8rem; font-weight: 700; text-align: center; color: var(--navy); }
@media (max-width: 1080px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pgrid { grid-template-columns: 1fr; } }

/* ---- store info block (contact section) ---- */
.sinfo { font-style: normal; margin: 1.2rem 0 1.6rem; display: grid; gap: .55rem; }
.sinfo__row { display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
.sinfo__row svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; color: var(--yellow); }
.sinfo__row a { color: #fff; font-weight: 700; }
.sinfo__plabel { margin-left: .45rem; font-size: .82em; color: rgba(255,255,255,.55); align-self: center; }
.sinfo-under { display: flex; align-items: center; justify-content: space-between; gap: .9rem 1.2rem; flex-wrap: wrap; margin: 1rem 0 .3rem; }
.sinfo__social { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.sinfo__follow { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.75); margin-right: .2rem; }
.sinfo__social a { color: var(--yellow); display: grid; place-items: center; width: 35px; height: 35px; border: 1.5px solid var(--yellow); border-radius: 50%; transition: color .15s, border-color .15s; }
.sinfo__social a:hover { color: #fff; border-color: #fff; }
.sinfo__social svg { width: 25px; height: 25px; }

/* enquiry form: honeypot (off-screen for humans, tempting for bots) + status */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sform__status { margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: 10px; font-size: .9rem; line-height: 1.5; }
.sform__status a { font-weight: 700; text-decoration: underline; }
.sform__status--pending { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.sform__status--ok { background: rgba(46,160,87,.28); border: 1px solid rgba(74,200,120,.7); color: #eafff0; }
.sform__status--ok a, .sform__status--err a { color: #fff; }
.sform__status--err { background: rgba(213,35,47,.16); border: 1px solid rgba(213,35,47,.5); color: #ffd9dc; }
.sinfo__h { font-family: var(--font-d); text-transform: uppercase; font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.hours { border-collapse: collapse; font-size: .88rem; }
.hours td { padding: .3rem 1.4rem .3rem 0; border-bottom: 1px dashed rgba(255,255,255,.18); }
.hours td:last-child { font-weight: 700; }
.tbc { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: .04em; }
.ssec--light .tbc { color: var(--orange); }

/* ---- courier quote widget ---- */
.qw {
  border-radius: 20px; padding: 1.6rem;
  background: rgba(4,18,51,.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(0,174,239,.25);
}
.qw h3 { font-family: var(--font-d); text-transform: uppercase; font-size: 1.5rem; margin: 0 0 .3rem; }
.qw__sub { font-size: .86rem; color: rgba(255,255,255,.65); margin: 0 0 1.1rem; }
.qw__row { margin-bottom: 1rem; }
.qw__row > label { display: block; font-weight: 700; font-size: .82rem; margin-bottom: .4rem; color: rgba(255,255,255,.8); }
.qw__row input {
  width: 100%; padding: .7rem .9rem; border-radius: 10px; font: inherit; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
}
.qw__select {
  width: 100%; padding: .7rem .9rem; border-radius: 10px; font: inherit; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
}
.qw__select option { color: #0a1530; }
.qw__grid--one { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
.qw__grid--one .qw__opt { padding: 1.2rem; }
.qw__grid--one .qw__price { font-size: 1.5rem; }
.qw__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.qw__chips .chip { cursor: pointer; font: inherit; font-size: .8rem; }
.qw__chips .chip.is-on { background: linear-gradient(120deg, var(--red), var(--red-hot)); border-color: transparent; color: #fff; }
.qw__custom .field input { color: #fff; }
.qw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.1rem 0 .6rem; }
.qw__opt {
  border-radius: 14px; padding: .9rem; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.qw__opt h4 { font-family: var(--font-d); text-transform: uppercase; font-size: 1rem; margin: 0; }
.qw__days { font-size: .72rem; color: rgba(255,255,255,.55); margin: .15rem 0 .5rem; }
.qw__price { font-weight: 800; font-size: 1.15rem; color: var(--yellow); margin: 0; }
.qw__fine { font-size: .72rem; color: rgba(255,255,255,.45); margin: .4rem 0 1rem; }
.qw__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 680px) { .qw__grid { grid-template-columns: 1fr; } .qw { padding: 1.2rem; } }

/* ---- 3-step strip (how it works) ---- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; counter-reset: step; }
.step3 { text-align: center; padding: 1.4rem 1.1rem; border-radius: 18px;
  background: rgba(255,255,255,.86); border: 1px solid rgba(0,49,121,.12); box-shadow: 0 10px 26px rgba(4,18,51,.08); }
.step3 img { width: 74px; height: 74px; object-fit: contain; margin-bottom: .6rem; display: block; margin-inline: auto; }
.step3 h3 { font-family: var(--font-d); text-transform: uppercase; color: var(--navy); font-size: 1.2rem; margin: .2rem 0 .4rem; }
.step3 p { font-size: .86rem; color: rgba(10,21,48,.72); margin: 0; }
@media (max-width: 680px) { .steps3 { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: .7rem; }
.faq details {
  border-radius: 14px; background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,49,121,.12); padding: .9rem 1.2rem;
}
.faq summary { font-weight: 800; color: var(--navy); cursor: pointer; }
.faq details p { font-size: .9rem; color: rgba(10,21,48,.78); margin: .6rem 0 0; }
.ssec--deep .faq details { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.ssec--deep .faq summary { color: #fff; }
.ssec--deep .faq details p { color: rgba(255,255,255,.75); }

/* ---- price cards (photo sizes / stamps) ---- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.price-card {
  text-align: center; padding: 1.5rem 1rem; border-radius: 18px;
  background: rgba(255,255,255,.86); border: 1px solid rgba(0,49,121,.12); box-shadow: 0 10px 26px rgba(4,18,51,.08);
}
.price-card h3 { font-family: var(--font-d); text-transform: uppercase; color: var(--navy); margin: 0 0 .2rem; font-size: 1.25rem; }
.price-card .sz { font-size: .8rem; color: rgba(10,21,48,.6); margin: 0 0 .6rem; }
.price-card .amt { font-weight: 800; font-size: 1.5rem; color: var(--red); margin: 0; }
.price-card .amt span { display: block; font-size: .7rem; font-weight: 600; color: rgba(10,21,48,.5); }
@media (max-width: 680px) { .prices { grid-template-columns: 1fr; } }

/* ---- stepped print sizes: cards ARE the print, to relative scale (Chris, 2026-07-10) ---- */
.psteps { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.7rem, 2.4vw, 1.8rem); flex-wrap: wrap; }
/* real printed photographs: white print border, landscape photo per size,
   label strip on the border below the image (2026-07-21) */
.pstep {
  position: relative; border-radius: 3px;
  display: flex; flex-direction: column;
  background: #fff; border: none;
  padding: clamp(5px, .65vw, 8px);
  box-shadow: 0 16px 34px -12px rgba(2,20,60,.5);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.pstep:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 26px 48px -14px rgba(2,20,60,.6); }
/* widths track the real LONG edge (15 / 18 / 20 cm); the shot's aspect-ratio does the rest */
.pstep--s { width: clamp(170px, 19vw, 230px);   rotate: -2deg; }
.pstep--m { width: clamp(200px, 22.8vw, 276px); rotate: 1.4deg; }
.pstep--l { width: clamp(222px, 25.3vw, 306px); rotate: -.8deg; }
.pstep__shot { display: block; overflow: hidden; }
.pstep--s .pstep__shot { aspect-ratio: 15 / 10; }
.pstep--m .pstep__shot { aspect-ratio: 18 / 13; }
.pstep--l .pstep__shot { aspect-ratio: 20 / 15; }
.pstep__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pstep__body { padding: .5rem .2rem .25rem; text-align: center; color: #0a1530; }
.pstep__body h3 { font-family: var(--font-d); text-transform: uppercase; font-size: 1.05rem; margin: 0; color: #0a1530; }
.pstep__body .sz { font-size: .72rem; color: rgba(10,21,48,.6); margin: 0; }
.pstep__body .amt { font-weight: 700; font-size: .8rem; color: rgba(10,21,48,.55); margin: .1rem 0 0; line-height: 1.15; }
.pstep__body .amt span { display: block; font-size: .62rem; font-weight: 600; color: rgba(10,21,48,.45); }
.psteps__note { text-align: center; margin: 1.4rem 0 0; font-size: .8rem; color: rgba(10,21,48,.55); }
@media (max-width: 560px) {
  .psteps { gap: .55rem; }
  .pstep--s { width: 44vw; } .pstep--m { width: 52vw; } .pstep--l { width: 58vw; }
  .pstep__body { padding: 0 .35rem .55rem; }
  .pstep__body h3 { font-size: .92rem; }
  .pstep__body .sz { font-size: .62rem; margin-bottom: .25rem; }
  .pstep__body .amt { font-size: .92rem; }
  .pstep__body .amt span { font-size: .54rem; }
}

/* ---- stamp size chips ---- */
.sizes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.sizes .chip { font-size: .84rem; }
.ssec--light .chip {
  color: var(--navy); border-color: rgba(0,49,121,.3);
  background: rgba(0,49,121,.07);
}

/* ---- generic split media section ---- */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.media-split img { width: 100%; border-radius: 18px; box-shadow: 0 16px 40px rgba(4,18,51,.22); }
@media (max-width: 900px) { .media-split { grid-template-columns: 1fr; } }
/* transparent cutout in a media-split slot: .media-split img draws a rounded
   border + shadow, which would paint a phantom box around empty space */
.media-split img.media-split__cutout {
  border-radius: 0; box-shadow: none; background: none;
  width: auto; max-width: 100%; max-height: 380px; margin-inline: auto;
  filter: drop-shadow(0 18px 34px rgba(4,25,73,.3));
}

/* ============================================================
   ⚠ DEAD-CODE RESCUE — home hero on mobile (2026-07-17)
   stark.css carries 31 `body.home …` mobile rules, but NO page in this
   template ever sets class="home" on <body> (verified across all 29
   commits — it was inherited from the corporate site). So the entire
   mobile tuning block for the home hero has never applied: the H1, lead,
   pill, buttons and Printiva all render at desktop sizes on a phone.
   That is why mobile "looked a bit odd".

   We do NOT simply add class="home": stark's block also does
   `body.home .snav__toggle { display:none }` and switches to a
   `.hero-burger` element that does not exist in this markup — adding the
   class would delete the mobile menu button entirely.
   Instead the useful rules are ported here onto `.shero--slim`, which is
   real and index-only. The nav rules (stark 883–889) are deliberately
   NOT ported.
   ============================================================ */
@media (max-width: 1080px) {
  .shero--slim { padding: .5rem 0 3.5rem; min-height: auto; }
  .shero--slim h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); margin: .7rem 0; }
  .shero--slim .pill { font-size: .68rem; padding: .3rem .8rem; }
  .shero--slim .shero__lead { font-size: .92rem; margin-bottom: 1.2rem; }
  .shero--slim .btn--lg { padding: .85rem 1.4rem; font-size: .92rem; }
  /* the short button labels exist in the markup but never showed */
  .shero--slim .btn-full { display: none; }
  .shero--slim .btn-short { display: inline; }
  .shero--slim .shero__logo--stack { width: min(58vw, 215px); margin: 1.1rem auto 0; }
  .shero--slim .holo-p img, .shero--slim .holo-p video { width: min(58vw, 230px); }
  .shero--slim .arc { width: min(75vw, 300px); }
  .shero--slim .shero__stage { margin-top: -.4rem; margin-bottom: -2.4rem; z-index: 0; }
  .shero--slim .shero__chip { display: none; }   /* collides with Printiva at phone widths */
}
@media (max-width: 680px) {
  .shero--slim .shero__logo--stack { width: min(62vw, 230px); }
  .shero--slim .arc { width: min(95vw, 380px); }
  .shero--slim .holo-p img, .shero--slim .holo-p video { width: min(66vw, 260px); }
}

/* ============================================================
   MOBILE FULL-SCREEN MENU — rebuild (2026-07-17)
   Was: vertically centred, overflow:hidden, centred text. That clipped
   as soon as the list grew (and the mega accordions made it worse), and
   the centred rows read as a splash screen rather than a menu.
   Now: a scrollable left-aligned list with the logo pinned at the top.
   ============================================================ */
@media (max-width: 1080px) {
  .snav__menu {
    justify-content: flex-start; align-items: stretch;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem 6% calc(2.5rem + env(safe-area-inset-bottom)); gap: 0;
  }
  .snav__menu > li { width: 100%; max-width: 480px; margin-inline: auto; text-align: left; }
  .snav__menu > li:not(.menu-logo):not(.menu-close-li):not(.menu-social) {
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .snav__menu > li > a {
    display: block; padding: .95rem .2rem; font-size: 1.02rem; border-radius: 8px;
    color: #fff;
  }
  /* current page: stark paints a yellow PILL here. Against the new dark list
     that pill reads as a stray blob (and yellow-on-yellow if you only recolour
     the text) — so kill the pill and mark the row with colour + a rule. */
  .snav__menu > li > a[aria-current="page"] {
    color: var(--yellow); background: none; box-shadow: none;
    border-left: 3px solid var(--yellow); padding-left: .7rem; border-radius: 0;
  }
  /* close button: fixed to the overlay's top-right so it can't collide with the
     logo and stays reachable while the list scrolls. (stark pins .menu-close-li
     absolute with width:auto!important — don't fight it, neutralise it.) */
  .snav__menu .menu-close-li {
    position: static !important; height: 0; border: 0; width: auto !important; overflow: visible;
  }
  .snav__menu .menu-close {
    position: fixed; top: .75rem; right: 5%; z-index: 4; width: 44px; height: 44px;
    display: grid; place-items: center; font-size: 1.9rem; line-height: 1;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px; color: #fff; cursor: pointer;
  }
  .snav__menu .menu-logo {
    display: flex !important; align-items: center; gap: .6rem;
    padding: .3rem 0 1.1rem; margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
  }
  /* stark centres this with margin:0 auto, which shoves the location chip to
     the far edge — keep them together on the left instead */
  .snav__menu .menu-logo img { width: 124px; height: auto; margin: 0 !important; }
  /* the floating quick-action bar sits over the open menu — hide it while open */
  body.menu-open .mtab { display: none; }
  .snav__menu .menu-loc {
    font-family: var(--font-m); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: #7fd8ff;
  }
  .snav__menu a.snav__cta {
    display: block; text-align: center; margin: 1.2rem 0 .4rem; padding: .85rem 1.2rem !important;
  }
  /* stark used `margin-top:auto` on .menu-home/.menu-social to vertically centre
     the old splash-style menu. In a top-aligned scrolling list those auto margins
     just absorb the free space and punch an ~82px hole under the logo. */
  .snav__menu .menu-home { margin-top: 0 !important; }
  .snav__menu .menu-social {
    margin-top: 1.4rem !important; justify-content: center; gap: .8rem; padding-top: .4rem;
  }
  /* the staggered row entrance fought the scroll container — drop the offsets */
  .snav__menu.is-open li { transition-delay: 0s !important; }
}

/* ============================================================
   MEGA MENU — thumbnail dropdowns under the nav (2026-07-17)
   Desktop: absolute panel on hover/focus. Mobile: inline accordion
   inside the dark full-screen menu. Nav stays flat either way.
   ============================================================ */
.has-mega { position: relative; }
.mega__tog {
  border: 0; background: none; cursor: pointer; padding: 0; color: inherit;
  display: inline-grid; place-items: center;
}
.mega__tog svg { width: 14px; height: 14px; transition: rotate .22s ease; }
.has-mega.is-mega-open .mega__tog svg { rotate: 180deg; }

@media (min-width: 1081px) {
  .has-mega { display: inline-flex; align-items: center; gap: 1px; }
  /* chevrons dropped on desktop (2026-07-21) — hover/focus opens the mega; toggle stays for the mobile accordion */
  .mega__tog { display: none; }
  /* FULL-WIDTH BAR: fixed, so it breaks out of its <li> and spans the viewport.
     --snav-h is measured and published by store.js (nav height changes with
     the logo load and on resize, so it can't be a hardcoded constant). */
  .mega {
    position: fixed; left: 0; right: 0; top: var(--snav-h, 72px);
    width: 100%; max-width: none; translate: none; z-index: 320;
    background: #f5f8fc; border-radius: 0; border: 0;
    border-top: 1px solid rgba(4,20,53,.07);
    box-shadow: 0 20px 44px -14px rgba(2,20,60,.3);
    opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
  }
  /* brand accent along the panel's bottom edge (matches the scard band) */
  .mega::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--cyan, #00aeef), var(--yellow, #ffc510));
  }
  /* invisible bridge across the nav gap so the panel doesn't close mid-travel */
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .has-mega.is-mega-open .mega { opacity: 1; pointer-events: auto; transform: none; }
  .mega__inner {
    width: min(var(--maxw, 1180px), 92%); margin-inline: auto;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    gap: .7rem; padding: 1.1rem 0 1.35rem;
  }
  /* neat equal cards (2026-07-21): white plate, quiet border, hover lift;
     fixed basis + centered wrap keeps any odd last item centred */
  .mega__item {
    flex: 0 0 224px; border-radius: 14px;
    background: #fff; border: 1px solid rgba(4,20,53,.08);
    box-shadow: 0 4px 14px -8px rgba(2,20,60,.18);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .mega__item:hover {
    transform: translateY(-2px); border-color: rgba(0,174,239,.55);
    box-shadow: 0 10px 22px -10px rgba(2,20,60,.3);
  }
}

.mega__item {
  display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem !important;
  border-radius: 12px; text-decoration: none; white-space: normal !important;
}
/* bare cutout — no plate, no ring, no box (user, 2026-07-17) */
.mega__thumb {
  flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.mega__thumb img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(2,20,60,.28));
}
.mega__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__txt b { font-size: .88rem; font-weight: 800; line-height: 1.25; }
/* darker + larger than before — it was too faint to read */
.mega__txt i { font-style: normal; font-size: .8rem; line-height: 1.4; font-weight: 500; }

@media (min-width: 1081px) {
  .snav__menu .mega__item { color: #04123a; border-radius: 14px; }
  .snav__menu .mega__item:hover { background: #fbfdff; }
  .snav__menu .mega__txt i { color: rgba(4,20,53,.82); }
  .snav__menu .mega__thumb { width: 68px; height: 68px; }
}

/* ---- mobile: accordion inside the full-screen menu ---- */
@media (max-width: 1080px) {
  .mega {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .has-mega.is-mega-open .mega { max-height: 30rem; opacity: 1; }
  .mega__inner { display: grid; gap: 2px; padding: .2rem 0 .5rem; }
  .snav__menu .mega__item { color: rgba(255,255,255,.94); background: rgba(255,255,255,.05); }
  .snav__menu .mega__txt i { color: rgba(255,255,255,.72); }
  .mega__tog {
    position: absolute; top: 4px; right: 0; width: 46px; height: 46px;   /* real tap target */
    color: rgba(255,255,255,.65); border-radius: 10px;
  }
  .mega__tog svg { width: 18px; height: 18px; }
}

/* ---- service-card quote CTA ---- */
.scard__cta {
  margin-top: auto; align-self: flex-start; font-size: .82rem;
  padding: .5rem 1rem;
}
.scard { display: flex; flex-direction: column; }
.scard__tl { margin-bottom: .9rem; }
@media (max-width: 560px) { .scard__cta { align-self: stretch; text-align: center; } }

/* ---- section-level quote CTA (under the steps strip) ---- */
.ssec__cta { text-align: center; margin-top: 2.2rem; }

/* ---- franchise link under the trading hours (Chris, 2026-07-17) ---- */
.sinfo__franchise { margin: 1rem 0 0; font-size: .84rem; }
.sinfo__franchise a { color: var(--yellow); font-weight: 700; }
.sinfo__franchise a:hover { color: #fff; }

/* ---- store location map (contact section) ---- */
.smap {
  margin: 1.4rem 0 0; padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px -16px rgba(2,20,60,.5);
  line-height: 0; background: rgba(255,255,255,.05);
}
.smap iframe { width: 100%; height: 230px; border: 0; display: block; filter: saturate(.92); }
@media (max-width: 680px) { .smap iframe { height: 190px; } }

/* ---- ID photos: printed vs digitised-and-emailed (Chris, 2026-07-10) ---- */
.idways { list-style: none; margin: 1.4rem 0 1.7rem; padding: 0; display: grid; gap: .9rem; }
.idway {
  display: flex; gap: .85rem; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .85rem .95rem;
}
.idway__ic {
  flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(0,174,239,.14); border: 1px solid rgba(0,174,239,.4); color: #7fd8ff;
}
.idway__ic svg { width: 20px; height: 20px; }
.idway h3 { font-family: var(--font-d); text-transform: uppercase; font-size: 1rem; margin: .1rem 0 .2rem; color: #fff; }
.idway p { margin: 0; font-size: .87rem; line-height: 1.5; color: rgba(255,255,255,.72); }

/* ---- page-hero art: bigger, overlapping the next section ---- */
.page-hero__art img { width: min(100%, 540px); }
.page-hero--overlap .page-hero__art img { margin-bottom: -3.4rem; }
@media (max-width: 900px) {
  .page-hero__art img { width: min(78vw, 420px); }
  .page-hero--overlap .page-hero__art img { margin-bottom: -2.4rem; }
}

/* ---- courier partner logos ---- */
.partners-row { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.partners-row img { height: 34px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; }

/* ============================================================
   MARATHON ADDITIONS — nav location lockup, hero slider,
   futuristic services grid
   ============================================================ */

/* ---- nav store-location lockup ---- */
.snav__brand { display: flex; align-items: center; gap: .7rem; }
/* Full 3@1 retail-outlet logo is detail-rich — give it room to read.
   Base applies at burger widths; the desktop block below clamps it. */
.snav__brand img { height: 66px; margin: -9px 0; }
.snav__loc {
  display: inline-flex; align-items: center; gap: .42rem;
  padding-left: .7rem; border-left: 2px solid rgba(0,49,121,.18);
  font-family: var(--font-d); text-transform: uppercase; line-height: 1;
}
.snav__loc i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(213,35,47,.18);
  animation: locpulse 2.4s ease-in-out infinite;
}
@keyframes locpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(213,35,47,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(213,35,47,.06); }
}
.snav__loc b { font-weight: 700; font-size: 1.02rem; color: var(--navy); letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 1080px) { .snav__loc { display: none; } } /* burger layouts: name lives in menu */
.menu-loc {
  display: block; text-align: center; margin-top: .5rem;
  font-family: var(--font-d); text-transform: uppercase; letter-spacing: .14em;
  font-size: 1rem; color: var(--yellow);
}

/* ---- home hero slider ---- */
.hslides { display: grid; }
.hslide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s;
}
.hslide.is-on { opacity: 1; visibility: visible; }
.hslide__copy .pill { margin-bottom: .4rem; }
.hslide.is-on .hslide__copy > * { animation: hsUp .6s cubic-bezier(.2,.7,.2,1) both; }
.hslide.is-on .hslide__copy > *:nth-child(2) { animation-delay: .1s; }
.hslide.is-on .hslide__copy > *:nth-child(3) { animation-delay: .2s; }
.hslide.is-on .hslide__copy > *:nth-child(4) { animation-delay: .3s; }
.hslide.is-on .hslide__copy > *:nth-child(5) { animation-delay: .4s; }
@keyframes hsUp { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* Hero logo: large, stacked ABOVE Printiva with real clearance (user,
   2026-07-17). Chris's original complaint was that the logo OBSTRUCTED the
   cape — not that it sat above her. So it goes back over the stage, but big
   and with a deliberate gap; the overlap is verified at 0, not eyeballed. */
.shero__logo--stack {
  display: block; width: min(100%, 400px); height: auto;
  margin: 0 auto 2.2rem; position: relative; z-index: 3;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.hslide__art { margin: 0; }
a.hslide__art img {
  display: block; width: min(100%, 560px); margin-inline: auto;
  border: 6px solid #fff; border-radius: 16px; rotate: 2.5deg;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75);
}
/* ---- carousel slides as frameless cutouts (user, 2026-07-17) ------------
   `a.hslide__art img` gives every linked slide a white border + rotate (the
   old "photo" treatment). These slides now carry transparent cutouts, where
   a border would draw a rectangle around thin air — so strip the frame and
   let the art float, matching the page heroes.                             */
.hslide__art--cutout img {
  border: 0 !important; border-radius: 0 !important; rotate: none !important;
  box-shadow: none !important; background: none !important;
  margin-inline: auto;
  filter: drop-shadow(0 24px 42px rgba(0,0,0,.5));
  /* !important on width too, deliberately: these slides are .hslide--bleed, and
     `.shero--slim .hslide--bleed a.hslide__art img { width:100% }` has IDENTICAL
     specificity to any sane selector here and sits later in the file, so it wins
     on source order and stretches the cutout to ~800px. Same trap as the flush
     hero. Rather than fight with an ever-longer selector, force it. */
  width: min(100%, 470px) !important;
  /* Kill the bleed treatment inherited from `.hslide--bleed .hslide__art img`:
     it masks the left edge to transparent (a fade that read fine on the old
     full-bleed PHOTOS, but on a transparent cutout just dissolves the artwork)
     and forces object-fit:cover, which crops it. The Canon slide already does
     exactly this — same fix, same reasons. */
  -webkit-mask-image: none !important; mask-image: none !important;
  height: auto !important; object-fit: contain !important;
}
/* the bleed container is absolutely positioned and full-height; with the image
   back to height:auto it would pin to the top, so centre it in that box */
.hslide__art--cutout { display: grid !important; place-items: center; }
.shero--slim a.hslide__art--cutout img { width: min(100%, 400px) !important; }

/* Slide-art sizing (user, 2026-07-19): bigger art sells the slide; bottoms may
   crop into the slider edge. Attribute selectors at (0,3,2) out-specify the
   (0,2,2) base rule above. LF printer is flipped to face the copy. */
.shero--slim a.hslide__art--cutout[href="large-format-printing.html"] img { width: min(100%, 600px) !important; transform: scaleX(-1) translateY(4%); }
.shero--slim a.hslide__art--cutout[href="branding-gifts.html"] img { width: min(100%, 500px) !important; transform: translateY(4%); }
.shero--slim a.hslide__art--cutout[href="domestic-courier.html"] img { width: min(100%, 620px) !important; transform: translateY(3%); }

@media (max-width: 900px) {
  /* Mobile slider: art was capped at min(64vw,320px) = 240px on a 375 screen,
     floating in a 393px box — hence "way off". Fill the width instead, and let
     the height follow the art rather than a fixed 230px box that clipped it.
     The nav is sticky above with its own stacking context, so it simply
     overlays anything that reaches up — which the user is happy with. */
  .hslide--bleed .hslide__art--cutout,
  .hslide--bleed .hslide__art--chero {
    height: auto !important; min-height: 0 !important;
    width: calc(100% + 3rem) !important; margin: .4rem -1.5rem -1.2rem !important;
  }
  .shero--slim a.hslide__art--cutout img,
  .hslide--bleed .hslide__art--cutout img { width: 100% !important; max-width: none !important; }
  /* no extra bump on mobile: the art already fills the width here, and 112%
     pushed the box past the right edge and cropped it. The size bump is a
     desktop-only concern, where it sits in a narrower column. */
  .hslide--bleed .hslide__art--cutout img[src*="dhl-winged"] { width: 100% !important; }
  .hslide--bleed .hslide__art--chero .chero__img {
    width: 100% !important; max-width: none !important;
  }
}

.hslide__art--stage { text-align: center; }
.hslide__art--stage .shero__logo { width: min(100%, 420px); }
.hslide.is-on .hslide__art { animation: hsArt .7s cubic-bezier(.2,.7,.2,1) both .15s; }
@keyframes hsArt { from { opacity: 0; translate: 40px 0; rotate: 2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.hslider__ctrl { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.hslider__dots { display: flex; gap: .5rem; }
.hslider__dot {
  width: 34px; height: 6px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.25); transition: background .3s; padding: 0; position: relative; overflow: hidden;
}
.hslider__dot.is-on { background: rgba(255,255,255,.35); }
.hslider__dot.is-on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  transform-origin: left; animation: dotfill var(--hs-interval, 6.5s) linear forwards;
}
@keyframes dotfill { from { scale: 0 1; } to { scale: 1 1; } }
.hslider__arrow {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
  color: #fff; font-size: 1.15rem; line-height: 1; backdrop-filter: blur(6px);
  transition: background .25s;
}
.hslider__arrow:hover { background: rgba(255,255,255,.18); }
@media (max-width: 900px) {
  .hslide { grid-template-columns: 1fr; text-align: center; }
  .hslide__copy .shero__actions { justify-content: center; }
  .hslide__art img { width: min(82vw, 440px); }
  .hslider__ctrl { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hslide.is-on .hslide__copy > *, .hslide.is-on .hslide__art { animation: none; }
  .hslider__dot.is-on::after { animation: none; scale: 1 1; }
}

/* ---- slim hero (slider) ---- */
.shero--slim { min-height: 46vh; padding: 2rem 0 2.6rem; }
.shero--slim h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.shero--slim .shero__lead { margin-bottom: 1.2rem; }
.shero--slim a.hslide__art img { width: min(100%, 430px); }
/* margin-top was -.6rem, which clawed Printiva back up toward the logo now
   that the logo sits above her — zeroed so the 2.2rem gap actually holds */
.shero--slim .shero__stage { scale: .92; transform-origin: center; margin: 0 0 -1.8rem; }
/* stage is bigger now the logo moved out — drop the status chip clear of Printiva's legs */
.shero--slim .shero__chip {
  bottom: auto; top: calc(100% + 3rem); right: auto; left: 50%; translate: -50% 0;
  white-space: nowrap;
}
.shero--slim .hslider__ctrl { margin-top: 1rem; }
@media (max-width: 900px) {
  .shero--slim { min-height: auto; }
  .shero--slim a.hslide__art img { width: min(70vw, 360px); }
}

/* ---- type scale: hero H1 up, section H2 down + lighter ---- */
.shero--slim h1 { font-size: clamp(2.7rem, 5.2vw, 4.1rem); }
.ssec__title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; }
.page-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4rem); }

/* ---- slider v2: full-bleed right image, faded into the navy ---- */
.shero--slim { position: relative; overflow: hidden; }
.hslide--bleed { display: flex; align-items: center; min-height: 340px; }
.hslide--bleed .hslide__copy { max-width: 50%; position: relative; z-index: 2; }
.hslide--bleed .hslide__art {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(56vw, 860px);
  display: block; margin: 0; z-index: 1;
}
.hslide--bleed .hslide__art img,
.shero--slim .hslide--bleed a.hslide__art img {
  width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0; rotate: none; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.hslide--bleed.is-on .hslide__art { animation: hsBleed .8s cubic-bezier(.2,.7,.2,1) both .1s; }
@keyframes hsBleed { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) {
  .hslide--bleed { display: block; min-height: 0; }
  .hslide--bleed .hslide__copy { max-width: none; }
  .hslide--bleed .hslide__art {
    position: static; width: calc(100% + 3rem); height: 230px; margin: 1.2rem -1.5rem -1rem;
  }
  .hslide--bleed .hslide__art img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
            mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  }
}
@media (prefers-reduced-motion: reduce) { .hslide--bleed.is-on .hslide__art { animation: none; } }

/* slider art must anchor to the SECTION edges, not the container */
.shero--slim > .container { position: static; }

/* ---- fluid desktop nav: compress typography with viewport so the
       burger breakpoint (1080) is only needed near tablet sizes ---- */
@media (min-width: 1081px) {
  .snav__inner { gap: clamp(.4rem, 1.1vw, 1.3rem); }
  .snav__brand { gap: clamp(.35rem, .55vw, .7rem); }
  .snav__brand img { height: clamp(58px, 5.4vw, 82px); }
  .snav__loc { padding-left: clamp(.4rem, .65vw, .75rem); }
  .snav__loc b { font-size: clamp(.8rem, .75vw + .3rem, 1.1rem); }
  .snav__menu { gap: clamp(.05rem, .3vw, .4rem); }
  .snav__menu a {
    font-size: clamp(.68rem, .62vw + .28rem, .92rem);
    padding: .5rem clamp(.3rem, .6vw, .78rem);
  }
  .snav__menu a.snav__cta {
    font-size: clamp(.7rem, .62vw + .3rem, .94rem);
    padding: .55rem clamp(.7rem, 1vw, 1.35rem) !important;
  }
}

/* plain hero art: bare logo, no comic frame */
.page-hero__art--plain img {
  border: 0; border-radius: 0; rotate: none; box-shadow: none;
  width: min(100%, 240px); margin-bottom: 0 !important;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* four-card showcase grid (printing pages): 2×2 desktop, stacked mobile */
.bgrid--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .bgrid--four { grid-template-columns: 1fr; } }

/* CMYK print-mark accent (printing pages): four ink bars + crop ticks */
.cmyk { display: inline-flex; align-items: center; gap: .3rem; margin-top: .65rem; }
.cmyk i { display: block; width: 26px; height: 6px; border-radius: 3px; }
.cmyk i:nth-child(1) { background: #00aeef; }
.cmyk i:nth-child(2) { background: #ec008c; }
.cmyk i:nth-child(3) { background: #ffd400; }
.cmyk i:nth-child(4) { background: #16161a; box-shadow: 0 0 0 1px rgba(127,216,255,.35); }
.cmyk::before, .cmyk::after {
  content: ''; width: 10px; height: 10px; opacity: .55;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
}
.ssec__head .cmyk { display: flex; justify-content: center; }
.ssec--light .cmyk i:nth-child(4) { box-shadow: 0 0 0 1px rgba(4,25,73,.25); }

/* collage hero art: transparent cutout, no comic photo frame */
.page-hero__art--collage img {
  border: 0; border-radius: 0; rotate: none; box-shadow: none;
  width: min(100%, 560px); margin-bottom: 0 !important;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

/* ---- FLUSH hero art (must sit AFTER --collage above) -------------------
   For cutouts whose subject is cropped mid-leg: stand them ON the hero's
   bottom edge so the crop reads as deliberate, not as a figure floating.

   Attempt 1 used a negative margin equal to `.page-hero`'s clamp padding.
   It failed twice over: (a) `.page-hero__art--collage img` sets
   `margin-bottom:0 !important` at the SAME specificity and appears later in
   this file, so it simply won; (b) `.page-hero--overlap` overrides the
   padding to a flat 3.2rem and adds `translate:0 25px`, so the maths was
   wrong regardless.

   So: don't do margin maths. Zero the section's bottom padding, bottom-align
   the grid, and hand the copy column its own padding back. The image's bottom
   edge then IS the section's bottom edge, by construction.                */
.page-hero--flush { padding-bottom: 0 !important; align-items: end !important; }
.page-hero--flush .page-hero__grid { align-items: end; }
.page-hero--flush .page-hero__art--flush {
  align-self: end; translate: 0 !important; margin: 0 !important;
}
.page-hero--flush .page-hero__art--flush img {
  margin-bottom: 0 !important; display: block; margin-inline: auto;
  filter: drop-shadow(0 -6px 26px rgba(0,0,0,.3));
}
/* trio hero (courier, 2026-07-21): art | centred copy | art */
/* art columns sized proportional to each image's aspect ratio (1.879 vs 1.423)
   so both collages render at the SAME height; copy kept narrower so both grow */
.page-hero--trio .page-hero__grid {
  grid-template-columns: 1.879fr 1.42fr 1.423fr;
  align-items: center; gap: clamp(.9rem, 2vw, 1.6rem);
}
.page-hero--trio .trio__copy { text-align: center; }
.page-hero--trio .trio__copy .hud-label { justify-content: center; }
.page-hero--trio .page-hero__art { margin: 0; align-self: end; }
.page-hero--trio .page-hero__art img { width: 100%; height: auto; margin: 0; }
@media (max-width: 900px) {
  .page-hero--trio .page-hero__grid { grid-template-columns: 1fr 1fr; }
  .page-hero--trio .trio__copy { grid-column: 1 / -1; order: -1; }
}

/* copy column centres vertically against the tall flush art (2026-07-21);
   the art keeps its own align-self:end so it stays planted on the hero edge */
.page-hero--flush .page-hero__grid > div:first-child {
  align-self: center;
  padding-bottom: 0;
}
@media (max-width: 900px) {
  /* stacked: she'd otherwise sit tight under the copy */
  .page-hero--flush .page-hero__art--flush img { margin-top: 1rem !important; }
  .page-hero--flush .page-hero__grid > div:first-child { padding-bottom: 1rem; }
}

/* ---- quote request wizard (no prices — store replies manually) ---- */
.qz {
  border-radius: 20px; padding: 1.7rem;
  background: rgba(4,18,51,.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(0,174,239,.25);
}
.qz__head h3 { font-family: var(--font-d); text-transform: uppercase; font-size: 1.5rem; margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.qz__head h3 svg { width: 26px; height: 26px; color: #35d07f; }
.qz__sub { font-size: .86rem; color: rgba(255,255,255,.65); margin: 0 0 1.2rem; }
.qz__steps {
  list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.4rem;
}
.qz__steps li {
  flex: 1; display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.45); transition: .25s;
}
.qz__steps li b {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .72rem;
  background: rgba(255,255,255,.12); color: #fff;
}
.qz__steps li b svg { width: 12px; height: 12px; }
.qz__steps li.is-on { color: #fff; border-color: rgba(0,174,239,.5); background: rgba(0,174,239,.1); }
.qz__steps li.is-on b { background: linear-gradient(120deg, var(--yellow), var(--orange)); color: var(--navy); }
.qz__steps li.is-done { color: rgba(255,255,255,.7); }
.qz__steps li.is-done b { background: #35d07f; color: #04123a; }
.qz__step { display: none; }
.qz__step.is-on { display: block; animation: hsUp .4s cubic-bezier(.2,.7,.2,1) both; }
.qz__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.qz__cards--row { grid-template-columns: repeat(3, 1fr); }
.qz__card {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .9rem .5rem .75rem; border-radius: 14px; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85); transition: .2s; text-align: center;
}
.qz__card:hover { background: rgba(255,255,255,.1); translate: 0 -2px; }
.qz__card.is-on {
  border-color: var(--yellow); background: rgba(255,197,16,.1);
  box-shadow: 0 0 18px rgba(255,197,16,.18); color: #fff;
}
.qz__ico { width: 34px; height: 34px; color: #7fd8ff; }
.qz__card.is-on .qz__ico { color: var(--yellow); }
.qz__ico svg { width: 100%; height: 100%; }
.qz__card b { font-size: .82rem; }
.qz__cardsub { font-size: .66rem; color: rgba(255,255,255,.5); }
.qz__label { font-weight: 700; font-size: .82rem; margin: 1rem 0 .45rem; color: rgba(255,255,255,.8); }
.qz__cards--four { grid-template-columns: repeat(4, 1fr); }
.qz__boxpick { margin-top: .9rem; }
.qz__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.qz__chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .5rem .7rem; border-radius: 11px; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85); transition: .2s; text-align: left;
}
.qz__chip:hover { background: rgba(255,255,255,.1); }
.qz__chip.is-on { border-color: var(--yellow); background: rgba(255,197,16,.1); color: #fff; box-shadow: 0 0 14px rgba(255,197,16,.16); }
.qz__chip b { font-size: .78rem; }
.qz__chip span { font-size: .62rem; color: rgba(255,255,255,.55); }
.qz__chip em { font-style: normal; font-size: .62rem; color: #7fd8ff; }
.qz__custom { margin-top: .9rem; }
.qz .field input, .qz .field textarea, .qz .field select { color: #fff; }
/* declared-value currency selector (auto-detected, all ISO currencies) */
.qz__val input[type=number]::-webkit-outer-spin-button,
.qz__val input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qz__val input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qz__val { display: flex; gap: .5rem; }
.qz__val select { flex: 0 0 auto; width: auto; min-width: 5.4em; }
.qz__val select option { color: #04123a; }
.qz__val input { flex: 1; min-width: 0; }
.qz__nav { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.qz__send { display: flex; gap: .6rem; flex-wrap: wrap; }
.qz__send .btn svg, .qz__nav .btn svg { width: 15px; height: 15px; margin-right: .35rem; vertical-align: -2px; }
.qz__summary {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem;
  padding: .8rem 1rem; border-radius: 12px;
  background: rgba(0,174,239,.08); border: 1px dashed rgba(0,174,239,.35);
  font-size: .82rem;
}
.qz__summary span { display: inline-flex; gap: .45rem; align-items: baseline; }
.qz__summary i {
  font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: #7fd8ff;
}
.qz__fine { font-size: .72rem; color: rgba(255,255,255,.45); margin: .8rem 0 0; }
.openchip {
  display: inline-block; margin-left: .55rem; padding: .18rem .6rem; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: 2px;
}
.openchip--on { color: #04123a; background: #35d07f; }
.openchip--off { color: rgba(255,255,255,.75); background: rgba(255,255,255,.14); }
.dhltrack { margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: rgba(2,14,43,.5); border: 1px solid rgba(127,216,255,.16); }
.dhltrack__h { font-family: var(--font-d); text-transform: uppercase; color: #fff; margin: 0 0 .55rem; font-size: 1.05rem; }
.dhltrack form { display: flex; gap: .6rem; flex-wrap: wrap; }
.dhltrack input {
  flex: 1 1 220px; padding: .65rem .9rem; border-radius: 11px; font: inherit; color: #fff;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16);
}
.dhltrack input:focus { outline: none; border-color: var(--cyan); }
.dhltrack__note { font-size: .72rem; color: rgba(255,255,255,.45); margin: .6rem 0 0; }
@media (max-width: 680px) {
  .qz { padding: 1.2rem; }
  .qz__cards { grid-template-columns: repeat(2, 1fr); }
  .qz__cards--row { grid-template-columns: 1fr; }
  .qz__steps li span { display: none; }
  .qz__steps li { justify-content: center; }
}

/* ===== Canon print-machine hero stage (slide 2) — glow + STARK brackets + rotating rings ===== */
.hslide--bleed .hslide__art--chero { display: grid; place-items: center; }
.chero__img {
  position: relative; z-index: 3;
  width: min(46vw, 600px) !important; height: auto !important; object-fit: contain !important;
  -webkit-mask-image: none !important; mask-image: none !important; border: 0 !important;
  filter: drop-shadow(0 26px 46px rgba(0,10,40,.55));
}
.hslide--bleed.is-on .hslide__art--chero .chero__img { animation: hsBleed .8s cubic-bezier(.2,.7,.2,1) both .1s; }
.chero__glow {
  position: absolute; z-index: 0; width: min(42vw, 560px); aspect-ratio: 1 / .82; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,174,239,.5), rgba(0,174,239,.13) 46%, transparent 70%);
  filter: blur(5px);
}
.chero__ring { position: absolute; z-index: 1; border-radius: 50%; aspect-ratio: 1; pointer-events: none; }
.chero__ring--1 { width: min(38vw, 480px); border: 1.5px dashed rgba(0,174,239,.5); animation: spin 42s linear infinite; }
.chero__ring--2 { width: min(30vw, 380px); border: 1.5px solid rgba(255,197,16,.32); animation: spin 30s linear infinite reverse; }
.chero__corner {
  position: absolute; z-index: 4; width: 26px; height: 26px;
  border-color: rgba(127,216,255,.7); border-style: solid;
  filter: drop-shadow(0 0 6px rgba(0,174,239,.5));
}
.chero__corner--tl { top: 8%;  left: 9%;  border-width: 2px 0 0 2px; border-radius: 8px 0 0 0; }
.chero__corner--tr { top: 8%;  right: 9%; border-width: 2px 2px 0 0; border-radius: 0 8px 0 0; }
.chero__corner--bl { bottom: 10%; left: 9%;  border-width: 0 0 2px 2px; border-radius: 0 0 0 8px; }
.chero__corner--br { bottom: 10%; right: 9%; border-width: 0 2px 2px 0; border-radius: 0 0 8px 0; }
@media (prefers-reduced-motion: reduce) { .chero__ring { animation: none; } }
@media (max-width: 900px) {
  .chero__img { width: min(74vw, 380px) !important; }
  .chero__glow { width: min(80vw, 400px); }
  .chero__ring--1 { width: min(66vw, 340px); }
  .chero__ring--2 { width: min(54vw, 280px); }
  .chero__corner { width: 20px; height: 20px; }
}

/* ===== Courier dom/intl toggle + DHL box table ===== */
.ctoggle { display: flex; width: fit-content; gap: .35rem; padding: .35rem; margin: 0 auto 1.4rem; border-radius: 999px; background: rgba(2,14,43,.5); border: 1px solid rgba(127,216,255,.2); }
.ctoggle__btn { border: 0; cursor: pointer; padding: .6rem 1.15rem; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .02em; color: rgba(255,255,255,.8); background: transparent; transition: background .2s, color .2s; }
.ctoggle__btn.is-on { color: #04123a; background: linear-gradient(120deg, var(--cyan), #7fd8ff); box-shadow: 0 6px 18px -8px rgba(0,174,239,.7); }
.cpane[hidden] { display: none; }
/* Spotlight-mini service cards (courier speed trio — dark, glow + cutout,
   timeline strip). Sibling of the home .spc cards. */
.scard {
  position: relative; padding: 1.35rem 1.4rem 1.45rem; border-radius: 20px;
  /* red→yellow band along the bottom edge, painted as a background layer so
     it's clipped by the card's border-radius and follows the curve exactly */
  background:
    linear-gradient(90deg, #d40511 0%, var(--orange) 50%, var(--yellow) 100%) left bottom / 100% 6px no-repeat,
    linear-gradient(165deg, #0a4187 0%, #062c66 40%, #020e2b 100%);
  border: 1px solid rgba(127,216,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -24px rgba(2,14,43,.9);
  transition: transform .2s ease, border-color .2s ease;
}
.scard:hover { transform: translateY(-4px); border-color: rgba(0,174,239,.55); }
/* Art lives in the card's upper zone only; the cutout bleeds past the
   card's top edge (card overflow stays visible for that). */
.scard__art { position: relative; height: 200px; margin-bottom: 1rem; }
.scard__glow {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  width: 110%; aspect-ratio: 1/.85; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,.58), rgba(0,174,239,.18) 44%, transparent 72%);
  filter: blur(11px);
}
.scard__ring {
  position: absolute; left: 50%; top: 50%; width: 190px; aspect-ratio: 1; border-radius: 50%;
  margin-left: -95px; margin-top: -95px;
  border: 1.5px dashed rgba(255,197,16,.55); animation: spin 34s linear infinite;
}
.scard__ring::after {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed rgba(0,174,239,.45); animation: spin 26s linear infinite reverse;
}
.scard__art img {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
  /* Both caps + auto dims: portrait art binds on max-height, landscape on
     max-width, so mixed aspect ratios land at comparable visual sizes and
     the element box hugs the image — bottom:0 is truly flush (the old fixed
     height + object-fit:contain letterboxed wide art off the baseline). */
  width: auto; height: auto; max-height: 235px; max-width: 76%;
  filter: drop-shadow(0 8px 16px rgba(0,10,40,.65));
}
/* Scene variant: full-bleed livery scenes (own navy bg + light streaks) —
   feathered mask melts the frame into the card's navy base, so no glow/ring. */
.scard__art--scene { height: 215px; }
.scard__art--scene img {
  bottom: auto; top: -18px; height: 245px; width: 106%; max-width: none;
  object-fit: cover; filter: none;
  -webkit-mask-image: radial-gradient(112% 96% at 50% 46%, #000 54%, transparent 78%);
  mask-image: radial-gradient(112% 96% at 50% 46%, #000 54%, transparent 78%);
}
.scard h3 { font-family: var(--font-d); text-transform: uppercase; color: #fff; font-size: 1.35rem; margin: 0 0 .3rem; }
.scard p { font-size: .85rem; color: rgba(255,255,255,.66); margin: 0; }
/* ---- card spec rows (was: boxed "chips" + an arrow) --------------------
   The boxed pills were laid out as a wrapping flex row, so at card width the
   two boxes dropped onto separate lines and the → arrow orphaned itself
   beside them, colliding with the CTA. Rebuilt as a plain label/value list:
   no boxes, no arrow, one row per fact — it can't break, at any width.     */
.scard__tl {
  display: grid; gap: .3rem; margin: .95rem 0 1rem; padding: .75rem 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* The CTA is bottom-anchored with margin-top:auto, so the ONLY guaranteed
   clearance above it is this block's bottom margin — a zeroed bottom margin
   let the button touch the spec rows on cards whose content filled the row.
   1rem here keeps a minimum gap; auto still adds more on shorter cards. */
.scard__tl li {
  list-style: none; display: grid; grid-template-columns: 4.6rem 1fr;
  align-items: baseline; gap: .55rem;
  background: none; border: 0; padding: 0; border-radius: 0;
}
.scard__tl li i {
  font-style: normal; font-size: .58rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--yellow); line-height: 1.6;
}
.scard__tl li b { font-size: .84rem; color: rgba(255,255,255,.92); font-weight: 700; line-height: 1.4; }
.scard__tl li.tl-arrow { display: none; }   /* decorative; it was the thing that broke */
@media (max-width: 400px) {
  .scard__tl li { grid-template-columns: 1fr; gap: 0; }   /* stack label over value on tiny screens */
}
@media (prefers-reduced-motion: reduce) { .scard__ring { animation: none; } }

/* Reversed variant — light card for use on dark-blue sections */
.scard--light {
  background:
    linear-gradient(90deg, #d40511 0%, var(--orange) 50%, var(--yellow) 100%) left bottom / 100% 6px no-repeat,
    linear-gradient(170deg, #f4faff 0%, #e2f0fb 55%, #cfe6f8 100%);
  border-color: rgba(4,25,73,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -24px rgba(2,14,43,.55);
}
.scard--light:hover { border-color: rgba(0,174,239,.45); }
.scard--light .scard__glow {
  background: radial-gradient(circle, rgba(0,174,239,.32), rgba(0,174,239,.1) 44%, transparent 72%);
}
.scard--light .scard__ring { border-color: rgba(230,160,0,.55); }
.scard--light .scard__ring::after { border-color: rgba(0,120,190,.4); }
.scard--light .scard__art img { filter: drop-shadow(0 8px 14px rgba(4,25,73,.28)); }
.scard--light h3 { color: var(--navy); }
.scard--light p { color: #3d5878; }
.scard--light .scard__tl { border-top-color: rgba(4,25,73,.16); }
.scard--light .scard__tl li { background: none; border: 0; }
.scard--light .scard__tl li i { color: #a06400; }
.scard--light .scard__tl li b { color: var(--navy); }
.scard--light .scard__tl li.tl-arrow { color: #d40511; background: none; border: none; }

.dhlfig { display: flex; justify-content: center; margin: 1.4rem 0 .2rem; }
.dhlfig img { width: min(540px, 88%); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.dhlbox { margin-top: 1.6rem; padding: 1.3rem; border-radius: 16px; background: rgba(2,14,43,.5); border: 1px solid rgba(127,216,255,.16); }
.dhlbox__h { font-family: var(--font-d); text-transform: uppercase; color: #fff; margin: 0 0 .2rem; font-size: 1.15rem; }
.dhlbox__sub { color: rgba(255,255,255,.7); font-size: .85rem; margin: 0 0 .9rem; }
.dhlbox__scroll { overflow-x: auto; }
.dhlbox__table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 380px; }
.dhlbox__table th, .dhlbox__table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid rgba(127,216,255,.12); color: rgba(255,255,255,.85); white-space: nowrap; }
.dhlbox__table th { font-family: var(--font-m); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7fd8ff; }
.dhlbox__table tbody tr:hover { background: rgba(0,174,239,.06); }

/* dropdown item descriptions */
.sub__desc { display: block; font-size: .7rem; font-weight: 600; color: rgba(10,21,48,.55); margin-top: .1rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 1080px) { .sub__desc { color: rgba(255,255,255,.6); } }

/* --- overrides of synced stark.css (stark.css is synced from ../website — edit it THERE) --- */
/* (footer-logo white-chip override retired 2026-07-19 — stark default now chip-free per brand rule) */

/* --- contact: hours column beside details; taller map (user 2026-07-19) --- */
.sinfo-cols { display: grid; grid-template-columns: 1fr auto; gap: .6rem 2rem; align-items: start; }
.sinfo-hours .sinfo__h { margin-top: 1.2rem; }
.sinfo-hours .hours { font-size: .88rem; }
@media (max-width: 640px) { .sinfo-cols { grid-template-columns: 1fr; } }
.smap iframe { height: 340px; }

/* --- Stark deco (rings + corner brackets) on all art slides, matching the print-machine slide (user 2026-07-19). Printiva brand slide excluded by markup. --- */
.hslide__art--cutout { position: relative; }
.hslide__art--cutout img { position: relative; z-index: 2; }

/* ===== Home Spotlight cards — layout balance (user, 2026-07-24) =============
   Problems: copy sat vertically-centred so the card's bottom-right went dead
   under the top-bleeding art; and the CTA arrow detached when a two-word
   label ("Request a quote", "Make your mark") wrapped inside the narrow copy
   column. Fixes below are template-local overrides of the stark .spc rules
   (stark.css is corporate-canonical — never edited here). ------------------ */
/* 1) CTA stays on one line so the ::after arrow always hugs the label
      (safe at every width). */
.spc__go { white-space: nowrap; }

/* The geometry fixes only apply to the desktop 2-column layout — below 900px
   stark stacks the card (art over copy) and its own rules should stand. */
@media (min-width: 901px) {
  /* 2) Copy fills the column top→bottom: title/blurb up top, CTA pinned to the
        bottom-left — a clear top+bottom anchor, not a centred clump. */
  .spc__txt { align-self: stretch; display: flex; flex-direction: column; padding: .25rem 0 .1rem; }
  .spc__txt p { margin-bottom: .9rem; }
  .spc__go { margin-top: auto; }
  /* 3) The art mass sits high (cutouts have transparent lower halves), so a tall
        card left a dead band under it. Shorten the cards so the art and the
        pinned CTA meet with little gap; keep the top/side bleed. */
  .spc { min-height: 300px; }
  .spc--wide { min-height: 306px; }
  .spc:not(.spc--wide) { min-height: 236px; }
  .spc__art { align-self: stretch; place-items: start center; translate: 2% -24px; }
  .spc__art img { max-width: 132%; max-height: 150%; }
  /* Art is now square (fills naturally) — the old 150% oversize was tuned for
     the wide cutouts and made Photo/Branding art too big. Trim it back. */
  .spc:not(.spc--wide) .spc__art { translate: 2% -8px; }
  .spc:not(.spc--wide) .spc__art img { max-width: 120%; max-height: 134%; }
  /* Wide cards are the higher-profile ones — give their titles more presence. */
  .spc--wide .spc__txt h3 { font-size: clamp(1.85rem, 2.7vw, 2.7rem); }
}

/* ===== Card system: unify home (.spc) + inner (.scard) decoration =========
   (user, 2026-07-24: keep the different layouts/CTAs, make the accents siblings)
   One family: cyan glow + single cyan dashed ring + red→yellow brand band on
   BOTH card types. ---------------------------------------------------------- */
/* The red→yellow brand band on all three card backgrounds. Two neatening
   fixes vs before: (a) background-origin:border-box so the band reaches the
   TRUE bottom edge — padding-box origin left the 1px light-blue border
   showing as a sliver below it; (b) 8px (was 5–6px) so it reads as a
   deliberate trim. Home cards gain the band; each keeps its own base fill. */
/* The 1px card border paints OVER the background, so its light-blue bottom
   edge showed as a sliver under the band. Make the bottom border transparent
   so the band itself is the card's bottom edge. */
.spc, .scard, .scard--light { border-bottom-color: transparent; }
.spc {
  background:
    linear-gradient(90deg, #d40511 0%, var(--orange) 50%, var(--yellow) 100%) left bottom / 100% 8px no-repeat,
    linear-gradient(165deg, #062051, #04122e 70%, #020c22);
}
.scard {
  background:
    linear-gradient(90deg, #d40511 0%, var(--orange) 50%, var(--yellow) 100%) left bottom / 100% 8px no-repeat,
    linear-gradient(165deg, #0a4187 0%, #062c66 40%, #020e2b 100%);
}
.scard--light {
  background:
    linear-gradient(90deg, #d40511 0%, var(--orange) 50%, var(--yellow) 100%) left bottom / 100% 8px no-repeat,
    linear-gradient(170deg, #f4faff 0%, #e2f0fb 55%, #cfe6f8 100%);
}
/* MUST come after the `background` shorthands above — the shorthand resets
   background-origin to padding-box, so setting it earlier had no effect and
   the band stopped 1px short (that was the persistent sliver). */
.spc, .scard, .scard--light { background-origin: border-box; }
/* Inner cards: swap the yellow+blue double ring for the home's single cyan
   dashed ring, so both read the same. */
.scard__ring { border-color: rgba(0,174,239,.5); }
.scard__ring::after { display: none; }
/* Light-section inner cards keep a legible ring on the pale background. */
.scard--light .scard__ring { border-color: rgba(0,150,210,.5); }

/* Wider gutters — the top/side-bleeding art was crowding neighbouring cards. */
.sgrid { gap: 1.7rem; }
.bgrid { gap: 1.7rem; }

/* ---- Bigger inner-page hero art (2026-07-25) ---------------------------
   Standard collage heroes only (trio + flush keep their own geometry).
   The art column widens to the larger grid share and the image fills it;
   both max caps + auto dims balance portrait vs landscape collages. The
   enlarged image hangs below the hero via negative margin and the next
   section paints OVER it (z-index 6 beats the art's stark z-index 5), so
   the bottom CROPS at the section boundary instead of overlapping onto
   the light section — top of the image always stays visible.
   margin-bottom needs !important because `.page-hero__art--collage img`
   above sets `margin-bottom: 0 !important` (see the flush-hero comment).
   Desktop-only: mobile keeps stark's stacked layout untouched. */
@media (min-width: 901px) {
  .page-hero--overlap:not(.page-hero--trio):not(.page-hero--flush) .page-hero__grid {
    grid-template-columns: 1fr 1.1fr;
  }
  .page-hero--overlap:not(.page-hero--trio):not(.page-hero--flush) .page-hero__art--collage img {
    width: auto; height: auto; max-width: 100%; max-height: 500px;
    margin-bottom: -5.5rem !important;
  }
  .page-hero--overlap:not(.page-hero--trio):not(.page-hero--flush) + section {
    position: relative; z-index: 6;
  }
}

/* pbar (stark canonical, override here): half height, 2026-07-25 */
.pbar { height: 5px; }

/* stacked quickform buttons were touching (2026-07-25) */
.btn--block + .btn--block { margin-top: .7rem; }

/* Narrow/tall cutouts (banner, stamp, vinyl, scanner) are height-bound and
   rendered small next to landscape art — give ONLY them a taller cap; the
   extra top bleed is confined to these cards (2026-07-25). */
.scard__art--tall img { max-height: 265px; }

/* Flush hero (large-format) joins the big-hero treatment: wider art column
   + fill caps. No hang/crop needed — flush already plants the image on the
   hero's bottom edge. Desktop only, same as the overlap enlargement. */
@media (min-width: 901px) {
  .page-hero--flush .page-hero__grid { grid-template-columns: 1fr 1.1fr; }
  .page-hero--flush .page-hero__art--flush img {
    width: auto; height: auto; max-width: 100%; max-height: 540px;
  }
}

/* optional-field tag on quickform labels (name became optional 2026-07-27) */
.field .opt { font-size: .72em; font-weight: 400; opacity: .55; letter-spacing: .02em; }

/* ============================================================
   MOBILE POLISH PASS (2026-07-27 evening)
   ============================================================ */

/* Accordion dropdown items: stark's `.snav__menu a{display:block}` outranks
   `.mega__item`'s flex row on mobile, stacking thumb above text. Force the
   row back and keep every thumb box identical. */
@media (max-width: 1080px) {
  .snav__menu .mega__item { display: flex; align-items: center; gap: .8rem; }
  .snav__menu .mega__thumb { flex: none; width: 56px; height: 56px; }
}

/* Floating tab bar: WhatsApp bump wears WhatsApp brand green; quote bump
   keeps the red. Hide either bar cell gracefully if a link is missing. */
.mtab__cta--wa span.mtab__bump {   /* span matches stark's selector specificity */
  background: linear-gradient(120deg, #1fae37, #25d366);
  box-shadow: 0 8px 22px -6px rgba(37, 211, 102, .55);
  color: #fff;
}

/* Footer socials: quiet outline circles in the bottom bar; the row
   disappears entirely for stores without any links. */
.sfoot__social { display: flex; gap: .6rem; }
.sfoot__social:empty { display: none; }
.sfoot__social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.75);
  transition: color .15s ease, border-color .15s ease;
}
.sfoot__social a:hover { color: #fff; border-color: var(--cyan, #00aeef); }
.sfoot__social svg { width: 17px; height: 17px; }
.sfoot__bar { flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }

/* Card art on phones: the desktop top-bleed reads as overlap clutter on a
   stacked single-column layout — tighten the art zone and caps. */
@media (max-width: 900px) {
  .scard__art { height: 175px; }
  .scard__art img { max-height: 195px; max-width: 82%; }
  .scard__art--tall img { max-height: 205px; }
}

/* ---- Mobile round 2 (2026-07-27, user phone-testing feedback) ---- */
@media (max-width: 1080px) {
  /* Portrait cutouts escaped the 56px thumb box (percentage max-height
     doesn't bind here) and overlapped the next accordion row — hard px
     caps + clip make escape impossible. */
  .snav__menu .mega__thumb { overflow: hidden; }
  .snav__menu .mega__thumb img { max-width: 56px; max-height: 56px; width: auto; height: auto; }
  /* burger sat flush against the screen edge; give it the same breathing
     room as the pin button on the left */
  .snav__toggle { margin-right: 14px; }
}

/* Both bump variants (WhatsApp green + quote red) carry white icons. */
.mtab__cta span.mtab__bump { color: #fff; }

@media (max-width: 900px) {
  /* Slide 1: the big logo duplicated the header lockup and pushed Printiva
     off-screen — drop it and let the mascot lead. */
  .hslide--stage .shero__logo--stack { display: none; }
  .hslide--stage .shero__stage { margin-top: .6rem; }
  .hslide--stage .holo-p img { width: 150px; height: auto; }
  /* Other slides: art sized to sit comfortably with side padding.
     (.hslide prefix outranks the full-bleed variant rules' max-width:none) */
  .hslide .hslide__art img,
  .hslide--bleed .hslide__art--chero .chero__img,
  .hslide--bleed .hslide__art--cutout img,
  .shero--slim a.hslide__art--cutout img,
  .hslide--bleed a.hslide__art--cutout img,
  .shero--slim .hslide--bleed a.hslide__art img,
  .hslide .hslide__art--bleed img {
    /* !important: legacy per-slide mobile rules (e.g. .chero__img at ~line
       926) already use it — this final block must outrank them all. vw not
       %: the bleed variants oversize the containing figure. */
    display: block; max-width: 86vw !important; max-height: 44vh !important;
    width: auto !important; height: auto !important;
    margin-inline: auto; object-fit: contain;
  }
}

/* ---- Mobile round 3 (2026-07-27) ---- */
@media (max-width: 900px) {
  /* slide-1 logo: my slider-caps group re-displayed it (display:block at
     higher specificity) — important wins decisively */
  .hslide--stage .shero__logo--stack { display: none !important; }
  /* Printiva clear of the floating tab bar */
  .hslide--stage .shero__stage { margin: .4rem 0 4.4rem; }

  /* contact details + hours: side-by-side columns were cramming at phone
     width — stack them with clear separation */
  .sinfo-cols { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
  .sinfo-hours { padding-top: .2rem; }
  .sinfo__h { margin-bottom: .5rem; }
  .hours { width: 100%; }
  .hours td { padding: .3rem 0; }
  .sinfo-under { flex-wrap: wrap; gap: .8rem; }
}

/* Placeholder-labelled form: tighter rhythm without the label rows. */
.sform .field { margin-bottom: .85rem; }
.sform .field-row { gap: 0 .8rem; }
.sform .field-row .field { margin-bottom: .85rem; }
.sform input::placeholder, .sform textarea::placeholder { opacity: .75; }
.sform select:has(option[value=""]:checked) { color: rgba(255,255,255,.6); }

/* ---- Mobile round 4 (2026-07-27) ---- */

/* Stray horizontal overflow (the nav box pokes ~23px past the viewport and
   stark's gridfloor spans -10%..110%) made phones elastic-scroll sideways.
   Clip, not hidden: no new scroll container, sticky stays intact. */
html, body { overflow-x: clip; }

/* Directions now lives under the map, centred, breathing both sides. */
.smap { text-align: center; }
.smap .smap__dir { margin-top: .85rem; margin-bottom: .85rem; display: inline-flex; }

/* Address renders as stacked lines on desktop… */
.addr-l { display: block; }

@media (max-width: 900px) {
  /* …and flows as a sentence across the phone width */
  .addr-l { display: inline; }
  .addr-l + .addr-l::before { content: ', '; }
  /* centre the whole contact-details block; its desktop margin-bottom
     stacked onto the grid gap and doubled the space above the hours */
  .sinfo { text-align: center; margin-bottom: 0; }
  .sinfo__row { justify-content: center; }
  .sinfo-hours { text-align: center; }
  .sinfo-under { justify-content: center; }
}

/* Hero halftone: 120%-width mask sizing leaves the lower hero bare on tall
   phone layouts — cover fills the section (user, 27 Jul). */
@media (max-width: 900px) {
  .shero .tex--3 { -webkit-mask-size: cover; mask-size: cover; }
}