/*
Theme Name: NTUTECH
Theme URI: https://ntutech.org
Author: NTUTECH
Author URI: https://ntutech.org
Description: Dark, high-tech block theme for NTUTECH — IT consulting and deployment in Dalton and Northwest Georgia. Night-operations aesthetic: near-black canvas, cyan/violet beam accents, a live network field, glass panels, and the wordmark's diagonal used structurally.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ntutech
Tags: block-theme, business, dark, one-column, custom-colors, custom-logo, accessibility-ready
*/

/* ===========================================================================
   1. Base
   =========================================================================== */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background: var(--wp--preset--color--canvas);
}

img, svg, video { max-width: 100%; height: auto; }

::selection { background: rgba(34, 211, 238, .28); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link:focus {
	position: fixed !important;
	top: 1rem; left: 1rem; z-index: 9999;
	padding: .8rem 1.3rem;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--void);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

/* Everything kinetic degrades to static here. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.nt-reveal { opacity: 1 !important; transform: none !important; }
	.nt-marquee__track { animation: none !important; }
	/* #nt-field is NOT hidden here. The preference is about motion, not
	   imagery — ntutech.js paints the network field as a single static frame
	   instead. Hiding it stripped the hero bare in any browser that reports
	   the preference (Firefox picks it up from the desktop far more readily
	   than Chrome does, which is exactly how this was found). */
}

/* ===========================================================================
   2. Mark
   =========================================================================== */

.nt-mark {
	display: inline-flex; align-items: center; gap: .62rem;
	text-decoration: none; line-height: 1;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
	color: var(--wp--preset--color--text);
	transition: color .2s ease;
}
.nt-mark:hover { color: #fff; }
.nt-mark__glyph { display: block; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.nt-mark__glyph svg { display: block; width: 100%; height: 100%; }
.nt-mark__glyph svg path { fill: url(#nt-beam); }

/* ===========================================================================
   3. Texture — grid, bloom, rules
   =========================================================================== */

.nt-grid-bg { position: relative; isolation: isolate; }
.nt-grid-bg::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(90% 70% at 50% 35%, #000 0%, transparent 100%);
	        mask-image: radial-gradient(90% 70% at 50% 35%, #000 0%, transparent 100%);
	pointer-events: none;
	z-index: -1;
}

/* `overflow: clip` (not hidden) contains the 150vw bloom below without
   creating a scroll container — hidden here would also break the sticky
   header on ancestors in some engines. Nothing inside needs to escape. */
.nt-glow { position: relative; isolation: isolate; overflow: clip; }
.nt-glow::after {
	content: "";
	position: absolute;
	left: 50%; top: -14rem;
	width: min(92rem, 150vw); height: 46rem;
	transform: translateX(-50%);
	background:
		radial-gradient(42% 52% at 42% 44%, rgba(34,211,238,.20) 0%, transparent 70%),
		radial-gradient(38% 48% at 66% 52%, rgba(124,92,255,.17) 0%, transparent 72%);
	filter: blur(28px);
	pointer-events: none;
	z-index: -1;
}

.nt-rule {
	height: 1px; border: 0; margin: 0;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--line-lit) 18%, var(--wp--preset--color--line-lit) 82%, transparent);
}

/* ===========================================================================
   4. Header
   =========================================================================== */

/* The sticky element must be the template-part WRAPPER, not the header
   itself: a sticky box can only travel within its parent, and WordPress wraps
   the part in a div that is exactly the header's height — so sticking it to
   .nt-header made it scroll away immediately. The wrapper's parent
   (.wp-site-blocks) is the full page, which is the range we want. */
.nt-header-slot { position: sticky; top: 0; z-index: 200; }

.nt-header {
	background: rgba(10, 12, 17, .72);
	backdrop-filter: saturate(170%) blur(16px);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	border-bottom: 1px solid rgba(255,255,255,.07);
}
@supports not (backdrop-filter: blur(1px)) {
	.nt-header { background: var(--wp--preset--color--canvas); }
}

.nt-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative; padding-block: .4rem;
	transition: color .2s ease;
}
.nt-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--text); }
.nt-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--wp--preset--gradient--beam);
	transform: scaleX(0); transform-origin: left;
	transition: transform .26s ease;
}
.nt-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.nt-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Submenu. The TEXT colour has to be stated explicitly: core gives the
   submenu its own colour defaults (sized for a light panel), so forcing only
   the background dark left dark-on-dark text that was effectively invisible.
   The block also carries overlayBackgroundColor/overlayTextColor, which covers
   the mobile overlay; these rules cover the desktop dropdown. */
