/*
 * Business Opportunities page (page-business-opportunities.php), consumer site.
 * The form itself is styled by opportunities.css; this is the page around it.
 *
 * Follows the live site: oldSchool display in heavy uppercase over Inter, pill
 * labels, white cards with the site's soft shadows, red line icons in chips,
 * 14-16px radii. Red is #C8102E, the pillar logo's red, as on the event pages.
 *
 * Scoped under .i1op at (0,2,0)+, because the Elementor kit styles
 * `.elementor-kit-6 h1/h2/a` at (0,1,1) and a bare rule loses silently.
 */

.i1op {
	--p-ink: #0F1012;
	--p-text: #2A2D33;
	--p-muted: #5C6068;
	--p-red: #C8102E;
	--p-red-deep: #9C0C23;
	--p-red-soft: #FBE9EC;
	--p-fog: #F4F4F5;
	--p-line: #E5E6E9;
	--p-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
	--p-shadow-card: 0 18px 40px -26px rgba(15, 16, 18, .35), 0 0 10px rgba(0, 0, 0, .04);
	--p-display: "oldSchool", "Archivo Black", "Arial Black", system-ui, sans-serif;
	--p-body: "i1-inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--p-gutter: clamp(16px, 4vw, 48px);
	--p-max: 1200px;
	font-family: var(--p-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--p-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.i1op *, .i1op *::before, .i1op *::after { box-sizing: border-box; }
.i1op img { display: block; max-width: 100%; height: auto; }
.i1op .i1op-wrap { max-width: var(--p-max); margin-inline: auto; padding-inline: var(--p-gutter); }
.i1op .i1op-sec { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 90px; }
.i1op .i1op-sec--fog { background: var(--p-fog); }
.i1op #opportunity-form { scroll-margin-top: 110px; }

/* ---------- Type ---------- */
.i1op .i1op-pill {
	display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 9px 16px 9px 13px;
	border-radius: 999px; background: #fff; border: 1px solid var(--p-line); box-shadow: var(--p-shadow);
	font: 600 11.5px/1 var(--p-body); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted);
}
.i1op .i1op-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p-red); }
.i1op .i1op-h1, .i1op .i1op-h2 {
	margin: 0; font-family: var(--p-display); font-weight: 800; text-transform: uppercase;
	letter-spacing: -.02em; text-wrap: balance; color: var(--p-ink);
}
.i1op .i1op-h1 { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.1rem); line-height: .96; }
.i1op .i1op-h2 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); line-height: 1; }
.i1op .i1op-lede { margin: 20px 0 0; max-width: 54ch; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height: 1.6; color: var(--p-muted); }
.i1op .i1op-sub { margin: 14px 0 0; max-width: 60ch; font-size: 1.05rem; line-height: 1.6; color: var(--p-muted); }
.i1op .i1op-head { margin-bottom: clamp(28px, 4vw, 44px); }
.i1op h3 { margin: 0; font: 700 1.15rem/1.3 var(--p-body); letter-spacing: -.005em; text-transform: none; color: var(--p-ink); }

