/* Home: the job card, sheet by sheet. */

/* ------------------------------------------------------------ SITE (hero) */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; background: #c9d0d8; color: var(--ink); isolation: isolate; }
.hero .lh { position: absolute; inset: 0 0 auto 0; }
.hero__scene {
  position: absolute; left: 50%; bottom: 0;
  width: max(100vw, calc(100svh * 1.7917));
  aspect-ratio: 5504 / 3072;
  transform: translateX(-50%);
  --cx: 36.66%; --cy: 37.43%; --cw: 29.15%; --ch: 56.62%;
}
.hero__rig { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--hy, 0) * 0.3px + var(--my, 0) * -4px), 0); will-change: transform; }
.hero__plate { position: absolute; inset: 0; transform-origin: 51% 94%; transform: scale(calc(1 + var(--hp, 0) * 0.035)); will-change: transform; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hero__haze {
  position: absolute; inset: 0 0 auto 0; height: 58%; pointer-events: none;
  background: linear-gradient(180deg, rgba(236, 240, 244, 0.9) 0%, rgba(236, 240, 244, 0.84) 52%, rgba(236, 240, 244, 0.4) 70%, rgba(236, 240, 244, 0) 92%);
  opacity: calc(0.9 + var(--hp, 0) * 0.1);
}
.hero__mast {
  position: absolute; z-index: 2; left: 0; right: 0; top: clamp(76px, 11.5svh, 130px);
  transform: translate3d(calc(var(--mx, 0) * -3px), calc(var(--hy, 0) * 0.66px), 0) scale(calc(1 - var(--hp, 0) * 0.05));
  transform-origin: 0 100%; will-change: transform, opacity;
  opacity: clamp(0, calc(1 - (var(--hp, 0) - 0.48) * 4.5), 1);
}
.mast { font-size: var(--t-mast); font-stretch: 64%; font-weight: 900; line-height: 0.88; letter-spacing: -0.006em; word-spacing: 0.08em; color: var(--navy); max-width: 11.5em; }
.mast em { font-style: normal; color: var(--orange-dk); }
.hero__crew {
  position: absolute; z-index: 3; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch);
  transform-origin: 50% 99%;
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -5px), 0) scale(calc(1 + var(--hp, 0) * 0.095));
  will-change: transform;
}
.hero__crew img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero__shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0.22) 55%, transparent); filter: blur(2px); }
.hero__coil {
  position: absolute; z-index: 4; right: -1%; bottom: -3.5%; width: 21%;
  transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--hy, 0) * -0.28px + var(--my, 0) * -8px), 0) scale(calc(1 + var(--hp, 0) * 0.2));
  transform-origin: 50% 100%; will-change: transform;
}
.hero__coil img { width: 100%; height: auto; max-width: none; filter: drop-shadow(0 18px 14px rgba(8, 12, 22, 0.45)); }
.hero__scrim { position: absolute; z-index: 5; left: 0; bottom: 0; width: min(72vw, 64rem); height: 56%; pointer-events: none;
  background: radial-gradient(115% 100% at 0% 100%, rgba(0, 16, 46, 0.92) 0%, rgba(0, 16, 46, 0.82) 38%, rgba(0, 16, 46, 0.45) 62%, rgba(0, 16, 46, 0) 86%); }
