:root {
    --ink: #10151C;
    --ink-2: #182130;
    --ink-3: #212D40;
    --grey: #8B94A3;
    --grey-dim: #5A6472;
    --paper: #EEF1F5;
    --paper-2: #E1E6EC;
    --text-on-paper: #10151C;
    --blue: #3D7EFF;
    --blue-bright: #5C93FF;
    --blue-deep: #1F4FCC;
    --line-dark: rgba(238,241,245,0.13);
    --line-light: rgba(16,21,28,0.12);
    --font-display: 'Bricolage Grotesque', 'Work Sans', sans-serif;
    --font-body: 'Work Sans', -apple-system, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

  body {
    background:
      radial-gradient(ellipse 900px 600px at 88% -8%, rgba(61,126,255,0.16) 0%, rgba(16,21,28,0) 60%),
      radial-gradient(ellipse 700px 500px at -5% 40%, rgba(61,126,255,0.07) 0%, rgba(16,21,28,0) 55%),
      var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
  }
  body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
  }
  header, main, footer { position: relative; z-index: 2; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 640px) { .wrap { padding: 0 20px; } }

  /* ---------- Nav ---------- */
  header.site-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(16,21,28,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
  .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-brand img { height: 40px; width: 40px; object-fit: cover; object-position: center 30%; border-radius: 2px; }
  .nav-brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--paper); }
  .nav-brand-text span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.66rem; color: var(--grey); letter-spacing: 0.03em; margin-top: 1px; }
  nav.nav-links { display: flex; align-items: center; gap: 32px; font-size: 0.92rem; }
  nav.nav-links a { text-decoration: none; color: var(--grey); transition: color 0.15s ease; }
  nav.nav-links a:hover { color: var(--paper); }
  .nav-cta { border: 1px solid var(--blue-deep); padding: 9px 18px; border-radius: 2px; color: var(--paper) !important; font-weight: 600; }
  .nav-cta:hover { background: var(--blue); border-color: var(--blue); }

  /* ---------- Hero ---------- */
  .hero { padding: 130px 0 140px; }
  .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 64px 0 64px; } }
  .eyebrow-mark { display: flex; align-items: center; gap: 12px; color: var(--blue-bright); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; opacity: 0.85; }
  .eyebrow-mark .dash { width: 28px; height: 1px; background: var(--blue-deep); }
  h1.hero-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.3rem, 4.4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--paper);
  }
  h1.hero-h .line-2 {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: italic;
    font-size: 0.62em;
    letter-spacing: 0;
    color: var(--blue-bright);
    margin-top: 10px;
  }
  .hero-sub { margin-top: 30px; max-width: 46ch; color: var(--grey); font-size: 1.02rem; }
  .hero-actions { margin-top: 40px; display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
  .btn-primary {
    background: linear-gradient(135deg, var(--blue-bright) 0%, var(--blue) 100%);
    color: #fff; text-decoration: none;
    padding: 14px 28px; border-radius: 3px; font-weight: 700; font-size: 0.95rem;
    display: inline-block; font-family: var(--font-body);
    box-shadow: 0 12px 28px -10px rgba(61,126,255,0.45);
    transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
  .btn-primary:hover { box-shadow: 0 16px 34px -8px rgba(61,126,255,0.6); transform: translateY(-2px); }
  .btn-primary:active { transform: translateY(0); box-shadow: 0 8px 18px -8px rgba(61,126,255,0.5); }
  .link-secondary {
    color: var(--paper); text-decoration: none; font-size: 0.86rem; font-weight: 600;
    letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 12px;
  }
  .link-secondary .bar { width: 2px; height: 16px; background: var(--blue-deep); transition: background 0.15s ease; }
  .link-secondary:hover .bar { background: var(--blue-bright); }

  .hero-photo {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line-dark);
    aspect-ratio: 4/3.1;
  }
  .hero-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
    filter: grayscale(0.25) contrast(1.06) brightness(0.92) saturate(1.05);
  }
  .hero-photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(61,126,255,0.12) 0%, rgba(16,21,28,0) 40%);
    pointer-events: none;
  }

  /* ---------- Section shell ---------- */
  section { padding: 120px 0; }
  @media (max-width: 640px) { section { padding: 72px 0; } }
  .section-light { background: var(--paper); color: var(--text-on-paper); }
  .section-eyebrow {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--blue-deep); margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
  }
  .section-eyebrow .dash { width: 28px; height: 1px; background: var(--blue-deep); opacity: 0.5; }
  section:not(.section-light) .section-eyebrow { color: var(--blue-bright); }
  section:not(.section-light) .section-eyebrow .dash { background: var(--blue-deep); }
  .section-head { max-width: 62ch; margin-bottom: 56px; }
  .section-head h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em;
  }
  .section-head p { margin-top: 16px; color: var(--grey); font-size: 1rem; max-width: 54ch; }
  .section-light .section-head p { color: var(--grey-dim); }

  /* ---------- Pull quote ---------- */
  .pull-quote { padding: 90px 0; text-align: center; }
  .pull-quote .mark { font-family: var(--font-display); font-size: 2.4rem; color: var(--blue-deep); opacity: 0.6; line-height: 1; margin-bottom: 6px; }
  .pull-quote p {
    font-family: var(--font-body); font-style: italic; font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--paper); max-width: 34ch; margin: 0 auto; line-height: 1.4;
  }
  .pull-quote p .accent { color: var(--blue-bright); font-style: italic; }
  .pull-quote .cap {
    margin-top: 22px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--grey-dim); display: flex; align-items: center; justify-content: center; gap: 14px;
  }
  .pull-quote .cap .dash { width: 24px; height: 1px; background: var(--grey-dim); }

  /* ---------- Capabilities (general vs specialized) ---------- */
  .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-light); }
  @media (max-width: 800px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap-col { padding: 40px 34px 8px 0; }
  .cap-col.a { border-right: 1px solid var(--line-light); padding-right: 34px; position: relative; }
  .cap-col.a::after {
    content: "→"; position: absolute; top: 50%; right: -13px; transform: translateY(-50%);
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--blue-deep);
    background: var(--paper); padding: 4px 0; line-height: 1;
  }
  @media (max-width: 800px) { .cap-col.a::after { display: none; } }
  .cap-col.b { padding-left: 34px; }
  @media (max-width: 800px) {
    .cap-col.a { border-right: none; border-bottom: 1px solid var(--line-light); padding: 40px 0 32px; }
    .cap-col.b { padding: 32px 0 8px; }
  }
  .cap-tag { font-size: 0.76rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--blue-deep); font-weight: 700; margin-bottom: 10px; }
  .cap-col h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
  .cap-col ul { list-style: none; }
  .cap-col li { padding: 9px 0; border-top: 1px solid var(--line-light); font-size: 0.94rem; color: var(--grey-dim); }
  .cap-col li:first-of-type { border-top: none; }

  /* mini custody snippet, demoted from hero to a supporting detail */
  .custody-mini {
    margin-top: 20px;
    border: 1px solid var(--line-light);
    border-radius: 3px;
    padding: 14px 16px;
    background: var(--paper-2);
  }
  .custody-mini .cm-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--grey-dim); margin-bottom: 8px; }
  .custody-mini .cm-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 5px 0; border-top: 1px dashed var(--line-light); }
  .custody-mini .cm-row:first-of-type { border-top: none; }
  .custody-mini .cm-row .v { font-weight: 700; color: var(--blue-deep); }

  /* ---------- Process ---------- */
  .process-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); }
  @media (max-width: 800px) { .process-list { grid-template-columns: 1fr; } }
  .process-step { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line-dark); position: relative; }
  @media (max-width: 800px) { .process-step { padding: 24px 0; } }
  .process-num {
    font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; margin-bottom: 18px; line-height: 1;
    color: var(--blue-bright); letter-spacing: -0.02em;
  }
  .process-step h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--paper); margin-bottom: 8px; }
  .process-step p { color: var(--grey); font-size: 0.92rem; max-width: 32ch; }

  /* ---------- Trust list ---------- */
  .trust-list { border-top: 1px solid var(--line-light); }
  .trust-row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line-light); }
  @media (max-width: 700px) { .trust-row { grid-template-columns: 1fr; gap: 8px; } }
  .trust-row h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
  .trust-row p { color: var(--grey-dim); font-size: 0.96rem; max-width: 54ch; }

  /* ---------- CTA band ---------- */
  .cta-band {
    background: linear-gradient(120deg, var(--ink-3) 0%, var(--ink-2) 55%, var(--ink-2) 100%);
    border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  }
  .cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
  .cta-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 20ch; }
  .cta-band .tagline { color: var(--blue-bright); font-size: 0.85rem; letter-spacing: 0.02em; margin-top: 8px; font-weight: 600; }

  /* ---------- Contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
  @media (max-width: 850px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
  .contact-info .item { padding: 18px 0; border-bottom: 1px solid var(--line-light); }
  .contact-info .item .k { font-size: 0.76rem; letter-spacing: 0.03em; color: var(--grey-dim); text-transform: uppercase; margin-bottom: 4px; }
  .contact-info .item .v { font-size: 1.02rem; font-weight: 700; }
  .contact-info .item .v.placeholder { color: var(--grey-dim); font-weight: 500; font-style: italic; }

  form.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  form.quote-form .full { grid-column: 1 / -1; }
  @media (max-width: 560px) { form.quote-form { grid-template-columns: 1fr; } }
  .field label { display: block; font-size: 0.8rem; color: var(--grey-dim); margin-bottom: 6px; font-weight: 600; }
  .field input, .field select, .field textarea {
    width: 100%; background: #fff; border: 1px solid var(--line-light); border-bottom: 2px solid var(--text-on-paper);
    border-radius: 1px; padding: 11px 12px; font-family: var(--font-body); font-size: 0.95rem; color: var(--text-on-paper);
  }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); }
  .field textarea { resize: vertical; min-height: 96px; }
  .quote-form .full .btn-submit {
    background: var(--text-on-paper); color: var(--paper); border: none; padding: 14px 28px;
    font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; border-radius: 2px; cursor: pointer;
    transition: background 0.15s ease;
  }
  .quote-form .full .btn-submit:hover { background: var(--blue-deep); color: #fff; }
  .quote-form .full .btn-submit:disabled { opacity: 0.6; cursor: default; }
  .form-error { margin-top: 12px; font-size: 0.85rem; color: #B3432F; }
  .quote-success {
    border: 1px solid var(--line-light);
    border-left: 3px solid var(--blue);
    background: #fff;
    padding: 22px 24px;
    border-radius: 3px;
  }
  .quote-success h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; }
  .quote-success p { color: var(--grey-dim); font-size: 0.94rem; }

  .reveal-ready {
    opacity: 0.5; transform: translateY(14px);
    box-shadow: 0 30px 55px -22px rgba(61,126,255,0);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), box-shadow 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal-ready.in-view { opacity: 1; transform: none; box-shadow: 0 30px 55px -22px rgba(61,126,255,0.18); }
  .hero-copy.reveal-ready, .hero-copy.reveal-ready.in-view { box-shadow: none; }
  .cta-band-inner.reveal-ready, .cta-band-inner.reveal-ready.in-view { box-shadow: none; }
  .pull-quote .reveal-ready, .pull-quote .reveal-ready.in-view { box-shadow: none; }

  /* ---------- Footer ---------- */
  footer { padding: 44px 0 36px; border-top: 1px solid var(--line-dark); }
  .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .footer-brand { display: flex; align-items: center; gap: 12px; }
  .footer-brand img { height: 34px; width: 34px; object-fit: cover; object-position: center 30%; border-radius: 2px; }
  .footer-brand-text { font-size: 0.85rem; color: var(--grey); font-family: var(--font-body); }
  .footer-brand-text strong { color: var(--paper); display: block; font-size: 0.92rem; font-family: var(--font-display); }
  footer .copy { font-size: 0.8rem; color: var(--grey-dim); }


