/**
 * Gini Design System v1 — additive overlay.
 * Scoped to body.gini-design-system-v1. Does not edit Essentials or page HTML.
 *
 * Change log
 * - gini-design-system.php: feature flag, body class, footer enqueue
 * - gini-main.css: tokens, type, colors, buttons, containers, cards, FAQ
 *
 * Rollback: GINI_DESIGN_SYSTEM_V1 false, or ?gini_ds=0, or delete this folder.
 */

body.gini-design-system-v1 {
	--gini-page: #fffbf9;
	--gini-surface: #ffffff;
	--gini-navy: #00283c;
	--gini-editorial: #b29785;
	--gini-text-strong: #000000;
	--gini-text: #737373;
	--gini-blue: #aebccf;
	--gini-stone: #d0c9bc;
	--gini-signal: #e62645;
	--gini-navy-hover: #001c2b;
	--gini-header-box-max: min(1340px, calc(100% - 40px));
	--radius-control: 8px;
	--radius-card: 12px;
	--radius-panel: 16px;
	--radius-feature: 20px;
	--sl-gutter: 20px;
	--sl-gap: 16px;
	--sl-section: 60px;
	--sl-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
	background-color: var(--gini-page);
	color: var(--gini-text);
	font-family: var(--sl-font);
}

@media (min-width: 768px) {
	body.gini-design-system-v1 {
		--sl-gutter: 32px;
		--sl-gap: 20px;
		--sl-section: 80px;
	}
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 {
		--sl-gutter: 48px;
		--sl-gap: 24px;
		--sl-section: 108px;
	}
}

/* 1. Colors — remap Gini custom page tokens without rewriting their stylesheets */
body.gini-design-system-v1 .gt-wh-page {
	--p: var(--gini-navy);
	--a: var(--gini-editorial);
	--h: var(--gini-navy);
	--b: var(--gini-text);
	--m: var(--gini-text);
	--g: #f8f4f0;
	--l: var(--gini-stone);
	--sh: 0 1px 2px rgba(0, 40, 60, 0.04), 0 8px 24px rgba(0, 40, 60, 0.04);
	background: var(--gini-page);
	color: var(--gini-text);
	font-family: var(--sl-font);
}

/* Eyebrows / small labels = Sand. Red is reserved for arrows and active details. */
body.gini-design-system-v1 .gt-kicker,
body.gini-design-system-v1 .gt-wh-kicker,
body.gini-design-system-v1 .gt-wh-hero .gt-wh-kicker,
body.gini-design-system-v1 .gt-wh-reach .gt-wh-kicker,
body.gini-design-system-v1 .gt-section--navy .gt-kicker,
body.gini-design-system-v1 .gt-ai-related .gt-kicker,
body.gini-design-system-v1 .gt-bo-related .gt-kicker,
body.gini-design-system-v1 .gt-tt-related .gt-kicker,
body.gini-design-system-v1 .gt-wh-cap__n,
body.gini-design-system-v1 .gt-bc-step__n,
body.gini-design-system-v1 .gt-wh-cs-big__client,
body.gini-design-system-v1 .gt-bo-case__client,
body.gini-design-system-v1 .gt-ai-case__client,
body.gini-design-system-v1 .gt-tt-case__client,
body.gini-design-system-v1 .gt-ai-branch__tag,
body.gini-design-system-v1 .gt-gt-story__block h3,
body.gini-design-system-v1 .gt-wh-review__source,
body.gini-design-system-v1 .gt-wh-hire__copy h2 .n,
body.gini-design-system-v1 .gt-dgc-hero__eyebrow,
body.gini-design-system-v1 .gt-px-tcard__via {
	color: var(--gini-editorial) !important;
}

