/**
 * Peptide Marketing — base styles.
 * Site-wide reset, typography and chrome (topbar / nav / footer) shared by
 * every block. Block-specific layout lives in each block's own style.css.
 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--pm-black);
	color: var(--pm-white);
	font-family: var(--pm-font-body);
	font-size: 16.5px;
	line-height: 1.65;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.wrap, .container {
	max-width: var(--pm-wrap-width);
	margin: 0 auto;
	padding: 0 var(--pm-gutter);
}

.pm-section { padding: var(--pm-section-pad) 0; border-bottom: 1px solid var(--pm-line); }
.pm-section--flush { border-bottom: none; }

.pm-kicker {
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pm-blue);
	font-weight: 600;
	font-family: var(--pm-font-display);
}
h1.pm-h1, .pm-h1 {
	font-family: var(--pm-font-display);
	font-weight: 800;
	font-size: clamp(36px, 6vw, 62px);
	letter-spacing: -.03em;
	line-height: 1.04;
	margin: 14px 0 0;
}
h2.pm-h2, .pm-h2 {
	font-family: var(--pm-font-display);
	font-weight: 700;
	font-size: clamp(26px, 4vw, 36px);
	letter-spacing: -.02em;
	margin: 10px 0 16px;
}
h3.pm-h3, .pm-h3 {
	font-family: var(--pm-font-display);
	font-weight: 600;
	font-size: 19px;
	margin: 0 0 6px;
}
.pm-p { color: var(--pm-text-body); max-width: 66ch; margin: 0; }
.pm-p + .pm-p { margin-top: 12px; }
.pm-lead { font-size: 19px; color: var(--pm-text-lead); margin-top: 18px; }
.pm-muted { color: var(--pm-muted); font-size: 14px; }

.pm-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.pm-btn {
	font-family: var(--pm-font-display);
	font-weight: 600;
	font-size: 16px;
	border-radius: var(--pm-radius-sm);
	padding: 14px 26px;
	text-decoration: none;
	display: inline-block;
	border: none;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pm-btn:hover { transform: translateY(-2px); }
.pm-btn:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
/* Mobile: stack CTA buttons full-width instead of two different widths
   sized to their own text (e.g. "Book a 30-min call" vs "See the numbers"). */
@media (max-width: 600px) {
	.pm-btns { flex-direction: column; }
	.pm-btn { width: 100%; text-align: center; }
}
.pm-btn-primary { background: var(--pm-blue); color: #0A0A0A; }
.pm-btn-primary:hover { background: var(--pm-blue-hover); }
.pm-btn-secondary { background: transparent; color: var(--pm-white); border: 1px solid var(--pm-hairline); }
.pm-btn-secondary:hover { border-color: var(--pm-muted); }

.pm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.pm-reveal.in { opacity: 1; transform: none; }
.pm-reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.pm-reveal-stagger.in > * { opacity: 1; transform: none; }
.pm-reveal-stagger.in > *:nth-child(2) { transition-delay: .09s; }
.pm-reveal-stagger.in > *:nth-child(3) { transition-delay: .18s; }
.pm-reveal-stagger.in > *:nth-child(4) { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
	.pm-reveal, .pm-reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

.pm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.pm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 860px) { .pm-grid-3 { grid-template-columns: 1fr; } .pm-grid-2 { grid-template-columns: 1fr; } }
.pm-card { background: var(--pm-panel); border: 1px solid var(--pm-line); border-radius: var(--pm-radius); padding: 26px 24px; transition: transform .25s ease, border-color .25s ease; }
.pm-card:hover { transform: translateY(-4px); border-color: var(--pm-hairline-hover); }
.pm-card:hover .pm-ico { background: rgba(79,127,255,.16); transform: translateY(-2px); }
.pm-card p { font-size: 15px; color: var(--pm-muted); margin: 0; }
.pm-card p + p { margin-top: 10px; }
.pm-card h3 { margin-bottom: 6px; }

/*
 * Inline links inside body copy (RichText-authored text, rendered via
 * wp_kses_post). The site-wide `a { color: inherit }` reset above means
 * these would otherwise be invisible — the same muted/body color as the
 * text around them. Chrome links (nav, buttons, footer, badges, topbar)
 * all set their own explicit color via a more specific selector already,
 * so they're unaffected by this. One rule here instead of repeating it in
 * every block that renders user-authored paragraphs.
 */
.pm-p a, .pm-lead a, .pm-muted a, .pm-card p a, .pm-hero-sub a,
.pm-step p a, .pm-step-get a, .pm-faq-a a, .pm-quote blockquote a {
	color: var(--pm-blue);
	text-decoration: underline;
	text-decoration-color: rgba(79, 127, 255, .35);
	text-underline-offset: 2px;
}
.pm-p a:hover, .pm-lead a:hover, .pm-muted a:hover, .pm-card p a:hover, .pm-hero-sub a:hover,
.pm-step p a:hover, .pm-step-get a:hover, .pm-faq-a a:hover, .pm-quote blockquote a:hover {
	text-decoration-color: var(--pm-blue);
}

.pm-ico {
	width: 44px; height: 44px; border-radius: 11px;
	background: var(--pm-blue-soft); border: 1px solid var(--pm-blue-soft-border);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 14px; flex: none; transition: all .25s ease;
}
.pm-ico svg { width: 22px; height: 22px; stroke: var(--pm-blue); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Stats row — shared by pm/hero and pm/services-grid so both preview identically */
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--pm-line); border: 1px solid var(--pm-line); border-radius: var(--pm-radius); overflow: hidden; margin-top: 40px; }
.pm-stat { background: var(--pm-panel); padding: 24px 22px; }
.pm-stat b { font-family: var(--pm-font-display); font-weight: 800; font-size: 32px; letter-spacing: -.02em; display: block; color: var(--pm-blue); transition: color .3s ease; }
.pm-stat span { font-size: 13.5px; color: var(--pm-muted); display: block; }

