/* ==========================================================================
   Export Services page. Loaded after styles.css (shared tokens and components).
   ========================================================================== */

:root {
  --forest-800: #26321f;
  --border-inverse: #6b4d3e;
}

.page-hero--export { padding-top: 150px; }
.page-hero--export .page-hero__title { max-width: 640px; }

/* Export process --------------------------------------------------------- */
.process-steps { display: flex; flex-direction: column; align-items: center; gap: 56px; scroll-margin-top: 72px; }
.process-steps .section-head { gap: 16px; }
.process-steps .section-head .h1,
.process-steps .section-head p:last-child { max-width: 760px; }
.process-steps .section-head p:last-child { color: var(--text-secondary); }
.steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  max-width: var(--content);
}
.step-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.step-card__head { display: flex; align-items: center; gap: 10px; }
.step-card__num { color: var(--text-accent); }
.step-card__rule { flex: 1; max-width: 150px; height: 1px; background: var(--jute-500); }
.step-card__img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-sm); }
.step-card .body-s { color: var(--text-secondary); }

/* Quality & traceability ------------------------------------------------- */
.trace { background: var(--forest-800); color: var(--text-inverse); scroll-margin-top: 72px; }
.trace__inner {
  display: flex;
  align-items: center;
  gap: 96px;
  max-width: var(--content);
  margin-inline: auto;
}
.trace__copy { display: flex; flex-direction: column; gap: 32px; width: 600px; flex: none; }
.trace__intro { display: flex; flex-direction: column; gap: 16px; }
.trace__intro p:last-child { color: var(--text-inverse-muted); max-width: 560px; }
.checks { width: 560px; max-width: 100%; margin: 0; }
.check {
  display: flex;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border-inverse);
}
.check dt { width: 160px; flex: none; }
.check dd { margin: 0; flex: 1; color: var(--text-inverse-muted); }
.trace__media { flex: none; width: 544px; height: 640px; object-fit: cover; border-radius: var(--radius-sm); }

/* Packing (reuses .packing / .bags from styles.css) ---------------------- */
.packing--tight .section-head { gap: 16px; }
.packing--tight .section-head .h1 { max-width: 720px; }
.packing--tight .section-head p:last-child { max-width: 720px; }

/* Logistics & shipping --------------------------------------------------- */
.logistics { scroll-margin-top: 72px; }
.logistics__inner {
  display: flex;
  align-items: center;
  gap: 96px;
  max-width: var(--content);
  margin-inline: auto;
}
.logistics__media { flex: none; width: 520px; height: 600px; object-fit: cover; border-radius: var(--radius-sm); }
.logistics__copy { display: flex; flex-direction: column; gap: 32px; flex: 1; min-width: 0; }
.logistics__intro { display: flex; flex-direction: column; gap: 16px; }
.logistics__intro p:last-child { color: var(--text-secondary); }
.terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 0; }
.term {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 124px;
  padding: 24px;
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
}
.term dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--text-accent);
}
.term dd { margin: 0; }

/* Shipping FAQ ----------------------------------------------------------- */
.ship-faq__inner {
  display: flex;
  gap: 96px;
  align-items: flex-start;
  max-width: var(--content);
  margin-inline: auto;
}
.ship-faq__head { display: flex; flex-direction: column; gap: 16px; width: 400px; flex: none; }
.ship-faq__head { position: sticky; top: 112px; }
.ship-faq__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Same card look as the other accordions: white card, red outline when open, round toggle. */
.ship-faq__item {
  padding: 22px 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.ship-faq__item:hover { box-shadow: 0 8px 24px rgba(38, 14, 10, 0.06); }
.ship-faq__item[open] { border-color: var(--cherry-600); }
.ship-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
.ship-faq__item summary::-webkit-details-marker { display: none; }
.ship-faq__item summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-subtle);
  color: var(--text-primary);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 12px 2px, 2px 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.25s, color 0.25s, background-size 0.25s;
}
.ship-faq__item[open] summary::after { background-color: var(--action-primary); color: var(--text-inverse); background-size: 12px 2px, 2px 0; }
.ship-faq__item p { margin: 14px 0 0; padding-right: 48px; color: var(--text-secondary); }

