/* ============================================================================
   THE OPTIMAL LINE
   The brand device: the most intelligent route through business complexity.
   A path enters through scattered noise, commits at a single apex, and leaves
   on a cleaner trajectory. Every instance is SVG, drawn with stroke-dashoffset
   so it reads as a decision being made rather than an object appearing.
   ========================================================================= */

.oline{ display:block; width:100%; height:auto; overflow:visible; }
.oline *{ vector-effect:non-scaling-stroke; }

/* --- the field of complexity the line travels through -------------------- */
.oline__noise line,
.oline__noise circle{
  stroke:currentColor;
  opacity:.16;
}
.oline__grid line{ stroke:currentColor; opacity:.08; }

/* --- the route ----------------------------------------------------------- */
.oline__path{
  fill:none;
  stroke:var(--oline-stroke,var(--text));
  stroke-width:var(--oline-weight,1.5);
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* the discarded/considered route — what a less careful team would have taken */
.oline__ghost{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  stroke-dasharray:2 6;
  opacity:.28;
}

/* --- the strategic apex -------------------------------------------------- */
.oline__apex{ fill:var(--burgundy); }
.is-dark .oline__apex{ fill:#F0545A; }
.oline__apex-ring{
  fill:none;
  stroke:var(--burgundy);
  stroke-width:1;
  opacity:.5;
}
.is-dark .oline__apex-ring{ stroke:#F0545A; }
.oline__apex-tick{ stroke:var(--burgundy); stroke-width:1; opacity:.6; }
.is-dark .oline__apex-tick{ stroke:#F0545A; }

/* ============================== DRAW ==================================== */
/* Length is set per-instance from JS (getTotalLength) into --len, so the
   timing is correct for any path without hard-coding dash values.          */

.oline__path,
.oline__ghost{
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
}
.oline.is-in .oline__path{
  animation:oline-draw var(--dur-4) var(--ease-out) forwards;
}
.oline.is-in .oline__ghost{
  animation:oline-draw calc(var(--dur-4) * .8) var(--ease-out) forwards;
  animation-delay:180ms;
}
@keyframes oline-draw{ to{ stroke-dashoffset:0; } }

/* apex resolves only once the line has reached it */
.oline__apex,.oline__apex-ring,.oline__apex-tick{
  opacity:0;
  transition:opacity var(--dur-3) var(--ease) calc(var(--dur-4) * .62);
}
.oline.is-in .oline__apex{ opacity:1; }
.oline.is-in .oline__apex-ring{ opacity:.5; }
.oline.is-in .oline__apex-tick{ opacity:.6; }

.oline.is-in .oline__noise > *{
  animation:oline-settle var(--dur-3) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes oline-settle{ from{ opacity:0; transform:translateY(4px); } }

/* The apex pulse — one slow breath, so the eye returns to the decision point */
.oline.is-in .oline__apex-ring{ animation:apex-breathe 4.5s var(--ease) 1.4s infinite; }
@keyframes apex-breathe{
  0%,100%{ transform:scale(1);   opacity:.5; }
  50%    { transform:scale(1.5); opacity:.12; }
}

/* ------------------------------------------------------- DIVIDER VARIANT */
/* A hairline that carries a single apex — used between sections.          */
.oline-divider{
  --oline-weight:1;
  color:var(--line-strong);
  padding-block:var(--space-2);
}
.oline-divider .oline__path{ stroke:var(--line-strong); }

/* -------------------------------------------------------- HERO CONTAINER */
.hero-line{
  position:absolute; inset:0;
  z-index:var(--z-line);
  pointer-events:none;
  color:var(--d-text-faint);
  overflow:hidden;
  /* Fade the route out behind the headline column so it never crosses type.
     The line reads as emerging from behind the words into open space. */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 30%,#000 58%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 30%,#000 58%,#000 100%);
}
@media (max-width:900px){
  .hero-line{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 46%,#000 76%);
    mask-image:linear-gradient(to bottom,transparent 0%,transparent 46%,#000 76%);
  }
}
.hero-line .oline{ position:absolute; inset:0; width:100%; height:100%; }
.hero-line .oline svg,
.hero-line svg.oline{ width:100%; height:100%; }

/* ---------------------------------------------------------- GRAPHICS ---- */
/* Section artwork built from the same primitives as the hero line, so the
   whole site draws from one visual vocabulary rather than bolted-on clip art. */
.gfx{
  width:100%; height:auto;
  color:var(--text-faint);
  overflow:visible;
}
.gfx .oline__path{ stroke:var(--text); opacity:.85; }
.is-dark .gfx .oline__path{ stroke:var(--d-text); }
.gfx .oline__grid line{ stroke:currentColor; opacity:.22; }
.gfx__label{
  fill:var(--text-faint);
  font-family:var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.is-dark .gfx__label{ fill:var(--d-text-faint); }

/* a graphic sitting beside copy rather than behind it */
.gfx-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-8) var(--space-10);
  align-items:center;
}
@media (max-width:900px){
  .gfx-pair{ grid-template-columns:1fr; gap:var(--space-6); }
}

/* ------------------------------------------------------- PROGRESS RAIL   */
/* Vertical spine linking the three approach phases.                        */
.rail{ position:relative; }
.rail__track{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line);
}
.rail__fill{
  position:absolute; left:0; top:0; width:1px;
  height:var(--rail-progress,0%);
  background:var(--accent);
  transition:height 120ms linear;
}

@media (prefers-reduced-motion:reduce){
  .oline__path,.oline__ghost{ stroke-dasharray:none; stroke-dashoffset:0; animation:none !important; }
  .oline__apex,.oline__apex-ring,.oline__apex-tick{ opacity:1; animation:none !important; transition:none; }
  .oline__apex-ring{ opacity:.5; }
  .oline.is-in .oline__noise > *{ animation:none; }
}