/* About page (Open Routes Research) - rich, fully-editable layout built with nested Elementor
   containers + individual widgets. Loaded only on the About page by orr-editorial.php.
   Layout targets Elementor's .e-con-inner wrapper. Design tokens (--c-*, --ff-*, spacing)
   come from editorial.css. */

/* ===== HERO ===== */
#hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--c-rule); }
#hero-inner{ padding: clamp(14px,1.8vw,30px) var(--pad-x-right) clamp(44px,6vw,92px) var(--pad-x-left); }
#hero-inner > .e-con-inner{ max-width:var(--content-max); width:100%; margin-inline:auto; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,6vw,96px); align-items:center; }
#hero-inner > .e-con-inner > *{ position:relative; z-index:2; min-width:0; }
#hero div.elementor-heading-title{ display:inline-flex; align-items:center; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 20px; }
#hero div.elementor-heading-title::before{ content:""; width:28px; height:1px; background:currentColor; margin-right:16px; }
#hero .hero__title{ margin:0; }
#hero .elementor-widget-text-editor{ margin:0; }
#hero .hero__intro{ margin-top:0; }
#hero .elementor-widget-divider{ margin-top:14px; padding:0; }
#hero .elementor-widget-divider + .elementor-widget-text-editor{ margin-top:14px; }
#hero .elementor-widget-button{ margin-top:14px; }
#hero .elementor-widget-button .elementor-button{ background:var(--c-accent); color:#fff; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:15px 26px; border:none; border-radius:2px; transition:background .25s ease; }
#hero .elementor-widget-button .elementor-button:hover{ background:var(--c-primary); }
/* left-align the hero column (eyebrow, intro, button all line up with the title) */
.elementor-element-cdbe505 > .e-con-inner{ align-items:flex-start !important; }
#hero .hero__title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(42px,5.2vw,82px); line-height:0.98; letter-spacing:-0.025em; color:var(--c-primary); margin:0; font-variation-settings:"opsz" 144; }
/* About hero uses the .hero__title .hl::before block highlight (animated in editorial.css);
   drop the redundant gradient so only the block shows and whooshes in. */
#hero .hero__title .hl{ display:inline-block; background:none; padding:0 0.04em; }
#hero .hero__intro{ font-family:var(--ff-body); font-size:clamp(18px,1.4vw,22px); line-height:1.5; color:var(--c-secondary); margin:32px 0 0; max-width:52ch; }
#hero .elementor-widget-divider{ margin-top:36px; }
#hero .elementor-widget-divider .elementor-divider{ justify-content:flex-start; }
#hero .elementor-widget-image{ position:relative; }
#hero .elementor-widget-image::before{ content:""; position:absolute; top:24px; left:24px; width:100%; aspect-ratio:4/5; background:var(--c-ochre); z-index:0; }
#hero .elementor-widget-image img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--c-light); position:relative; z-index:1; }

/* ===== shared section frame ===== */
#mission > .e-con-inner,#history > .e-con-inner,#approach > .e-con-inner,#credentials > .e-con-inner,#about-sohail > .e-con-inner,#values > .e-con-inner,#work-together > .e-con-inner{ max-width:var(--content-max); width:100%; margin-inline:auto; padding: var(--space-section) var(--pad-x-right) var(--space-section) var(--pad-x-left); position:relative; z-index:2; }
#mission{ background:var(--c-accent); }
#history{ background:var(--c-lighter); }
#about-sohail{ background:var(--c-lighter); }
#work-together{ background:var(--c-accent); }
/* divider line separating Our Values from The Wider Team above it */
#values > .e-con-inner{ border-top:1px solid var(--c-rule); }