.hero__copy { position: absolute; z-index: 6; left: var(--gutter); bottom: clamp(1.75rem, 6svh, 4.5rem); max-width: min(31rem, 40vw); color: var(--bone); }
.hero__copy .lede { color: #fff; font-weight: 500; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.hero__acts .btn--line { color: #fff; }
@media (max-width: 760px) {
  .hero { min-height: 600px; }
  .hero__scene { width: max(100vw, calc(100svh * 0.5581)); aspect-ratio: 3072 / 5504; transform: translateX(-50%); --cx: 6.49%; --cy: 37.34%; --cw: 86.89%; --ch: 52.58%; }
  .hero__mast { top: 72px; }
  .mast { font-size: clamp(2.35rem, 11.2vw, 3.4rem); max-width: 9em; }
  .hero__coil, .hero__scrim { display: none; }
  .hero__haze { height: 44%; }
  .hero__copy { left: var(--gutter); right: var(--gutter); max-width: none; bottom: auto; top: calc(72px + 2.15 * clamp(2.35rem, 11.2vw, 3.4rem) * 0.86 + 0.9rem); color: var(--ink); }
  .hero__copy .lede { color: var(--ink); font-size: 1rem; max-width: 30ch; }
  .hero__acts { margin-top: 0.8rem; }
  .hero__acts .btn--line { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero__scene { bottom: -9%; }
  .hero__copy .lede { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__rig, .hero__plate, .hero__mast, .hero__crew, .hero__coil { transform: none !important; }
  .hero__haze { opacity: 0.95; }
}

/* ultra-wide: contain the scene so the crew keep their feet and the masthead keeps its sky */
@media (min-aspect-ratio: 2/1) and (min-width: 761px) {
  .hero::before { content: ""; position: absolute; inset: -40px; background: url("/assets/img/hero/plate-1600.webp") center 70% / cover; filter: blur(28px) saturate(0.9); opacity: 0.9; }
  .hero__scene { width: calc(100svh * 1.7917); }
  .mast { font-size: min(var(--t-mast), 12svh); }
  .hero { --inset: calc((100vw - 100svh * 1.7917) / 2); }
  .hero__mast .wrap { padding-left: calc(var(--inset) + var(--gutter)); }
  .hero__copy { left: calc(var(--inset) + var(--gutter)); }
  .hero__scrim { left: var(--inset); }
  .hero__haze { left: 0; right: 0; }
}
@media (max-height: 800px) and (min-width: 761px) { .hero__copy { max-width: min(27rem, 38vw); } }

/* ------------------------------------------------------------ PROPERTY & SYSTEM (finder) */
.finder { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); position: relative; z-index: 2; }
.finder__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2.5rem, 6vw, 5rem); }
.finder__head h2 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.4rem); }
.sector { display: flex; gap: 0.75rem; }
.sector label { position: relative; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; padding: 0.55rem 1rem 0.55rem 0.7rem; border: 2px solid var(--ink); border-radius: 3px; background: #fff; min-height: 64px; }
.sector input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sector .bx { width: 1.9rem; height: 1.9rem; border: 2.5px solid var(--ink); border-radius: 3px; display: grid; place-items: center; flex: none; }
.sector .bx svg { width: 100%; height: 100%; }
.sector .bx path { fill: none; stroke: var(--orange-dk); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 360ms var(--ease); }
.sector input:checked ~ .bx path { stroke-dashoffset: 0; }
.sector input:checked ~ .sl { color: var(--orange-dk); }
.sector .sl { font-family: var(--sc-font-display); font-stretch: 64%; font-weight: 880; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1; }
.sector input:focus-visible ~ .bx { outline: 3px solid var(--orange-dk); outline-offset: 3px; }
.finder__intro { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.finder__intro .lede { max-width: 48ch; }
.for-biz { display: none; }
.finder:has(input[name="details.sector"][value="Business"]:checked) .for-home,
.finder.is-biz .for-home { display: none; }
.finder:has(input[name="details.sector"][value="Business"]:checked) .for-biz,
.finder.is-biz .for-biz { display: block; }
.finder__type { margin-top: 1.5rem; }
.lines { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.lines > legend { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding-bottom: 0.6rem; border-bottom: 3px solid var(--ink); font-family: var(--sc-font-mono); font-size: var(--label); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }
.line { position: relative; border-bottom: 1px solid rgba(10, 21, 51, 0.22); }
.line__head { position: relative; display: grid; grid-template-columns: 2rem minmax(13rem, 1.15fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.4rem 1.5rem; align-items: start; padding: 1rem 0.5rem 1rem 0.25rem; cursor: pointer; }
.line__head input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.line__box { width: 1.45rem; height: 1.45rem; border: 2px solid var(--ink); border-radius: 2px; margin-top: 0.25rem; display: grid; place-items: center; }
.line__box svg { width: 100%; height: 100%; }
.line__box path { fill: none; stroke: var(--orange-dk); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 320ms var(--ease); }
.line__name { display: grid; gap: 0.25rem; }
.line__name b { font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 860; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.05rem); line-height: 0.98; }
.line__name .lbl { color: var(--ink-soft); }
.line__cell { display: grid; gap: 0.2rem; font-size: 0.97rem; line-height: 1.42; }
.line__cell .lbl { color: var(--ink-soft); font-size: 0.68rem; }
.line__head:hover { background: rgba(255, 255, 255, 0.55); }
.line__head input:focus-visible ~ .line__box { outline: 3px solid var(--orange-dk); outline-offset: 3px; }
.line:has(input:checked) { background: #fff; box-shadow: inset 4px 0 0 var(--orange-dk); }
.line:has(input:checked) .line__box path, .line.is-on .line__box path { stroke-dashoffset: 0; }
.line:has(input:checked) .line__name b { color: var(--orange-dk); }
.line__more { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; padding: 0 0.75rem 1.4rem 2.65rem; }
.line:has(input:checked) .line__more, .line.is-on .line__more { display: grid; }
.line__more img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.line__more h3 { font-family: var(--sc-font-mono); font-size: var(--label); font-stretch: 100%; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.55rem; }
.line__more .lnk { display: inline-block; margin-top: 0.9rem; }
.line__tag { position: absolute; right: 0.5rem; top: 1.05rem; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dk); }
.finder__rooms { margin-top: 1.75rem; }
.finder__next { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 2rem; }
.finder__next p { color: var(--ink-soft); }
@media (max-width: 1240px) and (min-width: 861px) {
  .line__head { grid-template-columns: 2rem minmax(11rem, 1fr) minmax(0, 1.2fr); }
  .line__cell--does { grid-column: 3; }
  .line__cell--suits { grid-column: 3; }
}
@media (max-width: 860px) {
  .finder__head { align-items: start; }
  .sector { width: 100%; }
  .sector label { flex: 1; }
  .line__head { grid-template-columns: 1.8rem 1fr; padding-right: 0.25rem; }
  .line__cell { grid-column: 2; }
  .line__cell--does { display: none; }
  .line:has(input:checked) .line__cell--does, .line.is-on .line__cell--does { display: grid; }
  .line__more { grid-template-columns: 1fr; padding-left: 2.4rem; }
  .line__tag { position: static; grid-column: 2; }
}

/* ------------------------------------------------------------ WHY (quiet) */
.why { color: var(--bone); }
.why__stage { background: var(--night); display: flex; flex-direction: column; }
.why__in { flex: 1; display: grid; grid-template-rows: auto 1fr; padding-block: 1.5rem clamp(3rem, 10vh, 7rem); }
.why__in .folio { border-top-color: rgba(174, 185, 209, 0.5); color: var(--bone-soft); }
.why__body { align-self: center; display: grid; gap: clamp(1.25rem, 3vh, 2rem); max-width: 60rem; }
.why__line { font-size: clamp(2.2rem, 1rem + 4.2vw, 5.2rem); font-stretch: 66%; font-weight: 820; line-height: 0.96; color: var(--bone); }
.strike { position: relative; white-space: nowrap; }
.strike::after {
  content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 54%; height: 0.11em; background: var(--red); border-radius: 0.05em;
  transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--sc-p, 0) - 0.22) / 0.3), 1)) rotate(-1.2deg);
}
.no-js .strike::after { transform: scaleX(1) rotate(-1.2deg); }
@media (max-width: 760px) { .strike { white-space: normal; } .strike::after { display: none; } .strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 0.1em; } }
.why__sub { color: var(--bone-soft); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem); max-width: 42ch; }