.nt-header .wp-block-navigation__submenu-container {
	min-width: 15rem;
	background: rgba(17,20,27,.97) !important;
	border: 1px solid var(--wp--preset--color--line-lit) !important;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lift);
	padding: .4rem;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.nt-header .wp-block-navigation__submenu-container,
.nt-header .wp-block-navigation__submenu-container a,
.nt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dim) !important;
}
.nt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	border-radius: 7px;
	padding: .6rem .9rem !important;
	white-space: nowrap;          /* labels were wrapping to two lines */
	transition: background .18s ease, color .18s ease;
}
.nt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.nt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.nt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: rgba(34,211,238,.1);
	color: var(--wp--preset--color--text) !important;
}
/* Separate the dropdown from the header bar it drops out of. */
.nt-header .wp-block-navigation__submenu-container { margin-top: .4rem; }

/* Mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(6,7,10,.985) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding-top: 5rem;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text) !important;
	white-space: normal;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	min-width: 0;
	margin-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--dim) !important;
}

/* ===========================================================================
   5. Hero
   =========================================================================== */

.nt-hero { position: relative; isolation: isolate; overflow: hidden; }

#nt-field {
	position: absolute; inset: 0;
	/* Decorative abs-pos layer: neutralise WordPress's constrained-layout
	   max-width and `margin-left: auto !important`, which would otherwise
	   shrink the field to the content column and offset it. */
	margin: 0 !important;
	max-width: none !important;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: -1;
	opacity: .85;
	-webkit-mask-image: radial-gradient(85% 80% at 50% 42%, #000 20%, transparent 100%);
	        mask-image: radial-gradient(85% 80% at 50% 42%, #000 20%, transparent 100%);
}

.nt-beam-text {
	background: linear-gradient(104deg, #FFFFFF 0%, #CFE9F3 32%, #22D3EE 62%, #7C5CFF 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.nt-beam-text { color: var(--wp--preset--color--text); -webkit-text-fill-color: currentColor; }
}

/* ===========================================================================
   6. Eyebrow / lead
   =========================================================================== */

.nt-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem; font-weight: 500;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
	margin-bottom: 1.4rem;
	padding: .42rem .8rem .42rem .62rem;
	border: 1px solid rgba(34,211,238,.26);
	border-radius: 100px;
	background: rgba(34,211,238,.055);
}
.nt-eyebrow::before {
	content: "";
	width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
	background: var(--wp--preset--color--cyan);
	animation: nt-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes nt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.65); }
	70%  { box-shadow: 0 0 0 7px rgba(34,211,238,0); }
	100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

.nt-lead {
	font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
	line-height: 1.6;
	color: var(--wp--preset--color--dim);
	max-width: 46rem;
}

/* ===========================================================================
   7. Cards
   =========================================================================== */

.nt-grid-cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.nt-grid-cards, .nt-grid-cards--2, .nt-grid-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.nt-grid-cards    { grid-template-columns: repeat(3, 1fr); }
	.nt-grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
	.nt-grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.nt-card {
	position: relative;
	padding: clamp(1.45rem, 1rem + 1.3vw, 2.15rem);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}

.nt-card::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(34,211,238,.55) 30%, rgba(124,92,255,.55) 70%, transparent);
	opacity: .5;
	transition: opacity .3s ease;
}

/* Cursor spotlight; --mx/--my come from assets/js/ntutech.js */
.nt-card::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%), rgba(34,211,238,.13), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: -1;
}

.nt-card:hover, .nt-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--line-lit);
	box-shadow: var(--wp--preset--shadow--lift);
}
.nt-card:hover::after, .nt-card:focus-within::after { opacity: 1; }
.nt-card:hover::before, .nt-card:focus-within::before { opacity: 1; }

