/* ==========================================================================
   Logogeeks: trust, transparency, always there
   ========================================================================== */

:root {
	--paper: var(--wp--preset--color--base);
	--ink: var(--wp--preset--color--contrast);
	--ember: var(--wp--preset--color--accent-1);
	--signal: var(--wp--preset--color--accent-2);
	--night: var(--wp--preset--color--accent-3);
	--slate: var(--wp--preset--color--accent-4);
	--stone: var(--wp--preset--color--accent-5);
	--line: color-mix(in srgb, var(--ink) 14%, transparent);
	--serif: var(--wp--preset--font-family--literata);
	--mono: var(--wp--preset--font-family--fira-code);
	--header-h: 72px;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { -webkit-font-smoothing: antialiased; }
:root .wp-site-blocks > * { margin-block: 0; }
:root .lg-main .wp-block-post-content > * { margin-block: 0; }
:root .lg-section :is(p, h1, h2, h3, ul, ol) { margin-block: 0; }

.lg-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
	box-sizing: border-box;
}

.lg-section { padding-block: clamp(80px, 11vw, 150px); }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Shared type ------------------------------------------------------------ */
.lg-eyebrow {
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ember);
}
.lg-section h2 {
	font-size: clamp(2.1rem, 4.4vw, 3.6rem);
	max-width: 18ch;
	margin-top: 14px !important;
}
.lg-section h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.lg-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--slate);
	max-width: 52ch;
	margin-top: 18px !important;
}
.lg-head { margin-bottom: clamp(40px, 6vw, 72px); }

/* Buttons ------------------------------------------------------------------ */
.lg-section .wp-block-buttons, .lg-header .wp-block-buttons { gap: 12px; }
:root .wp-block-button__link {
	background: var(--ink);
	color: var(--paper);
	padding: 0.95rem 1.6rem;
	font-size: 0.98rem;
	transition: transform 0.2s ease, background 0.2s ease;
}
:root .wp-block-button__link:hover { background: var(--ember); color: #fff; transform: translateY(-1px); }
:root .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}
:root .is-style-outline .wp-block-button__link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Tick lists */
:root .lg-ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
:root .lg-ticks li { margin: 0; padding-left: 28px; position: relative; font-size: 0.98rem; }
.lg-ticks li::before {
	content: "";
	position: absolute; left: 0; top: 0.32em;
	width: 16px; height: 16px; border-radius: 50%;
	background: color-mix(in srgb, var(--signal) 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent);
}
.lg-ticks li::after {
	content: "";
	position: absolute; left: 5px; top: calc(0.32em + 4px);
	width: 5px; height: 8px;
	border: solid var(--signal); border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Header ------------------------------------------------------------------- */
.lg-header-part {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--paper) 86%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .lg-header-part { top: 32px; }
:root .lg-header__inner {
	height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
:root .lg-header__inner > * { margin: 0; }
:root .lg-header .wp-block-button__link { padding: 0.65rem 1.2rem; font-size: 0.9rem; }

.lg-mark a {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em;
	text-decoration: none; color: inherit;
}
.lg-mark a::before {
	content: "";
	width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 3px;
	background: linear-gradient(var(--ember), var(--ember)) 7px 7px / 5px 5px no-repeat;
}

.lg-nav { display: flex; gap: 28px; font-size: 0.92rem; }
.lg-nav a, .lg-footer__nav a { text-decoration: none; color: inherit; opacity: 0.75; transition: opacity 0.2s; }
.lg-nav a:hover, .lg-footer__nav a:hover { opacity: 1; }
@media (max-width: 860px) { .lg-nav { display: none; } }

/* Hero --------------------------------------------------------------------- */
.lg-hero { padding-block: clamp(48px, 7vw, 90px) clamp(64px, 8vw, 110px); overflow: hidden; }
:root .lg-hero__grid {
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 64px);
	align-items: center;
	min-height: calc(100svh - var(--header-h) - 160px);
}
:root .lg-hero__grid > * { margin: 0; }
.lg-hero__copy { display: grid; gap: 26px; justify-items: start; }

.lg-status {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--mono); font-size: 0.78rem; color: var(--slate);
	border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 12px;
	background: color-mix(in srgb, var(--paper) 60%, #fff);
}
.lg-status::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent);
	animation: lg-pulse 2.4s ease-out infinite;
}
@keyframes lg-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
	70%, 100% { box-shadow: 0 0 0 10px transparent; }
}

