/* Home page (Open Routes Research) - rich, editable layout built with nested Elementor
   containers + individual widgets. Loaded only on the front page by orr-editorial.php.
   Layout targets Elementor's .e-con-inner wrapper. Design tokens (--c-*, --ff-*, spacing)
   come from editorial.css. Card styles (.pcard/.pgrid) come from projects.css (the
   Featured section reuses the [orr_projects] shortcode). */

/* ===== shared: eyebrow (heading widget rendered as <div>) ===== */
#home-hero div.elementor-heading-title,
#reel div.elementor-heading-title,
#services div.elementor-heading-title,
#cred div.elementor-heading-title,
#featured div.elementor-heading-title,
#tst div.elementor-heading-title,
#aboutx div.elementor-heading-title,
#home-cta 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:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0;
}
#home-hero div.elementor-heading-title::before,
#reel div.elementor-heading-title::before,
#services div.elementor-heading-title::before,
#cred div.elementor-heading-title::before,
#featured div.elementor-heading-title::before,
#tst div.elementor-heading-title::before,
#aboutx div.elementor-heading-title::before,
#home-cta div.elementor-heading-title::before{
  content:""; width:28px; height:1px; background:currentColor; flex:0 0 auto;
}
/* ochre eyebrows on dark / accent-lead sections */
#reel div.elementor-heading-title,
#cred div.elementor-heading-title,
#tst div.elementor-heading-title,
#home-cta div.elementor-heading-title{ color:var(--c-ochre); }

/* ===== shared: section titles (heading widget as <h2>) ===== */
#services h2.elementor-heading-title,
#featured h2.elementor-heading-title,
#aboutx h2.elementor-heading-title{
  font-family:var(--ff-heading); font-weight:500; font-size:clamp(38px,5vw,68px);
  line-height:1.02; letter-spacing:-0.022em; color:var(--c-primary);
  margin:16px 0 0; text-wrap:balance; font-variation-settings:"opsz" 96;
}

/* ===== HERO ===== */
#home-hero{ border-bottom:1px solid var(--c-rule); }
#home-hero > .e-con-inner{
  max-width:var(--content-max); width:100%; margin-inline:auto;
  padding:clamp(20px,2.6vw,40px) var(--pad-x-right) clamp(40px,5vw,80px) var(--pad-x-left);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(40px,6vw,96px); align-items:center;
}
#hero-copy > .e-con-inner{ align-items:flex-start; text-align:left; }
#home-hero h1.elementor-heading-title{
  font-family:var(--ff-heading); font-weight:500; font-size:clamp(44px,5.8vw,88px);
  line-height:1; letter-spacing:-0.025em; color:var(--c-primary);
  margin:24px 0 0; font-variation-settings:"opsz" 144; text-wrap:balance;
}
#home-hero h1 .hl{
  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;
}
#home-hero .elementor-widget-text-editor{
  font-family:var(--ff-body); font-size:clamp(19px,1.6vw,23px); line-height:1.5;
  color:var(--c-secondary); margin:28px 0 0; max-width:48ch;
}
#hero-cta{ margin-top:36px; }
#hero-cta > .e-con-inner{ display:flex; flex-direction:row; flex-wrap:wrap; gap:18px; align-items:center; }
#home-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-radius:2px; border:none; transition:background .25s ease;
}
#home-hero .elementor-widget-button .elementor-button:hover{ background:var(--c-primary); }
/* second hero button = ghost */
#hero-cta .elementor-widget-button:nth-child(2) .elementor-button{
  background:transparent; color:var(--c-primary); border:1px solid var(--c-rule);
}
#hero-cta .elementor-widget-button:nth-child(2) .elementor-button:hover{
  background:transparent; border-color:var(--c-primary);
}
#home-hero .elementor-widget-image{ position:relative; }
#home-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; }
#home-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;
}
#home-hero .ph{ width:100%; aspect-ratio:4/5; }
#home-hero .elementor-widget-html{ width:100%; }

/* ===== LOGO REEL ===== */
#reel > .e-con-inner{
  max-width:var(--content-max); width:100%; margin-inline:auto;
  padding:clamp(44px,5vw,72px) var(--pad-x-right) clamp(44px,5vw,72px) var(--pad-x-left);
  align-items:stretch; text-align:left;
}
#reel div.elementor-heading-title{ margin-bottom:14px; }
#reel .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--c-secondary); max-width:72ch; margin:0 0 clamp(32px,4vw,48px); }
/* scrolling logo carousel (Elementor Image Carousel widget, editable gallery) */
#reel .elementor-image-carousel-wrapper{ position:relative; border-top:1px solid var(--c-rule); border-bottom:1px solid var(--c-rule); }
#reel .elementor-image-carousel-wrapper::before,
#reel .elementor-image-carousel-wrapper::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
#reel .elementor-image-carousel-wrapper::before{ left:0; background:linear-gradient(90deg,var(--c-paper),transparent); }
#reel .elementor-image-carousel-wrapper::after{ right:0; background:linear-gradient(270deg,var(--c-paper),transparent); }
#reel .elementor-image-carousel .swiper-slide{ display:flex; align-items:center; justify-content:center; padding-block:32px; }
#reel .elementor-image-carousel .swiper-slide figure{ width:100%; margin:0; }
#reel .elementor-image-carousel .swiper-slide img{ width:auto; max-width:150px; max-height:56px; margin-inline:auto; object-fit:contain; filter:none; opacity:.92; transition:opacity .2s ease; }
#reel .elementor-image-carousel .swiper-slide:hover img{ opacity:1; }