/* ---------- Order tracking (shared: /track and /admin) ---------- */
.tracker-shell { padding: 100px 0 140px; }
.tracker-shell .section-head { margin-bottom: 40px; }
.lookup-row { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.lookup-row input {
  flex: 1; min-width: 200px; background: var(--ink-2); border: 1px solid var(--line-dark);
  border-bottom: 2px solid var(--grey-dim); color: var(--paper); padding: 13px 14px;
  font-family: var(--font-body); font-size: 0.95rem; border-radius: 2px;
}
.lookup-row input:focus { outline: none; border-bottom-color: var(--blue); }
.hint { font-size: 0.82rem; color: var(--grey-dim); margin-bottom: 28px; }
.hint code { background: var(--ink-2); padding: 2px 6px; border-radius: 2px; color: var(--blue-bright); }

.manifest {
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 3px;
  padding: 26px 28px; margin-top: 12px; display: none;
}
.manifest.show { display: block; }
.manifest-head { border-bottom: 1px solid var(--line-dark); padding-bottom: 14px; margin-bottom: 18px; }
.manifest-head .label { font-size: 0.72rem; color: var(--grey-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.manifest-head .title { font-family: var(--font-display); font-size: 1.15rem; margin-top: 4px; }
.manifest-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line-dark); font-size: 0.9rem; }
.manifest-row:last-of-type { border-bottom: none; }
.manifest-row .k { color: var(--grey); }
.manifest-row .v { font-weight: 600; }

.timeline { display: flex; margin-top: 24px; }
.tl-step { flex: 1; text-align: left; position: relative; padding-top: 22px; }
.tl-step .bar { position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--line-dark); }
.tl-step.done .bar, .tl-step.current .bar { background: var(--blue); }
.tl-step .dot { position: absolute; top: -1px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--grey-dim); border: 2px solid var(--ink-2); }
.tl-step.done .dot, .tl-step.current .dot { background: var(--blue-bright); }
.tl-step .lab { font-size: 0.8rem; font-weight: 600; color: var(--grey); }
.tl-step.done .lab, .tl-step.current .lab { color: var(--paper); }
.tl-step .ts { font-size: 0.72rem; color: var(--grey-dim); margin-top: 2px; }