.lg-display {
	font-size: clamp(2.8rem, 6.4vw, 5.6rem) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.03em !important;
}
.lg-display em { font-style: italic; color: var(--ember); }
.lg-hero .lg-lede { margin-top: 0 !important; max-width: 40ch; }
.lg-hero__ticks { margin-top: 6px !important; }

/* Glass box stack */
.lg-stack { position: relative; height: clamp(400px, 46vw, 580px); perspective: 1800px; }
.lg-stack__scene {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-36deg);
}
.lg-layer {
	position: absolute; left: 50%; top: 50%;
	width: 320px; height: 230px; margin: -115px 0 0 -160px;
	box-sizing: border-box; padding: 18px;
	border-radius: 14px; border: 1px solid var(--line);
	background: color-mix(in srgb, #fff 72%, var(--paper));
	box-shadow: 0 40px 70px -40px rgba(16, 32, 43, 0.45);
	transform-style: preserve-3d;
}
.lg-layer__tag {
	position: absolute; left: 0; bottom: -30px;
	font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--slate); white-space: nowrap;
}
.lg-layer--care { background: var(--night); border-color: var(--night); }

/* Layer 01: design */
.lg-ui__bar { display: flex; gap: 5px; margin-bottom: 12px; }
.lg-ui__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.lg-ui__hero { height: 74px; border-radius: 8px; background: linear-gradient(120deg, var(--ember), color-mix(in srgb, var(--ember) 55%, var(--paper))); }
.lg-ui__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.lg-ui__cards i { height: 76px; border-radius: 6px; background: var(--stone); }

/* Layer 02: content */
.lg-lines { display: grid; gap: 9px; }
.lg-lines b { display: block; height: 14px; width: 62%; border-radius: 4px; background: var(--ink); margin-bottom: 6px; }
.lg-lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.lg-lines i:nth-of-type(1) { width: 92%; } .lg-lines i:nth-of-type(2) { width: 86%; }
.lg-lines i:nth-of-type(3) { width: 95%; } .lg-lines i:nth-of-type(4) { width: 70%; }
.lg-lines i:nth-of-type(5) { width: 88%; } .lg-lines i:nth-of-type(6) { width: 54%; }
.lg-lines i:nth-of-type(7) { width: 80%; } .lg-lines i:nth-of-type(8) { width: 64%; }

/* Layer 03: code */
.lg-code { display: grid; gap: 9px; }
.lg-code i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--slate) 40%, transparent); }
.lg-code i:nth-child(1) { width: 40%; background: var(--ember); }
.lg-code i:nth-child(2) { width: 62%; margin-left: 18px; }
.lg-code i:nth-child(3) { width: 48%; margin-left: 36px; background: var(--signal); }
.lg-code i:nth-child(4) { width: 56%; margin-left: 36px; }
.lg-code i:nth-child(5) { width: 30%; margin-left: 18px; }
.lg-code i:nth-child(6) { width: 52%; background: var(--ember); }
.lg-code i:nth-child(7) { width: 66%; margin-left: 18px; }
.lg-code i:nth-child(8) { width: 44%; margin-left: 36px; background: var(--signal); }
.lg-code i:nth-child(9) { width: 24%; margin-left: 18px; }
.lg-code i:nth-child(10) { width: 12%; }

/* Layer 04: hosting & care */
.lg-care { display: flex; align-items: flex-end; gap: 6px; height: 100%; padding-top: 30px; box-sizing: border-box; }
.lg-care i { flex: 1; border-radius: 3px; background: var(--signal); opacity: 0.85; }
.lg-care i:nth-child(odd) { height: 72%; } .lg-care i:nth-child(even) { height: 86%; }
.lg-care i:nth-child(3n) { height: 64%; } .lg-care i:nth-child(5n) { height: 92%; }

