/* ============================================================
   DevCo · Section 03 — The Insight
   Dark ground. One reframing idea — short, with generous space.
   ============================================================ */
.insight{position:relative;}
.insight__contour{color:var(--bone);opacity:.04;}

/* — Layout — aside metadata column + main statement column — */
.insight__grid{position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(48px,6vw,80px);
  align-items:start;}

/* aside holds the eyebrow, the drawn rule, and a quiet note */
.insight__aside{position:sticky;top:120px;align-self:start;
  display:flex;flex-direction:column;}

/* — Expanding hairline — draws across on scroll-in (data-draw) — */
.insight__rule-wrap{display:flex;flex-direction:column;gap:clamp(20px,3vh,28px);
  margin-top:clamp(32px,5vh,48px);}
.insight__rule{display:block;width:100%;height:var(--hair);overflow:visible;}
.insight__rule-line{stroke:var(--sage);stroke-width:1;
  vector-effect:non-scaling-stroke;}

.insight__note{max-width:260px;margin-top:clamp(44px,7vh,64px);
  line-height:1.7;letter-spacing:.04em;text-transform:none;}

/* — Main column — */
.insight__headline{margin:0 0 clamp(56px,9vh,96px);max-width:14ch;}
.insight__headline em{font-style:italic;}

.insight__body{max-width:560px;
  display:flex;flex-direction:column;gap:clamp(22px,3vh,32px);}
.insight__para{margin:0;}

/* final line — brighter, larger, the section's resolve */
.insight__para--emphasis{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,1.875rem);
  line-height:1.32;letter-spacing:-.01em;
  color:var(--bone);
  margin-top:clamp(6px,1.5vh,16px);}

/* The drawn rule degrades safely: motion.js showAll() resets
   stroke-dashoffset to 0 for reduced-motion / no-JS / no-GSAP. */

/* — Responsive — */
@media (max-width:960px){
  .insight__grid{grid-template-columns:1fr;
    gap:clamp(36px,6vh,52px);}
  .insight__aside{position:static;top:auto;}
  .insight__rule-wrap{margin-top:clamp(24px,4vh,36px);}
  .insight__note{max-width:42ch;margin-top:clamp(24px,4vh,32px);}
  .insight__headline{margin-bottom:clamp(36px,6vh,52px);}
}
@media (max-width:640px){
  .insight__body{max-width:none;}
}

/* ============================================================
   Elementor compatibility — Section 03 (decision 0003)
   The Insight is rebuilt as native Elementor content. Elementor
   wraps each widget in .elementor-element and adds e-con/e-flex
   to containers. These rules bridge that structure to the
   design-system CSS above, re-create the topographic contour
   backdrop as a pure-CSS decoration (it was a perthdev_contour()
   SVG, not editable content), and animate the expanding rule.
   Scoped to .devco-site so it never touches admin/other themes.
   ============================================================ */

/* — decoration: quiet topographic wash —
   (replaces the perthdev_contour() SVG; decoration, not content) */
.devco-site #insight.insight{position:relative;overflow:clip;}
.devco-site #insight.insight::before{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:1;opacity:.5;
  background:
    radial-gradient(120% 80% at 12% 8%,rgba(237,230,214,.04),transparent 60%),
    radial-gradient(90% 70% at 92% 100%,rgba(111,126,99,.05),transparent 62%);}

/* keep real content above the decoration */
.devco-site #insight .dc-shell{position:relative;z-index:2;}

/* layout grid — Elementor adds e-flex; grid must win */
.devco-site #insight .insight__grid.e-con{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(48px,6vw,80px);
  align-items:start;}

/* aside column — sticky metadata column */
.devco-site #insight .insight__aside.e-con{display:flex;flex-direction:column;
  position:sticky;top:120px;align-self:start;}

/* main column */
.devco-site #insight .insight__main.e-con{display:flex;flex-direction:column;}

/* note paragraph — text-editor wraps copy in <p>; push type to it */
.devco-site #insight .insight__note p{font:inherit;letter-spacing:inherit;
  line-height:inherit;color:inherit;margin:0;text-transform:none;}

/* — the expanding rule — a thin sage hairline that draws across —
   was an SVG <line data-draw>; now a text-editor span styled as a
   rule. dc-rv on its wrapper triggers the reveal; the rule itself
   scales from 0 → full width once revealed. */
.devco-site #insight .insight__rule-wrap.e-con{display:flex;
  flex-direction:column;gap:clamp(20px,3vh,28px);
  margin-top:clamp(32px,5vh,48px);}
.devco-site #insight .insight__rule{display:block;width:100%;}
.devco-site #insight .insight__rule span{display:block;width:100%;
  height:var(--hair);background:var(--sage);
  transform:scaleX(0);transform-origin:left center;}
/* draw the rule once its reveal wrapper has entered —
   motion.js adds .is-in to a [data-reveal] element on enter
   (and also in showAll() for reduced-motion / no-GSAP). */
html.js .devco-site #insight .insight__rule-wrap.is-in .insight__rule span{
  transform:scaleX(1);
  transition:transform 1s var(--ease) .2s;}
/* no-JS fallback: the rule is simply present */
html:not(.js) .devco-site #insight .insight__rule span{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .devco-site #insight .insight__rule span{transform:scaleX(1);transition:none;}
}

/* headline — heading widget wraps an <h2.elementor-heading-title> */
.devco-site #insight .insight__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;}
.devco-site #insight .insight__headline em{font-style:italic;}

/* body column */
.devco-site #insight .insight__body.e-con{display:flex;flex-direction:column;
  gap:clamp(22px,3vh,32px);max-width:560px;}

/* paragraphs — text-editor <p> takes the dc-lead type */
.devco-site #insight .insight__para p{font-size:var(--fs-lead);
  line-height:1.55;color:inherit;margin:0;}
/* final line — brighter, larger, the section's resolve */
.devco-site #insight .insight__para--emphasis p{font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,1.875rem);
  line-height:1.32;letter-spacing:-.01em;
  color:var(--bone);}

/* — Responsive — mirror the source breakpoints — */
@media (max-width:960px){
  .devco-site #insight .insight__grid.e-con{grid-template-columns:1fr;
    gap:clamp(36px,6vh,52px);}
  .devco-site #insight .insight__aside.e-con{position:static;top:auto;}
  .devco-site #insight .insight__rule-wrap.e-con{margin-top:clamp(24px,4vh,36px);}
}
@media (max-width:640px){
  .devco-site #insight .insight__body.e-con{max-width:none;}
}