/* Responsive ------------------------------------------------------------- */
/* Figma's quality row is 600 + 96 + 544 = 1240, 40px wider than the 1200 content box */
@media (min-width: 1200px) {
  .trace__inner { max-width: 1240px; margin-inline: -20px; }
}

@media (max-width: 1199px) {
  .steps-row { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
  .trace__inner,
  .logistics__inner,
  .ship-faq__inner { gap: 48px; }
  .trace__copy { width: auto; flex: 1; min-width: 0; }
  .trace__media { width: 400px; height: 560px; }
  .logistics__media { width: 400px; height: 560px; }
}

@media (max-width: 1023px) {
  .trace__inner,
  .logistics__inner,
  .ship-faq__inner { flex-direction: column; align-items: stretch; }
  .trace__media,
  .logistics__media { width: 100%; height: 440px; }
  .logistics__media { order: -1; }
  .ship-faq__head { width: auto; position: static; }
}

@media (max-width: 639px) {
  .steps-row { grid-template-columns: 1fr; }
  .step-card__img { height: 220px; }
  .check { flex-direction: column; gap: 4px; }
  .check dt { width: auto; }
  .trace__media,
  .logistics__media { height: 340px; }
  .terms { grid-template-columns: 1fr; }
}

/* Service overview ------------------------------------------------------- */
.overview { background: var(--surface-subtle); padding-block: calc(var(--space-section) * 0.75); }
.overview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--content); margin-inline: auto; }
.overview__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 272px;
  padding: 32px 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, border-color 0.3s;
}
.overview__card { position: relative; }
.overview__card:hover { translate: 0 -4px; border-color: var(--cherry-600); box-shadow: 0 14px 30px rgba(38, 14, 10, 0.08); }
/* The whole card is the click target, not just the small link text. */
.overview__card .link-arrow::after { content: ""; position: absolute; inset: 0; }
.overview__card:hover .link-arrow { color: var(--cherry-700); }
.overview__num { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--text-accent); }
.overview__card .body-s { color: var(--text-secondary); }
.overview__card .link-arrow { margin-top: auto; padding: 0; }