.lg-stack__hint {
	position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
	font-family: var(--mono); font-size: 0.75rem; color: var(--slate); letter-spacing: 0.04em;
}

@media (max-width: 900px) {
	:root .lg-hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.lg-stack { height: 400px; }
	.lg-stack__scene { transform: rotateX(58deg) rotateZ(-36deg) scale(0.78); }
}

/* Page heads (inner pages) ------------------------------------------------- */
.lg-pagehead { padding-block: clamp(64px, 9vw, 120px) clamp(32px, 4vw, 56px); }
.lg-pagehead .lg-wrap { display: grid; gap: 22px; justify-items: start; }
.lg-pagehead .lg-display { max-width: 15ch; font-size: clamp(2.6rem, 5.6vw, 4.8rem) !important; }
.lg-pagehead .lg-lede { margin-top: 0 !important; }
.lg-pagehead + .lg-section { padding-top: clamp(24px, 4vw, 48px); }

/* Cards / grids -------------------------------------------------------------- */
:root .lg-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
:root .lg-grid > * { margin: 0; }
.lg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lg-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .lg-grid--3, .lg-grid--2 { grid-template-columns: 1fr; } }

.lg-card {
	border: 1px solid var(--line); border-radius: 18px;
	padding: clamp(24px, 3vw, 36px);
	background: color-mix(in srgb, #fff 55%, var(--paper));
	display: grid; gap: 14px; align-content: start;
}
.lg-card__num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); }
.lg-card p:not([class]) { color: var(--slate); }
.lg-card__proof {
	margin-top: 8px !important; padding-top: 16px; border-top: 1px dashed var(--line);
	font-size: 0.92rem; font-weight: 600;
}

/* Services list ------------------------------------------------------------- */
.lg-service {
	display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px, 4vw, 64px);
	padding-block: clamp(32px, 4vw, 52px);
	border-top: 1px solid var(--line);
}
.lg-service:last-child { border-bottom: 1px solid var(--line); }
:root .lg-service-list > *, :root .lg-service > *, :root .lg-service__head > *, :root .lg-service__body > * { margin: 0; }
.lg-service__head { display: grid; gap: 12px; align-content: start; justify-items: start; }
.lg-service__head h2 { margin-top: 0 !important; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.lg-service__price {
	font-family: var(--mono); font-size: 0.82rem;
	background: var(--stone); padding: 6px 12px; border-radius: 999px;
}
.lg-service__body { display: grid; gap: 18px; align-content: start; }
.lg-service__body > p:not([class]) { font-size: 1.1rem; color: var(--slate); }
.lg-service__link a { color: var(--ember); font-weight: 600; text-decoration: none; }
.lg-service__link a::after { content: " \2192"; }
@media (max-width: 900px) { .lg-service { grid-template-columns: 1fr; } }

/* "Won't do" list */
:root .lg-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
:root .lg-split > * { margin: 0; }
@media (max-width: 900px) { :root .lg-split { grid-template-columns: 1fr; } }
:root .lg-nots { list-style: none; padding: 0; border-top: 1px solid var(--line); }
:root .lg-nots li {
	margin: 0; position: relative;
	padding: 20px 0 20px 44px; border-bottom: 1px solid var(--line);
	font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.lg-nots li::before {
	content: "\2715"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--mono); font-size: 1rem; color: color-mix(in srgb, var(--ember) 60%, #fff);
}

/* Contact */
.lg-email__address a {
	font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.lg-email__address a:hover { color: var(--ember); }

/* Process -------------------------------------------------------------------- */
.lg-process { background: var(--stone); }
.lg-step { position: relative; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); display: grid; gap: 10px; align-content: start; }
.lg-step__num {
	font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ember);
}
.lg-step p:not([class]) { color: var(--slate); }
.lg-step__get { font-size: 0.92rem; font-weight: 600; margin-top: 4px !important; }
.lg-step__get::before { content: "You get: "; font-family: var(--mono); font-weight: 400; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--signal); }
:root .lg-process .lg-grid { row-gap: clamp(36px, 5vw, 56px); }