/* ------------------------------------------------------------ INSIDE THE INSTALL (peak) */
.install { color: var(--bone); background: var(--night); }
.install__stage { background: #1d222b; }
.install__title { position: absolute; z-index: 21; left: var(--gutter); top: clamp(1.5rem, 6svh, 3.5rem); max-width: min(44rem, 70vw); }
.install__title h2 { font-size: clamp(2.6rem, 1.2rem + 5vw, 6.4rem); color: #fff; text-shadow: 0 2px 18px rgba(0, 8, 24, 0.45); }
.install__title p { margin-top: 0.75rem; color: #e6ebf3; max-width: 40ch; text-shadow: 0 1px 10px rgba(0, 8, 24, 0.6); font-weight: 500; }
.install__scrim { position: absolute; inset: 0 auto auto 0; width: 100%; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 24, 0.84), rgba(4, 10, 24, 0.55) 50%, rgba(4, 10, 24, 0)); }
.ptags { position: absolute; z-index: 22; left: var(--gutter); bottom: clamp(1.25rem, 5svh, 3rem); width: min(25rem, 32vw); list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ptag { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; background: #f4f6f9; color: var(--ink); padding: 0.75rem 0.9rem 0.8rem; border-radius: 2px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); position: relative; }
.ptag::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(240, 72, 0, 0.25); }
.ptag .tick { grid-row: 1 / span 2; margin-top: 0.1rem; color: var(--ink); }
.ptag .lbl { color: var(--ink-soft); font-size: 0.66rem; }
.ptag p { font-weight: 650; line-height: 1.32; font-size: 0.98rem; }
.ptag--end { background: var(--navy); color: var(--bone); }
.ptag--end .lbl { color: var(--bone-soft); }
.ptag--end::before { background: var(--bone); box-shadow: none; }
@media (max-width: 860px) {
  .install__title { right: var(--gutter); max-width: none; top: 1.25rem; }
  .install__title h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .install__title p { font-size: 0.95rem; }
  .install__scrim { height: 38%; }
  .ptags { right: var(--gutter); width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); gap: 0.4rem; }
  .ptag { padding: 0.5rem 0.7rem 0.55rem; }
  .ptag p { font-size: 0.86rem; }
  .ptag .lbl { font-size: 0.6rem; }
}

/* ------------------------------------------------------------ HANDOVER */
.handover { color: var(--bone); }
.ho__stage { background: var(--navy); display: flex; }
.ho__in { flex: 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(1.5rem, 5vh, 3rem); }
.ho__intro h2 { color: #fff; }
.ho__intro p { margin-top: 1rem; color: var(--bone-soft); max-width: 36ch; }
.jobsheet { background: var(--paper); color: var(--ink); border-radius: 2px; padding: clamp(1rem, 2.2vw, 1.75rem); position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(35, 64, 154, 0.08) 31px 32px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.jobsheet::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 8px; background: var(--perf); color: var(--paper); }
.jobsheet__h { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.55rem; border-bottom: 3px solid var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; padding: 1rem 0.9rem 1rem 0; border-bottom: 1px solid rgba(10, 21, 51, 0.2); transition: background-color 200ms var(--ease); }
.step:nth-child(odd) { border-right: 1px solid rgba(10, 21, 51, 0.2); }
.step:nth-child(even) { padding-left: 0.9rem; }
.step .tick { width: 1.6rem; height: 1.6rem; grid-row: 1 / span 2; border-width: 2px; }
.step .tick path { transition: none; stroke-dashoffset: calc(30 - 30 * var(--t, 0)); }
.step h3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); }
.step p { font-size: 0.93rem; line-height: 1.45; color: var(--ink-soft); }
.step:nth-child(1) { --t: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.12), 1); }
.step:nth-child(2) { --t: clamp(0, calc((var(--sc-p, 0) - 0.24) / 0.12), 1); }
.step:nth-child(3) { --t: clamp(0, calc((var(--sc-p, 0) - 0.42) / 0.12), 1); }
.step:nth-child(4) { --t: clamp(0, calc((var(--sc-p, 0) - 0.6) / 0.12), 1); }
.jobsheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1rem; }
.jobsheet__foot p { font-size: 0.88rem; color: var(--ink-soft); max-width: 40ch; }
.jobsheet .stamp { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); --s: clamp(0, calc((var(--sc-p, 0) - 0.76) / 0.1), 1);
  opacity: var(--s); transform: rotate(-6deg) scale(calc(1.5 - 0.5 * var(--s))); }