/* ---------- Topbar ---------- */
.pm-topbar { background: #0D0D0D; border-bottom: 1px solid var(--pm-line); font-size: 13.5px; }
.pm-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 42px; }
.pm-topbar a { color: #C9C9C4; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.pm-topbar a:hover { color: var(--pm-white); }
.pm-topbar .pm-topbar-contacts { display: flex; gap: 22px; align-items: center; }
.pm-topbar .pm-topbar-socials { display: flex; gap: 14px; align-items: center; }
.pm-topbar svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.pm-topbar .pm-topbar-socials a { color: var(--pm-muted); }
.pm-topbar .pm-topbar-socials a:hover { color: var(--pm-blue); }
.pm-region-switch { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.pm-region-switch .pm-rs-label { font-size: 12.5px; color: var(--pm-muted); margin-right: 8px; display: inline-flex; align-items: center; gap: 5px; }
.pm-region-switch a { font-size: 12.5px; color: #C9C9C4; text-decoration: none; padding: 3px 9px; border: 1px solid var(--pm-line); border-radius: 6px; transition: all .2s ease; }
.pm-region-switch a:hover { border-color: var(--pm-blue); color: var(--pm-white); }
.pm-region-switch a[aria-current="page"] { background: var(--pm-blue); color: #0A0A0A; border-color: var(--pm-blue); }
@media (max-width: 680px) {
	.pm-topbar .pm-topbar-contacts { gap: 14px; }
	.pm-topbar .pm-topbar-contacts .pm-label { display: none; }
	/*
	 * .pm-topbar-inner also has the .wrap class (padding: 0 24px), but this
	 * rule has equal specificity and comes later in the cascade, so it was
	 * winning outright and zeroing the side padding back to 0 — pinning the
	 * mail/phone/social icons flush against the viewport edge. On many
	 * phones that puts them inside the OS's edge-swipe gesture zone (e.g.
	 * iOS Safari's back-swipe), so taps there get eaten by the gesture
	 * instead of reaching the link — likely why they "don't work" on tap.
	 */
	.pm-topbar-inner { height: auto; padding: 8px var(--pm-gutter); flex-wrap: wrap; gap: 10px; }
	.pm-region-switch .pm-rs-label { display: none; }
	/* With the label hidden, the tappable area shrinks to the bare 15px
	   icon — well under the ~44px touch target phones/guidelines expect.
	   Padding enlarges the tap area without changing the icon's own size. */
	.pm-topbar .pm-topbar-contacts a { padding: 8px 4px; margin: -8px -4px; }
}

/* ---------- Nav ---------- */
.pm-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pm-line); }
.pm-nav.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.pm-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.pm-brand { font-family: var(--pm-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pm-brand b { color: var(--pm-blue); font-weight: 700; }
.pm-brand img { max-height: 32px; width: auto; }
.pm-nav-links { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.pm-nav-links li { position: relative; }
.pm-nav-links a { text-decoration: none; font-size: 14.5px; color: #C9C9C4; font-weight: 500; }
.pm-nav-links > li > a:hover, .pm-nav-links a[aria-current="page"] { color: var(--pm-white); }
.pm-nav-cta { background: var(--pm-blue); color: #0A0A0A !important; font-family: var(--pm-font-display); font-weight: 600; padding: 9px 18px; border-radius: 8px; }
.pm-nav-toggle { display: none; background: none; border: 1px solid var(--pm-line); color: var(--pm-white); border-radius: 8px; padding: 8px 12px; font-size: 18px; cursor: pointer; }

/* Sub-menu (WP menu-editor nested items) styled as a dropdown */
.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.menu-item-has-children > a::after { content: "\25BE"; font-size: 11px; transition: transform .2s ease; }
.menu-item-has-children:hover > a::after, .menu-item-has-children.pm-open > a::after { transform: rotate(180deg); }
.sub-menu {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
	background: #111; border: 1px solid var(--pm-line); border-radius: 14px; padding: 8px; width: 300px;
	opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 60;
	box-shadow: 0 16px 40px rgba(0,0,0,.5); list-style: none; margin: 0;
}
/* Invisible bridge over the 14px gap above the dropdown. Without this, the
   mouse leaves the trigger's hover box while crossing the gap on its way
   down to the menu, the :hover chain breaks, and the dropdown closes
   before you can reach it — the "disappears when I try to select it" bug. */
.sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.menu-item-has-children:hover .sub-menu, .menu-item-has-children.pm-open .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 11px 14px; border-radius: 9px; transition: background .15s ease; }
.sub-menu a:hover { background: var(--pm-panel); }
.sub-menu a b { display: block; font-family: var(--pm-font-display); font-weight: 600; font-size: 14.5px; color: var(--pm-white); }
.sub-menu a span { display: block; font-size: 12.5px; color: var(--pm-muted); margin-top: 1px; }
@media (max-width: 820px) {
	.pm-nav-toggle { display: block; }
	.pm-nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--pm-black); border-bottom: 1px solid var(--pm-line); flex-direction: column; align-items: flex-start; padding: 18px 24px; gap: 16px; }
	/* With "Services" expanded (7 items), the list can be taller than the
	   viewport. Scroll the panel itself instead of letting content run past
	   the screen edge uncontrolled, and pin the CTA (below) to the bottom so
	   it's always visible without having to scroll down past every item. */
	.pm-nav-links.is-open { display: flex; max-height: calc(100vh - 68px); overflow-y: auto; }
	.menu-item-has-children { width: 100%; }
	.sub-menu { position: static; transform: none; opacity: 1; visibility: visible; width: 100%; border: none; box-shadow: none; background: transparent; padding: 6px 0 6px 12px; display: none; }
	/*
	 * Same specificity as the desktop ".menu-item-has-children:hover .sub-menu,
	 * .menu-item-has-children.pm-open .sub-menu { transform: translateX(-50%) ... }"
	 * rule above (both are 3 classes deep) — a plain ".sub-menu { transform: none }"
	 * here can't win against that rule on specificity alone, media query or not,
	 * so it re-declares the same selector to override it (equal specificity,
	 * later source order wins). Without this, tapping "Services" on mobile
	 * still applies translateX(-50%), shifting the submenu left by 50% of its
	 * own width — which is 100% on mobile — pushing most of it off-screen.
	 */
	.menu-item-has-children.pm-open .sub-menu { display: block; transform: none; }
	.pm-nav-cta-li {
		position: sticky; bottom: 0; z-index: 2;
		background: var(--pm-black); padding-top: 12px; margin-top: 4px;
	}
}

/* ---------- Footer ---------- */
.pm-footer { padding: 56px 0 40px; }
.pm-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 760px) { .pm-foot { grid-template-columns: 1fr; } }
.pm-foot p { font-size: 14px; color: var(--pm-muted); max-width: 38ch; }
.pm-foot h4 { font-family: var(--pm-font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-text-lead); margin-bottom: 12px; }
.pm-foot ul { list-style: none; margin: 0; padding: 0; }
.pm-foot li { margin: 8px 0; }
.pm-foot a { color: var(--pm-muted); text-decoration: none; font-size: 14.5px; }
.pm-foot a:hover { color: var(--pm-white); }
.pm-foot-socials { display: flex; gap: 12px; margin-top: 14px; }
.pm-foot-socials a { width: 34px; height: 34px; border: 1px solid var(--pm-line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--pm-muted); transition: all .2s ease; }
.pm-foot-socials a:hover { color: var(--pm-blue); border-color: var(--pm-hairline-hover); }
.pm-foot-socials svg { width: 16px; height: 16px; fill: currentColor; }
.pm-foot-contact { }
.pm-foot-contact li { display: flex; align-items: center; gap: 9px; color: var(--pm-muted); font-size: 14.5px; margin: 8px 0; }
.pm-foot-contact svg { width: 15px; height: 15px; fill: currentColor; flex: none; color: var(--pm-blue); }
.pm-foot-contact a { color: var(--pm-muted); }
.pm-foot-contact a:hover { color: var(--pm-white); }
.pm-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pm-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--pm-panel); border: 1px solid var(--pm-line); border-radius: 10px; padding: 9px 13px; font-size: 12.5px; color: #C9C9C4; text-decoration: none; transition: border-color .2s ease; }
.pm-badge:hover { border-color: var(--pm-hairline-hover); }
.pm-badge svg { width: 16px; height: 16px; flex: none; }
.pm-badge .pm-tick { color: var(--pm-green); }
.pm-legal { border-top: 1px solid var(--pm-line); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-legal p { font-size: 12.5px; color: #6E6E69; margin: 0; }