/* ==========================================================================
   WAYDE LOGIS — public intake page
   Design direction: navy waybill. The form is a paper manifest, not a form.
   Palette: navy #0A1324 (from the logo) · saffron accent · white paper.
   Type: Space Grotesk (display, geometric — echoes the logo mark),
         Inter (body), IBM Plex Mono (references, weights, data).
   Signature element: the perforated waybill card on confirmation.
   ========================================================================== */

:root {
  --navy: #0A1324;
  --navy-800: #101B33;
  --navy-600: #26375C;
  --ink: #16203A;
  --muted: #5A6579;
  --line: #DFE4EC;
  --paper: #FFFFFF;
  --mist: #F4F6FA;
  --accent: #E4A11B;
  --accent-ink: #7A5200;
  --danger: #B3261E;
  --danger-bg: #FDECEA;
  --ok: #14683F;
  --ok-bg: #E8F5EE;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(10, 19, 36, .06), 0 8px 24px -12px rgba(10, 19, 36, .18);
  --shadow-lift: 0 2px 4px rgba(10, 19, 36, .07), 0 18px 40px -18px rgba(10, 19, 36, .28);

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 720px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------------ head */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 62px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 26px; width: auto; display: block; }

/* ------------------------------------------------------------------ hero */
.hero { padding: 44px 0 8px; }
.hero__inner { max-width: 720px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--accent); display: block;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 16px;
  text-wrap: balance;
  /* The headline carries an intentional line break in its own text, so it must
     be honoured verbatim rather than re-flowed by the browser. */
  white-space: pre-line;
}
.hero__support {
  font-size: clamp(1.02rem, 4.2vw, 1.22rem);
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 46ch;
  /* Carries an intentional line break, honoured verbatim like the headline. */
  white-space: pre-line;
}
.hero__note {
  color: var(--muted); font-size: .92rem; margin: 0;
  padding-top: 14px; border-top: 1px solid var(--line); max-width: 52ch;
}

/* --------------------------------------------------------------- sections */
.section { padding: 40px 0; }
.section--tight { padding: 26px 0; }
.h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.32rem; letter-spacing: -.01em; color: var(--navy);
  margin: 0 0 18px;
}
.h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; color: var(--navy); margin: 26px 0 12px;
}
.note-line { color: var(--muted); font-size: .88rem; margin: 18px 0 0; }

/* ------------------------------------------------------------------- flow */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: step; }
.flow__item {
  display: grid; grid-template-columns: 46px 1fr; align-items: baseline; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.flow__item:last-child { border-bottom: 1px solid var(--line); }
.flow__item p { margin: 0; font-size: .95rem; }
.flow__num {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500;
  color: var(--navy); letter-spacing: .06em;
  border-left: 2px solid var(--accent); padding-left: 10px; line-height: 1.2;
}

/* ------------------------------------------------------------------ cards */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 22px 18px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}
.card--calc { background: var(--mist); }
.card__legend {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  color: var(--navy); padding: 0 8px 0 0; margin-bottom: 6px;
}
.card__legend--plain { display: block; padding: 0; margin: 0 0 14px; }
.card__num {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  color: var(--navy); background: var(--mist);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px; letter-spacing: .04em;
}

/* ----------------------------------------------------------------- fields */
.field { margin: 16px 0 0; }
.field-row { display: grid; gap: 0 14px; }
@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.field label, .dims__cell span {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--navy); margin-bottom: 6px;
}
.field input, .field select, .field textarea, .dims__cell input {
  width: 100%; padding: 13px 14px;
  font-family: inherit; font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  color: var(--ink); background: var(--paper);
  border: 1px solid #C9D1DE; border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6579' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A9B4C6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 19, 36, .12); outline: none;
}
.field__help { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.field__error {
  font-size: .82rem; color: var(--danger); margin: 6px 0 0; font-weight: 500;
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--danger); background: #FFFBFB;
}
.field.has-error label { color: var(--danger); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }

