/* ==========================================================================
   Tenetra — component styles (supplements theme.json)
   ========================================================================== */

:root {
	--tenetra-rule: 3px;
	--tenetra-radius: 2px;
	--tenetra-shadow: 0 1px 2px rgba(31, 58, 77, .06), 0 8px 24px rgba(31, 58, 77, .06);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #BDD2D9; color: #1F3A4D; }
:where(a, button, input):focus-visible { outline: 2px solid #5687A0; outline-offset: 3px; }

/* ----- Header ------------------------------------------------------------ */
.tenetra-header {
	position: sticky; top: 0; z-index: 50;
	border-bottom: 1px solid rgba(31, 58, 77, .08);
	background-color: #FFFFFF !important;
}
.admin-bar .tenetra-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tenetra-header { top: 46px; } }

.tenetra-lockup { display: inline-flex; align-items: center; text-decoration: none !important; line-height: 0; }
.tenetra-lockup .tenetra-logo { height: 38px; width: auto; display: block; }
.tenetra-lockup--light .tenetra-logo { height: 40px; }

.tenetra-header .wp-block-navigation a { color: #1F3A4D; text-decoration: none; position: relative; }
.tenetra-header .wp-block-navigation a:hover { color: #D21311; }
.tenetra-header .wp-block-navigation .current-menu-item > a::after,
.tenetra-header .wp-block-navigation a[aria-current="page"]::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #D21311;
}
.tenetra-header .wp-block-button__link { padding: .55rem 1.15rem; font-size: .9375rem; }
@media (max-width: 600px) {
	.wp-block-buttons.tenetra-header-cta { display: none !important; }
	.tenetra-lockup .tenetra-logo { height: 28px; }
}
.wp-block-navigation__responsive-container.is-menu-open {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 1.6rem; padding: 2rem;
}

/* ----- Buttons ----------------------------------------------------------- */
.wp-block-button.is-style-ghost-light .wp-block-button__link {
	background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .8);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { background: #fff; color: #1F3A4D; }
.wp-block-button.is-style-ghost-dark .wp-block-button__link {
	background: transparent; color: #1F3A4D; border: 1.5px solid #1F3A4D;
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover { background: #1F3A4D; color: #fff; }
.wp-element-button { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }

/* ----- Eyebrow ----------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase;
	color: #D21311; display: flex; align-items: center; gap: .75rem;
	margin-bottom: 1rem !important;
}
.is-style-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.is-style-eyebrow.has-text-align-center { justify-content: center; }
.is-style-eyebrow.has-mist-color::before { background: #D21311; }

/* ----- Hero -------------------------------------------------------------- */
.tenetra-hero .wp-block-cover__inner-container { display: flex; flex-direction: column; min-height: inherit; }
.tenetra-hero h1 { text-wrap: balance; }
.tenetra-hero-strap {
	margin-top: auto !important; padding-top: var(--wp--preset--spacing--50);
	color: rgba(255, 255, 255, .85);
	font-size: .875rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
}
.tenetra-hero-strap span { color: #D21311; margin: 0 .9em; }

.tenetra-page-hero h1 { text-wrap: balance; }
.tenetra-page-hero--plain { background-image: linear-gradient(160deg, #1F3A4D 0%, #172C3B 100%); position: relative; overflow: hidden; }
.tenetra-page-hero--plain::after {
	content: ""; position: absolute; right: -6vw; bottom: -12vw; width: 46vw; height: 46vw; pointer-events: none;
	border: 2px solid rgba(189, 210, 217, .12); border-radius: 50%;
	box-shadow: 0 0 0 4vw rgba(189, 210, 217, .04), 0 0 0 8vw rgba(189, 210, 217, .03);
}

/* ----- Typography helpers ------------------------------------------------ */
h2.wp-block-heading { text-wrap: balance; }
.tenetra-num {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600; font-size: .875rem; letter-spacing: .12em; color: #D21311;
	margin: 0 0 .9rem !important;
}
.tenetra-sub { color: #5D6065; font-style: italic; margin-top: .25rem !important; }
.tenetra-statement {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 300; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.15; letter-spacing: -.01em;
}
.tenetra-big-mark {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 300; font-size: clamp(3.5rem, 8.5vw, 7.5rem); line-height: .9; letter-spacing: .02em; white-space: nowrap;
	color: #fff; margin: 0;
	border-left: 6px solid #D21311; padding-left: .25em;
}

/* ----- Triad (reframe) --------------------------------------------------- */
.tenetra-triad .wp-block-column {
	border-top: var(--tenetra-rule) solid #1F3A4D; padding-top: 1rem;
}
.tenetra-triad .wp-block-column:last-child { border-top-color: #D21311; }
.tenetra-triad p {
	font-family: var(--wp--preset--font-family--barlow);
	font-size: var(--wp--preset--font-size--large); font-weight: 500; color: #1F3A4D;
}

/* ----- Cards ------------------------------------------------------------- */
.is-style-card {
	background: #fff; border: 1px solid #E3E4E2; border-top: var(--tenetra-rule) solid #1F3A4D;
	border-radius: var(--tenetra-radius); padding: 1.6rem 1.5rem 1.4rem;
	box-shadow: var(--tenetra-shadow); height: 100%;
	transition: transform .2s ease, border-color .2s ease;
}
.is-style-card:hover { transform: translateY(-2px); border-top-color: #D21311; }
.is-style-card h3 { font-size: var(--wp--preset--font-size--large); margin-top: 0; }
.is-style-card p { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.has-paper-background-color .is-style-card { border-color: transparent; border-top-color: #1F3A4D; }

.tenetra-outcome {
	margin-top: auto !important; padding-top: .9rem; border-top: 1px solid #ECECEB;
	color: #28546E; font-family: var(--wp--preset--font-family--barlow); font-size: .9375rem !important;
}
.tenetra-outcome strong {
	display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #D21311; font-weight: 600;
}
.tenetra-cap { display: flex; flex-direction: column; }

/* ----- Challenge / maze -------------------------------------------------- */
.tenetra-challenge .tenetra-maze { margin-top: 0 !important; margin-bottom: 0; }
.tenetra-challenge .tenetra-maze img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
	.tenetra-maze-copy { margin-top: -8.5vw !important; position: relative; }
	.tenetra-maze-copy > * { max-width: min(540px, 40vw) !important; }
}
@media (max-width: 899px) {
	.tenetra-challenge .tenetra-maze img { aspect-ratio: 16 / 8; object-fit: cover; object-position: 30% 50%; }
	.tenetra-maze-copy { margin-top: var(--wp--preset--spacing--40) !important; }
}

/* ----- Pillars (ink) ----------------------------------------------------- */
.tenetra-pillar {
	border-top: var(--tenetra-rule) solid #D21311; padding-top: 1.25rem;
}
.tenetra-pillar h3 { font-size: var(--wp--preset--font-size--x-large); font-weight: 300; margin-top: 0; }
.tenetra-pillar p { color: #BDD2D9; }

/* ----- Offer triangle ------------------------------------------------- */
.tenetra-stack { margin-top: var(--wp--preset--spacing--50) !important; display: flex; flex-direction: column; align-items: center; }
.tenetra-stack > * { margin: 0 !important; }
.tenetra-roaim {
	background: #D21311; color: #fff;
	font-family: var(--wp--preset--font-family--barlow); font-weight: 600; font-size: .8125rem;
	letter-spacing: .2em; text-transform: uppercase; padding: .55rem 1.2rem; border-radius: 999px;
	margin-bottom: 18px !important;
}
/* One shape, three segments: the clip-path is applied once to the whole triangle,
   so every segment shares the same two straight sides and the joins line up exactly. */
.tenetra-tri {
	width: min(100%, 780px); aspect-ratio: 1.4 / 1;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	display: grid; grid-template-rows: 1.25fr 1fr 1fr; row-gap: 6px;
}
.tenetra-tri > * { margin: 0 !important; }
.tenetra-tri-band {
	display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	text-align: center; padding: 0 1rem clamp(.6rem, 2.2vw, 1.3rem);
}
.tenetra-tri-band h3 {
	margin: 0; font-family: var(--wp--preset--font-family--barlow); font-weight: 500;
	font-size: clamp(.82rem, 2.3vw, 1.3rem); line-height: 1.15;
}
.tenetra-tri-band--1 h3 { max-width: 9em; }
.tenetra-tri-kicker {
	margin: .3rem 0 0 !important; font-family: var(--wp--preset--font-family--barlow); font-style: italic;
	font-size: clamp(.7rem, 1.5vw, .95rem); opacity: .85;
}
.tenetra-tri-band--3 .tenetra-tri-kicker { color: #D21311; opacity: 1; }
.tenetra-legend {
	width: 100%; margin-top: var(--wp--preset--spacing--50) !important;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
}
.tenetra-legend > * { margin: 0 !important; }
.tenetra-legend-item { border-top: 4px solid #1F3A4D; padding-top: 1rem; }
.tenetra-legend-item--2 { border-top-color: #28546E; }
.tenetra-legend-item--3 { border-top-color: #8FB3C6; }
.tenetra-legend-label {
	font-family: var(--wp--preset--font-family--barlow); font-weight: 600; font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase; color: #D21311; margin: 0 0 .35rem !important;
}
.tenetra-legend-item h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--large); }
.tenetra-legend-item p:last-child { font-size: var(--wp--preset--font-size--small); }
@media (max-width: 781px) {
	.tenetra-legend { grid-template-columns: 1fr; }
	.tenetra-tri-kicker { display: none; }
}

/* ----- Tile labels: one consistent treatment per section ------------------ */
.tenetra-barrier h3 { font-family: var(--wp--preset--font-family--barlow); text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem; font-weight: 600; }
.tenetra-barrier { border-top-color: #D21311; }
.tenetra-gain h3 { font-family: var(--wp--preset--font-family--barlow); font-weight: 300; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.05; }
.tenetra-domain h3 { font-family: var(--wp--preset--font-family--barlow); font-weight: 500; color: #28546E; }

/* ----- Steps (approach) -------------------------------------------------- */
.tenetra-steps {
	margin-top: var(--wp--preset--spacing--50) !important;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
	border-top: 1px solid #D5D5D3;
}
.tenetra-steps > * { margin: 0 !important; }
.tenetra-step { padding: 1.75rem 1.75rem 2rem 0; border-bottom: 1px solid #D5D5D3; position: relative; }
.tenetra-step + .tenetra-step { padding-left: 0; }
.tenetra-step h3 {
	margin-top: 0; font-family: var(--wp--preset--font-family--barlow); font-weight: 300;
	font-size: var(--wp--preset--font-size--xx-large); color: #1F3A4D; display: flex; align-items: center; gap: .6rem;
}
.tenetra-step h3::before { content: ""; width: 10px; height: 10px; background: #D21311; border-radius: 50%; flex: none; }
@media (max-width: 900px) { .tenetra-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tenetra-steps { grid-template-columns: 1fr; } }

/* ----- Lists ------------------------------------------------------------- */
.is-style-ticks { list-style: none; padding-left: 0; }
.is-style-ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .65rem; line-height: 1.5; }
.is-style-ticks li::before {
	content: ""; position: absolute; left: 0; top: .55em; width: .8rem; height: 2px; background: #D21311;
}

/* ----- People / contact -------------------------------------------------- */
.tenetra-portrait {
	aspect-ratio: 4 / 3; background: linear-gradient(160deg, #ECECEB, #D5D5D3); margin: -1.6rem -1.5rem 1.25rem !important;
	border-radius: var(--tenetra-radius) var(--tenetra-radius) 0 0;
}
.tenetra-contact-card h6 { margin: 1.1rem 0 .2rem; color: #5D6065; }
.tenetra-contact-card h6:first-child { margin-top: 0; }
.tenetra-contact-line { font-family: var(--wp--preset--font-family--barlow); font-size: 1.25rem !important; margin: 0 !important; color: #1F3A4D; }
.tenetra-expect { background: #F6F5F2 !important; border-color: transparent !important; border-top-color: #D21311 !important; }

/* ----- CTA --------------------------------------------------------------- */
.tenetra-cta h2 { text-wrap: balance; }

/* ----- Footer ------------------------------------------------------------ */
.tenetra-footer h6 { margin-bottom: 1rem; }
.tenetra-footer-links { list-style: none; padding: 0; margin: 0; }
.tenetra-footer-links li { margin-bottom: .45rem; }
.tenetra-footer a { text-decoration: none; }
.tenetra-footer a:hover { text-decoration: underline; }
.tenetra-footer-tagline { color: #fff; letter-spacing: .28em; text-transform: uppercase; font-size: .8125rem; font-weight: 500; }
.wp-block-separator.tenetra-footer-rule:not(.is-style-wide):not(.is-style-dots) { width: 100%; max-width: var(--wp--style--global--wide-size); border: 0; border-top: 1px solid rgba(189, 210, 217, .22); opacity: 1; }

/* ----- Section rhythm ---------------------------------------------------- */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
main > .entry-content > .alignfull:first-child, .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.is-style-card, .wp-element-button { transition: none; }
}


/* Cover banners: align inner content to the site's wide grid. */
.wp-block-cover.tenetra-hero,
.wp-block-cover.tenetra-page-hero,
.wp-block-cover.tenetra-cta { padding-left: 0 !important; padding-right: 0 !important; }
.tenetra-hero > .wp-block-cover__inner-container,
.tenetra-page-hero > .wp-block-cover__inner-container,
.tenetra-cta > .wp-block-cover__inner-container {
	padding-left: var(--wp--style--root--padding-left) !important; padding-right: var(--wp--style--root--padding-right) !important;
}
@media (max-width: 700px) {
	.tenetra-hero .wp-block-cover__background,
	.tenetra-page-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(19,36,48,.86) 0%, rgba(19,36,48,.72) 60%, rgba(19,36,48,.5) 100%) !important;
	}
	.tenetra-hero-strap { letter-spacing: .18em; font-size: .75rem; }
	.tenetra-hero-strap span { margin: 0 .5em; }
}
.tenetra-hero > .wp-block-cover__inner-container > .alignwide,
.tenetra-page-hero > .wp-block-cover__inner-container > .alignwide { width: 100%; }
.is-style-card.tenetra-contact-card { height: auto; }

/* ROAIM: full term first, acronym as the supporting mark */
.tenetra-roaim-lead { font-size: var(--wp--preset--font-size--large); color: #fff; }
.tenetra-big-mark-caption {
	margin-top: .9rem !important; padding-left: calc(.25em + 6px);
	font-family: var(--wp--preset--font-family--barlow); font-style: italic; color: #BDD2D9;
}

/* ----- How we close the gap (Our Approach) -------------------------------- */
.tenetra-gap { margin-top: var(--wp--preset--spacing--50) !important; --gap-label: 200px; }
.tenetra-gap > * { margin: 0 !important; }
.tenetra-gap-core {
	position: relative; display: grid; gap: 14px;
	padding: 14px; margin-right: auto !important;
	border: 1px solid #BDD2D9; border-radius: 2px;
	background: linear-gradient(90deg, #F6F5F2 0, #F6F5F2 calc(var(--gap-label) + 28px), transparent calc(var(--gap-label) + 28px));
}
.tenetra-gap-core > * { margin: 0 !important; }
/* Connector from the three capabilities down to "All At Once" */
.tenetra-gap-core::after {
	content: ""; position: absolute; left: calc(14px + var(--gap-label) / 2); bottom: -57px;
	width: 2px; height: 56px; background: #5687A0;
}
.tenetra-gap-core::before {
	content: ""; position: absolute; left: calc(14px + var(--gap-label) / 2 - 5px); bottom: -63px;
	border: 6px solid transparent; border-top: 7px solid #5687A0; border-bottom: 0;
}
.tenetra-gap-row { display: grid; grid-template-columns: var(--gap-label) minmax(0, 1fr); gap: 2rem; align-items: center; }
.tenetra-gap-row > * { margin: 0 !important; }
.tenetra-gap-label {
	background: #1F3A4D; color: #fff; text-align: center;
	font-family: var(--wp--preset--font-family--barlow); font-weight: 500; font-size: 1.2rem; letter-spacing: .01em;
	padding: 1.6rem 1rem; border-radius: 2px;
}
.tenetra-gap-text { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: #5D6065; max-width: 64ch; }
.tenetra-gap-text strong { color: #D21311; font-weight: 600; }
.tenetra-gap-rule.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 100%; max-width: none; border: 0; border-top: 1.5px dashed #BDD2D9; background: none; opacity: 1;
	margin: 44px 0 18px !important;
}
.tenetra-gap-row--final { padding-left: 15px; }
.tenetra-gap-row--final .tenetra-gap-label { background: #D21311; }
@media (max-width: 700px) {
	.tenetra-gap { --gap-label: 100%; }
	.tenetra-gap-core { background: #F6F5F2; }
	.tenetra-gap-row { grid-template-columns: 1fr; gap: .75rem; }
	.tenetra-gap-label { padding: .9rem 1rem; }
	.tenetra-gap-core::after { left: 50%; }
	.tenetra-gap-core::before { left: calc(50% - 5px); }
	.tenetra-gap-row--final { padding-left: 0; }
}

/* ----- Mobile menu overlay ------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem max(24px, env(safe-area-inset-right, 0px)) 2rem max(24px, env(safe-area-inset-left, 0px)) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important; padding-top: 3.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important; justify-content: flex-start !important; gap: 1.1rem !important; width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--barlow); font-size: 1.9rem; font-weight: 300; color: #FFFFFF !important;
	padding: .25rem 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: #BDD2D9 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container-close { top: 1.25rem !important; right: max(24px, env(safe-area-inset-right, 0px)) !important; }
.wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ----- What to expect (Contact): numbered steps ----------------------------- */
.tenetra-expect h3 { margin-bottom: 1.25rem !important; }
.tenetra-expect-list { display: grid; gap: 0; counter-reset: none; }
.tenetra-expect-list > * { margin: 0 !important; }
.tenetra-expect-item {
	display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start;
	padding: 1.1rem 0; border-top: 1px solid #E3E4E2;
}
.tenetra-expect-item:first-child { border-top: 0; padding-top: .25rem; }
.tenetra-expect-item > * { margin: 0 !important; }
.tenetra-expect-num {
	width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #1F3A4D; color: #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--barlow); font-weight: 500; font-size: 1.25rem; line-height: 1;
}
.tenetra-expect-item:last-child .tenetra-expect-num { background: #D21311; }
.tenetra-expect-text {
	font-family: var(--wp--preset--font-family--barlow); font-size: 1.15rem; line-height: 1.45; color: #1F3A4D; padding-top: .45rem;
}
.is-style-card.tenetra-expect { height: auto; }
.is-style-card .tenetra-expect-text { font-size: 1.15rem; line-height: 1.45; }

/* ----- Home hero as a strip at the image's own proportions (3:1) ------------
   The image is shown at or below its natural size instead of being stretched. */
.wp-block-cover.tenetra-hero { min-height: 0 !important; aspect-ratio: 3 / 1; }
.tenetra-hero .wp-block-cover__inner-container { min-height: 0; justify-content: center; }
.tenetra-hero h1 { margin-top: .25rem !important; }
.tenetra-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--30) !important; }
@media (max-width: 1100px) {
	/* Text no longer fits inside a 3:1 strip: keep the strip across the top, text on Ink below. */
	.wp-block-cover.tenetra-hero {
		aspect-ratio: auto; background: #1F3A4D;
		padding-top: calc(33.333vw + var(--wp--preset--spacing--40)) !important;
	}
	.tenetra-hero .wp-block-cover__image-background { height: 33.333vw !important; bottom: auto !important; }
	.tenetra-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(31,58,77,0) 0, rgba(31,58,77,0) calc(33.333vw - 3rem), #1F3A4D 33.333vw) !important;
		opacity: 1 !important;
	}
}
