/* JCL Removals - homepage V4 "Tape"
   The page is the move itself: kraft board, packing tape, paper labels, navy print. */

:root {
  /* brand */
  --navy: #063C84;
  --navy-hi: #0B4FA8;
  --cyan: #5CE1E6;

  /* board */
  --kraft: #B8895C;
  --kraft-lt: #C79A6C;
  --kraft-in: #C49B71;      /* inside of the box: lighter, greyer */
  --kraft-dk: #A57850;
  --kraft-bottom: #845932;
  --edge: rgba(70, 38, 12, .35);

  /* print */
  --ink: #0C1D3D;          /* box print, 5.2:1 on --kraft */
  --ink-soft: #1C2B47;
  --marker: #16110D;
  --paper: #FCFAF4;
  --paper-2: #F4EFE4;
  --paper-ink: #12203A;
  --paper-mute: #4A5468;   /* 7.4:1 on paper */
  --rule: #12203A;
  --cream: #FFF6E8;

  /* type */
  --f-print: "Big Shoulders Stencil Display", "Impact", sans-serif;
  --f-body: "Karla", system-ui, sans-serif;
  --f-marker: "Permanent Marker", "Comic Sans MS", cursive;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(2.6rem, 5.4vw, 4.6rem);
  --t-xxl: clamp(3.4rem, 8.6vw, 8.6rem);

  --wrap: 1240px;
  --gutter: clamp(16px, 3.2vw, 40px);

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, .05, .25, 1);

  /* textures (SVG noise, rendered once, tiled) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .12 0 0 0 0 .04 1.1 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .78 1 0 0 0 -.56'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --mottle: radial-gradient(60% 45% at 18% 22%, rgba(255, 228, 190, .14), transparent 70%), radial-gradient(50% 40% at 82% 70%, rgba(70, 36, 8, .12), transparent 70%), radial-gradient(40% 35% at 60% 8%, rgba(70, 36, 8, .07), transparent 70%);
  --flutes: repeating-linear-gradient(90deg, rgba(80, 42, 12, .045) 0, rgba(255, 236, 205, .035) 6px, rgba(80, 42, 12, .045) 12px);
  --inkmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -12 0 0 0 9.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");

  --paper-shadow: 0 1px 1px rgba(60, 30, 8, .18), 0 6px 10px -4px rgba(60, 30, 8, .35), 0 24px 40px -18px rgba(50, 22, 4, .55);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--kraft);
  background-image: var(--grain), var(--fibre), var(--mottle), var(--flutes);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.kraft-focus :focus-visible, .site-head :focus-visible, .sizes :focus-visible, .services :focus-visible,
.dest :focus-visible, .closing :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 246, 232, .75); }
.foot :focus-visible { outline-color: var(--cream); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--paper); color: var(--paper-ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* a board panel: any block can take its own kraft tone */
.hero, .foot { overflow-x: clip; }
.board, .sizes, .services, .company, .dest, .reviews, .closing {
  position: relative;
  overflow-x: clip;
  background-color: var(--k, var(--kraft));
  background-image: var(--grain), var(--fibre), var(--mottle), var(--flutes);
}

/* ---------- print (ink on board) ---------- */
.print {
  font-family: var(--f-print);
  font-weight: 800;
  color: var(--ink);
  line-height: .9;
  letter-spacing: .005em;
  -webkit-mask-image: var(--inkmask);
  mask-image: var(--inkmask);
  -webkit-mask-size: 320px; mask-size: 320px;
}
.print--xl { font-size: var(--t-xxl); }
.print--l { font-size: var(--t-xl); }
.print--m { font-size: clamp(2.2rem, 4vw, 3.4rem); }

