/* ============================================================
   DevCo · Section 07 — Who It's For
   Dark ground. Centred headline above a two-column split with a
   vertical hairline divider; columns slide in from each side.
   ============================================================ */
.audience{position:relative;}
.audience__contour{color:var(--bone);opacity:.07;}

/* faint serif word, low-left */
.audience__ghost{position:absolute;left:-1%;bottom:-8%;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(170px,24vw,440px);line-height:.85;color:var(--bone);
  opacity:.04;letter-spacing:-.04em;pointer-events:none;user-select:none;
  white-space:nowrap;z-index:0;}

/* — Centred heading — */
.audience__head{position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(24px,4vh,38px);
  margin-bottom:clamp(64px,10vh,112px);}
.audience__headline{margin:0;max-width:20ch;line-height:1;}
.audience__headline em{font-style:italic;color:var(--bone-soft);}

/* — The split — */
.audience__split{position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,104px);align-items:start;}

/* vertical hairline divider down the centre */
.audience__divider{position:absolute;top:0;bottom:0;left:50%;
  width:var(--hair);background:var(--bone-hair);
  transform:translateX(-50%);}

/* — A column — */
.audience__col{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;}

/* index chip */
.audience__chip{display:block;margin-bottom:20px;}

/* framed plate */
.audience__plate{width:100%;aspect-ratio:16/10;margin-bottom:36px;}
.audience__plate-drift{position:absolute;inset:-10%;mix-blend-mode:screen;
  background:radial-gradient(55% 45% at 58% 40%,
    rgba(168,90,58,.26),transparent 70%);
  animation:audienceDrift 17s var(--ease-inout) infinite alternate;}
.audience__col--right .audience__plate-drift{
  background:radial-gradient(50% 50% at 36% 64%,
    rgba(111,126,99,.24),transparent 66%);
  animation-duration:21s;}
@keyframes audienceDrift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(5%,4%,0) scale(1.12);}}

.audience__label{display:block;margin-bottom:16px;}
.audience__col-heading{margin:0 0 22px;max-width:18ch;
  line-height:1.14;}
.audience__col-text{max-width:480px;margin:0 0 34px;}
.audience__col-btn{margin-top:auto;}

/* — Responsive — columns stack, divider becomes a horizontal rule — */
@media (max-width:860px){
  .audience__split{grid-template-columns:1fr;
    gap:clamp(48px,8vw,72px);}
  /* the centre hairline no longer applies once stacked */
  .audience__divider{display:none;}
  /* horizontal hairline sits in the gap above the second column */
  .audience__col--right{padding-top:clamp(48px,8vw,72px);
    border-top:var(--hair) solid var(--bone-hair);}
  .audience__plate{aspect-ratio:16/9;}
}
@media (max-width:640px){
  .audience__ghost{display:none;}
  .audience__col-btn{align-self:stretch;justify-content:space-between;}
}

/* — Reduced motion — */
@media (prefers-reduced-motion:reduce){
  .audience__plate-drift{animation:none;}
}

/* ============================================================
   ELEMENTOR COMPATIBILITY — Section 07 (audience)
   ------------------------------------------------------------
   The section is rebuilt as native Elementor content
   (decision 0003). Elementor wraps every widget in an
   .elementor-element div and adds e-con/e-flex classes to
   containers. The design-system classes (dc-*, audience__*)
   sit on those Elementor wrappers via the CSS Classes control.
   This block bridges the two so the rules above style the
   Elementor structure unchanged, and re-creates the parts of
   audience.php that were DECORATION (contour, ghost word,
   vertical divider, plate fill/drift/ticks/code/caption) as
   pure CSS — decoration is never an editable widget.
   Scoped to .devco-site so it never touches WP admin.
   ============================================================ */

/* the section must host absolutely-positioned decoration */
.devco-site #audience.audience{position:relative;}

/* contour backdrop — ported from perthdev_contour('audience__contour').
   Was an inline SVG; re-created as a subtle layered-gradient texture. */
.devco-site #audience.audience::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.07;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 64px,var(--bone) 64px 64.5px),
    repeating-linear-gradient(25deg,
      transparent 0 96px,var(--bone) 96px 96.5px);
  mask-image:radial-gradient(120% 90% at 70% 30%,#000 35%,transparent 80%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%,#000 35%,transparent 80%);
}
/* faint serif ghost word "For." — ported from .audience__ghost */
.devco-site #audience.audience::after{
  content:"For.";position:absolute;left:-1%;bottom:-8%;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(170px,24vw,440px);line-height:.85;color:var(--bone);
  opacity:.04;letter-spacing:-.04em;pointer-events:none;user-select:none;
  white-space:nowrap;z-index:0;
}

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

/* — Centred heading — */
.devco-site #audience .audience__head.e-con{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(24px,4vh,38px);
  margin-bottom:clamp(64px,10vh,112px);
}
/* eyebrow row keeps its inline-flex layout under Elementor */
.devco-site #audience .dc-eyebrow.e-con{
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.devco-site #audience .dc-eyebrow__rule{flex:none;}
.devco-site #audience .dc-eyebrow__idx>span,
.devco-site #audience .dc-eyebrow__label>span,
.devco-site #audience .dc-eyebrow__rule>span{display:inline;}
/* headline — heading widget's inner <h2> inherits display type */
.devco-site #audience .audience__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;
}
.devco-site #audience .audience__headline em{
  font-style:italic;color:var(--bone-soft);
}