/* eyebrow (div) with number + rule */
#mission div.elementor-heading-title,#history div.elementor-heading-title,#approach div.elementor-heading-title,#credentials div.elementor-heading-title,#about-sohail div.elementor-heading-title,#values div.elementor-heading-title,#work-together div.elementor-heading-title{ display:inline-flex; align-items:center; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 32px; }
/* leading rule/dash only (section numbers removed) */
#mission div.elementor-heading-title::before,#history div.elementor-heading-title::before,#approach div.elementor-heading-title::before,#credentials div.elementor-heading-title::before,#about-sohail div.elementor-heading-title::before,#values div.elementor-heading-title::before,#work-together div.elementor-heading-title::before{ content:""; width:28px; height:1px; background:currentColor; margin-right:16px; }
#mission div.elementor-heading-title,#work-together div.elementor-heading-title{ color:var(--c-ochre); }
/* Left-align the eyebrow with its (left-aligned) title on non-centred sections. The
   eyebrow WIDGET is otherwise shrunk + centred by the MCP container's align-items:center;
   forcing the eyebrow's container to align-items:flex-start pins it to the column's left
   edge (the wide title widget already fills the column, so it does not move). Values is
   left centred. */
.elementor-element-3fe29af > .e-con-inner,   /* approach (left col) */
.elementor-element-38a6524 > .e-con-inner,   /* history (text col) */
.elementor-element-9584755 > .e-con-inner,   /* credentials (head) */
.elementor-element-38e3305 > .e-con-inner,   /* bio (text col) */
.elementor-element-ea9677b > .e-con-inner{   /* work-together */
  align-items:flex-start !important;
}
/* Mission (#mission) is a centred feature statement: eyebrow + title both centred. */
.elementor-element-d77814a > .e-con-inner{ align-items:center !important; }
#mission h2.elementor-heading-title{ margin-inline:auto; text-align:center; }

/* section titles (h2) */
#history h2.elementor-heading-title,#approach h2.elementor-heading-title,#credentials h2.elementor-heading-title,#about-sohail h2.elementor-heading-title,#values h2.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(40px,5.2vw,72px); line-height:1.04; letter-spacing:-0.022em; color:var(--c-primary); margin:0; text-wrap:balance; font-variation-settings:"opsz" 96; }

/* body */
#mission .elementor-widget-text-editor,#history .elementor-widget-text-editor,#approach .elementor-widget-text-editor,#credentials .elementor-widget-text-editor,#about-sohail .elementor-widget-text-editor,#values .elementor-widget-text-editor,#work-together .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--c-secondary); }
#mission .elementor-widget-text-editor{ color:rgba(255,255,255,0.88); }
#work-together .elementor-widget-text-editor{ color:rgba(255,255,255,0.82); }
#mission .elementor-widget-text-editor strong{ color:var(--c-ochre); font-family:var(--ff-heading); font-weight:500; }
#about-sohail .elementor-widget-text-editor i,#about-sohail .elementor-widget-text-editor em,#credentials .elementor-widget-text-editor em{ font-family:var(--ff-heading); font-style:italic; color:var(--c-accent); }

/* ===== MISSION ===== */
#mission h2.elementor-heading-title{ font-family:var(--ff-heading); font-style:italic; font-weight:400; font-size:clamp(40px,5.6vw,88px); line-height:1.05; letter-spacing:-0.018em; color:var(--c-white); margin:24px 0 0; max-width:22ch; text-wrap:balance; font-variation-settings:"opsz" 144; }
#mission-body{ margin-top:clamp(48px,6vw,80px); }
#mission-body > .e-con-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); }

/* ===== HISTORY (2-col: image left, text right) ===== */
#history > .e-con-inner{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,96px); align-items:center; }
#history-text h2.elementor-heading-title{ margin:0 0 28px; }
#history .elementor-widget-text-editor{ font-size:19px; line-height:1.7; margin-bottom:20px; }
#history .elementor-widget-image{ position:relative; }
#history .elementor-widget-image::before{ content:""; position:absolute; top:24px; left:24px; width:100%; aspect-ratio:4/5; background:var(--c-ochre); z-index:0; }
#history .elementor-widget-image img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--c-light); display:block; position:relative; z-index:1; }