/* ---------- tape ---------- */
.tape {
  --th: 46px;
  --tc: var(--navy);
  --tp: #fff;
  --tm: var(--cyan);
  position: relative;
  height: var(--th);
  background-color: var(--tc);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 9%, 100% 18%, calc(100% - 7px) 27%, calc(100% - 2px) 38%, calc(100% - 6px) 47%, 100% 56%, calc(100% - 4px) 66%, calc(100% - 8px) 75%, calc(100% - 1px) 85%, calc(100% - 6px) 93%, 100% 100%, 0 100%, 6px 92%, 1px 83%, 7px 74%, 2px 64%, 5px 55%, 0 46%, 7px 36%, 3px 27%, 6px 17%, 0 8%);
}
.tape::after { /* gloss: a soft specular band + edge shading */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 42%, transparent 52%);
  pointer-events: none;
}
.tape--cyan { --tc: var(--cyan); --tp: var(--navy); --tm: #fff; }
.tape--xl { --th: clamp(48px, 5.4vw, 72px); }

.tape__print {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  gap: calc(var(--th) * .7);
  padding-left: 18px;
  transform: translate3d(calc(var(--pull, 0) * -1px), 0, 0);
  will-change: transform;
}
.tu { display: inline-flex; align-items: center; gap: calc(var(--th) * .3); white-space: nowrap; }
.tu__txt {
  font-family: var(--f-print);
  font-weight: 800;
  font-size: calc(var(--th) * .4);
  letter-spacing: .16em;
  color: var(--tp);
}
.mk { display: inline-flex; gap: calc(var(--th) * .05); }
.mk b {
  display: grid; place-items: end center;
  width: calc(var(--th) * .3);
  height: calc(var(--th) * .56);
  padding-bottom: calc(var(--th) * .03);
  background: #fff;
  color: var(--navy);
  font: 700 calc(var(--th) * .2)/1 Georgia, serif;
  box-shadow: inset 0 0 0 1px var(--navy);
}
.mk b:nth-child(2) { background: var(--cyan); }
.tape--cyan .mk b:nth-child(2) { background: #fff; }

/* small pieces of tape holding paper down */
.tape-bit {
  position: absolute;
  width: 92px; height: 28px;
  z-index: 3;
  background: rgba(92, 225, 230, .78);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 25%, 100% 50%, calc(100% - 5px) 75%, 100% 100%, 0 100%, 5px 76%, 1px 52%, 4px 24%);
  box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .06);
}
.tape-bit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%, rgba(0,0,0,.1)); }
.tape-bit--navy { background: rgba(6, 60, 132, .9); }
.tape-bit--navy::before {
  content: ""; position: absolute; inset: 8px 12px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 5px, rgba(92,225,230,.9) 5px 10px, rgba(255,255,255,.75) 10px 15px, transparent 15px 28px);
  opacity: .5;
}

/* tape strips used as section dividers */
.divider-tape {
  position: absolute; left: -2%; right: -2%; top: 0;
  transform: translateY(-50%) rotate(-.6deg);
  z-index: 4;
  filter: drop-shadow(0 3px 3px rgba(40, 20, 4, .35));
}
.divider-tape--tilt { transform: translateY(-50%) rotate(.9deg); }

/* ---------- buttons ---------- */
.btn-tape {
  display: inline-block;
  text-decoration: none;
  border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(40, 20, 4, .35));
  transition: transform .2s var(--ease-out), filter .2s;
}
.btn-tape span {
  display: block;
  padding: 13px 26px 12px;
  background: var(--navy);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%, rgba(0,0,0,.18));
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 20%, 100% 42%, calc(100% - 6px) 63%, calc(100% - 1px) 82%, calc(100% - 4px) 100%, 0 100%, 5px 80%, 0 60%, 6px 40%, 1px 20%);
}
.btn-tape:hover { transform: translateY(-2px) rotate(-.6deg); filter: drop-shadow(0 6px 6px rgba(40, 20, 4, .35)); }
.btn-tape:active { transform: translateY(1px); }
.btn-tape--big span { font-size: 1.25rem; padding: 18px 40px 17px; }

.btn-ink {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0; border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 #032659;
  transition: background .2s, transform .15s;
}
.btn-ink:hover { background: var(--navy-hi); }
.btn-ink:active { transform: translateY(1px); box-shadow: none; }

.btn-link { border: 0; background: none; padding: 8px 0; font-weight: 700; color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--navy); color: var(--navy); }