.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dims__cell { display: block; }
.dims__cell span { font-size: .78rem; color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------- item rows */
.items { display: grid; gap: 10px; margin: 12px 0; }
.item-row {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--mist);
}
@media (min-width: 620px) {
  .item-row { grid-template-columns: 1fr 88px 130px 40px; align-items: end; }
}
.item-row .field { margin: 0; }
.item-row label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.item-row__remove {
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 10px 0; cursor: pointer;
  min-height: 44px;
}
.item-row__remove:hover { color: var(--danger); border-color: var(--danger); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  padding: 12px 18px; min-height: 46px;
  border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .15s, box-shadow .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover:not(:disabled) { background: var(--navy-800); box-shadow: var(--shadow-lift); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover:not(:disabled) { background: rgba(10, 19, 36, .05); }
.btn--ghost { background: var(--paper); color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--sm { font-size: .82rem; padding: 9px 14px; min-height: 40px; }
.btn--lg { font-size: 1rem; padding: 16px 26px; min-height: 54px; width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { opacity: .8; cursor: progress; }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--navy); font: inherit; font-size: .86rem;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ----------------------------------------------------------- calculator */
.estimate { margin-top: 18px; border-top: 1px dashed #C4CDDC; padding-top: 16px; }
.estimate__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9rem; }
.estimate__row span:first-child { color: var(--muted); }
.estimate__row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.estimate__row--total {
  border-top: 1px solid #C4CDDC; margin-top: 8px; padding-top: 12px;
  font-size: 1.02rem; font-weight: 600;
}
.estimate__row--total span:last-child { font-size: 1.15rem; }
.estimate__badge {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  background: #FDF3DD; border: 1px solid #F0DCA6; border-radius: 5px;
  padding: 3px 8px; margin-bottom: 12px;
}
.estimate__quote {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: .92rem;
}
.estimate__note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; }
.estimate__weight { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin: 10px 0 0; }

.disclaimers { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.disclaimers p { font-size: .78rem; color: var(--muted); margin: 0 0 6px; }
.disclaimers p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- notices */
.notices { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 10px; }
.notices li {
  position: relative; padding-left: 24px; font-size: .89rem; color: #2B3852;
}
.notices li::before {
  content: ''; position: absolute; left: 4px; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.consents { display: grid; gap: 10px; }
.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--mist); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.consent:hover { border-color: #A9B4C6; }
.consent input {
  width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); cursor: pointer;
}
.consent span { font-size: .88rem; }
.consent.is-checked { border-color: var(--navy); background: #EEF1F7; }
.legal-links { font-size: .86rem; color: var(--muted); margin: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.legal-links .link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; margin-left: -6px; border-radius: 6px; }
.legal-links .link:hover { background: #EEF1F7; }

/* phone: larger touch targets and no sub-12px body copy */
@media (max-width: 560px) {
  .link { min-height: 32px; display: inline-flex; align-items: center; }
  .consent-box__doc { max-height: 200px; }
  .consent-box__agree { padding: 16px; }
  .consent-box__item { font-size: .9rem; }
  .eyebrow, .card__legend, .field label, .flow__num { font-size: .75rem; }
  .chip, .status-chip { font-size: .72rem; }
  .waybill__tag, .waybill__ref-label { font-size: .75rem; }
}

/* ---------------------------------------------------------- submit block */
.submit-block { margin: 26px 0 0; text-align: center; }
.submit-block__hint { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }

/* --------------------------------------------------------------- alerts */
.alert { border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 18px; font-size: .88rem; }
.alert--error { background: var(--danger-bg); border: 1px solid #F3C9C5; color: #6E1710; }
.alert--error strong { display: block; margin-bottom: 6px; }
.alert--error ul { margin: 0; padding-left: 18px; }
.alert--success { background: var(--ok-bg); border: 1px solid #BFE3D0; color: #0E4E2F; }
.alert--info { background: var(--mist); border: 1px solid var(--line); color: var(--ink); }

/* ------------------------------------------------------------- waybill */
.waybill {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: 26px 20px 30px;
  overflow: hidden;
}
.waybill::before {
  /* perforated top edge — the signature detail */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 12px);
  opacity: .85;
}
.waybill::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 12px);
  opacity: .85;
}
.waybill__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.waybill__brand { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; color: var(--navy); font-size: .9rem; }
.waybill__tag {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); border: 1px solid #BFE3D0; border-radius: 4px; padding: 3px 8px;
}
.waybill__heading { font-family: var(--font-display); font-size: 1.34rem; color: var(--navy); margin: 0 0 12px; line-height: 1.2; }
.waybill__body { font-size: .92rem; margin: 0 0 20px; }
.waybill__ref {
  border: 1px dashed #A9B4C6; border-radius: var(--radius-sm);
  background: var(--mist); padding: 16px; text-align: center; margin-bottom: 18px;
}
.waybill__ref-label {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.waybill__ref-value {
  display: block; font-family: var(--font-mono); font-size: clamp(1.05rem, 5.6vw, 1.5rem);
  font-weight: 500; color: var(--navy); letter-spacing: .04em; word-break: break-all;
}
.waybill__next { font-size: .88rem; margin: 0 0 4px; }
.waybill__status { font-size: .8rem; color: var(--muted); margin: 0 0 18px; }
.waybill__meta {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  font-size: .82rem; margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid var(--line);
}
.waybill__meta dt { color: var(--muted); margin: 0; }
.waybill__meta dd { margin: 0; font-family: var(--font-mono); text-align: right; }
.waybill__helper { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }

/* --------------------------------------------------------------- lookup */
.lookup { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--mist); }
.lookup summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: .92rem; }
.lookup__form { margin-top: 16px; }
.lookup__form .btn { margin-top: 14px; }
.lookup__result { margin-top: 16px; font-size: .88rem; }
.lookup__result dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; }
.lookup__result dt { color: var(--muted); }
.lookup__result dd { margin: 0; font-family: var(--font-mono); }
.lookup__error { color: #B42318; font-weight: 600; }
/* leading lookup block (first thing on the page) */
.lookup--lead { padding: 20px 22px; background: #fff; }
.lookup__title { margin: 0; font-size: 1.05rem; color: var(--navy); font-weight: 700; }
.lookup__sub { margin: 6px 0 0; font-size: .84rem; color: var(--muted); max-width: 46rem; }
.lookup--lead .lookup__form { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: end; }
.lookup--lead .lookup__form .btn { margin-top: 0; height: 42px; }
.lookup--lead .lookup__result { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .lookup--lead .lookup__form { grid-template-columns: 1fr; }
  .lookup--lead .lookup__form .btn { margin-top: 12px; }
}

/* consent box — statements visible, one agreement tick */
.consent-box { border: 1px solid var(--navy); border-radius: var(--radius); background: #fff; overflow: hidden; }
.consent-box__doc { max-height: 168px; overflow-y: auto; padding: 14px 16px 6px; -webkit-overflow-scrolling: touch; }
.consent-box__item { position: relative; margin: 0 0 9px; padding-left: 14px; font-size: .86rem; line-height: 1.5; color: #3A4256; }
.consent-box__item::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.consent-box__item:last-child { margin-bottom: 4px; }
.consent-box__agree { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: #F4F6FB; border-top: 1px solid var(--line); cursor: pointer; font-weight: 600; color: var(--navy); font-size: .9rem; }
.consent-box__agree input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--navy); }
.consent-box__agree.is-checked { background: #E8ECF4; }

/* accept-all consent row */
.consent--all { margin-bottom: 8px; background: #fff; border-color: var(--navy); }
.consent--all span { font-weight: 600; color: var(--navy); }
.consent--all.is-checked { background: #E8ECF4; }
.ship-list { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ship-list h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 8px; }
.ship-list__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ship-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ship-list__carrier { display: block; font-weight: 600; color: var(--navy); font-size: .86rem; }
.ship-list__date { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.ship-list__track { font-size: .86rem; }
.ship-list__track .mono { letter-spacing: .02em; }

/* ---------------------------------------------------------------- foot */
.site-foot {
  border-top: 1px solid var(--line); margin-top: 30px; padding: 32px 0 44px;
  background: var(--navy); color: #C6CEDD;
}
.site-foot p { margin: 0 0 8px; font-size: .84rem; max-width: 60ch; }
.site-foot__legal { color: #8E9AAE; font-size: .78rem; }
.site-foot__contact { margin-top: 16px; }
.site-foot .link { color: #fff; }

/* --------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10, 19, 36, .55); backdrop-filter: blur(2px); }
.modal__panel {
  position: relative; background: var(--paper); width: 100%; max-width: 720px;
  max-height: 88vh; overflow: auto; border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 700px) { .modal { place-items: center; } .modal__panel { border-radius: 18px; } }
.modal__head {
  position: sticky; top: 0; background: var(--paper); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.modal__head h2 { font-family: var(--font-display); font-size: 1.06rem; color: var(--navy); margin: 0; }
.modal__close {
  background: none; border: 1px solid var(--line); border-radius: 50%;
  width: 36px; height: 36px; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted);
}
.modal__body { padding: 20px; font-size: .9rem; white-space: pre-wrap; line-height: 1.65; }

/* --------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
  .site-head__inner { min-height: 58px; }
  .brand img { height: 22px; }
  .card { padding: 18px 14px; }
}

/* -------------------------------------------------- phone (dial + number) */
.phone-row { display: grid; gap: 0 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .phone-row { grid-template-columns: 190px minmax(0, 1fr); }
}
.phone-row__sublabel {
  display: block; margin-bottom: 6px;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.phone-row select, .phone-row input { width: 100%; }
.phone-row select { text-overflow: ellipsis; }

/* --------------------------------------------------- phone legibility pass
   Placed last on purpose: the component rules above win on equal
   specificity, so a phone-only override has to come after them. */
@media (max-width: 560px) {
  .waybill__tag, .waybill__ref-label { font-size: .78rem; }
}

/* ------------------------------------------- consent rows with document links */
.consent-row { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 10px; overflow: hidden; }
.consent-row .consent { border: 0; border-radius: 0; margin: 0; background: transparent; }
.consent-row__doc { display: inline-flex; align-items: center; min-height: 34px; margin: 0 14px 10px; font-size: .82rem; }
.consent-row__doc:hover { text-decoration: underline; }

/* --------------------------------------------------- policy document layout */
.policy-doc__h { margin: 22px 0 8px; font-size: .95rem; color: var(--navy); font-weight: 700; }
.policy-doc__h:first-child { margin-top: 0; }
#policyBody p { margin: 0 0 11px; }
.policy-doc__list { margin: 0 0 12px; padding-left: 20px; }
.policy-doc__list li { margin-bottom: 5px; }
.policy-doc__ph { background: #FFF3CD; color: #7A4E00; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* admin policy editor */
.policy-edit { display: grid; gap: 16px; }
.policy-edit__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.policy-edit textarea { width: 100%; min-height: 420px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }

/* in-document cross links (e.g. privacy notice -> international transfer notice) */
.policy-doc__link { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; cursor: pointer; }
.policy-doc__link:hover { color: var(--accent); }

/* ---------------------------------------------------- Annex A notice accordion */
/* Grid, not flex: a wrapped title or a long badge must never push the number
   circle onto its own row. The circle stays on the title's first line and the
   badge always drops to its own row underneath, at every width. */
.notice-summary { margin: 0 0 26px; }
.notice-summary__intro { color: var(--muted, #5a6b7c); margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.notice-summary__list { display: grid; gap: 8px; }
.notice-item { border: 1px solid var(--line, #dfe6ec); border-radius: 10px; background: #fff; overflow: hidden; }
.notice-item[open] { border-color: var(--accent, #1f4e79); box-shadow: 0 6px 18px rgba(20, 40, 60, .07); }
.notice-item__head { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; column-gap: 10px; row-gap: 6px;
  align-items: start; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 48px;
  font-weight: 600; font-size: 15px; line-height: 1.4; }
.notice-item__head::-webkit-details-marker { display: none; }
.notice-item__head::after { content: '+'; grid-column: 3; grid-row: 1; justify-self: center;
  font-weight: 400; font-size: 20px; line-height: 1; color: var(--muted, #5a6b7c); }
.notice-item[open] .notice-item__head::after { content: '\2013'; }
.notice-item__num { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #eef3f8; color: var(--accent, #1f4e79);
  font-size: 13px; font-weight: 700; }
.notice-item__title { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.notice-item__badge { grid-column: 2; grid-row: 2; justify-self: start; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  background: #fdecec; color: #a3282b; white-space: nowrap; }
.notice-item__body { padding: 0 16px 16px 52px; font-size: 14.5px; line-height: 1.7; color: var(--ink, #25313d); }
.notice-item__body p { margin: 0 0 10px; }
.notice-item__body p:last-child { margin-bottom: 0; }
.notice-summary__note { margin: 12px 0 0; font-size: 13px; color: var(--muted, #5a6b7c); line-height: 1.55; }
@media (max-width: 560px) {
  .notice-item__head { grid-template-columns: 24px minmax(0, 1fr) 18px; column-gap: 9px; padding: 13px 14px; font-size: 14.5px; }
  .notice-item__num { width: 24px; height: 24px; font-size: 12.5px; }
  .notice-item__body { padding: 0 14px 14px 14px; }
}


/* Pickup & handover options */
.pickup-options { display: grid; gap: 10px; }
.pickup-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.pickup-option input { margin-top: 3px; accent-color: var(--navy); }
.pickup-option.is-selected { border-color: var(--navy); background: rgba(10, 19, 36, 0.03); }
.pickup-option__body strong { display: block; font-size: 14px; font-weight: 600; }
.pickup-option__body small { display: block; color: #5a6472; font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
@media (max-width: 640px) { .pickup-option { padding: 10px 12px; } }


/* Service section intro — divider above the service tabs */
.svc-head { display: flex; align-items: center; padding: 8px 0 16px; }
.svc-head__tick { width: 26px; height: 2px; background: var(--accent); flex: none; margin-right: 10px; }
.svc-head__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--navy); white-space: nowrap; padding-right: 12px; }
.svc-head__rule { flex: 1; height: 1px; background: var(--line); }
/* the intro takes over the section's top padding so total height stays the same */
#intake { padding-top: 0; }
@media (max-width: 480px) { .svc-head { padding: 6px 0 14px; } }

/* Service tabs (shipping / carrier) */
.service-tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.service-tab { flex: 1; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; background: transparent; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--navy); transition: border-color .15s, background .15s, box-shadow .15s; }
.service-tab.is-active { border-color: var(--accent); background: #FFF7E6; box-shadow: 0 1px 3px rgba(228, 161, 27, 0.22); }
.service-tab.is-active:hover { border-color: var(--accent); background: #FFF3D9; }
.service-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carrier-steps { display: grid; gap: 8px; margin: 12px 0 16px; }
.carrier-step { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.carrier-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.carrier-price { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.carrier-price.is-selected { border-color: var(--navy); background: rgba(10, 19, 36, 0.05); }
.carrier-pricing-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.carrier-pricing-row .carrier-pricing { margin: 0; flex: 0 0 280px; max-width: 280px; }
.carrier-limit { flex: 1 1 200px; min-width: 200px; align-self: center; background: #FFF7E6; border: 1px solid rgba(228, 161, 27, 0.35); border-left: 3px solid #E4A11B; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #6B5300; }
.carrier-consent { border: 1px solid rgba(228, 161, 27, 0.35); border-radius: 10px; background: #FFFDF7; padding: 12px 14px; margin: 12px 0; }
.carrier-consent__title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #6B5300; }
.carrier-consent__item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #3B4453; padding: 4px 0; }
.carrier-consent__item input { display: none; }
.carrier-consent__item--agree { font-weight: 600; }
.carrier-consent__item--agree input { display: block; margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; -webkit-appearance: checkbox; appearance: checkbox; accent-color: #E4A11B; cursor: pointer; }
.carrier-dropoff-photos { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.carrier-dropoff-photos__item { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.carrier-dropoff-photos__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carrier-dropoff-photos__item figcaption { margin: 0; padding: 7px 10px; font-size: 12px; font-weight: 600; color: #6B5300; background: #FFF7E6; border-top: 1px solid rgba(228, 161, 27, 0.35); }
@media (max-width: 420px) { .carrier-dropoff-photos { grid-template-columns: 1fr; } }
.carrier-dropoff-photos__item { position: relative; }
.carrier-dropoff-photos__item.is-selected { border: 3px solid #F5B700; box-shadow: 0 2px 10px rgba(228, 161, 27, 0.35); }
.carrier-dropoff-photos__item.is-selected::before { content: '\2713'; position: absolute; top: 8px; left: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: #F5B700; color: #1E3462; font-size: 17px; font-weight: 700; line-height: 28px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* Service-tab visibility (single source of truth). The cards sit deep inside
   #intake (wrap/form nesting; nested <form> tags are dropped by the parser),
   so these are DESCENDANT selectors on #intake — they match at any depth,
   identically on every browser (web + mobile). Default: international blocks
   visible, carrier card hidden; .mode-carrier on #intake flips it. */
#intake #carrierCard { display: none; }
#intake.mode-carrier #carrierCard { display: block; }
#intake.mode-carrier .card:not(#carrierCard) { display: none; }
.carrier-consent__item input { margin-top: 3px; flex: 0 0 auto; }
.carrier-price__code { font-weight: 700; font-size: 15px; }
.carrier-price__amount { font-size: 13px; color: #0a7d33; font-weight: 600; }
.carrier-price__desc { font-size: 11.5px; color: #5a6472; }
.carrier-pricing__title { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.carrier-total { margin: 12px 0 0; font-size: 15px; text-align: right; }
@media (max-width: 640px) { .service-tab { padding: 10px 10px; font-size: 13px; } }

/* Booking-done preview card (capturable) */
.carrier-preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.carrier-preview__head { padding: 10px 14px; font-weight: 700; color: var(--navy); background: #F4F6FA; border-bottom: 1px solid var(--line); }
.carrier-preview__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 13.5px; border-bottom: 1px solid #EEF1F5; }
.carrier-preview__row:last-child { border-bottom: none; }
.carrier-preview__row span { color: #5a6472; }
.carrier-preview__photo { margin: 0; padding: 12px 14px 4px; }
.carrier-preview__photo img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 8px; border: 3px solid #F5B700; }
.carrier-preview__photo figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #6B5300; background: #FFF7E6; border: 1px solid rgba(228,161,27,.35); border-radius: 8px; padding: 7px 10px; }

/* Lost reference number — collapsed by default so the main lookup stays the
   primary action. Result rows are clickable to fill the reference field. */
.lookup__find { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.lookup__find summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy); list-style: none; }
.lookup__find summary::-webkit-details-marker { display: none; }
.lookup__find summary::before { content: '+'; display: inline-block; width: 16px; font-weight: 700; color: var(--accent); }
.lookup__find[open] summary::before { content: '\2212'; }
.lookup__find-body { margin-top: 10px; }
.lookup__find-note { margin: 0 0 8px; font-size: 12px; color: #5a6472; line-height: 1.5; }
.lookup__find-row { display: flex; gap: 8px; align-items: stretch; }
.lookup__find-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.lookup__find-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lookup__hits { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lookup__hit { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.lookup__hit:hover { border-color: var(--accent); background: #FFF7E6; }
.lookup__hit-ref { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; font-weight: 700; color: var(--navy); }
.lookup__hit-meta { font-size: 12px; color: #5a6472; white-space: nowrap; }
@media (max-width: 420px) { .lookup__hit { flex-direction: column; gap: 2px; } .lookup__hit-meta { white-space: normal; } }

/* ---------------- booking confirmed (standalone screen) ---------------- */
.carrier-confirm { margin-bottom: 18px; }
.cfin { display: grid; gap: 14px; }
.cfin__ok { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #EAF7EF; border: 1px solid #BFE6CD; }
.cfin__tick { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #0A7D33; color: #fff; font-size: 16px; font-weight: 700; line-height: 28px; text-align: center; }
.cfin__title { margin: 0; font-size: 17px; font-weight: 700; color: #0A7D33; letter-spacing: -0.01em; }
.cfin__receipt { margin: 3px 0 0; font-size: 12px; color: #4A5A50; }
.cfin__ref { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #FFF7E6; border: 1px solid rgba(228,161,27,.35); border-left: 4px solid #E4A11B; }
.cfin__ref span { font-size: 12px; font-weight: 600; color: #6B5300; text-transform: uppercase; letter-spacing: .08em; }
.cfin__ref strong { font-size: 17px; color: #1E3462; letter-spacing: .02em; }
.cfin__card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.cfin__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #EDF1F6; font-size: 14px; }
.cfin__row:last-child { border-bottom: 0; }
.cfin__k { flex: 0 0 auto; color: #6B7280; font-size: 13px; }
.cfin__v { text-align: right; color: var(--navy); font-weight: 600; }
.cfin__v small { font-weight: 400; color: #6B7280; }
.cfin__photo { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.cfin__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cfin__photo figcaption { padding: 8px 12px; font-size: 12px; font-weight: 600; color: #6B5300; background: #FFF7E6; border-top: 1px solid rgba(228,161,27,.35); }
.cfin__notices { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cfin__notices summary { padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy); list-style: none; }
.cfin__notices summary::-webkit-details-marker { display: none; }
.cfin__notices summary::before { content: '+'; display: inline-block; width: 16px; font-weight: 700; color: var(--accent); }
.cfin__notices[open] summary::before { content: '\2212'; }
.cfin__notices ol { margin: 0; padding: 0 16px 14px 30px; }
.cfin__notices li { font-size: 12px; line-height: 1.6; color: #4A5462; margin-bottom: 6px; }
.cfin__shot { margin: 0; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #6B5300; background: #FFF7E6; border: 1px solid rgba(228,161,27,.35); border-left: 3px solid #E4A11B; border-radius: 10px; }
@media (max-width: 420px) { .cfin__row { flex-direction: column; gap: 2px; } .cfin__v { text-align: left; } }

/* ------------------------------------------------------------------ *
   v63 — pickup-date calendar. Closed dates (admin "예약 마감일") are
   greyed with a hatch and cannot be clicked.
 * ------------------------------------------------------------------ */
.cal-field { position: relative; }
.cal-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; font-size: .95rem; color: var(--navy);
  cursor: pointer; text-align: left;
}
.cal-trigger:hover { border-color: #A9B4C6; }
.cal-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(228,161,27,.18); }
.cal-trigger__ph { color: var(--muted); }
.cal-trigger svg { flex: 0 0 18px; opacity: .45; }

.cal {
  margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: 0 18px 40px -18px rgba(10,19,36,.35);
}
@media (min-width: 700px) {
  .cal { position: absolute; z-index: 40; width: 306px; }
}
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__month { font-weight: 700; font-size: .95rem; color: var(--navy); letter-spacing: -.01em; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer; line-height: 1; font-size: 1.05rem;
}
.cal__nav button:hover:not(:disabled) { border-color: #A9B4C6; }
.cal__nav button:disabled { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__wd {
  text-align: center; font-size: .66rem; font-weight: 700; color: var(--muted);
  padding: 4px 0 6px; text-transform: uppercase; letter-spacing: .07em;
}
.cal__day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative;
  border: 0; background: transparent; border-radius: 9px;
  font: inherit; font-size: .85rem; color: var(--navy); cursor: pointer;
}
.cal__day:hover:not(:disabled) { background: var(--mist); }
.cal__day.is-today { box-shadow: inset 0 0 0 1.5px rgba(228,161,27,.55); font-weight: 700; }
.cal__day.is-sel { background: var(--navy); color: #fff; font-weight: 700; box-shadow: none; }
.cal__day:disabled { color: #C3CAD6; cursor: default; }
.cal__day.is-off {
  color: #B4BCC9; cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, #F8F9FB, #F8F9FB 3px, #EEF1F6 3px, #EEF1F6 6px);
}
.cal__day.is-off::after {
  content: ''; position: absolute; left: 26%; right: 26%; bottom: 24%;
  height: 1.5px; background: #C4CBD7; border-radius: 2px;
}
.cal__legend { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; font-size: .73rem; color: var(--muted); line-height: 1.4; }
.cal__swatch {
  flex: 0 0 14px; width: 14px; height: 14px; border-radius: 4px; border: 1px solid #E3E8EF;
  background: repeating-linear-gradient(-45deg, #F8F9FB, #F8F9FB 3px, #EEF1F6 3px, #EEF1F6 6px);
}

/* ------------------------------------------------------------------ *
   v71 — "Show my confirmation" panel. Shown under the PayPal buttons;
   turns yellow-highlighted when the customer returns from the PayPal
   window, because that is exactly when they need to tap it.
 * ------------------------------------------------------------------ */
.cf-paid {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #FBFCFE;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.cf-paid__kicker {
  margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #6B7280;
}
.cf-paid__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 16px; border-radius: 10px;
  background: var(--navy); color: #fff; text-decoration: none;
  font: 700 .98rem/1.2 Inter, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 8px 20px -10px rgba(10,19,36,.55);
}
.cf-paid__btn:active { transform: translateY(1px); }
.cf-paid__btn svg { flex: 0 0 20px; }
.cf-paid__help { margin: 9px 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); text-align: center; }
.cf-paid__note { margin: 8px 0 0; font-size: .78rem; font-weight: 600; text-align: center; }
.cf-paid.is-nudge {
  border-color: rgba(228,161,27,.6); background: #FFF9EC;
  box-shadow: 0 0 0 4px rgba(228,161,27,.16);
}
.cf-paid.is-nudge .cf-paid__kicker { color: #6B5300; }
.cf-paid.is-nudge .cf-paid__btn { background: var(--accent); color: #1A1400; }
@media (prefers-reduced-motion: no-preference) {
  .cf-paid.is-nudge .cf-paid__btn { animation: cfPaidPulse 1.9s ease-in-out infinite; }
  @keyframes cfPaidPulse {
    0%, 100% { box-shadow: 0 8px 20px -10px rgba(228,161,27,.7); }
    50% { box-shadow: 0 8px 26px -6px rgba(228,161,27,.95); }
  }
}