/* Native consulting Overview: challenge, action, and measurable outcome. */

.octa-overview {
	--oo-ink:#102725;
	--oo-green:#144f48;
	--oo-green-hover:#1c665d;
	--oo-mint:#b8ead5;
	--oo-lime:#d9f77e;
	--oo-cream:#f5f3ea;
	--oo-line:#d8ded7;
	--oo-muted:#64736f;
	background:#fafaf7;
	color:var(--oo-ink);
}

.octa-overview-shell { width:min(calc(100% - 48px),1180px); margin-inline:auto; }
.octa-overview :is(h1,h2,h3) { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.038em; }
.octa-overview-hero { padding-block:clamp(65px,8vw,112px); background:var(--oo-cream); overflow:hidden; }
.octa-overview-breadcrumb { display:flex; gap:9px; margin-bottom:46px; color:#5d7b75; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.octa-overview-breadcrumb a { color:inherit; text-decoration:none; }
.octa-overview-breadcrumb a:hover,.octa-overview-breadcrumb a:focus-visible { color:var(--oo-green-hover); text-decoration:underline; }
.octa-overview-hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(285px,.55fr); gap:clamp(55px,9vw,125px); align-items:end; }
.octa-overview-eyebrow,.octa-overview-kicker,.octa-overview-heading > div > p,.octa-overview-engagements-heading > p,.octa-overview-process header > p,.octa-overview-start-grid > div:first-child > p { margin:0 0 18px; color:#347c70; font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.octa-overview-hero h1 { max-width:900px; margin:0; font-size:clamp(50px,6.45vw,84px); line-height:.97; }
.octa-overview-hero-copy > p:not(.octa-overview-eyebrow) { max-width:690px; margin:30px 0 0; color:#53645f; font-size:clamp(17px,1.7vw,21px); line-height:1.7; }
.octa-overview-actions { display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; margin-top:36px; }
.octa-overview-button,.octa-overview-start a { display:inline-flex; gap:13px; align-items:center; padding:16px 23px; background:var(--oo-green); color:#fff; font-size:12px; font-weight:800; text-decoration:none; }
.octa-overview-button:hover,.octa-overview-button:focus-visible,.octa-overview-start a:hover,.octa-overview-start a:focus-visible { background:var(--oo-green-hover); }
.octa-overview-secondary { display:inline-flex; gap:11px; color:var(--oo-green-hover); font-size:12px; font-weight:800; text-decoration:none; }
.octa-overview-secondary:hover,.octa-overview-secondary:focus-visible { text-decoration:underline; }
.octa-overview-hero-model { display:grid; background:var(--oo-green); color:#fff; }
.octa-overview-hero-model > div { display:flex; min-height:108px; padding:23px 25px; flex-direction:column; justify-content:space-between; }
.octa-overview-hero-model > div:nth-of-type(2) { background:#1b6259; }
.octa-overview-hero-model > div:nth-of-type(3) { background:var(--oo-mint); color:var(--oo-ink); }
.octa-overview-hero-model span { color:var(--oo-lime); font:italic 10px Georgia,serif; }
.octa-overview-hero-model > div:nth-of-type(3) span { color:#347c70; }
.octa-overview-hero-model strong { font:400 23px/1.1 Georgia,serif; letter-spacing:-.025em; }
.octa-overview-hero-model i { height:0; position:relative; z-index:1; padding-right:25px; color:var(--oo-lime); font-style:normal; line-height:0; text-align:right; }

.octa-overview-principle { padding-block:clamp(78px,10vw,138px); }
.octa-overview-principle-grid { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); gap:clamp(55px,9vw,125px); align-items:center; }
.octa-overview-principle-image { position:relative; min-height:530px; background:var(--oo-green); }
.octa-overview-principle-image img { display:block; width:100%; height:530px; object-fit:cover; mix-blend-mode:luminosity; opacity:.88; }
.octa-overview-principle-image > span { position:absolute; right:-1px; bottom:-1px; max-width:230px; padding:23px; background:var(--oo-lime); color:var(--oo-ink); font:400 20px/1.2 Georgia,serif; }
.octa-overview-principle h2 { max-width:680px; margin:0; font-size:clamp(42px,5.3vw,69px); line-height:.99; }
.octa-overview-principle-grid > div:last-child > p:last-child { max-width:680px; margin:30px 0 0; color:var(--oo-muted); font-size:17px; line-height:1.8; }

.octa-overview-why { padding-block:clamp(78px,9vw,128px); background:var(--oo-green); color:#fff; }
.octa-overview-heading { display:grid; grid-template-columns:1fr .72fr; gap:clamp(55px,9vw,125px); align-items:end; margin-bottom:clamp(55px,7vw,86px); }
.octa-overview-heading > div > p { color:var(--oo-lime); }
.octa-overview-heading h2 { max-width:710px; margin:0; font-size:clamp(40px,5.2vw,67px); line-height:1; }
.octa-overview-heading > p { margin:0; color:#c8dcd8; font-size:15px; line-height:1.75; }
.octa-overview-reasons { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
.octa-overview-reasons article { min-height:315px; padding:30px; border-right:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.octa-overview-reasons article > span { color:var(--oo-lime); font:italic 11px Georgia,serif; }
.octa-overview-reasons h3 { margin:63px 0 16px; font-size:29px; line-height:1.08; }
.octa-overview-reasons p { margin:0; color:#bed2ce; font-size:13px; line-height:1.72; }

.octa-overview-engagements { padding-block:clamp(80px,10vw,138px); background:var(--oo-cream); scroll-margin-top:80px; }
.octa-overview-engagements-heading { display:grid; grid-template-columns:180px 1fr 170px; gap:35px; align-items:end; margin-bottom:65px; }
.octa-overview-engagements-heading > p { color:#347c70; }
.octa-overview-engagements-heading h2 { max-width:700px; margin:0; font-size:clamp(42px,5.2vw,67px); line-height:1; }
.octa-overview-engagements-heading > span { padding-bottom:8px; color:var(--oo-muted); font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1.55; text-transform:uppercase; }
.octa-overview-engagement-list { border-top:1px solid #dcd7c9; }
.octa-overview-engagement { display:grid; grid-template-columns:minmax(230px,.75fr) minmax(200px,.8fr) minmax(220px,1fr) minmax(220px,1fr); gap:0; border-bottom:1px solid #dcd7c9; }
.octa-overview-engagement > * { padding:clamp(28px,4vw,48px) clamp(20px,3vw,34px); }
.octa-overview-engagement > * + * { border-left:1px solid #dcd7c9; }
.octa-overview-engagement header { padding-left:0; }
.octa-overview-engagement header > span { color:#347c70; font:italic 11px Georgia,serif; }
.octa-overview-engagement h3 { margin:52px 0 0; font-size:clamp(27px,3vw,38px); line-height:1.06; }
.octa-overview-engagement :is(.octa-overview-situation,.octa-overview-intervention,.octa-overview-impact) > p { margin:0 0 23px; color:#54716b; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.octa-overview-situation > div { color:#586863; font-size:14px; line-height:1.75; }
.octa-overview-engagement ul { margin:0; padding:0; list-style:none; }
.octa-overview-engagement li { position:relative; padding-left:18px; color:#50615d; font-size:13px; line-height:1.58; }
.octa-overview-engagement li::before { position:absolute; top:.7em; left:0; width:6px; height:6px; background:#4b8e82; content:''; }
.octa-overview-engagement li + li { margin-top:11px; }
.octa-overview-impact { background:rgba(184,234,213,.3); }
.octa-overview-impact li::before { background:var(--oo-green); border-radius:50%; }

.octa-overview-process { padding-block:clamp(80px,10vw,138px); }
.octa-overview-process-grid { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:clamp(60px,10vw,140px); align-items:start; }
.octa-overview-process header { position:sticky; top:110px; }
.octa-overview-process header > p { color:#347c70; }
.octa-overview-process h2 { margin:0; font-size:clamp(42px,5vw,65px); line-height:1; }
.octa-overview-process ol { margin:0; padding:0; border-top:1px solid var(--oo-line); list-style:none; }
.octa-overview-process li { display:grid; grid-template-columns:65px 1fr; gap:27px; padding:31px 0; border-bottom:1px solid var(--oo-line); }
.octa-overview-process li > span { padding-top:5px; color:#347c70; font:italic 11px Georgia,serif; }
.octa-overview-process h3 { margin:0 0 12px; font-size:29px; }
.octa-overview-process li p { margin:0; color:var(--oo-muted); font-size:14px; line-height:1.7; }

.octa-overview-evaluation { padding-block:clamp(75px,9vw,125px); background:var(--oo-mint); }
.octa-overview-evaluation-grid { display:grid; grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr); gap:clamp(60px,10vw,140px); }
.octa-overview-evaluation h2 { margin:0; font-size:clamp(40px,4.8vw,62px); line-height:1; }
.octa-overview-evaluation-grid > div > p:not(.octa-overview-kicker) { margin:27px 0 0; color:#46615c; font-size:15px; line-height:1.75; }
.octa-overview-evaluation ol { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:0; border-top:1px solid rgba(16,39,37,.22); border-left:1px solid rgba(16,39,37,.22); list-style:none; }
.octa-overview-evaluation li { display:grid; grid-template-columns:34px 1fr; gap:13px; min-height:90px; padding:22px; border-right:1px solid rgba(16,39,37,.22); border-bottom:1px solid rgba(16,39,37,.22); align-items:center; font-size:13px; font-weight:700; line-height:1.4; }
.octa-overview-evaluation li span { color:#347c70; font:italic 10px Georgia,serif; }

.octa-overview-role { padding-block:clamp(78px,9vw,128px); background:var(--oo-ink); color:#fff; }
.octa-overview-role .octa-overview-heading { margin-bottom:55px; }
.octa-overview-role ul { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18); border-left:1px solid rgba(255,255,255,.18); list-style:none; }
.octa-overview-role li { display:flex; min-height:170px; padding:25px; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); flex-direction:column; justify-content:space-between; }
.octa-overview-role li span { color:var(--oo-mint); font:italic 10px Georgia,serif; }
.octa-overview-role li strong { font:400 22px/1.15 Georgia,serif; }

.octa-overview-start { padding-block:clamp(78px,9vw,128px); }
.octa-overview-start-grid { display:grid; grid-template-columns:1fr .72fr; gap:clamp(60px,10vw,140px); align-items:start; }
.octa-overview-start h2 { max-width:700px; margin:0; font-size:clamp(42px,5.4vw,70px); line-height:1; }
.octa-overview-start-grid > div:last-child > p { margin:0; color:var(--oo-muted); font-size:15px; line-height:1.8; }
.octa-overview-start-grid > div:last-child > p + p { margin-top:18px; }
.octa-overview-start a { margin-top:30px; }
.octa-overview-closing { padding-block:clamp(70px,9vw,118px); background:var(--oo-green); color:#fff; }
.octa-overview-closing > div { display:grid; grid-template-columns:120px 1fr; gap:clamp(40px,7vw,95px); }
.octa-overview-closing > div > span { color:var(--oo-lime); font:italic clamp(80px,10vw,145px)/.75 Georgia,serif; }
.octa-overview-closing blockquote { margin:0; }
.octa-overview-closing blockquote p { max-width:900px; margin:0; font:400 clamp(41px,5.5vw,71px)/1 Georgia,serif; letter-spacing:-.04em; }
.octa-overview-closing cite { display:block; max-width:700px; margin-top:29px; color:#c7dcd8; font-size:16px; font-style:normal; line-height:1.75; }

@media(max-width:1000px){
	.octa-overview-hero-grid,.octa-overview-principle-grid,.octa-overview-heading,.octa-overview-engagements-heading,.octa-overview-process-grid,.octa-overview-evaluation-grid,.octa-overview-start-grid { grid-template-columns:1fr; }
	.octa-overview-hero-model { max-width:560px; }
	.octa-overview-principle-image { max-width:620px; }
	.octa-overview-reasons { grid-template-columns:repeat(2,1fr); }
	.octa-overview-engagements-heading > span { padding:0; }
	.octa-overview-engagement { grid-template-columns:1fr 1fr; }
	.octa-overview-engagement header { padding-left:clamp(20px,3vw,34px); }
	.octa-overview-engagement > * { border-bottom:1px solid #dcd7c9; }
	.octa-overview-engagement > *:nth-child(3) { border-left:0; }
	.octa-overview-process header { position:static; }
	.octa-overview-role ul { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:620px){
	.octa-overview-shell { width:min(calc(100% - 32px),1180px); }
	.octa-overview-hero { padding-block:55px 70px; }
	.octa-overview-hero h1 { font-size:clamp(42px,12vw,58px); }
	.octa-overview-principle-image,.octa-overview-principle-image img { min-height:0; height:auto; aspect-ratio:4/5; }
	.octa-overview-reasons { grid-template-columns:1fr; }
	.octa-overview-reasons article { min-height:275px; }
	.octa-overview-engagement { grid-template-columns:1fr; }
	.octa-overview-engagement > * + * { border-left:0; }
	.octa-overview-engagement h3 { margin-top:35px; }
	.octa-overview-evaluation ol { grid-template-columns:1fr; }
	.octa-overview-role ul { grid-template-columns:1fr; }
	.octa-overview-closing > div { grid-template-columns:1fr; gap:20px; }
}
