/* =========================================================================
   Homepage 02 · StrategyIQ · "The system maps the pattern. Luis reads what it means."
   Loaded only by index.html, after lg-home.css.

   Type: the Kitchen's sans headline recipe (Inter 600, tight, two-tone), used here
   as a deliberate local exception, the same way #kitchen uses it. How we think (02)
   and how we work (06) now share a voice. The rest of the page keeps its type system.

   The plate (js/lg-siq.js) draws five exact arches and one hand-drawn line inside
   the dark instrument, aligned to the five columns. Final state is the natural
   state: the draw-on only runs when the script adds .is-pending, so no-script and
   reduced-motion contexts show everything finished.
   ========================================================================= */

/* ---------- headline: Inter 600, two-tone (the symptom fades, the opportunity is firm) ---------- */
.home #strategyiq .siq-purpose{
  max-width:15.5em;
  margin:0 0 clamp(30px,3.6vw,56px);
  font-family:var(--font-body);
  font-weight:600;
  font-style:normal;
  font-size:clamp(35px,4.7vw,76px);
  line-height:1.03;
  letter-spacing:-.034em;
  text-wrap:balance;
  font-feature-settings:"ss01","cv11";
}
.home #strategyiq .siq-purpose .siq-soft{color:var(--t2)}
.home #strategyiq .home-kicker .num{color:var(--acc-on-ivory-sm)}

/* ---------- the instrument ---------- */
.home #strategyiq .home-instrument{
  padding-bottom:clamp(26px,3vw,40px);
}
.sq-plate{
  position:relative;
  margin-top:clamp(14px,1.8vw,24px);
  color:var(--ivory);
  pointer-events:none;
}
.sq-plate:empty{margin:0}
.sq-plate svg{display:block;width:100%;height:auto;overflow:visible}

/* Layer names take the headline's sans */
.home #strategyiq .home-layers li{padding-top:clamp(20px,2.2vw,30px)}
.home #strategyiq .home-layers h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(19px,1.7vw,25px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-feature-settings:"ss01","cv11";
}
.home #strategyiq .home-layers .is-end h3{color:var(--champ)}

/* The hand-off row: labels share one line instead of stepping down */
.home #strategyiq .home-handoff{align-items:start}
.home #strategyiq .home-read-acts{align-self:start}

/* The hinge */
.home #strategyiq .siq-hinge{
  max-width:30ch;
  margin:clamp(28px,3.2vw,44px) 0 0;
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(20px,1.9vw,27px);
  line-height:1.25;
  letter-spacing:-.022em;
  font-feature-settings:"ss01","cv11";
}
.home #strategyiq .siq-hinge::before{
  content:"";
  display:block;
  width:34px;
  height:1px;
  margin-bottom:16px;
  background:var(--acc-on-ivory);
}

/* ---------- draw-on ---------- */
.sq-plate .sq-d{
  fill:none;
  stroke:var(--ivory);
  stroke-width:.8;
  stroke-linecap:butt;
  stroke-linejoin:round;
  stroke-dasharray:1 2;
  stroke-dashoffset:1.02;
  transition:stroke-dashoffset var(--t,1.2s) var(--e,ease) var(--d,0s);
}
.sq-plate.is-drawn .sq-d{stroke-dashoffset:0}
.sq-plate .sq-rv{stroke-width:.6}
.sq-plate .sq-last{stroke:var(--champ)}
.sq-plate .sq-read,
.sq-plate .sq-fs{stroke:var(--champ);stroke-linecap:round}
.sq-plate .sq-read{stroke-width:1.5}
.sq-plate .sq-fs{stroke-width:.9}
.sq-plate .sq-ray{stroke:url(#sq-ray);stroke-width:.7}

.sq-plate .sq-f{opacity:0;transition:opacity 1.1s ease var(--d,0s)}
.sq-plate.is-drawn .sq-f{opacity:1}
.sq-plate .sq-dot{fill:var(--ivory);fill-opacity:.4}
.sq-plate .sq-end{fill:var(--champ)}

/* Each column's words come up as its doll lands (--td is set per column by js/lg-siq.js) */
/* The stagger belongs to the brighten-up only. Dimming (is-pending) is instant, so a
   column never waits its turn to go dark before the section has even been seen. */
#strategyiq .home-instrument.is-pending .home-layers li{opacity:.3;transition:none}
#strategyiq .home-instrument.is-read .home-layers li{opacity:1;transition:opacity .9s ease var(--td,0s)}

/* Hover or focus on a column lifts its arch */
.sq-plate .sq-g{transition:opacity .4s ease}
.sq-plate.is-drawn[data-hot] .sq-g{opacity:.42}
.sq-plate.is-drawn[data-hot="0"] .sq-g[data-i="0"],
.sq-plate.is-drawn[data-hot="1"] .sq-g[data-i="1"],
.sq-plate.is-drawn[data-hot="2"] .sq-g[data-i="2"],
.sq-plate.is-drawn[data-hot="3"] .sq-g[data-i="3"],
.sq-plate.is-drawn[data-hot="4"] .sq-g[data-i="4"]{opacity:1}
.sq-plate.is-drawn[data-hot="0"] .sq-g[data-i="0"] .sq-a,
.sq-plate.is-drawn[data-hot="1"] .sq-g[data-i="1"] .sq-a,
.sq-plate.is-drawn[data-hot="2"] .sq-g[data-i="2"] .sq-a,
.sq-plate.is-drawn[data-hot="3"] .sq-g[data-i="3"] .sq-a,
.sq-plate.is-drawn[data-hot="4"] .sq-g[data-i="4"] .sq-a{stroke-opacity:1;stroke-width:1.2}

/* A plate that was already drawn and got rebuilt (resize) shows finished */
.sq-plate.is-still .sq-d,
.sq-plate.is-still .sq-f{transition:none}

@media (max-width:980px){
  .home #strategyiq .home-layers li{padding-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .sq-plate .sq-d,
  .sq-plate .sq-f,
  .sq-plate .sq-g,
  #strategyiq .home-instrument.is-read .home-layers li{transition:none}
}