/* ===== SERVICES ===== */
#services{ background:var(--c-lighter); }
#services > .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:stretch; text-align:left;
}
#services-head{ margin-bottom:clamp(40px,5vw,64px); }
#services-head > .e-con-inner{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(32px,5vw,80px); align-items:end;
}
#services-head-l > .e-con-inner{ align-items:flex-start; text-align:left; }
#services-head .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:18px; line-height:1.55; color:var(--c-secondary); }
/* service tiles: #svc-grid container of 5 tile containers (#svc-research etc.), each =
   Heading (linked) + Text. Icon injected via ::before mask (per-tile id). The heading's
   link is expanded to a full-tile overlay so the whole card is clickable.
   (_css_classes on containers does not render via direct data, so we target by id/position.) */
#svc-grid > .e-con-inner{ display:flex; flex-direction:row !important; flex-wrap:wrap; justify-content:center; align-items:flex-start !important; gap:clamp(28px,3vw,48px) clamp(24px,2.4vw,40px); }
#svc-grid > .e-con-inner > .e-con{ flex:0 1 210px; max-width:230px; }
/* on desktop the 5 tiles sit on one line: equal-width, shrink to fit (wraps below 1080) */
@media (min-width:1080px){
  #svc-grid > .e-con-inner{ flex-wrap:nowrap; gap:clamp(20px,2.4vw,40px); }
  #svc-grid > .e-con-inner > .e-con{ flex:1 1 0; max-width:220px; }
}
#svc-grid > .e-con-inner > .e-con > .e-con-inner{ position:relative; display:flex; flex-direction:column; align-items:center !important; text-align:center !important; padding:12px 6px; transition:transform .2s ease; }
#svc-grid > .e-con-inner > .e-con > .e-con-inner::before{ content:""; width:42px; height:42px; margin-bottom:18px; background-color:var(--c-primary); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; transition:background-color .2s ease; }
#svc-research > .e-con-inner::before{ --ic:var(--ic-research); }
#svc-evaluation > .e-con-inner::before{ --ic:var(--ic-evaluation); }
#svc-facilitation > .e-con-inner::before{ --ic:var(--ic-facilitation); }
#svc-coproduction > .e-con-inner::before{ --ic:var(--ic-coproduction); }
#svc-training > .e-con-inner::before{ --ic:var(--ic-training); }
/* reserve two lines for the title so 1-line and 2-line titles keep their descriptions aligned */
#svc-grid .elementor-widget-heading .elementor-heading-title{ font-family:var(--ff-heading); font-weight:500; font-size:clamp(21px,2vw,25px); line-height:1.12; color:var(--c-primary); margin:0; min-height:2.24em; display:flex; align-items:center; justify-content:center; transition:color .2s ease; }
#svc-grid .elementor-widget-heading .elementor-heading-title a{ color:inherit; text-decoration:none; }
/* full-tile clickable overlay from the heading link */
#svc-grid .elementor-widget-heading .elementor-heading-title a::after{ content:""; position:absolute; inset:0; z-index:1; }
#svc-grid .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:15px; line-height:1.5; color:var(--c-secondary); margin:9px 0 0; max-width:28ch; }
#svc-grid > .e-con-inner > .e-con:hover > .e-con-inner{ transform:translateY(-3px); }
#svc-grid > .e-con-inner > .e-con:hover .elementor-heading-title{ color:var(--c-accent); }
#svc-grid > .e-con-inner > .e-con:hover > .e-con-inner::before{ background-color:var(--c-accent); }

/* credibility logo placeholder tiles */
.logo-ph{ display:flex; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--c-rule); border-radius:3px; background:var(--c-white); font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--c-muted); text-align:center; }

