/* KPC Vault — "Pickup Day"
   Kraft board, label stock, stencil ink, packing tape, rubber stamps. */

:root {
  --kraft: #C9A77C;
  --kraft-deep: #B8935F;
  --kraft-shade: #A27E4E;
  --paper: #F4F0E6;
  --paper-edge: #E4DCCB;
  --ink: #1A1712;
  --ink-soft: #4A4136;
  --tape: #E8492B;
  --tape-deep: #C73A1F;
  --stamp: #2F5FC4;
  --focus: #2F5FC4;

  --f-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --f-stencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
  --f-print: "Big Shoulders", "Arial Narrow", sans-serif;
  --f-marker: "Patrick Hand", "Comic Sans MS", cursive;
  --f-body: "Public Sans", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 76rem;
  --rule: 2px solid var(--ink);
  --hair: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  scrollbar-color: var(--ink) var(--kraft-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--kraft);
  /* corrugated flutes: faint vertical board grain */
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      color-mix(in srgb, var(--kraft-shade) 22%, transparent) 7px 8px,
      transparent 8px 14px);
  caret-color: var(--tape);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--tape); color: var(--ink); }

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

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--tape); }

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

.icon {
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Packing tape header ---------- */

.tape {
  position: sticky; top: 0; z-index: 20;
  background-color: var(--tape);
  box-shadow: 0 2px 10px rgb(60 35 10 / .22);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 4px) no-repeat,
    radial-gradient(3px 4px at 50% 0, #000 98%, transparent) bottom / 9px 4px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 4px) no-repeat,
    radial-gradient(3px 4px at 50% 0, #000 98%, transparent) bottom / 9px 4px repeat-x;
}

.tape__inner {
  max-width: var(--max); margin: 0 auto;
  padding: .6rem var(--gutter) .7rem;
  display: flex; align-items: center; gap: 1.5rem;
}

.tape__logo {
  display: block;
  background: var(--paper);
  padding: .3rem .6rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 4px rgb(70 30 10 / .3);
}
.tape__logo img { height: 2.4rem; width: auto; }
.tape__book {
  display: none;
  align-items: center; min-height: 2.9rem; padding: 0 .9rem;
  border: 2px solid var(--ink);
  font-family: var(--f-print); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}

.tape__nav {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin-left: auto; white-space: nowrap;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
}
.tape__nav a { text-decoration: none; padding: .35rem 0; }
.tape__nav a:hover { text-decoration: underline; text-decoration-color: var(--ink); }

.tape__call {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; min-height: 2.9rem;
  font-family: var(--f-print); font-weight: 800; font-size: 1.2rem;
  letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s var(--ease);
}
.tape__call:hover { background: #000; }
.tape__call .icon { color: var(--tape); }

/* ---------- The label (shared anatomy) ---------- */

.label {
  position: relative;
  background: var(--paper);
  border: var(--rule);
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 14px 28px -12px rgb(70 45 15 / .45),
    0 3px 6px rgb(70 45 15 / .18);
}

.label__head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.25rem;
  border-bottom: var(--rule);
  font-family: var(--f-print); font-weight: 800;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
}

/* clear packing tape, laid across a label */
.clear-tape {
  position: absolute; pointer-events: none; z-index: 2;
  background: url("assets/clear-tape.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgb(70 45 15 / .18));
}

/* ---------- 1. Hero label ---------- */

.hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
}

.label--hero {
  transform: rotate(-.8deg);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
}
.label--hero > .label__head,
.label--hero > .fields,
.label--hero > .label__foot { grid-column: 1 / -1; }
.label--hero .hero__title { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.label--hero .hero__lede { padding-left: 0; justify-self: end; max-width: 26rem; }

.clear-tape--corner {
  width: 13rem; height: 3.2rem;
  top: -1.1rem; right: -2.5rem;
  transform: rotate(32deg);
}

.hero__title {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) .5rem;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(3.4rem, 9.5vw, 6rem);
  line-height: .9; letter-spacing: -.01em; text-transform: uppercase;
  text-wrap: balance;
}

.hero__lede {
  margin: 0;
  padding: .75rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
  max-width: 40rem;
  font-size: clamp(1.15rem, .6vw + 1rem, 1.35rem);
  line-height: 1.5;
}

.fields {
  margin: 0;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr;
  gap: 2px;
  background: var(--ink);
  border-top: var(--rule);
}
.field {
  padding: .8rem 1.25rem 1.1rem;
  background: var(--paper);
  min-width: 0;
}
.field dt {
  font-family: var(--f-print); font-weight: 800;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field dd {
  margin: .35rem 0 0;
  font-family: var(--f-marker);
  font-size: clamp(1.35rem, 1.4vw + .7rem, 1.7rem);
  line-height: 1.15;
  transform: rotate(-.6deg);
  transform-origin: left center;
}

.label__foot { border-top: var(--rule); }

.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: 1.2rem clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ink); color: var(--paper);
  font-family: var(--f-print); font-weight: 800;
  font-size: clamp(1.45rem, 2.4vw + .5rem, 2.4rem);
  line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; text-align: left;
  border: 0; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.cta .icon--arrow {
  width: 1.1em; height: 1.1em; color: var(--tape);
  transition: transform .35s var(--ease);
}
.cta:hover { background: #000; }
.cta:hover .icon--arrow { transform: translateX(.3em); }
.cta:focus-visible { outline-offset: -6px; outline-color: var(--tape); }

.label__alt {
  margin: 0; padding: .9rem clamp(1.25rem, 3vw, 2.5rem) 1rem;
  font-size: 1rem;
}
.label__alt a { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Shared section heads ---------- */

.h2 {
  margin: 0 0 .75rem;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: .95; letter-spacing: -.005em; text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- 2. Journey ---------- */

.journey {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
}
.journey__intro { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.journey__intro p { margin: 0; font-size: 1.2rem; }

.journey__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.tracker { position: sticky; top: 6.5rem; }
.label--tracker { transform: rotate(-1.4deg); }

.tracker__count { font-variant-numeric: tabular-nums; }

.tracker__list { list-style: none; margin: 0; padding: 0; }
.tracker__row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.6rem;
  padding: .6rem 1.25rem;
  border-bottom: var(--hair);
}
.tracker__row:last-child { border-bottom: 0; }
.tracker__name {
  font-family: var(--f-display); font-weight: 900;
  font-size: 2.1rem; line-height: 1; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
  transition: color .4s var(--ease);
}
.tracker__row.is-active .tracker__name,
.tracker__row.is-done .tracker__name { color: var(--ink); }
.tracker__row.is-active .tracker__name {
  text-decoration: underline; text-decoration-color: var(--tape);
  text-decoration-thickness: 4px; text-underline-offset: .18em;
}

.row-tape {
  position: absolute; left: 62%; right: -1.1rem; top: 50%; height: 1.7rem;
  margin-top: -.85rem; opacity: .8;
  background: url("assets/clear-tape.png") center / 100% 100% no-repeat;
  transform: rotate(-4deg) scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}
.tracker__row.is-done .row-tape {
  transform: rotate(-4deg) scaleX(1);
  transition: transform .7s var(--ease) .15s;
}

/* rubber stamps */
.stamp {
  display: inline-block;
  font-family: var(--f-stencil); font-weight: 900; text-transform: uppercase;
  color: var(--stamp);
  border: 3px solid currentColor;
  border-radius: 6px;
  padding: .15em .5em .1em;
  line-height: 1;
  letter-spacing: .06em;
  mix-blend-mode: multiply;
  -webkit-mask: url("assets/stamp-grain.png") 0 0 / 140px 140px repeat;
          mask: url("assets/stamp-grain.png") 0 0 / 140px 140px repeat;
}
.stamp--small {
  font-size: 1.15rem;
  transform: rotate(-9deg) scale(1.6);
  opacity: 0; filter: blur(3px);
}
.tracker__row.is-done .stamp--small {
  opacity: .92; filter: blur(0);
  transform: rotate(-9deg) scale(1);
  transition: transform .45s var(--ease), opacity .2s linear, filter .3s var(--ease);
}

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  padding: 0 0 clamp(3rem, 9vh, 6rem);
  max-width: 40rem;
}
.step:last-child { padding-bottom: 0; }
.step__title {
  margin: 0;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: .95; text-transform: uppercase;
}
.step__who {
  margin: .4rem 0 .8rem;
  font-family: var(--f-marker); font-size: 1.55rem; line-height: 1.2;
  color: #661B0C;
  transform: rotate(-.5deg); transform-origin: left;
}
.step > p:not(.step__who) { margin: 0; font-size: 1.15rem; }

/* sample settlement statement */
.statement {
  position: relative;
  margin: 2rem 0 0;
  background: var(--paper);
  border: var(--rule);
  box-shadow: 0 14px 28px -14px rgb(70 45 15 / .45);
  transform: rotate(.6deg);
}
.statement__head {
  display: flex; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; align-items: baseline;
  padding: .75rem 1.1rem;
  border-bottom: var(--rule);
  font-family: var(--f-print); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.statement__sample {
  font-family: var(--f-body); font-weight: 600; 
  font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.statement table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.statement th {
  text-align: left; padding: .55rem 1.1rem;
  font-family: var(--f-print); font-weight: 800; font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: var(--hair);
}
.statement td { padding: .65rem 1.1rem; border-bottom: var(--hair); }
.statement tbody tr:last-child td { border-bottom: var(--rule); }
.statement figcaption { padding: .9rem 1.1rem 1.1rem; font-size: 1rem; max-width: 32rem; }
.stamp--paid {
  position: absolute; right: -1.25rem; bottom: -1.4rem;
  font-size: 2.6rem;
  transform: rotate(-12deg) scale(1.5); opacity: 0; filter: blur(4px);
}
.step.is-done .stamp--paid, .step.is-active .stamp--paid {
  transform: rotate(-12deg) scale(1); opacity: .9; filter: blur(0);
  transition: transform .5s var(--ease) .25s, opacity .2s linear .25s, filter .35s var(--ease) .25s;
}

/* ---------- 3. Packing list ---------- */

.packing {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.packing__intro p { margin: 0; font-size: 1.2rem; max-width: 30rem; }
.label--list { transform: rotate(.7deg); }
.list { list-style: none; margin: 0; padding: .4rem 0; }
.list li {
  display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: baseline; gap: .6rem;
  padding: .8rem 1.25rem;
  border-bottom: var(--hair);
}
.list li::before {
  content: ""; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--ink); align-self: center;
  background:
    linear-gradient(135deg, transparent 44%, var(--stamp) 45% 57%, transparent 58%) no-repeat 0 0 / 100% 100%;
}
.list__item {
  font-family: var(--f-marker); font-size: clamp(1.45rem, 1vw + 1.05rem, 1.75rem); line-height: 1.15;
}
.list__note {
  font-family: var(--f-print); font-weight: 600;
  font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  text-align: right;
}
.list__foot { margin: 0; padding: 1rem 1.25rem 1.25rem; font-size: 1.05rem; max-width: 36rem; }
.exclude { padding: 1rem 1.25rem 1.1rem; border-top: var(--rule); border-bottom: var(--hair); font-size: 1.02rem; line-height: 1.5; }
.exclude p { margin: 0; }
.exclude .exclude__title {
  margin-bottom: .4rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.exclude__list { margin: 0; padding-left: 1.2rem; }
.exclude__list li + li { margin-top: .2rem; }
.exclude .exclude__note { margin-top: .75rem; color: var(--ink-soft); }

/* ---------- 4/5. Shipping label ---------- */

.shipping {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.label--ship {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.3fr;
  transform: rotate(-.4deg);
}
.label--ship > * { padding: 1.25rem 1.5rem 1.5rem; border-right: var(--rule); }
.label--ship > *:last-child { border-right: 0; }
.ship__key {
  display: block; margin-bottom: .6rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ship__from { display: flex; flex-direction: column; gap: .5rem; }
.ship__logo { width: 11rem; }
.cities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: .15rem 2rem;
  font-family: var(--f-print); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.35rem, 1vw + .8rem, 1.75rem); line-height: 1.2;
}
.cities li { white-space: nowrap; }
.ship__record { margin: 0; display: grid; gap: .9rem; align-content: start; }
.ship__record div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: var(--hair); padding-bottom: .6rem; }
.ship__record div:last-child { border-bottom: 0; padding-bottom: 0; }
.ship__record dt { font-size: 1rem; }
.ship__record dd {
  margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Book ---------- */

.book {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.book {
  grid-template-areas: "intro form" "extras form";
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
.book__intro { grid-area: intro; }
.book__extras { grid-area: extras; }
.label--form { grid-area: form; }
.book__intro > p { margin: 0 0 2rem; font-size: 1.2rem; max-width: 30rem; }

.call-card {
  display: grid; gap: .1rem;
  max-width: 24rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--tape);
  border: var(--rule);
  text-decoration: none;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 22px -12px rgb(70 30 10 / .6);
  transition: transform .35s var(--ease);
}
.call-card:hover { transform: rotate(-.5deg) translateY(-2px); }
.call-card__num { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 3vw + 1rem, 2.9rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.call-card__sub { font-weight: 600; font-size: 1rem; }
.book__email { margin: 1.25rem 0 2.25rem; }
.book__email a { font-weight: 600; }

.label--form { transform: rotate(.5deg); }

.form { padding: 1.4rem clamp(1.25rem, 3vw, 2rem) 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.input { margin-bottom: 1.15rem; }
.input label {
  display: block; margin-bottom: .3rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.optional { font-family: var(--f-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-size: 1rem; }

input, select, textarea {
  width: 100%;
  font: inherit; font-size: 1.1rem; color: var(--ink);
  background: #FFFDF8;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: .75rem .85rem;
  min-height: 3.2rem;
  transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
::placeholder { color: #6E6457; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--stamp);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 35%, transparent);
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select .icon { position: absolute; right: .85rem; top: 50%; translate: 0 -50%; pointer-events: none; }

.contact-pair { margin: 0 0 1.15rem; padding: 0; border: 0; min-width: 0; }
.contact-pair legend {
  padding: 0; margin-bottom: .2rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.contact-pair .input label { font-size: .95rem; color: var(--ink-soft); }
.contact-pair .form__row { row-gap: 1.15rem; }
.contact-pair .form__row .input { margin-bottom: 0; }
.contact-pair > .input__error { margin-top: .5rem; }

.form__summary {
  margin: 0 0 1.4rem; padding: 1rem 1.15rem;
  border: 2px solid var(--tape-deep); border-left-width: .5rem;
  background: #FFF4EF;
}
.form__summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form__summary-title {
  margin: 0 0 .4rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; color: #A12C14;
}
.form__summary ul { margin: 0; padding-left: 1.2rem; }
.form__summary li + li { margin-top: .3rem; }
.form__summary a { color: #A12C14; font-weight: 700; }

.form__reassure { margin: .25rem 0 1rem; font-size: 1rem; color: var(--ink-soft); }

.input.has-error input, .input.has-error select { border-color: var(--tape-deep); background: #FFF4EF; }
.input__error { margin: .35rem 0 0; font-size: 1rem; font-weight: 600; color: #A12C14; }
.input__error:empty { display: none; }

.cta--submit {
  margin: .5rem calc(-1 * clamp(1.25rem, 3vw, 2rem)) 0;
  width: calc(100% + 2 * clamp(1.25rem, 3vw, 2rem));
  border-top: var(--rule);
}
.cta--submit[disabled] { cursor: progress; background: var(--ink-soft); }
.cta--submit[disabled] .icon--arrow { animation: nudge 1s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(.3em); } }

.form__status { margin: 0; padding: 0 0 .25rem; font-weight: 600; }
.form__status:not(:empty) { padding: 1rem 0 1.25rem; }
.form__status.is-error { color: #A12C14; }
.form__status a { font-weight: 800; }

.received { position: relative; padding: 2.5rem clamp(1.25rem, 3vw, 2rem) 2.75rem; min-height: 22rem; }
.received:focus { outline: none; }
.received__title {
  margin: 1.5rem 0 .5rem;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
}
.received p { margin: 0 0 .75rem; font-size: 1.15rem; max-width: 30rem; }
.received__small { font-size: 1rem !important; }
.stamp--received {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  transform: rotate(-8deg);
  animation: stamp-in .55s var(--ease) both;
}
@keyframes stamp-in {
  from { transform: rotate(-8deg) scale(1.7); opacity: 0; filter: blur(4px); }
  to   { transform: rotate(-8deg) scale(1); opacity: .92; filter: blur(0); }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ink); color: var(--paper);

}
.footer__inner {
  max-width: var(--max); margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  display: grid; gap: .4rem;
}
.footer__logo { width: 12rem; filter: invert(1) sepia(.15); margin-bottom: .75rem; }
.footer p { margin: 0; }
.footer a { color: var(--paper); font-weight: 600; }
.footer__legal { margin-top: 1rem !important; font-size: 1rem; color: #CFC6B5; }

/* ---------- Load moment: the corner tape lays down ---------- */

@media (prefers-reduced-motion: no-preference) {
  .clear-tape--corner { animation: lay-tape .9s var(--ease) .35s both; }
  @keyframes lay-tape {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 64rem) {
  .fields { grid-template-columns: repeat(6, 1fr); }
  .field { grid-column: span 2; }
  .field:nth-child(n+4) { grid-column: span 3; }
  .label--ship { grid-template-columns: 1fr 1fr; }
  .label--ship > .ship__area { border-right: 0; }
  .label--ship > .ship__record { grid-column: 1 / -1; border-top: var(--rule); grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .ship__record div { flex-direction: column-reverse; align-items: flex-start; border-bottom: 0; padding-bottom: 0; gap: .3rem; }
}

@media (max-width: 52rem) {
  .label--hero { display: block; }
  .label--hero .hero__title { padding-bottom: .5rem; }
  .label--hero .hero__lede { padding-left: clamp(1.25rem, 3vw, 2.5rem); max-width: 40rem; }
  .tape__nav { display: none; }
  .tape__book { display: inline-flex; margin-left: auto; }
  .journey__grid { grid-template-columns: 1fr; }
  .tracker { top: 4.4rem; z-index: 5; }
  .label--tracker { transform: none; }
  /* Slim sticky strip: one row, stamps laid over the step names */
  .tracker__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tracker .label__head { display: none; }
  .tracker__row {
    justify-content: center;
    min-height: 2.75rem; padding: .2rem .25rem;
    border-bottom: 0; border-right: var(--hair);
  }
  .tracker__row:last-child { border-right: 0; }
  .tracker__name { font-size: 1.2rem; }
  /* No room for a second word: the step name itself takes the stamp */
  .tracker .stamp--small { display: none; }
  .tracker__row.is-done .tracker__name {
    color: var(--stamp);
    border: 2px solid currentColor; border-radius: 4px;
    padding: .05em .3em 0;
    rotate: -4deg;
  }
  .tracker__row.is-active .tracker__name { text-underline-offset: .12em; text-decoration-thickness: 3px; }
  .row-tape { display: none; }
  .packing, .book { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  body { background-size: auto; }
  .tape__inner { gap: .6rem; }
  .tape__logo { padding: .2rem .4rem; }
  .tape__logo img { height: 1.8rem; }
  .tape__book { padding: 0 .7rem; font-size: 1rem; }
  .tape__call { padding: .55rem .75rem; font-size: 1rem; }
  .tape__call-label { display: none; }
  .label--list, .label--ship, .label--form, .statement { transform: none; }
  .label--hero { transform: rotate(-.4deg); }
  .clear-tape--corner { right: -1rem; width: 8rem; height: 2.4rem; top: -.9rem; }
  .fields { grid-template-columns: repeat(3, 1fr); }
  .field, .field:nth-child(n) { grid-column: auto; }
  .field:nth-child(2) { display: none; }
  .field:first-child { grid-column: 1 / -1; }
  .field { padding: .6rem .7rem .75rem; }
  .field dd { font-size: 1.25rem; }
  .hero { padding-top: 1.25rem; }
  .hero__title { font-size: 3.1rem; padding-top: 1rem; }
  .label--hero .hero__lede { font-size: 1.08rem; padding-top: .5rem; padding-bottom: 1rem; }
  .cta { padding: 1rem 1.1rem; font-size: 1.35rem; }
  .label__head { font-size: 1rem; padding: .6rem 1rem; }
  .form__row { grid-template-columns: 1fr; }
  .label--ship { grid-template-columns: 1fr; }
  .label--ship > * { border-right: 0; border-bottom: var(--rule); }
  .label--ship > *:last-child { border-bottom: 0; }
  .label--ship > .ship__record { grid-template-columns: 1fr; border-top: 0; gap: .9rem; }
  .ship__record div { flex-direction: row; align-items: baseline; justify-content: space-between; border-bottom: var(--hair); padding-bottom: .6rem; }
  .list li { grid-template-columns: 1.9rem 1fr; }
  .list__note { grid-column: 2; text-align: left; font-size: 1rem; }
  .statement td, .statement th { padding-left: .8rem; padding-right: .8rem; }
  .stamp--paid { font-size: 2rem; right: .5rem; bottom: -1.2rem; }
}

/* ---------- Route header, sale tag, statement figures ---------- */

.route-key { color: var(--ink-soft); margin-right: .35em; }

.lot-tag {
  position: relative;
  margin: 1.75rem 0 0;
  width: min(100%, 27rem);
  background: var(--paper);
  border: var(--rule);
  /* hang-tag silhouette: clipped top corners */
  clip-path: polygon(1.6rem 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%, 0 1.6rem);
  padding: 2.4rem 1.25rem 1.1rem;
  transform: rotate(-2.5deg);
}
.lot-tag::before, .lot-tag::after {
  content: ""; position: absolute; top: 0; width: 2.3rem; height: 2px; background: var(--ink);
}
.lot-tag::before { left: -.2rem; transform-origin: left; transform: translateY(1.6rem) rotate(-45deg); }
.lot-tag::after { right: -.2rem; transform-origin: right; transform: translateY(1.6rem) rotate(45deg); }
.lot-tag__hole {
  position: absolute; top: .75rem; left: 50%; translate: -50% 0;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--kraft); border: 2px solid var(--ink);
}
.lot-tag__body p { margin: 0; }
.lot-tag__key {
  font-family: var(--f-print); font-weight: 800; font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.lot-tag__val { font-family: var(--f-marker); font-size: 2.3rem; line-height: 1.1; }
.lot-tag__body > .lot-tag__val { margin-bottom: .7rem; }
.lot-tag__val--small { font-size: 1.45rem; }
.lot-tag__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: var(--hair); padding-top: .6rem; }
.lot-tag__note { margin-top: .9rem; font-size: 1rem; color: var(--ink-soft); }
.stamp--sold {
  position: absolute; right: .9rem; top: 2.2rem;
  font-size: 2.6rem;
  transform: rotate(10deg) scale(1.5); opacity: 0; filter: blur(4px);
}
.step.is-done .stamp--sold, .step.is-active .stamp--sold {
  transform: rotate(10deg) scale(1); opacity: .9; filter: blur(0);
  transition: transform .5s var(--ease) .2s, opacity .2s linear .2s, filter .35s var(--ease) .2s;
}

.statement .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "$" then a write-in line that starts after it and sits on the text baseline */
.statement .fill {
  display: inline-flex; align-items: baseline; gap: .2em;
  white-space: nowrap;
}
.statement .fill::before { content: "$"; color: var(--ink-soft); font-weight: 600; }
.statement .fill::after {
  content: ""; display: inline-block; width: 2.6em; height: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
}
.statement tfoot th {
  text-align: left; padding: .7rem 1.1rem;
  font-family: var(--f-print); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: var(--rule);
}
.statement tfoot td { padding: .7rem 1.1rem; font-size: 1.15rem; border-bottom: var(--rule); }
.statement tbody tr:last-child td { border-bottom: var(--hair); }

.only-desk { display: none; }
@media (hover: hover) and (pointer: fine) {
  .only-touch { display: none; }
  .only-desk { display: inline; }
}

@media (max-width: 40rem) {
  .statement .col-via { display: none; }
  .statement tfoot th { font-size: 1rem; }
  .statement th.num, .statement td.num { padding-left: .35rem; padding-right: .5rem; }
  .statement th:first-child, .statement td:first-child { width: 28%; }
  .statement table { font-size: 1rem; }
  .statement td, .statement th, .statement tfoot th, .statement tfoot td { padding-left: .6rem; padding-right: .6rem; }
  .lot-tag { transform: rotate(-1.5deg); }
}

/* ---------- Narrow-screen fit for the journey + statement ---------- */
.journey__grid > *, .steps, .step { min-width: 0; }
.statement table { table-layout: fixed; }
.statement th:first-child, .statement td:first-child { width: 34%; }
.statement .col-via { width: 22%; }
.tracker__row.is-done .stamp--small {
  opacity: 1;
  -webkit-mask-size: 60px 60px;
          mask-size: 60px 60px;
}

@media (max-width: 40rem) {
  .statement th:first-child, .statement td:first-child { width: 31%; }
  .statement th { letter-spacing: 0; font-size: 1rem; white-space: normal; line-height: 1.15; vertical-align: bottom; }
  .statement td { font-size: 1rem; }
  .statement .fill::after { width: 2em; }
  .statement__head { padding: .7rem .8rem; }
  .tracker__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tracker__name { font-size: 1.15rem; }
}

main { overflow-x: clip; }
.statement th { white-space: normal; line-height: 1.15; vertical-align: bottom; letter-spacing: .08em; }
.statement th.num { padding-left: .5rem; }

/* ---------- Peak CTA and the "good to know" label ---------- */

.peak-cta {
  margin-top: 2.75rem;
  border: var(--rule);
  background: var(--paper);
  box-shadow: 0 14px 28px -14px rgb(70 45 15 / .45);
}
.peak-cta .label__alt { border-top: var(--rule); }


.label--faq { margin: 0 0 2.25rem; transform: rotate(-.4deg); max-width: 32rem; }
.faq { margin: 0; }
.faq > div { padding: .9rem 1.25rem 1rem; border-bottom: var(--hair); }
.faq > div:last-child { border-bottom: 0; }
.faq dt { font-weight: 800; font-size: 1.08rem; line-height: 1.35; }
.faq dd { margin: .25rem 0 0; font-size: 1.02rem; line-height: 1.5; }

.form__status:focus { outline: none; }

@media (max-width: 40rem) {
  .peak-cta { margin-top: 2.25rem; }
  .label--faq { transform: none; }
  .lot-tag__val { font-size: 2rem; }
}

/* ---------- Round-3 fixes ---------- */
.tape__logo { min-height: 44px; display: flex; align-items: center; }

@media (max-width: 52rem) {
  .book { grid-template-areas: "intro" "form" "extras"; grid-template-rows: auto; row-gap: 2.5rem; }
  .book__intro > p { margin-bottom: 0; }
}

/* ---------- Round-4 fixes ---------- */
.journey__cta {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
}
.journey__cta .peak-cta { grid-column: 2; max-width: 40rem; margin-top: 3rem; }
.h2--small { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1.25rem; }
.input__hint { margin: -.1rem 0 .4rem; font-size: 1rem; color: var(--ink-soft); }
.label--form:focus { outline: none; }
.label__head--route { padding-right: 8.5rem; }

@media (max-width: 52rem) {
  .journey__cta { grid-template-columns: 1fr; }
  .journey__cta .peak-cta { grid-column: 1; margin-top: 2.5rem; }
}
@media (max-width: 40rem) {
  .label__head--route { padding-right: 3.5rem; }
}

/* Statement columns at the 16px heading size */
.statement th:first-child, .statement td:first-child { width: 29%; }
.statement .col-via { width: 20%; }
.statement th.num { letter-spacing: .03em; padding-left: .4rem; padding-right: .7rem; }
@media (max-width: 40rem) {
  .statement th:first-child, .statement td:first-child { width: 25%; }
  .statement th.num { letter-spacing: 0; padding-left: .3rem; padding-right: .45rem; }
}

/* ---------- 3b. Rate card ---------- */

.rates {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.rates__intro p { margin: 0 0 1rem; font-size: 1.2rem; max-width: 30rem; }
.label--rates { transform: rotate(-.5deg); }

.ratecard { width: 100%; border-collapse: collapse; }
.ratecard thead th {
  padding: .7rem 1.25rem .5rem; text-align: left;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ratecard tbody th, .ratecard tbody td { padding: .7rem 1.25rem; border-top: var(--hair); }
.ratecard tbody th {
  text-align: left; font-weight: 400;
  font-family: var(--f-marker); font-size: clamp(1.45rem, 1vw + 1.05rem, 1.75rem); line-height: 1.15;
}
.ratecard .num { text-align: right; font-variant-numeric: tabular-nums; }
.ratecard tbody td {
  font-family: var(--f-display); font-weight: 900; font-size: 2.1rem; line-height: 1;
}
.ratecard__special th, .ratecard__special td { border-top: var(--rule); background: color-mix(in srgb, var(--kraft) 18%, var(--paper)); }

.ratecard__only {
  margin: 0; padding: .85rem 1.25rem;
  border-top: var(--rule);
  background: var(--ink); color: var(--paper);
  font-size: 1.05rem; line-height: 1.45;
}
.ratecard__only strong { color: #fff; }
.specialty { padding: 1rem 1.25rem 1.1rem; border-top: var(--rule); }
.specialty__title, .estimate__title {
  margin: 0 0 .5rem;
  font-family: var(--f-print); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.specialty__list { margin: 0; padding-left: 1.2rem; font-size: 1.02rem; line-height: 1.5; }
.specialty__list li + li { margin-top: .25rem; }
.specialty__note { margin: .75rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.estimate { padding: 1rem 1.25rem 1.25rem; border-top: var(--rule); background: #FFFDF8; }
.estimate__inputs { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1.5rem; }
.estimate .input { margin: 0; flex: 1 1 12rem; }
.money { position: relative; }
.money__sign { position: absolute; left: .85rem; top: 50%; translate: 0 -50%; font-weight: 600; color: var(--ink-soft); }
.money input { padding-left: 1.85rem; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; font-weight: 600; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); flex: none; }
.estimate__out { display: block; margin-top: .9rem; font-size: 1.1rem; line-height: 1.45; }

@media (max-width: 52rem) {
  .rates { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .label--rates { transform: none; }
  .ratecard thead th, .ratecard tbody th, .ratecard tbody td { padding-left: 1rem; padding-right: 1rem; }
  .ratecard tbody td { font-size: 1.8rem; }
}

/* Header: four nav links need room, so switch to the compact header earlier */
.tape__logo { flex: none; }
@media (min-width: 60.01rem) and (max-width: 72rem) {
  .tape__inner { gap: 1rem; }
  .tape__call-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 60rem) {
  .tape__nav { display: none; }
  .tape__book { display: inline-flex; margin-left: auto; }
}

/* Statement: drop "Sold via" whenever the statement itself is narrow, not just on phones */
.statement { container-type: inline-size; }
@container (max-width: 32rem) {
  .statement .col-via { display: none; }
  .statement th:first-child, .statement td:first-child { width: 31%; }
}
@container (max-width: 24rem) {
  .statement th:first-child, .statement td:first-child { width: 27%; padding-left: .6rem; padding-right: .25rem; }
  .statement th.num, .statement td.num { padding-left: 0; padding-right: .3rem; }
  .statement tfoot td { padding-left: .15rem; padding-right: .4rem; }
}