/* ---------- header ---------- */
.site-head { position: relative; z-index: 20; }
.topline {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 10px; padding-bottom: 6px;
  font-size: var(--t-xs);
  border-bottom: 1px solid rgba(12, 29, 61, .22);
}
.topline__phones { display: flex; gap: 20px; flex-wrap: wrap; }
.topline__phones b { font-weight: 800; margin-right: 3px; }
.topline__phones a { text-decoration: none; }
.topline__phones a:hover { text-decoration: underline; }
.nav-row { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }
.brand { position: relative; flex: none; display: block; }
.brand__label {
  display: block;
  background: var(--paper);
  padding: 9px 12px;
  transform: rotate(-2deg);
  box-shadow: var(--paper-shadow);
}
.brand__label img { width: 78px; }
.brand__tape { width: 58px; height: 20px; left: -16px; top: -4px; transform: rotate(-38deg); }
.nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav__list { display: flex; gap: 22px; flex-wrap: wrap; }
.nav__list a { text-decoration: none; font-weight: 700; font-size: var(--t-s); padding: 6px 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease-out); }
.nav__list a:hover { background-size: 100% 2px; }
.nav__extra { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.lang { border: 2px solid var(--ink); background: transparent; border-radius: 2px; padding: 3px 9px; font-weight: 800; font-size: var(--t-xs); cursor: pointer; }
.nav__phone { font-weight: 800; text-decoration: none; white-space: nowrap; }
.burger { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding-bottom: clamp(56px, 8vw, 110px); }
.hero__tape {
  position: absolute; left: -3%; right: -3%;
  top: clamp(14px, 2vw, 26px);
  z-index: 6;
  transform: rotate(-1.1deg);
  filter: drop-shadow(0 4px 4px rgba(40, 20, 4, .38));
  pointer-events: none;
}
.unroll { clip-path: inset(-20px 100% -20px 0); animation: unroll 1.35s var(--ease-io) .35s forwards; }
@keyframes unroll { to { clip-path: inset(-20px 0 -20px 0); } }
.unroll__roll {
  position: absolute; inset: 0;
  transform: translate3d(-100%, 0, 0);
  animation: roll 1.35s var(--ease-io) .35s forwards;
}
.unroll__roll span {
  position: absolute; right: -22px; top: -6px; bottom: -6px;
  width: 52px; border-radius: 8px;
  background:
    linear-gradient(90deg, #031f45 0, #0b4fa8 30%, #2f73c9 46%, #0b4fa8 62%, #031f45 100%);
  box-shadow: 6px 8px 10px rgba(30, 14, 2, .4);
}
.unroll__roll span::after { content: ""; position: absolute; inset: 6px 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px); }
@keyframes roll {
  0% { transform: translate3d(-100%, 0, 0); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(96px, 10vw, 140px);
}
.symbols { display: flex; gap: 10px; margin-bottom: 26px; }
.symbols li { width: 46px; height: 46px; border: 2px solid var(--ink); display: grid; place-items: center; opacity: .88; }
.symbols svg { width: 32px; height: 32px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero__title { font-size: clamp(3.1rem, 8.4vw, 7.6rem); font-weight: 900; line-height: .84; letter-spacing: -.005em; }
.hero__title span { display: block; }
.hero__under { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); margin-top: 30px; }
.hero__lede { max-width: 34ch; font-size: var(--t-l); line-height: 1.5; font-weight: 500; }

.flap {
  position: relative;
  margin: 34px 8px 0;
  padding-top: 24px;
}
.flap::before { /* the crease where the flap folds */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(180deg, rgba(60, 30, 8, .35) 0 1px, rgba(255, 240, 215, .35) 1px 3px, transparent 3px);
}
.flap__title { font-size: 1.5rem; letter-spacing: .04em; margin-bottom: 14px; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--t-m); }
.ticks__n { font-family: var(--f-print); font-weight: 800; font-size: 1.35rem; width: 14px; }
.tick { position: relative; flex: none; width: 24px; height: 24px; border: 2.5px solid var(--ink); }
.tick::after {
  content: ""; position: absolute; left: 3px; top: -8px; width: 11px; height: 22px;
  border: solid var(--navy); border-width: 0 5px 5px 0; border-radius: 0 0 3px 0;
  transform: rotate(40deg) scale(0); transform-origin: 70% 90%;
  transition: transform .35s var(--ease-out);
}
.ticks li.is-ticked .tick::after { transform: rotate(40deg) scale(1); }

.seal {
  flex: none;
  width: 150px; height: 150px;
  transform: rotate(9deg);
  opacity: .9;
  -webkit-mask-image: var(--inkmask); mask-image: var(--inkmask); -webkit-mask-size: 260px; mask-size: 260px;
}
.seal svg { width: 100%; height: 100%; }
.seal__ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.seal__arc { font: 800 11.5px var(--f-print); letter-spacing: .22em; fill: var(--ink); }
.seal__big { font: 900 44px var(--f-print); fill: var(--ink); }
.seal__small { font: 800 11px var(--f-print); letter-spacing: .2em; fill: var(--ink); }
.hero__print { position: relative; }

/* ---------- shipping label (quote form) ---------- */
.label-wrap {
  position: relative;
  z-index: 2;
  margin-top: calc(clamp(96px, 10vw, 140px) * -1 + 30px);
  align-self: start;
  perspective: 1800px;
  animation: settle .7s var(--ease-out) .55s both;
}
@keyframes settle { from { transform: translateY(-14px) rotate(-1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.label-wrap__tape-l, .label-wrap__tape-r { display: none; }
.label { transform: rotate(.8deg); }
.label__inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.45, .05, .2, 1);
}
.label.is-flipped .label__inner { transform: rotateY(180deg); }
.label__face {
  grid-area: 1 / 1;
  margin: 0; min-width: 0;
  border: 0;
  padding: clamp(78px, 7vw, 96px) clamp(16px, 2vw, 24px) 22px;
  background: var(--paper);
  background-image: var(--grain);
  background-blend-mode: soft-light;
  color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.label__face::before { /* the printed frame of a courier label */
  content: ""; position: absolute; inset: clamp(70px, 6.2vw, 86px) 10px 10px;
  border: 2px solid var(--rule); pointer-events: none;
}
.label__face--back { transform: rotateY(180deg); }

.label__head { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 6px 8px 14px; }
.label__mark { width: 72px; }
.label__kicker { font-size: var(--t-xs); font-weight: 800; color: var(--paper-mute); }
.label__h { font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.label__sort { font-family: var(--f-print); font-weight: 900; font-size: 1.6rem; line-height: 1; background: var(--paper-ink); color: var(--paper); padding: 8px 10px 6px; }
.label__sort span { font-size: 2.6rem; }

.label__row { border-top: 2px solid var(--rule); padding: 12px 8px 14px; }
.label__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 0; }
.label__row--split > .field { padding: 12px 10px 14px; }
.label__row--split > .field + .field { border-left: 2px solid var(--rule); }

.field label { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 700; margin-bottom: 6px; }
.field__tag { font-family: var(--f-print); font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; background: var(--paper-ink); color: var(--paper); padding: 2px 6px 1px; }
.field input, .field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid #9EA3AE;
  border-radius: 2px;
  background: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--paper-ink);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2312203A' stroke-width='2.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.field input::placeholder { color: #6B7180; font-weight: 500; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B3261E; border-width: 2px; }
.field.is-flash select { animation: flash 1.2s var(--ease-out); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 5px var(--cyan); } 100% { box-shadow: 0 0 0 0 rgba(92, 225, 230, 0); } }

.label__foot { border-top: 2px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 8px; }
.barcode { display: grid; gap: 3px; width: 190px; }
.barcode__svg { width: 100%; height: 44px; }
.barcode__svg rect { fill: var(--paper-ink); }
.barcode span { font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; text-align: center; }
.label__eta { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-s); }
.eta-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(6, 60, 132, .9); flex: none; }
.field-error { min-height: 0; color: #B3261E; font-weight: 700; font-size: var(--t-s); padding: 0 8px; }
.field-error:not(:empty) { padding-bottom: 8px; }
.label__face .btn-ink { margin: 4px 8px 0; }
.label__face--front > .btn-ink { width: calc(100% - 16px); min-height: 56px; font-size: 1.125rem; }

.label__summary { border-top: 2px solid var(--rule); padding: 10px 8px 12px; font-size: var(--t-s); font-weight: 600; color: var(--paper-mute); }
.label__summary b { color: var(--paper-ink); }
.label__small { border-top: 2px solid var(--rule); padding: 12px 8px; font-size: var(--t-xs); color: var(--paper-mute); }
.label__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 8px 0; }
.label__actions .btn-ink { margin: 0; min-width: 200px; min-height: 56px; }
.label__done { border-top: 2px solid var(--rule); padding: 18px 8px 8px; font-size: var(--t-m); }
.label__done-h { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin-bottom: 6px; outline: none; }
.label.is-stamped .label__face--back > .label__row,
.label.is-stamped .label__face--back > .label__small,
.label.is-stamped .label__face--back > .label__actions,
.label.is-stamped .label__face--back > .field-error { display: none; }