.no-js .step .tick path { stroke-dashoffset: 0; }
.no-js .jobsheet .stamp { opacity: 1; transform: rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .jobsheet .stamp { transform: rotate(-6deg); } }
@media (max-width: 1099px) { .ho__in { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (max-width: 1000px) {
  .ho__in { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; }
  .ho__intro p { display: none; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step:nth-child(even) { padding: 0.6rem 0; border-right: 0 !important; }
  .step p { font-size: 0.84rem; }
  .ho__intro h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .jobsheet__foot p { display: none; }
}
@media (max-width: 640px) and (max-height: 700px) { .step p { display: none; } }

/* ------------------------------------------------------------ LODGE */
.lodge { padding-block: clamp(2.5rem, 5vw, 4rem) calc(1.5rem + env(safe-area-inset-bottom)); position: relative; z-index: 2; }
.lodge .folio { border-top-color: var(--ink); }
.lodge__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; margin-top: clamp(2rem, 5vw, 4rem); }
.lodge__head h2 { font-size: clamp(2.8rem, 1.2rem + 6vw, 7rem); }
.lodge__head .lede { color: var(--ink); }
.slips { list-style: none; margin: clamp(1.75rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.slip { background: #fbfcfd; color: var(--ink); padding: 1.1rem 1.2rem 1rem; border-radius: 2px; position: relative; box-shadow: 0 14px 26px -16px rgba(60, 12, 0, 0.7); display: grid; gap: 0.8rem; align-content: space-between; }
.slip:nth-child(1) { transform: rotate(-1.1deg); } .slip:nth-child(2) { transform: rotate(0.7deg) translateY(6px); } .slip:nth-child(3) { transform: rotate(-0.4deg); }
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 8px; background: var(--perf); color: #fbfcfd; }
.slip blockquote { margin: 0; font-size: 1rem; line-height: 1.5; }
.slip__sig { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding-top: 0.6rem; border-top: 1px solid rgba(10, 21, 51, 0.3); }
.slip__sig cite { font-style: italic; font-weight: 750; font-size: 1.2rem; font-family: var(--sc-font-display); font-stretch: 90%; }
.slip__sig .lbl { color: var(--ink-soft); font-size: 0.64rem; }
.slip__sig .ok { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.lodge__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 960px) { .lodge__head, .lodge__grid { grid-template-columns: 1fr; } .slips { grid-template-columns: 1fr; } .slip:nth-child(n) { transform: none; } }

/* the work order */
.wo { position: relative; overflow-anchor: none; }
.wo * { overflow-anchor: none; }
.wo__sheet { position: relative; background: #fbfcfd; color: var(--ink); padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: 2px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(35, 64, 154, 0.07) 39px 40px);
  box-shadow: 0 2px 3px rgba(60, 12, 0, 0.25), 0 30px 50px -28px rgba(60, 12, 0, 0.75); transform-origin: 0 0; z-index: 2; }
.wo__perf { position: absolute; left: 0; right: 0; top: -1px; height: 10px; background: radial-gradient(circle at 7px 5px, rgba(10, 21, 51, 0.35) 1.6px, transparent 2.2px) 0 0 / 14px 10px repeat-x; }
.wo__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--ink); }
.wo__top .t { font-family: var(--sc-font-display); font-stretch: 64%; font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; }
.wo__no { font-family: var(--sc-font-mono); font-size: 0.78rem; color: var(--red); letter-spacing: 0.06em; }
.wo__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.5rem 1.25rem; padding-block: 1rem; border-bottom: 1px solid rgba(10, 21, 51, 0.16); }
.wo__row > .wo__k { font-family: var(--sc-font-mono); font-size: var(--label); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding-top: 0.75rem; }
.wo__row--plain > .wo__k { padding-top: 0.1rem; }
.wo__picked { display: grid; gap: 0.25rem; font-family: var(--sc-font-mono); font-size: 0.92rem; color: var(--carbon); }
.wo__picked .row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.wo__picked .row b { font-weight: 600; color: var(--ink); min-width: 6.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.wo__picked .row a { font-family: var(--sc-font-text); font-size: 0.85rem; color: var(--ink-soft); }
.wo__picked .empty { color: #4f5a75; }
.js .wo__nojs { display: none; }
.no-js .wo__picked { display: none; }
.wo__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.wo__fields .span-2 { grid-column: 1 / -1; }
.wo .quote-only { display: none; }
.wo:has(input[name="form"][value="quote"]:checked) .quote-only, .wo.is-quote .quote-only { display: grid; }
.wo__submit { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; padding-top: 1.25rem; }
.wo__submit .btn { min-height: 56px; font-size: 1.15rem; padding-inline: 1.75rem; }
.wo__alt { font-size: 0.95rem; }
.wo__alt a { font-weight: 700; }
@media (max-width: 640px) { .wo__row { grid-template-columns: 1fr; } .wo__row > .wo__k { padding-top: 0; } .wo__fields { grid-template-columns: 1fr; } }

/* the handoff from the docket */
.js .wo__sheet.is-arriving { animation: woIn 680ms var(--ease) both; }
@keyframes woIn { from { opacity: 0; transform: translate3d(48px, -10px, 0) rotate(0.8deg) scale(0.985); } to { opacity: 1; transform: none; } }
.wo__picked .fresh { animation: inkIn 900ms var(--ease) both; }
@keyframes inkIn { from { color: transparent; text-shadow: 0 0 0 transparent; } 40% { color: var(--orange-dk); } to { color: var(--carbon); } }

/* the tear: top sheet rips away along the perforation, carbon copy stays */
.wo__carbon { position: relative; z-index: 1; }
.wo.is-torn .wo__sheet { position: absolute; top: 0; left: 0; right: 0; animation: tear 1050ms cubic-bezier(0.55, 0, 0.75, 0.25) forwards; pointer-events: none; }
@keyframes tear {
  0% { transform: none; }
  14% { transform: translate3d(0, -4px, 0) rotate(-1.6deg); }
  30% { transform: translate3d(14px, 6px, 0) rotate(2.6deg); }
  100% { transform: translate3d(38vw, 115vh, 0) rotate(24deg); opacity: 0.9; }
}
.wo.is-torn .wo__stub { display: block; }
.wo__stub { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 18px; background: #fbfcfd;
  -webkit-mask: radial-gradient(circle at 7px 18px, transparent 3px, #000 3.5px) 0 0 / 14px 18px repeat-x; mask: radial-gradient(circle at 7px 18px, transparent 3px, #000 3.5px) 0 0 / 14px 18px repeat-x; }
.wo.is-done .wo__sheet { display: none; }
.cc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--carbon); }
.cc__head .t { font-family: var(--sc-font-display); font-stretch: 64%; font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1; color: var(--carbon); }
.cc__ref { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-block: 1.25rem; }
.cc__ref .stamp { font-size: 1.15rem; }
.cc__next { display: grid; gap: 0.7rem; margin-top: 1.4rem; list-style: none; padding: 0; }
.cc__next li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; }
.cc__next .tick { margin-top: 0.15rem; color: var(--carbon); }
.cc__next .tick path { stroke: var(--carbon); stroke-dashoffset: 30; }
.cc__next li:first-child .tick path { stroke-dashoffset: 0; }
.cc__next strong { color: var(--carbon); font-weight: 700; }
.cc__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.cc__acts .btn--line { color: var(--carbon); }
@media (prefers-reduced-motion: reduce) {
  .js .wo__sheet.is-arriving, .wo__picked .fresh { animation: none; }
  .wo.is-torn .wo__sheet { animation: none; display: none; }
}

/* dispatch panel */
.dispatch { background: var(--navy); color: var(--bone); border-radius: 2px; padding: clamp(1.1rem, 2.4vw, 1.75rem); display: grid; gap: 1.25rem; }
.dispatch h3 { color: #fff; }
.dispatch dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.92rem; }
.dispatch dt { color: #fff; font-weight: 650; }
.dispatch dd { margin: 0; color: var(--bone-soft); }
.dispatch .areas { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.dispatch .areas button, .dispatch .areas span { font: 600 0.82rem/1 var(--sc-font-mono); color: var(--bone); background: transparent; border: 1px solid rgba(174, 185, 209, 0.55); border-radius: 2px; padding: 0.55rem 0.6rem; min-height: 36px; cursor: pointer; }
.dispatch .areas button:hover { border-color: var(--bone); background: rgba(255, 255, 255, 0.06); }
.dispatch .direct { display: grid; gap: 0.5rem; }
.dispatch .direct a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-decoration: none; padding: 0.7rem 0; border-top: 1px solid rgba(174, 185, 209, 0.3); min-height: 48px; }
.dispatch .direct a b { font-family: var(--sc-font-mono); font-weight: 600; color: #fff; }
.dispatch .direct a span { color: var(--bone-soft); font-size: 0.85rem; }

/* Without JS the engine never runs: cued copy must simply be there. */
.no-js [data-sc-cue] { opacity: 1 !important; }
.no-js .install__stage { min-height: 100svh; position: relative; }
.no-js .install__stage .ptags { position: absolute; }