/* How We Work page. Built with nested Elementor containers; layout targets #id > .e-con-inner.
   Loaded only on the How We Work page by orr-editorial.php. Tokens from editorial.css.
   NOTE: MCP containers ship with flex_align_items:center, so we force left alignment. */

/* MCP containers ship with flex_align_items:center - force full-width, left-aligned content. */
#hww-hero > .e-con-inner, #hww-body .e-con-inner{ align-items:stretch !important; text-align:left !important; }

/* hero */
#hww-hero > .e-con-inner{ max-width:var(--content-max); margin-inline:auto; padding: clamp(20px,2.6vw,40px) var(--pad-x-right) clamp(20px,3vw,40px) var(--pad-x-left); }
#hww-hero div.elementor-heading-title{ display:inline-flex; align-items:center; gap:16px; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 20px; }
#hww-hero div.elementor-heading-title::before{ content:""; width:28px; height:1px; background:currentColor; }
#hww-hero h1.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(48px,7vw,104px); line-height:.98; letter-spacing:-.025em; color:var(--c-primary); margin:0; font-variation-settings:"opsz" 144; }
#hww-hero .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:clamp(19px,1.7vw,23px); line-height:1.5; color:var(--c-secondary); max-width:56ch; margin-top:26px; }
#hww-hero h1.elementor-heading-title .hl{ display:inline; background:linear-gradient(var(--c-ochre),var(--c-ochre)) left 82% / 0% 0.46em no-repeat; padding:0 0.04em; animation:orr-hl-draw .85s .4s ease forwards; }

/* 2-col: sticky rail | service sections */
#hww > .e-con-inner{ max-width:var(--content-max); margin-inline:auto; padding: clamp(24px,4vw,48px) var(--pad-x-right) var(--space-section) var(--pad-x-left); display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start; }
#hww-rail{ position:sticky; top:100px; align-self:start; }
.hww-rail{ position:relative; padding-left:20px; }
.hww-rail::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--c-rule); }
.hww-rail a{ display:block; position:relative; font-family:var(--ff-eyebrow); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--c-muted); text-decoration:none; padding:11px 0; transition:color .2s ease; }
.hww-rail a::before{ content:""; position:absolute; left:-20px; top:16px; width:9px; height:9px; border-radius:50%; background:var(--c-paper); border:2px solid var(--c-rule); transition:.2s ease; }
.hww-rail a.is-active{ color:var(--c-primary); }
.hww-rail a.is-active::before{ border-color:var(--c-ochre); background:var(--c-ochre); }

/* service sections (container border/padding by class; typography by #hww-body id for specificity) */
.hww-service{ border-top:1px solid var(--c-rule); padding:clamp(44px,5vw,72px) 0; }
#hww-body > .e-con-inner > .hww-service:first-child{ border-top:none; padding-top:0; }
/* service icons (same masked SVG set as the Home service tiles) */
/* service icon sits inline beside the title (not above it) */
#s-research h2.elementor-heading-title, #s-evaluation h2.elementor-heading-title, #s-facilitation h2.elementor-heading-title, #s-coproduction h2.elementor-heading-title, #s-training h2.elementor-heading-title{ display:flex; align-items:center; gap:16px; }
#s-research h2.elementor-heading-title::before, #s-evaluation h2.elementor-heading-title::before, #s-facilitation h2.elementor-heading-title::before, #s-coproduction h2.elementor-heading-title::before, #s-training h2.elementor-heading-title::before{ content:""; flex:0 0 auto; width:40px; height:40px; background-color:var(--c-primary); -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
#s-research h2.elementor-heading-title::before{ -webkit-mask-image:var(--ic-research); mask-image:var(--ic-research); }
#s-evaluation h2.elementor-heading-title::before{ -webkit-mask-image:var(--ic-evaluation); mask-image:var(--ic-evaluation); }
#s-facilitation h2.elementor-heading-title::before{ -webkit-mask-image:var(--ic-facilitation); mask-image:var(--ic-facilitation); }
#s-coproduction h2.elementor-heading-title::before{ -webkit-mask-image:var(--ic-coproduction); mask-image:var(--ic-coproduction); }
#s-training h2.elementor-heading-title::before{ -webkit-mask-image:var(--ic-training); mask-image:var(--ic-training); }
#hww-body div.elementor-heading-title{ font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 16px; }
#hww-body h2.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(34px,4.4vw,60px); line-height:1.02; letter-spacing:-.022em; color:var(--c-primary); margin:0; font-variation-settings:"opsz" 96; }
#hww-body .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:20px; line-height:1.55; color:var(--c-secondary); max-width:none; margin-top:18px; }

/* project list with descriptions (shortcode style="list") */
.service__work{ margin:32px 0 0; }
.service__work a{ display:block; text-decoration:none; padding:20px 0; border-top:1px solid var(--c-rule); color:var(--c-primary); }
.service__work a:last-child{ border-bottom:1px solid var(--c-rule); }
.service__work a:hover .t{ color:var(--c-accent); }
.service__work .t{ display:block; font-family:var(--ff-heading); font-weight:500; font-size:22px; line-height:1.15; transition:color .2s ease; }
.service__work .s{ display:block; font-family:var(--ff-body); font-size:16px; line-height:1.5; color:var(--c-secondary); margin-top:7px; max-width:62ch; }

/* "What We Bring" underpinning section */
#hww-underpin{ border-top:2px solid var(--c-secondary); margin-top:clamp(44px,5vw,72px); padding-top:clamp(40px,5vw,56px); }
#hww-underpin .vals{ list-style:none; margin:22px 0 0; padding:0; }
#hww-underpin .vals li{ padding:22px 0; border-top:1px solid var(--c-rule); font-family:var(--ff-body); font-size:17px; line-height:1.6; color:var(--c-secondary); max-width:62ch; }
#hww-underpin .vals strong{ display:block; font-family:var(--ff-heading); font-weight:500; font-size:clamp(20px,2.2vw,26px); color:var(--c-primary); margin-bottom:6px; }

/* "All X projects" arrow link (not a filled button) */
#hww-body .elementor-widget-button{ margin-top:34px; }
#hww-body .elementor-button{ background-color:transparent; background-image:none; color:var(--c-primary); border:none; border-bottom:2px solid var(--c-ochre); border-radius:0; box-shadow:none; font-family:var(--ff-eyebrow); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:0 0 10px; fill:var(--c-primary); }
#hww-body .elementor-button .elementor-button-content-wrapper{ display:inline-flex; align-items:center; }
#hww-body .elementor-button .elementor-button-content-wrapper::after{ content:"\2192"; margin-left:14px; color:var(--c-ochre); font-family:var(--ff-heading); font-style:italic; font-size:20px; }
#hww-body .elementor-button:hover{ background-color:transparent; color:var(--c-accent); }

@media(max-width:900px){
	#hww > .e-con-inner{ grid-template-columns:1fr; gap:8px; }
	#hww-rail{ position:static; }
	.hww-rail{ display:flex; flex-wrap:wrap; gap:6px 18px; padding-left:0; border-bottom:1px solid var(--c-rule); padding-bottom:14px; margin-bottom:8px; }
	.hww-rail::before{ display:none; }
	.hww-rail a{ padding:6px 0; }
	.hww-rail a::before{ display:none; }
}