/* ==========================================================================
   customers.css — the Okanogan customer story (customers/okanogan-school-district.html)
   Sandbox build, Sept 27, 2026. Tokens only: every colour is a var(--…) from site.css,
   so Night, Day and the always-night stages all work without overrides here.

   1  Hero: quote card beside the headline
   2  Timeline: four dated milestones
   3  "Before" card
   4  The list: seven asks, seven answers
   5  Reference call card
   ========================================================================== */


/* 1. HERO ---------------------------------------------------------------- */
.story-hero .split{align-items:center}
.story-hero h1{margin-top:16px}
.story-hero h1 .dim{display:block}
.story-quote{padding:clamp(24px, 3.2vw, 40px);border-radius:var(--r-xl)}
.story-quote .label{margin-bottom:16px}
.story-quote blockquote p{
  font-family:var(--font-display);font-size:clamp(1.35rem, 1.1rem + 1vw, 1.95rem);font-weight:750;
  line-height:1.3;letter-spacing:-.014em;color:var(--ink-strong);text-wrap:balance;
}
.story-by{
  display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line-hair);
}
.story-by b{display:block;color:var(--ink-strong)}
.story-by .meta{display:block;margin-top:2px;line-height:1.4}
.story-initials{
  width:52px;height:52px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--ink-strong);
  background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--line-control);
}


/* 2. TIMELINE ------------------------------------------------------------- */
.timeline{
  --tl-gap:clamp(16px, 2.4vw, 32px);
  list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--tl-gap);
}
.timeline > li{position:relative;padding-top:34px}
.timeline > li::before{          /* the milestone dot */
  content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--surface-inset);box-shadow:inset 0 0 0 2.5px var(--line-control);
}
.timeline > li::after{           /* the rail to the next milestone */
  content:"";position:absolute;top:7px;left:26px;right:calc(-1 * var(--tl-gap) + 10px);height:2px;
  border-radius:2px;background:var(--line-strong);
}
.timeline > li:last-child::after{display:none}
.timeline > li.is-now::before{background:var(--go);box-shadow:0 0 0 5px var(--go-halo)}
.timeline h3{font-size:1.15rem}
.timeline p{margin-top:6px;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
@media (max-width: 860px){
  .timeline{grid-template-columns:1fr;gap:26px}
  .timeline > li{padding-top:0;padding-left:36px}
  .timeline > li::before{top:4px}
  .timeline > li::after{top:28px;bottom:-22px;left:7px;right:auto;width:2px;height:auto}
}


/* 3. BEFORE ------------------------------------------------------------- */
.before-card{padding:clamp(22px, 3vw, 34px)}
.before-list{list-style:none;display:grid;margin-top:18px}
.before-list li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px dashed var(--line-strong)}
.before-list li:first-child{border-top:0;padding-top:4px}
.before-list li:last-child{padding-bottom:0}
.before-list .icon-well{margin:0}
.before-list b{display:block;font-family:var(--font-display);font-size:1.1rem;line-height:1.3}
.before-list p{margin-top:4px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}


/* 4. THE LIST ------------------------------------------------------------ */
.asks-card{
  border-radius:var(--r-xl);overflow:hidden;
  background-color:var(--surface-2);background-image:var(--sheen);
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-hair);
}
.asks-head,.ask{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  column-gap:clamp(24px, 4.5vw, 64px);
  padding-left:clamp(20px, 3.2vw, 40px);padding-right:clamp(20px, 3.2vw, 40px);
}
.asks-head{
  padding-top:16px;padding-bottom:16px;background:var(--surface-1);box-shadow:inset 0 -1px 0 var(--line-hair);
}
.asks-head span:first-child{padding-left:60px}
.asks{list-style:none;counter-reset:step}
.ask{counter-increment:step;row-gap:14px;padding-top:clamp(24px, 3vw, 36px);padding-bottom:clamp(24px, 3vw, 36px);border-top:1px solid var(--line-hair)}
.ask:first-child{border-top:0}
.ask-q{display:flex;gap:16px;align-items:flex-start}
.ask-q .step-n{margin:0;flex:none}
.ask-q h3{padding-top:7px;font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem);line-height:1.25;text-wrap:balance}
.ask-a > * + *{margin-top:12px}
.ask-a p{color:var(--ink-2);line-height:1.6}
.ask-a .quote{margin-top:16px}
.ask-a .quote p{font-size:clamp(1.15rem, 1.02rem + .5vw, 1.4rem);color:var(--ink-strong)}
.ask-a .disclaimer{margin-top:16px}
.ask-note{margin-top:14px}
@media (max-width: 800px){
  .asks-head{display:none}
  .asks-head,.ask{grid-template-columns:1fr}
  .ask-a{padding-left:60px}
}
@media (max-width: 460px){
  .ask-a{padding-left:0}
}


/* 5. REFERENCE CALL ------------------------------------------------------ */
.ref-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 24px;align-items:center;
  padding:clamp(22px, 3vw, 36px);
}
.ref-card .icon-well{margin:0}
.ref-card h2{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem)}
.ref-card p{margin-top:6px;color:var(--ink-2)}
.ref-card .btn-row{grid-column:2}   /* buttons under the text: the full phone number is too wide for a third column */
@media (max-width: 900px){
  .ref-card .btn-row{grid-column:1 / -1}
}
@media (max-width: 460px){
  .ref-card{grid-template-columns:1fr}
  .ref-card .btn-row .btn{flex:1 1 100%}
}