/* CICP × Elementor — brand "band" system.
   These classes go on native Elementor CONTAINERS/WIDGETS (via the Advanced ▸ CSS
   Classes field). All copy stays editable with core Heading/Text/Image/Button
   widgets; the branded look (gradients, watermark, spacing, colour) lives here so
   the design survives client edits. Builds on cicp-design.css tokens. */

/* ---------- band scaffolding ---------- */
.cicp-band{position:relative;overflow:hidden;--margin-block-start:0px;--margin-block-end:0px}
/* Elementor containers apply LOGICAL margins from inheriting custom properties
   (.e-con{margin-block-start:var(--margin-block-start)}), which beat a physical
   `margin` declaration. So set the custom properties here as low-specificity
   defaults — any margin the client sets in Elementor emits higher-specificity
   per-element CSS and still wins.
   NOTE: never force margins on bands — Elementor's per-element CSS carries the client's
   own margin edits and must win. Defaults below are set WITHOUT !important. */
.cicp-band__in{max-width:var(--cicp-max);width:100%;margin-inline:auto!important;margin-block:0!important;padding:0 30px!important;gap:0!important;box-sizing:border-box;position:relative;z-index:1}
/* Elementor wraps boxed-container children in .e-con-inner; keep it transparent to our layout */
.cicp-band__in>.e-con-inner{display:contents}

/* headings/text rendered by core Elementor widgets — normalise to the design system */
/* NOTE: deliberately NOT setting font-family here — Elementor's global kit governs h1-h6
   (renders Roboto), which is what the original page does. Only the mission statement,
   a non-heading element on the original, is explicitly Montserrat. */
.cicp-band .elementor-heading-title{color:var(--cicp-navy);line-height:1.15;margin:0}
.cicp-band .elementor-widget-text-editor{color:var(--cicp-body);font-size:17px;line-height:1.75}
.cicp-band .elementor-widget-text-editor p{margin:0 0 1.15em}
.cicp-band .elementor-widget-text-editor p:last-child{margin-bottom:0}
.cicp-band .elementor-widget-text-editor a{color:var(--cicp-blue);text-decoration:none}
.cicp-band .elementor-widget-text-editor a:hover{text-decoration:underline}
.cicp-band .elementor-widget-text-editor strong{color:var(--cicp-ink)}