.nt-card h3 { margin: 0 0 .55rem; font-size: 1.1875rem; line-height: 1.28; color: var(--wp--preset--color--text); }
.nt-card h3 a { color: inherit; text-decoration: none; }
.nt-card:hover h3 a { color: var(--wp--preset--color--cyan); }
.nt-card p { margin: 0; color: var(--wp--preset--color--dim); font-size: .96rem; line-height: 1.62; }

.nt-card__link::before { content: ""; position: absolute; inset: 0; z-index: 2; }

.nt-icon {
	width: 2.9rem; height: 2.9rem; margin-bottom: 1.15rem;
	display: grid; place-items: center;
	border-radius: 10px;
	color: var(--wp--preset--color--cyan);
	background: rgba(34,211,238,.09);
	border: 1px solid rgba(34,211,238,.2);
	transition: background .3s ease, transform .3s ease;
}
.nt-card:hover .nt-icon { background: rgba(34,211,238,.17); transform: translateY(-2px) scale(1.04); }
.nt-icon svg { width: 1.45rem; height: 1.45rem; display: block; }

.nt-step__num {
	display: block; margin-bottom: .85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
	background: var(--wp--preset--gradient--beam);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ===========================================================================
   7b. Front doors — the business / home split
   =========================================================================== */

.nt-doors {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 880px) {
	.nt-doors { grid-template-columns: repeat(2, 1fr); }
}

.nt-door {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
	border-radius: 16px;
	text-decoration: none;
	background:
		linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.nt-door::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 2px;
	background: var(--wp--preset--gradient--beam);
	opacity: .6;
	transition: opacity .3s ease;
}
.nt-door::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(34,211,238,.12), transparent 70%);
	opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1;
}
.nt-door:hover, .nt-door:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--line-lit);
	box-shadow: var(--wp--preset--shadow--lift);
}
.nt-door:hover::after, .nt-door:focus-visible::after { opacity: 1; }
.nt-door:hover::before, .nt-door:focus-visible::before { opacity: 1; }

.nt-door__eyebrow {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; font-weight: 500;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan);
	margin-bottom: 1.1rem;
}
.nt-door__eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; flex: 0 0 auto;
}
.nt-door h2 {
	margin: 0 0 .7rem;
	font-size: clamp(1.4rem, 1rem + 1.3vw, 1.95rem);
	line-height: 1.18;
	color: var(--wp--preset--color--text);
}
.nt-door p {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--dim);
	font-size: .975rem; line-height: 1.6;
}
.nt-door__list {
	list-style: none; padding: 0; margin: 0 0 1.5rem;
	display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
.nt-door__list li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .04em;
	color: #8b94a6;
	border: 1px solid var(--wp--preset--color--line-lit);
	border-radius: 100px;
	padding: .3rem .65rem;
	margin: 0;
}
.nt-door__cta {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: .9375rem; font-weight: 600;
	color: var(--wp--preset--color--cyan);
	display: inline-flex; align-items: center; gap: .45rem;
}
.nt-door__cta::after {
	content: "\2192";
	transition: transform .25s ease;
}
.nt-door:hover .nt-door__cta::after { transform: translateX(4px); }

/* ===========================================================================
   8. Stats
   =========================================================================== */

.nt-stat { padding: 1.4rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.nt-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.5rem);
	font-weight: 700; line-height: 1; letter-spacing: -.045em;
	color: var(--wp--preset--color--text);
	font-variant-numeric: tabular-nums;
}
.nt-stat__label { display: block; margin-top: .7rem; font-size: .875rem; line-height: 1.5; color: var(--wp--preset--color--dim); }

/* ===========================================================================
   9. Terminal
   =========================================================================== */