.status-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 0.85rem; padding: 8px 13px; border-radius: 2px; }
.status-chip.transit { color: var(--blue-bright); background: rgba(61,126,255,0.12); border: 1px solid rgba(61,126,255,0.35); }
.status-chip.done { color: #2F9E6B; background: rgba(47,158,107,0.12); border: 1px solid rgba(47,158,107,0.35); }
.status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tracker-msg { color: var(--grey); font-size: 0.9rem; margin-top: 10px; display: none; }
.tracker-msg.show { display: block; }
.tracker-msg.error { color: #E08A72; }

/* ---- admin ---- */
.admin-lock { max-width: 380px; margin: 0 auto; text-align: center; padding: 60px 0; }
.admin-lock input { width: 100%; margin: 18px 0; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 780px) { .admin-grid { grid-template-columns: 1fr; } }
.shipment-list { border-top: 1px solid var(--line-dark); }
.ship-row { padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.ship-row .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ship-row .id { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; }
.ship-row .route { font-size: 0.8rem; color: var(--grey); margin-top: 3px; }
.ship-row .stage-label { font-size: 0.78rem; color: var(--grey); white-space: nowrap; }
.ship-row .actions { margin-top: 12px; }
.ship-row .actions .btn.ghost { padding: 8px 14px; font-size: 0.8rem; }
.ship-row .actions .btn:disabled { opacity: 0.35; cursor: default; }
.btn.ghost { background: transparent; border: 1px solid var(--line-dark); color: var(--paper); border-radius: 2px; cursor: pointer; font-family: var(--font-body); font-weight: 600; }
.btn.ghost:hover { border-color: var(--blue-bright); }

.new-form { border: 1px solid var(--line-dark); border-radius: 3px; padding: 26px; }
.new-form h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 16px; }
.new-form .field { margin-bottom: 16px; }
.new-form .field label { display: block; font-size: 0.78rem; color: var(--grey-dim); margin-bottom: 6px; font-weight: 600; }
.new-form .field input, .new-form .field select {
  width: 100%; background: var(--ink); border: 1px solid var(--line-dark); border-bottom: 2px solid var(--grey-dim);
  color: var(--paper); padding: 10px 12px; font-family: var(--font-body); font-size: 0.9rem; border-radius: 2px;
}
.new-form .field input:focus, .new-form .field select:focus { outline: none; border-bottom-color: var(--blue); }
.created-flag { margin-top: 14px; font-size: 0.82rem; color: var(--blue-bright); border: 1px solid var(--blue-deep); padding: 10px 12px; border-radius: 2px; }