body.gini-design-system-v1 .gt-kicker,
body.gini-design-system-v1 .gt-wh-kicker,
body.gini-design-system-v1 .gt-wh-cs-big__client,
body.gini-design-system-v1 .gt-wh-cap__n,
body.gini-design-system-v1 .gt-bc-step__n {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

body.gini-design-system-v1 .gt-wh-page h1,
body.gini-design-system-v1 .gt-wh-page h2,
body.gini-design-system-v1 .gt-wh-page h3,
body.gini-design-system-v1 .gt-wh-page h4 {
	color: var(--gini-navy);
	font-weight: 700;
}

body.gini-design-system-v1 .gt-wh-hero {
	background: var(--gini-page);
}

body.gini-design-system-v1 .gt-wh-brands {
	background: #f8f4f0;
}

/* 2. Typography */
body.gini-design-system-v1 .gt-wh-hero h1 {
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
}

body.gini-design-system-v1 .gt-wh-page h2 {
	font-size: 32px;
	line-height: 1.12;
	font-weight: 700;
}

body.gini-design-system-v1 .gt-wh-page h3,
body.gini-design-system-v1 .gt-wh-cap h3,
body.gini-design-system-v1 .gt-wh-uc h3 {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
}

body.gini-design-system-v1 .gt-wh-lead,
body.gini-design-system-v1 .gt-wh-hero__sub {
	font-size: 18px;
	line-height: 1.5;
	color: var(--gini-text);
}

body.gini-design-system-v1 .gt-wh-page p,
body.gini-design-system-v1 .gt-wh-cap p,
body.gini-design-system-v1 .gt-wh-uc p,
body.gini-design-system-v1 .gt-wh-cs-big p {
	color: var(--gini-text);
	line-height: 1.6;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gt-wh-hero h1 { font-size: 52px; }
	body.gini-design-system-v1 .gt-wh-page h2 { font-size: 38px; }
	body.gini-design-system-v1 .gt-wh-page h3,
	body.gini-design-system-v1 .gt-wh-cap h3,
	body.gini-design-system-v1 .gt-wh-uc h3 { font-size: 25px; }
	body.gini-design-system-v1 .gt-wh-lead,
	body.gini-design-system-v1 .gt-wh-hero__sub { font-size: 19px; }
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gt-wh-hero h1 { font-size: 64px; }
	body.gini-design-system-v1 .gt-wh-page h2 { font-size: 44px; }
	body.gini-design-system-v1 .gt-wh-page h3,
	body.gini-design-system-v1 .gt-wh-cap h3,
	body.gini-design-system-v1 .gt-wh-uc h3 { font-size: 28px; }
	body.gini-design-system-v1 .gt-wh-lead,
	body.gini-design-system-v1 .gt-wh-hero__sub { font-size: 20px; }
}

body.gini-design-system-v1 .gt-wh-hire__copy h2,
body.gini-design-system-v1 .gt-wh-vid__copy h2,
body.gini-design-system-v1 .gt-wh-sec--n h2 {
	color: #fff;
}

body.gini-design-system-v1 .gt-wh-hire__copy h2 {
	font-size: clamp(2.25rem, 4.6vw, 3.35rem);
	color: #fff !important;
}

body.gini-design-system-v1 .gt-wh-prefoot {
	background: var(--gini-page);
}

/* 3. Buttons */
body.gini-design-system-v1 .gt-wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-control);
	border: 2px solid transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	text-decoration: none !important;
	cursor: pointer;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gt-wh-btn {
		min-height: 48px;
		padding: 0 22px;
	}
}

body.gini-design-system-v1 .gt-wh-btn--a,
body.gini-design-system-v1 .gt-wh-btn--d {
	background: var(--gini-navy);
	color: #fff !important;
}

body.gini-design-system-v1 .gt-wh-btn--a:hover,
body.gini-design-system-v1 .gt-wh-btn--d:hover {
	background: var(--gini-navy-hover);
	transform: translateY(-1px);
}

body.gini-design-system-v1 .gt-wh-btn--ghost,
body.gini-design-system-v1 .gt-wh-hero .gt-wh-btn--ghost,
body.gini-design-system-v1 .gt-wh-btn--w {
	background: var(--gini-surface);
	color: var(--gini-navy) !important;
	border: 2px solid var(--gini-navy);
}

body.gini-design-system-v1 .gt-wh-btn--ghost:hover,
body.gini-design-system-v1 .gt-wh-btn--w:hover {
	background: var(--gini-navy);
	color: #fff !important;
}