/* Grading ---------------------------------------------------------------- */
.grading__inner { display: flex; flex-direction: column; gap: 56px; max-width: var(--content); margin-inline: auto; }
.grading__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 96px; }
.grading__head > div { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.grading__head > p { width: 400px; flex: none; margin: 0; color: var(--text-secondary); }

.scale__grades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.scale__grade { display: flex; flex-direction: column; gap: 6px; min-height: 162px; padding: 20px; border-radius: var(--radius-sm); }
.scale__code { margin-bottom: auto; font-size: 40px; line-height: 48px; font-weight: 300; }
.scale__grade .h4 { margin: 0; }
.scale__grade .body-s { opacity: 0.85; }
.scale__grade--g1 { background: var(--cherry-600); color: var(--text-inverse); }
.scale__grade--g2 { background: #3d261c; color: var(--text-inverse); }
.scale__grade--g3 { background: var(--espresso-500, #6b4d3e); color: var(--text-inverse); }
.scale__grade--g4 { background: var(--jute-300); color: var(--text-primary); }
.scale__grade--g5 { background: var(--cream-200); color: var(--text-primary); }
.scale__grade--ug { background: var(--cream-100); color: var(--text-primary); }
.scale__brackets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.scale__bracket { grid-column: span 2; padding-top: 8px; border-top: 4px solid; font-size: 14px; line-height: 22px; }
.scale__bracket--specialty { border-color: var(--cherry-600); color: var(--text-accent); }
.scale__bracket--commercial { border-color: var(--espresso-900); color: var(--text-primary); }
.scale__bracket--none { border-color: var(--cream-200); color: var(--text-secondary); }

.grading__defects { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.defects { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; border-radius: var(--radius-sm); }
.defects__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.defects__head .h3 { margin: 0; }
.defects__badge { padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; white-space: nowrap; }
.defects__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.defects__chips li { padding: 8px 14px; border: 1px solid; border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; }
.defects--dark { background: var(--surface-inverse); color: var(--text-inverse); }
.defects--dark .body-s { color: var(--text-inverse-muted); }
.defects--dark .defects__badge { background: var(--cherry-600); color: var(--text-inverse); }
.defects--dark .defects__chips li { border-color: rgba(255, 255, 255, 0.25); }
.defects--light { background: var(--surface-card); border: 1px solid var(--border-default); }
.defects--light .body-s { color: var(--text-secondary); }
.defects--light .defects__badge { background: var(--surface-subtle); color: var(--text-secondary); }
.defects--light .defects__chips li { border-color: var(--border-default); }

.grading__bottom { display: grid; grid-template-columns: 1.78fr 1fr; gap: 24px; align-items: stretch; }
.defect-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  text-align: left;
}
.defect-table thead th {
  padding: 16px 24px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.defect-table tbody th,
.defect-table tbody td { padding: 18px 24px; border-bottom: 1px solid var(--border-default); }
.defect-table tbody tr:last-child th,
.defect-table tbody tr:last-child td { border-bottom: 0; }
.defect-table tbody th { width: 48%; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.09px; }
.defect-table tbody td { color: var(--text-secondary); }

.role {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 361px;
  padding: 32px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
}
.role .bg-photo { z-index: 0; }
.role__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(38, 14, 10, 0.82), rgba(38, 14, 10, 0.9)); }
.role__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.role__text { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.28px; }
.role .btn { position: relative; z-index: 2; align-self: flex-start; }

/* Pricing (inside Logistics) -------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
  max-width: var(--content);
  margin: 96px auto 0;
  padding: 48px 40px;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
}
.pricing__intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pricing__intro .h1 { margin: 0; font-size: 40px; line-height: 48px; letter-spacing: -0.8px; }
.pricing__intro > p { margin: 0; color: var(--text-inverse-muted); }
.pricing__terms { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; padding: 18px 20px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); }
.pricing__terms .eyebrow { margin: 0; }
.pricing__terms p:last-child { margin: 0; }
.pricing__steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pricing__step { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.pricing__step:first-child { padding-top: 24px; }
.pricing__num { grid-row: span 2; font-size: 28px; line-height: 32px; font-weight: 300; color: var(--jute-300); }
.pricing__step strong { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.09px; }
.pricing__step span:last-child { color: var(--text-inverse-muted); }

/* Documents -------------------------------------------------------------- */
.docs { display: flex; flex-direction: column; align-items: center; gap: 56px; background: var(--surface-subtle); }
.docs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: var(--content); }
.doc { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 20px 24px; background: var(--surface-card); border-radius: var(--radius-sm); }
.doc img { flex: none; width: 24px; height: 24px; }
.doc span { font-size: 14px; line-height: 20px; }

@media (max-width: 1199px) {
  .grading__head { gap: 48px; }
  .grading__head > p { width: 340px; }
  .pricing { grid-template-columns: 320px 1fr; gap: 48px; }
}
@media (max-width: 1023px) {
  .overview__grid { grid-template-columns: 1fr; }
  .overview__card { min-height: 0; }
  .grading__head { flex-direction: column; gap: 20px; }
  .grading__head > p { width: auto; }
  .scale__grades { grid-template-columns: repeat(3, 1fr); }
  .scale__brackets { display: none; }
  .grading__defects,
  .grading__bottom { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; padding: 32px 28px; }
  .docs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .scale__grades { grid-template-columns: repeat(2, 1fr); }
  .docs__grid { grid-template-columns: 1fr; }
  .defects { padding: 24px 22px; }
  .defects__head { flex-direction: column; align-items: flex-start; }
}