/* eyebrow / section label (put class cicp-eyebrow on a Heading widget) */
.cicp-eyebrow.elementor-widget-heading .elementor-heading-title{
	font-family:var(--font-label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;line-height:1.6;color:var(--cicp-blue)}

/* ---------- HERO band ---------- */
.cicp-band--hero{color:#fff;padding:74px 0 66px!important;
	background:radial-gradient(120% 110% at 100% 0%,#a9dcf5 0%,rgba(169,220,245,0) 55%),linear-gradient(150deg,#0C79B5 0%,#0a5f92 100%)}
/* Elementor forces content:none/opacity:1 on .e-con::before — override to keep the watermark */
.cicp-band--hero::before{content:""!important;position:absolute;inset:0;background:url("../../../uploads/2025/02/CICP-icon.svg") no-repeat right -120px center;background-size:640px auto;opacity:.1!important;pointer-events:none}
.cicp-band--hero .cicp-eyebrow.elementor-widget-heading .elementor-heading-title{color:#bfe6f7;line-height:25.6px}  /* original's eyebrow is an inline span in a 25.6px line box */
.cicp-band--hero .elementor-heading-title{color:#fff}
.cicp-band--hero .cicp-band__h1 .elementor-heading-title{font-weight:600;font-size:46px;line-height:1.15;letter-spacing:-.5px;margin:10px 0 0}
.cicp-band--hero .elementor-widget-text-editor{color:#eaf6fc;font-size:19px;line-height:1.5;margin:0}
.cicp-band--hero .elementor-widget-text-editor p{max-width:46ch;margin:16px 0 0}

/* ---------- WHO WE ARE (editorial two-column) ---------- */
.cicp-band--intro{padding:66px 0 8px!important}
.cicp-band--intro .cicp-band__in{display:grid;grid-template-columns:210px 1fr;gap:48px!important;align-items:start}
.cicp-band--intro .cicp-eyebrow.elementor-widget-heading .elementor-heading-title{position:sticky;top:96px;display:block}
.cicp-band--intro .elementor-widget-text-editor{font-size:17px;color:var(--cicp-body);max-width:672px!important}
.cicp-band--intro .elementor-widget-text-editor p{max-width:none}
.cicp-band--intro .elementor-widget-text-editor .cicp-lead,
.cicp-band--intro .cicp-lead{font-size:21px;line-height:1.6;color:var(--cicp-ink);font-weight:500}

/* ---------- MISSION band ---------- */
.cicp-band--mission{text-align:center;padding:74px 0!important;margin:66px 0;--margin-block-start:66px;--margin-block-end:66px;
	background:linear-gradient(120deg,#194787 0%,#135e97 58%,#0C79B5 100%)}
.cicp-band--mission::before{content:""!important;position:absolute;inset:0;background:url("../../../uploads/2025/02/CICP-icon.svg") no-repeat center;background-size:520px auto;opacity:.08!important;pointer-events:none}
.cicp-band--mission .cicp-band__in{text-align:center}
.cicp-band--mission .cicp-eyebrow.elementor-widget-heading .elementor-heading-title{color:#8fd4f2;margin-bottom:16px;text-align:center}
.cicp-band--mission .cicp-band__stmt .elementor-heading-title{font-family:var(--font-head);font-weight:700;font-size:30px;line-height:1.34;color:#fff;max-width:26ch;margin:0 auto;text-align:center}

/* ---------- JOURNEY / timeline ---------- */
.cicp-band--section{padding:8px 0 0!important}
.cicp-band--section .cicp-eyebrow{display:block}
.cicp-band--section .cicp-eyebrow .elementor-heading-title{margin-bottom:22px}
.cicp-band__timeline img,.cicp-band--section .elementor-widget-image img{
	display:block;width:100%;height:auto;border:1px solid var(--cicp-line);border-radius:var(--cicp-radius-card);background:#FAFAFA;margin:0}

/* ---------- ADVANCE / execute intro ---------- */
.cicp-band--advance{padding:0!important;margin:100px 0;--margin-block-start:100px;--margin-block-end:100px}  /* permanent 100px top/bottom */
.cicp-band--advance .cicp-band__in{text-align:center;max-width:70ch!important}
.cicp-band--advance .cicp-eyebrow{display:block}
.cicp-band--advance .cicp-eyebrow.elementor-widget-heading .elementor-heading-title{text-align:center;margin-bottom:10px}
.cicp-band--advance .cicp-band__h2 .elementor-heading-title{font-weight:600;font-size:34px;line-height:1.15;color:var(--cicp-navy);max-width:none;margin:0;text-align:center}
.cicp-band--advance .elementor-widget-text-editor{font-size:16.5px;line-height:1.6;color:var(--cicp-body);margin:0;max-width:none}
.cicp-band--advance .elementor-widget-text-editor p{margin:12px 0 0}

/* ---------- INITIATIVES / PROJECTS page shells ---------- */
/* navy page-header band */
.cicp-band--pagehead{background:linear-gradient(120deg,#194787 0%,#194787 60%,#0C79B5 100%);color:#fff;padding:66px 0 58px!important}
.cicp-band--pagehead .elementor-heading-title{color:#fff;font-family:var(--font-head);font-weight:600;font-size:46px;line-height:1.15;letter-spacing:-.5px;margin:0}
/* intro paragraphs band (Initiatives) */
.cicp-band--pageintro .cicp-band__in{max-width:74ch;padding-top:52px;padding-bottom:8px}
.cicp-band--pageintro .elementor-widget-text-editor{font-size:17px;line-height:1.75;color:var(--cicp-body)}
/* cloud-mist list wrapper + 50px-spaced rounded rows */
.cicp-listpage{background:#FAFAFA;padding:0!important;gap:0!important}
.cicp-listpage__list{max-width:var(--cicp-max);width:100%;margin-inline:auto!important;margin-block:0!important;
	padding:50px 30px 72px!important;display:flex;flex-direction:column;gap:50px!important;box-sizing:border-box}

/* Projects: rounded photo card with a navy fade over the image */
.e-con.cicp-projrow{position:relative;scroll-margin-top:90px;border-radius:20px!important;overflow:hidden!important;background-color:var(--cicp-navy);
	padding:56px 44px!important;margin-block:0!important;gap:0!important}
.e-con.cicp-projrow__scrim{position:absolute!important;padding:0!important;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#194787 0%,#194787 26%,rgba(0,26,116,.82) 44%,rgba(0,26,116,0) 74%)}
.e-con.cicp-projrow__txt{position:relative;z-index:1;max-width:48%;padding:0!important;margin-block:0!important;gap:0!important}
.e-con.cicp-projrow__txt .elementor-heading-title{color:#fff;margin:0 0 14px;font-family:var(--font-head);font-weight:600;font-size:34px;line-height:1.15}
.e-con.cicp-projrow__txt .elementor-widget-text-editor{color:#dbe4ff;font-size:16.5px;line-height:1.7;margin:0}
.e-con.cicp-projrow__txt .elementor-widget-text-editor p{margin:0 0 26px}

/* Initiatives: intro + photo block with navy overlay + white content + live news feed */
.cicp-listpage .cicp-initpage-intro{max-width:74ch;width:100%;margin-inline:auto!important;margin-block:0!important;
	padding:52px 30px 8px!important;gap:0!important;box-sizing:border-box}
.cicp-initpage-intro .elementor-widget-text-editor{margin:0}

.cicp-initrow{position:relative;scroll-margin-top:90px;border-radius:20px!important;overflow:hidden!important;background-color:var(--cicp-navy);
	padding:52px 44px!important;margin-block:0!important;gap:0!important}
.cicp-initrow__scrim{position:absolute!important;padding:0!important;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,17,68,.93) 0%,rgba(0,19,78,.68) 38%,rgba(0,16,64,.8) 100%)}
.cicp-initrow__in{position:relative;z-index:1;padding:0!important;margin-block:0!important;gap:0!important}
.cicp-initrow__top{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
	gap:24px!important;flex-wrap:wrap;padding:0!important;margin-block:0!important}
.cicp-initrow__top .elementor-heading-title{color:#fff;margin:0;font-family:var(--font-head);font-weight:600;font-size:34px;line-height:1.15}
.cicp-initrow__desc{margin:0!important}
.cicp-initrow__desc p{max-width:80ch;font-size:16.5px;line-height:1.7;color:#dbe4ff;margin:18px 0 0}
/* green outline button matches .cicp-btn--green (1px border, 11px 23px), white label on the photo block */
.cicp-btn--green .elementor-button{background:transparent;border:1px solid var(--cicp-green)!important;padding:11px 23px!important}
.cicp-btn--green .elementor-button:hover{background:rgba(124,218,36,.12)!important}
.cicp-initrow .cicp-btn--green .elementor-button,
.cicp-initrow .cicp-btn--green .elementor-button .elementor-button-text{color:#fff}

@media(max-width:820px){
	/* keep the card's inner gutter close to the page gutter on small screens */
	.e-con.cicp-projrow{padding:44px 24px!important}
	.cicp-initrow{padding:44px 24px!important}
	.e-con.cicp-projrow__txt{max-width:100%}
	.e-con.cicp-projrow__scrim{background:linear-gradient(90deg,#194787 0%,rgba(0,26,116,.9) 62%,rgba(0,26,116,.55) 100%)}
}

/* ---------- native Elementor Button → CICP button ----------
   Elementor puts the widget's CSS Classes on the WRAPPER (.elementor-widget-button),
   so style the inner <a.elementor-button> via a descendant selector. */
.cicp-btn .elementor-button{
	display:inline-flex;width:auto;align-items:center;gap:9px;
	font-family:var(--font-head);font-weight:400;line-height:1.6;letter-spacing:normal;  /* font-size: inherit Elementor's responsive global link typography, like the original */
	border-radius:var(--cicp-radius-btn);border:0;padding:12px 24px;background:var(--cicp-blue);
	transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.cicp-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,26,46,.18)}
.cicp-btn .elementor-button,.cicp-btn .elementor-button .elementor-button-text{color:#fff}
.cicp-btn--blue .elementor-button{background:var(--cicp-blue)}
.cicp-btn--blue .elementor-button,.cicp-btn--blue .elementor-button .elementor-button-text{color:#fff}
.cicp-btn--navy .elementor-button{background:var(--cicp-navy)}
.cicp-btn--navy .elementor-button,.cicp-btn--navy .elementor-button .elementor-button-text{color:#fff}
.cicp-btn--white .elementor-button{background:#FAFAFA}
.cicp-btn--white .elementor-button,.cicp-btn--white .elementor-button .elementor-button-text{color:var(--cicp-navy)}
.cicp-btn--green .elementor-button{background:transparent}
.cicp-btn--green .elementor-button,.cicp-btn--green .elementor-button .elementor-button-text{color:#fff}

/* ---------- responsive ---------- */
@media(max-width:820px){
	.cicp-band--intro .cicp-band__in{grid-template-columns:1fr;gap:14px}
	.cicp-band--intro .cicp-eyebrow.elementor-widget-heading .elementor-heading-title{position:static}
}
@media(max-width:760px){
	.cicp-band--hero{padding:52px 0 46px}
	.cicp-band--mission{padding:54px 0}
	.cicp-band--mission .cicp-band__stmt .elementor-heading-title{font-size:24px}
}

/* projects tabs block: full-bleed like the original (no wrap, no padding) */
.cicp-band--projects{padding:0!important}

/* The button widget's CSS Classes land on the WRAPPER, so cicp-design.css's
   .cicp-btn / .cicp-btn--* rules hit the wrapper too (white block + padding).
   Neutralise the wrapper; the inner <a.elementor-button> carries the real styling. */
.elementor-widget-button.cicp-btn,
.elementor-widget-button.cicp-btn--blue,
.elementor-widget-button.cicp-btn--navy,
.elementor-widget-button.cicp-btn--white,
.elementor-widget-button.cicp-btn--green{
	display:block!important;padding:0!important;background:transparent!important;border:0!important;
	border-radius:0!important;box-shadow:none!important;transform:none!important;gap:0!important}

/* ---------- Elementor Pro "Call to Action" cards (AI Roadshows) ----------
   Two separate ways the widget's own grey background leaked through:

   1. The region cards carry `border:3px solid transparent`. Backgrounds paint under
      the border area by default, so the grey showed through the transparent border
      as a 3px frame around each card. background-clip:padding-box stops the paint
      at the padding edge — the spacing is kept, the grey line goes.

   2. In a grid row every card is stretched to the tallest one, but .elementor-cta
      doesn't stretch with it, exposing a band of grey under the content.
      min-height:100% can't fix that: a stretched grid item has a *used* height but
      its computed height is still `auto`, so the percentage never resolves. Making
      the widget a flex column and letting the card grow does work. */
/* NOTE: cardsWithStretchGap covers the WIDGET filling its grid row. A second,
   independent gap sits one level deeper: .elementor-cta__content is sized to its
   own text, so on a card with a short one-line title/role, sitting in the same row
   as a card whose title wraps to two lines, the short card's content block stays
   short and leaves a band of the widget's grey showing below it (the fixed-height
   .elementor-cta__bg-wrapper is unaffected — the gap is always below the content,
   never below the photo). Making .elementor-cta a flex column and letting
   .elementor-cta__content grow closes that gap; bg-wrapper keeps flex-shrink:0 so
   it never gets squeezed. */
.elementor-widget-call-to-action{background-clip:padding-box;display:flex;flex-direction:column}
.elementor-widget-call-to-action>.elementor-cta{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.elementor-widget-call-to-action .elementor-cta__bg-wrapper{flex-shrink:0}
.elementor-widget-call-to-action .elementor-cta__content{flex:1 1 auto}

/* The native initiative rows use .cicp-initrow, so cicp-initpage.css's
   .cicp-initblock--photo overrides never applied — the "More … News" link stayed
   brand-blue on a dark photo. Light it up. */
.cicp-initrow .cicp-initblock__more{color:#fff}
.cicp-initrow .cicp-initblock__more:hover{color:#fff;text-decoration:underline}
.cicp-initrow .cicp-initblock__newshead .cicp-eyebrow{color:#8fb4ff}

/* ---------- Initiatives: one-at-a-time news carousel on phones ----------
   Four stacked cards made each initiative block very tall on a phone. Below 600px
   the feed becomes a scroll-snap carousel showing ONE card, driven by the same
   circular arrow controls the homepage news rails use (.cicp-arrows). The arrows
   are hidden above the breakpoint, where the normal grid applies. */
.cicp-inews-nav{display:none}

@media(max-width:600px){
	.cicp-initrow .cicp-newsgrid{
		display:flex;grid-template-columns:none;gap:16px;
		overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
	.cicp-initrow .cicp-newsgrid::-webkit-scrollbar{display:none}
	.cicp-initrow .cicp-newsgrid>.cicp-ncard{flex:0 0 100%;scroll-snap-align:start}

	.cicp-initrow .cicp-inews-nav{display:flex;justify-content:center;gap:12px;margin-top:18px}
	/* .cicp-arrows button styling comes from cicp-design.css (same as the homepage);
	   only the disabled state needs declaring — and it must set a background, or
	   hello-elementor's reset.css paints it #c36. */
	.cicp-initrow .cicp-inews-nav button:disabled{
		opacity:.35;cursor:default;background:#FAFAFA;color:var(--cicp-navy);
		border-color:var(--cicp-line);transform:none}
}