body.gini-design-system-v1 .gt-wh-cap__link,
body.gini-design-system-v1 .gt-wh-uc__link,
body.gini-design-system-v1 .gt-wh-reach__link,
body.gini-design-system-v1 .gt-wh-cs-sm {
	font-weight: 600;
}

body.gini-design-system-v1 a.gt-wh-cap:hover .gt-wh-cap__link,
body.gini-design-system-v1 a.gt-wh-cs-big:hover .gt-wh-cap__link {
	color: var(--gini-signal) !important;
}

body.gini-design-system-v1 .gt-wh-btn:focus-visible,
body.gini-design-system-v1 .gt-wh-cap:focus-visible,
body.gini-design-system-v1 .gt-wh-cs-big:focus-visible,
body.gini-design-system-v1 .gini-faq-item summary:focus-visible {
	outline: 2px solid var(--gini-navy);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.gini-design-system-v1 .gt-wh-btn,
	body.gini-design-system-v1 .gt-wh-cap,
	body.gini-design-system-v1 .gini-faq-item {
		transition: none;
	}
	body.gini-design-system-v1 .gt-wh-btn--a:hover,
	body.gini-design-system-v1 .gt-wh-btn--d:hover,
	body.gini-design-system-v1 a.gt-wh-cap:hover {
		transform: none;
	}
}

/* 4. Containers */
body.gini-design-system-v1 .gt-wh-wrap,
body.gini-design-system-v1 .gini-faq-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sl-gutter);
	padding-right: var(--sl-gutter);
}

body.gini-design-system-v1 .gt-wh-hero__copy {
	max-width: 100%;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gt-wh-hero__copy { max-width: 560px; }
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gt-wh-hero__copy { max-width: 610px; }
}

body.gini-design-system-v1 .gt-wh-sec {
	padding-top: var(--sl-section);
	padding-bottom: var(--sl-section);
}

body.gini-design-system-v1 .gt-wh-caps,
body.gini-design-system-v1 .gt-wh-cs-featured,
body.gini-design-system-v1 .gt-wh-uc-grid {
	gap: var(--sl-gap);
}

/* 5. Cards */
body.gini-design-system-v1 .gt-wh-cs-big,
body.gini-design-system-v1 .gt-wh-cs-sm,
body.gini-design-system-v1 .gt-wh-uc,
body.gini-design-system-v1 .gt-wh-diff-card,
body.gini-design-system-v1 .gt-wh-review {
	background: var(--gini-surface);
	border: 1px solid #d9d3c9;
	border-radius: var(--radius-card);
	box-shadow: 0 1px 2px rgba(0, 40, 60, 0.04);
}

body.gini-design-system-v1 .gt-wh-cap,
body.gini-design-system-v1 .sl-card--feature {
	border-radius: var(--radius-feature);
	background: var(--gini-surface);
	box-shadow: 0 1px 2px rgba(0, 40, 60, 0.04);
}

body.gini-design-system-v1 .gt-wh-form-card,
body.gini-design-system-v1 .gt-wh-flow__card,
body.gini-design-system-v1 .git-contact__form {
	border-radius: var(--radius-panel);
}

body.gini-design-system-v1 .gt-wh-flow__arrow,
body.gini-design-system-v1 .gt-wh-map__checks li::before,
body.gini-design-system-v1 .gt-bc-compliance__panel li::before,
body.gini-design-system-v1 .gt-wh-badges a:hover {
	color: var(--gini-signal) !important;
}

body.gini-design-system-v1 .gt-wh-vid__btn .play i {
	border-color: transparent transparent transparent var(--gini-signal);
}

body.gini-design-system-v1 .gt-wh-cs-big__meta span,
body.gini-design-system-v1 .gt-wh-tags span {
	border-radius: var(--radius-control);
}