/* ===== CREDIBILITY (logos left + centred text block that reaches the middle) ===== */
#cred > .e-con-inner{
  max-width:var(--content-max); width:100%; margin-inline:auto;
  padding:var(--space-section) var(--pad-x-right) clamp(28px,3.5vw,52px) var(--pad-x-left);
  display:grid; grid-template-columns:auto minmax(0,600px); justify-content:center; column-gap:clamp(72px,8vw,150px); row-gap:0; align-items:center;
}
/* the 3-logo column (now a container of editable Image widgets) stretches to the full
   height of the text block and distributes the 3 logos, so the top logo lines up with the
   eyebrow and the bottom with the end of the body */
#cred #cred-logos{ grid-column:1; grid-row:1 / span 3; align-self:stretch; }
#cred #cred-logos > .e-con-inner{ display:flex; flex-direction:column; justify-content:space-between; height:100%; gap:16px; align-items:flex-start; }
#cred #cred-logos .elementor-widget-image{ width:clamp(150px,15vw,200px); }
#cred #cred-logos .elementor-widget-image img{ width:100%; height:76px; object-fit:contain; border:1px solid var(--c-rule); border-radius:3px; background:var(--c-white); padding:10px; }
#cred #cred-logos figcaption.widget-image-caption{ font-family:var(--ff-eyebrow); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-muted); text-align:center; margin-top:8px; }
/* fixed-width text column, left-aligned: eyebrow / title / statement all share one left edge */
#cred .elementor-widget-heading,#cred .elementor-widget-text-editor{ grid-column:2; text-align:left; }
#cred div.elementor-heading-title{ justify-content:flex-start; margin:0 0 36px; }
#cred h2.elementor-heading-title{
  font-family:var(--ff-heading); font-weight:500; font-size:clamp(30px,3.6vw,50px);
  line-height:1.05; letter-spacing:-0.02em; color:var(--c-primary); margin:0 0 34px;
  font-variation-settings:"opsz" 90;
}
#cred .elementor-widget-text-editor{
  font-family:var(--ff-heading); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.4vw,30px); line-height:1.4; color:var(--c-secondary);
  font-variation-settings:"opsz" 60;
}
#cred .elementor-widget-text-editor strong,#cred .elementor-widget-text-editor b{ color:var(--c-accent); font-weight:400; }

/* ===== FEATURED PROJECTS ===== */
#featured > .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; text-align:left;
}
#featured .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:18px; line-height:1.5; color:var(--c-secondary); margin:14px 0 0; max-width:40ch; }
#featured .pgrid{ grid-template-columns:repeat(3,1fr); gap:clamp(34px,4vw,50px) clamp(32px,4vw,56px); margin-top:28px; }
#featured .pgrid .pcard__title{ font-size:clamp(23px,2vw,28px); }
#featured .pgrid .pcard__sum{ font-size:16px; }
#featured .alllink{ margin-top:8px; }

/* ===== TESTIMONIALS (dark band) ===== */
#tst{ background:var(--c-secondary); color:var(--c-lighter); }
#tst > .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; text-align:left;
}
#tst 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:-0.022em; color:#fff; margin:16px 0 clamp(40px,5vw,64px);
  font-variation-settings:"opsz" 96;
}
/* Testimonials = [orr_testimonials] carousel: 3 cards across (2 on tablet, 1 on phone) with
   prev/next arrows. Sohail adds any number via the Add Testimonial form. */
