/* Contact · after you send (ink band) — two clocks as tabs. Under the head, "If you send it now": the office's own
   time and when the clock starts. Each clock: four steps, each with the date it lands on (a chip; words where no date
   can be known, a link where the visitor can supply it), then its own evidence — the first call (photograph + what
   the call is) for a brief; the agent's working sheet (paper on ink) beside agents help / people decide for an RFQ.
   Without JS both clocks show, each under its label. contact/next.js keeps the dates live and plays the sheet once. */

.ct-next__tabs{display:inline-flex;gap:4px;margin-top:22px;padding:4px;border:1px solid var(--on-ink-line);border-radius:var(--r-pill)}
.ct-next__tab{min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;color:var(--on-ink-2);transition:background var(--d1) var(--e-io),color var(--d1) var(--e-io)}
.ct-next__tab:hover{color:var(--on-ink)}
.ct-next__tab[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.ct-next__tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* if you send it now */
.ct-now{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 24px;margin-bottom:clamp(40px,4vw,56px);padding:18px 22px;
  border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:var(--on-ink-card)}
.ct-now__k{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink);white-space:nowrap}
.ct-now__t{font-size:var(--t-body);font-weight:500;line-height:1.5;color:var(--on-ink);font-variant-numeric:tabular-nums}
.ct-now__note{grid-column:2;font-size:var(--t-xs);line-height:1.55;color:var(--on-ink-3);max-width:72ch}

.ct-next__panes{display:flex;flex-direction:column;gap:72px}
.ct-np:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:var(--r)}
.ct-np__h{margin-bottom:22px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}
.ct-next.is-tabbed .ct-np__h{display:none}

/* the four steps */
.ct-tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bdh-gap)}
.ct-tl::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--on-ink-line)}
.ct-tl__i{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:12px}
.ct-tl__node{position:relative;display:grid;place-items:center;width:23px;height:23px;margin-bottom:10px;border-radius:50%;background:var(--ink);border:1px solid var(--on-ink-3)}
.ct-tl__node i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ct-tl__i:first-child .ct-tl__node{border-color:var(--blue)}
.ct-tl__n{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;color:var(--on-ink-3)}
.ct-tl__t{font-family:var(--f-h);font-size:clamp(1.15rem,1.5vw,1.35rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--on-ink)}
.ct-tl__when{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink)}
.ct-tl__when .xt-ico{width:16px;height:16px;color:var(--on-ink-3)}
.ct-tl__at{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px 4px 10px;border:1px solid var(--on-ink-line);border-radius:var(--r-pill);background:var(--on-ink-card);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.04em;line-height:1.3;color:var(--on-ink);font-variant-numeric:tabular-nums;transition:background var(--d2) var(--e)}
.ct-tl__at .xt-ico{flex:none;width:15px;height:15px;color:var(--on-ink-2)}
.ct-tl__at--words{background:transparent;border-style:dashed;color:var(--on-ink-2)}
.ct-tl__at--set{padding:0;border:0;background:transparent}
/* the same 30px pill as the dates, with a 44px hit area that does not move the steps out of line */
.ct-tl__at--set a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 14px;border:1px solid var(--on-ink-3);border-radius:var(--r-pill);
  font-family:var(--f-b);font-size:var(--t-xs);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--on-ink);transition:border-color var(--d1) var(--e-io),background var(--d1) var(--e-io)}
.ct-tl__at--set a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.ct-tl__at--set a:hover{border-color:var(--on-ink);background:var(--on-ink-card)}
.ct-tl__at.is-tick{background:var(--blue-d)}
.ct-tl__d{font-size:var(--t-sm);line-height:1.65;color:var(--on-ink-2)}

/* each clock's evidence */
.ct-np__low{margin-top:var(--bdh-block);align-items:center}
.ct-next__fig{margin:0}
.ct-next__img{border-radius:var(--r-xl)}
.ct-next__cap{display:flex;gap:12px;margin-top:14px;font-size:var(--t-xs);line-height:1.55;color:var(--on-ink-3)}
.ct-next__cap span{color:var(--on-ink)}

/* a brief: the first call */
.ct-call{display:flex;flex-direction:column;align-items:flex-start}
.ct-call__k,.ct-split__k{display:flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)}
.ct-call__k .xt-ico,.ct-split__k .xt-ico{width:18px;height:18px}
.ct-call__list{width:100%;margin:18px 0 28px;border-top:1px solid var(--on-ink-line)}
.ct-call__list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--on-ink-line)}
.ct-call__n{padding-top:4px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;color:var(--on-ink-3)}
.ct-call__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.ct-call__b b{font-family:var(--f-h);font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--on-ink)}
.ct-call__b span{font-size:var(--t-sm);line-height:1.6;color:var(--on-ink-2)}