/* — The split — grid must win over Elementor's e-flex — */
.devco-site #audience .audience__split.e-con{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,104px);align-items:start;position:relative;
}
/* vertical hairline divider — ported from <span class="audience__divider"> */
.devco-site #audience .audience__split.e-con::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  width:var(--hair);background:var(--bone-hair);
  transform:translateX(-50%);pointer-events:none;z-index:0;
}

/* — A column — each stacks its widgets vertically — */
.devco-site #audience .audience__col.e-con{
  display:flex;flex-direction:column;align-items:flex-start;
  position:relative;z-index:1;
}

/* chip + label — collapse the text-editor's inner <span> */
.devco-site #audience .audience__chip span,
.devco-site #audience .audience__label span{display:inline;}

/* framed plate — the Image widget carries `dc-plate audience__plate`.
   Re-add survey-document decoration (fill, drift glow, corner ticks,
   code label, caption) as CSS — decoration, never content. */
.devco-site #audience .dc-plate.audience__plate{
  position:relative;width:100%;aspect-ratio:16/10;
  margin-bottom:36px;overflow:hidden;
  border:var(--hair) solid var(--bone-hair);background:#221d18;
}
.devco-site #audience .dc-plate.audience__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.devco-site #audience .dc-plate.audience__plate .elementor-widget-container,
.devco-site #audience .dc-plate.audience__plate figure,
.devco-site #audience .dc-plate.audience__plate .elementor-image{
  height:100%;margin:0;
}
/* drift glow — ported from .audience__plate-drift */
.devco-site #audience .dc-plate.audience__plate::before{
  content:"";position:absolute;inset:-10%;mix-blend-mode:screen;
  pointer-events:none;z-index:2;
  background:radial-gradient(55% 45% at 58% 40%,
    rgba(168,90,58,.26),transparent 70%);
  animation:audienceDrift 17s var(--ease-inout) infinite alternate;
}
.devco-site #audience .audience__col--right .dc-plate.audience__plate::before{
  background:radial-gradient(50% 50% at 36% 64%,
    rgba(111,126,99,.24),transparent 66%);
  animation-duration:21s;
}
/* corner ticks — ported from the four .dc-plate__tick spans */
.devco-site #audience .dc-plate.audience__plate::after{
  content:"";position:absolute;inset:9px;pointer-events:none;z-index:3;
  border:var(--hair) solid var(--bone-faint);
  clip-path:polygon(
    0 0,14px 0,14px 1px,1px 1px,1px 14px,0 14px,
    0 100%,14px 100%,14px calc(100% - 1px),1px calc(100% - 1px),1px calc(100% - 14px),0 calc(100% - 14px),
    100% 100%,calc(100% - 14px) 100%,calc(100% - 14px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 14px),100% calc(100% - 14px),
    100% 0,calc(100% - 14px) 0,calc(100% - 14px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) 14px,100% 14px);
}

/* — Heading + body widgets push type onto their inner tags — */
.devco-site #audience .audience__col-heading .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;
}
.devco-site #audience .audience__col-text p{
  margin:0;font-size:inherit;line-height:inherit;color:inherit;
}

/* — Outline button — neutralise the widget-wrapper box, re-point the
   dc-btn look onto the inner <a> (mirrors the hero compat approach) — */
.devco-site #audience .audience__col-btn{margin-top:auto;}
.devco-site #audience .elementor-widget-button.dc-btn{
  border:0;padding:0;background:transparent;
}
.devco-site #audience .dc-btn .elementor-button{
  position:relative;display:inline-flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.13em;text-transform:uppercase;
  padding:18px 26px;
  border:var(--hair) solid currentColor;border-radius:0;
  background:transparent;color:currentColor;fill:currentColor;
  transition:background .42s var(--ease),color .42s var(--ease);
  min-height:0;
}
.devco-site #audience .dc-btn .elementor-button .elementor-button-content-wrapper{
  display:inline-flex;align-items:center;
}
.devco-site #audience.sec--dark .dc-btn .elementor-button:hover,
.devco-site #audience .sec--dark .dc-btn .elementor-button:hover{
  background:var(--bone);color:var(--ink);
}
/* drawn arrow after the label — ported from .dc-btn__arrow */
.devco-site #audience .dc-btn .elementor-button-text::after{
  content:"";display:inline-block;position:relative;
  width:20px;height:var(--hair);margin-left:16px;
  background:currentColor;vertical-align:middle;
  transition:transform .42s var(--ease);
}
.devco-site #audience .dc-btn .elementor-button:hover .elementor-button-text::after{
  transform:translateX(5px);
}

/* — Responsive — columns stack, the centre hairline drops, a
     horizontal rule sits above the second column (mirrors audience.css) — */
@media (max-width:860px){
  .devco-site #audience .audience__split.e-con{
    grid-template-columns:1fr;gap:clamp(48px,8vw,72px);
  }
  .devco-site #audience .audience__split.e-con::before{display:none;}
  .devco-site #audience .audience__col--right.e-con{
    padding-top:clamp(48px,8vw,72px);
    border-top:var(--hair) solid var(--bone-hair);
  }
  .devco-site #audience .dc-plate.audience__plate{aspect-ratio:16/9;}
}
@media (max-width:640px){
  .devco-site #audience.audience::after{display:none;}
  .devco-site #audience .audience__col-btn .elementor-button{
    align-self:stretch;justify-content:space-between;width:100%;
  }
}