/* ---------- Buttons and links ---------- */
.i1op .i1op-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px;
	border-radius: 16px; border: 2px solid transparent; font: 700 14.5px/1 var(--p-body); letter-spacing: .07em;
	text-transform: uppercase; text-decoration: none; transition: background-color .12s ease, transform .12s ease;
}
.i1op .i1op-btn:active { transform: translateY(1px); }
.i1op .i1op-btn--red { background: var(--p-red); color: #fff; box-shadow: 0 10px 24px -12px rgba(200, 16, 46, .8); }
.i1op .i1op-btn--red:hover, .i1op .i1op-btn--red:focus { background: var(--p-red-deep); color: #fff; }
.i1op .i1op-tlink, .i1op .i1op-card__cta {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0;
	font: 700 15px/1.3 var(--p-body); color: var(--p-ink); text-decoration: underline;
	text-decoration-color: var(--p-red); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.i1op .i1op-tlink:hover, .i1op .i1op-tlink:focus, .i1op .i1op-card__cta:hover, .i1op .i1op-card__cta:focus { color: var(--p-red-deep); }
.i1op a:focus-visible { outline: 3px solid var(--p-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Hero ---------- */
.i1op .i1op-hero { padding-block: clamp(36px, 6vw, 84px) clamp(48px, 7vw, 96px); background: linear-gradient(180deg, #fff 0, var(--p-fog) 100%); }
.i1op .i1op-hero__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .i1op .i1op-hero__grid { grid-template-columns: 1.05fr .95fr; } }
.i1op .i1op-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.i1op .i1op-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; font: 600 13px/1.3 var(--p-body); letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); }
.i1op .i1op-hero__facts span { display: inline-flex; align-items: center; gap: 9px; }
.i1op .i1op-hero__facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p-red); }
.i1op .i1op-hero__media { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--p-shadow-card); aspect-ratio: 16 / 11; background: #ddd; }
.i1op .i1op-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.i1op .i1op-hero__media figcaption {
	position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px;
	background: rgba(15, 16, 18, .72); color: #fff; font: 600 12px/1.2 var(--p-body); letter-spacing: .02em;
}
@media (max-width: 899px) { .i1op .i1op-hero__media { order: -1; aspect-ratio: 16 / 9; } }

/* ---------- Opportunity cards ---------- */
.i1op .i1op-cards { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .i1op .i1op-cards { grid-template-columns: repeat(3, 1fr); } }
.i1op .i1op-card {
	display: flex; flex-direction: column; margin: 0; padding: clamp(24px, 2.6vw, 32px);
	border-radius: 20px; background: #fff; border: 1px solid var(--p-line); box-shadow: var(--p-shadow);
}
.i1op .i1op-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; background: var(--p-red-soft); color: var(--p-red); }
.i1op .i1op-card__icon .i1o-icon { width: 28px; height: 28px; }
.i1op .i1op-card__title { font-size: 1.28rem; }
.i1op .i1op-card__lede { margin: 8px 0 0; color: var(--p-muted); }
.i1op .i1op-card__list { flex: 1; margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 9px; align-content: start; }
.i1op .i1op-card__list li { position: relative; margin: 0; padding-left: 26px; font-size: 15.5px; line-height: 1.45; color: var(--p-text); }
.i1op .i1op-card__list li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%;
	background: var(--p-red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.7l4.6-5' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.i1op .i1op-card__cta { align-self: flex-start; }
.i1op .i1op-card__note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--p-line); font-size: 13.5px; line-height: 1.5; color: var(--p-muted); }
.i1op .i1op-card__note a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Why ---------- */
/* One column: three fact cards squeezed into half a row wrapped every line. */
.i1op .i1op-why { display: grid; gap: clamp(24px, 3.4vw, 40px); }
.i1op .i1op-facts { display: grid; gap: 12px; margin: 0; }
@media (min-width: 640px) { .i1op .i1op-facts { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.i1op .i1op-facts > div { padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--p-shadow); }
.i1op .i1op-facts dt { margin: 0; font: 800 clamp(2rem, 1.4rem + 2vw, 2.8rem)/1 var(--p-display); letter-spacing: -.02em; color: var(--p-red); }
.i1op .i1op-facts dd { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--p-text); }
.i1op .i1op-facts dd a { display: inline-block; margin-top: 4px; color: var(--p-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--p-red); text-underline-offset: 3px; }
.i1op .i1op-points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .i1op .i1op-points { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.i1op .i1op-points li { margin: 0; padding: 22px 22px 22px 24px; border-left: 3px solid var(--p-red); background: #fff; border-radius: 0 16px 16px 0; }
.i1op .i1op-points p { margin: 8px 0 0; font-size: 15px; color: var(--p-muted); }

/* ---------- Steps ---------- */
.i1op .i1op-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 820px) { .i1op .i1op-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.i1op .i1op-steps li { position: relative; margin: 0; padding: 26px; border-radius: 20px; border: 1px solid var(--p-line); }
.i1op .i1op-steps__n { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--p-ink); color: #fff; font: 800 16px/1 var(--p-display); }
.i1op .i1op-steps p { margin: 8px 0 0; color: var(--p-muted); }
@media (min-width: 820px) {
	.i1op .i1op-steps li:not(:last-child)::after {
		content: ""; position: absolute; top: 46px; right: -23px; width: 24px; height: 2px; background: var(--p-line);
	}
}

/* ---------- Form section ---------- */
.i1op .i1op-formsec { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 1000px) { .i1op .i1op-formsec { grid-template-columns: minmax(0, 360px) 1fr; align-items: start; } }
@media (min-width: 1000px) { .i1op .i1op-formsec__aside { position: sticky; top: 120px; } }
.i1op .i1op-checks { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.i1op .i1op-checks li { position: relative; margin: 0; padding-left: 28px; font-weight: 500; color: var(--p-text); }
.i1op .i1op-checks li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
	background: var(--p-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.7l4.6-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.i1op .i1op-formsec__card { padding: clamp(20px, 3.4vw, 40px); border-radius: 20px; background: #fff; box-shadow: var(--p-shadow-card); }

/* ---------- FAQ ---------- */
.i1op .i1op-faq { display: grid; gap: 28px; }
@media (min-width: 960px) { .i1op .i1op-faq { grid-template-columns: minmax(0, 360px) 1fr; } }
.i1op .i1op-faq__list { border-top: 1px solid var(--p-line); }
.i1op .i1op-faq__item { border-bottom: 1px solid var(--p-line); }
.i1op .i1op-faq__item summary {
	position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none;
	font: 700 1.05rem/1.4 var(--p-body); color: var(--p-ink);
}
.i1op .i1op-faq__item summary::-webkit-details-marker { display: none; }
.i1op .i1op-faq__item summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
	border-right: 2px solid var(--p-red); border-bottom: 2px solid var(--p-red); transform: rotate(45deg); transition: transform .15s ease;
}
.i1op .i1op-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.i1op .i1op-faq__item summary:focus-visible { outline: 3px solid var(--p-ink); outline-offset: 2px; }
.i1op .i1op-faq__item p { margin: 0 0 22px; max-width: 68ch; color: var(--p-muted); }
.i1op .i1op-faq__item p a { color: var(--p-ink); text-decoration: underline; text-decoration-color: var(--p-red); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.i1op *, .i1op *::after { transition: none !important; }
}

/* ---------- Photography ---------- */
.i1op .i1op-card { overflow: hidden; }
.i1op .i1op-card__media {
	position: relative; margin: calc(-1 * clamp(24px, 2.6vw, 32px)) calc(-1 * clamp(24px, 2.6vw, 32px)) 22px;
	aspect-ratio: 16 / 10; background: #e9e9ea;
}
.i1op .i1op-card__media img { width: 100%; height: 100%; object-fit: cover; }
.i1op .i1op-card__media figcaption {
	position: absolute; right: 12px; top: 12px; padding: 6px 11px; border-radius: 999px;
	background: rgba(15, 16, 18, .72); color: #fff; font: 600 11.5px/1.2 var(--p-body); letter-spacing: .02em;
}
.i1op .i1op-card__media .i1op-card__icon {
	position: absolute; left: clamp(24px, 2.6vw, 32px); bottom: -22px; margin: 0;
	width: 48px; height: 48px; background: #fff; box-shadow: 0 6px 16px -6px rgba(15, 16, 18, .35);
}
.i1op .i1op-card__media + .i1op-card__title { margin-top: 18px; }
.i1op .i1op-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
@media (min-width: 640px) { .i1op .i1op-strip { gap: 18px; } }
.i1op .i1op-strip figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #e9e9ea; }
.i1op .i1op-strip img { width: 100%; height: 100%; object-fit: cover; }
.i1op .i1op-strip figcaption {
	position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 999px;
	background: rgba(15, 16, 18, .72); color: #fff; font: 600 12px/1.2 var(--p-body);
}