.nt-term {
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line);
	background: linear-gradient(180deg, #0D1016 0%, #090B10 100%);
	box-shadow: var(--wp--preset--shadow--lift);
	overflow: hidden;
}
.nt-term__bar {
	display: flex; align-items: center; gap: .5rem;
	padding: .72rem .95rem;
	background: rgba(255,255,255,.03);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.nt-term__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.nt-term__title {
	margin-left: .55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem; letter-spacing: .06em; color: #7A8597;
}
.nt-term__body {
	margin: 0; padding: 1.15rem 1.25rem 1.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem; line-height: 1.85;
	color: #C6CEDC;
	white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.nt-term__body .c  { color: var(--wp--preset--color--cyan); }
.nt-term__body .ok { color: var(--wp--preset--color--lime); }
.nt-term__body .mu { color: #7A8597; }
.nt-term__body .wn { color: #FBBF24; }
.nt-term__cursor {
	display: inline-block; width: .55em; height: 1.05em; vertical-align: text-bottom;
	background: var(--wp--preset--color--cyan);
	animation: nt-blink 1.1s steps(2, start) infinite;
}
@keyframes nt-blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }

/* ===========================================================================
   10. Marquee
   =========================================================================== */

.nt-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.nt-marquee__track { display: flex; width: max-content; gap: 3.25rem; animation: nt-scroll 42s linear infinite; }
.nt-marquee:hover .nt-marquee__track { animation-play-state: paused; }
.nt-marquee__item {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9375rem; letter-spacing: .04em; color: #74808F;
	white-space: nowrap; transition: color .25s ease;
}
.nt-marquee__item:hover { color: var(--wp--preset--color--cyan); }
@keyframes nt-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ===========================================================================
   11. Scroll reveal
   =========================================================================== */

/* Content is NEVER hidden unless the document has proven it can actually
   paint frames. `nt-anim` is set in the head (so there is no flash of visible
   content) and removed again by ntutech.js if no animation frame arrives.
   Without it this rule does not apply and everything is simply visible. */
html.nt-anim .nt-reveal {
	opacity: 0; transform: translateY(12px);
	transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
	will-change: opacity, transform;
}
html.nt-anim .nt-reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================================
   12. Buttons
   =========================================================================== */

.wp-block-button__link {
	position: relative;
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
}
.wp-block-button:not(.is-style-nt-ghost) .wp-block-button__link { box-shadow: 0 0 28px -8px rgba(34,211,238,.6); }
.wp-block-button:not(.is-style-nt-ghost) .wp-block-button__link:hover {
	transform: translateY(-2px); box-shadow: 0 0 38px -6px rgba(34,211,238,.75);
}
.wp-block-button.is-style-nt-ghost .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line-lit);
}
.wp-block-button.is-style-nt-ghost .wp-block-button__link:hover {
	background: rgba(255,255,255,.055); color: #fff;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--cyan);
	transform: translateY(-2px);
}

/* ===========================================================================
   13. Prose measure
   WordPress constrained layout sets margin-left:auto !important on DIRECT
   children, so the measure cap lives on a nested flow wrapper instead.
   =========================================================================== */

/* .nt-stack is the single direct child of every band, so WordPress's
   constrained-layout rules land on it and nothing else. Everything real is a
   grandchild, laid out by plain CSS. */
.nt-stack > * { max-width: none; }
.nt-stack > .nt-lead { max-width: 46rem; }

/* Prose bands cap the text measure but leave full-width components alone. */
.nt-measure > * { max-width: 46rem; }
.nt-measure > .nt-grid-cards,
.nt-measure > .wp-block-columns,
.nt-measure > .nt-term,
.nt-measure > .nt-marquee { max-width: none; }

.wp-block-list { padding-left: 1.1rem; }
.wp-block-list li { margin-bottom: .6rem; color: var(--wp--preset--color--dim); }
.wp-block-list li::marker { color: var(--wp--preset--color--cyan); }

.nt-checks { list-style: none; padding-left: 0; }
.nt-checks li { position: relative; padding-left: 1.85rem; margin-bottom: .85rem; color: var(--wp--preset--color--dim); }
.nt-checks li::before {
	content: "";
	position: absolute; left: 0; top: .5em;
	width: 1.05rem; height: .55rem;
	border-left: 2px solid var(--wp--preset--color--cyan);
	border-bottom: 2px solid var(--wp--preset--color--cyan);
	transform: rotate(-45deg) translateY(-.1em);
}

/* ===========================================================================
   14. Contact Form 7
   =========================================================================== */

.wpcf7 form { margin: 0; }
.wpcf7 .nt-field { display: block; margin-bottom: 1.15rem; }
.wpcf7 label {
	display: block; margin-bottom: .45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--dim);
}
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%; font: inherit; font-size: 1rem;
	color: var(--wp--preset--color--text);
	background: rgba(255,255,255,.035);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 9px; padding: .85rem .95rem;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wpcf7 select {
	appearance: none; -webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #9AA5B8 50%), linear-gradient(135deg, #9AA5B8 50%, transparent 50%);
	background-position: calc(100% - 20px) 1.35em, calc(100% - 14px) 1.35em;
	background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.wpcf7 option { background: #11141B; color: #E9EDF5; }
.wpcf7 textarea { min-height: 9.5rem; resize: vertical; }
.wpcf7 :is(input, select, textarea)::placeholder { color: #5C6676; }
.wpcf7 :is(input, select, textarea):focus {
	outline: none; background: rgba(255,255,255,.055);
	border-color: var(--wp--preset--color--cyan);
	box-shadow: 0 0 0 3px rgba(34,211,238,.16);
}
.wpcf7 input[type="submit"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: .9375rem; font-weight: 600;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--void);
	border: 0; border-radius: 8px; padding: .95rem 1.9rem; cursor: pointer;
	box-shadow: 0 0 28px -8px rgba(34,211,238,.6);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px); background: var(--wp--preset--color--text);
	box-shadow: 0 0 38px -6px rgba(233,237,245,.4);
}
.wpcf7-not-valid-tip { color: #FB7185; font-size: .8125rem; margin-top: .35rem; }
.wpcf7 .wpcf7-response-output {
	border-radius: 9px; border-width: 1px;
	padding: .9rem 1rem !important; margin: 1.25rem 0 0 !important;
	font-size: .9375rem; color: var(--wp--preset--color--text);
}

/* ===========================================================================
   15. Blog
   =========================================================================== */

.nt-posts .wp-block-post-title { font-size: 1.25rem; line-height: 1.28; margin: .55rem 0 .6rem; }
.nt-posts .wp-block-post-title a { color: var(--wp--preset--color--text); text-decoration: none; }
.nt-posts .nt-card:hover .wp-block-post-title a { color: var(--wp--preset--color--cyan); }
.nt-posts .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--dim); font-size: .94rem; }
.nt-posts .wp-block-post-date { color: #7A8597; font-size: .8125rem; }
.nt-posts .wp-block-post-terms a, .nt-posts .taxonomy-category a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan); text-decoration: none;
}

.wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: .875rem; }
.wp-block-query-pagination a { color: var(--wp--preset--color--dim); text-decoration: none; }
.wp-block-query-pagination a:hover { color: var(--wp--preset--color--cyan); }

.nt-article p, .nt-article li { color: #BAC4D4; }
.nt-article h2 { margin-top: 2.6rem; }
.nt-article h3 { margin-top: 2rem; }
.nt-article code {
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--cyan);
	padding: .15em .4em; border-radius: 5px;
	font-family: var(--wp--preset--font-family--mono); font-size: .9em;
}
.nt-article blockquote p { color: var(--wp--preset--color--text); }

/* ===========================================================================
   16. Footer
   =========================================================================== */

.nt-footer { border-top: 1px solid var(--wp--preset--color--line); }
.nt-footer a { color: var(--wp--preset--color--dim); text-decoration: none; transition: color .2s ease; }
.nt-footer a:hover { color: var(--wp--preset--color--cyan); }
.nt-footer .wp-block-list { list-style: none; padding-left: 0; margin: 0; }
.nt-footer .wp-block-list li { margin-bottom: .6rem; }
.nt-footer p { color: #7C8798; }

.nt-colhead {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: .7rem !important; font-weight: 500 !important;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--cyan) !important;
	margin-bottom: 1.15rem;
}

/* ===========================================================================
   17. Utilities
   =========================================================================== */

.screen-reader-text {
	border: 0; clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
}

/* Diagonal section edge — the wordmark's cut, used structurally. */
.nt-cut { position: relative; }
.nt-cut::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -1px; height: 4.5rem;
	background: inherit;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	transform: translateY(-99%);
	pointer-events: none;
}