/* ===== APPROACH (2-col; items number|text) ===== */
#approach > .e-con-inner{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(40px,7vw,112px); align-items:start; }
#approach-left h2.elementor-heading-title{ margin:0 0 28px; }
#approach-left .elementor-widget-text-editor{ font-size:20px; line-height:1.55; }
.appitem{ padding:40px 0; border-top:1px solid var(--c-rule); }
.appitem:first-child{ border-top:2px solid var(--c-secondary); }
.appitem:last-child{ border-bottom:1px solid var(--c-rule); }
.appitem > .e-con-inner{ display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:24px; align-items:start; }
.appitem > .e-con-inner > .elementor-widget-heading:first-child{ grid-row:1 / span 2; }
#approach span.elementor-heading-title{ font-family:var(--ff-heading); font-style:italic; font-weight:500; font-size:48px; line-height:1; color:var(--c-ochre); margin:0; display:block; font-variation-settings:"opsz" 96; }
#approach h3.elementor-heading-title{ font-family:var(--ff-eyebrow); font-weight:600; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 12px; }

/* ===== CREDENTIALS (logo grid) ===== */
#cred-head{ margin-bottom:64px; }
#cred-head > .e-con-inner{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,6vw,96px); align-items:end; }
#credentials .credentials__lede{ font-family:var(--ff-body); font-size:18px; line-height:1.6; color:var(--c-secondary); margin:0; }
#credentials .credentials__outro{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--c-secondary); margin:56px 0 0; max-width:720px; }
#logo-grid > .e-con-inner{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--c-secondary); border-left:1px solid var(--c-rule); }
#logo-grid .elementor-widget-image{ border-right:1px solid var(--c-rule); border-bottom:1px solid var(--c-rule); padding:26px 20px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:132px; }
#logo-grid .elementor-widget-image img{ width:auto; max-width:120px; height:48px; object-fit:contain; opacity:0.85; }
#logo-grid figure{ margin:0; }
#logo-grid figcaption{ font-family:var(--ff-eyebrow); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--c-muted); text-align:center; line-height:1.3; }

/* ===== BIO (yellow box sized to image only) ===== */
#about-sohail > .e-con-inner{ display:grid; grid-template-columns:minmax(280px,5fr) minmax(0,7fr); gap:clamp(40px,7vw,120px); align-items:start; }
#bio-portrait .elementor-widget-image{ position:relative; }
#bio-portrait .elementor-widget-image::before{ content:""; position:absolute; top:26px; left:26px; width:100%; height:100%; background:var(--c-ochre); z-index:0; }
#bio-portrait .elementor-widget-image img{ position:relative; z-index:1; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--c-light); }
#bio-portrait .bio__caption{ position:relative; z-index:1; font-family:var(--ff-heading); font-style:italic; font-size:15px; color:var(--c-accent); margin:40px 0 0; padding-left:20px; border-left:2px solid var(--c-ochre); max-width:280px; }
#bio-text h2.elementor-heading-title{ margin:0 0 32px; }
#bio-text .elementor-widget-text-editor{ font-size:18px; line-height:1.75; margin-bottom:20px; }

/* ===== VALUES (2x2) ===== */
#values h2.elementor-heading-title{ margin:0 0 16px; }
#values > .e-con-inner > .elementor-widget-text-editor{ font-size:18px; color:var(--c-secondary); max-width:44ch; margin-bottom:clamp(32px,4vw,52px); }
#values-grid > .e-con-inner{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(48px,6vw,96px); row-gap:clamp(32px,4vw,52px); }
.valcard{ padding-top:26px; border-top:2px solid var(--c-secondary); }
#values span.elementor-heading-title{ font-family:var(--ff-heading); font-style:italic; font-weight:500; font-size:clamp(44px,5.2vw,72px); line-height:1; color:var(--c-ochre); margin:0 0 20px; display:block; font-variation-settings:"opsz" 96; }
#values h3.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(24px,2.6vw,32px); line-height:1.15; letter-spacing:-0.015em; color:var(--c-primary); margin:0 0 18px; }
.valcard .elementor-widget-text-editor{ font-size:17px; line-height:1.65; }

