/* ==========================================================================
   Jose Maldonado FSE — custom.css
   Covers what theme.json/global styles can't: the hero Venn graphic,
   card hover motion, scroll-reveal, and section-specific layout.
   Color/type tokens below map to the palette + font families defined
   in theme.json, so if you change a color there, update the var name
   here too (they're WordPress preset CSS custom properties).
   ========================================================================== */

:root{
	--jm-ink: var(--wp--preset--color--ink);
	--jm-paper: var(--wp--preset--color--paper);
	--jm-linen: var(--wp--preset--color--linen);
	--jm-linen-deep: var(--wp--preset--color--linen-deep);
	--jm-brass: var(--wp--preset--color--brass);
	--jm-brass-deep: var(--wp--preset--color--brass-deep);
	--jm-ocean: var(--wp--preset--color--ocean);
	--jm-ocean-deep: var(--wp--preset--color--ocean-deep);
	--jm-line: rgba(27,24,18,0.14);
	--jm-shadow: 0 10px 30px rgba(27,24,18,0.08);
	--jm-font-mono: var(--wp--preset--font-family--mono);
	--jm-font-display: var(--wp--preset--font-family--display);
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Eyebrow labels ---------- */
.jm-eyebrow{
	font-family: var(--jm-font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jm-ocean-deep);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}
.jm-eyebrow::before{
	content: "";
	width: 22px;
	height: 1px;
	background: var(--jm-brass-deep);
	display: inline-block;
}
.jm-eyebrow-light{ color: var(--jm-brass); }
.jm-eyebrow-light::before{ background: var(--jm-brass); }

.jm-section-head{ max-width: 640px; margin-bottom: 48px; }

h1 em, h2 em{ font-style: italic; font-weight: 500; color: var(--jm-brass-deep); }
.jm-about h2 em{ color: var(--jm-brass); }

/* ---------- Hero ---------- */
.jm-hero{ padding-top: 48px; padding-bottom: 24px; }
.jm-lede{ max-width: 46ch; }
.jm-hero-stats{ margin-top: 40px; }
.jm-hero-stats p{ font-family: var(--jm-font-mono); font-size: 12px; color: var(--jm-ink); text-transform: uppercase; letter-spacing: 0.05em; }
.jm-hero-stats strong{ display: block; font-family: var(--jm-font-display); font-size: 24px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.jm-venn-wrap{ display: flex; justify-content: center; }
.jm-venn-wrap svg{ width: 100%; height: auto; max-width: 420px; }
.jm-venn-draw{
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
	animation: jm-draw 2.4s ease forwards 0.3s;
}
@keyframes jm-draw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .jm-venn-draw{ stroke-dashoffset: 0; animation: none; } }

.jm-btn-ghost .wp-block-button__link{
	background: transparent;
	color: var(--jm-ink);
	border: 1px solid var(--jm-ink);
}
.wp-block-button__link:hover{
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(27,24,18,0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ---------- Services ---------- */
.jm-services-grid{ gap: 1px; background: var(--jm-line); border: 1px solid var(--jm-line); border-radius: 8px; overflow: hidden; }
.jm-service-card{ background: var(--jm-paper); padding: 32px 28px; transition: background 0.3s ease; }
.jm-service-card:hover{ background: var(--jm-linen-deep); }
.jm-service-num{ font-family: var(--jm-font-mono); color: var(--jm-brass-deep); display: block; margin-bottom: 16px; }
.jm-service-card ul{ margin-top: 16px; }
.jm-service-card ul li{ padding: 8px 0; border-top: 1px solid var(--jm-line); list-style: none; padding-left: 14px; position: relative; }
.jm-service-card ul li::before{ content: "—"; color: var(--jm-ocean); position: absolute; left: 0; }

/* ---------- Work ---------- */
.jm-work-grid{ gap: 24px; }
.jm-work-card{ background: var(--jm-paper); border: 1px solid var(--jm-line); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; padding-bottom: 24px; }
.jm-work-card:hover{ transform: translateY(-4px); box-shadow: var(--jm-shadow); }
.jm-work-shot{
	aspect-ratio: 16/10;
	background: linear-gradient(160deg, var(--jm-ocean) 0%, var(--jm-ink) 100%);
	display: flex;
	align-items: flex-end;
	padding: 16px;
	margin-bottom: 20px;
}
.jm-work-shot p{ font-family: var(--jm-font-mono); font-size: 11px; text-transform: uppercase; color: var(--jm-paper); background: rgba(27,24,18,0.55); padding: 6px 10px; border-radius: 3px; display: inline-block; }
.jm-work-card > *:not(.jm-work-shot){ padding-left: 24px; padding-right: 24px; }
.jm-work-tag{ font-family: var(--jm-font-mono); text-transform: uppercase; color: var(--jm-brass-deep); letter-spacing: 0.05em; }
.jm-work-link a{ font-family: var(--jm-font-mono); text-transform: uppercase; font-size: 12px; border-bottom: 1px solid var(--jm-ink); padding-bottom: 2px; }
.jm-work-link a:hover{ color: var(--jm-ocean-deep); border-color: var(--jm-ocean-deep); }

/* ---------- About ---------- */
.jm-about{ padding-top: 72px; padding-bottom: 72px; }
.jm-pull{ font-family: var(--jm-font-display); font-style: italic; margin: 20px 0; }
.jm-how-list li{ display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(238,232,217,0.16); list-style: none; }
.jm-how-list li:last-child{ border-bottom: 1px solid rgba(238,232,217,0.16); }
.jm-how-list li::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jm-brass); margin-top: 7px; flex-shrink: 0; }

/* ---------- Process ---------- */
.jm-process-row{ counter-reset: step; }
.jm-step{ padding-top: 22px; border-top: 2px solid var(--jm-ink); }
.jm-step-num{ font-family: var(--jm-font-mono); color: var(--jm-brass-deep); display: block; margin-bottom: 10px; }

/* ---------- Testimonials ---------- */
.jm-testi-grid{ gap: 24px; }
.jm-testi-card{ background: var(--jm-paper); border: 1px solid var(--jm-line); border-radius: 8px; padding: 26px; }
.jm-testi-flag{ font-family: var(--jm-font-mono); font-size: 10px; text-transform: uppercase; color: var(--jm-ocean-deep); background: rgba(43,102,96,0.1); display: inline-block; padding: 4px 8px; border-radius: 3px; margin-bottom: 14px; }
.jm-testi-quote{ font-family: var(--jm-font-display); font-style: italic; }
.jm-testi-who{ font-family: var(--jm-font-mono); text-transform: uppercase; color: rgba(27,24,18,0.55); }

/* ---------- Contact ---------- */
.jm-contact{ background: var(--jm-linen-deep); padding-top: 64px; padding-bottom: 64px; }
.jm-direct-line{ margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--jm-line); font-family: var(--jm-font-mono); }
.jm-form-placeholder{ background: var(--jm-paper); border: 1px dashed var(--jm-line); border-radius: 8px; padding: 28px; }

/* ---------- Scroll reveal (JS toggles .jm-in) ---------- */
.jm-reveal{ opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.jm-reveal.jm-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .jm-reveal{ opacity: 1; transform: none; transition: none; } }

/* ---------- Sticky header blur (JS toggles .jm-scrolled on the header part) ---------- */
.jm-scrolled{
	background: rgba(238,232,217,0.86) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}