body.gini-design-system-v1 .gt-wh-form-card input,
body.gini-design-system-v1 .gt-wh-form-card select,
body.gini-design-system-v1 .git-contact__form input[type="text"],
body.gini-design-system-v1 .git-contact__form input[type="email"],
body.gini-design-system-v1 .git-contact__form input[type="tel"],
body.gini-design-system-v1 .git-contact__form select,
body.gini-design-system-v1 .git-contact__form textarea {
	border-radius: var(--radius-control);
	min-height: 44px;
}

body.gini-design-system-v1 .git-contact__form input[type="submit"] {
	background: var(--gini-navy) !important;
	border-radius: var(--radius-control);
	min-height: 48px;
	font-weight: 600;
	font-size: 16px;
}

/* 6. FAQ — match Style Lab /design-system-preview/#faq */
body.gini-design-system-v1 .gini-faq-section {
	padding: var(--sl-section) 0 !important;
	background: var(--gini-page) !important;
}

body.gini-design-system-v1 .gini-faq-heading {
	text-align: center !important;
	max-width: 720px;
	margin: 0 auto 40px !important;
}

body.gini-design-system-v1 .gini-faq-kicker {
	display: block;
	margin: 0 0 12px;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gini-editorial) !important;
}

body.gini-design-system-v1 .gini-faq-heading h2 {
	margin: 0 !important;
	font-size: 32px !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em;
	color: var(--gini-navy) !important;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gini-faq-heading h2 { font-size: 38px !important; }
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gini-faq-heading h2 { font-size: 44px !important; }
}

body.gini-design-system-v1 .gini-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gini-faq-grid {
		grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
		gap: 64px;
	}
}

body.gini-design-system-v1 .gini-faq-support h3 {
	margin: 0 0 12px !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--gini-navy) !important;
}

body.gini-design-system-v1 .gini-faq-support p:not(.gini-faq-kicker) {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--gini-text) !important;
	max-width: none;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gini-faq-support h3 { font-size: 25px !important; }
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gini-faq-support h3 { font-size: 28px !important; }
	body.gini-design-system-v1 .gini-faq-support p:not(.gini-faq-kicker) { font-size: 17px; }
}

body.gini-design-system-v1 .gini-faq-list {
	display: block !important;
	counter-reset: gini-faq;
	max-width: none;
	margin: 0;
	gap: 0 !important;
	border-top: 1px solid #cfc8bb;
}

body.gini-design-system-v1 .gini-faq-item {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #cfc8bb !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

body.gini-design-system-v1 .gini-faq-item:hover {
	transform: none !important;
	box-shadow: none !important;
}

body.gini-design-system-v1 .gini-faq-item summary {
	display: grid !important;
	grid-template-columns: 2.4rem 1fr 1.5rem;
	gap: 12px;
	align-items: start;
	padding: 18px 0 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: var(--gini-navy) !important;
	list-style: none;
	cursor: pointer;
}

body.gini-design-system-v1 .gini-faq-item summary::-webkit-details-marker {
	display: none;
}

@media (min-width: 768px) {
	body.gini-design-system-v1 .gini-faq-item summary { font-size: 19px !important; }
}

@media (min-width: 1200px) {
	body.gini-design-system-v1 .gini-faq-item summary { font-size: 20px !important; }
}

body.gini-design-system-v1 .gini-faq-item summary::before {
	counter-increment: gini-faq;
	content: counter(gini-faq, decimal-leading-zero);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--gini-editorial);
	padding-top: 2px;
}

body.gini-design-system-v1 .gini-faq-item summary::after {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 4px;
	justify-self: end;
	background:
		linear-gradient(var(--gini-navy), var(--gini-navy)) center / 18px 2px no-repeat,
		linear-gradient(var(--gini-navy), var(--gini-navy)) center / 2px 18px no-repeat;
}

body.gini-design-system-v1 .gini-faq-item[open] summary::after {
	background: linear-gradient(var(--gini-navy), var(--gini-navy)) center / 18px 2px no-repeat;
}

body.gini-design-system-v1 .gini-faq-content {
	padding: 0 1.8rem 18px calc(2.4rem + 12px) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--gini-text) !important;
}

body.gini-design-system-v1 .gini-faq-content p {
	margin: 0 0 14px !important;
	color: var(--gini-text) !important;
}