/* ============================================================
   ORDER & DELIVERY — page-specific components.
   Three design directions toggle via a body class:
     .od-a  Atelier   (centered editorial, horizontal timeline)
     .od-b  Ledger    (left hero + terms card, vertical timeline, matrix)
     .od-c  Workshop  (warm alternating sections, green timeline band)
   Loads after styles.css + pages.css.
   ============================================================ */

/* ---- shared section scaffold ---- */
.od-sec{padding:84px 0;border-top:1px solid var(--line-soft);}
.od-sec:first-of-type{border-top:none;}
.od-head{max-width:760px;margin:0 0 48px;}
.od-head .kicker{display:block;}
.od-head h2{font-size:30px;line-height:1.15;margin-top:14px;}
.od-head:not(:has(.kicker)) h2{margin-top:0;}
.od-head p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-top:18px;max-width:620px;}

/* ---- hero ---- */
.od-hero{padding:28px 0 32px;}
.od-hero-grid{display:grid;grid-template-columns:1fr;gap:32px;}
.od-hero-main .page-title{font-size:clamp(40px,5.4vw,76px);line-height:.98;}
.od-hero-main .lead{margin-top:32px;max-width:600px;}
.od-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}

/* ---- at-a-glance ---- */
.od-glance{display:grid;grid-template-columns:repeat(4,1fr);}
.od-stat{padding:0 26px;border-left:1px solid var(--line);}
.od-stat:first-child{padding-left:0;border-left:none;}
.od-stat-k{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.od-stat-v{font-family:var(--serif);font-size:clamp(20px,2vw,26px);color:var(--ink);margin-top:12px;line-height:1.15;}
.od-stat-v small{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:var(--muted);margin-top:6px;}

/* ---- ordering steps ---- */
.od-steps{display:grid;gap:0;}
.od-step{display:grid;grid-template-columns:var(--od-num-col,104px) 1fr;gap:40px;padding:38px 0;border-top:1px solid var(--line);align-items:start;}
.od-step:last-child{border-bottom:1px solid var(--line);}
.od-step-n{font-family:var(--serif);font-size:clamp(30px,3vw,44px);color:var(--green);line-height:1;}
.od-step-b h3{font-size:clamp(20px,2vw,26px);display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;}
.od-step-when{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:600;}
.od-step-b p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin-top:12px;max-width:620px;}

/* ---- timeline ---- */
.od-timeline-sec .od-head{margin-bottom:40px;}
.od-tl{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.od-tl::before{content:"";position:absolute;left:0;right:calc(20% - 19.2px);top:9px;height:1px;background:var(--line);}
.od-tl-node{position:relative;padding-right:14px;}
.od-tl-dot{width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--green);position:relative;z-index:1;display:grid;place-items:center;}
.od-tl-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);}
.od-tl-what{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;margin-top:20px;}
.od-tl-sub{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px;}

/* ---- shipping: definition list + matrix ---- */
.od-ship-list{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;}
.od-ship-row{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:baseline;}
.od-ship-row dt{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;}
.od-ship-row dd{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);}

.od-matrix{display:none;width:100%;border-collapse:collapse;}
.od-matrix th,.od-matrix td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:top;}
.od-matrix thead th{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--ink);}
.od-matrix tbody th{font-family:var(--serif);font-size:18px;color:var(--green);font-weight:400;width:26%;}
.od-matrix td{font-size:15px;line-height:1.6;color:var(--ink-soft);}

/* ---- returns / care points ---- */
.od-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.od-point{padding:0 30px;border-left:1px solid var(--line);}
.od-point:first-child{padding-left:0;border-left:none;}
.od-point h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;}
.od-point p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin-top:12px;}

/* ---- faq ---- */
.od-faq{max-width:840px;}
.od-faq-item{padding:26px 0;border-top:1px solid var(--line);}
.od-faq-item:last-child{border-bottom:1px solid var(--line);}
.od-q{font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);color:var(--ink);}
.od-a{font-size:15.5px;line-height:1.72;color:var(--ink-soft);margin-top:12px;max-width:680px;}

/* pull-quote (variation C only) */
.od-pull{display:none;}

/* ============================================================
   VARIATION A — ATELIER  (centered, airy, horizontal timeline)
   ============================================================ */
.od-a .page-hero{padding:72px 0 0;}
.od-a .od-hero-grid{justify-items:stretch;text-align:center;}
.od-a .od-hero-main{width:100%;}
.od-a .od-hero-main .lead{margin-left:auto;margin-right:auto;text-wrap:balance;}
.od-a .od-hero-cta{justify-content:center;}
.od-a .od-glance{margin-top:60px;padding-top:40px;border-top:1px solid var(--line);width:100%;}
.od-a .od-glance .od-stat{text-align:center;border-left:1px solid var(--line);}
.od-a .od-glance .od-stat:first-child{border-left:none;}