/* Pricing -------------------------------------------------------------------- */
.lg-price {
	border: 1px solid var(--line); border-radius: 18px;
	padding: clamp(26px, 3vw, 36px);
	background: color-mix(in srgb, #fff 55%, var(--paper));
	display: grid; gap: 14px; align-content: start;
}
.lg-price__name { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.lg-price__amount { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; }
.lg-price__amount small { font-size: 0.4em; font-family: var(--wp--preset--font-family--manrope); color: var(--slate); margin-right: 6px; }
.lg-price__amount span { display: block; margin-top: 8px; font-size: 0.85rem; letter-spacing: 0; font-family: var(--wp--preset--font-family--manrope); color: var(--slate); }
.lg-price__desc { color: var(--slate); font-size: 0.98rem; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.lg-note { margin-top: 28px !important; font-size: 0.92rem; color: var(--slate); }
.lg-note a { color: var(--ink); }

/* Always there (dark) -------------------------------------------------------- */
.lg-there { background: var(--night); color: var(--paper); --line: color-mix(in srgb, var(--paper) 16%, transparent); }
.lg-there .lg-eyebrow { color: color-mix(in srgb, var(--ember) 60%, #fff); }
.lg-there .lg-lede, .lg-there .lg-price__desc, .lg-there .lg-price__name,
.lg-there .lg-price__amount span, .lg-there .lg-price__amount small { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.lg-there .lg-price { background: color-mix(in srgb, var(--paper) 4%, transparent); }
.lg-there .lg-ticks li::before { background: color-mix(in srgb, var(--signal) 22%, transparent); }
.lg-there .lg-ticks li::after { border-color: #4fd39a; }

.lg-log {
	margin-top: clamp(40px, 5vw, 64px);
	border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
	font-family: var(--mono); font-size: 0.9rem;
	max-width: 720px;
}
.lg-log__head {
	display: flex; justify-content: space-between; padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: 0.78rem;
	text-transform: uppercase; letter-spacing: 0.06em;
}
.lg-log ol { list-style: none; margin: 0; padding: 18px; display: grid; gap: 12px; }
.lg-log li { display: flex; gap: 14px; color: color-mix(in srgb, var(--paper) 86%, transparent); }
.lg-log b { color: #4fd39a; font-weight: 500; }
.lg-log b.is-next { color: color-mix(in srgb, var(--ember) 60%, #fff); }

/* FAQ ------------------------------------------------------------------------ */
.lg-faq__list { max-width: 860px; border-top: 1px solid var(--line); }
:root .lg-faq__list > * { margin: 0; }
.lg-faq__item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.lg-faq__item summary {
	cursor: pointer; list-style: none;
	padding: 22px 40px 22px 0; position: relative;
	font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.45rem);
}
.lg-faq__item summary::-webkit-details-marker { display: none; }
.lg-faq__item summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--mono); font-size: 1.3rem; color: var(--ember); transition: transform 0.2s;
}
.lg-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lg-faq__item p { color: var(--slate); max-width: 64ch; padding-bottom: 24px; }

/* Final CTA ------------------------------------------------------------------ */
.lg-cta { background: var(--stone); text-align: center; }
.lg-cta .lg-wrap { display: grid; justify-items: center; gap: 20px; }
.lg-cta h2 { max-width: 20ch; margin-top: 0 !important; }
.lg-cta .lg-lede { margin-top: 0 !important; }

/* Footer --------------------------------------------------------------------- */
.lg-footer { background: var(--night); color: var(--paper); padding-block: 56px 40px; }
:root .lg-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
:root .lg-footer__inner > *, :root .lg-footer__brand > * { margin: 0; }
.lg-footer__brand { display: grid; gap: 8px; }
.lg-footer__line { color: color-mix(in srgb, var(--paper) 60%, transparent); font-size: 0.95rem; }
.lg-footer__nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 0.92rem; }
.lg-footer__legal {
	grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
	font-size: 0.82rem; color: color-mix(in srgb, var(--paper) 50%, transparent);
}
@media (max-width: 720px) { :root .lg-footer__inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.lg-status::before { animation: none; }
}