/* ============================================================
   DevCo · Section 04 — Our Role (What DevCo Does)
   Light ground. Two-column head, three alternating editorial
   rows (copy + survey plate), centred closing statement.
   Round 3 — pinned scrub removed; the three roles read as
   clean, self-contained editorial rows in normal flow. Each
   row is one composed image+text unit. Rigour and proof for
   an investor; clarity for a home-seeker.
   ============================================================ */

/* — Head — eyebrow left, headline + sub right — */
.role__head{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(40px,5vw,64px);
  margin-bottom:clamp(64px,9vh,104px);
}
.role__headline{
  margin:0 0 32px;
  max-width:20ch;
  line-height:1.0;
}
.role__headline em{font-style:italic;}
.role__sub{max-width:560px;margin:0;}

/* — Rows — alternating editorial layout — */
.role__rows{display:flex;flex-direction:column;}
.role__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:center;
  padding-top:clamp(48px,8vh,84px);
  padding-bottom:clamp(48px,8vh,84px);
  border-top:var(--hair) solid var(--ink-hair);
}
.role__row:last-child{
  border-bottom:var(--hair) solid var(--ink-hair);
}

/* — Copy column — */
.role__lead{
  display:flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:clamp(20px,3vh,32px);
}
.role__num{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(72px,8vw,120px);
  line-height:.85;
  letter-spacing:-.04em;
  color:var(--ink);
}
.role__label{color:var(--accent);}
.role__h{
  margin:0 0 22px;
  max-width:14ch;
  line-height:1.1;
}
.role__body{max-width:480px;}

/* — Plate column — survey-document framed art — */
.role__plate-wrap{position:relative;}
.role__plate{
  aspect-ratio:4/3;
  width:100%;
  background:#1F1B16;
}
.role__plate--plan{background:#1A1714;}
.role__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* the survey plates carry their own dark ground — keep the
   placeholder fill underneath, but let SVG art read on top */
.role__plate--topo .dc-plate__fill,
.role__plate--plan .dc-plate__fill{
  background:transparent;
}
.role__plate--topo .dc-plate__fill::before,
.role__plate--plan .dc-plate__fill::before{display:none;}

/* SVG art tones — drawn line art on the dark plate ground */
.role__contours{opacity:.45;}
.role__lot{opacity:.85;}
.role__axis{opacity:.5;}
.role__grid{opacity:.18;}
.role__parcels{opacity:.9;}
.role__service{opacity:.85;}
.role__legend{opacity:.85;}

/* corner-tick + caption colours stay bone on the dark plates */
.role__plate--topo .dc-plate__tick,
.role__plate--plan .dc-plate__tick{border-color:var(--bone-faint);}
.role__plate--topo .dc-plate__code,
.role__plate--plan .dc-plate__code,
.role__plate--topo .dc-plate__caption,
.role__plate--plan .dc-plate__caption{color:var(--bone-faint);}

/* corner ticks for the standard row-03 plate sit on its own dark fill */
.role__plate .dc-plate__tick{border-color:var(--bone-faint);}
.role__plate .dc-plate__code,
.role__plate .dc-plate__caption{color:var(--bone-faint);}

/* small status tag, top-right of each plate */
.role__tag{
  position:absolute;
  top:14px;
  right:18px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.role__tag--warm{color:var(--rust);}
.role__tag--cool{color:var(--sage);}

/* — Closing line — hairline then italic display statement — */
.role__close{
  margin-top:clamp(72px,10vh,116px);
  text-align:center;
}
.role__close-hair{
  display:inline-block;
  width:var(--hair);
  height:56px;
  background:var(--ink-hair);
  margin-bottom:28px;
}
.role__close-line{
  margin:0 auto;
  max-width:24ch;
  font-style:italic;
  line-height:1.2;
  letter-spacing:-.012em;
}
.role__close-line em{font-style:italic;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .role__head{
    grid-template-columns:1fr;
    gap:32px;
  }
  .role__row,
  .role__row--flip{
    grid-template-columns:1fr;
    gap:36px;
  }
  /* on stack, copy always reads before its plate */
  .role__row--flip .role__copy{order:1;}
  .role__row--flip .role__plate-wrap{order:2;}
}
@media (max-width:640px){
  .role__lead{gap:14px;}
  .role__num{font-size:clamp(60px,16vw,80px);}
  .role__tag{right:14px;}
}

@media (prefers-reduced-motion:reduce){
  .role__contours [data-draw]{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
  }
}

/* ============================================================
   ELEMENTOR COMPAT — Section 04 (decision 0003 rebuild)
   ------------------------------------------------------------
   Bridges the native-Elementor build of this section to the
   theme CSS above. Elementor wraps every widget in its own
   .elementor-element div and adds e-con/e-flex to containers;
   these rules make the design-system layout the single source
   of truth. Decoration that lived as markup in role.php (the
   survey-plate SVG art, corner ticks, code/caption labels, the
   closing hairline) is re-created here as pure CSS keyed to the
   section classes — decoration is never rebuilt as widgets.
   Scoped to .devco-site so it only ever touches DevCo pages.
   ============================================================ */

/* — Elementor container resets — */
.devco-site #role .elementor-element.e-con,
.devco-site #role .elementor-element.e-con-full,
.devco-site #role .elementor-element > .e-con-inner{
  --container-max-width:none;
  --container-default-padding-block-start:0;
  --container-default-padding-block-end:0;
  --container-default-padding-inline-start:0;
  --container-default-padding-inline-end:0;
  --gap:0px;
  width:100%;
}
.devco-site #role .elementor-widget{margin:0;}
.devco-site #role .elementor-widget:not(:last-child){margin-bottom:0;}

/* — Head — restore the two-column grid over Elementor's flex — */
.devco-site #role .role__head.e-con{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(40px,5vw,64px);
  align-items:start;
  margin-bottom:clamp(64px,9vh,104px);
}
.devco-site #role .role__head-eyebrow.e-con,
.devco-site #role .role__head-copy.e-con{
  display:flex;flex-direction:column;
}