/* ============================================================
   VARIATION B — LEDGER  (left hero + card, vertical timeline, matrix)
   ============================================================ */
.od-b .page-hero{padding:60px 0;}
.od-b .od-hero-grid{grid-template-columns:1.25fr .85fr;gap:64px;align-items:end;text-align:left;}
.od-b .od-hero-main .page-title{font-size:clamp(40px,5vw,68px);}
/* glance becomes a bordered terms card */
.od-b .od-glance{grid-template-columns:1fr;border:1px solid var(--line);padding:8px 26px;background:var(--paper);}
.od-b .od-glance .od-stat{padding:22px 0;border-left:none;border-top:1px solid var(--line-soft);text-align:left;}
.od-b .od-glance .od-stat:first-child{border-top:none;}
.od-b .od-stat-v{font-size:22px;}
/* tighter, document-style steps */
.od-b{--od-num-col:64px;}
.od-b .od-step{padding:30px 0;gap:28px;}

.od-b .od-ship-list{display:none;}
.od-b .od-matrix{display:table;}
/* faq with hanging rules, left */
.od-b .od-faq{max-width:920px;}

/* ============================================================
   VARIATION C — WORKSHOP  (warm, alternating bg, green band)
   ============================================================ */
.od-c .page-hero{padding:28px 0 64px;background:var(--paper);border-bottom:1px solid var(--line);}
.od-c .od-hero-grid{text-align:center;justify-items:center;}
.od-c .od-hero-main{width:100%;}
.od-c .od-hero-main .lead{margin-left:auto;margin-right:auto;text-wrap:balance;}
.od-c .od-hero-cta{justify-content:center;}
.od-c .od-hero-main .page-title{font-family:var(--serif);font-size:clamp(42px,5.6vw,78px);}
.od-c .od-glance{margin-top:48px;padding-top:36px;border-top:1px solid var(--line);}
.od-c .od-sec--alt{background:var(--paper-2);}
.od-c .od-step-n{font-size:clamp(34px,3.4vw,52px);}
/* green full-bleed timeline band */
.od-c .od-timeline-sec{background:var(--ink);color:#eef1ee;border-top:none;}
.od-c .od-timeline-sec .kicker{color:rgba(238,241,238,.7);}
.od-c .od-timeline-sec .od-head h2{color:#fff;}
.od-c .od-timeline-sec .od-head p{color:rgba(238,241,238,.78);}
.od-c .od-tl::before{background:rgba(238,241,238,.3);}
.od-c .od-tl-dot{background:var(--green);border-color:rgba(238,241,238,.6);}
.od-c .od-tl-dot::after{background:#eef1ee;}
.od-c .od-tl-what{color:#cdd5ce;}
.od-c .od-tl-sub{color:rgba(238,241,238,.7);}
/* pull-quote */
.od-c .od-pull{display:block;padding:96px 0;text-align:center;}
.od-c .od-pull p{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);line-height:1.32;max-width:900px;margin:0 auto;}
.od-c .od-pull .accent{color:var(--green);font-style:italic;}
/* faq as bordered cards */
.od-c .od-faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.od-c .od-faq-item{border:1px solid var(--line);border-radius:2px;padding:28px 30px;}
.od-c .od-faq-item:last-child{border:1px solid var(--line);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .od-sec{padding:60px 0;}
  .od-b .od-hero-grid{grid-template-columns:1fr;gap:36px;align-items:start;}
  .od-glance{grid-template-columns:repeat(2,1fr);gap:28px 0;}
  .od-a .od-glance .od-stat,.od-glance .od-stat{padding:0 20px;}
  .od-a .od-glance .od-stat:nth-child(odd),.od-glance .od-stat:nth-child(odd){border-left:none;padding-left:0;}
  .od-step{grid-template-columns:48px 1fr;gap:20px;}
  /* timeline always vertical on small screens */
  .od-tl{grid-template-columns:1fr !important;gap:0 !important;}
  .od-tl::before{left:8px !important;right:auto !important;top:0 !important;bottom:0 !important;width:1px !important;height:auto !important;}
  .od-tl-node{padding:0 0 30px 40px !important;}
  .od-tl-dot{position:absolute !important;left:0;top:2px;}
  .od-tl-what{margin-top:0 !important;}
  .od-ship-list{grid-template-columns:1fr;}
  .od-points{grid-template-columns:1fr;gap:0;}
  .od-point{padding:24px 0;border-left:none;border-top:1px solid var(--line);}
  .od-point:first-child{border-top:none;padding-top:0;}
  .od-c .od-faq{grid-template-columns:1fr;}
  .od-b .od-matrix th,.od-b .od-matrix td{padding:14px 12px;font-size:14px;}
}
@media (max-width:620px){
  .od-glance{grid-template-columns:1fr;gap:0;}
  .od-glance .od-stat{padding:18px 0 !important;border-left:none !important;border-top:1px solid var(--line-soft);}
  .od-glance .od-stat:first-child{border-top:none;}
}