/* an RFQ: agents help, people decide */
.ct-split{display:flex;flex-direction:column;align-items:flex-start}
.ct-split__i{width:100%;padding:22px 0;border-top:1px solid var(--on-ink-line)}
.ct-split__i:last-of-type{margin-bottom:28px;border-bottom:1px solid var(--on-ink-line)}
.ct-split__k--a{color:var(--on-ink)}
.ct-split__d{margin-top:10px;font-size:var(--t-sm);line-height:1.65;color:var(--on-ink-2)}

/* the agent's working sheet: an illustration (aria-hidden + a .bdh-sr sentence) */
.ct-ag{position:relative;margin:0 18px 18px 0}
.ct-ag__sheet{position:absolute;inset:0;border:1px solid var(--on-ink-line);border-radius:var(--r-lg);background:var(--on-ink-card);transform:translate(16px,16px)}
.ct-ag__doc{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-2)}
.ct-ag__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct-ag__who{display:inline-flex;align-items:center;gap:8px;color:var(--blue-d)}
.ct-ag__who .xt-ico{width:18px;height:18px}
.ct-ag__st{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--ink)}
.ct-ag__st i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ct-ag__title{margin-top:18px;font-family:var(--f-h);font-size:clamp(1.2rem,1.6vw,1.45rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.ct-ag__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ct-ag__facts dt{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ct-ag__facts dd{margin-top:4px;font-size:var(--t-sm);font-weight:500;line-height:1.4;color:var(--ink)}
.ct-ag__h{margin-top:20px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ct-ag__qs{margin-top:6px}
.ct-ag__qs li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-2)}
.ct-ag__qn{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.08em;color:var(--blue-d)}
.ct-ag__q{font-size:var(--t-sm);line-height:1.5;color:var(--ink)}
.ct-ag__src{padding:3px 8px;border-radius:var(--r-xs);background:var(--blue-wash);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.04em;color:var(--blue-d);white-space:nowrap}
.ct-ag__sign{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border:1px dashed var(--line-3);border-radius:var(--r);background:var(--paper-2);
  font-size:var(--t-xs);font-weight:600;line-height:1.45;color:var(--ink)}
.ct-ag__sign .xt-ico{flex:none;width:20px;height:20px;color:var(--ink)}

/* the sheet drafts itself once (only after contact/next.js has added .is-anim; the HTML ships finished) */
.ct-ag.is-anim [data-ct-ag-q]{opacity:0;transform:translateY(6px);transition:opacity .45s var(--e),transform .45s var(--e)}
.ct-ag.is-anim [data-ct-ag-q].is-on{opacity:1;transform:none}
.ct-ag.is-anim .ct-ag__sign{opacity:.35;transition:opacity .5s var(--e)}
.ct-ag.is-anim.is-done .ct-ag__sign{opacity:1}
.ct-ag.is-anim:not(.is-done) .ct-ag__st i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--line-3);animation:ctPing 1.6s var(--e) infinite}

@media (max-width:1023px){
  .ct-tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .ct-tl::before{display:none}
  .ct-np__low{row-gap:44px}
}
@media (max-width:860px){
  .ct-ag{margin-right:12px}
}
@media (max-width:640px){
  .ct-now{grid-template-columns:minmax(0,1fr);padding:16px 18px}
  .ct-now__note{grid-column:1}
  .ct-now__k{white-space:normal}
  .ct-tl{grid-template-columns:minmax(0,1fr);row-gap:0;padding-left:0}
  .ct-tl__i{display:grid;grid-template-columns:23px minmax(0,1fr);justify-items:start;column-gap:18px;row-gap:8px;padding:0 0 30px}
  .ct-tl__i::before{content:"";position:absolute;left:11px;top:23px;bottom:0;width:1px;background:var(--on-ink-line)}
  .ct-tl__i:last-child::before{display:none}
  .ct-tl__node{grid-row:1 / span 5;margin:0}
  .ct-tl__n,.ct-tl__t,.ct-tl__when,.ct-tl__at,.ct-tl__d{grid-column:2}
  .ct-next__tabs{display:flex;width:100%}
  .ct-next__tabs[hidden]{display:none}
  .ct-next__tab{flex:1 1 0;padding:0 10px}
  .ct-ag{margin:0 10px 10px 0}
  .ct-ag__sheet{transform:translate(10px,10px)}
  .ct-ag__facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ct-ag__facts div:last-child{grid-column:1 / -1}
  .ct-ag__qs li{grid-template-columns:24px minmax(0,1fr)}
  .ct-ag__src{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .ct-tl__at,.ct-ag.is-anim [data-ct-ag-q],.ct-ag.is-anim .ct-ag__sign{transition:none}
  .ct-ag.is-anim:not(.is-done) .ct-ag__st i::after{animation:none}
}