/* ===== CTA (blue, 2-col, arrow) ===== */
#cta-grid{ margin-top:8px; }
#cta-grid > .e-con-inner{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,7vw,120px); align-items:start; max-width:none; margin-inline:0; }
#work-together h2.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(48px,6.4vw,104px); line-height:0.98; letter-spacing:-0.026em; color:var(--c-white); margin:0; text-wrap:balance; font-variation-settings:"opsz" 144; }
#cta-right .elementor-widget-text-editor{ margin-bottom:32px; }
#work-together .elementor-button{ background:transparent; color:var(--c-white); border:none; border-bottom:2px solid var(--c-ochre); border-radius:0; font-family:var(--ff-eyebrow); font-size:13px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; padding:0 0 14px; }
#work-together .elementor-button .elementor-button-content-wrapper{ display:inline-flex; align-items:center; }
#work-together .elementor-button .elementor-button-content-wrapper::after{ content:"\2192"; margin-left:20px; color:var(--c-ochre); font-family:var(--ff-heading); font-style:italic; font-size:22px; line-height:1; }

/* ===== COLLABORATORS (the wider team - [orr_collaborators] card grid) ===== */
#collaborators > .e-con-inner{ max-width:var(--content-max); width:100%; margin-inline:auto; padding: var(--space-section) var(--pad-x-right) var(--space-section) var(--pad-x-left); align-items:flex-start !important; text-align:left !important; }
#collaborators div.elementor-heading-title{ display:inline-flex; align-items:center; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 20px; }
#collaborators div.elementor-heading-title::before{ content:""; width:28px; height:1px; background:currentColor; margin-right:16px; }
#collaborators h2.elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(40px,5.2vw,72px); line-height:1.04; letter-spacing:-0.022em; color:var(--c-primary); margin:0; text-wrap:balance; font-variation-settings:"opsz" 96; }
#collaborators .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--c-secondary); margin:22px 0 0; max-width:60ch; }
#collaborators .elementor-widget-shortcode{ margin-top:clamp(36px,4vw,56px); width:100%; }
.collab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:clamp(30px,3.2vw,48px) clamp(28px,3vw,44px); }
.collab{ display:flex; flex-direction:column; }
.collab__photo{ position:relative; display:block; width:100%; aspect-ratio:1/1; background:var(--c-light) center/cover no-repeat; box-shadow:-8px 8px 0 0 var(--c-ochre); }
.collab__photo.ph > span{ position:absolute; left:12px; bottom:10px; font-family:var(--ff-eyebrow); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.collab__name{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(21px,2vw,25px); line-height:1.15; color:var(--c-primary); margin:22px 0 0; }
.collab__role{ font-family:var(--ff-eyebrow); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); margin:8px 0 0; }
.collab__bio{ font-family:var(--ff-body); font-size:15px; line-height:1.6; color:var(--c-secondary); margin:12px 0 0; }
.collab__link{ font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); text-decoration:none; border-bottom:2px solid var(--c-ochre); padding-bottom:3px; margin:16px 0 0; align-self:flex-start; }
.collab__link:hover{ color:var(--c-accent); }

/* ===== responsive ===== */
@media (max-width:900px){
  #hero-inner > .e-con-inner,#history > .e-con-inner,#approach > .e-con-inner,#about-sohail > .e-con-inner,#cred-head > .e-con-inner,#cta-grid > .e-con-inner,#mission-body > .e-con-inner{ grid-template-columns:1fr; gap:40px; }
  #values-grid > .e-con-inner{ grid-template-columns:1fr; }
  #logo-grid > .e-con-inner{ grid-template-columns:repeat(2,1fr); }
}