.stamp {
  position: absolute; left: 50%; bottom: 13%;
  margin-left: -150px; width: 300px;
  z-index: 3;
  padding: 14px 18px 10px;
  border: 6px double #1747A0;
  border-radius: 8px;
  color: #1747A0;
  font: 900 3.4rem/.86 var(--f-print);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: rotate(-13deg) scale(1.9);
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--inkmask); mask-image: var(--inkmask); -webkit-mask-size: 200px; mask-size: 200px;
  pointer-events: none;
}
.label.is-stamped .stamp { animation: stamp .42s cubic-bezier(.3, 1.35, .45, 1) forwards; }
.label.is-stamped .label__face--back { animation: thud .32s ease-out .14s; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-6deg) scale(1.9); }
  55% { opacity: .95; transform: rotate(-13deg) scale(.94); }
  100% { opacity: .9; transform: rotate(-13deg) scale(1); }
}
@keyframes thud { 0%, 100% { translate: 0 0; } 40% { translate: 0 3px; } }

/* ---------- load sizes ---------- */
.sizes { --k: var(--kraft-in); padding: clamp(80px, 9vw, 120px) 0 clamp(56px, 6vw, 84px); }
.sizes::before { /* shadow of the box wall above: we are inside the box now */
  content: ""; position: absolute; inset: 0 0 auto; height: 80px;
  background: linear-gradient(180deg, rgba(60, 30, 8, .22), transparent);
  pointer-events: none;
}
.sizes__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sizes__copy > p { margin-top: 18px; max-width: 40ch; font-size: var(--t-l); font-weight: 500; }
.sizes__picker { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sizes__picker button {
  display: grid; gap: 2px; text-align: left;
  padding: 10px 12px 9px;
  border: 2.5px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  font-family: var(--f-print); font-weight: 800; font-size: 1.6rem; line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.sizes__picker small { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700; }
.sizes__picker button:hover { background: rgba(255, 246, 232, .35); }
.sizes__picker button[aria-checked="true"] { background: var(--ink); color: var(--cream); }

.bay { display: grid; gap: 22px; }
.bay__read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
.bay__num { font-size: clamp(4rem, 8vw, 7rem); font-weight: 900; }
.bay__kg { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.bay__fits { flex-basis: 100%; font-weight: 700; font-size: var(--t-l); }
.bay__fits span { background: var(--paper); color: var(--paper-ink); padding: 2px 8px; box-shadow: 0 2px 4px rgba(50, 25, 5, .25); }

.lorry { position: relative; display: grid; grid-template-columns: 1fr 15%; align-items: end; padding-bottom: 26px; }
.lorry__body {
  position: relative;
  border: 3px solid var(--ink);
  border-bottom-width: 6px;
  padding: 8px;
  background: rgba(60, 30, 8, .1);
  box-shadow: inset 0 10px 20px -8px rgba(40, 20, 4, .35);
}
.lorry__load {
  aspect-ratio: 6 / 3.5;
  display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; align-content: flex-start;
}
.cbox {
  position: relative;
  width: 16.666%;
  height: 25%;
  padding: 2px;
}
.cbox i {
  position: absolute; inset: 2px;
  background-color: #CEA272;
  background-image: var(--grain), linear-gradient(180deg, rgba(255, 240, 215, .25), rgba(60, 30, 8, .12));
  border: 1px solid var(--edge);
  box-shadow: 0 3px 4px -2px rgba(40, 20, 4, .5);
}
.cbox:nth-child(3n) i { background-color: #C49567; }
.cbox:nth-child(4n+1) i { background-color: #D3AA7C; }
.cbox i::before { content: ""; position: absolute; left: 43%; width: 14%; top: 0; height: 34%; background: var(--navy); opacity: .9; }
.cbox i::after { content: ""; position: absolute; left: 12%; bottom: 14%; width: 30%; height: 16%; background: var(--paper); opacity: .9; }
.cbox.is-in { animation: drop .5s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.cbox.is-out { animation: lift .26s ease-in forwards; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes drop { from { transform: translateY(-160%); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes lift { to { transform: translateY(-60%); opacity: 0; } }

.lorry__cab { width: 100%; height: auto; margin-left: -3px; fill: rgba(60, 30, 8, .1); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.lorry__cab path:nth-child(2) { fill: rgba(255, 246, 232, .3); }
.lorry__wheel { position: absolute; bottom: 4px; width: clamp(30px, 4.2vw, 48px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--kraft-in) 0 28%, var(--ink) 29%); }
.lorry__wheel--a { left: 9%; } .lorry__wheel--b { left: 22%; } .lorry__wheel--c { right: 4%; }
.lorry__ground { position: absolute; left: -2%; right: -2%; bottom: 4px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 22px); opacity: .55; z-index: -1; }
.bay__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bay__note { font-size: var(--t-s); font-weight: 600; max-width: 34ch; }

/* ---------- services ---------- */
.services { padding: clamp(56px, 6vw, 84px) 0 clamp(80px, 9vw, 120px); }
.services::before { /* top edge of the next box: a fold line */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(180deg, rgba(60, 30, 8, .4) 0 1px, rgba(255, 240, 215, .3) 1px 3px);
}
.services__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.services__lead small { display: block; margin-top: 14px; font: 600 var(--t-l)/1.45 var(--f-body); }
.contents-label {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  padding: 34px clamp(22px, 3vw, 40px) 30px;
  box-shadow: var(--paper-shadow);
  transform: rotate(-.7deg);
}
.contents-label__tape { left: 50%; top: -12px; translate: -50% 0; width: 120px; }
.contents-label__k { font-family: var(--f-print); font-weight: 800; font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; border-bottom: 2px solid var(--rule); padding-bottom: 8px; margin-bottom: 16px; }
.contents-label h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.015em; max-width: 22ch; }
.contents-label p:not(.contents-label__k) { margin-top: 14px; max-width: 58ch; }
.contents-label__links { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.services__lead { text-align: left; }

.boxes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: 18px;
}
.box {
  --b: #C39467;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 72px 26px 24px;
  background-color: var(--b);
  background-image: var(--grain), var(--fibre), linear-gradient(180deg, rgba(255, 240, 215, .16), rgba(60, 30, 8, .1)), var(--flutes);
  border: 1px solid var(--edge);
  box-shadow: 0 2px 0 rgba(255, 240, 215, .25) inset, 0 14px 22px -12px rgba(40, 18, 2, .6), 0 3px 4px rgba(40, 18, 2, .2);
}
.box::before { /* tape running down from the top edge */
  content: ""; position: absolute; top: -1px; left: var(--tx, 50%); translate: -50% 0;
  width: 54px; height: var(--tl, 46px);
  background: rgba(6, 60, 132, .92);
  background-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.18) 40%, rgba(0,0,0,.1));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 96%, 64% 100%, 46% 95%, 28% 100%, 12% 96%, 0 100%);
}
.box h3 { font-family: var(--f-marker); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.05; color: var(--marker); transform: rotate(-2.2deg); transform-origin: left bottom; margin-bottom: 12px; max-width: 14ch; }
.box p { font-weight: 600; max-width: 32ch; }
.box--a { --b: #C49568; grid-column: 1 / 6; grid-row: span 2; --tl: 64px; }
.box__print { position: absolute; left: 50%; top: 104px; translate: -50% 0; width: min(52%, 230px); opacity: .94; }
.box__print img { width: 100%; }
.box__print span { display: block; margin-top: 6px; font: 800 .8rem/1 var(--f-print); letter-spacing: .24em; color: var(--ink); white-space: nowrap; }
.box--a::after, .box--e::after { /* printed handling mark */
  content: ""; position: absolute; right: 22px; top: 22px; width: 46px; height: 46px;
  border: 2px solid var(--ink); opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%230C1D3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 34V10M6 16l6-7 6 7M28 34V10M22 16l6-7 6 7M4 37h32'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.box--a h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
.box--b { --b: #BA8A5E; grid-column: 6 / 10; --tx: 30%; }
.box--c { --b: #CA9C6E; grid-column: 10 / 13; }
.box--d { --b: #C08F62; grid-column: 6 / 9; --tx: 70%; }
.box--e { --b: #CDA173; grid-column: 9 / 13; --tx: 35%; }
.box--f { --b: #BB8C60; grid-column: 1 / 8; }
.box--g { --b: #C69A6D; grid-column: 8 / 13; --tx: 62%; }
.box--a { transform: rotate(-.4deg); }
.box--c { transform: rotate(.6deg); }
.box--g { transform: rotate(-.5deg); }

/* ---------- company (packing slip) ---------- */
.company { --k: var(--kraft-dk); padding: clamp(84px, 9vw, 120px) 0 clamp(72px, 8vw, 110px); }
.company__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; }
.slip {
  position: relative; z-index: 1;
  background: var(--paper);
  background-image: var(--grain);
  background-blend-mode: soft-light;
  color: var(--paper-ink);
  padding: clamp(24px, 4vw, 52px);
  box-shadow: var(--paper-shadow);
  transform: rotate(-.5deg);
}
.slip__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px solid var(--navy); padding-bottom: 18px; }
.slip__head img { width: 96px; }
.slip__doc { font-family: var(--f-print); font-weight: 800; font-size: 1.15rem; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.slip__h { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--navy); margin-top: 4px; }
.slip__meta { display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1.5px solid var(--rule); }
.slip__meta > div { padding: 12px 14px 12px 0; }
.slip__meta > div + div { border-left: 1.5px solid var(--rule); padding-left: 14px; }
.slip__meta dt { font-size: var(--t-xs); font-weight: 800; color: var(--paper-mute); }
.slip__meta dd { font-weight: 700; }
.slip__body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 22px 0; }
.slip__table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.slip__table th, .slip__table td { text-align: left; padding: 9px 0; border-bottom: 1.5px dotted rgba(18, 32, 58, .5); vertical-align: top; }
.slip__table thead th { font-size: var(--t-xs); font-weight: 800; color: var(--paper-mute); border-bottom: 1.5px solid var(--rule); }
.slip__table tbody th { font-weight: 600; width: 45%; }
.slip__table td { font-weight: 800; }
.slip__checked { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 26px 0 8px; }
.slip__checked-k { font-size: var(--t-xs); font-weight: 800; color: var(--paper-mute); writing-mode: vertical-rl; transform: rotate(180deg); }
.stamps { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.ink-stamp {
  display: grid; place-items: center; text-align: center;
  color: #1747A0;
  border: 3px solid currentColor;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--inkmask); mask-image: var(--inkmask); -webkit-mask-size: 220px; mask-size: 220px;
}
.ink-stamp span { font: 900 1.7rem/.9 var(--f-print); letter-spacing: .04em; text-transform: uppercase; }
.ink-stamp small { font-size: .72rem; font-weight: 800; line-height: 1.15; max-width: 16ch; }
.ink-stamp--round { width: 128px; height: 128px; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 7px currentColor; padding: 18px; transform: rotate(-8deg); }
.ink-stamp--round span { font-size: 2.4rem; }
.ink-stamp--rect { padding: 10px 14px; transform: rotate(4deg); border-width: 4px; }
.ink-stamp--oval { padding: 16px 26px; border-radius: 50%; transform: rotate(-3deg); color: var(--navy); }
.slip__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1.5px solid var(--rule); margin-top: 18px; padding-top: 22px; }

.polaroid {
  position: relative; z-index: 2;
  position: sticky; top: 40px;
  margin: 150px 0 0 -26px;
  background: #fff;
  padding: 14px 14px 0;
  box-shadow: var(--paper-shadow);
  transform: rotate(4deg);
}
.polaroid img { aspect-ratio: 1; object-fit: cover; object-position: 58% 50%; width: 100%; }
.polaroid figcaption { padding: 16px 4px 20px; font-style: italic; font-size: 1.15rem; color: var(--paper-ink); }
.polaroid__tape { left: 50%; top: -14px; translate: -50% 0; rotate: -3deg; width: 110px; }

/* ---------- destinations ---------- */
.dest { padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5vw, 72px); }
.dest__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.dest__head p { font-size: var(--t-l); font-weight: 500; max-width: 42ch; }
.tags { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.tag {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  padding: 10px 16px 10px 40px;
  background: var(--paper);
  color: var(--paper-ink);
  text-decoration: none;
  font-weight: 800;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  filter: drop-shadow(0 3px 3px rgba(40, 18, 2, .35));
  transition: transform .25s var(--ease-out), background .2s;
}
.tag::before { /* eyelet */
  content: ""; position: absolute; left: 13px; top: 50%; translate: 0 -50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--kraft);
  box-shadow: 0 0 0 3px var(--cyan), inset 0 2px 3px rgba(40, 18, 2, .5);
}
.tag__to { font-size: var(--t-xs); font-weight: 700; color: var(--paper-mute); }
.tag b { font-family: var(--f-print); font-weight: 900; font-size: 1.35rem; color: var(--navy); margin-left: 4px; }
.tags li:nth-child(3n) .tag { transform: rotate(-1.4deg); }
.tags li:nth-child(3n+1) .tag { transform: rotate(.9deg) translateY(3px); }
.tags li:nth-child(5n) .tag { transform: rotate(2deg); }
.tags li .tag:hover { transform: translateY(-4px) rotate(0); background: #fff; }

/* ---------- reviews ---------- */
.reviews { --k: var(--kraft-lt); padding: clamp(64px, 7vw, 100px) 0 clamp(72px, 8vw, 110px); }
.reviews::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(180deg, rgba(60, 30, 8, .4) 0 1px, rgba(255, 240, 215, .3) 1px 3px); }
.reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.reviews__score { margin-top: 24px; font-weight: 700; font-size: var(--t-l); line-height: 1.6; }
.reviews__score .print { font-size: 2.8rem; line-height: 1; }
.note {
  position: relative;
  padding: 44px 30px 28px 34px;
  background-color: #FFFDF6;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(6, 60, 132, .16) 31px 32px);
  background-position: 0 14px;
  color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
}
.note blockquote p { font-size: 1.2rem; line-height: 32px; }
.note figcaption { margin-top: 16px; line-height: 32px; color: var(--paper-mute); font-weight: 600; }
.note figcaption strong { color: var(--paper-ink); margin-right: 8px; }
.note__tape { left: 50%; top: -12px; translate: -50% 0; width: 110px; }
.note--a { transform: rotate(-1.6deg); margin-top: 40px; }
.note--b { transform: rotate(1.3deg); margin-top: 110px; }
.note--b .note__tape { rotate: 4deg; }

/* ---------- closing ---------- */
.closing { --k: var(--kraft); padding: clamp(64px, 7vw, 110px) 0 clamp(88px, 9vw, 140px); text-align: center; }
.closing__inner { display: grid; justify-items: center; gap: 22px; }
.closing p { font-size: var(--t-l); font-weight: 600; }

/* ---------- footer (box bottom) ---------- */
.foot {
  position: relative;
  background-color: var(--kraft-bottom);
  background-image: var(--grain), var(--mottle), var(--flutes);
  color: var(--cream);
  padding: clamp(72px, 8vw, 110px) 0 28px;
}
.foot::before { /* the flap seam the tape runs along */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(30, 14, 2, .5); }
.foot__seam { position: absolute; left: -2%; right: -2%; top: 0; transform: translateY(-50%); z-index: 3; filter: drop-shadow(0 3px 3px rgba(20, 8, 0, .5)); }
.foot__seam .tape { --th: 54px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr .8fr; gap: 40px; }
.foot .brand__label { display: inline-block; transform: rotate(-2deg); }
.foot__brand p { margin-top: 18px; max-width: 30ch; }
.foot__langs { font-family: var(--f-print); font-weight: 800; letter-spacing: .14em; font-size: 1.1rem; }
.foot__h { font-size: 1.7rem; color: var(--cream); margin-bottom: 12px; }
.foot__list { display: grid; gap: 6px; font-size: var(--t-s); }
.foot__list a { text-decoration: none; }
.foot__list a:hover { text-decoration: underline; }
.foot__list b { display: inline-block; min-width: 3.4em; font-weight: 800; }
.foot__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(255, 246, 232, .35); font-size: var(--t-xs); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav__list { gap: 16px; }
  .nav-row { gap: 20px; }
}
@media (max-width: 1080px) {
  .burger {
    display: grid; gap: 5px; align-content: center; justify-items: center;
    width: 48px; height: 48px; margin-left: 4px;
    border: 2.5px solid var(--ink); border-radius: 2px; background: transparent; cursor: pointer;
  }
  .burger span { display: block; width: 22px; height: 2.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-row { justify-content: space-between; }
  .nav-row > .btn-tape { margin-left: auto; }
  .nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 6px);
    display: none; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 22px 24px 24px;
    background: var(--paper); color: var(--paper-ink);
    box-shadow: var(--paper-shadow);
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: block; padding: 12px 0; border-bottom: 1.5px dotted rgba(18, 32, 58, .4); font-size: 1.125rem; }
  .nav__extra { margin: 12px 0 0; }
  .lang { border-color: var(--paper-ink); }
  .site-head { position: relative; }
  .nav-row { position: relative; }

  .hero__grid { grid-template-columns: 1fr; }
  .label-wrap { margin-top: 8px; max-width: 640px; }
  .label-wrap__tape-l, .label-wrap__tape-r { display: block; }
  .label-wrap__tape-l { left: -14px; top: 4px; transform: rotate(-32deg); }
  .label-wrap__tape-r { right: -14px; top: 4px; transform: rotate(30deg); }
  .label__face { padding-top: 30px; }
  .label__face::before { top: 22px; }
  .hero__side { max-width: 640px; }
  .flap { margin-inline: 0; }

  .sizes__grid { grid-template-columns: 1fr; }
  .services__intro { grid-template-columns: 1fr; gap: 28px; }
  .services__lead { text-align: left; }
  .company__grid { grid-template-columns: 1fr; }
  .polaroid { position: relative; top: auto; margin: 36px auto 0; width: min(78%, 360px); }
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .reviews__head { grid-column: 1 / -1; }
  .note--a, .note--b { margin-top: 10px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .topline__hours { display: none; }
  .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .box { grid-column: auto !important; grid-row: auto !important; min-height: 190px; }
  .box--a { grid-column: 1 / -1 !important; min-height: 260px; }
  .box__print { position: static; translate: none; width: 150px; margin: 0 0 22px; }
  .slip__body { grid-template-columns: 1fr; gap: 14px; }
  .dest__head { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  :root { --t-l: 1.125rem; }
  .topline { justify-content: center; }
  .topline__phones { gap: 4px 14px; justify-content: center; }
  .topline__phones li:nth-child(n+3) { display: none; }
  .nav-row { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .brand__label img { width: 62px; }
  .nav-row > .btn-tape span { padding: 11px 14px 10px; font-size: .9375rem; }
  .hero__grid { padding-top: 86px; }
  .hero__title { font-size: clamp(3.1rem, 15.5vw, 4.6rem); }
  .seal { position: absolute; right: 0; top: -14px; width: 104px; height: 104px; }
  .hero__under { margin-top: 22px; }
  .symbols li { width: 40px; height: 40px; }
  .symbols svg { width: 26px; height: 26px; }
  .label { transform: none; }
  .label__head { grid-template-columns: auto 1fr; }
  .label__sort { position: absolute; right: 8px; top: -8px; font-size: 1.1rem; padding: 6px 8px 4px; }
  .label__sort span { font-size: 1.8rem; }
  .label__mark { width: 58px; }
  .label__row--split { grid-template-columns: 1fr; }
  .label__row--split > .field + .field { border-left: 0; border-top: 2px solid var(--rule); }
  .label__foot { grid-template-columns: 1fr; gap: 10px; }
  .barcode { width: 100%; max-width: 260px; }
  .label__actions { flex-direction: column-reverse; align-items: stretch; }
  .label__actions .btn-ink { min-width: 0; }
  .stamp { font-size: 2.6rem; width: 240px; margin-left: -120px; bottom: 8%; }
  .label.is-stamped .label__face--back { min-height: 420px; }
  .sizes__picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .sizes__picker button { font-size: 1.3rem; padding: 8px 8px 7px; }
  .sizes__picker small { font-size: .72rem; }
  .lorry { grid-template-columns: 1fr 17%; }
  .lorry__body { padding: 4px; border-width: 2.5px; border-bottom-width: 5px; }
  .boxes { grid-template-columns: 1fr; gap: 16px; }
  .box { min-height: 0; padding: 48px 22px 22px; }
  .box--a { min-height: 0; padding-top: 80px; }
  .box:nth-child(even) { margin-left: 18px; }
  .box:nth-child(odd):not(.box--a) { margin-right: 18px; }
  .slip__meta { grid-template-columns: 1fr 1fr; }
  .slip__meta > div:first-child { grid-column: 1 / -1; border-bottom: 1.5px solid var(--rule); }
  .slip__meta > div:nth-child(2) { border-left: 0; padding-left: 0; }
  .slip__checked { grid-template-columns: 1fr; }
  .slip__checked-k { writing-mode: horizontal-tb; transform: none; }
  .stamps { gap: 14px; }
  .ink-stamp--round { width: 112px; height: 112px; }
  .tags { gap: 10px 8px; }
  .tag { min-height: 46px; padding: 8px 12px 8px 36px; font-size: .9375rem; }
  .tag b { font-size: 1.15rem; }
  .reviews__grid { grid-template-columns: 1fr; }
  .note { padding: 40px 22px 22px 24px; }
  .note blockquote p { font-size: 1.0625rem; }
  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .unroll { clip-path: none; animation: none; }
  .unroll__roll { display: none; }
  .label-wrap { animation: none; }
  .tape__print { transform: none !important; }
  .label.is-stamped .stamp { animation: none; opacity: .9; transform: rotate(-13deg); }
}