/* page-process2.css: How the job goes (study 07 design language) */

body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
section{padding:clamp(60px,9vh,110px) 0}

/* ---------- the route (study 07 journey pattern) ---------- */
.route{position:relative;max-width:860px;margin:70px auto 0}
.route .line{
  position:absolute;left:31px;top:8px;bottom:8px;width:6px;border-radius:3px;
  background:linear-gradient(var(--marigold),var(--marigold)) no-repeat;
  background-size:100% calc(var(--p,0) * 100%);
  border-left:2px dashed var(--teal-faint);border-right:2px dashed var(--teal-faint);
}
.stop{position:relative;padding:0 0 58px 96px}
.stop:last-child{padding-bottom:6px}
.stop .dot{
  position:absolute;left:8px;top:0;width:52px;height:52px;border-radius:50%;
  background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:'Teko',sans-serif;font-weight:600;font-size:23px;padding-top:3px;
  border:3px solid var(--cream);box-shadow:0 0 0 2.5px var(--teal);
  transition:background .4s,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.stop.hit .dot{background:var(--rust);transform:scale(1.12)}
.stop h4{
  font-family:'Teko',sans-serif;font-weight:600;font-size:27px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
}
.stop .when{font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.stop p{margin-top:8px;color:var(--teal-soft);max-width:52ch;font-size:15.5px}
.stop p a{color:var(--rust)}
.stop .tip{
  margin-top:14px;display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1.5px solid var(--teal-faint);border-radius:10px;
  padding:12px 16px;max-width:52ch;font-size:14px;
}
.stop .tip .sunhead{font-size:18px;flex:none;color:var(--rust)}
.stop .tip b{font-family:'Teko',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--rust)}
.stop .pose{
  position:absolute;right:-20px;top:-16px;width:clamp(100px,13vw,160px);
  transform:rotate(4deg);
  filter:drop-shadow(0 6px 12px rgba(28,72,90,.18));
}
.stop:nth-child(odd) .pose{transform:rotate(-4deg)}
@media(max-width:760px){.stop .pose{position:static;display:block;margin:14px 0 0;width:110px}}

/* ---------- what it is not ---------- */
#not{background:var(--teal);color:var(--cream);position:relative;overflow:clip}
#not::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--marigold) 0 40px,transparent 40px 80px);
}
#not .sec-kick{color:var(--marigold)}
#not .script{color:var(--cream)}
.not-lines{max-width:620px;margin:40px auto 0}
.not-line{
  font-family:'Teko',sans-serif;font-weight:600;font-size:clamp(22px,3vw,30px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream);padding:16px 4px 12px;text-align:center;
  border-bottom:1.5px dashed rgba(251,243,226,.3);position:relative;
}
.not-line::before{content:"✕";color:var(--marigold);margin-right:14px}
.not-after{text-align:center;margin-top:26px;color:rgba(251,243,226,.8);font-size:15.5px}

/* ---------- mobile polish ---------- */
@media(max-width:760px){
  section{padding:clamp(48px,7vh,80px) 0}
  .sec-sub{padding:0 6px}
  .spread{margin-top:44px}
  .route .line{left:24px}
  .stop{padding-left:66px;padding-bottom:44px}
  .stop .dot{left:2px;width:44px;height:44px;font-size:20px}
}