/* ==========================================================================
   GPULoom — Design Polish, Part A: content & section layer
   --------------------------------------------------------------------------
   Scope: the page-content components only (hero/story, section heads, feature
   cards, hub/category grids, model lists, dark band, quote/contact, buttons and
   links **inside page content**).

   Deliberately NOT in scope here: `body`, `:root` re-mapping of existing plugin
   tokens, `.gd-global-header`, `.gd-global-nav`, `.gd-global-footer`,
   `.gd-global-search`, `.gd-shell`. Those are shared with product pages and
   live in Part B (the site-wide plugin), so a page-only deploy can never make
   the site look inconsistent between page types.

   Cascade note: this block is printed *inside the document body*, after the
   LiteSpeed-combined stylesheet in <head>. At equal specificity the later
   declaration wins, so `!important` is only added where the plugin's own rule
   already used `!important` (and must therefore be matched).

   Motion rules follow Emil Kowalski's design-engineering rules:
   transform/opacity only, custom ease-out curves, <300ms UI timings, hover
   gated behind `(hover: hover) and (pointer: fine)`, and `prefers-reduced-motion`
   handled in the same file as the motion itself.
   ========================================================================== */

:root {
	/* Ink scale — cool-tinted neutrals, never pure grey */
	--gp-ink: #0c1c2a;
	--gp-ink-2: #3a4e5e;
	--gp-ink-3: #5a7180;
	--gp-ink-4: #8d9faa;

	/* Hairlines & surfaces */
	--gp-hairline: rgb(11 34 57 / 0.1);
	--gp-hairline-2: rgb(11 34 57 / 0.16);
	--gp-surface-2: #f6f9fb;
	--gp-surface-3: #eef4f9;

	/* Radii */
	--gp-r-xs: 6px;
	--gp-r-sm: 10px;
	--gp-r-md: 14px;
	--gp-r-lg: 18px;
	--gp-r-pill: 999px;

	/* Layered shadows — replaces hard 1px borders for elevation */
	--gp-shadow-1: 0 1px 2px rgb(11 34 57 / 0.05), 0 1px 3px rgb(11 34 57 / 0.04);
	--gp-shadow-2: 0 6px 16px -6px rgb(11 34 57 / 0.14), 0 2px 6px -2px rgb(11 34 57 / 0.06);
	--gp-shadow-3: 0 22px 44px -20px rgb(11 34 57 / 0.3), 0 6px 16px -8px rgb(11 34 57 / 0.12);

	/* Custom curves — built-ins are too weak (emil-design-eng) */
	--gp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--gp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	/* Durations — UI stays under 300ms */
	--gp-dur-press: 140ms;
	--gp-dur-ui: 180ms;
	--gp-dur-pop: 220ms;

	/* Type — system-first grotesque, no network request */
	--gp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* --------------------------------------------------------------------------
   1. Content type system
   --------------------------------------------------------------------------
   Everything inside page content switches to the system-first grotesque in one
   rule, so headings and body copy in the same card can never disagree. The
   shared chrome (header/nav/footer) is deliberately left on its current stack
   until Part B ships, so this layer cannot make one page template look
   different from another.

   The plugin hard-codes Arial on `.gd`, on `.gd h1…p` and on the `gp-*` content
   blocks, so those exact selectors are matched here and won on document order
   (this block prints after the head stylesheet). */
.entry-content,
.gd,
.gd h1,
.gd h2,
.gd h3,
.gd p,
.gp-links,
.gp-hub,
.gp-hubdir,
.gnx-static,
.gp-postlinks {
	font-family: var(--gp-font-sans);
}

/* --------------------------------------------------------------------------
   2. Hero / story slider
   -------------------------------------------------------------------------- */

.gd-story h1,
.gd-story h2 {
	font-family: var(--gp-font-sans) !important;
	font-weight: 600 !important;
	/* Measured, not guessed: with the widest common fallback face, the first
	   authored <br> line is 577px at 44px inside a 589px column. 44px is
	   therefore the largest size that keeps both authored lines intact. */
	font-size: clamp(33px, 9vw, 46px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.028em !important;
	text-wrap: balance;
}

/* The hero's text column drops to 47vw above 700px, so cap the size there */
@media (min-width: 701px) {
	.gd-story h1,
	.gd-story h2 {
		font-size: clamp(30px, 3.4vw, 43px) !important;
	}
}

.gd-story__label {
	gap: 11px;
	margin: 0 0 clamp(18px, 2.2vw, 38px) !important;
	color: #40637c !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
}

.gd-story__label::before {
	width: 26px;
	height: 2px;
	border-radius: 2px;
}

.gd-story__body {
	max-width: 620px;
	margin-top: clamp(16px, 1.8vw, 26px) !important;
	color: #3f586b !important;
	font-size: clamp(14.5px, 1vw, 17px);
	line-height: 1.62;
	text-wrap: pretty;
}

.gd-story__meta {
	margin-top: clamp(20px, 3.2vw, 46px) !important;
	color: #5c7488 !important;
	font-size: clamp(12.5px, 0.9vw, 14px);
	line-height: 1.6;
	letter-spacing: 0.005em;
}

/* Slide change: crossfade stays, but on a strong curve instead of `ease` */
.gd-story__slide {
	transition: opacity 620ms var(--gp-ease-out), visibility 620ms linear !important;
}

/* Slow, barely-perceptible push-in on the active scene — decorative only,
   so it lives in the rare/first-time tier and is reduced-motion gated. */
@media (prefers-reduced-motion: no-preference) {
	.gd-story__scene {
		transform: scale(1.055);
		transition: transform 7s var(--gp-ease-out);
	}

	.gd-story__slide.is-active .gd-story__scene {
		transform: scale(1);
	}
}

/* Pagination reads as a progress indicator, not four disconnected dashes */
.gd-story__dot {
	width: clamp(20px, 2vw, 30px) !important;
	min-width: 0 !important;
	height: 3px !important;
	border-radius: var(--gp-r-pill) !important;
	background: rgb(11 34 57 / 0.22) !important;
	transition: width 260ms var(--gp-ease-out), background-color 200ms ease, transform 140ms var(--gp-ease-out) !important;
}

.gd-story__dot[aria-current="true"] {
	width: clamp(34px, 3.4vw, 52px) !important;
	background: #0672ce !important;
}

.gd-story__dot:active {
	transform: scaleY(2);
}

/* Arrows: always reachable on desktop hover, but they now ease in from the
   correct side instead of just appearing. Hidden under 700px by the plugin. */
.gd-story__arrow {
	background: rgb(255 255 255 / 0.9) !important;
	border-color: rgb(11 34 57 / 0.14) !important;
	box-shadow: 0 6px 18px -6px rgb(11 34 57 / 0.28) !important;
	transition: opacity var(--gp-dur-ui) var(--gp-ease-out), background-color var(--gp-dur-ui) ease,
		transform var(--gp-dur-ui) var(--gp-ease-out), border-color var(--gp-dur-ui) ease !important;
}

@media (hover: hover) and (pointer: fine) {
	.gd-story__arrow:hover {
		background: #fff !important;
		border-color: rgb(11 34 57 / 0.24) !important;
	}

	.gd-story__arrow--prev:hover {
		transform: translateY(-50%) translateX(-2px);
	}

	.gd-story__arrow--next:hover {
		transform: translateY(-50%) translateX(2px);
	}
}

/* Entry stagger for the active slide's copy — page-load only, no JS. */
@media (prefers-reduced-motion: no-preference) {
	.gd-story__slide.is-active .gd-story__label,
	.gd-story__slide.is-active h1,
	.gd-story__slide.is-active h2,
	.gd-story__slide.is-active .gd-story__body,
	.gd-story__slide.is-active .gd-story__meta {
		animation: gp-rise 620ms var(--gp-ease-out) both;
	}

	.gd-story__slide.is-active .gd-story__label {
		animation-delay: 40ms;
	}
	.gd-story__slide.is-active h1,
	.gd-story__slide.is-active h2 {
		animation-delay: 100ms;
	}
	.gd-story__slide.is-active .gd-story__body {
		animation-delay: 180ms;
	}
	.gd-story__slide.is-active .gd-story__meta {
		animation-delay: 250ms;
	}
}

@keyframes gp-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   2. Section rhythm & headings
   -------------------------------------------------------------------------- */

.gd-section {
	padding: clamp(48px, 6vw, 86px) 0;
}

.gd-section__head {
	margin-bottom: clamp(22px, 2.6vw, 34px);
}

.gd-section__head h2,
.gd-why h2,
.gd-quote h2,
.gd-project h2 {
	font-weight: 600 !important;
	letter-spacing: -0.022em !important;
}

.gd-section__head h2 {
	font-size: clamp(26px, 2.6vw, 36px) !important;
	line-height: 1.16 !important;
	color: var(--gp-ink) !important;
	text-wrap: balance;
}

.gd-section__head p {
	margin-top: 6px;
	color: var(--gp-ink-3);
	font-size: 14.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

.gd-kicker {
	display: block;
	margin-bottom: 10px;
	color: #4a6b82;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Feature cards — elevation instead of a hard 1px box
   -------------------------------------------------------------------------- */

.gd-feature {
	border: 1px solid var(--gp-hairline);
	border-radius: var(--gp-r-md);
	background: #fff;
	box-shadow: var(--gp-shadow-1);
	overflow: hidden;
	transition: transform var(--gp-dur-pop) var(--gp-ease-out),
		box-shadow var(--gp-dur-pop) var(--gp-ease-out), border-color var(--gp-dur-pop) ease;
}

@media (hover: hover) and (pointer: fine) {
	.gd-feature:hover {
		transform: translateY(-3px);
		border-color: var(--gp-hairline-2);
		box-shadow: var(--gp-shadow-3);
	}
}

/* One consistent "plinth" for every card instead of the plugin's three
   different pastels — a uniform product stage reads calmer and more premium. */
.gd-feature__image,
.gd-feature:nth-child(2) .gd-feature__image,
.gd-feature:nth-child(3) .gd-feature__image {
	background: linear-gradient(180deg, #f7fbfd 0%, #eaf3f9 100%)
		!important;
	box-shadow: inset 0 -1px 0 var(--gp-hairline);
}

.gd-feature__image img {
	transition: transform 320ms var(--gp-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
	.gd-feature:hover .gd-feature__image img {
		transform: scale(1.04);
	}
}

.gd-feature h3 {
	margin-bottom: 10px !important;
	color: var(--gp-ink) !important;
	font-size: clamp(19px, 1.35vw, 22px) !important;
	font-weight: 600 !important;
	line-height: 1.24 !important;
	letter-spacing: -0.012em !important;
}

.gd-feature p {
	margin-bottom: 22px !important;
	color: var(--gp-ink-2);
	font-size: 14.5px;
	line-height: 1.62;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Links & buttons (page content only)
   -------------------------------------------------------------------------- */

.gd-link {
	gap: 8px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.gd-link .gd-icon {
	transition: transform var(--gp-dur-ui) var(--gp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.gd-link:hover .gd-icon {
		transform: translateX(3px);
	}
}

.gd-btn {
	min-height: 46px;
	padding: 0 clamp(16px, 1.6vw, 22px);
	border-width: 1px;
	border-radius: var(--gp-r-sm);
	box-shadow: var(--gp-shadow-1);
	font-weight: 600;
	letter-spacing: -0.006em;
	transition: background-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease,
		border-color var(--gp-dur-ui) ease, box-shadow var(--gp-dur-ui) ease,
		transform var(--gp-dur-press) var(--gp-ease-out);
}

.gd-btn--primary {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), var(--gp-shadow-1);
}

.gd-btn:active {
	transform: scale(0.975);
}

@media (hover: hover) and (pointer: fine) {
	.gd-btn:hover {
		box-shadow: var(--gp-shadow-2);
	}

	.gd-btn--primary:hover {
		background: #055ba8;
		border-color: #055ba8;
	}
}

/* --------------------------------------------------------------------------
   5. Hub / category tiles
   -------------------------------------------------------------------------- */

.gd-category-grid {
	border-radius: var(--gp-r-md);
	overflow: hidden;
	box-shadow: var(--gp-shadow-1);
}

.gd-category {
	font-weight: 600;
	letter-spacing: -0.006em;
	transition: background-color var(--gp-dur-ui) ease, color var(--gp-dur-ui) ease,
		transform var(--gp-dur-press) var(--gp-ease-out);
}

.gd-category span::after {
	transition: transform var(--gp-dur-ui) var(--gp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.gd-category:hover span::after {
		transform: translateX(3px);
	}
}

.gd-category:active {
	transform: scale(0.99);
}

/* --------------------------------------------------------------------------
   6. Dark project band — depth instead of flat fill
   -------------------------------------------------------------------------- */

.gd-project {
	background: linear-gradient(180deg, #0b2440 0%, #0e2841 52%, #0a1f38 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.gd-project h2 {
	font-size: clamp(26px, 2.6vw, 36px) !important;
	letter-spacing: -0.024em !important;
	line-height: 1.16 !important;
}

.gd-project-item h3 {
	font-size: clamp(16px, 1.15vw, 18px) !important;
	font-weight: 600 !important;
	letter-spacing: -0.012em !important;
}

.gd-project-item p {
	color: rgb(255 255 255 / 0.74) !important;
	line-height: 1.62;
	text-wrap: pretty;
}

.gd-project-item > .gd-icon {
	color: #8ecbf3;
}

.gd-project-item .gd-link {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. "Why GPULoom" block
   -------------------------------------------------------------------------- */

.gd-why h2 {
	font-size: clamp(27px, 2.7vw, 38px) !important;
	line-height: 1.14 !important;
	color: var(--gp-ink) !important;
	text-wrap: balance;
}

.gd-why__copy > p {
	color: var(--gp-ink-2);
	font-size: 15px;
	line-height: 1.7;
	text-wrap: pretty;
}

.gd-why__point {
	font-weight: 600;
	letter-spacing: -0.006em;
}

.gd-company-media {
	border-radius: var(--gp-r-md);
	overflow: hidden;
	box-shadow: var(--gp-shadow-3);
}

.gd-company-media__play {
	transition: transform var(--gp-dur-ui) var(--gp-ease-out), background-color var(--gp-dur-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
	.gd-company-media__play:hover {
		transform: scale(1.06);
	}
}

/* --------------------------------------------------------------------------
   8. Quote / contact strip
   -------------------------------------------------------------------------- */

.gd-quote h2 {
	font-size: clamp(24px, 2.3vw, 31px) !important;
	line-height: 1.18 !important;
	color: var(--gp-ink) !important;
}

.gd-quote p {
	color: var(--gp-ink-2);
	line-height: 1.6;
	text-wrap: pretty;
}

.gd-contact {
	border-bottom-color: var(--gp-hairline);
	transition: background-color var(--gp-dur-ui) ease, transform var(--gp-dur-press) var(--gp-ease-out);
}

.gd-contact b {
	font-weight: 600;
	letter-spacing: -0.006em;
}

.gd-contact .gd-icon {
	transition: transform var(--gp-dur-ui) var(--gp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.gd-contact:hover .gd-icon:last-child {
		transform: translateX(3px);
	}
}

/* --------------------------------------------------------------------------
   9. Model / guide lists and brand chips (`gp-links`)
   -------------------------------------------------------------------------- */

.gp-links {
	padding: clamp(40px, 4.6vw, 60px) 0;
}

.gp-links__col h2,
.gp-links__wrap > h2 {
	margin-bottom: 16px;
	color: #3b5464;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.gp-links .gp-links__list li {
	padding: 9.5px 0;
	border-bottom-color: rgb(11 34 57 / 0.07);
	font-size: 14px;
	line-height: 1.55;
}

.gp-links .gp-links__list a {
	display: inline-flex;
	align-items: center;
	color: var(--gp-ink-2);
	transition: color var(--gp-dur-ui) ease, transform var(--gp-dur-ui) var(--gp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.gp-links .gp-links__list li:hover a {
		transform: translateX(3px);
	}
}

.gp-links__id {
	margin-left: 7px;
	padding: 1px 6px;
	border-radius: var(--gp-r-xs);
	background: var(--gp-surface-3);
	color: var(--gp-ink-4);
	font-size: 10.5px;
	letter-spacing: 0.01em;
}

.gp-links .gp-links__brands a {
	padding: 6px 12px;
	border-color: var(--gp-hairline);
	color: var(--gp-ink-2);
	font-weight: 500;
	transition: border-color var(--gp-dur-ui) ease, background-color var(--gp-dur-ui) ease,
		color var(--gp-dur-ui) ease, transform var(--gp-dur-press) var(--gp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.gp-links .gp-links__brands a:hover {
		border-color: rgb(6 114 206 / 0.45);
		background: #f4fafe;
		color: #0672ce;
	}
}

.gp-links .gp-links__brands a:active {
	transform: scale(0.97);
}

.gp-links__more a {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   10. Focus visibility — one coherent ring everywhere in page content
   -------------------------------------------------------------------------- */

.gd a:focus-visible,
.gd button:focus-visible,
.gp-links a:focus-visible,
.entry-content a:focus-visible {
	outline: 2px solid #0672ce;
	outline-offset: 2px;
	border-radius: var(--gp-r-xs);
}

/* --------------------------------------------------------------------------
   11. Scroll-driven reveals — CSS-only, no JS, no layout thrash.
   `animation-timeline: view()` is progressive: browsers without it simply
   never run the animation, so content is always visible.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.gd-section__head,
		.gd-feature,
		.gd-project-item,
		.gd-why__grid,
		.gp-links__col {
			animation-name: gp-reveal;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 0% entry 32%;
		}

		/* 45ms stagger between siblings — short enough to never feel slow */
		.gd-feature:nth-child(2),
		.gd-project-item:nth-child(2),
		.gp-links__col:nth-child(2) {
			animation-range: entry 4% entry 36%;
		}

		.gd-feature:nth-child(3),
		.gd-project-item:nth-child(3),
		.gp-links__col:nth-child(3) {
			animation-range: entry 8% entry 40%;
		}
	}
}

@keyframes gp-reveal {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   12. Mobile / touch corrections
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.gd-section__head {
		display: block;
	}

	.gd-story__meta {
		line-height: 1.55;
	}
}

/* Kill the 300ms tap delay and the grey tap flash on touch */
.gd a,
.gd button,
.gp-links a {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   13. Reduced motion — fewer and gentler, never zero
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gd-story__scene,
	.gd-feature,
	.gd-feature__image img,
	.gd-story__arrow,
	.gp-links .gp-links__list a,
	.gd-contact,
	.gd-category,
	.gp-links .gp-links__brands a {
		transform: none !important;
		animation: none !important;
	}

	.gd-section__head,
	.gd-feature,
	.gd-project-item,
	.gd-why__grid,
	.gp-links__col {
		animation: none !important;
		opacity: 1 !important;
	}

	.gd-story__slide {
		transition-duration: 200ms !important;
	}

	.gd-story__slide.is-active .gd-story__label,
	.gd-story__slide.is-active h1,
	.gd-story__slide.is-active h2,
	.gd-story__slide.is-active .gd-story__body,
	.gd-story__slide.is-active .gd-story__meta {
		animation: gp-fade 200ms ease both !important;
	}
}

@keyframes gp-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}