/* — Eyebrow — flex row; collapse text-editor <span> wrappers — */
.devco-site #role .dc-eyebrow.e-con{
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.devco-site #role .dc-eyebrow__rule{flex:none;}
.devco-site #role .dc-eyebrow__idx p,
.devco-site #role .dc-eyebrow__idx span,
.devco-site #role .dc-eyebrow__label p,
.devco-site #role .dc-eyebrow__label span,
.devco-site #role .dc-eyebrow__rule p,
.devco-site #role .dc-eyebrow__rule span{display:inline;margin:0;}

/* — Headline — push display type onto the inner <h2> — */
.devco-site #role .role__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:inherit;margin:0;
}
.devco-site #role .role__headline em{font-style:italic;}
/* — Sub paragraph — type lands on the wrapper, push to <p> — */
.devco-site #role .role__sub p{
  font-size:var(--fs-lead);line-height:1.55;margin:0;color:inherit;
}

/* — Rows — restore the alternating two-column grid.
   Round 3: each row is a self-contained editorial unit in
   NORMAL FLOW. align-items:center balances the copy block
   against its plate so neither floats; generous but bounded
   row padding gives clean rhythm with no empty stretch. — */
.devco-site #role .role__rows.e-con{display:flex;flex-direction:column;}
.devco-site #role .role__row.e-con{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:center;
  padding-top:clamp(48px,8vh,84px);
  padding-bottom:clamp(48px,8vh,84px);
  border-top:var(--hair) solid var(--ink-hair);
}
.devco-site #role .role__row.e-con:last-child{
  border-bottom:var(--hair) solid var(--ink-hair);
}
.devco-site #role .role__copy.e-con{display:flex;flex-direction:column;}

/* — Copy column — lead row, number, label — */
.devco-site #role .role__lead.e-con{
  display:flex;align-items:flex-end;gap:18px;
  margin-bottom:clamp(20px,3vh,32px);
}
.devco-site #role .role__num{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(72px,8vw,120px);line-height:.85;
  letter-spacing:-.04em;color:var(--ink);
}
.devco-site #role .role__num p,
.devco-site #role .role__num span{display:inline;margin:0;font:inherit;
  letter-spacing:inherit;line-height:inherit;color:inherit;}
.devco-site #role .role__label p,
.devco-site #role .role__label span{display:inline;margin:0;}
.devco-site #role .role__label{color:var(--accent);}
.devco-site #role .role__h .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;
  color:inherit;margin:0;
}
.devco-site #role .role__body p{
  font-size:var(--fs-body);line-height:var(--lh-body);
  margin:0;color:inherit;
}

/* — Plate column — the survey plate is now an Image widget.
   Re-create the survey-document decoration (corner ticks, code
   label, status tag, caption) as CSS on the plate wrapper.
   A frosted-glass code plate (top-left) and caption (bottom)
   give the survey metadata the Apple-OS feel. — */