#tst .tcar{ position:relative; }
#tst .tcar__viewport{ overflow:hidden; }
#tst .tcar__track{ display:flex; gap:clamp(24px,3vw,44px); transition:transform .45s cubic-bezier(.4,0,.2,1); }
#tst .tcar__card{ flex:0 0 calc((100% - 2 * clamp(24px,3vw,44px)) / 3); box-sizing:border-box; }
#tst .tcar .tcard{ border-top:1px solid rgba(224,218,207,.25); padding-top:26px; margin:0; height:100%; }
#tst .tcar blockquote{ font-family:var(--ff-heading); font-style:italic; font-weight:400; font-size:clamp(19px,1.5vw,23px); line-height:1.42; color:#fff; margin:0; font-variation-settings:"opsz" 48; }
#tst .tcar blockquote::before{ content:"\201C"; color:var(--c-ochre); }
#tst .tcar blockquote::after{ content:"\201D"; color:var(--c-ochre); }
#tst .tcar figcaption{ font-family:var(--ff-eyebrow); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ochre); margin:22px 0 0; }
#tst .tcar__nav{ display:flex; gap:14px; margin-top:clamp(32px,4vw,48px); }
#tst .tcar__btn{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(224,218,207,.35); background:none; color:var(--c-lighter); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s ease; }
#tst .tcar__btn:hover:not(:disabled){ background:var(--c-ochre); color:var(--c-secondary); border-color:var(--c-ochre); }
#tst .tcar__btn:disabled{ opacity:.3; cursor:default; }
@media(max-width:900px){ #tst .tcar__card{ flex-basis:calc((100% - clamp(24px,3vw,44px)) / 2); } }
@media(max-width:600px){ #tst .tcar__card{ flex-basis:100%; } }

/* ===== ABOUT INTRO ===== */
#aboutx > .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);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,110px); align-items:center;
}
#aboutx-copy > .e-con-inner{ align-items:flex-start; text-align:left; }
#aboutx .elementor-widget-image{ width:100%; max-width:420px; position:relative; }
#aboutx .elementor-widget-image::before{ content:""; position:absolute; top:24px; left:24px; width:100%; aspect-ratio:4/5; background:var(--c-ochre); z-index:0; }
#aboutx .elementor-widget-image img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--c-light); position:relative; z-index:1; }
#aboutx .elementor-widget-text-editor{ font-family:var(--ff-body); font-size:19px; line-height:1.6; color:var(--c-secondary); margin:22px 0 0; max-width:56ch; }

/* ===== CTA band (blue) ===== */
#home-cta{ background:var(--c-accent); color:#fff; }
#home-cta > .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);
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(40px,6vw,96px); align-items:end;
}
#cta-l > .e-con-inner,#cta-r > .e-con-inner{ align-items:flex-start; text-align:left; }
#home-cta h2.elementor-heading-title{
  font-family:var(--ff-heading); font-weight:500; font-size:clamp(40px,5.6vw,92px);
  line-height:0.98; letter-spacing:-0.026em; color:#fff; margin:16px 0 0;
  font-variation-settings:"opsz" 144;
}
#home-cta .elementor-widget-text-editor{ font-family:var(--ff-body); color:rgba(255,255,255,.82); font-size:19px; line-height:1.55; margin:0 0 28px; }

/* ===== arrow links (Button widgets styled as underline + arrow) ===== */
#featured .elementor-widget-button .elementor-button,
#aboutx .elementor-widget-button .elementor-button,
#home-cta .elementor-widget-button .elementor-button{
  background:transparent; border:none; border-radius:0; padding:0 0 10px;
  border-bottom:2px solid var(--c-ochre); font-family:var(--ff-eyebrow); font-size:13px;
  font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-primary);
  transition:color .25s ease;
}
#home-cta .elementor-widget-button .elementor-button{ color:#fff; }
#featured .elementor-widget-button .elementor-button:hover,
#aboutx .elementor-widget-button .elementor-button:hover{ color:var(--c-accent); }
#featured .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
#aboutx .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
#home-cta .elementor-widget-button .elementor-button .elementor-button-content-wrapper{ display:inline-flex; align-items:center; }
#featured .elementor-widget-button .elementor-button .elementor-button-content-wrapper::after,
#aboutx .elementor-widget-button .elementor-button .elementor-button-content-wrapper::after,
#home-cta .elementor-widget-button .elementor-button .elementor-button-content-wrapper::after{
  content:"\2192"; margin-left:16px; color:var(--c-ochre);
  font-family:var(--ff-heading); font-style:italic; font-size:20px; line-height:1;
}

/* ===== responsive ===== */
@media (max-width:900px){
  #home-hero > .e-con-inner,
  #services-head > .e-con-inner,
  #aboutx > .e-con-inner,
  #home-cta > .e-con-inner{ grid-template-columns:1fr; gap:36px; }
  #tst .tcar__btn{ width:46px; height:46px; }
  #featured .pgrid{ grid-template-columns:1fr; }
  #aboutx .elementor-widget-image{ max-width:none; }
  /* Track Record stacks: logos above, text left-aligned. Reset grid placement so the
     items flow in one column (they carry grid-column:2 / grid-row:span 3 on desktop). */
  #cred > .e-con-inner{ grid-template-columns:1fr; gap:30px; justify-content:stretch; }
  #cred #cred-logos,
  #cred .elementor-widget-heading,
  #cred .elementor-widget-text-editor{ grid-column:auto; grid-row:auto; }
  #cred .elementor-widget-heading,#cred .elementor-widget-text-editor{ text-align:left; }
  #cred div.elementor-heading-title{ justify-content:flex-start; }
  #cred .elementor-widget-text-editor{ margin-left:0; }
  #cred #cred-logos > .e-con-inner{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; height:auto; gap:14px; }
  #cred #cred-logos .elementor-widget-image img{ height:64px; }
}

/* ===== defeat Elementor add-container's flex_align_items:center default on
   column-stack inner wrappers (documented MCP gotcha) ===== */
#hero-copy > .e-con-inner,
#reel > .e-con-inner,
#services > .e-con-inner,
#services-head-l > .e-con-inner,
#featured > .e-con-inner,
#tst > .e-con-inner,
#aboutx-copy > .e-con-inner,
#cta-l > .e-con-inner,
#cta-r > .e-con-inner{ align-items:flex-start !important; text-align:left !important; }