.devco-site #role .role__plate-wrap.e-con{display:block;position:relative;}
.devco-site #role .dc-plate.role__plate{
  position:relative;aspect-ratio:4/3;width:100%;
  overflow:hidden;border:var(--hair) solid var(--ink-hair);
  background:#1F1B16;
}
.devco-site #role .role__plate--plan{background:#1A1714;}
.devco-site #role .dc-plate.role__plate img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.devco-site #role .dc-plate.role__plate .elementor-widget-container,
.devco-site #role .dc-plate.role__plate figure,
.devco-site #role .dc-plate.role__plate .elementor-image{
  height:100%;margin:0;
}
/* survey line-grid texture on the dark plate ground */
.devco-site #role .dc-plate.role__plate::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--bone-hair) 0 var(--hair),transparent var(--hair) 38px),
    repeating-linear-gradient(90deg,var(--bone-hair) 0 var(--hair),transparent var(--hair) 38px);
  opacity:.5;
}
.devco-site #role .role__plate--topo .dc-plate.role__plate::before{
  background:
    radial-gradient(120% 90% at 64% 30%,transparent 30%,rgba(168,90,58,.16) 31% 32%,transparent 33%),
    radial-gradient(95% 72% at 64% 30%,transparent 38%,rgba(168,90,58,.12) 39% 40%,transparent 41%),
    radial-gradient(72% 56% at 64% 30%,transparent 46%,rgba(168,90,58,.1) 47% 48%,transparent 49%),
    repeating-linear-gradient(0deg,var(--bone-hair) 0 var(--hair),transparent var(--hair) 44px);
  opacity:.7;
}
/* corner ticks — decoration */
.devco-site #role .dc-plate.role__plate .elementor-widget-container::before,
.devco-site #role .dc-plate.role__plate .elementor-widget-container::after{
  content:"";position:absolute;width:14px;height:14px;
  border:0 solid var(--bone-faint);pointer-events:none;z-index:3;
}
.devco-site #role .dc-plate.role__plate .elementor-widget-container::before{
  top:9px;left:9px;border-top-width:var(--hair);border-left-width:var(--hair);
}
.devco-site #role .dc-plate.role__plate .elementor-widget-container::after{
  bottom:9px;right:9px;border-bottom-width:var(--hair);border-right-width:var(--hair);
}
/* plate code label (top-left) — frosted-glass metadata chip — */
.devco-site #role .role__plate-wrap::before{
  position:absolute;top:14px;left:14px;z-index:4;
  padding:6px 10px;
  color:var(--bone);font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);letter-spacing:.12em;
  text-transform:uppercase;pointer-events:none;
  background:var(--glass-dark);
  border:var(--hair) solid var(--glass-dark-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  backdrop-filter:blur(var(--glass-blur)) saturate(125%);
}
/* plate caption (bottom) — frosted-glass metadata bar — */
.devco-site #role .role__plate-wrap::after{
  position:absolute;bottom:14px;left:14px;right:14px;z-index:4;
  padding:8px 12px;
  color:var(--bone-soft);font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);letter-spacing:.12em;
  text-transform:uppercase;pointer-events:none;
  background:var(--glass-dark);
  border:var(--hair) solid var(--glass-dark-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(125%);
  backdrop-filter:blur(var(--glass-blur)) saturate(125%);
}
.devco-site #role .role__plate-wrap--topo::before{content:"Plate 02 \00b7 Topographic Survey";}
.devco-site #role .role__plate-wrap--topo::after{content:"Bayswater Lot 14 \00b7 Contours \00b7 Draft";}
.devco-site #role .role__plate-wrap--plan::before{content:"Plate 03 \00b7 Civil Delivery";}
.devco-site #role .role__plate-wrap--plan::after{content:"Trunk Services \00b7 Subdivision Registration";}
/* row-03 standard plate — its own code/caption. The third row has
   no plate-wrap modifier class, so it is the plate-wrap that is
   neither --topo nor --plan. */
.devco-site #role .role__plate-wrap:not(.role__plate-wrap--topo):not(.role__plate-wrap--plan)::before{
  content:"Plate 04 \00b7 Build-Ready Lot";
}
.devco-site #role .role__plate-wrap:not(.role__plate-wrap--topo):not(.role__plate-wrap--plan)::after{
  content:"HALCO Packaging \00b7 Builder Match";
}

/* — Closing line — hairline rule then italic display statement —
   Round 3: the empty grey placeholder widget is removed from the
   markup; the closing hairline is now pure CSS. — */
.devco-site #role .role__close.e-con{
  display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(72px,10vh,116px);text-align:center;
}
.devco-site #role .role__close.e-con::before{
  content:"";display:block;
  width:var(--hair);height:56px;background:var(--ink-hair);
  margin-bottom:28px;
}
.devco-site #role .role__close-line{
  margin:0 auto;max-width:24ch;
}
.devco-site #role .role__close-line .elementor-heading-title{
  font:inherit;letter-spacing:-.012em;line-height:1.2;
  font-style:italic;color:inherit;margin:0;
}
.devco-site #role .role__close-line em{font-style:italic;}

/* — Responsive — mirror role.css's breakpoints for the Elementor tree — */
@media (max-width:960px){
  .devco-site #role .role__head.e-con{grid-template-columns:1fr;gap:32px;}
  .devco-site #role .role__row.e-con{grid-template-columns:1fr;gap:36px;}
  .devco-site #role .role__row--flip .role__copy{order:1;}
  .devco-site #role .role__row--flip .role__plate-wrap{order:2;}
}
@media (max-width:640px){
  .devco-site #role .role__lead.e-con{gap:14px;}
  .devco-site #role .role__num{font-size:clamp(60px,16vw,80px);}
}

/* ============================================================
   §04 — Round 3 note: the pinned scroll-scrubbed sequence is
   removed. The three role rows are normal-flow, self-contained
   editorial image+text units. Each composes in with an
   image+text entrance via the `dc-rv*` classes already on the
   markup. No `dc-pin` / `dc-pin__panel` hooks remain.
   ============================================================ */